@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/blocks/contact/contact-map/README.md

@@ -0,0 +1,39 @@
+# contact-map
+
+Media/map still beside details.
+
+- **Category:** contact
+- **Media:** map or storefront
+- **Registers:** trade, food, beauty
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | Static map image or storefront photo (4:3) |
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `details` | 3 `<a>` rows (same markup as contact-split) |
+| `actions` | 1–2 buttons (directions, call) |
+
+## Example
+
+```html
+<contact-map>
+  <img src="/media/harvest/map.jpg" alt="Map showing 12 Harbor St, Portland" width="1200" height="900" slot="media" loading="lazy">
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Find us</p>
+  <h2 slot="heading">Bakery &amp; café, East End</h2>
+  <p slot="lede" class="lede">Corner of Harbor and Fore. Look for the blue awning.</p>
+  <a slot="details" href="tel:+15550102000"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg></span><span><strong>(555) 010-2000</strong><span>Mon–Fri 7:30–5:00 · Sat by appointment</span></span></a>
+  <a slot="details" href="mailto:hello@harborroofing.example"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><strong>hello@harborroofing.example</strong><span>We reply within one business day</span></span></a>
+  <a slot="details" href="https://maps.example/harbor" rel="noopener"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg></span><span><strong>12 Harbor St, Portland, ME 04101</strong><span>Free parking behind the building</span></span></a>
+  <a slot="actions" class="btn" href="https://maps.example/harbor" rel="noopener">Get directions</a>
+  <a slot="actions" class="btn-outline" href="tel:+15550102000">Call ahead</a>
+</contact-map>
+```
+
+Variants: `<contact-map variant="reverse">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/contact/contact-map/styles.css

@@ -0,0 +1,10 @@
+.c-contact-map__copy{display:grid;gap:var(--space-5)}
+.c-contact-map__copy .section__head{margin-bottom:0}
+.c-contact-map__media{display:block;box-shadow:none;border:1px solid var(--color-border)}
+.c-contact-map__details{display:grid;gap:var(--space-4);list-style:none;margin:0;padding:0}
+.c-contact-map__details > a{display:flex;gap:var(--space-4);align-items:flex-start;text-decoration:none;color:inherit}
+.c-contact-map__details > a > span:last-child{display:grid;gap:.15rem}
+.c-contact-map__details strong{font-weight:600}
+.c-contact-map__details > a > span:last-child > span{color:var(--color-muted);font-size:var(--step-0)}
+.c-contact-map__details > a:hover strong{color:var(--color-accent)}
+.c-contact-map--reverse .split > :first-child{order:2}

package/blocks/contact/contact-map/template.html

@@ -0,0 +1 @@
+<section class="c-contact-map section"><div class="wrap split"><a class="frame ratio-4x3 c-contact-map__media" href="https://maps.example" rel="noopener"><slot name="media"></slot></a><div class="c-contact-map__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-contact-map__details"><slot name="details"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div></div></section>

package/blocks/contact/contact-offices/README.md

@@ -0,0 +1,32 @@
+# contact-offices
+
+One card per location: map still, address, phone, email.
+
+- **Category:** contact
+- **Media:** map or storefront still per office
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `offices` | 2–4 `<article class="card"><div class="card__media ratio-4x3"><img></div><div class="card__body"><h3>City</h3><p>Address</p><p><a href="tel:">…</a><br><a href="mailto:">…</a></p></div></article>` |
+
+## Example
+
+```html
+<contact-offices>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our offices</p>
+  <h2 slot="heading">Senior counsel on the ground in each jurisdiction.</h2>
+  <p slot="lede" class="lede">Walk in, write in, or call — the response is the same.</p>
+  <article slot="offices" class="card"><div class="card__media ratio-4x3"><img src="/media/harvest/map-ny.jpg" alt="Map of lower Manhattan" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>New York</h3><p>One Liberty Plaza<br>New York, NY 10006</p><p><a href="tel:+12125550142">+1 (212) 555-0142</a><br><a href="mailto:newyork@verdict.example">newyork@verdict.example</a></p></div></article>
+  <article slot="offices" class="card"><div class="card__media ratio-4x3"><img src="/media/harvest/map-dc.jpg" alt="Map of downtown Washington" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Washington, D.C.</h3><p>900 17th Street NW<br>Washington, D.C. 20006</p><p><a href="tel:+12025550188">+1 (202) 555-0188</a><br><a href="mailto:dc@verdict.example">dc@verdict.example</a></p></div></article>
+  <article slot="offices" class="card"><div class="card__media ratio-4x3"><img src="/media/harvest/map-london.jpg" alt="Map of the City of London" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>London</h3><p>30 St Mary Axe<br>London EC3A 8BF</p><p><a href="tel:+442079460500">+44 20 7946 0500</a><br><a href="mailto:london@verdict.example">london@verdict.example</a></p></div></article>
+</contact-offices>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/contact/contact-offices/styles.css

@@ -0,0 +1,8 @@
+.c-contact-offices__grid{--gap:var(--space-4)}
+.c-contact-offices__grid .card__body{gap:var(--space-3)}
+.c-contact-offices__grid .card__body h3{font-size:var(--step-2)}
+.c-contact-offices__grid .card__body p{line-height:1.6}
+.c-contact-offices__grid .card__body a{color:var(--color-text);text-decoration:none}
+.c-contact-offices__grid .card__body a:hover{color:var(--color-accent)}
+@media(min-width:720px){.c-contact-offices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(min-width:1080px){.c-contact-offices__grid{grid-template-columns:repeat(3,minmax(0,1fr));--gap:var(--space-5)}}

package/blocks/contact/contact-offices/template.html

@@ -0,0 +1 @@
+<section class="c-contact-offices section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid c-contact-offices__grid"><slot name="offices"></slot></div></div></section>

package/blocks/contact/contact-phone-first/README.md

@@ -0,0 +1,33 @@
+# contact-phone-first
+
+A direct call path for businesses whose visitors need a conversation more than a form. Useful availability and alternate contact details remain visible. The example business and number are fictional.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** trade, professional, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional section label |
+| `heading` | `<h2>` with the purpose of contact |
+| `intro` | Optional explanation of who should call and what happens next |
+| `phone` | Labeled `tel:` link to a verified business number |
+| `details` | Optional hours, email, location, or response expectation |
+
+## Example
+
+```html
+<contact-phone-first>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Northline Counsel · fictional example</p>
+  <h2 slot="heading">Talk through the next step.</h2>
+  <p slot="intro" class="lede">Call the office to explain what you need. We will tell you who can help and how to prepare for a first meeting.</p>
+  <div slot="phone"><p class="eyebrow">Call the office</p><a href="tel:+12075550123">(207) 555-0123</a></div>
+  <p slot="details">Monday–Friday, 9 a.m.–5 p.m.</p>
+  <p slot="details"><a href="mailto:hello@example.test">hello@example.test</a></p>
+</contact-phone-first>
+```
+
+Use a real `tel:` destination, actual hours, and a fallback channel. If a form is essential, pair this with a suitable form section rather than hiding the form behind the phone treatment.

package/blocks/contact/contact-phone-first/block.meta.json

@@ -0,0 +1,86 @@
+{
+  "schemaVersion": 1,
+  "id": "contact/contact-phone-first",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "3623088d798410ade10459edfb313f50b0f28ce74b38f543c1eca2a08b61aee0",
+  "fit": {
+    "visitorJobs": [
+      "Call the business and find a backup channel"
+    ],
+    "pageRoles": [
+      "contact"
+    ],
+    "useWhen": [
+      "Call the business and find a backup channel"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "phone"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "intro",
+      "details"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "large phone action with practical details",
+    "alignment": "split",
+    "density": "compact",
+    "mediaProminence": "none",
+    "geometry": [
+      "phone-led",
+      "split"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/contact--contact-phone-first.json"
+  }
+}

package/blocks/contact/contact-phone-first/styles.css

@@ -0,0 +1,11 @@
+.c-contact-phone-first{background:var(--color-surface-2)}
+.c-contact-phone-first__layout{display:grid;gap:var(--space-7)}
+.c-contact-phone-first__lead{display:grid;gap:var(--space-4);align-content:start}
+.c-contact-phone-first__lead h2{max-width:16ch}
+.c-contact-phone-first__lead .lede{max-width:48ch}
+.c-contact-phone-first__details{display:grid;gap:var(--space-5);border-top:2px solid var(--color-accent);padding-top:var(--space-5)}
+.c-contact-phone-first__phone{display:grid;gap:var(--space-2)}
+.c-contact-phone-first__phone a{font-family:var(--font-display);font-size:clamp(1.7rem,1rem + 2.3vw,3rem);line-height:1.1;overflow-wrap:anywhere;text-decoration-thickness:.06em;text-underline-offset:.12em}
+.c-contact-phone-first__secondary{display:grid;gap:var(--space-3)}
+.c-contact-phone-first__secondary > *{margin:0}
+@media(min-width:850px){.c-contact-phone-first__layout{grid-template-columns:minmax(0,1fr) minmax(18rem,.85fr);gap:var(--space-8)}}

package/blocks/contact/contact-phone-first/template.html

@@ -0,0 +1 @@
+<section class="c-contact-phone-first section"><div class="wrap c-contact-phone-first__layout"><div class="c-contact-phone-first__lead"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><div class="c-contact-phone-first__details"><div class="c-contact-phone-first__phone"><slot name="phone"></slot></div><div class="c-contact-phone-first__secondary"><slot name="details"></slot></div></div></div></section>

package/blocks/contact/contact-split/README.md

@@ -0,0 +1,43 @@
+# contact-split
+
+NAP + lead form.
+
+- **Category:** contact
+- **Media:** optional map still
+- **Registers:** all
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `details` | 3 `<a>` rows: `.icon-tile` + `<span><strong>value</strong><span>note</span></span>` (phone, email, address) |
+| `form-title` | `<h3>` for the form card |
+| `form` | `<form data-lead-form class="form-grid">` with `.field`s and a `.btn` |
+
+## Example
+
+```html
+<contact-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Contact</p>
+  <h2 slot="heading">Tell us about the roof.</h2>
+  <p slot="lede" class="lede">A real person reads every message. Estimates are free and never pushy.</p>
+  <a slot="details" href="tel:+15550102000"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg></span><span><strong>(555) 010-2000</strong><span>Mon–Fri 7:30–5:00 · Sat by appointment</span></span></a>
+  <a slot="details" href="mailto:hello@harborroofing.example"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><strong>hello@harborroofing.example</strong><span>We reply within one business day</span></span></a>
+  <a slot="details" href="https://maps.example/harbor" rel="noopener"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg></span><span><strong>12 Harbor St, Portland, ME 04101</strong><span>Free parking behind the building</span></span></a>
+  <h3 slot="form-title">Request an estimate</h3>
+  <form slot="form" data-lead-form class="form-grid form-grid--2">
+    <div class="field"><label for="cs-name">Name</label><input class="input" id="cs-name" name="name" autocomplete="name" required></div>
+    <div class="field"><label for="cs-phone">Phone</label><input class="input" id="cs-phone" name="phone" type="tel" autocomplete="tel"></div>
+    <div class="field field--full"><label for="cs-email">Email</label><input class="input" id="cs-email" name="email" type="email" autocomplete="email" required></div>
+    <div class="field field--full"><label for="cs-msg">What's going on?</label><textarea class="textarea" id="cs-msg" name="message" placeholder="Leak over the kitchen, house built 1987, asphalt shingles…"></textarea></div>
+    <div class="field field--full"><button class="btn btn-lg" type="submit">Send request</button></div>
+    <small class="field--full">We'll call or email within one business day.</small>
+  </form>
+</contact-split>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/contact/contact-split/styles.css

@@ -0,0 +1,12 @@
+.c-contact-split__copy .section__head{margin-bottom:var(--space-6)}
+.c-contact-split__details{display:grid;gap:var(--space-4);list-style:none;margin:0;padding:0}
+.c-contact-split__details > a{display:flex;gap:var(--space-4);align-items:flex-start;text-decoration:none;color:inherit}
+.c-contact-split__details > a > span:last-child{display:grid;gap:.15rem}
+.c-contact-split__details strong{font-weight:600}
+.c-contact-split__details > a > span:last-child > span{color:var(--color-muted);font-size:var(--step-0)}
+.c-contact-split__details > a:hover strong{color:var(--color-accent)}
+.c-contact-split__card .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-contact-split__card h3{font-size:var(--step-2)}
+.c-contact-split__card .btn{justify-self:start}
+.c-contact-split__card small{color:var(--color-muted)}
+@media(min-width:720px){.c-contact-split .split{grid-template-columns:2fr 3fr}}

package/blocks/contact/contact-split/template.html

@@ -0,0 +1 @@
+<section class="c-contact-split section"><div class="wrap split split--top"><div class="c-contact-split__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-contact-split__details"><slot name="details"></slot></div></div><div class="card c-contact-split__card"><div class="card__body"><slot name="form-title"></slot><slot name="form"></slot></div></div></div></section>

package/blocks/contact/contact-visit/README.md

@@ -0,0 +1,36 @@
+# contact-visit
+
+Location, hours, and access information without relying on a decorative map. The address gets prominence; practical notes answer what a visitor needs before traveling. This is a fictional teaching example.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** food, beauty, professional, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional context label |
+| `heading` | `<h2>` about visiting |
+| `intro` | Optional arrival context |
+| `place` | Verified address in `<address>` |
+| `hours` | Current opening hours, including exceptions if relevant |
+| `access` | Optional access, transit, or parking information |
+| `actions` | Optional directions or booking link |
+
+## Example
+
+```html
+<contact-visit>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Visit us · fictional example</p>
+  <h2 slot="heading">Find us before you set out.</h2>
+  <p slot="intro" class="lede">The arrival details belong here when the visit is part of the service.</p>
+  <address slot="place">Example Studio<br>12 Sample Street<br>Portland, ME 04101</address>
+  <div slot="hours"><h3>Hours</h3><p>Monday–Friday, 9 a.m.–5 p.m.</p></div>
+  <div slot="access"><h3>Access</h3><p>Confirm entrance and accessibility details with the business before publishing.</p></div>
+  <a slot="actions" class="btn-outline" href="/contact">Contact the studio</a>
+</contact-visit>
+```
+
+This block works with no photo or map. Replace every address, hour, and access statement with checked facts; add an accurate map link if useful.

package/blocks/contact/contact-visit/block.meta.json

@@ -0,0 +1,88 @@
+{
+  "schemaVersion": 1,
+  "id": "contact/contact-visit",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "6c2f4f834640bbb77daef89b452da92ddaedcd4c0730d88ec051a805c77e6349",
+  "fit": {
+    "visitorJobs": [
+      "Find the address, hours, and access details"
+    ],
+    "pageRoles": [
+      "visit"
+    ],
+    "useWhen": [
+      "Find the address, hours, and access details"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "place",
+      "hours"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "intro",
+      "access",
+      "actions"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "place with practical details",
+    "alignment": "split",
+    "density": "medium",
+    "mediaProminence": "none",
+    "geometry": [
+      "place-led",
+      "split"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/contact--contact-visit.json"
+  }
+}

package/blocks/contact/contact-visit/styles.css

@@ -0,0 +1,13 @@
+.c-contact-visit{overflow-wrap:anywhere}
+.c-contact-visit__head{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}
+.c-contact-visit__head h2{max-width:18ch}
+.c-contact-visit__head p{max-width:56ch}
+.c-contact-visit__layout{display:grid;gap:var(--space-5)}
+.c-contact-visit__place{background:var(--color-surface-2);padding:var(--space-6);display:grid;align-content:end;min-height:18rem;min-width:0}
+.c-contact-visit__place address{font-style:normal;font-family:var(--font-display);font-size:var(--step-2);line-height:1.25}
+.c-contact-visit__practical{border-top:2px solid var(--color-accent);display:grid;gap:var(--space-4);align-content:start;padding-top:var(--space-4);min-width:0}
+.c-contact-visit .btn,.c-contact-visit .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-contact-visit__practical > *{margin:0}
+.c-contact-visit__practical h3{font-size:var(--step-1)}
+.c-contact-visit__practical .btn,.c-contact-visit__practical .btn-outline{justify-self:start}
+@media(min-width:800px){.c-contact-visit__layout{grid-template-columns:minmax(0,1.1fr) minmax(17rem,.7fr);gap:var(--space-7)}}

package/blocks/contact/contact-visit/template.html

@@ -0,0 +1 @@
+<section class="c-contact-visit section"><div class="wrap"><div class="c-contact-visit__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><div class="c-contact-visit__layout"><div class="c-contact-visit__place"><slot name="place"></slot></div><div class="c-contact-visit__practical"><slot name="hours"></slot><slot name="access"></slot><slot name="actions"></slot></div></div></div></section>

package/blocks/contact/service-areas/README.md

@@ -0,0 +1,32 @@
+# service-areas
+
+Towns we serve as chips, with a fallback line.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** trade, beauty, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `areas` | 6–16 `<li>` town names |
+| `note` | Optional `<p>` fallback ("Don't see your town?…") with a link |
+
+## Example
+
+```html
+<service-areas>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Service area</p>
+  <h2 slot="heading">Towns we cover in Greater Portland.</h2>
+  <p slot="lede" class="lede">If we can get a truck there before lunch, we'll roof it.</p>
+  <li slot="areas">Portland</li><li slot="areas">South Portland</li><li slot="areas">Falmouth</li><li slot="areas">Cape Elizabeth</li><li slot="areas">Scarborough</li><li slot="areas">Westbrook</li><li slot="areas">Yarmouth</li><li slot="areas">Cumberland</li><li slot="areas">Gorham</li><li slot="areas">Windham</li><li slot="areas">Freeport</li><li slot="areas">Saco</li>
+  <p slot="note">Don't see your town? If you're within 30 minutes of one of these, you're covered — <a href="/contact">just ask</a>.</p>
+</service-areas>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/contact/service-areas/styles.css

@@ -0,0 +1,9 @@
+.c-service-areas__grid{display:grid;gap:var(--space-5)}
+.c-service-areas__grid .section__head{margin-bottom:0}
+.c-service-areas__body{display:grid;gap:var(--space-4);align-content:start}
+.c-service-areas__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
+.c-service-areas__list > li{display:inline-flex;align-items:center;min-height:2.25rem;padding:.35rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--step-0);font-weight:500;background:var(--color-surface)}
+.c-service-areas__note{font-size:var(--step-0);color:var(--color-muted)}
+.c-service-areas__note:empty{display:none}
+.c-service-areas__note p{margin:0}
+@media(min-width:900px){.c-service-areas__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-9);align-items:start}}

package/blocks/contact/service-areas/template.html

@@ -0,0 +1 @@
+<section class="c-service-areas section"><div class="wrap c-service-areas__grid"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-service-areas__body"><ul class="c-service-areas__list"><slot name="areas"></slot></ul><div class="c-service-areas__note"><slot name="note"></slot></div></div></div></section>

package/blocks/content/glossary/README.md

@@ -0,0 +1,35 @@
+# glossary
+
+Term / definition grid — jargon a customer sees on an estimate.
+
+- **Category:** content
+- **Media:** none
+- **Registers:** trade, professional, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `terms` | 6–12 `<div><dt>Term</dt><dd>One-sentence definition.</dd></div>` |
+
+## Example
+
+```html
+<glossary>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Plain language</p>
+  <h2 slot="heading">Commonly used roofing terms</h2>
+  <p slot="lede" class="lede">The words you'll see on your estimate, each explained in one sentence.</p>
+  <div slot="terms"><dt>Decking</dt><dd>The wood sheets under your shingles — the surface everything else is fastened to.</dd></div>
+  <div slot="terms"><dt>Underlayment</dt><dd>The water barrier between shingles and decking. It catches what the shingles miss.</dd></div>
+  <div slot="terms"><dt>Flashing</dt><dd>Bent metal that seals the joints where your roof meets chimneys, walls, and skylights.</dd></div>
+  <div slot="terms"><dt>Drip edge</dt><dd>Metal along the roof's edges that steers runoff into the gutters instead of behind them.</dd></div>
+  <div slot="terms"><dt>Valley</dt><dd>The crease where two slopes meet — where the most water runs on your roof.</dd></div>
+  <div slot="terms"><dt>Ridge vent</dt><dd>A low-profile vent along the peak that lets hot attic air out.</dd></div>
+</glossary>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/content/glossary/styles.css

@@ -0,0 +1,6 @@
+.c-glossary__grid{display:grid;gap:var(--space-5) var(--space-7);margin:0}
+.c-glossary__grid > *{padding-top:var(--space-4);border-top:1px solid var(--color-border)}
+.c-glossary__grid dt{margin-bottom:var(--space-1);font-weight:600;font-size:var(--step-1)}
+.c-glossary__grid dd{margin:0;color:var(--color-muted);font-size:var(--step-0);line-height:1.6}
+@media(min-width:720px){.c-glossary__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(min-width:1080px){.c-glossary__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/blocks/content/glossary/template.html

@@ -0,0 +1 @@
+<section class="c-glossary section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><dl class="c-glossary__grid"><slot name="terms"></slot></dl></div></section>

package/blocks/content/list-split/README.md

@@ -0,0 +1,33 @@
+# list-split
+
+Label left, hairline rows right (values, process, challenge → result).
+
+- **Category:** content
+- **Media:** none
+- **Registers:** all
+- **Variants:** numbered
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `label` | `<h2>` short label |
+| `lede` | Optional `<p class="lede">` |
+| `rows` | 3–6 `<div><h3>Title</h3><p>One or two sentences.</p></div>` |
+
+## Example
+
+```html
+<list-split>
+  <h2 slot="label">How the work runs</h2>
+  <p slot="lede" class="lede">Four stages, one point of contact, no surprises at the end.</p>
+  <div slot="rows"><h3>Discovery</h3><p>We get to know your business, your customers, and what the mark needs to carry.</p></div>
+  <div slot="rows"><h3>Concept design</h3><p>Three directions, each exploring a distinct idea. You pick the one that feels like you.</p></div>
+  <div slot="rows"><h3>Refinement</h3><p>Colour, typography, and spacing tuned until it holds up on a truck door and a favicon.</p></div>
+  <div slot="rows"><h3>Delivery</h3><p>Final files in every format, a short guideline, and a call to walk your printer through it.</p></div>
+</list-split>
+```
+
+Variants: `<list-split variant="numbered">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/content/list-split/styles.css

@@ -0,0 +1,13 @@
+.c-list-split__grid{display:grid;gap:var(--space-5)}
+.c-list-split__label{display:grid;gap:var(--space-3);align-content:start}
+.c-list-split__label h2{font-size:var(--step-2)}
+.c-list-split__rows{counter-reset:row}
+.c-list-split__rows > *{display:grid;gap:var(--space-2);padding-block:var(--space-5);border-top:1px solid var(--color-border);counter-increment:row}
+.c-list-split__rows > :last-child{border-bottom:1px solid var(--color-border)}
+.c-list-split__rows h3{font-size:var(--step-1)}
+.c-list-split__rows p{margin:0;color:var(--color-muted);max-width:40rem}
+@media(min-width:720px){.c-list-split__grid{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--space-7)}}
+@media(min-width:1080px){.c-list-split__grid{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:var(--space-9)}}
+.c-list-split--numbered .c-list-split__rows > *{grid-template-columns:3rem minmax(0,1fr)}
+.c-list-split--numbered .c-list-split__rows > *::before{content:counter(row,decimal-leading-zero);grid-row:1/span 2;font-family:var(--font-display);font-size:var(--step-1);font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
+.c-list-split--numbered .c-list-split__rows > * > *{grid-column:2}

package/blocks/content/list-split/template.html

@@ -0,0 +1 @@
+<section class="c-list-split section"><div class="wrap c-list-split__grid"><div class="c-list-split__label sticky-col"><slot name="label"></slot><slot name="lede"></slot></div><div class="c-list-split__rows"><slot name="rows"></slot></div></div></section>

package/blocks/content/prose-split/README.md

@@ -0,0 +1,32 @@
+# prose-split
+
+Short label left, prose right; optional facts row (client, date, scope).
+
+- **Category:** content
+- **Media:** none
+- **Registers:** all
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `label` | `<h2>` short label ("Our story", "Project overview") |
+| `(default)` | 2–4 `<p>` paragraphs |
+| `meta` | Optional 2–4 `<div><span>Label</span><strong>Value</strong></div>` facts |
+
+## Example
+
+```html
+<prose-split>
+  <h2 slot="label">Project overview</h2>
+  <p>We worked with Nextdock from their earliest sketches, creating a logo that reflects speed and innovation. The new identity helped them attract early adopters and secure their first round of investment.</p>
+  <p>The system covers the wordmark, an app icon, packaging for the developer kit, and a set of motion rules for the product UI.</p>
+  <div slot="meta"><span>Client</span><strong>Nextdock</strong></div>
+  <div slot="meta"><span>Date</span><strong>March 2026</strong></div>
+  <div slot="meta"><span>Industry</span><strong>Technology</strong></div>
+  <div slot="meta"><span>Services</span><strong>Logo design</strong></div>
+</prose-split>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.