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

package/dist/patterns/diagram.html

@@ -0,0 +1,49 @@
+<figure class="ef-diagram" aria-labelledby="diagram-title">
+  <figcaption id="diagram-title">Publication workflow</figcaption>
+  <p>Fill colors show the owning team through a consumer-defined mapping (see the key). They say nothing about state: each item states its kind and state in text.</p>
+  <div class="ef-diagram__viewport" tabindex="0" role="group" aria-label="Publication workflow canvas, scroll to see all items">
+    <div class="ef-diagram__canvas" style="--ef-diagram-canvas-w: 720px; --ef-diagram-canvas-h: 330px;">
+      <svg class="ef-diagram__wires" viewBox="0 0 720 330" aria-hidden="true" focusable="false">
+        <defs>
+          <marker id="diagram-arrow" class="ef-diagram-marker" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
+        </defs>
+        <path class="ef-diagram-connector" d="M216 70 H258" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" d="M460 70 H502" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" data-ef-line="dashed" d="M360 150 V198" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" data-ef-line="dotted" d="M260 260 H116 V152" marker-end="url(#diagram-arrow)"/>
+      </svg>
+      <article class="ef-diagram-node" data-ef-shape="rounded" aria-labelledby="node-draft" style="--ef-diagram-x: 16px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">Task</p>
+        <h3 class="ef-diagram-node__label" id="node-draft">Draft article</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Done</dd><dt>Team</dt><dd>Editorial</dd></dl>
+      </article>
+      <article class="ef-diagram-node" aria-labelledby="node-review" style="--ef-diagram-x: 260px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #fff1d6; --ef-diagram-accent: #8a5300; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">Decision</p>
+        <h3 class="ef-diagram-node__label" id="node-review">Legal review</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Active</dd><dt>Team</dt><dd>Legal</dd></dl>
+      </article>
+      <article class="ef-diagram-node" data-ef-shape="pill" aria-labelledby="node-publish" style="--ef-diagram-x: 504px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">End</p>
+        <h3 class="ef-diagram-node__label" id="node-publish"><a href="#diagram-title">Publish</a></h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Waiting</dd><dt>Team</dt><dd>Editorial</dd></dl>
+      </article>
+      <article class="ef-diagram-node" data-ef-shape="rounded" aria-labelledby="node-rework" style="--ef-diagram-x: 260px; --ef-diagram-y: 200px; --ef-diagram-w: 200px;">
+        <p class="ef-diagram-node__kind">Task</p>
+        <h3 class="ef-diagram-node__label" id="node-rework">Rework</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Not started</dd></dl>
+      </article>
+      <span class="ef-diagram-connector__label" style="--ef-diagram-x: 372px; --ef-diagram-y: 164px;">changes requested</span>
+    </div>
+  </div>
+  <ol class="ef-diagram__relations" aria-label="Relationships">
+    <li>Draft article leads to Legal review (solid line).</li>
+    <li>Legal review leads to Publish when approved (solid line).</li>
+    <li>Legal review leads to Rework when changes are requested (dashed line).</li>
+    <li>Rework returns to Draft article (dotted line).</li>
+  </ol>
+  <dl class="ef-diagram-legend" aria-label="Key: fill color by owning team">
+    <div><dt><span class="ef-diagram-legend__swatch" style="--ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3;"></span> Editorial</dt><dd>blue fill</dd></div>
+    <div><dt><span class="ef-diagram-legend__swatch" style="--ef-diagram-fill: #fff1d6; --ef-diagram-accent: #8a5300;"></span> Legal</dt><dd>amber fill</dd></div>
+    <div><dt><span class="ef-diagram-legend__swatch"></span> Unassigned</dt><dd>Forma default</dd></div>
+  </dl>
+</figure>

package/dist/patterns/documentation-layout.html

@@ -0,0 +1,18 @@
+<div class="ef-site" data-ef-layout="documentation">
+  <div class="ef-site__main">
+  <div class="ef-doc">
+    <nav class="ef-doc__nav" aria-label="Documentation">
+      <p class="ef-eyebrow ef-doc__heading">Guides</p>
+      <ul><li><a href="#install" aria-current="page">Install</a></li><li><a href="#configure">Configure</a></li><li><a href="#upgrade">Upgrade</a></li></ul>
+    </nav>
+    <article class="ef-doc__content ef-prose" id="install">
+      <h1>Install</h1>
+      <p>Documentation pages pair a navigation rail with a prose article and an optional page outline.</p>
+    </article>
+    <nav class="ef-doc__aside" aria-label="On this page">
+      <p class="ef-eyebrow ef-doc__heading">On this page</p>
+      <ul><li><a href="#install">Requirements</a></li><li><a href="#install">Verify</a></li></ul>
+    </nav>
+  </div>
+  </div>
+</div>

package/dist/patterns/emphasis-budget.html

@@ -0,0 +1,21 @@
+<main class="ef-emphasis-budget" data-emphasis-budget="one-primary" aria-labelledby="emphasis-budget-title">
+  <header>
+    <p class="ef-component-kicker">Deployment review</p>
+    <h2 id="emphasis-budget-title">Release decision</h2>
+  </header>
+  <section data-emphasis="primary" aria-labelledby="emphasis-primary">\n    <p class="ef-emphasis-label">Primary</p>
+    <span class="ef-status-lozenge" data-state="unknown">Unknown consumer outcome</span>
+    <h3 id="emphasis-primary">Reconcile before publishing</h3>
+    <p>The consuming application has not supplied current verification evidence.</p>
+    <button type="button">Reconcile consumer</button>
+  </section>
+  <section data-emphasis="secondary" aria-labelledby="emphasis-secondary">\n    <p class="ef-emphasis-label">Secondary</p>
+    <h3 id="emphasis-secondary">Verification evidence</h3>
+    <p>Package build and repository checks passed. Consumer verification remains unresolved.</p>
+  </section>
+  <div class="ef-emphasis-budget__support">
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>History</h3><p>The previous release completed successfully.</p></section>
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>Package</h3><p>Version 1.4.0 with provenance enabled.</p></section>
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>Activity</h3><p>Recent repository work includes presentation and browser-test changes.</p></section>
+  </div>
+</main>

package/dist/patterns/entry-index.html

@@ -0,0 +1,16 @@
+<div class="ef-site">
+  <ol class="ef-index" aria-label="Research areas">
+    <li class="ef-index__item">
+      <p class="ef-index__marker">R / 01</p>
+      <div class="ef-index__heading"><p class="ef-eyebrow">Intelligent systems</p><h3 class="ef-index__title">AI Engineering</h3></div>
+      <p class="ef-index__summary">Dependable practice, evaluation, human oversight, and workflow design.</p>
+      <a class="ef-index__link" href="#ai">Visit AI Engineering</a>
+    </li>
+    <li class="ef-index__item">
+      <p class="ef-index__marker">R / 02</p>
+      <div class="ef-index__heading"><p class="ef-eyebrow">Perception &amp; composition</p><h3 class="ef-index__title">Visual Engineering</h3></div>
+      <p class="ef-index__summary">Evidence-led hierarchy, typography, color, composition, and interaction.</p>
+      <a class="ef-index__link" href="#visual">Visit Visual Engineering</a>
+    </li>
+  </ol>
+</div>

package/dist/patterns/evidence-relationship.html

@@ -0,0 +1 @@
+<article class="ef-evidence-relationship" aria-labelledby="relationship-claim"><header><p class="ef-component-kicker">Supports</p><h2 id="relationship-claim">Claim: deployment is ready</h2></header><div class="ef-evidence-relationship__body"><p><strong>Evidence:</strong> Required checks passed.</p><p><strong>Source:</strong> CI run 1042</p><p><strong>Scope:</strong> commit abc123</p></div><footer><span class="ef-status-lozenge">Current</span></footer></article>

package/dist/patterns/facts.html

@@ -0,0 +1,7 @@
+<div class="ef-site">
+  <dl class="ef-facts">
+    <div class="ef-facts__item"><dt>Version 0.3.0</dt><dd>Pinned in the site's forma.lock</dd></div>
+    <div class="ef-facts__item"><dt>Zero runtime</dt><dd>HTML and CSS only</dd></div>
+    <div class="ef-facts__item"><dt>WCAG 2.2 AA</dt><dd>Target for stable patterns</dd></div>
+  </dl>
+</div>

package/dist/patterns/fault-banner.html

@@ -0,0 +1,19 @@
+<aside
+  class="ef-alert ef-fault-banner"
+  role="status"
+  data-ef-intent="banner"
+  data-ef-severity="critical"
+  data-ef-motion-weight="standard"
+  data-ef-motion-entry
+  aria-labelledby="fault-banner-title">
+  <div class="ef-alert__icon ef-fault-banner__marker" aria-hidden="true">!!</div>
+  <div class="ef-fault-banner__body">
+    <p class="ef-fault__severity">Critical</p>
+    <h2 class="ef-alert__title" id="fault-banner-title">Diagnostics storage is unavailable</h2>
+    <p>The application is running in a degraded state. New diagnostics are queued locally.</p>
+    <p class="ef-fault-reference">Reference <code>AG-22K8M</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRestoreSink">Reconnect diagnostics</button>
+  </div>
+</aside>

package/dist/patterns/fault-blocking.html

@@ -0,0 +1,25 @@
+<button type="button" commandfor="blocking-fault-dialog" command="show-modal">Preview blocking fault</button>
+<dialog
+  class="ef-dialog ef-fault-blocking"
+  id="blocking-fault-dialog"
+  data-ef-intent="blocking"
+  data-ef-severity="critical"
+  data-ef-motion-weight="heavy"
+  aria-labelledby="blocking-fault-title"
+  aria-describedby="blocking-fault-message">
+  <div class="ef-dialog__body">
+    <div class="ef-fault-blocking__heading">
+      <div class="ef-fault-blocking__marker" aria-hidden="true">!!</div>
+      <div>
+        <p class="ef-fault__severity">Critical</p>
+        <h2 id="blocking-fault-title">This application cannot continue safely</h2>
+      </div>
+    </div>
+    <p id="blocking-fault-message">The current state cannot be verified. Use one of the recovery actions below before continuing.</p>
+    <p class="ef-fault-reference">Reference <code>AG-7P2DX</code></p>
+  </div>
+  <div class="ef-dialog__actions ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanOpenReadOnly">Open read-only</button>
+    <button type="button" data-ef-aegis-capability="CanReload">Reload</button>
+  </div>
+</dialog>

package/dist/patterns/fault-details.html

@@ -0,0 +1,11 @@
+<details class="ef-fault-details">
+  <summary>Safe diagnostic details</summary>
+  <div class="ef-fault-details__content">
+    <dl class="ef-fault-details__list">
+      <div><dt>Reference</dt><dd><code>AG-4F82C</code></dd></div>
+      <div><dt>Application</dt><dd>Chrona</dd></div>
+      <div><dt>Recovery state</dt><dd>Retry available</dd></div>
+    </dl>
+    <p class="ef-fault-details__boundary">Only explicitly approved, already-sanitized diagnostic values belong in this surface.</p>
+  </div>
+</details>

package/dist/patterns/fault-inline.html

@@ -0,0 +1,17 @@
+<div
+  class="ef-fault ef-fault--inline"
+  id="profile-save-fault"
+  data-ef-intent="inline"
+  data-ef-severity="error"
+  aria-labelledby="profile-save-fault-title">
+  <div class="ef-fault__marker" aria-hidden="true">!</div>
+  <div class="ef-fault__body">
+    <p class="ef-fault__severity">Error</p>
+    <p class="ef-fault__title" id="profile-save-fault-title"><strong>Profile was not saved.</strong></p>
+    <p class="ef-fault__message">Check your connection and try again.</p>
+    <p class="ef-fault-reference">Reference <code>AG-4F82C</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+  </div>
+</div>

package/dist/patterns/fault-notification.html

@@ -0,0 +1,20 @@
+<aside
+  class="ef-toast ef-fault-notification"
+  role="status"
+  data-ef-intent="notification"
+  data-ef-severity="warning"
+  data-ef-motion-weight="standard"
+  data-ef-motion-entry
+  aria-labelledby="fault-notification-title">
+  <div class="ef-fault-notification__marker" aria-hidden="true">!</div>
+  <div class="ef-fault-notification__body">
+    <p class="ef-fault__severity">Warning</p>
+    <h3 class="ef-toast__title" id="fault-notification-title">GitHub is temporarily unavailable</h3>
+    <p>Your work is still local. You can retry the synchronization.</p>
+    <p class="ef-fault-reference">Reference <code>AG-91B7Q</code></p>
+    <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+      <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+    </div>
+  </div>
+  <button type="button" class="ef-fault-notification__dismiss" data-ef-action="dismiss" aria-label="Dismiss notification">Close</button>
+</aside>

package/dist/patterns/fault-reference.html

@@ -0,0 +1,5 @@
+<p class="ef-fault-reference">
+  <span>Reference</span>
+  <code>AG-4F82C</code>
+  <button type="button" data-ef-action="copy-reference" aria-label="Copy fault reference AG-4F82C">Copy</button>
+</p>

package/dist/patterns/fault-summary.html

@@ -0,0 +1,20 @@
+<section class="ef-fault-summary" tabindex="-1" aria-labelledby="fault-summary-title">
+  <div class="ef-fault-summary__heading">
+    <div class="ef-fault-summary__marker" aria-hidden="true">!</div>
+    <div>
+      <p class="ef-fault__severity">2 unresolved faults</p>
+      <h2 id="fault-summary-title">Some work needs your attention</h2>
+      <p>Repeated occurrences are grouped by the application before rendering.</p>
+    </div>
+  </div>
+  <ol class="ef-fault-summary__list">
+    <li data-ef-severity="error">
+      <a href="#customer-name">Customer name could not be saved</a>
+      <span class="ef-fault-summary__meta">Error · AG-4F82C · occurred 3 times</span>
+    </li>
+    <li data-ef-severity="warning">
+      <a href="#sync-status">Synchronization is waiting for GitHub</a>
+      <span class="ef-fault-summary__meta">Warning · AG-91B7Q</span>
+    </li>
+  </ol>
+</section>

package/dist/patterns/fault.html

@@ -0,0 +1,17 @@
+<section
+  class="ef-fault"
+  data-ef-intent="inline"
+  data-ef-severity="error"
+  aria-labelledby="fault-title"
+  aria-describedby="fault-message">
+  <div class="ef-fault__marker" aria-hidden="true">!</div>
+  <div class="ef-fault__body">
+    <p class="ef-fault__severity">Error</p>
+    <h3 class="ef-fault__title" id="fault-title">Could not save changes</h3>
+    <p class="ef-fault__message" id="fault-message">The update did not complete. Your current values are still available.</p>
+    <p class="ef-fault-reference">Reference <code>AG-4F82C</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+  </div>
+</section>

package/dist/patterns/feed-item.html

@@ -0,0 +1,12 @@
+<article class="ef-feed-item" aria-labelledby="feed-item-title">
+  <div class="ef-feed-item__primary">
+    <p class="ef-feed-item__source">Build system</p>
+    <h2 id="feed-item-title">Deployment requires review</h2>
+  </div>
+  <div class="ef-feed-item__meta">
+    <span class="ef-status-lozenge" data-state="warning">Needs review</span>
+    <time datetime="2026-09-25T18:30:00Z">18:30</time>
+  </div>
+  <p class="ef-feed-item__summary">Production approval is still unresolved.</p>
+  <div class="ef-feed-item__actions"><button type="button">Review</button></div>
+</article>

package/dist/patterns/focus-stage.html

@@ -0,0 +1,4 @@
+<section class="ef-focus-stage" aria-label="Focused work">
+  <main class="ef-focus-stage__primary ef-surface"><h2>Primary artifact</h2><p>The dominant work surface receives available space.</p></main>
+  <aside class="ef-focus-stage__support ef-stack"><h2>Inspector</h2><label>Title <input value="Primary artifact"></label><button type="button">Apply</button></aside>
+</section>

package/dist/patterns/frame.html

@@ -0,0 +1,4 @@
+<figure class="ef-frame">
+  <div class="ef-frame__media"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450'%3E%3Crect width='100%25' height='100%25' fill='%23ddd'/%3E%3C/svg%3E" alt=""></div>
+  <figcaption>Frame preserves a declared media proportion without making the content itself a component.</figcaption>
+</figure>

package/dist/patterns/freshness.html

@@ -0,0 +1 @@
+<p class="ef-freshness"><span class="ef-freshness__label">Last verified</span> <time datetime="2026-09-26T04:30:00Z">04:30 UTC</time> <span class="ef-freshness__state">Current</span></p>

package/dist/patterns/handoff-summary.html

@@ -0,0 +1 @@
+<section class="ef-handoff-summary" aria-labelledby="handoff-title"><header><p class="ef-component-kicker">Agent proposal</p><h2 id="handoff-title">Publish release</h2><p>Agent: OpenAI implementation agent</p></header><dl><div><dt>Proposed consequence</dt><dd>Publish version 1.4.0</dd></div><div><dt>Evidence</dt><dd>Tests and validation passed</dd></div><div><dt>Uncertainty</dt><dd>Production consumer smoke test not observed</dd></div><div><dt>Human authority</dt><dd>Approval required before publication</dd></div></dl><div class="ef-cluster"><button type="button">Approve</button><button type="button">Reject</button><button type="button">Request changes</button></div></section>

package/dist/patterns/hero.html

@@ -0,0 +1,17 @@
+<div class="ef-site">
+  <section class="ef-hero" aria-labelledby="hero-title">
+    <div class="ef-hero__content">
+      <p class="ef-eyebrow">Applied research</p>
+      <h1 class="ef-hero__title" id="hero-title">State the promise before the proof</h1>
+      <p class="ef-lead">The hero carries one primary recognition path: what this is, why it matters, and the one action most visitors should take.</p>
+      <div class="ef-actions"><a class="ef-button" data-ef-variant="primary" href="#start">Book a working session</a><a class="ef-button" href="#work">See the body of work</a></div>
+      <dl class="ef-facts">
+        <div class="ef-facts__item"><dt>40%+ throughput</dt><dd>Delivery flow realigned</dd></div>
+        <div class="ef-facts__item"><dt>Hours to minutes</dt><dd>Reconciliation stabilized</dd></div>
+      </dl>
+    </div>
+    <div class="ef-hero__aside">
+      <blockquote class="ef-statement"><p>Supporting context sits beside the promise on wide screens and below it on narrow ones, in source order.</p></blockquote>
+    </div>
+  </section>
+</div>

package/dist/patterns/hierarchy-tree.html

@@ -0,0 +1,11 @@
+<nav class="ef-hierarchy-tree" aria-label="Repository hierarchy">
+  <ul>
+    <li><details open><summary>Application</summary><ul>
+      <li><details open><summary>Billing</summary><ul>
+        <li><a href="#invoices" aria-current="page">Invoices</a></li>
+        <li><a href="#customers">Customers</a></li>
+      </ul></details></li>
+      <li><details><summary>Operations</summary><ul><li><a href="#runs">Runs</a></li></ul></details></li>
+    </ul></details></li>
+  </ul>
+</nav>

package/dist/patterns/identifier.html

@@ -0,0 +1,9 @@
+<section class="ef-stack" aria-labelledby="identifier-title">
+  <h3 id="identifier-title">Reference values</h3>
+  <dl class="ef-key-value-list">
+    <div><dt>Invoice</dt><dd><span class="ef-identifier">INV-10O2-7B51</span></dd></div>
+    <div><dt>Execution</dt><dd><span class="ef-identifier">EXE-20260926T045512Z-0O1I</span></dd></div>
+    <div><dt>Amount to verify</dt><dd><span class="ef-critical-value" data-ef-verify="true">$10,001.00</span></dd></div>
+  </dl>
+  <p>Low-context values use stronger glyph distinction and remain selectable text. Labels and surrounding prose still carry the meaning.</p>
+</section>

package/dist/patterns/landmark-region.html

@@ -0,0 +1,4 @@
+<aside class="ef-landmark-region" aria-label="Workspace context">
+  <nav aria-label="Primary"><a href="#overview" aria-current="page">Overview</a><a href="#activity">Activity</a></nav>
+  <p class="ef-landmark-region__status" role="status">System ready</p>
+</aside>

package/dist/patterns/lane-board.html

@@ -0,0 +1,10 @@
+<section class="ef-lane-board" aria-label="Work board">
+  <section class="ef-lane-board__lane" aria-labelledby="lane-ready">
+    <header class="ef-lane-board__header"><h2 id="lane-ready">Ready</h2><span>2 items</span></header>
+    <ol class="ef-lane-board__items"><li><article class="ef-surface"><h3>Prepare release</h3><p>Owner: Build team</p></article></li></ol>
+  </section>
+  <section class="ef-lane-board__lane" aria-labelledby="lane-review">
+    <header class="ef-lane-board__header"><h2 id="lane-review">Review</h2><span>1 item</span></header>
+    <ol class="ef-lane-board__items"><li><article class="ef-surface"><h3>Verify evidence</h3><p>State: blocked</p></article></li></ol>
+  </section>
+</section>

package/dist/patterns/marketing-shell.html

@@ -0,0 +1,40 @@
+<div class="ef-site" data-ef-layout="marketing">
+  <a class="ef-skip-link" href="#shell-main">Skip to main content</a>
+  <header class="ef-site-header">
+    <div class="ef-site-header__inner">
+      <div class="ef-site-header__identity">
+        <a class="ef-site-header__brand" href="#shell-main"><span class="ef-site-header__mark" aria-hidden="true">EX</span><span class="ef-site-header__name">Example / Product</span></a>
+        <p class="ef-site-header__tagline">Evidence-driven engineering systems</p>
+      </div>
+      <nav class="ef-site-nav" aria-label="Primary">
+        <ul class="ef-site-nav__list">
+          <li><a class="ef-site-nav__link" href="#shell-main" aria-current="page">Overview</a></li>
+          <li><a class="ef-site-nav__link" href="#shell-cta">Documentation</a></li>
+          <li><a class="ef-site-nav__link" data-ef-variant="action" href="#shell-cta">Get started</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  <main class="ef-site__main" id="shell-main" tabindex="-1">
+    <section class="ef-hero" aria-labelledby="shell-title">
+      <div class="ef-hero__content">
+        <p class="ef-eyebrow">Product overview</p>
+        <h1 class="ef-hero__title" id="shell-title">A clear promise in one sentence</h1>
+        <p class="ef-lead">Sites supply content. The shell supplies structure, rhythm, focus, and responsive behavior.</p>
+        <div class="ef-actions"><a class="ef-button" data-ef-variant="primary" href="#shell-cta">Get started</a><a class="ef-button" href="#shell-cta">Read the documentation</a></div>
+      </div>
+    </section>
+    <section class="ef-section" id="shell-cta" aria-labelledby="shell-cta-title">
+      <div class="ef-cta">
+        <div class="ef-cta__text"><h2 id="shell-cta-title">Start with a pinned Forma release</h2><p>Every site consumes the same versioned presentation layer.</p></div>
+        <div class="ef-actions"><a class="ef-button" data-ef-variant="primary" href="#shell-main">Install</a></div>
+      </div>
+    </section>
+  </main>
+  <footer class="ef-site-footer" data-ef-tone="inverse">
+    <div class="ef-site-footer__inner">
+      <div class="ef-site-footer__main"><div><p class="ef-eyebrow">Example / Product</p><p>One sentence that says what the product is for.</p></div></div>
+      <p class="ef-site-footer__note"><span>&copy; 2026 Example</span><span>Built with Forma</span></p>
+    </div>
+  </footer>
+</div>

package/dist/patterns/measure.html

@@ -0,0 +1,4 @@
+<article class="ef-measure">
+  <h2>Readable content measure</h2>
+  <p>Measure constrains line length while allowing the surrounding composition to determine placement and available space.</p>
+</article>

package/dist/patterns/metric-value-change.html

@@ -0,0 +1,9 @@
+<article class="ef-metric-card" aria-labelledby="metric-ar-label">
+  <div class="ef-metric-card__label" id="metric-ar-label">Outstanding AR</div>
+  <!-- The application replaced this element with the new authoritative value
+       and marked it data-ef-value-change; the text is current immediately. -->
+  <div class="ef-metric-card__value" data-ef-value-change>$38,200</div>
+  <div class="ef-metric-card__context"><span class="ef-status-lozenge" data-state="attention">$8,200 overdue</span></div>
+  <p class="ef-visually-hidden" aria-live="polite">Outstanding AR updated to $38,200, down from $42,500.</p>
+  <a href="#details">View receivables</a>
+</article>

package/dist/patterns/mosaic.html

@@ -0,0 +1,6 @@
+<section class="ef-mosaic" aria-label="Editorial collection">
+  <article class="ef-surface" data-span="2"><h2>Featured story</h2><p>Visual emphasis through span, without semantic reordering.</p></article>
+  <article class="ef-surface"><h2>Research</h2><p>Supporting item.</p></article>
+  <article class="ef-surface"><h2>Example</h2><p>Supporting item.</p></article>
+  <article class="ef-surface" data-span="full"><h2>Next step</h2><p>Full-width region returns to one column on narrow screens.</p></article>
+</section>

package/dist/patterns/navigation-shell.html

@@ -0,0 +1,8 @@
+<div class="ef-navigation-shell">
+  <details class="ef-navigation-shell__compact">
+    <summary>Navigation</summary>
+    <nav aria-label="Primary"><a href="#overview" aria-current="page">Overview</a><a href="#activity">Activity</a><a href="#settings">Settings</a></nav>
+  </details>
+  <nav class="ef-navigation-shell__persistent" aria-label="Primary"><a href="#overview" aria-current="page">Overview</a><a href="#activity">Activity</a><a href="#settings">Settings</a></nav>
+  <main class="ef-navigation-shell__content" id="overview"><h1>Overview</h1></main>
+</div>

package/dist/patterns/overflow-command-disclosure.html

@@ -0,0 +1,6 @@
+<details class="ef-overflow-commands">
+  <summary>More commands</summary>
+  <div class="ef-overflow-commands__panel" role="group" aria-label="More commands">
+    <button type="button">Duplicate</button><button type="button">Archive</button>
+  </div>
+</details>

package/dist/patterns/overview-disclosure.html

@@ -0,0 +1,12 @@
+<section class="ef-overview-disclosure" aria-labelledby="overview-title">
+  <div class="ef-overview-disclosure__overview">
+    <h3 id="overview-title">Verification still required</h3>
+    <p><strong>State:</strong> Evidence is stale. One unresolved item remains before the application can confirm the transition.</p>
+  </div>
+  <details class="ef-disclosure" data-ef-motion-weight="light">
+    <summary>Inspect secondary evidence</summary>
+    <div class="ef-disclosure__content">
+      <p>Last verified 3 hours ago. Source B has not responded to reconciliation.</p>
+    </div>
+  </details>
+</section>

package/dist/patterns/path-summary.html

@@ -0,0 +1,8 @@
+<section class="ef-path-summary" aria-labelledby="path-title">
+  <header><h2 id="path-title">Selected path</h2><p>3 relationships</p></header>
+  <ol class="ef-path-summary__steps">
+    <li><a href="#chrona">Chrona</a><span>provides time entries to</span></li>
+    <li><a href="#billing">Billing</a><span>creates billable charges for</span></li>
+    <li aria-current="step"><a href="#summa">Summa</a><span>records the invoice</span></li>
+  </ol>
+</section>

package/dist/patterns/priority-stack.html

@@ -0,0 +1,4 @@
+<section class="ef-priority-stack" aria-label="Responsive priority composition">
+  <main class="ef-surface" data-priority="primary"><h2>Primary task</h2><p>Receives more space when available and stacks first when space contracts.</p></main>
+  <aside class="ef-surface"><h2>Supporting context</h2><p>Secondary context remains in semantic order.</p></aside>
+</section>

package/dist/patterns/progress-bar.html

@@ -0,0 +1,15 @@
+<div class="ef-progress">
+  <div class="ef-progress__header">
+    <span class="ef-progress__label" id="export-progress-label">Exporting audit log</span>
+    <span class="ef-progress__value">420 of 1,000 records</span>
+  </div>
+  <progress class="ef-progress__bar" value="420" max="1000" aria-labelledby="export-progress-label">42%</progress>
+</div>
+
+<div class="ef-progress">
+  <div class="ef-progress__header">
+    <span class="ef-progress__label" id="index-progress-label">Preparing search index</span>
+    <span class="ef-progress__value">Total not yet known</span>
+  </div>
+  <progress class="ef-progress__bar" aria-labelledby="index-progress-label">Preparing</progress>
+</div>

package/dist/patterns/prose.html

@@ -0,0 +1,9 @@
+<div class="ef-site">
+  <article class="ef-prose">
+    <h2>Long-form content stays inside the reading measure</h2>
+    <p>Prose regions keep line length readable, preserve underlined links such as <a href="#measure">the measure contract</a>, and give headings consistent rhythm.</p>
+    <h3>Supporting detail</h3>
+    <ul><li>Lists inherit the same measure.</li><li>Inline <code>code</code> stays legible.</li></ul>
+    <blockquote><p>Quotations use the display face without a second emphasis channel.</p></blockquote>
+  </article>
+</div>

package/dist/patterns/rail.html

@@ -0,0 +1,4 @@
+<section class="ef-rail" aria-label="Content with supporting rail">
+  <aside class="ef-surface"><h2>Context</h2><p>Supporting navigation, evidence, or controls.</p></aside>
+  <main><h2>Primary work</h2><p>The primary region keeps semantic source order and absorbs remaining space.</p></main>
+</section>

package/dist/patterns/recovery-actions.html

@@ -0,0 +1,5 @@
+<div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+  <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+  <button type="button" data-ef-aegis-capability="CanReauthenticate">Sign in</button>
+  <button type="button" data-ef-aegis-capability="CanOpenReadOnly">Open read-only</button>
+</div>

package/dist/patterns/relationship-index.html

@@ -0,0 +1,8 @@
+<section class="ef-relationship-index" aria-labelledby="relationships-title">
+  <header><h2 id="relationships-title">Relationships</h2><p>Selected entity: Billing</p></header>
+  <dl class="ef-relationship-index__list">
+    <div><dt>Depends on</dt><dd><a href="#chrona">Chrona</a></dd></div>
+    <div><dt>Publishes to</dt><dd><a href="#summa">Summa</a></dd></div>
+    <div><dt>Owned by</dt><dd><a href="#finance">Finance domain</a></dd></div>
+  </dl>
+</section>

package/dist/patterns/reorder-states.html

@@ -0,0 +1,31 @@
+<fieldset class="ef-ranking">
+  <legend class="ef-ranking__legend">Reorder presentation states</legend>
+  <p class="ef-field__description">Static illustration of the hooks an application sets while reordering. The move buttons remain the non-drag path.</p>
+  <ol class="ef-ranking__list">
+    <li class="ef-ranking__item" data-ef-rank="1" data-ef-manipulation="dragging" style="--ef-drag-y: 0.75rem">
+      <span class="ef-ranking__position" aria-hidden="true">1</span>
+      <span class="ef-ranking__label">Reliability (dragging: tracks the pointer directly)</span>
+      <span class="ef-ranking__actions">
+        <button type="button" disabled aria-label="Move Reliability up">↑</button>
+        <button type="button" aria-label="Move Reliability down">↓</button>
+      </span>
+    </li>
+    <li class="ef-ranking__item" data-ef-rank="2" data-ef-drop="candidate" data-ef-manipulation="displaced">
+      <span class="ef-ranking__position" aria-hidden="true">2</span>
+      <span class="ef-ranking__label">Delivery speed (drop candidate)</span>
+      <span class="ef-ranking__actions">
+        <button type="button" aria-label="Move Delivery speed up">↑</button>
+        <button type="button" aria-label="Move Delivery speed down">↓</button>
+      </span>
+    </li>
+    <li class="ef-ranking__item" data-ef-rank="3" data-ef-drop="rejected" data-ef-manipulation="settling">
+      <span class="ef-ranking__position" aria-hidden="true">3</span>
+      <span class="ef-ranking__label">Cost efficiency (rejected: settles back)</span>
+      <span class="ef-ranking__actions">
+        <button type="button" aria-label="Move Cost efficiency up">↑</button>
+        <button type="button" disabled aria-label="Move Cost efficiency down">↓</button>
+      </span>
+    </li>
+  </ol>
+  <p class="ef-ranking__announcement" aria-live="polite" aria-atomic="true">Cost efficiency cannot move above Delivery speed. Order unchanged.</p>
+</fieldset>

package/dist/patterns/resizable-split-pane.html

@@ -0,0 +1,11 @@
+<section class="ef-split-pane" data-ef-resizable aria-label="Inspector workspace" style="--ef-split-size: 62%">
+  <div class="ef-split-pane__primary" id="resizable-primary">
+    <h2>Working surface</h2>
+    <p>The application owns the primary size and writes it to <code>--ef-split-size</code>; CSS clamps it to the legal bounds.</p>
+  </div>
+  <div class="ef-split-pane__separator" role="separator" tabindex="0" aria-orientation="vertical" aria-controls="resizable-primary" aria-label="Resize working surface" aria-valuemin="30" aria-valuemax="80" aria-valuenow="62"></div>
+  <aside class="ef-split-pane__secondary" aria-label="Inspector">
+    <h3>Inspector</h3>
+    <p>Pointer drag and Arrow keys are Limen/application behavior. Both write the same size, so they end in the same state.</p>
+  </aside>
+</section>

package/dist/patterns/responsive-grid.html

@@ -0,0 +1,5 @@
+<section class="ef-responsive-grid" aria-label="Responsive summary grid">
+  <article class="ef-surface ef-span-2"><h2>Priority summary</h2><p>A priority region may span columns without changing source order.</p></article>
+  <article class="ef-surface"><h2>Evidence</h2><p>Supporting information.</p></article>
+  <article class="ef-surface"><h2>Actions</h2><p>Related actions remain reachable.</p></article>
+</section>

package/dist/patterns/scope-trail.html

@@ -0,0 +1 @@
+<nav class="ef-scope-trail" aria-label="Current scope"><ol><li><a href="#system">System</a></li><li><a href="#billing">Billing</a></li><li aria-current="page">Invoice 1042</li></ol></nav>