@tryvitris/website-harness 0.1.0-beta.5 → 0.1.0-beta.7

package/blocks/blog/blog-featured/README.md

@@ -1,39 +0,0 @@
-# blog-featured
-
-One featured + side list.
-
-- **Category:** blog
-- **Media:** covers
-- **Registers:** professional, b2b
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `media` | Featured cover `<img>` (16:9) |
-| `featured` | `<p class="eyebrow">` meta, `<h3><a>` title, `<p>` excerpt, `.btn-arrow` |
-| `posts` | 3–5 compact `<a class="c-blog-featured__row">`: `<span class="eyebrow">` meta + `<strong>` title |
-
-## Example
-
-```html
-<blog-featured>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the blog</p>
-  <h2 slot="heading">Latest</h2>
-  <img src="/media/harvest/post-1.jpg" alt="" width="1600" height="900" slot="media" loading="lazy">
-  <p slot="featured" class="eyebrow">Guides · 6 min read</p>
-  <h3 slot="featured"><a href="/blog/roof-lifespan">How long does an asphalt roof actually last in Maine?</a></h3>
-  <p slot="featured">The brochure says 30 years. Here's what we see on tear-offs after 15, 20, and 25 winters — and the three things that make the difference.</p>
-  <a slot="featured" class="btn-arrow" href="/blog/roof-lifespan">Read the guide</a>
-  <a slot="posts" class="c-blog-featured__row" href="/blog/repair-or-replace"><span class="eyebrow">Money · 4 min</span><strong>Repair or replace? A five-question checklist</strong></a>
-  <a slot="posts" class="c-blog-featured__row" href="/blog/recycling"><span class="eyebrow">Behind the scenes · 3 min</span><strong>What happens to your old shingles</strong></a>
-  <a slot="posts" class="c-blog-featured__row" href="/blog/ice-dams"><span class="eyebrow">Winter · 5 min</span><strong>Ice dams: what causes them and what doesn't</strong></a>
-  <a slot="posts" class="c-blog-featured__row" href="/blog/metal-vs-shingle"><span class="eyebrow">Materials · 7 min</span><strong>Metal vs. shingle in a coastal climate</strong></a>
-</blog-featured>
-```
-
-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/blog/blog-featured/styles.css

@@ -1,12 +0,0 @@
-.c-blog-featured__grid{display:grid;gap:var(--space-6)}
-@media(min-width:900px){.c-blog-featured__grid{grid-template-columns:3fr 2fr;gap:var(--space-7);align-items:start}}
-.c-blog-featured__lead .card__body{padding:var(--space-6);gap:var(--space-3)}
-.c-blog-featured__lead .card__body > .eyebrow{font-size:.75rem}
-.c-blog-featured__lead .card__body > h3{font-size:var(--step-3)}
-.c-blog-featured__lead h3 a{text-decoration:none;color:inherit}
-.c-blog-featured__lead h3 a:hover{color:var(--color-accent)}
-.c-blog-featured__list{display:grid;border-top:1px solid var(--color-border)}
-.c-blog-featured__row{display:grid;gap:var(--space-1);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);text-decoration:none;color:inherit}
-.c-blog-featured__row .eyebrow{font-size:.75rem}
-.c-blog-featured__row strong{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;line-height:1.3;letter-spacing:-.01em}
-.c-blog-featured__row:hover strong{color:var(--color-accent)}

package/blocks/blog/blog-featured/template.html

@@ -1 +0,0 @@
-<section class="c-blog-featured section section--muted"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-blog-featured__grid"><article class="card c-blog-featured__lead"><div class="card__media ratio-16x9"><slot name="media"></slot></div><div class="card__body"><slot name="featured"></slot></div></article><div class="c-blog-featured__list"><slot name="posts"></slot></div></div></div></section>

package/blocks/blog/blog-index/README.md

@@ -1,34 +0,0 @@
-# blog-index
-
-Post card grid.
-
-- **Category:** blog
-- **Media:** cover images
-- **Registers:** b2b, professional, food
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `actions` | Optional link (e.g. "All posts") |
-| `posts` | 3 or 6 `<article class="card card--interactive">`: linked `.card__media.ratio-16x9`, `<p class="eyebrow">` meta, `<h3><a>`, `<p>` excerpt, `.btn-arrow` |
-
-## Example
-
-```html
-<blog-index>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Guides</p>
-  <h2 slot="heading">Straight answers about roofs</h2>
-  <p slot="lede" class="lede">Written by the people who install them, not a content agency.</p>
-  <a slot="actions" class="btn-outline" href="/blog">All posts</a>
-  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-1.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Guides · 6 min read</p><h3><a href="/blog/post">How long does an asphalt roof actually last in Maine?</a></h3><p>The brochure says 30 years. Here's what we see on tear-offs, and what shortens or extends it.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
-  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-2.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Money · 4 min read</p><h3><a href="/blog/post">Repair or replace? A five-question checklist</a></h3><p>Most roofs we're asked to replace don't need it yet. Run through these before you get quotes.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
-  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-3.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Behind the scenes · 3 min read</p><h3><a href="/blog/post">What happens to your old shingles</a></h3><p>About 90% of what comes off your roof gets recycled into road base. Here's how.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
-</blog-index>
-```
-
-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/blog/blog-index/styles.css

@@ -1,6 +0,0 @@
-.c-blog-index .card h3 a{text-decoration:none;color:inherit}
-.c-blog-index .card h3 a:hover{color:var(--color-accent)}
-.c-blog-index .card .card__body > .eyebrow{font-size:.75rem}
-.c-blog-index .card .card__body > h3{font-size:var(--step-2)}
-.c-blog-index .card .card__media{display:block}
-.c-blog-index__grid .card__body{gap:var(--space-2)}

package/blocks/blog/blog-index/template.html

@@ -1 +0,0 @@
-<section class="c-blog-index section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="grid grid--3 c-blog-index__grid"><slot name="posts"></slot></div></div></section>

package/blocks/blog/blog-post-header/README.md

@@ -1,31 +0,0 @@
-# blog-post-header
-
-Article title block.
-
-- **Category:** blog
-- **Media:** optional hero
-- **Registers:** all
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `meta` | `<span>` category · read time · date |
-| `(default)` | `<h1>` + `<p class="lede lede--lg">` standfirst |
-| `byline` | Optional `.byline` with avatar + author |
-| `media` | Optional cover `<img>` (21:9) |
-
-## Example
-
-```html
-<blog-post-header>
-  <span slot="meta">Guides · 6 min read · March 12, 2026</span>
-  <h1>How long does an asphalt roof actually last in Maine?</h1>
-  <p class="lede lede--lg">The brochure says 30 years. Here's what we see on tear-offs after 15, 20, and 25 winters — and the three things that make the difference.</p>
-  <div slot="byline" class="byline"><img src="/media/harvest/team-mike.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Mike Harbor</strong><span>Founder, 26 years on roofs</span></div></div>
-  <img src="/media/harvest/post-1.jpg" alt="Close-up of aged asphalt shingles" width="2100" height="900" slot="media" fetchpriority="high">
-</blog-post-header>
-```
-
-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/blog/blog-post-header/styles.css

@@ -1,8 +0,0 @@
-.c-blog-post-header__inner{max-width:46rem;margin-inline:auto;display:grid;gap:var(--space-4);text-align:center;justify-items:center}
-.c-blog-post-header__inner h1{font-size:var(--step-4);max-width:22ch}
-.c-blog-post-header__meta:empty{display:none}
-.c-blog-post-header__byline{margin-top:var(--space-2)}
-.c-blog-post-header__byline:empty{display:none}
-.c-blog-post-header__byline .byline{text-align:left}
-.c-blog-post-header__media{margin-top:var(--space-7);box-shadow:none}
-.c-blog-post-header__media:not(:has(img,video)){display:none}

package/blocks/blog/blog-post-header/template.html

@@ -1 +0,0 @@
-<header class="c-blog-post-header section"><div class="wrap"><div class="c-blog-post-header__inner"><p class="eyebrow eyebrow--accent c-blog-post-header__meta"><slot name="meta"></slot></p><slot></slot><div class="c-blog-post-header__byline"><slot name="byline"></slot></div></div><div class="frame ratio-21x9 c-blog-post-header__media"><slot name="media"></slot></div></div></header>

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

@@ -1,32 +0,0 @@
-# contact-cards
-
-Phone / email / address cards.
-
-- **Category:** contact
-- **Media:** none
-- **Registers:** trade, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `cards` | 3 `.card` items: `.icon-tile`, `<h3>` label, `<p>` value (with `<a>`), `<p>` note |
-
-## Example
-
-```html
-<contact-cards>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Get in touch</p>
-  <h2 slot="heading">Three ways to reach us</h2>
-  <p slot="lede" class="lede">Pick whichever is easiest — they all land with the same two people.</p>
-  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><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><h3>Call</h3><p><a href="tel:+15550102000">(555) 010-2000</a></p><p>Mon–Fri 7:30–5:00</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><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><h3>Email</h3><p><a href="mailto:hello@harborroofing.example">hello@harborroofing.example</a></p><p>Replies within one business day</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><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><h3>Visit</h3><p><a href="https://maps.example/harbor" rel="noopener">12 Harbor St, Portland</a></p><p>Free parking out back</p></div></div>
-</contact-cards>
-```
-
-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-cards/styles.css

@@ -1,7 +0,0 @@
-.c-contact-cards__grid{max-width:64rem;margin-inline:auto}
-.c-contact-cards__grid .card__body{padding:var(--space-6);gap:var(--space-2);text-align:center;justify-items:center}
-.c-contact-cards__grid .card__body > .icon-tile{margin-bottom:var(--space-3)}
-.c-contact-cards__grid .card__body > h3{font-size:var(--step-1)}
-.c-contact-cards__grid .card__body > p a{font-weight:600;color:var(--color-text);text-decoration:none}
-.c-contact-cards__grid .card__body > p a:hover{color:var(--color-accent)}
-.c-contact-cards__grid .card__body > p + p{font-size:var(--step-0)}

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

@@ -1 +0,0 @@
-<section class="c-contact-cards section section--muted"><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 grid--3 c-contact-cards__grid"><slot name="cards"></slot></div></div></section>

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

@@ -1,41 +0,0 @@
-# contact-chips
-
-Lead form with pill choices (what / budget) beside a short intro.
-
-- **Category:** contact
-- **Media:** none
-- **Registers:** b2b, beauty, professional, trade
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `details` | Optional 1–3 `<a>` rows (`.icon-tile` + `<span><strong>value</strong><span>note</span></span>`) |
-| `fields` | `<fieldset class="chips">` groups (radio inputs) followed by `.field`s |
-| `submit` | `<button class="btn" type="submit">` + optional `<small>` |
-
-## Example
-
-```html
-<contact-chips>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Work with Hive</p>
-  <h2 slot="heading">Tell us about the project.</h2>
-  <p slot="lede" class="lede">Two quick choices, then a sentence or two. We reply within one business day.</p>
-  <a slot="details" href="mailto:hello@hive.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@hive.example</strong><span>Portfolio requests welcome</span></span></a>
-  <a slot="details" href="tel:+15550104040"><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-4040</strong><span>Tue–Fri, 10–5</span></span></a>
-  <fieldset slot="fields" class="chips"><legend>How can we help?</legend><label><input type="radio" name="service" value="logo" checked><span>Logo design</span></label><label><input type="radio" name="service" value="identity"><span>Brand identity</span></label><label><input type="radio" name="service" value="rebrand"><span>Rebranding</span></label><label><input type="radio" name="service" value="icons"><span>Icon design</span></label></fieldset>
-  <fieldset slot="fields" class="chips"><legend>What's your budget range?</legend><label><input type="radio" name="budget" value="10-20" checked><span>$10k – $20k</span></label><label><input type="radio" name="budget" value="20-50"><span>$20k – $50k</span></label><label><input type="radio" name="budget" value="50-100"><span>$50k – $100k</span></label><label><input type="radio" name="budget" value="100+"><span>$100k +</span></label></fieldset>
-  <div slot="fields" class="field"><label for="cc-name">Your name</label><input class="input" id="cc-name" name="name" autocomplete="name" required></div>
-  <div slot="fields" class="field"><label for="cc-email">Email</label><input class="input" id="cc-email" name="email" type="email" autocomplete="email" required></div>
-  <div slot="fields" class="field"><label for="cc-company">Company</label><input class="input" id="cc-company" name="company" autocomplete="organization"></div>
-  <div slot="fields" class="field"><label for="cc-msg">Tell us about the project</label><textarea class="textarea" id="cc-msg" name="message" placeholder="What you make, who it's for, and when you'd like to launch."></textarea></div>
-  <button slot="submit" class="btn" type="submit">Kick things off</button>
-  <small slot="submit">No retainers, no surprise invoices. We'll send a scope before any work starts.</small>
-</contact-chips>
-```
-
-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-chips/styles.css

@@ -1,13 +0,0 @@
-.c-contact-chips__grid{display:grid;gap:var(--space-6)}
-.c-contact-chips__copy .section__head{margin-bottom:var(--space-5)}
-.c-contact-chips__details{display:grid;gap:var(--space-4)}
-.c-contact-chips__details:empty{display:none}
-.c-contact-chips__details > a{display:flex;gap:var(--space-4);align-items:flex-start;text-decoration:none;color:inherit}
-.c-contact-chips__details > a > span:last-child{display:grid;gap:.15rem}
-.c-contact-chips__details strong{font-weight:600}
-.c-contact-chips__details > a > span:last-child > span{color:var(--color-muted);font-size:var(--step-0)}
-.c-contact-chips__form{gap:var(--space-5);max-width:36rem}
-.c-contact-chips__form .field + .field{margin-top:0}
-.c-contact-chips__submit{display:grid;gap:var(--space-2);justify-items:start}
-.c-contact-chips__submit small{color:var(--color-muted)}
-@media(min-width:900px){.c-contact-chips__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-9);align-items:start}.c-contact-chips__copy{position:sticky;top:calc(var(--header-h) + var(--space-5))}}

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

@@ -1 +0,0 @@
-<section class="c-contact-chips section"><div class="wrap c-contact-chips__grid"><div class="c-contact-chips__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-contact-chips__details"><slot name="details"></slot></div></div><form class="c-contact-chips__form form-grid" data-lead-form method="post" action="/api/lead"><slot name="fields"></slot><div class="c-contact-chips__submit"><slot name="submit"></slot></div></form></div></section>

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

@@ -1,41 +0,0 @@
-# contact-hours
-
-Hours table + CTA.
-
-- **Category:** contact
-- **Media:** none
-- **Registers:** trade, food, beauty
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `actions` | 1–2 buttons |
-| `hours` | 7 `<tr>` rows: `<th scope="row">Day</th><td>Hours</td>`; add `class="is-today"` to highlight |
-| `note` | Optional `<small>` under the table (holidays, last seating) |
-
-## Example
-
-```html
-<contact-hours>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Hours</p>
-  <h2 slot="heading">Open six days. Closed Sundays and most holidays.</h2>
-  <p slot="lede" class="lede">Kitchen closes 30 minutes before we do.</p>
-  <a slot="actions" class="btn" href="/reserve">Reserve a table</a>
-  <a slot="actions" class="btn-outline" href="tel:+15550102000">Call</a>
-  <tr slot="hours"><th scope="row">Monday</th><td>Closed</td></tr>
-  <tr slot="hours"><th scope="row">Tuesday</th><td>5:00 – 10:00 pm</td></tr>
-  <tr slot="hours"><th scope="row">Wednesday</th><td>5:00 – 10:00 pm</td></tr>
-  <tr slot="hours" class="is-today"><th scope="row">Thursday</th><td>5:00 – 10:00 pm</td></tr>
-  <tr slot="hours"><th scope="row">Friday</th><td>5:00 – 11:00 pm</td></tr>
-  <tr slot="hours"><th scope="row">Saturday</th><td>4:30 – 11:00 pm</td></tr>
-  <tr slot="hours"><th scope="row">Sunday</th><td>Closed</td></tr>
-  <small slot="note">Closed Thanksgiving, Dec 24–26, and Jan 1.</small>
-</contact-hours>
-```
-
-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-hours/block.meta.json

@@ -1,87 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "contact/contact-hours",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "19aa27804b5a70f29808a862c4ec108b865e787677edf07aa16c9a552dc033c2",
-  "fit": {
-    "visitorJobs": [
-      "Find opening hours and contact the business"
-    ],
-    "pageRoles": [
-      "practical contact"
-    ],
-    "useWhen": [
-      "Find opening hours and contact the business"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "heading",
-      "actions",
-      "hours"
-    ],
-    "optionalSlots": [
-      "eyebrow",
-      "lede",
-      "note"
-    ],
-    "testedItemCounts": [
-      1
-    ]
-  },
-  "media": {
-    "min": 0,
-    "max": 8,
-    "optionalBehavior": "Recompose without empty media frames when media is optional",
-    "aspect": [
-      "content-dependent"
-    ]
-  },
-  "composition": {
-    "hierarchy": "information split",
-    "alignment": "left",
-    "density": "compact",
-    "mediaProminence": "none",
-    "geometry": [
-      "split",
-      "table"
-    ],
-    "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-hours.json"
-  }
-}

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

@@ -1,8 +0,0 @@
-.c-contact-hours__copy .section__head{margin-bottom:var(--space-5)}
-.c-contact-hours__card{padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-3)}
-.c-contact-hours__table th{font-weight:500;color:var(--color-text);text-transform:none;letter-spacing:0;font-size:var(--step-1)}
-.c-contact-hours__table td{color:var(--color-muted);font-variant-numeric:tabular-nums}
-.c-contact-hours__table tr:last-child th,.c-contact-hours__table tr:last-child td{border-bottom:0}
-.c-contact-hours__table .is-today th,.c-contact-hours__table .is-today td{color:var(--color-accent);font-weight:600}
-.c-contact-hours__card small{color:var(--color-muted)}
-@media(min-width:720px){.c-contact-hours .split{grid-template-columns:3fr 2fr;align-items:center}}

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

@@ -1 +0,0 @@
-<section class="c-contact-hours section"><div class="wrap split split--top"><div class="c-contact-hours__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="card c-contact-hours__card"><table class="table table--plain c-contact-hours__table"><tbody><slot name="hours"></slot></tbody></table><slot name="note"></slot></div></div></section>

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

@@ -1,39 +0,0 @@
-# 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

@@ -1,10 +0,0 @@
-.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

@@ -1 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-# 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

@@ -1,8 +0,0 @@
-.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

@@ -1 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-# 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.