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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/blocks/content/glossary/README.md

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

package/blocks/content/glossary/styles.css

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

package/blocks/content/glossary/template.html

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +0,0 @@
-.c-prose-split__grid{display:grid;gap:var(--space-5)}
-.c-prose-split__label h2{font-size:var(--step-2)}
-.c-prose-split__body{max-width:44rem}
-.c-prose-split__prose{display:grid;gap:var(--space-4)}
-.c-prose-split__prose p{margin:0;font-size:var(--step-1);line-height:1.65}
-.c-prose-split__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
-.c-prose-split__meta:empty{display:none}
-.c-prose-split__meta > *{display:grid;gap:var(--space-1)}
-.c-prose-split__meta span{font-size:var(--step-0);color:var(--color-muted)}
-.c-prose-split__meta strong{font-weight:600}
-@media(min-width:720px){.c-prose-split__grid{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--space-7)}.c-prose-split__meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
-@media(min-width:1080px){.c-prose-split__grid{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:var(--space-9)}}

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

@@ -1 +0,0 @@
-<section class="c-prose-split section"><div class="wrap c-prose-split__grid"><div class="c-prose-split__label"><slot name="label"></slot></div><div class="c-prose-split__body"><div class="c-prose-split__prose"><slot></slot></div><div class="c-prose-split__meta"><slot name="meta"></slot></div></div></div></section>

package/blocks/content/specification-ledger/README.md

@@ -1,32 +0,0 @@
-# specification-ledger
-
-A dense, readable fact ledger for product or service specifications. The heading introduces why the distinctions matter; rows keep units and limits visible. The example describes a fictional material offer.
-
-- **Category:** content
-- **Media:** none
-- **Registers:** b2b, trade, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional section label |
-| `heading` | `<h2>` explaining the facts |
-| `intro` | Optional concise interpretation |
-| `items` | Three or more `<div>` rows containing `<dt>` and `<dd>` |
-
-## Example
-
-```html
-<specification-ledger>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Material guide · fictional example</p>
-  <h2 slot="heading">What changes with the material.</h2>
-  <p slot="intro" class="lede">Use this space to explain which specification affects the visitor's decision, then give the exact details below.</p>
-  <div slot="items"><dt>Finish</dt><dd>Natural split face; color variation is expected.</dd></div>
-  <div slot="items"><dt>Available sizes</dt><dd>Confirm current sizes from the supplier inventory before publishing.</dd></div>
-  <div slot="items"><dt>Installation</dt><dd>Selection depends on roof pitch, substrate, and local conditions.</dd></div>
-</specification-ledger>
-```
-
-Verify every dimension, standard, and availability claim. The row layout stacks labels above values at narrow widths.

package/blocks/content/specification-ledger/block.meta.json

@@ -1,85 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "content/specification-ledger",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "f9d910387d0f2c82791502a76d178f2deb8e48e50387190fc15d1ad9611149f2",
-  "fit": {
-    "visitorJobs": [
-      "Compare precise specifications"
-    ],
-    "pageRoles": [
-      "product details"
-    ],
-    "useWhen": [
-      "Compare precise specifications"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "heading",
-      "items"
-    ],
-    "optionalSlots": [
-      "eyebrow",
-      "intro"
-    ],
-    "testedItemCounts": [
-      1
-    ]
-  },
-  "media": {
-    "min": 0,
-    "max": 8,
-    "optionalBehavior": "Recompose without empty media frames when media is optional",
-    "aspect": [
-      "content-dependent"
-    ]
-  },
-  "composition": {
-    "hierarchy": "dense fact ledger",
-    "alignment": "split",
-    "density": "dense",
-    "mediaProminence": "none",
-    "geometry": [
-      "ledger",
-      "rows"
-    ],
-    "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/content--specification-ledger.json"
-  }
-}

package/blocks/content/specification-ledger/styles.css

@@ -1,10 +0,0 @@
-.c-specification-ledger__layout{display:grid;gap:var(--space-6)}
-.c-specification-ledger__intro{display:grid;gap:var(--space-3);align-content:start}
-.c-specification-ledger__intro h2{max-width:18ch}
-.c-specification-ledger__intro p{max-width:50ch}
-.c-specification-ledger__list{border-top:2px solid var(--color-text);margin:0}
-.c-specification-ledger__list > div{display:grid;grid-template-columns:minmax(7rem,.45fr) minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
-.c-specification-ledger__list dt{font-weight:600}
-.c-specification-ledger__list dd{margin:0;color:var(--color-muted);max-width:56ch}
-@media(max-width:420px){.c-specification-ledger__list > div{grid-template-columns:1fr;gap:var(--space-1)}}
-@media(min-width:900px){.c-specification-ledger__layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-8)}}

package/blocks/content/specification-ledger/template.html

@@ -1 +0,0 @@
-<section class="c-specification-ledger section"><div class="wrap c-specification-ledger__layout"><div class="c-specification-ledger__intro"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><dl class="c-specification-ledger__list"><slot name="items"></slot></dl></div></section>