@echelon-foundry/design-system 0.2.0-main.15.1

package/patterns/multi-choice.html

@@ -0,0 +1,23 @@
+<fieldset class="ef-choice-group" aria-describedby="multi-choice-guidance">
+  <legend class="ef-choice-group__legend">Select exactly two priorities.</legend>
+  <p class="ef-selection-guidance" id="multi-choice-guidance">Choose exactly 2 options. “None of these” cannot be combined with another option.</p>
+
+  <label class="ef-choice">
+    <input type="checkbox" name="priorities" value="reliability">
+    <span class="ef-choice__content"><strong>Reliability</strong></span>
+  </label>
+  <label class="ef-choice">
+    <input type="checkbox" name="priorities" value="speed">
+    <span class="ef-choice__content"><strong>Delivery speed</strong></span>
+  </label>
+  <label class="ef-choice">
+    <input type="checkbox" name="priorities" value="cost">
+    <span class="ef-choice__content"><strong>Cost efficiency</strong></span>
+  </label>
+  <label class="ef-choice ef-choice--exclusive">
+    <input type="checkbox" name="priorities" value="none">
+    <span class="ef-choice__content"><strong>None of these</strong><span>Exclusive option</span></span>
+  </label>
+
+  <p class="ef-selection-status" data-ef-state="incomplete" aria-live="polite">0 of 2 selected</p>
+</fieldset>

package/patterns/numeric-stepper.html

@@ -0,0 +1,5 @@
+<label class="ef-numeric-stepper">
+  <span class="ef-numeric-stepper__label">Target deployments per week</span>
+  <input type="number" name="deployments-per-week" min="0" max="50" step="1" inputmode="numeric" required>
+  <span class="ef-field__description">Enter a whole number from 0 through 50.</span>
+</label>

package/patterns/obligation-panel.html

@@ -0,0 +1,36 @@
+<aside class="ef-obligation-panel" aria-labelledby="obligation-panel-title">
+  <header class="ef-obligation-panel__header">
+    <div>
+      <h2 id="obligation-panel-title">3 obligations require attention</h2>
+      <p>These must be resolved before finalization.</p>
+    </div>
+    <span class="ef-obligation-panel__count" aria-hidden="true">3</span>
+  </header>
+
+  <ul class="ef-obligation-list">
+    <li class="ef-obligation" data-ef-severity="blocking">
+      <span class="ef-obligation__status">Blocking</span>
+      <div>
+        <strong>Reconcile unknown storage outcome</strong>
+        <p>Verify whether the report snapshot write completed before retrying.</p>
+      </div>
+      <a href="#reconcile-storage">Review</a>
+    </li>
+    <li class="ef-obligation" data-ef-severity="warning">
+      <span class="ef-obligation__status">Required</span>
+      <div>
+        <strong>Rebuild stale aggregate</strong>
+        <p>The current aggregate does not include every accepted contribution.</p>
+      </div>
+      <a href="#aggregate-health">Review</a>
+    </li>
+    <li class="ef-obligation" data-ef-severity="information">
+      <span class="ef-obligation__status">Evidence</span>
+      <div>
+        <strong>Supply publication evidence</strong>
+        <p>A required validation fixture has not yet been recorded.</p>
+      </div>
+      <a href="#publication-evidence">Review</a>
+    </li>
+  </ul>
+</aside>

package/patterns/operation-status.html

@@ -0,0 +1,12 @@
+<section class="ef-operation-status" aria-labelledby="operation-title">
+  <div class="ef-operation-status__symbol" aria-hidden="true">↻</div>
+  <div>
+    <span class="ef-status-lozenge" data-state="unknown">Unknown outcome</span>
+    <h3 id="operation-title">We cannot confirm whether the save completed</h3>
+    <p>Reconcile the operation before retrying. Retrying immediately could create a duplicate effect.</p>
+  </div>
+  <div class="ef-operation-status__actions">
+    <button type="button">Reconcile</button>
+    <button type="button">View details</button>
+  </div>
+</section>

package/patterns/ordinal-scale.html

@@ -0,0 +1,42 @@
+<fieldset class="ef-ordinal-scale ef-ordinal-scale--5">
+  <legend class="ef-ordinal-scale__legend">Our deployment process is predictable.</legend>
+
+  <div class="ef-ordinal-scale__options">
+    <label class="ef-ordinal-option">
+      <input type="radio" name="deployment-predictability" value="0" required>
+      <span class="ef-ordinal-option__marker" aria-hidden="true">1</span>
+      <span class="ef-ordinal-option__label">Strongly disagree</span>
+    </label>
+    <label class="ef-ordinal-option">
+      <input type="radio" name="deployment-predictability" value="1">
+      <span class="ef-ordinal-option__marker" aria-hidden="true">2</span>
+      <span class="ef-ordinal-option__label">Disagree</span>
+    </label>
+    <label class="ef-ordinal-option">
+      <input type="radio" name="deployment-predictability" value="2">
+      <span class="ef-ordinal-option__marker" aria-hidden="true">3</span>
+      <span class="ef-ordinal-option__label">Neither agree nor disagree</span>
+    </label>
+    <label class="ef-ordinal-option">
+      <input type="radio" name="deployment-predictability" value="3">
+      <span class="ef-ordinal-option__marker" aria-hidden="true">4</span>
+      <span class="ef-ordinal-option__label">Agree</span>
+    </label>
+    <label class="ef-ordinal-option">
+      <input type="radio" name="deployment-predictability" value="4">
+      <span class="ef-ordinal-option__marker" aria-hidden="true">5</span>
+      <span class="ef-ordinal-option__label">Strongly agree</span>
+    </label>
+  </div>
+
+  <div class="ef-special-choices" aria-label="Other responses">
+    <label class="ef-special-choice">
+      <input type="radio" name="deployment-predictability" value="unknown">
+      <span>Don't know</span>
+    </label>
+    <label class="ef-special-choice">
+      <input type="radio" name="deployment-predictability" value="na">
+      <span>Not applicable</span>
+    </label>
+  </div>
+</fieldset>

package/patterns/pagination.html

@@ -0,0 +1,12 @@
+<nav class="ef-pagination" aria-label="Pagination">
+  <a class="ef-pagination__control" href="?page=2" rel="prev">Previous</a>
+  <ol class="ef-pagination__pages">
+    <li><a href="?page=1">1</a></li>
+    <li><a href="?page=2">2</a></li>
+    <li><a href="?page=3" aria-current="page">3</a></li>
+    <li><a href="?page=4">4</a></li>
+    <li><a href="?page=5">5</a></li>
+  </ol>
+  <a class="ef-pagination__control" href="?page=4" rel="next">Next</a>
+  <span class="ef-pagination__summary">Page 3 of 12</span>
+</nav>

package/patterns/pairwise-choice.html

@@ -0,0 +1,21 @@
+<fieldset class="ef-pairwise">
+  <legend class="ef-pairwise__legend">Which is more important for this decision?</legend>
+
+  <div class="ef-pairwise__options">
+    <label class="ef-pairwise__option">
+      <input type="radio" name="priority-comparison" value="reliability" required>
+      <span class="ef-pairwise__eyebrow">Option A</span>
+      <strong>Reliability</strong>
+      <span>Prefer predictable operation and recovery.</span>
+    </label>
+
+    <span class="ef-pairwise__versus" aria-hidden="true">or</span>
+
+    <label class="ef-pairwise__option">
+      <input type="radio" name="priority-comparison" value="speed">
+      <span class="ef-pairwise__eyebrow">Option B</span>
+      <strong>Delivery speed</strong>
+      <span>Prefer faster change and deployment.</span>
+    </label>
+  </div>
+</fieldset>

package/patterns/popover.html

@@ -0,0 +1,6 @@
+<button type="button" popovertarget="example-popover">Show options</button>
+<div class="ef-popover" id="example-popover" popover data-ef-motion-weight="light">
+  <strong>Options</strong>
+  <p>This surface is controlled entirely by declarative HTML.</p>
+  <button type="button" popovertarget="example-popover" popovertargetaction="hide">Close</button>
+</div>

package/patterns/preview-surface.html

@@ -0,0 +1,14 @@
+<section class="ef-preview-surface" aria-labelledby="preview-title">
+  <header class="ef-preview-surface__header">
+    <div><span class="ef-status-lozenge">Preview</span><h3 id="preview-title">Customer invoice</h3></div>
+    <div class="ef-preview-surface__controls"><button type="button">Desktop</button><button type="button">Mobile</button></div>
+  </header>
+  <div class="ef-preview-surface__canvas">
+    <article>
+      <p class="ef-record-header__type">Preview content</p>
+      <h2>Architecture assessment</h2>
+      <p>This surface shows the exact material the user is expected to review before a consequential operation.</p>
+    </article>
+  </div>
+  <footer class="ef-preview-surface__footer"><span>Not yet committed</span><button type="button">Continue review</button></footer>
+</section>

package/patterns/provenance-trail.html

@@ -0,0 +1,9 @@
+<section class="ef-provenance-trail" aria-labelledby="provenance-title">
+  <h3 id="provenance-title">How this value was produced</h3>
+  <ol>
+    <li><span class="ef-provenance-trail__kind">Source</span><strong>42 accepted responses</strong><small>Result set hash 9D2…A7</small></li>
+    <li><span class="ef-provenance-trail__kind">Aggregate</span><strong>Governance section</strong><small>Scoring model v3</small></li>
+    <li><span class="ef-provenance-trail__kind">Analysis</span><strong>Weighted mean</strong><small>Analysis expression v1</small></li>
+    <li><span class="ef-provenance-trail__kind">Presentation</span><strong>Metric card</strong><small>Report definition v4</small></li>
+  </ol>
+</section>

package/patterns/question.html

@@ -0,0 +1,13 @@
+<section class="ef-question" aria-labelledby="question-example-title">
+  <header class="ef-question__header">
+    <span class="ef-question__number" aria-hidden="true">7</span>
+    <div>
+      <h2 class="ef-question__prompt" id="question-example-title">How consistently is this practice followed?</h2>
+      <p class="ef-question__help" id="question-example-help">Choose the response that best describes the current state.</p>
+    </div>
+  </header>
+
+  <div class="ef-question__body" aria-describedby="question-example-help">
+    <!-- Insert a selector pattern here. -->
+  </div>
+</section>

package/patterns/range-entry.html

@@ -0,0 +1,18 @@
+<fieldset class="ef-range-entry">
+  <legend class="ef-range-entry__legend">Acceptable response-time range</legend>
+  <p class="ef-field__description">Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.</p>
+
+  <div class="ef-range-entry__inputs">
+    <label>
+      <span>Minimum</span>
+      <input type="number" name="response-time-min" min="0" max="5000" step="50" value="500" inputmode="decimal">
+    </label>
+    <span class="ef-range-entry__separator" aria-hidden="true">to</span>
+    <label>
+      <span>Maximum</span>
+      <input type="number" name="response-time-max" min="0" max="5000" step="50" value="1500" inputmode="decimal">
+    </label>
+  </div>
+
+  <p class="ef-range-entry__status" data-ef-state="valid" aria-live="polite">500 to 1500 milliseconds</p>
+</fieldset>

package/patterns/ranking.html

@@ -0,0 +1,32 @@
+<fieldset class="ef-ranking">
+  <legend class="ef-ranking__legend">Rank the priorities from most to least important.</legend>
+  <p class="ef-field__description">Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.</p>
+
+  <ol class="ef-ranking__list">
+    <li class="ef-ranking__item" data-ef-rank="1">
+      <span class="ef-ranking__position" aria-hidden="true">1</span>
+      <span class="ef-ranking__label">Reliability</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">
+      <span class="ef-ranking__position" aria-hidden="true">2</span>
+      <span class="ef-ranking__label">Delivery speed</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">
+      <span class="ef-ranking__position" aria-hidden="true">3</span>
+      <span class="ef-ranking__label">Cost efficiency</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"></p>
+</fieldset>

package/patterns/readiness-checklist.html

@@ -0,0 +1,12 @@
+<section class="ef-readiness-checklist" aria-labelledby="readiness-title">
+  <header>
+    <span class="ef-status-lozenge" data-state="attention">5 of 7 complete</span>
+    <h3 id="readiness-title">Ready to close September</h3>
+  </header>
+  <ul class="ef-readiness-checklist__items">
+    <li data-state="complete"><span aria-hidden="true">✓</span><span>All invoices posted</span></li>
+    <li data-state="complete"><span aria-hidden="true">✓</span><span>Payments allocated</span></li>
+    <li data-state="incomplete"><span aria-hidden="true">○</span><span>Bank reconciliation</span><button type="button">Review</button></li>
+    <li data-state="blocked"><span aria-hidden="true">!</span><span>CPA adjustment review</span><span>Blocking</span></li>
+  </ul>
+</section>

package/patterns/record-header.html

@@ -0,0 +1,17 @@
+<header class="ef-record-header">
+  <div class="ef-record-header__main">
+    <nav aria-label="Breadcrumb"><a href="#home">Home</a> <span aria-hidden="true">/</span> <a href="#records">Records</a></nav>
+    <div class="ef-record-header__title">
+      <div><span class="ef-record-header__type">Invoice</span><h2>INV-1042</h2></div>
+      <span class="ef-status-lozenge" data-state="attention">Overdue</span>
+    </div>
+    <p>Acme Manufacturing · Due October 4, 2026</p>
+  </div>
+  <div class="ef-record-header__actions">
+    <button type="button">Primary action</button>
+    <details>
+      <summary>More</summary>
+      <div class="ef-record-header__menu"><button type="button">Export</button><button type="button">View history</button></div>
+    </details>
+  </div>
+</header>

package/patterns/rule-builder.html

@@ -0,0 +1,37 @@
+<section class="ef-rule-builder" aria-labelledby="rule-builder-title">
+  <header class="ef-rule-builder__header">
+    <div>
+      <h2 id="rule-builder-title">Applicability rule</h2>
+      <p>Define when this section is shown.</p>
+    </div>
+    <button type="button">Add condition</button>
+  </header>
+
+  <div class="ef-rule-group" data-ef-operator="and">
+    <div class="ef-rule-group__operator" aria-label="All conditions must be true">AND</div>
+
+    <div class="ef-rule-clause">
+      <label>
+        <span>Field</span>
+        <select>
+          <option>Answer: Q1</option>
+        </select>
+      </label>
+      <label>
+        <span>Operator</span>
+        <select>
+          <option>is equal to</option>
+        </select>
+      </label>
+      <label>
+        <span>Value</span>
+        <select>
+          <option>Yes</option>
+        </select>
+      </label>
+      <button type="button" aria-label="Remove condition">Remove</button>
+    </div>
+  </div>
+
+  <p class="ef-rule-builder__summary"><strong>Meaning:</strong> Show this section when Answer(Q1) = Yes.</p>
+</section>

package/patterns/search.html

@@ -0,0 +1,8 @@
+<form class="ef-search" role="search">
+  <label class="ef-search__label" for="search-query">Search</label>
+  <div class="ef-search__control">
+    <input id="search-query" name="q" type="search" placeholder="Search records" autocomplete="off">
+    <button type="button" class="ef-search__clear">Clear</button>
+  </div>
+  <p class="ef-search__status" role="status">24 results</p>
+</form>

package/patterns/segmented-control.html

@@ -0,0 +1,13 @@
+<fieldset class="ef-field">
+  <legend class="ef-field__label">Density</legend>
+  <div class="ef-segmented">
+    <label class="ef-segment">
+      <input type="radio" name="density" value="comfortable" checked>
+      <span>Comfortable</span>
+    </label>
+    <label class="ef-segment">
+      <input type="radio" name="density" value="compact">
+      <span>Compact</span>
+    </label>
+  </div>
+</fieldset>

package/patterns/select.html

@@ -0,0 +1,12 @@
+<label class="ef-select-field">
+  <span class="ef-field__label">Deployment region</span>
+  <span class="ef-select" data-ef-motion-weight="standard">
+    <select class="ef-select__input" name="region" aria-describedby="region-description">
+      <option value="us-east">US East</option>
+      <option value="us-west">US West</option>
+      <option value="eu-west">Europe West</option>
+    </select>
+    <span class="ef-select__indicator" aria-hidden="true"></span>
+  </span>
+  <span class="ef-field__description" id="region-description">Choose where this workload will run.</span>
+</label>

package/patterns/semantic-differential.html

@@ -0,0 +1,23 @@
+<fieldset class="ef-semantic-differential">
+  <legend class="ef-semantic-differential__legend">How would you characterize the current process?</legend>
+
+  <div class="ef-semantic-differential__endpoints" aria-hidden="true">
+    <span>Highly manual</span>
+    <span>Highly automated</span>
+  </div>
+
+  <div class="ef-semantic-differential__scale">
+    <label><input type="radio" name="automation-level" value="1" required><span aria-hidden="true">1</span><span class="ef-sr-only">Highly manual, position 1 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="2"><span aria-hidden="true">2</span><span class="ef-sr-only">Position 2 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="3"><span aria-hidden="true">3</span><span class="ef-sr-only">Position 3 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="4"><span aria-hidden="true">4</span><span class="ef-sr-only">Position 4 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="5"><span aria-hidden="true">5</span><span class="ef-sr-only">Position 5 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="6"><span aria-hidden="true">6</span><span class="ef-sr-only">Position 6 of 7</span></label>
+    <label><input type="radio" name="automation-level" value="7"><span aria-hidden="true">7</span><span class="ef-sr-only">Highly automated, position 7 of 7</span></label>
+  </div>
+
+  <div class="ef-semantic-differential__endpoints ef-semantic-differential__endpoints--mobile">
+    <span>1 = Highly manual</span>
+    <span>7 = Highly automated</span>
+  </div>
+</fieldset>

package/patterns/skeleton.html

@@ -0,0 +1,7 @@
+<section class="ef-skeleton" aria-busy="true" aria-label="Loading content">
+  <span class="ef-visually-hidden">Loading content</span>
+  <div class="ef-skeleton__line ef-skeleton__line--title"></div>
+  <div class="ef-skeleton__line"></div>
+  <div class="ef-skeleton__line"></div>
+  <div class="ef-skeleton__line ef-skeleton__line--short"></div>
+</section>

package/patterns/slider.html

@@ -0,0 +1,11 @@
+<label class="ef-slider">
+  <span class="ef-slider__header">
+    <span class="ef-slider__label">Volume</span>
+  </span>
+  <input class="ef-slider__input" type="range" name="volume" min="0" max="100" step="5" value="25">
+  <span class="ef-slider__bounds" aria-hidden="true">
+    <span>0</span>
+    <span>100</span>
+  </span>
+  <span class="ef-field__description">Adjust the output level.</span>
+</label>

package/patterns/special-choice.html

@@ -0,0 +1,15 @@
+<fieldset class="ef-special-choice-group">
+  <legend class="ef-field__label">Response status</legend>
+  <p class="ef-field__description">Use these only when they are semantically different from the response scale.</p>
+
+  <div class="ef-special-choices">
+    <label class="ef-special-choice">
+      <input type="radio" name="response-status" value="unknown">
+      <span>Don't know</span>
+    </label>
+    <label class="ef-special-choice">
+      <input type="radio" name="response-status" value="na">
+      <span>Not applicable</span>
+    </label>
+  </div>
+</fieldset>

package/patterns/status-lozenge.html

@@ -0,0 +1,6 @@
+<div class="ef-status-lozenge-set" aria-label="Status examples">
+  <span class="ef-status-lozenge" data-state="ok">Confirmed</span>
+  <span class="ef-status-lozenge" data-state="attention">Needs attention</span>
+  <span class="ef-status-lozenge" data-state="unknown">Unknown</span>
+  <span class="ef-status-lozenge" data-state="blocked">Blocked</span>
+</div>

package/patterns/survey-progress.html

@@ -0,0 +1,8 @@
+<div class="ef-survey-progress">
+  <div class="ef-survey-progress__header">
+    <span class="ef-survey-progress__label" id="survey-progress-label">Survey progress</span>
+    <span class="ef-survey-progress__value">Question 3 of 12</span>
+  </div>
+  <progress class="ef-survey-progress__bar" value="3" max="12" aria-labelledby="survey-progress-label">25%</progress>
+  <p class="ef-survey-progress__context">Section 1 of 4 · Governance</p>
+</div>

package/patterns/switch.html

@@ -0,0 +1,14 @@
+<label class="ef-switch" data-ef-motion-weight="standard">
+  <input
+    class="ef-switch__input"
+    type="checkbox"
+    role="switch"
+    name="notifications"
+    value="enabled"
+    aria-describedby="notifications-description">
+  <span class="ef-switch__track" aria-hidden="true"></span>
+  <span class="ef-switch__text">
+    <span class="ef-switch__label">Notifications</span>
+    <span class="ef-switch__description" id="notifications-description">Receive operational updates.</span>
+  </span>
+</label>

package/patterns/symbol-rating.html

@@ -0,0 +1,31 @@
+<fieldset class="ef-symbol-rating">
+  <legend class="ef-symbol-rating__legend">How satisfied are you with the release process?</legend>
+
+  <div class="ef-symbol-rating__options">
+    <label class="ef-symbol-rating__option">
+      <input type="radio" name="release-satisfaction" value="1" required>
+      <span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
+      <span class="ef-sr-only">1 of 5, very dissatisfied</span>
+    </label>
+    <label class="ef-symbol-rating__option">
+      <input type="radio" name="release-satisfaction" value="2">
+      <span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
+      <span class="ef-sr-only">2 of 5, dissatisfied</span>
+    </label>
+    <label class="ef-symbol-rating__option">
+      <input type="radio" name="release-satisfaction" value="3">
+      <span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
+      <span class="ef-sr-only">3 of 5, neutral</span>
+    </label>
+    <label class="ef-symbol-rating__option">
+      <input type="radio" name="release-satisfaction" value="4">
+      <span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
+      <span class="ef-sr-only">4 of 5, satisfied</span>
+    </label>
+    <label class="ef-symbol-rating__option">
+      <input type="radio" name="release-satisfaction" value="5">
+      <span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
+      <span class="ef-sr-only">5 of 5, very satisfied</span>
+    </label>
+  </div>
+</fieldset>

package/patterns/tabs.html

@@ -0,0 +1,11 @@
+<section class="ef-tabs" data-ef-motion-weight="light">
+  <div class="ef-tabs__list" role="tablist" aria-label="Record sections">
+    <button type="button" role="tab" id="tab-overview" aria-selected="true" aria-controls="panel-overview">Overview</button>
+    <button type="button" role="tab" id="tab-history" aria-selected="false" aria-controls="panel-history">History</button>
+    <button type="button" role="tab" id="tab-evidence" aria-selected="false" aria-controls="panel-evidence">Evidence</button>
+  </div>
+  <section class="ef-tabs__panel" id="panel-overview" role="tabpanel" aria-labelledby="tab-overview">
+    <h3>Overview</h3>
+    <p>Current record summary and legal actions supplied by the application.</p>
+  </section>
+</section>

package/patterns/timeline.html

@@ -0,0 +1,19 @@
+<ol class="ef-timeline" aria-label="Activity history">
+  <li class="ef-timeline__item">
+    <div class="ef-timeline__marker" aria-hidden="true"></div>
+    <div class="ef-timeline__content">
+      <div class="ef-timeline__meta"><time datetime="2026-09-22T14:10:00Z">Sep 22 · 14:10</time><span class="ef-status-lozenge" data-state="ok">Confirmed</span></div>
+      <h3>Invoice issued</h3>
+      <p>Invoice INV-1042 was issued after review.</p>
+      <small>Source: billing workflow</small>
+    </div>
+  </li>
+  <li class="ef-timeline__item">
+    <div class="ef-timeline__marker" aria-hidden="true"></div>
+    <div class="ef-timeline__content">
+      <div class="ef-timeline__meta"><time datetime="2026-09-21T19:32:00Z">Sep 21 · 19:32</time><span class="ef-status-lozenge">Draft</span></div>
+      <h3>Draft updated</h3>
+      <p>Payment terms and line descriptions changed.</p>
+    </div>
+  </li>
+</ol>

package/patterns/toast.html

@@ -0,0 +1,10 @@
+<button type="button" popovertarget="save-notification" popovertargetaction="show">Show notification</button>
+<aside class="ef-toast" id="save-notification" popover="manual" role="status" data-ef-motion-weight="standard">
+  <div class="ef-toast__header">
+    <div>
+      <h3 class="ef-toast__title">Changes saved</h3>
+      <p>The current draft is stored.</p>
+    </div>
+    <button type="button" popovertarget="save-notification" popovertargetaction="hide" aria-label="Dismiss notification">Close</button>
+  </div>
+</aside>

package/patterns/understanding.html

@@ -0,0 +1,32 @@
+<section class="ef-understanding" aria-labelledby="understanding-title">
+  <header class="ef-understanding__header">
+    <div>
+      <span class="ef-component-kicker">Understanding</span>
+      <h2 id="understanding-title">I found 4 things</h2>
+      <p>Review what the application understood before any consequential transition.</p>
+    </div>
+    <span class="ef-status-lozenge" data-state="attention">1 question</span>
+  </header>
+  <ol class="ef-understanding__items">
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Medication change</strong><p>Medication increased to 40 mg.</p></div>
+      <button type="button">Source</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Symptom</strong><p>Ankle swelling returned.</p></div>
+      <button type="button">Source</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="unknown">
+      <span class="ef-understanding__state">Unknown</span>
+      <div><strong>Medication frequency</strong><p>The dose frequency was not supplied.</p></div>
+      <button type="button">Answer</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Visit</strong><p>Dr. Smith visit occurred yesterday.</p></div>
+      <button type="button">Source</button>
+    </li>
+  </ol>
+</section>

package/patterns/understanding.manifest.md

@@ -0,0 +1,26 @@
+# Feature Manifest — understanding review pattern
+
+## Purpose
+
+Present an application's proposed understanding of user input before a consequential operation, including accepted, unknown, conflicting, or unresolved items.
+
+## Ownership
+
+- Item meaning/state: application/Ordo.
+- Presentation and responsive layout: Forma.
+- Actions: application/Limen.
+- Capabilities / authority: none. Forma never decides that an item is accepted, blocking, or resolved.
+
+## Interfaces
+
+- Inbound: item label, summary, explicit textual state, optional source/review actions.
+- Outbound: native button/link events.
+
+## Modification boundaries
+
+Every state must remain textual and non-color dependent. Source and correction paths must remain reachable on mobile.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- Introduced: 2026-09-23

package/patterns/validation-message.html

@@ -0,0 +1,4 @@
+<p class="ef-validation-message" id="question-example-error">
+  <span class="ef-validation-message__mark" aria-hidden="true">!</span>
+  Choose one response before continuing.
+</p>