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

package/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/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/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/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/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/patterns/manifest.md

@@ -38,6 +38,8 @@ Own the canonical semantic HTML structures consumed by Echelon applications. Pat
 - Documentation and consumer examples wrap the canonical pattern in `<ef-{slug} class="ef-component-tag">`.
 - The `ef-*` wrapper is inert and must never replace the native semantic element inside it or be registered with `customElements.define()`.
 - Modal flyouts stay on native `dialog`; gesture-driven or persistent drawer behavior belongs to Limen/application code.
+- Aegis presentation patterns consume the safe presentation view supplied by the application; raw Aegis faults and diagnostics are outside the pattern boundary.
+- `data-ef-aegis-capability` identifies a rendered recovery capability for Limen/application mapping but never grants authority.
 
 ## Maintenance
 

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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>

package/patterns/scroll-progress.html

@@ -0,0 +1,6 @@
+<div class="ef-scroll-progress" aria-hidden="true"></div>
+<article class="ef-stack">
+  <h2>Release notes</h2>
+  <p>The reading-progress bar above is a decorative projection of the page's scroll position. It adds no lag, triggers nothing, and is absent where scroll timelines are unsupported or reduced motion is requested.</p>
+  <p>The scrollbar and the headings remain the authoritative way to know where you are in the document.</p>
+</article>

package/patterns/section-heading.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <section class="ef-section" aria-labelledby="services-title">
+    <header class="ef-section-heading">
+      <div class="ef-section-heading__text">
+        <p class="ef-eyebrow">Service lines</p>
+        <h2 id="services-title">Name the section in plain language</h2>
+        <p>An optional sentence frames what follows and why it matters.</p>
+      </div>
+      <div class="ef-section-heading__aside"><a class="ef-button" href="#services">Explore the services</a></div>
+    </header>
+  </section>
+</div>

package/patterns/security-blockers.html

@@ -0,0 +1,3 @@
+<section class="ef-security-blockers" aria-labelledby="security-blockers-title"><h2 id="security-blockers-title">Release blockers</h2>
+<ul><li data-kind="violation"><a href="#SEC-INV-014">SEC-INV-014</a><span>Authorization invariant violated.</span></li>
+<li data-kind="unknown"><a href="#SEC-UNK-003">SEC-UNK-003</a><span>Runtime egress behavior has not been established.</span></li></ul></section>

package/patterns/security-evidence-age.html

@@ -0,0 +1 @@
+<section class="ef-evidence-age" aria-labelledby="evidence-age-title"><h2 id="evidence-age-title">Evidence freshness</h2><ul><li data-state="current"><a href="#SEC-EVD-042">SEC-EVD-042</a><span>Current · observed 24 Sep 2026</span></li><li data-state="stale"><a href="#SEC-EVD-031">SEC-EVD-031</a><span>Stale · invalidated by boundary change</span></li></ul></section>

package/patterns/security-evidence-chain.html

@@ -0,0 +1,2 @@
+<figure class="ef-security-evidence-chain" aria-labelledby="evidence-chain-title"><figcaption id="evidence-chain-title">Evidence chain for SEC-INV-014</figcaption>
+<ol><li><strong>Source</strong><span>Aegis</span></li><li><strong>Observation</strong><a href="#SEC-EVD-042">SEC-EVD-042</a></li><li><strong>Invariant</strong><a href="#SEC-INV-014">SEC-INV-014</a></li><li><strong>State</strong><span>Violated</span></li></ol></figure>

package/patterns/security-exception.html

@@ -0,0 +1,2 @@
+<article class="ef-security-exception" id="SEC-EXC-002"><header><p>Security exception</p><h3>SEC-EXC-002</h3></header>
+<dl><div><dt>Status</dt><dd>Active</dd></div><div><dt>Approver</dt><dd>Security owner</dd></div><div><dt>Expires</dt><dd><time datetime="2026-10-01">1 Oct 2026</time></dd></div><div><dt>Compensating control</dt><dd>Restricted capability and enhanced audit logging.</dd></div></dl></article>

package/patterns/security-invariant-result.html

@@ -0,0 +1 @@
+<article class="ef-invariant-result" id="SEC-INV-014" data-state="violated"><header><p>Security invariant</p><h3>SEC-INV-014</h3><strong>Violated</strong></header><p>Privileged actions require explicit authorization at the effect boundary.</p><dl><div><dt>Threats</dt><dd><a href="#SEC-THR-004">SEC-THR-004</a></dd></div><div><dt>Evidence</dt><dd><a href="#SEC-EVD-042">SEC-EVD-042</a></dd></div><div><dt>Independent verification</dt><dd>Required</dd></div></dl></article>

package/patterns/security-posture.html

@@ -0,0 +1,22 @@
+<section class="ef-security-posture" data-posture="blocked" aria-labelledby="security-posture-title">
+  <header class="ef-security-posture__header">
+    <div>
+      <p class="ef-security-posture__eyebrow">Tutela release posture</p>
+      <h2 id="security-posture-title">Blocked</h2>
+    </div>
+    <span class="ef-status-lozenge" data-state="danger" aria-label="Release posture: blocked">Blocked</span>
+  </header>
+  <dl class="ef-security-posture__meta">
+    <div><dt>Subject</dt><dd><code>0123456789abcdef</code></dd></div>
+    <div><dt>Scope</dt><dd>Authentication, authorization, agent tools</dd></div>
+    <div><dt>Assessed</dt><dd><time datetime="2026-09-24T16:00:00Z">24 Sep 2026</time></dd></div>
+  </dl>
+  <div class="ef-security-posture__blockers" role="status">
+    <strong>2 release blockers</strong>
+    <ul>
+      <li><a href="#SEC-INV-002">SEC-INV-002</a>: authorization evidence is unknown.</li>
+      <li><a href="#SEC-UNK-001">SEC-UNK-001</a>: imported-organization behavior is not established.</li>
+    </ul>
+  </div>
+  <p class="ef-security-posture__qualification">This posture describes the defined assessment scope and evidence. It is not a general claim that the system is secure.</p>
+</section>

package/patterns/security-posture.manifest.md

@@ -0,0 +1,20 @@
+# Feature Manifest — security posture pattern
+
+## Purpose
+Present a Tutela release posture with immutable subject, scope, freshness and blockers without deriving or reinterpreting security state.
+
+## Ownership
+Tutela owns posture derivation. Forma owns accessible presentation only.
+
+## States
+PASS, CONDITIONAL, BLOCKED and INDETERMINATE. Text is mandatory; color is supplementary.
+
+## Invariants
+- Unknowns are not hidden below findings.
+- No composite security score.
+- Stable IDs remain linkable.
+- Qualification that PASS is scoped evidence status remains available.
+- Responsive reflow and print preserve subject/scope/blockers.
+
+## Verification
+Exercise all four states, keyboard navigation, screen reader naming, high contrast, zoom/reflow and mobile widths.

package/patterns/security-state-matrix.html

@@ -0,0 +1,5 @@
+<section class="ef-security-state-matrix" aria-labelledby="security-state-title">
+<h2 id="security-state-title">Security evidence state</h2><dl class="ef-security-state-matrix__grid">
+<div data-state="verified"><dt>Verified</dt><dd>18</dd></div><div data-state="violated"><dt>Violated</dt><dd>1</dd></div>
+<div data-state="unknown"><dt>Unknown</dt><dd>3</dd></div><div data-state="stale"><dt>Stale</dt><dd>2</dd></div><div data-state="na"><dt>N/A</dt><dd>4</dd></div>
+</dl></section>

package/patterns/security-trend.html

@@ -0,0 +1 @@
+<section class="ef-security-trend" aria-labelledby="security-trend-title"><h2 id="security-trend-title">Security trend</h2><p>Compared with the previous assessed artifact.</p><ul><li data-direction="regression"><strong>Regression</strong><span>Unknown security effects increased from 0 to 2.</span></li><li data-direction="improvement"><strong>Improvement</strong><span>Stale evidence decreased from 3 to 1.</span></li><li data-direction="unknown"><strong>No measurement</strong><span>Exception aging was not measured for the previous artifact.</span></li></ul></section>

package/patterns/security-unknown.html

@@ -0,0 +1,2 @@
+<article class="ef-security-unknown" id="SEC-UNK-003"><header><p>Unknown security effect</p><h3>SEC-UNK-003</h3></header><p>Runtime egress behavior has not been established.</p>
+<dl><div><dt>Consequence</dt><dd>Release posture cannot be established for the network boundary.</dd></div><div><dt>Evidence needed</dt><dd>Observed egress policy test against the release artifact.</dd></div></dl></article>

package/patterns/sidebar.html

@@ -0,0 +1,4 @@
+<section class="ef-sidebar" aria-label="Workspace">
+  <aside class="ef-sidebar__side"><nav aria-label="Workspace navigation"><a href="#overview" aria-current="page">Overview</a><a href="#evidence">Evidence</a></nav></aside>
+  <main class="ef-sidebar__content" id="overview"><h2>Overview</h2><p>The main region grows while the sidebar preserves a useful measure.</p></main>
+</section>

package/patterns/site-footer.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <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>Strategy, architecture, and delivery for consequential systems.</p></div>
+        <div class="ef-actions"><a class="ef-button" href="#contact">Schedule a working session</a></div>
+      </div>
+      <nav class="ef-site-footer__nav" aria-label="Footer"><ul><li><a href="#privacy">Privacy</a></li><li><a href="#source">Source</a></li></ul></nav>
+      <p class="ef-site-footer__note"><span>&copy; 2026 Example</span><span>Indianapolis, Indiana</span></p>
+    </div>
+  </footer>
+</div>

package/patterns/site-header.html

@@ -0,0 +1,18 @@
+<div class="ef-site">
+  <header class="ef-site-header">
+    <div class="ef-site-header__inner">
+      <div class="ef-site-header__identity">
+        <a class="ef-site-header__brand" href="#top"><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="#top" aria-current="page">Overview</a></li>
+          <li><a class="ef-site-nav__link" href="#research">Research</a></li>
+          <li><a class="ef-site-nav__link" href="#docs">Documentation</a></li>
+          <li><a class="ef-site-nav__link" data-ef-variant="action" href="#contact">Get in touch</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+</div>

package/patterns/spatial-canvas.html

@@ -0,0 +1,13 @@
+<section class="ef-spatial-canvas" aria-labelledby="canvas-title">
+  <header class="ef-spatial-canvas__header">
+    <div><h2 id="canvas-title">System map</h2><p class="ef-spatial-canvas__orientation">Viewport: services / billing</p></div>
+    <div class="ef-cluster" aria-label="Canvas controls"><button type="button">Zoom out</button><button type="button">Reset view</button><button type="button">Zoom in</button></div>
+  </header>
+  <div class="ef-spatial-canvas__viewport" tabindex="0" aria-label="Scrollable system map">
+    <div class="ef-spatial-canvas__surface">
+      <article class="ef-surface"><h3>Billing</h3><p>Selected node</p></article>
+      <article class="ef-surface"><h3>Chrona</h3><p>Time source</p></article>
+    </div>
+  </div>
+  <details class="ef-spatial-canvas__index"><summary>Objects in this view</summary><nav aria-label="Canvas objects"><a href="#billing">Billing</a><a href="#chrona">Chrona</a></nav></details>
+</section>

package/patterns/spinner.html

@@ -0,0 +1,4 @@
+<p class="ef-spinner" role="status">
+  <span class="ef-spinner__indicator" aria-hidden="true"></span>
+  <span class="ef-spinner__label">Loading deployment history</span>
+</p>

package/patterns/split-pane.html

@@ -0,0 +1,4 @@
+<section class="ef-split-pane" aria-label="Inspector workspace">
+  <main class="ef-split-pane__primary"><h2>Working surface</h2><p>The primary task remains first in source order.</p></main>
+  <aside class="ef-split-pane__secondary" aria-label="Inspector"><h3>Inspector</h3><p>Contextual properties for the current selection.</p></aside>
+</section>

package/patterns/stack.html

@@ -0,0 +1,5 @@
+<section class="ef-stack" aria-label="Stack composition">
+  <header><h2>Section title</h2><p>Supporting context remains grouped with the heading.</p></header>
+  <article><h3>Primary content</h3><p>Stack owns only the vertical relationship between independent children.</p></article>
+  <footer><button type="button">Continue</button></footer>
+</section>

package/patterns/state-survivability.html

@@ -0,0 +1,19 @@
+<section class="ef-state-survivability" aria-labelledby="state-survivability-title">
+  <h3 id="state-survivability-title">Authoritative state projection</h3>
+  <div class="ef-state-survivability__state">
+    <span class="ef-status-lozenge" data-state="unknown">Unknown</span>
+    <p>Outcome has not been confirmed. Reconcile before retrying.</p>
+  </div>
+  <div class="ef-state-survivability__state">
+    <span class="ef-status-lozenge" data-state="attention">Stale</span>
+    <p>The displayed evidence is older than the application freshness policy permits.</p>
+  </div>
+  <div class="ef-state-survivability__state">
+    <span class="ef-status-lozenge" data-state="attention">Partial</span>
+    <p>Only the stated scope is complete. Omitted scope remains unresolved.</p>
+  </div>
+  <div class="ef-state-survivability__state">
+    <span class="ef-status-lozenge" data-state="blocked">Unavailable</span>
+    <p>The application reports this capability is currently unavailable.</p>
+  </div>
+</section>

package/patterns/steps.html

@@ -0,0 +1,8 @@
+<div class="ef-site">
+  <ol class="ef-steps" role="list" aria-label="Method">
+    <li>Understand the domain and its constraints.</li>
+    <li>Identify recurring symptom patterns.</li>
+    <li>Trace the causal mechanism.</li>
+    <li>Deliver treatment and prevention.</li>
+  </ol>
+</div>

package/patterns/switcher.html

@@ -0,0 +1,4 @@
+<section class="ef-switcher" aria-label="Narrative and supporting material">
+  <article class="ef-switcher__primary"><h2>Primary narrative</h2><p>The main content owns most available width.</p></article>
+  <aside class="ef-switcher__secondary" aria-label="Supporting material"><h2>Supporting material</h2><p>Secondary content remains adjacent when space permits.</p></aside>
+</section>

package/patterns/tooltip.html

@@ -0,0 +1,48 @@
+<div class="ef-stack">
+  <p class="ef-tooltip-context">
+    Retention period: 90 days
+    <span class="ef-tooltip">
+      <button class="ef-tooltip__trigger" type="button" popovertarget="tooltip-retention" interestfor="tooltip-retention">
+        <span aria-hidden="true">?</span>
+        <span class="ef-visually-hidden">About the retention period</span>
+      </button>
+      <span class="ef-tooltip__surface" id="tooltip-retention" popover>Events older than the retention period are deleted automatically. Export them first if you need a longer record.</span>
+    </span>
+  </p>
+
+  <div class="ef-field">
+    <div class="ef-cluster">
+      <label class="ef-field__label" for="tooltip-window">Maintenance window</label>
+      <span class="ef-tooltip">
+        <button class="ef-tooltip__trigger" type="button" popovertarget="tooltip-window-hint" interestfor="tooltip-window-hint">
+          <span aria-hidden="true">?</span>
+          <span class="ef-visually-hidden">How maintenance windows are applied</span>
+        </button>
+        <span class="ef-tooltip__surface" id="tooltip-window-hint" popover>Times use the service region's local time zone.</span>
+      </span>
+    </div>
+    <p class="ef-field__description" id="tooltip-window-description">Required. Changes are scheduled, never applied immediately.</p>
+    <input id="tooltip-window" name="window" type="text" aria-describedby="tooltip-window-description" placeholder="Sun 02:00–04:00">
+  </div>
+
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Service</th>
+        <th scope="col">
+          Error budget
+          <span class="ef-tooltip">
+            <button class="ef-tooltip__trigger" type="button" popovertarget="tooltip-budget" interestfor="tooltip-budget">
+              <span aria-hidden="true">?</span>
+              <span class="ef-visually-hidden">About error budget</span>
+            </button>
+            <span class="ef-tooltip__surface" id="tooltip-budget" popover>Share of allowed unavailability left in the current 30-day window.</span>
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Checkout</td><td>42% remaining</td></tr>
+    </tbody>
+  </table>
+</div>

package/patterns/verification-frame.html

@@ -0,0 +1,22 @@
+<section class="ef-verification-frame" aria-labelledby="verification-title">
+  <header class="ef-verification-frame__recognize">
+    <span class="ef-component-kicker">Recognition</span>
+    <h2 id="verification-title">Ready for deliberate verification</h2>
+    <p>The application reports one consequential transition is available. Verify the evidence below before acting.</p>
+  </header>
+  <section class="ef-verification-frame__verify" aria-labelledby="verify-heading">
+    <h3 id="verify-heading">Verify</h3>
+    <dl class="ef-verification-frame__facts">
+      <div><dt>Record</dt><dd><span class="ef-identifier">INV-1042</span></dd></div>
+      <div><dt>Amount</dt><dd><span class="ef-critical-value" data-ef-verify="true">$10,001.00</span></dd></div>
+      <div><dt>Evidence</dt><dd>3 sources reviewed</dd></div>
+      <div><dt>Freshness</dt><dd>Checked 2 minutes ago</dd></div>
+    </dl>
+    <p><strong>Unresolved work:</strong> none reported for this transition.</p>
+  </section>
+  <footer class="ef-verification-frame__act">
+    <p>Actions shown here must come from current application or Ordo capabilities.</p>
+    <button type="button">Review sources</button>
+    <button type="button">Approve transition</button>
+  </footer>
+</section>