@echelon-foundry/design-system 0.3.0-main.216.1 → 0.3.0-main.217.1

package/README.md

@@ -37,6 +37,15 @@ npm run site:check
 ```
 
 The generated GitHub Pages artifact is written to `site-dist/`.
+The site is generated from the component catalog: canonical markup in
+`patterns/`, one documentation entry per component in `catalog/components/`,
+and CSS hooks derived from the built stylesheet. Every component page has the
+same sections (purpose, live examples with copyable HTML, a mobile example in a
+real narrow viewport, API, states, accessibility, responsive behavior, motion,
+usage guidance and related components). See
+[docs/CATALOG-AUTHORING.md](docs/CATALOG-AUTHORING.md) to document a component
+and [docs/COMPONENT-INVENTORY.md](docs/COMPONENT-INVENTORY.md) for the full
+inventory, planned components and known issues.
 Agent usage rules are in [docs/AGENT-USAGE.md](docs/AGENT-USAGE.md).
 
 

package/dist/build-metrics.json

@@ -15,6 +15,8 @@
     "patterns/badge.html",
     "patterns/best-worst.html",
     "patterns/binary-choice.html",
+    "patterns/bounded-overflow.html",
+    "patterns/button.html",
     "patterns/callout.html",
     "patterns/card-grid.html",
     "patterns/character-grid-3270.html",
@@ -37,11 +39,13 @@
     "patterns/comparison-pairs.html",
     "patterns/composer.html",
     "patterns/conflict-review.html",
+    "patterns/container.html",
     "patterns/conversation.html",
     "patterns/cta.html",
     "patterns/dashboard-grid.html",
     "patterns/data-grid.html",
     "patterns/date-range.html",
+    "patterns/date-time-field.html",
     "patterns/dense-ledger.html",
     "patterns/diagnostic-status.html",
     "patterns/diagram.html",
@@ -68,6 +72,7 @@
     "patterns/focus-stage.html",
     "patterns/frame.html",
     "patterns/freshness.html",
+    "patterns/grid.html",
     "patterns/handoff-summary.html",
     "patterns/hero.html",
     "patterns/hierarchical-choice.html",
@@ -75,6 +80,7 @@
     "patterns/hierarchy-tree.html",
     "patterns/identifier.html",
     "patterns/image-choice.html",
+    "patterns/key-value-list.html",
     "patterns/landmark-region.html",
     "patterns/lane-board.html",
     "patterns/marketing-shell.html",
@@ -119,6 +125,7 @@
     "patterns/scroll-progress.html",
     "patterns/search.html",
     "patterns/section-heading.html",
+    "patterns/section.html",
     "patterns/security-blockers.html",
     "patterns/security-evidence-age.html",
     "patterns/security-evidence-chain.html",
@@ -135,20 +142,26 @@
     "patterns/site-footer.html",
     "patterns/site-header.html",
     "patterns/skeleton.html",
+    "patterns/skip-link.html",
     "patterns/slider.html",
     "patterns/spatial-canvas.html",
     "patterns/special-choice.html",
     "patterns/spinner.html",
     "patterns/split-pane.html",
+    "patterns/split.html",
     "patterns/stack.html",
     "patterns/state-survivability.html",
     "patterns/status-lozenge.html",
     "patterns/steps.html",
+    "patterns/surface.html",
     "patterns/survey-progress.html",
     "patterns/switch.html",
     "patterns/switcher.html",
     "patterns/symbol-rating.html",
     "patterns/tabs.html",
+    "patterns/text-field.html",
+    "patterns/text-roles.html",
+    "patterns/textarea.html",
     "patterns/timeline.html",
     "patterns/toast.html",
     "patterns/tooltip.html",
@@ -156,6 +169,7 @@
     "patterns/validation-message.html",
     "patterns/validation-summary.html",
     "patterns/verification-frame.html",
+    "patterns/visually-hidden.html",
     "patterns/wizard.html",
     "patterns/work-queue.html",
     "patterns/workspace-shell.html",
@@ -178,6 +192,8 @@
     "patterns/badge.html": 411,
     "patterns/best-worst.html": 1268,
     "patterns/binary-choice.html": 652,
+    "patterns/bounded-overflow.html": 596,
+    "patterns/button.html": 187,
     "patterns/callout.html": 1408,
     "patterns/card-grid.html": 1032,
     "patterns/character-grid-3270.html": 4693,
@@ -200,11 +216,13 @@
     "patterns/comparison-pairs.html": 770,
     "patterns/composer.html": 1074,
     "patterns/conflict-review.html": 854,
+    "patterns/container.html": 245,
     "patterns/conversation.html": 1009,
     "patterns/cta.html": 597,
     "patterns/dashboard-grid.html": 590,
     "patterns/data-grid.html": 1316,
     "patterns/date-range.html": 519,
+    "patterns/date-time-field.html": 367,
     "patterns/dense-ledger.html": 526,
     "patterns/diagnostic-status.html": 303,
     "patterns/diagram.html": 4260,
@@ -231,13 +249,15 @@
     "patterns/focus-stage.html": 377,
     "patterns/frame.html": 365,
     "patterns/freshness.html": 187,
+    "patterns/grid.html": 305,
     "patterns/handoff-summary.html": 686,
     "patterns/hero.html": 1066,
     "patterns/hierarchical-choice.html": 919,
     "patterns/hierarchical-multi-choice.html": 1086,
     "patterns/hierarchy-tree.html": 480,
     "patterns/identifier.html": 617,
-    "patterns/image-choice.html": 878,
+    "patterns/image-choice.html": 1813,
+    "patterns/key-value-list.html": 238,
     "patterns/landmark-region.html": 265,
     "patterns/lane-board.html": 710,
     "patterns/marketing-shell.html": 2405,
@@ -282,6 +302,7 @@
     "patterns/scroll-progress.html": 446,
     "patterns/search.html": 385,
     "patterns/section-heading.html": 528,
+    "patterns/section.html": 190,
     "patterns/security-blockers.html": 399,
     "patterns/security-evidence-age.html": 370,
     "patterns/security-evidence-chain.html": 432,
@@ -298,20 +319,26 @@
     "patterns/site-footer.html": 702,
     "patterns/site-header.html": 922,
     "patterns/skeleton.html": 354,
+    "patterns/skip-link.html": 186,
     "patterns/slider.html": 403,
     "patterns/spatial-canvas.html": 951,
     "patterns/special-choice.html": 568,
     "patterns/spinner.html": 175,
     "patterns/split-pane.html": 348,
+    "patterns/split.html": 344,
     "patterns/stack.html": 353,
     "patterns/state-survivability.html": 999,
     "patterns/status-lozenge.html": 358,
     "patterns/steps.html": 287,
+    "patterns/surface.html": 206,
     "patterns/survey-progress.html": 446,
     "patterns/switch.html": 506,
     "patterns/switcher.html": 386,
     "patterns/symbol-rating.html": 1493,
     "patterns/tabs.html": 741,
+    "patterns/text-field.html": 359,
+    "patterns/text-roles.html": 396,
+    "patterns/textarea.html": 387,
     "patterns/timeline.html": 902,
     "patterns/toast.html": 525,
     "patterns/tooltip.html": 2188,
@@ -319,6 +346,7 @@
     "patterns/validation-message.html": 180,
     "patterns/validation-summary.html": 530,
     "patterns/verification-frame.html": 1245,
+    "patterns/visually-hidden.html": 144,
     "patterns/wizard.html": 817,
     "patterns/work-queue.html": 971,
     "patterns/workspace-shell.html": 479,

package/dist/patterns/bounded-overflow.html

@@ -0,0 +1,9 @@
+<div class="ef-bounded-overflow" role="region" aria-label="Quarterly totals by region" tabindex="0">
+  <table>
+    <thead><tr><th scope="col">Region</th><th scope="col">Q1</th><th scope="col">Q2</th><th scope="col">Q3</th><th scope="col">Q4</th><th scope="col">Year</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">North America</th><td>1,204,000</td><td>1,318,500</td><td>1,402,250</td><td>1,511,000</td><td>5,435,750</td></tr>
+      <tr><th scope="row">Europe</th><td>904,100</td><td>931,000</td><td>1,010,400</td><td>1,120,900</td><td>3,966,400</td></tr>
+    </tbody>
+  </table>
+</div>

package/dist/patterns/button.html

@@ -0,0 +1,5 @@
+<div class="ef-actions">
+  <button type="submit">Save changes</button>
+  <button type="button">Cancel</button>
+  <a class="ef-button" href="#button-help">Read the help article</a>
+</div>

package/dist/patterns/container.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <div class="ef-container" data-ef-width="narrow">
+    <h2>Privacy notice</h2>
+    <p>Narrow containers keep reading-focused regions at a comfortable measure while the page background stays full width.</p>
+  </div>
+</div>

package/dist/patterns/date-time-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="date-time-field-due">Due date</label>
+  <span class="ef-field__description" id="date-time-field-due-description">The browser supplies its own date picker; typing the date also works.</span>
+  <input id="date-time-field-due" name="due" type="date" aria-describedby="date-time-field-due-description">
+</div>

package/dist/patterns/grid.html

@@ -0,0 +1,5 @@
+<ul class="ef-grid" aria-label="Environments" role="list">
+  <li class="ef-surface"><h3>Production</h3><p>12 services, all reporting.</p></li>
+  <li class="ef-surface"><h3>Staging</h3><p>12 services, 1 deploying.</p></li>
+  <li class="ef-surface"><h3>Development</h3><p>9 services, 3 idle.</p></li>
+</ul>

package/dist/patterns/image-choice.html

@@ -4,7 +4,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="compact" required>
     <span class="ef-choice__media">
-      <img src="/path/to/compact-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='21' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='32' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='43' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='54' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='65' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='76' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Compact layout</strong>
@@ -15,7 +15,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="spacious">
     <span class="ef-choice__media">
-      <img src="/path/to/spacious-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='34' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='58' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Spacious layout</strong>

package/dist/patterns/key-value-list.html

@@ -0,0 +1,5 @@
+<dl class="ef-key-value-list">
+  <div><dt>Account</dt><dd>Northwind Logistics</dd></div>
+  <div><dt>Plan</dt><dd>Team, billed annually</dd></div>
+  <div><dt>Renewal</dt><dd><time datetime="2027-03-01">1 March 2027</time></dd></div>
+</dl>

package/dist/patterns/section.html

@@ -0,0 +1,4 @@
+<section class="ef-section" aria-labelledby="section-title">
+  <h2 id="section-title">Recent activity</h2>
+  <p>Sections separate page regions with a consistent block rhythm.</p>
+</section>

package/dist/patterns/skip-link.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <a class="ef-skip-link" href="#skip-link-main">Skip to main content</a>
+  <main id="skip-link-main" tabindex="-1">
+    <h1>Account settings</h1>
+  </main>
+</div>

package/dist/patterns/split.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <div class="ef-split">
+    <div>
+      <h2>Install</h2>
+      <p>The primary region takes the available space. The supporting region wraps below it when the row runs out of room.</p>
+    </div>
+    <aside aria-label="Requirements">
+      <h3>Requirements</h3>
+      <p>Node 22 or later.</p>
+    </aside>
+  </div>
+</div>

package/dist/patterns/surface.html

@@ -0,0 +1,4 @@
+<section class="ef-surface" aria-labelledby="surface-title">
+  <h2 id="surface-title">Billing contact</h2>
+  <p>Invoices are sent to the finance team on the first business day of each month.</p>
+</section>

package/dist/patterns/text-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="text-field-email">Work email</label>
+  <span class="ef-field__description" id="text-field-email-description">We send sign-in links to this address.</span>
+  <input id="text-field-email" name="email" type="email" autocomplete="email" aria-describedby="text-field-email-description" required>
+</div>

package/dist/patterns/text-roles.html

@@ -0,0 +1,7 @@
+<div class="ef-site">
+  <p class="ef-eyebrow">Release 0.3</p>
+  <h2>Faster onboarding for new teams</h2>
+  <p class="ef-lead">A lead paragraph introduces the section in one or two sentences.</p>
+  <blockquote class="ef-statement"><p>Forma keeps behavior in the application and presentation in the design system.</p></blockquote>
+  <span class="ef-component-kicker">Component kicker</span>
+</div>

package/dist/patterns/textarea.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="textarea-summary">Change summary</label>
+  <span class="ef-field__description" id="textarea-summary-description">Describe what changed and why. Plain text, up to 500 characters.</span>
+  <textarea id="textarea-summary" name="summary" rows="4" maxlength="500" aria-describedby="textarea-summary-description"></textarea>
+</div>

package/dist/patterns/visually-hidden.html

@@ -0,0 +1,4 @@
+<button type="button">
+  <span aria-hidden="true">×</span>
+  <span class="ef-visually-hidden">Remove filter: Region is Europe</span>
+</button>

package/docs/MARKETING-SITES.md

@@ -314,7 +314,7 @@ Keep the `@v<version>` of the Forma actions equal to the version in
 3. Add it in Forma:
    - pattern HTML;
    - CSS in `src/marketing/` using role tokens only;
-   - metadata in `tools/component-meta.mjs`;
+   - a catalog entry in `catalog/components/<slug>.mjs` (see `docs/CATALOG-AUTHORING.md`);
    - tests (structure, browser, axe, 320 px);
    - a gap entry closed in `requirements/MARKETING-PRESENTATION.md`.
 4. Release it. The sites then upgrade (question 7) and remove any local

package/figma/component-contracts.json

@@ -100,6 +100,26 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "bounded-overflow",
+      "figmaName": "Forma / Bounded Overflow",
+      "source": "patterns/bounded-overflow.html",
+      "codeConnect": {
+        "id": "Forma/bounded-overflow",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
+    {
+      "id": "button",
+      "figmaName": "Forma / Button",
+      "source": "patterns/button.html",
+      "codeConnect": {
+        "id": "Forma/button",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "callout",
       "figmaName": "Forma / Callout",
@@ -320,6 +340,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "container",
+      "figmaName": "Forma / Container",
+      "source": "patterns/container.html",
+      "codeConnect": {
+        "id": "Forma/container",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "conversation",
       "figmaName": "Forma / Conversation",
@@ -370,6 +400,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "date-time-field",
+      "figmaName": "Forma / Date Time Field",
+      "source": "patterns/date-time-field.html",
+      "codeConnect": {
+        "id": "Forma/date-time-field",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "dense-ledger",
       "figmaName": "Forma / Dense Ledger",
@@ -630,6 +670,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "grid",
+      "figmaName": "Forma / Grid",
+      "source": "patterns/grid.html",
+      "codeConnect": {
+        "id": "Forma/grid",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "handoff-summary",
       "figmaName": "Forma / Handoff Summary",
@@ -700,6 +750,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "key-value-list",
+      "figmaName": "Forma / Key Value List",
+      "source": "patterns/key-value-list.html",
+      "codeConnect": {
+        "id": "Forma/key-value-list",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "landmark-region",
       "figmaName": "Forma / Landmark Region",
@@ -1130,6 +1190,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "section",
+      "figmaName": "Forma / Section",
+      "source": "patterns/section.html",
+      "codeConnect": {
+        "id": "Forma/section",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "section-heading",
       "figmaName": "Forma / Section Heading",
@@ -1300,6 +1370,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "skip-link",
+      "figmaName": "Forma / Skip Link",
+      "source": "patterns/skip-link.html",
+      "codeConnect": {
+        "id": "Forma/skip-link",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "slider",
       "figmaName": "Forma / Slider",
@@ -1340,6 +1420,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "split",
+      "figmaName": "Forma / Split",
+      "source": "patterns/split.html",
+      "codeConnect": {
+        "id": "Forma/split",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "split-pane",
       "figmaName": "Forma / Split Pane",
@@ -1390,6 +1480,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "surface",
+      "figmaName": "Forma / Surface",
+      "source": "patterns/surface.html",
+      "codeConnect": {
+        "id": "Forma/surface",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "survey-progress",
       "figmaName": "Forma / Survey Progress",
@@ -1440,6 +1540,36 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "text-field",
+      "figmaName": "Forma / Text Field",
+      "source": "patterns/text-field.html",
+      "codeConnect": {
+        "id": "Forma/text-field",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
+    {
+      "id": "text-roles",
+      "figmaName": "Forma / Text Roles",
+      "source": "patterns/text-roles.html",
+      "codeConnect": {
+        "id": "Forma/text-roles",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
+    {
+      "id": "textarea",
+      "figmaName": "Forma / Textarea",
+      "source": "patterns/textarea.html",
+      "codeConnect": {
+        "id": "Forma/textarea",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "timeline",
       "figmaName": "Forma / Timeline",
@@ -1510,6 +1640,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "visually-hidden",
+      "figmaName": "Forma / Visually Hidden",
+      "source": "patterns/visually-hidden.html",
+      "codeConnect": {
+        "id": "Forma/visually-hidden",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "wizard",
       "figmaName": "Forma / Wizard",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.3.0-main.216.1",
+  "version": "0.3.0-main.217.1",
   "private": false,
   "type": "module",
   "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
@@ -47,8 +47,8 @@
     "test:motion": "node --test tests/motion-audit.test.mjs tests/motion-gate.test.mjs && node tools/motion-audit.mjs --strict",
     "check": "npm run build && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:motion && npm run test:marketing && npm run test:character-grid && npm run test:figma && npm run test:css && npm run test:package && npm run test:browser",
     "site:build": "npm run build && node tools/build-site.mjs",
-    "site:test": "node --test tests/site-build.test.mjs",
-    "site:check": "npm run site:build && npm run site:test && npm run site:mobile",
+    "site:test": "node --test tests/site-build.test.mjs tests/catalog-coverage.test.mjs",
+    "site:check": "npm run site:build && npm run catalog:check && npm run site:test && npm run site:mobile",
     "site:mobile": "playwright test --config=playwright.site.config.mjs",
     "pack:verify": "npm run build && npm pack --dry-run",
     "test:package": "node --test tests/package-contract.test.mjs",
@@ -62,7 +62,9 @@
     "example:install": "mkdir -p build/example && cp examples/echelon-marketing-site/forma.lock build/example/forma.lock && bash actions/install-presentation/install.sh --lock build/example/forma.lock --source dist/marketing --update --output examples/echelon-marketing-site/assets/forma",
     "policy:check": "dotnet run --project tools/SiteCssPolicy/SiteCssPolicy.fsproj --",
     "release:check": "npm run build && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:motion && npm run test:marketing && npm run test:character-grid && npm run test:css && npm run test:package && playwright test tests/browser/marketing.spec.mjs && npm run site:check",
-    "test:figma": "node --test tests/figma-contract.test.mjs"
+    "test:figma": "node --test tests/figma-contract.test.mjs",
+    "catalog:check": "node tools/catalog/validate.mjs && node tools/catalog/inventory.mjs --check",
+    "catalog:inventory": "node tools/catalog/inventory.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",

package/patterns/bounded-overflow.html

@@ -0,0 +1,9 @@
+<div class="ef-bounded-overflow" role="region" aria-label="Quarterly totals by region" tabindex="0">
+  <table>
+    <thead><tr><th scope="col">Region</th><th scope="col">Q1</th><th scope="col">Q2</th><th scope="col">Q3</th><th scope="col">Q4</th><th scope="col">Year</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">North America</th><td>1,204,000</td><td>1,318,500</td><td>1,402,250</td><td>1,511,000</td><td>5,435,750</td></tr>
+      <tr><th scope="row">Europe</th><td>904,100</td><td>931,000</td><td>1,010,400</td><td>1,120,900</td><td>3,966,400</td></tr>
+    </tbody>
+  </table>
+</div>

package/patterns/button.html

@@ -0,0 +1,5 @@
+<div class="ef-actions">
+  <button type="submit">Save changes</button>
+  <button type="button">Cancel</button>
+  <a class="ef-button" href="#button-help">Read the help article</a>
+</div>

package/patterns/container.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <div class="ef-container" data-ef-width="narrow">
+    <h2>Privacy notice</h2>
+    <p>Narrow containers keep reading-focused regions at a comfortable measure while the page background stays full width.</p>
+  </div>
+</div>

package/patterns/date-time-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="date-time-field-due">Due date</label>
+  <span class="ef-field__description" id="date-time-field-due-description">The browser supplies its own date picker; typing the date also works.</span>
+  <input id="date-time-field-due" name="due" type="date" aria-describedby="date-time-field-due-description">
+</div>

package/patterns/grid.html

@@ -0,0 +1,5 @@
+<ul class="ef-grid" aria-label="Environments" role="list">
+  <li class="ef-surface"><h3>Production</h3><p>12 services, all reporting.</p></li>
+  <li class="ef-surface"><h3>Staging</h3><p>12 services, 1 deploying.</p></li>
+  <li class="ef-surface"><h3>Development</h3><p>9 services, 3 idle.</p></li>
+</ul>

package/patterns/image-choice.html

@@ -4,7 +4,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="compact" required>
     <span class="ef-choice__media">
-      <img src="/path/to/compact-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='21' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='32' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='43' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='54' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='65' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='76' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Compact layout</strong>
@@ -15,7 +15,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="spacious">
     <span class="ef-choice__media">
-      <img src="/path/to/spacious-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='34' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='58' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Spacious layout</strong>

package/patterns/key-value-list.html

@@ -0,0 +1,5 @@
+<dl class="ef-key-value-list">
+  <div><dt>Account</dt><dd>Northwind Logistics</dd></div>
+  <div><dt>Plan</dt><dd>Team, billed annually</dd></div>
+  <div><dt>Renewal</dt><dd><time datetime="2027-03-01">1 March 2027</time></dd></div>
+</dl>

package/patterns/section.html

@@ -0,0 +1,4 @@
+<section class="ef-section" aria-labelledby="section-title">
+  <h2 id="section-title">Recent activity</h2>
+  <p>Sections separate page regions with a consistent block rhythm.</p>
+</section>

package/patterns/skip-link.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <a class="ef-skip-link" href="#skip-link-main">Skip to main content</a>
+  <main id="skip-link-main" tabindex="-1">
+    <h1>Account settings</h1>
+  </main>
+</div>

package/patterns/split.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <div class="ef-split">
+    <div>
+      <h2>Install</h2>
+      <p>The primary region takes the available space. The supporting region wraps below it when the row runs out of room.</p>
+    </div>
+    <aside aria-label="Requirements">
+      <h3>Requirements</h3>
+      <p>Node 22 or later.</p>
+    </aside>
+  </div>
+</div>

package/patterns/surface.html

@@ -0,0 +1,4 @@
+<section class="ef-surface" aria-labelledby="surface-title">
+  <h2 id="surface-title">Billing contact</h2>
+  <p>Invoices are sent to the finance team on the first business day of each month.</p>
+</section>

package/patterns/text-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="text-field-email">Work email</label>
+  <span class="ef-field__description" id="text-field-email-description">We send sign-in links to this address.</span>
+  <input id="text-field-email" name="email" type="email" autocomplete="email" aria-describedby="text-field-email-description" required>
+</div>

package/patterns/text-roles.html

@@ -0,0 +1,7 @@
+<div class="ef-site">
+  <p class="ef-eyebrow">Release 0.3</p>
+  <h2>Faster onboarding for new teams</h2>
+  <p class="ef-lead">A lead paragraph introduces the section in one or two sentences.</p>
+  <blockquote class="ef-statement"><p>Forma keeps behavior in the application and presentation in the design system.</p></blockquote>
+  <span class="ef-component-kicker">Component kicker</span>
+</div>

package/patterns/textarea.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="textarea-summary">Change summary</label>
+  <span class="ef-field__description" id="textarea-summary-description">Describe what changed and why. Plain text, up to 500 characters.</span>
+  <textarea id="textarea-summary" name="summary" rows="4" maxlength="500" aria-describedby="textarea-summary-description"></textarea>
+</div>

package/patterns/visually-hidden.html

@@ -0,0 +1,4 @@
+<button type="button">
+  <span aria-hidden="true">×</span>
+  <span class="ef-visually-hidden">Remove filter: Region is Europe</span>
+</button>