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

package/blocks/navbar/nav-centered/template.html

@@ -1,12 +0,0 @@
-<header class="c-nav-centered header--sticky" data-island="header">
-  <div class="wrap c-nav-centered__inner">
-    <nav class="nav-links c-nav-centered__left" aria-label="Primary"><slot name="links-left"></slot></nav>
-    <a class="brand c-nav-centered__brand" href="/"><slot name="brand"></slot></a>
-    <div class="c-nav-centered__right">
-      <nav class="nav-links c-nav-centered__links" aria-label="Secondary"><slot name="links-right"></slot></nav>
-      <div class="btn-group c-nav-centered__cta"><slot name="actions"></slot></div>
-      <button type="button" class="btn-ghost btn-icon c-nav-centered__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
-    </div>
-  </div>
-  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links-left"></slot><slot name="links-right"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
-</header>

package/blocks/navbar/nav-minimal/README.md

@@ -1,29 +0,0 @@
-# nav-minimal
-
-Logo + CTA only — landing / lead-capture pages.
-
-- **Category:** navbar
-- **Media:** logo optional
-- **Registers:** trade, b2b, beauty
-- **Variants:** static
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `brand` | Business name or logo |
-| `actions` | 1–2 buttons; the first stays visible on mobile |
-
-## Example
-
-```html
-<nav-minimal>
-  <span slot="brand">Harbor Roofing</span>
-  <a slot="actions" class="btn" href="#estimate">Get an estimate</a>
-  <a slot="actions" class="btn-ghost" href="tel:+15550102000"><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>(555) 010-2000</a>
-</nav-minimal>
-```
-
-Variants: `<nav-minimal variant="static">`.
-
-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/navbar/nav-minimal/styles.css

@@ -1,5 +0,0 @@
-.c-nav-minimal__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-h)}
-.c-nav-minimal__actions{flex-wrap:nowrap}
-.c-nav-minimal__actions > :not(:first-child){display:none}
-@media(min-width:720px){.c-nav-minimal__actions > :not(:first-child){display:inline-flex}}
-.c-nav-minimal--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}

package/blocks/navbar/nav-minimal/template.html

@@ -1,6 +0,0 @@
-<header class="c-nav-minimal header--sticky" data-island="header">
-  <div class="wrap c-nav-minimal__inner">
-    <a class="brand" href="/"><slot name="brand"></slot></a>
-    <div class="btn-group c-nav-minimal__actions"><slot name="actions"></slot></div>
-  </div>
-</header>

package/blocks/navbar/nav-split/README.md

@@ -1,34 +0,0 @@
-# nav-split
-
-Sticky blurred header: logo left, links center-right, filled CTA.
-
-- **Category:** navbar
-- **Media:** logo optional
-- **Registers:** trade, beauty, b2b, food, professional
-- **Variants:** static
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `brand` | Business name text or `<img>` logo (≤2rem tall) |
-| `links` | 3–5 `<a>` primary links (repeated in the drawer) |
-| `actions` | 1–2 buttons; first is the primary CTA and stays visible on mobile |
-
-## Example
-
-```html
-<nav-split>
-  <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="actions" class="btn" href="/contact">Free estimate</a>
-  <a slot="actions" class="btn-ghost" href="tel:+15550102000">(555) 010-2000</a>
-</nav-split>
-```
-
-Variants: `<nav-split variant="static">`.
-
-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/navbar/nav-split/styles.css

@@ -1,11 +0,0 @@
-.c-nav-split__inner{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
-.c-nav-split__links{display:none;margin-inline:auto}
-.c-nav-split__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
-.c-nav-split__cta{flex-wrap:nowrap}
-.c-nav-split__cta > :not(:first-child){display:none}
-.c-nav-split--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
-@media(min-width:900px){
-  .c-nav-split__links{display:flex}
-  .c-nav-split__cta > :not(:first-child){display:inline-flex}
-  .c-nav-split__toggle{display:none}
-}

package/blocks/navbar/nav-split/template.html

@@ -1,11 +0,0 @@
-<header class="c-nav-split header--sticky" data-island="header">
-  <div class="wrap c-nav-split__inner">
-    <a class="brand" href="/"><slot name="brand"></slot></a>
-    <nav class="nav-links c-nav-split__links" aria-label="Primary"><slot name="links"></slot></nav>
-    <div class="c-nav-split__actions">
-      <div class="btn-group c-nav-split__cta"><slot name="actions"></slot></div>
-      <button type="button" class="btn-ghost btn-icon c-nav-split__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
-    </div>
-  </div>
-  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
-</header>

package/blocks/navbar/nav-utility/README.md

@@ -1,37 +0,0 @@
-# nav-utility
-
-Dual-tier: slim utility row (phone/hours) + primary bar. B2B default.
-
-- **Category:** navbar
-- **Media:** logo optional
-- **Registers:** b2b, professional, trade
-- **Variants:** static
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `utility` | Short inline facts: hours, phone, service area (1–3 `<span>`/`<a>`; only `<a>` items show on mobile) |
-| `brand` | Business name or logo |
-| `links` | 3–5 `<a>` primary links |
-| `actions` | Primary CTA button |
-
-## Example
-
-```html
-<nav-utility>
-  <span slot="utility"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Mon–Fri 7:30–5:00</span>
-  <a slot="utility" href="tel:+15550102000"><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>(555) 010-2000</a>
-  <span slot="utility"><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>Serving Greater Portland</span>
-  <span slot="brand">Northline Mechanical</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="actions" class="btn" href="/contact">Request a quote</a>
-</nav-utility>
-```
-
-Variants: `<nav-utility variant="static">`.
-
-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/navbar/nav-utility/styles.css

@@ -1,17 +0,0 @@
-.c-nav-utility__bar{background:var(--color-surface-2);border-bottom:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
-.c-nav-utility__util{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2) var(--space-5);min-height:2.25rem;align-items:center}
-.c-nav-utility__util > :not(a){display:none}
-@media(min-width:720px){.c-nav-utility__util > :not(a){display:inline}}
-.c-nav-utility__util a{text-decoration:none;color:var(--color-text);font-weight:500}
-.c-nav-utility__util .icon{width:1rem;height:1rem;margin-right:.35rem;vertical-align:-.15em}
-.c-nav-utility__inner{display:flex;align-items:center;gap:var(--space-5);min-height:calc(var(--header-h) - .75rem)}
-.c-nav-utility__links{display:none;margin-inline-start:auto}
-.c-nav-utility__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
-.c-nav-utility__cta > :not(:first-child){display:none}
-.c-nav-utility--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
-@media(min-width:900px){
-  .c-nav-utility__links{display:flex}
-  .c-nav-utility__actions{margin-inline-start:var(--space-3)}
-  .c-nav-utility__cta > :not(:first-child){display:inline-flex}
-  .c-nav-utility__toggle{display:none}
-}

package/blocks/navbar/nav-utility/template.html

@@ -1,12 +0,0 @@
-<header class="c-nav-utility header--sticky" data-island="header">
-  <div class="c-nav-utility__bar"><div class="wrap c-nav-utility__util"><slot name="utility"></slot></div></div>
-  <div class="wrap c-nav-utility__inner">
-    <a class="brand" href="/"><slot name="brand"></slot></a>
-    <nav class="nav-links c-nav-utility__links" aria-label="Primary"><slot name="links"></slot></nav>
-    <div class="c-nav-utility__actions">
-      <div class="btn-group c-nav-utility__cta"><slot name="actions"></slot></div>
-      <button type="button" class="btn-ghost btn-icon c-nav-utility__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
-    </div>
-  </div>
-  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
-</header>

package/blocks/pricing/menu-featured/README.md

@@ -1,34 +0,0 @@
-# menu-featured
-
-Featured dishes with prices.
-
-- **Category:** pricing
-- **Media:** food photos
-- **Registers:** food
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `actions` | Optional link to the full menu |
-| `cards` | 3 or 6 dish `.card`: `.card__media.ratio-4x3`, `<h3>`, `.price`, `<p>` description |
-
-## Example
-
-```html
-<menu-featured>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the kitchen</p>
-  <h2 slot="heading">This week's favorites</h2>
-  <p slot="lede" class="lede">Menu changes with the market — these three rarely leave.</p>
-  <a slot="actions" class="btn-outline" href="/menu">Full menu</a>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-1.jpg" alt="Seared scallops" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Seared scallops</h3><p class="price"><span class="price__amount">$28</span></p><p>Brown butter, sweet corn, chive.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-2.jpg" alt="Roast half chicken" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Roast half chicken</h3><p class="price"><span class="price__amount">$24</span></p><p>Potato purée, charred lemon, jus.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-3.jpg" alt="Mushroom tagliatelle" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Mushroom tagliatelle</h3><p class="price"><span class="price__amount">$22</span></p><p>Hen of the woods, thyme, pecorino.</p></div></article>
-</menu-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/pricing/menu-featured/styles.css

@@ -1,4 +0,0 @@
-.c-menu-featured__grid .card__body{grid-template-columns:1fr auto;align-items:start;gap:var(--space-2) var(--space-3)}
-.c-menu-featured__grid .card__body > h3{font-size:var(--step-1)}
-.c-menu-featured__grid .card__body > p:not(.price){grid-column:1 / -1;font-size:var(--step-0)}
-.c-menu-featured__grid .price__amount{font-size:var(--step-2)}

package/blocks/pricing/menu-featured/template.html

@@ -1 +0,0 @@
-<section class="c-menu-featured 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-menu-featured__grid"><slot name="cards"></slot></div></div></section>

package/blocks/pricing/menu-sections/README.md

@@ -1,33 +0,0 @@
-# menu-sections
-
-Categorized menu lists.
-
-- **Category:** pricing
-- **Media:** optional
-- **Registers:** food, beauty
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `sections` | 2–6 `.c-menu-sections__group`: `<h3>` category, then `.c-menu-sections__item` rows (`<div><strong>name</strong><span>description</span></div><span class="c-menu-sections__price">`) |
-
-## Example
-
-```html
-<menu-sections>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Dinner</p>
-  <h2 slot="heading">The menu</h2>
-  <p slot="lede" class="lede">Served 5–10 pm. Ask about tonight's specials.</p>
-  <div slot="sections" class="c-menu-sections__group"><h3>Starters</h3><div class="c-menu-sections__item"><div><strong>Oysters on the half shell</strong><span>Six, mignonette</span></div><span class="c-menu-sections__price">$18</span></div><div class="c-menu-sections__item"><div><strong>Burrata</strong><span>Peaches, basil, olive oil</span></div><span class="c-menu-sections__price">$14</span></div><div class="c-menu-sections__item"><div><strong>Clam chowder</strong><span>Bacon, thyme, oyster crackers</span></div><span class="c-menu-sections__price">$12</span></div></div>
-  <div slot="sections" class="c-menu-sections__group"><h3>Mains</h3><div class="c-menu-sections__item"><div><strong>Seared scallops</strong><span>Brown butter, sweet corn</span></div><span class="c-menu-sections__price">$28</span></div><div class="c-menu-sections__item"><div><strong>Roast half chicken</strong><span>Potato purée, jus</span></div><span class="c-menu-sections__price">$24</span></div><div class="c-menu-sections__item"><div><strong>Haddock</strong><span>Leeks, mussels, saffron broth</span></div><span class="c-menu-sections__price">$27</span></div><div class="c-menu-sections__item"><div><strong>Ribeye</strong><span>16 oz, salsa verde</span></div><span class="c-menu-sections__price">$44</span></div></div>
-  <div slot="sections" class="c-menu-sections__group"><h3>Sides</h3><div class="c-menu-sections__item"><div><strong>Fries</strong><span>Rosemary salt</span></div><span class="c-menu-sections__price">$7</span></div><div class="c-menu-sections__item"><div><strong>Charred broccolini</strong><span>Chili, lemon</span></div><span class="c-menu-sections__price">$9</span></div></div>
-  <div slot="sections" class="c-menu-sections__group"><h3>Dessert</h3><div class="c-menu-sections__item"><div><strong>Blueberry buckle</strong><span>Vanilla ice cream</span></div><span class="c-menu-sections__price">$10</span></div><div class="c-menu-sections__item"><div><strong>Chocolate pot de crème</strong><span>Sea salt, olive oil</span></div><span class="c-menu-sections__price">$10</span></div></div>
-</menu-sections>
-```
-
-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/pricing/menu-sections/styles.css

@@ -1,9 +0,0 @@
-.c-menu-sections__grid{display:grid;gap:var(--space-7) var(--space-8);max-width:66rem;margin-inline:auto}
-@media(min-width:900px){.c-menu-sections__grid{grid-template-columns:1fr 1fr}}
-.c-menu-sections__group{display:grid;align-content:start}
-.c-menu-sections__group > h3{font-size:var(--step-0);font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
-.c-menu-sections__item{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
-.c-menu-sections__item > div{display:grid}
-.c-menu-sections__item strong{font-weight:600}
-.c-menu-sections__item span:not(.c-menu-sections__price){color:var(--color-muted);font-size:var(--step-0)}
-.c-menu-sections__price{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

package/blocks/pricing/menu-sections/template.html

@@ -1 +0,0 @@
-<section class="c-menu-sections 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="c-menu-sections__grid"><slot name="sections"></slot></div></div></section>

package/blocks/pricing/pricing-table/README.md

@@ -1,40 +0,0 @@
-# pricing-table
-
-Simple feature compare table.
-
-- **Category:** pricing
-- **Media:** none
-- **Registers:** b2b, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `table` | A `<table class="table">` with `<thead>` (feature, then one column per plan) and `<tbody>`; use the check icon or `—` in cells |
-
-## Example
-
-```html
-<pricing-table>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Compare plans</p>
-  <h2 slot="heading">What's included at each level</h2>
-  <table slot="table" class="table">
-    <thead><tr><th>Feature</th><th>Starter</th><th>Growth</th><th>Scale</th></tr></thead>
-    <tbody>
-      <tr><td>Monthly transactions</td><td>100</td><td>400</td><td>Unlimited</td></tr>
-      <tr><td>Monthly close by the 5th</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
-      <tr><td>Job-cost reporting</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
-      <tr><td>Payroll reconciliation</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
-      <tr><td>Multi-entity consolidation</td><td>—</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
-      <tr><td>Response time</td><td>2 days</td><td>1 day</td><td>Same day</td></tr>
-    </tbody>
-    <tfoot><tr><td></td><td><a class="btn-outline btn-sm" href="/contact">Choose</a></td><td><a class="btn btn-sm" href="/contact">Choose</a></td><td><a class="btn-outline btn-sm" href="/contact">Choose</a></td></tr></tfoot>
-  </table>
-</pricing-table>
-```
-
-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/pricing/pricing-table/styles.css

@@ -1,9 +0,0 @@
-.c-pricing-table__card{max-width:60rem;margin-inline:auto}
-.c-pricing-table .table{min-width:38rem}
-.c-pricing-table .table th,.c-pricing-table .table td{padding:var(--space-4) var(--space-5)}
-.c-pricing-table .table thead th{background:var(--color-surface-2)}
-.c-pricing-table .table thead th:not(:first-child){font-family:var(--font-display);text-transform:none;letter-spacing:-.01em;font-size:var(--step-1);color:var(--color-text)}
-.c-pricing-table .table tbody tr:last-child td{border-bottom:0}
-.c-pricing-table .table td .icon{color:var(--color-accent);width:1.1rem;height:1.1rem}
-.c-pricing-table .table td:first-child{font-weight:500}
-.c-pricing-table .table tfoot td{border-bottom:0;padding-top:var(--space-5)}

package/blocks/pricing/pricing-table/template.html

@@ -1 +0,0 @@
-<section class="c-pricing-table 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="card c-pricing-table__card"><div class="table-wrap"><slot name="table"></slot></div></div></div></section>

package/blocks/pricing/pricing-tiers/README.md

@@ -1,34 +0,0 @@
-# pricing-tiers
-
-Three pricing tiers.
-
-- **Category:** pricing
-- **Media:** none
-- **Registers:** b2b, professional, beauty
-- **Variants:** highlight-mid
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `tiers` | 3 `.card` tiers: optional `.badge`, `<h3>`, `.price`, `<p>`, `<ul class="list-check">`, button. Add `c-pricing-tiers__featured` to one card to lift it. |
-
-## Example
-
-```html
-<pricing-tiers>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Pricing</p>
-  <h2 slot="heading">Flat monthly pricing. No hourly surprises.</h2>
-  <p slot="lede" class="lede">Every plan includes a dedicated bookkeeper and a monthly close by the 5th.</p>
-  <div slot="tiers" class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$349</span><span class="price__period">/mo</span></p><p>Sole proprietors and one-truck operations.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Up to 100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L and balance sheet</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Start with Starter</a></div></div>
-  <div slot="tiers" class="card c-pricing-tiers__featured"><div class="card__body"><span class="badge badge--accent c-pricing-tiers__badge">Most popular</span><h3>Growth</h3><p class="price"><span class="price__amount">$649</span><span class="price__period">/mo</span></p><p>Crews of 2–10 with payroll and job costing.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Up to 400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review call</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div>
-  <div slot="tiers" class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,200</span><span class="price__period">/mo</span></p><p>Multi-crew companies and multiple entities.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity consolidation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated Slack channel</li></ul><a class="btn-outline" href="/contact">Talk to us</a></div></div>
-</pricing-tiers>
-```
-
-Variants: `<pricing-tiers variant="highlight-mid">`.
-
-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/pricing/pricing-tiers/styles.css

@@ -1,7 +0,0 @@
-.c-pricing-tiers__grid{align-items:stretch;max-width:66rem;margin-inline:auto}
-.c-pricing-tiers__grid .card__body{padding:var(--space-6);gap:var(--space-4)}
-.c-pricing-tiers__grid .card__body > h3{font-size:var(--step-2)}
-.c-pricing-tiers__badge{justify-self:start}
-.c-pricing-tiers__grid .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--step-0)}
-.c-pricing-tiers__grid .card__body > .btn,.c-pricing-tiers__grid .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
-.c-pricing-tiers__featured,.c-pricing-tiers--highlight-mid .c-pricing-tiers__grid > :nth-child(2){border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}

package/blocks/pricing/pricing-tiers/template.html

@@ -1 +0,0 @@
-<section class="c-pricing-tiers 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--3 c-pricing-tiers__grid"><slot name="tiers"></slot></div></div></section>

package/blocks/pricing/pricing-toggle/README.md

@@ -1,34 +0,0 @@
-# pricing-toggle
-
-Monthly/annual toggle via tabs island.
-
-- **Category:** pricing
-- **Media:** none
-- **Registers:** b2b, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `tabs` | A `.tabs__list.tabs__list--pill[role=tablist]` with two `button.tabs__tab[role=tab]`, then two `.tabs__panel[role=tabpanel]` each containing a `.grid.grid--3` of tier cards |
-
-## Example
-
-```html
-<pricing-toggle>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Pricing</p>
-  <h2 slot="heading">Pay monthly, or save 15% annually</h2>
-  <div slot="tabs" class="tabs__list tabs__list--pill" role="tablist">
-    <button type="button" class="tabs__tab" role="tab" id="pt-m" aria-controls="pt-pm" aria-selected="true">Monthly</button>
-    <button type="button" class="tabs__tab" role="tab" id="pt-a" aria-controls="pt-pa" aria-selected="false">Annual <span class="badge badge--accent c-pricing-toggle__save">−15%</span></button>
-  </div>
-  <div slot="tabs" class="tabs__panel" role="tabpanel" id="pt-pm" aria-labelledby="pt-m"><div class="grid grid--3"><div class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$349</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Choose Starter</a></div></div><div class="card c-pricing-toggle__featured"><div class="card__body"><h3>Growth</h3><p class="price"><span class="price__amount">$649</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div><div class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,200</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated channel</li></ul><a class="btn-outline" href="/contact">Choose Scale</a></div></div></div></div>
-  <div slot="tabs" class="tabs__panel" role="tabpanel" id="pt-pa" aria-labelledby="pt-a" hidden><div class="grid grid--3"><div class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$297</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Choose Starter</a></div></div><div class="card c-pricing-toggle__featured"><div class="card__body"><h3>Growth</h3><p class="price"><span class="price__amount">$552</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div><div class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,020</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated channel</li></ul><a class="btn-outline" href="/contact">Choose Scale</a></div></div></div></div>
-</pricing-toggle>
-```
-
-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/pricing/pricing-toggle/styles.css

@@ -1,10 +0,0 @@
-.c-pricing-toggle__tabs{justify-items:center}
-.c-pricing-toggle__tabs .tabs__list{margin-bottom:var(--space-4)}
-.c-pricing-toggle__tabs .tabs__panel{width:100%}
-.c-pricing-toggle__tabs .grid{max-width:66rem;margin-inline:auto;align-items:stretch}
-.c-pricing-toggle__tabs .card__body{padding:var(--space-6);gap:var(--space-4)}
-.c-pricing-toggle__tabs .card__body > h3{font-size:var(--step-2)}
-.c-pricing-toggle__tabs .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--step-0)}
-.c-pricing-toggle__tabs .card__body > .btn,.c-pricing-toggle__tabs .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
-.c-pricing-toggle__featured{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}
-.c-pricing-toggle__save{margin-left:.4rem;font-size:.7rem;padding:0 .45rem;min-height:1.25rem}

package/blocks/pricing/pricing-toggle/template.html

@@ -1 +0,0 @@
-<section class="c-pricing-toggle 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="tabs c-pricing-toggle__tabs" data-island="tabs"><slot name="tabs"></slot></div></div></section>

package/blocks/process/process-carousel/README.md

@@ -1,33 +0,0 @@
-# process-carousel
-
-Process cards in buttoned carousel.
-
-- **Category:** process
-- **Media:** optional
-- **Registers:** trade, beauty
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `cards` | 4–6 `.card` slides: `<p class="eyebrow">` step label, `<h3>`, `<p>` |
-
-## Example
-
-```html
-<process-carousel>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Day of</p>
-  <h2 slot="heading">What happens on install day</h2>
-  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">7:00 am</p><h3>Crew arrives, protection goes down</h3><p>Tarps over beds, plywood over the AC, driveway cones out.</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">7:30 am</p><h3>Tear-off</h3><p>Old shingles into the dumpster by lunchtime on most houses.</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">Midday</p><h3>Deck inspection</h3><p>Soft or rotted sheathing replaced and photographed before underlayment.</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">Afternoon</p><h3>Underlayment and shingles</h3><p>Ice-and-water, synthetic underlayment, then shingles from the eaves up.</p></div></div>
-  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">End of day</p><h3>Sweep and walkthrough</h3><p>Magnet sweep twice, gutters cleared, and a walk with the foreman.</p></div></div>
-</process-carousel>
-```
-
-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/process/process-carousel/styles.css

@@ -1,5 +0,0 @@
-.c-process-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
-.c-process-carousel__head .section__head,.c-process-carousel__head .carousel__nav{margin-bottom:var(--space-6)}
-.c-process-carousel__carousel .carousel__track > *{flex-basis:min(85%,18rem)}
-.c-process-carousel__carousel .card__body{padding:var(--space-6);gap:var(--space-3)}
-.c-process-carousel__carousel .card__body .eyebrow{color:var(--color-accent);font-size:.75rem}

package/blocks/process/process-carousel/template.html

@@ -1 +0,0 @@
-<section class="c-process-carousel section section--muted"><div class="wrap"><div class="c-process-carousel__head"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="carousel__nav"><button type="button" data-carousel-prev aria-label="Previous"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" data-carousel-next aria-label="Next"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div></div></div><div class="wrap carousel c-process-carousel__carousel" data-island="carousel" tabindex="0"><div class="carousel__track"><slot name="cards"></slot></div></div></section>

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

@@ -1,35 +0,0 @@
-# process-split
-
-Copy + large how-it-works media.
-
-- **Category:** process
-- **Media:** illustration or photo
-- **Registers:** b2b, trade, beauty
-- **Variants:** reverse
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `steps` | 3–4 `<li>` with `<strong>` lead and text |
-| `media` | `<img>` 4:3 |
-
-## Example
-
-```html
-<process-split>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Your first visit</p>
-  <h2 slot="heading">Here's how a color consult goes</h2>
-  <li slot="steps"><span><strong>Talk first, 15 minutes</strong>Photos you like, your routine, and what you want to spend on upkeep.</span></li>
-  <li slot="steps"><span><strong>Strand test</strong>We test a hidden section so there are no surprises on the day.</span></li>
-  <li slot="steps"><span><strong>Written plan and price</strong>What we'll do, how long it takes, and the exact cost before you book.</span></li>
-  <img src="/media/harvest/consult.jpg" alt="Stylist consulting with a client" width="1200" height="900" slot="media" loading="lazy">
-</process-split>
-```
-
-Variants: `<process-split 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/process/process-split/styles.css

@@ -1,6 +0,0 @@
-.c-process-split__copy .section__head{margin-bottom:var(--space-5)}
-.c-process-split__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);counter-reset:step}
-.c-process-split__list > *{counter-increment:step;display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);align-items:start;color:var(--color-muted)}
-.c-process-split__list > *::before{content:counter(step);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent);font-weight:600;font-size:var(--step-0)}
-.c-process-split__list strong{display:block;color:var(--color-text);font-weight:600}
-.c-process-split--reverse .split > :first-child{order:2}

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

@@ -1 +0,0 @@
-<section class="c-process-split section"><div class="wrap split"><div class="c-process-split__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ol class="c-process-split__list"><slot name="steps"></slot></ol></div><div class="frame ratio-4x3"><slot name="media"></slot></div></div></section>