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

package/blocks/feature/feature-bento/template.html

@@ -1 +0,0 @@
-<section class="c-feature-bento section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="bento c-feature-bento__grid"><slot name="tiles"></slot></div></div></section>

package/blocks/feature/feature-compare-table/README.md

@@ -1,44 +0,0 @@
-# feature-compare-table
-
-"Why us" comparison table with a highlighted column.
-
-- **Category:** feature
-- **Media:** none
-- **Registers:** trade, b2b, professional
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `columns` | `<th>` cells: an empty first `<th>` (criteria), then one `<th class="is-us">` and 2–3 competitor `<th>` |
-| `rows` | 4–7 `<tr><th scope="row">Criterion</th><td class="is-us">…</td><td>…</td></tr>` |
-| `note` | Optional `<p>` footnote under the table |
-
-## Example
-
-```html
-<feature-compare-table>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Why Harbor</p>
-  <h2 slot="heading">Compare before you sign.</h2>
-  <p slot="lede" class="lede">Every roofer says they're the best. Here is what actually changes for you.</p>
-  <th slot="columns"><span class="visually-hidden">Criteria</span></th>
-  <th slot="columns" class="is-us">Harbor</th>
-  <th slot="columns">DIY</th>
-  <th slot="columns">General contractor</th>
-  <th slot="columns">Big-box franchise</th>
-  <tr slot="rows"><th scope="row">Cost</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>$$</td><td>$</td><td>$$$</td><td>$$$$</td></tr>
-  <tr slot="rows"><th scope="row">Turnaround</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>1–2 days</td><td>Weeks</td><td>2–3 weeks</td><td>4–6 weeks</td></tr>
-  <tr slot="rows"><th scope="row">Warranty</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>25-year, transferable</td><td><span aria-label="Not included">—</span></td><td>1 year</td><td>Limited</td></tr>
-  <tr slot="rows"><th scope="row">Who shows up</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Our own crew</td><td>You</td><td>Subcontractors</td><td>Whoever's free</td></tr>
-  <tr slot="rows"><th scope="row">Scheduling</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Around you</td><td>Weekends</td><td>Their backlog</td><td>Fixed slots</td></tr>
-  <p slot="note">Based on written quotes our customers shared with us in 2025. Your numbers will vary — ask for ours in writing.</p>
-</feature-compare-table>
-```
-
-Variants: `<feature-compare-table variant="dark">`.
-
-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/feature/feature-compare-table/styles.css

@@ -1,15 +0,0 @@
-.c-feature-compare-table__card{max-width:60rem;margin-inline:auto}
-.c-feature-compare-table__table{min-width:44rem}
-.c-feature-compare-table__table th,.c-feature-compare-table__table td{text-align:center;vertical-align:middle;white-space:nowrap}
-.c-feature-compare-table__table th:first-child,.c-feature-compare-table__table tbody th{text-align:left;font-weight:500;color:var(--color-text);letter-spacing:0;text-transform:none;font-size:var(--step-0)}
-.c-feature-compare-table__table thead th{padding-block:var(--space-4);white-space:nowrap}
-.c-feature-compare-table__table td{color:var(--color-muted)}
-.c-feature-compare-table__table .is-us{background:color-mix(in srgb,var(--color-accent) 9%,transparent);color:var(--color-text);font-weight:600}
-.c-feature-compare-table__table thead .is-us{color:var(--color-accent);font-weight:700}
-.c-feature-compare-table__table tbody tr:last-child td,.c-feature-compare-table__table tbody tr:last-child th{border-bottom:0}
-.c-feature-compare-table__table .icon{width:1rem;height:1rem;vertical-align:-.15em;margin-right:.3rem}
-.c-feature-compare-table__table .is-us .icon{color:var(--color-accent)}
-.c-feature-compare-table__note{max-width:42rem;margin:var(--space-4) auto 0;text-align:center;font-size:var(--step-0);color:var(--color-muted)}
-.c-feature-compare-table__note:empty{display:none}
-.c-feature-compare-table__note p{margin:0}
-.c-feature-compare-table--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}

package/blocks/feature/feature-compare-table/template.html

@@ -1 +0,0 @@
-<section class="c-feature-compare-table 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="card c-feature-compare-table__card"><div class="table-wrap"><table class="table c-feature-compare-table__table"><thead><tr><slot name="columns"></slot></tr></thead><tbody><slot name="rows"></slot></tbody></table></div></div><div class="c-feature-compare-table__note"><slot name="note"></slot></div></div></section>

package/blocks/feature/feature-comparison/README.md

@@ -1,34 +0,0 @@
-# feature-comparison
-
-Simple two-column compare cards.
-
-- **Category:** feature
-- **Media:** optional
-- **Registers:** b2b, trade, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `us` | `<h3>` + `<ul class="list-check">` for your approach |
-| `them` | `<h3>` + `<ul class="list-check">` for the typical alternative (use the x icon) |
-
-## Example
-
-```html
-<feature-comparison>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">The difference</p>
-  <h2 slot="heading">What you get with us vs. the low bid</h2>
-  <p slot="lede" class="lede">Both roofs look the same the day they're finished. Ask again in five winters.</p>
-  <h3 slot="us">Harbor Roofing</h3>
-  <ul slot="us" class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Full tear-off, deck inspected and repaired</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Ice-and-water shield 6 ft at eaves</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>New flashing, drip edge, and ridge vent</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>10-year workmanship warranty in writing</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Employees, not subcontractors</li></ul>
-  <h3 slot="them">Typical low bid</h3>
-  <ul slot="them" class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Shingles layered over the old roof</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Minimum-code underlayment</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Flashing reused where "it looks fine"</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>1-year warranty, verbal</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Whichever sub is free that week</li></ul>
-</feature-comparison>
-```
-
-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/feature/feature-comparison/styles.css

@@ -1,6 +0,0 @@
-.c-feature-comparison__grid{max-width:56rem;margin-inline:auto}
-.c-feature-comparison .card__body{padding:var(--space-6);gap:var(--space-4)}
-.c-feature-comparison .card__body > h3{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
-.c-feature-comparison .list-check{gap:var(--space-3)}
-.c-feature-comparison__them{color:var(--color-muted)}
-.c-feature-comparison__them .list-check li > .icon{color:var(--color-muted)}

package/blocks/feature/feature-comparison/template.html

@@ -1 +0,0 @@
-<section class="c-feature-comparison 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 grid--2 c-feature-comparison__grid"><div class="card card--accent c-feature-comparison__us"><div class="card__body"><slot name="us"></slot></div></div><div class="card card--flat c-feature-comparison__them"><div class="card__body"><slot name="them"></slot></div></div></div></div></section>

package/blocks/feature/feature-grid-3/README.md

@@ -1,34 +0,0 @@
-# feature-grid-3
-
-Three icon+title+blurb pillars.
-
-- **Category:** feature
-- **Media:** icons or small media
-- **Registers:** all
-- **Variants:** center, cards
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `items` | 3 or 6 items: each `<div>` with `.icon-tile`, `<h3>`, `<p>` |
-
-## Example
-
-```html
-<feature-grid-3>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Why homeowners call us first</p>
-  <h2 slot="heading">Built for Maine weather, priced for Maine budgets.</h2>
-  <p slot="lede" class="lede">Three things every crew member signs up for on day one.</p>
-  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Licensed &amp; insured</h3><p>State-licensed, fully insured, and OSHA-trained. Certificates are in the estimate packet, not on request.</p></div>
-  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span><h3>Written estimate in 48 hours</h3><p>Line-item pricing with the materials named. If it changes, you sign off before we proceed.</p></div>
-  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="9" r="6"/><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7"/></svg></span><h3>Ten-year workmanship warranty</h3><p>On top of the manufacturer's. If a seam we made leaks, we come back — no argument.</p></div>
-</feature-grid-3>
-```
-
-Variants: `<feature-grid-3 variant="center">` (also: `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/feature/feature-grid-3/styles.css

@@ -1,8 +0,0 @@
-.c-feature-grid-3__grid{--gap:var(--space-6)}
-.c-feature-grid-3__grid > *{display:grid;gap:var(--space-3);align-content:start}
-.c-feature-grid-3__grid > * > p{margin:0;color:var(--color-muted)}
-.c-feature-grid-3__grid > * > .icon-tile{margin-bottom:var(--space-2)}
-.c-feature-grid-3--center .section__head{margin-inline:auto;text-align:center;justify-items:center}
-.c-feature-grid-3--center .c-feature-grid-3__grid > *{text-align:center;justify-items:center}
-.c-feature-grid-3--cards .c-feature-grid-3__grid{--gap:var(--space-5)}
-.c-feature-grid-3--cards .c-feature-grid-3__grid > *{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}

package/blocks/feature/feature-grid-3/template.html

@@ -1 +0,0 @@
-<section class="c-feature-grid-3 section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-feature-grid-3__grid"><slot name="items"></slot></div></div></section>

package/blocks/feature/feature-icon-list/README.md

@@ -1,39 +0,0 @@
-# feature-icon-list
-
-Dense checklist of capabilities.
-
-- **Category:** feature
-- **Media:** icons
-- **Registers:** trade, b2b, professional
-- **Variants:** two-col
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `actions` | Optional 1–2 buttons under the copy |
-| `items` | 6–10 `<li>` with a check icon then text (`<strong>` for the lead phrase) |
-
-## Example
-
-```html
-<feature-icon-list>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Everything included</p>
-  <h2 slot="heading">What's in every roofing estimate</h2>
-  <p slot="lede" class="lede">No add-on fees for the things that make a roof last.</p>
-  <a slot="actions" class="btn" href="/contact">Get a free estimate</a>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Full tear-off and disposal</strong><span>We never layer new shingles over old.</span></span></li>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Ice-and-water shield to code</strong><span>Six feet at eaves and every valley.</span></span></li>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Ridge and soffit ventilation check</strong><span>Corrected if it isn't balanced.</span></span></li>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Drip edge and step flashing</strong><span>New aluminum, not reused.</span></span></li>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Magnetic nail sweep</strong><span>Lawn, driveway, and beds — twice.</span></span></li>
-  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Photos of the finished deck and underlayment</strong><span>Sent before shingles go on.</span></span></li>
-</feature-icon-list>
-```
-
-Variants: `<feature-icon-list variant="two-col">`.
-
-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/feature/feature-icon-list/styles.css

@@ -1,9 +0,0 @@
-.c-feature-icon-list__copy .section__head{margin-bottom:var(--space-5)}
-.c-feature-icon-list__list{gap:var(--space-4);font-size:var(--step-1)}
-.c-feature-icon-list__list li{padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}
-.c-feature-icon-list__list li:last-child{border-bottom:0;padding-bottom:0}
-.c-feature-icon-list__list li > .icon{width:1.35rem;height:1.35rem}
-.c-feature-icon-list__list strong{display:block;font-weight:600}
-.c-feature-icon-list__list span{color:var(--color-muted)}
-@media(min-width:720px){.c-feature-icon-list .split{grid-template-columns:2fr 3fr}}
-@media(min-width:900px){.c-feature-icon-list--two-col .c-feature-icon-list__list{grid-template-columns:1fr 1fr;column-gap:var(--space-6)}}

package/blocks/feature/feature-icon-list/template.html

@@ -1 +0,0 @@
-<section class="c-feature-icon-list section section--muted"><div class="wrap split split--top"><div class="c-feature-icon-list__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><ul class="list-check c-feature-icon-list__list"><slot name="items"></slot></ul></div></section>

package/blocks/feature/feature-spotlight/README.md

@@ -1,39 +0,0 @@
-# feature-spotlight
-
-One large feature with side bullets.
-
-- **Category:** feature
-- **Media:** hero media
-- **Registers:** beauty, food, b2b
-- **Variants:** reverse
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `media` | `<img>` 4:3 |
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `bullets` | 3–4 `<li>` with check icon |
-| `actions` | 1–2 buttons |
-
-## Example
-
-```html
-<feature-spotlight>
-  <img src="/media/harvest/color-bar.jpg" alt="Stylist mixing color at the bar" width="1600" height="1200" slot="media" loading="lazy">
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our color bar</p>
-  <h2 slot="heading">Formulas written down, so your color is repeatable.</h2>
-  <p slot="lede" class="lede">Every session ends with your exact mix in your file — any stylist here can match it next time.</p>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Ammonia-free lines for sensitive scalps</li>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Bond-builder included in every lightening service</li>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Free 15-minute consult before your first appointment</li>
-  <a slot="actions" class="btn" href="/book">Book a color consult</a>
-  <a slot="actions" class="btn-arrow" href="/services#color">Color pricing</a>
-</feature-spotlight>
-```
-
-Variants: `<feature-spotlight 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/feature/feature-spotlight/styles.css

@@ -1,5 +0,0 @@
-.c-feature-spotlight__copy{display:grid;gap:var(--space-5)}
-.c-feature-spotlight__copy .section__head{margin-bottom:0}
-.c-feature-spotlight__list{color:var(--color-text)}
-.c-feature-spotlight__list:empty{display:none}
-.c-feature-spotlight--reverse .split > :first-child{order:2}

package/blocks/feature/feature-spotlight/template.html

@@ -1 +0,0 @@
-<section class="c-feature-spotlight section"><div class="wrap split"><div class="frame ratio-4x3 c-feature-spotlight__media"><slot name="media"></slot></div><div class="c-feature-spotlight__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ul class="list-check c-feature-spotlight__list"><slot name="bullets"></slot></ul><div class="btn-group"><slot name="actions"></slot></div></div></div></section>

package/blocks/feature/feature-stats-band/README.md

@@ -1,33 +0,0 @@
-# feature-stats-band
-
-Four stats with optional count-up.
-
-- **Category:** feature
-- **Media:** none
-- **Registers:** trade, b2b, professional
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `stats` | 3–4 `.stat` blocks; add `data-count-to` on `.stat__value` for count-up |
-
-## Example
-
-```html
-<feature-stats-band>
-  <h2 slot="heading">Fifteen years, one zip code at a time.</h2>
-  <div slot="stats" class="stat"><p class="stat__value" data-count-to="1200" data-count-suffix="+">1200+</p><p class="stat__label">Roofs replaced</p></div>
-  <div slot="stats" class="stat"><p class="stat__value" data-count-to="15">15</p><p class="stat__label">Years in Portland</p></div>
-  <div slot="stats" class="stat"><p class="stat__value" data-count-to="98" data-count-suffix="%">98%</p><p class="stat__label">Would hire again</p></div>
-  <div slot="stats" class="stat"><p class="stat__value" data-count-to="0">0</p><p class="stat__label">Subcontractors</p></div>
-</feature-stats-band>
-```
-
-Variants: `<feature-stats-band variant="dark">`.
-
-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/feature/feature-stats-band/styles.css

@@ -1,8 +0,0 @@
-.c-feature-stats-band__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-5)}
-.c-feature-stats-band__row .stat{text-align:center;justify-items:center;padding-inline:var(--space-4)}
-.c-feature-stats-band__row .stat__value{font-size:var(--step-5)}
-@media(min-width:720px){
-  .c-feature-stats-band__row{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
-  .c-feature-stats-band__row .stat + .stat{border-left:1px solid var(--color-border)}
-}
-.c-feature-stats-band--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}

package/blocks/feature/feature-stats-band/template.html

@@ -1 +0,0 @@
-<section class="c-feature-stats-band section section--muted" data-island="counter"><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="c-feature-stats-band__row"><slot name="stats"></slot></div></div></section>

package/blocks/feature/feature-tabs/README.md

@@ -1,38 +0,0 @@
-# feature-tabs
-
-Tabbed feature panels.
-
-- **Category:** feature
-- **Media:** optional per-panel media
-- **Registers:** b2b, professional
-- **Variants:** pill
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `tabs` | A `.tabs__list[role=tablist]` of `button.tabs__tab[role=tab]`, then one `.tabs__panel[role=tabpanel]` per tab (`hidden` on all but the first). Panels can use `.split`. |
-
-## Example
-
-```html
-<feature-tabs>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
-  <h2 slot="heading">Pick the plan that fits how you run the building.</h2>
-  <div slot="tabs" class="tabs__list" role="tablist">
-    <button type="button" class="tabs__tab" role="tab" id="ft-1" aria-controls="ft-p1" aria-selected="true">Preventive</button>
-    <button type="button" class="tabs__tab" role="tab" id="ft-2" aria-controls="ft-p2" aria-selected="false">On-call</button>
-    <button type="button" class="tabs__tab" role="tab" id="ft-3" aria-controls="ft-p3" aria-selected="false">Retrofit</button>
-  </div>
-  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p1" aria-labelledby="ft-1"><div><h3>Quarterly visits, zero surprises</h3><p>Filters, belts, coils, and refrigerant checked on a schedule. You get a report with photos after every visit.</p><a class="btn-arrow" href="/plans">Plan details</a></div><div class="frame ratio-4x3"><img src="/media/harvest/rooftop-unit.jpg" alt="Technician servicing a rooftop unit" width="1200" height="900" loading="lazy"></div></div>
-  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p2" aria-labelledby="ft-2" hidden><div><h3>Four-hour response, 24/7</h3><p>A dispatcher who knows your buildings and a truck stocked for your equipment.</p><a class="btn-arrow" href="/plans#on-call">How dispatch works</a></div><div class="frame ratio-4x3"><img src="/media/harvest/van-night.jpg" alt="Service van at night" width="1200" height="900" loading="lazy"></div></div>
-  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p3" aria-labelledby="ft-3" hidden><div><h3>Replace before it fails</h3><p>Lifecycle planning for units past 15 years, with rebate paperwork handled for you.</p><a class="btn-arrow" href="/plans#retrofit">Retrofit process</a></div><div class="frame ratio-4x3"><img src="/media/harvest/new-unit.jpg" alt="New condenser install" width="1200" height="900" loading="lazy"></div></div>
-</feature-tabs>
-```
-
-Variants: `<feature-tabs variant="pill">`.
-
-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/feature/feature-tabs/styles.css

@@ -1,7 +0,0 @@
-.c-feature-tabs__tabs .tabs__panel{padding-top:var(--space-4)}
-.c-feature-tabs__tabs .tabs__panel > div{display:grid;gap:var(--space-3);align-content:center}
-.c-feature-tabs__tabs .tabs__panel h3{font-size:var(--step-3)}
-.c-feature-tabs__tabs .tabs__panel p{color:var(--color-muted)}
-.c-feature-tabs--pill .tabs__list{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background:var(--color-surface-2);border-radius:var(--radius-pill);width:fit-content}
-.c-feature-tabs--pill .tabs__tab{border:0;margin:0;min-height:2.5rem;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill)}
-.c-feature-tabs--pill .tabs__tab[aria-selected="true"]{background:var(--color-surface);box-shadow:var(--shadow-1)}

package/blocks/feature/feature-tabs/template.html

@@ -1 +0,0 @@
-<section class="c-feature-tabs section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="tabs c-feature-tabs__tabs" data-island="tabs"><slot name="tabs"></slot></div></div></section>

package/blocks/feature/feature-thumb-list/README.md

@@ -1,38 +0,0 @@
-# feature-thumb-list
-
-Copy + large photo beside a stack of thumbnail cards.
-
-- **Category:** feature
-- **Media:** one hero photo + 3–4 thumbnails
-- **Registers:** trade, b2b, beauty
-- **Variants:** dark, reverse
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
-| `media` | Optional `<img>` (4:3) shown under the copy |
-| `items` | 3–4 `<article class="card"><img> <div class="card__body"><h3>…</h3><p>…</p></div></article>` |
-
-## Example
-
-```html
-<feature-thumb-list>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">What you're buying</p>
-  <h2 slot="heading">More than shingles. It's a system.</h2>
-  <p slot="lede" class="lede">Every roof we build is engineered as a whole — decking, underlayment, flashing, and ventilation — so it holds up for decades, not a few years.</p>
-  <a slot="actions" class="btn-arrow" href="/process">How we build it <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
-  <img src="/media/harvest/roof-layers.jpg" alt="Cross-section of roof layers on a job site" width="1200" height="900" slot="media" loading="lazy">
-  <article slot="items" class="card"><img src="/media/harvest/thumb-shingle.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Built to last</h3><p>Thick, impact-rated shingles built to take hail and high wind.</p></div></article>
-  <article slot="items" class="card"><img src="/media/harvest/thumb-flashing.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Locked down tight</h3><p>Metal flashing seals every roof-to-wall seam against wind and rain.</p></div></article>
-  <article slot="items" class="card"><img src="/media/harvest/thumb-ridge.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Holds its line</h3><p>A crisp, dead-straight ridge line — true from the road and true up close.</p></div></article>
-</feature-thumb-list>
-```
-
-Variants: `<feature-thumb-list variant="dark">` (also: `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/feature/feature-thumb-list/styles.css

@@ -1,13 +0,0 @@
-.c-feature-thumb-list__grid{display:grid;gap:var(--space-6)}
-.c-feature-thumb-list__copy{display:grid;gap:var(--space-5);align-content:start}
-.c-feature-thumb-list__copy .section__head{margin-bottom:0}
-.c-feature-thumb-list__copy .btn-group:empty{display:none}
-.c-feature-thumb-list__media:empty{display:none}
-.c-feature-thumb-list__items{display:grid;gap:var(--space-3);align-content:center}
-.c-feature-thumb-list__items .card{flex-direction:row;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3)}
-.c-feature-thumb-list__items .card > img{flex:none;width:5.5rem;height:5.5rem;object-fit:cover;border-radius:var(--radius-md)}
-.c-feature-thumb-list__items .card__body{padding:0;gap:var(--space-1)}
-.c-feature-thumb-list__items .card__body h3{font-size:var(--step-1)}
-.c-feature-thumb-list__items .card__body p{font-size:var(--step-0)}
-@media(min-width:900px){.c-feature-thumb-list__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}.c-feature-thumb-list--reverse .c-feature-thumb-list__copy{order:2}}
-.c-feature-thumb-list--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}

package/blocks/feature/feature-thumb-list/template.html

@@ -1 +0,0 @@
-<section class="c-feature-thumb-list section"><div class="wrap c-feature-thumb-list__grid"><div class="c-feature-thumb-list__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 class="frame ratio-4x3 c-feature-thumb-list__media"><slot name="media"></slot></div></div><div class="c-feature-thumb-list__items"><slot name="items"></slot></div></div></section>

package/blocks/feature/feature-zigzag/README.md

@@ -1,31 +0,0 @@
-# feature-zigzag
-
-Alternating copy/media story rows.
-
-- **Category:** feature
-- **Media:** media per row
-- **Registers:** trade, beauty, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `rows` | 2–4 rows: each `<div class="split">` with a `.frame.ratio-4x3` media div and a copy div (`<h3>`, `<p>`, optional `.btn-arrow`). Rows alternate automatically. |
-
-## Example
-
-```html
-<feature-zigzag>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">The process</p>
-  <h2 slot="heading">Three visits. One clear price. No surprises.</h2>
-  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/inspection.jpg" alt="Roof inspection with a drone" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">01 · Inspection</p><h3>We look at the whole roof, not the leak.</h3><p>Drone photos of every slope, a moisture reading in the attic, and a straight answer about repair vs. replace.</p><a class="btn-arrow" href="/process#inspection">What we check</a></div></div>
-  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/estimate.jpg" alt="Reviewing an estimate at a kitchen table" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">02 · Estimate</p><h3>Line items you can compare.</h3><p>Materials by brand, labor by day, and the permit fee shown separately. Valid for 60 days.</p><a class="btn-arrow" href="/process#estimate">Sample estimate</a></div></div>
-  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/install.jpg" alt="Crew installing shingles" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">03 · Install</p><h3>Most roofs done in two days.</h3><p>Tarps on the landscaping, a magnet sweep at the end of each day, and a walkthrough with the foreman before we invoice.</p><a class="btn-arrow" href="/process#install">Install day checklist</a></div></div>
-</feature-zigzag>
-```
-
-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/feature/feature-zigzag/styles.css

@@ -1,6 +0,0 @@
-.c-feature-zigzag__stack{display:grid;gap:var(--space-8)}
-.c-feature-zigzag__stack > .split > div:not([class*="ratio"]):not(.frame){display:grid;gap:var(--space-4);align-content:center}
-.c-feature-zigzag__stack h3{font-size:var(--step-3)}
-.c-feature-zigzag__stack p{color:var(--color-muted);max-width:36rem}
-.c-feature-zigzag__stack .eyebrow{margin-bottom:calc(var(--space-2) * -1)}
-@media(min-width:720px){.c-feature-zigzag__stack > .split:nth-child(even) > :first-child{order:2}}

package/blocks/feature/feature-zigzag/template.html

@@ -1 +0,0 @@
-<section class="c-feature-zigzag section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-feature-zigzag__stack"><slot name="rows"></slot></div></div></section>

package/blocks/footer/footer-columns/README.md

@@ -1,39 +0,0 @@
-# footer-columns
-
-Multi-column directory footer.
-
-- **Category:** footer
-- **Media:** logo optional
-- **Registers:** all
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `brand` | Business name or logo |
-| `tagline` | `<p>` one line about the business + location |
-| `social` | Icon links (`<a aria-label>` with `.icon`) |
-| `columns` | 2–4 `<div>`: `<h3>` heading then `<a>` links |
-| `legal` | `<a>` links + a trailing `<span>` copyright |
-
-## Example
-
-```html
-<footer-columns>
-  <span slot="brand">Harbor Roofing</span>
-  <p slot="tagline">Residential roofing for Greater Portland since 2009. Licensed, insured, and local.</p>
-  <a slot="social" href="https://instagram.com/example" aria-label="Instagram" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8"/></svg></a>
-  <a slot="social" href="https://facebook.com/example" aria-label="Facebook" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z"/></svg></a>
-  <div slot="columns"><h3>Services</h3><a href="/services/replacement">Roof replacement</a><a href="/services/repair">Leak repair</a><a href="/services/gutters">Gutters</a><a href="/services/metal">Metal roofing</a></div>
-  <div slot="columns"><h3>Company</h3><a href="/about">About</a><a href="/team">Crew</a><a href="/work">Projects</a><a href="/blog">Guides</a></div>
-  <div slot="columns"><h3>Contact</h3><a href="tel:+15550102000">(555) 010-2000</a><a href="mailto:hello@harborroofing.example">hello@harborroofing.example</a><a href="https://maps.example/harbor" rel="noopener">12 Harbor St, Portland</a></div>
-  <a slot="legal" href="/privacy">Privacy</a>
-  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
-  <span slot="legal">© 2026 Harbor Roofing LLC · Maine license #RC-20419</span>
-</footer-columns>
-```
-
-Variants: `<footer-columns variant="dark">`.
-
-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/footer/footer-columns/styles.css

@@ -1,16 +0,0 @@
-.c-footer-columns{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
-.c-footer-columns a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
-.c-footer-columns a:not([class*="btn"]):hover{color:var(--color-text)}
-.c-footer-columns .brand{color:var(--color-text)}
-.c-footer-columns__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
-.c-footer-columns__legal > span{margin-inline-start:auto}
-.c-footer-columns__social{display:flex;gap:var(--space-2)}
-.c-footer-columns__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
-.c-footer-columns__social a:hover{border-color:var(--color-text)}
-.c-footer-columns__grid{display:flex;flex-wrap:wrap;gap:var(--space-7) var(--space-6);padding-block:var(--space-8) var(--space-7)}
-.c-footer-columns__brand{display:grid;gap:var(--space-4);align-content:start;flex:1 1 100%;max-width:22rem}
-.c-footer-columns__brand p{margin:0}
-.c-footer-columns__grid > div:not(.c-footer-columns__brand){display:grid;gap:var(--space-2);align-content:start;flex:1 1 9rem}
-@media(min-width:900px){.c-footer-columns__brand{flex:0 1 22rem;margin-inline-end:auto}}
-.c-footer-columns__grid h3{font-family:var(--font-body);font-size:var(--step-0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:var(--space-2)}
-.c-footer-columns--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}

package/blocks/footer/footer-columns/template.html

@@ -1 +0,0 @@
-<footer class="c-footer-columns"><div class="wrap"><div class="c-footer-columns__grid"><div class="c-footer-columns__brand"><a class="brand" href="/"><slot name="brand"></slot></a><slot name="tagline"></slot><div class="c-footer-columns__social"><slot name="social"></slot></div></div><slot name="columns"></slot></div><div class="c-footer-columns__legal"><slot name="legal"></slot></div></div></footer>

package/blocks/footer/footer-compact/README.md

@@ -1,33 +0,0 @@
-# footer-compact
-
-Brand + legal + cookie link.
-
-- **Category:** footer
-- **Media:** logo optional
-- **Registers:** all
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `brand` | Business name or logo |
-| `links` | Optional 3–5 `<a>` nav links |
-| `legal` | `<a>` links + trailing `<span>` copyright |
-
-## Example
-
-```html
-<footer-compact>
-  <span slot="brand">Harbor Roofing</span>
-  <a slot="links" href="/services">Services</a>
-  <a slot="links" href="/work">Our work</a>
-  <a slot="links" href="/about">About</a>
-  <a slot="links" href="/contact">Contact</a>
-  <a slot="legal" href="/privacy">Privacy</a>
-  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
-  <span slot="legal">© 2026 Harbor Roofing LLC · Maine license #RC-20419</span>
-</footer-compact>
-```
-
-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/footer/footer-compact/styles.css

@@ -1,12 +0,0 @@
-.c-footer-compact{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
-.c-footer-compact a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
-.c-footer-compact a:not([class*="btn"]):hover{color:var(--color-text)}
-.c-footer-compact .brand{color:var(--color-text)}
-.c-footer-compact__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
-.c-footer-compact__legal > span{margin-inline-start:auto}
-.c-footer-compact__social{display:flex;gap:var(--space-2)}
-.c-footer-compact__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
-.c-footer-compact__social a:hover{border-color:var(--color-text)}
-.c-footer-compact__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
-.c-footer-compact__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
-.c-footer-compact__links:empty{display:none}

package/blocks/footer/footer-compact/template.html

@@ -1 +0,0 @@
-<footer class="c-footer-compact"><div class="wrap"><div class="c-footer-compact__row"><a class="brand" href="/"><slot name="brand"></slot></a><nav class="c-footer-compact__links" aria-label="Footer"><slot name="links"></slot></nav></div><div class="c-footer-compact__legal"><slot name="legal"></slot></div></div></footer>