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

package/patterns/collection-toolbar.html

@@ -0,0 +1,22 @@
+<section class="ef-collection-toolbar" aria-label="Collection controls">
+  <form class="ef-search ef-collection-toolbar__search" role="search">
+    <label class="ef-search__label" for="collection-search">Search records</label>
+    <input id="collection-search" type="search" placeholder="Search">
+  </form>
+  <div class="ef-collection-toolbar__controls">
+    <details class="ef-collection-toolbar__filters">
+      <summary>Filters <span class="ef-status-lozenge">2 active</span></summary>
+      <div class="ef-collection-toolbar__filter-panel">
+        <label>Status <select><option>Any status</option><option>Needs attention</option><option>Complete</option></select></label>
+        <label>Owner <select><option>Anyone</option><option>Me</option></select></label>
+      </div>
+    </details>
+    <label class="ef-collection-toolbar__sort">Sort
+      <select><option>Most recent</option><option>Oldest</option><option>Name</option></select>
+    </label>
+    <label class="ef-collection-toolbar__view">Saved view
+      <select><option>All records</option><option>Needs my attention</option></select>
+    </label>
+  </div>
+  <p class="ef-collection-toolbar__count" role="status">24 records</p>
+</section>

package/patterns/combobox.html

@@ -0,0 +1,13 @@
+<div class="ef-combobox">
+  <label for="combo-project">Project</label>
+  <div class="ef-combobox__control">
+    <input id="combo-project" name="project" list="project-options" autocomplete="off" placeholder="Search projects">
+    <span class="ef-combobox__indicator" aria-hidden="true">⌄</span>
+  </div>
+  <datalist id="project-options">
+    <option value="Architecture assessment"></option>
+    <option value="Signal research"></option>
+    <option value="Platform modernization"></option>
+  </datalist>
+  <p class="ef-combobox__help">Type to filter available projects.</p>
+</div>

package/patterns/command-palette.html

@@ -0,0 +1,14 @@
+<dialog class="ef-command-palette" open aria-labelledby="command-title" data-ef-motion-weight="heavy">
+  <header class="ef-command-palette__header">
+    <h3 id="command-title">Commands</h3>
+    <kbd>Esc</kbd>
+  </header>
+  <label class="ef-visually-hidden" for="command-search">Find a command</label>
+  <input id="command-search" type="search" placeholder="Type a command or record">
+  <div class="ef-command-palette__group">
+    <h4>Suggested</h4>
+    <button type="button"><span>Create invoice</span><kbd>⌘ I</kbd></button>
+    <button type="button"><span>Show items needing attention</span></button>
+    <button type="button" disabled><span>Publish report</span><small>Unavailable until validation passes</small></button>
+  </div>
+</dialog>

package/patterns/composer.html

@@ -0,0 +1,19 @@
+<section class="ef-composer" aria-labelledby="composer-title">
+  <div class="ef-composer__context">
+    <span class="ef-component-kicker">Capture</span>
+    <h2 id="composer-title">What do you want this record to know?</h2>
+    <p id="composer-help">Type, dictate, paste, or attach information in your own words. The application decides how it is interpreted and whether follow-up is required.</p>
+  </div>
+  <label class="ef-composer__field">
+    <span class="ef-sr-only">Tell the application what happened</span>
+    <textarea rows="4" aria-describedby="composer-help" placeholder="Tell me what happened…"></textarea>
+  </label>
+  <div class="ef-composer__actions">
+    <div class="ef-composer__input-actions" aria-label="Additional input methods">
+      <button type="button">Attach</button>
+      <button type="button">Dictate</button>
+    </div>
+    <button type="submit" class="ef-composer__submit">Continue</button>
+  </div>
+  <p class="ef-composer__status" role="status">Nothing is added to the record until the application confirms the transition.</p>
+</section>

package/patterns/composer.manifest.md

@@ -0,0 +1,27 @@
+# Feature Manifest — composer pattern
+
+## Purpose
+
+Provide a calm, application-neutral natural-language composition surface for typing, dictation, paste, and attachment affordances without embedding AI, parsing, or domain transition behavior in Forma.
+
+## Ownership
+
+- State: application/Limen; native textarea validity remains browser-owned.
+- Transitions / commands / messages: application/Limen.
+- Invariants and guards: semantic field labeling, visible context, reachable input methods, status region, responsive actions.
+- Capabilities / authority: none. The composer never decides what may be committed.
+- Effects: application-owned.
+
+## Interfaces
+
+- Inbound: context title/help, text value, available input actions, submit label, status.
+- Outbound: native textarea/input/button events.
+
+## Modification boundaries
+
+Keep interpretation, agent behavior, recording, upload, persistence, permissions, and legal transitions outside Forma.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- Introduced for cross-application agent/capture workflows: 2026-09-23

package/patterns/conflict-review.html

@@ -0,0 +1,17 @@
+<article class="ef-conflict-review" aria-labelledby="conflict-title">
+  <header class="ef-conflict-review__header">
+    <span class="ef-status-lozenge" data-state="attention">Conflict</span>
+    <h3 id="conflict-title">This record changed while you were reviewing it</h3>
+    <p>No changes were applied. Review the current version before choosing a legal recovery action.</p>
+  </header>
+  <div class="ef-diff-viewer">
+    <div class="ef-diff-viewer__grid">
+      <section class="ef-diff-viewer__side"><h4>You reviewed</h4><p>Outstanding balance: $5,000</p></section>
+      <section class="ef-diff-viewer__side"><h4>Current</h4><p>Outstanding balance: $2,500</p></section>
+    </div>
+  </div>
+  <footer class="ef-conflict-review__actions">
+    <button type="button">Reload current</button>
+    <button type="button">Cancel</button>
+  </footer>
+</article>

package/patterns/conversation.html

@@ -0,0 +1,23 @@
+<section class="ef-conversation" aria-labelledby="conversation-title">
+  <header class="ef-conversation__header">
+    <span class="ef-component-kicker">Conversation</span>
+    <h2 id="conversation-title">Record assistant</h2>
+  </header>
+  <ol class="ef-conversation__turns">
+    <li class="ef-turn" data-ef-speaker="user">
+      <p class="ef-turn__speaker">You</p>
+      <div class="ef-turn__content">
+        <p>Dad saw Dr. Smith yesterday. He increased the medication to 40 mg because the ankle swelling returned.</p>
+      </div>
+    </li>
+    <li class="ef-turn" data-ef-speaker="assistant">
+      <p class="ef-turn__speaker">Record assistant</p>
+      <div class="ef-turn__content">
+        <p>I found a medication change, a returning symptom, and a visit. One detail may need clarification before the medication change can be recorded precisely.</p>
+      </div>
+      <div class="ef-turn__actions">
+        <button type="button">Review understanding</button>
+      </div>
+    </li>
+  </ol>
+</section>

package/patterns/conversation.manifest.md

@@ -0,0 +1,21 @@
+# Feature Manifest — conversation pattern
+
+## Purpose
+
+Render inspectable user/application turns without assuming consumer-chat bubble semantics or granting generated text special authority.
+
+## Ownership
+
+- State and turn contents: application.
+- Behavior: application/Limen.
+- Semantics: ordered conversation history, explicit speaker labels, optional actions.
+- Capabilities / authority: none.
+
+## Modification boundaries
+
+Do not encode model confidence, truth, clinical authority, or transition legality from speaker position, color, or visual treatment.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- Introduced: 2026-09-23

package/patterns/dashboard-grid.html

@@ -0,0 +1,5 @@
+<section class="ef-dashboard-grid" aria-label="Operational dashboard">
+  <article class="ef-metric-card"><div class="ef-metric-card__label">Needs attention</div><div class="ef-metric-card__value">7</div><p>Items requiring action.</p></article>
+  <article class="ef-metric-card"><div class="ef-metric-card__label">Open work</div><div class="ef-metric-card__value">18</div><p>Currently active records.</p></article>
+  <article class="ef-metric-card"><div class="ef-metric-card__label">Completed</div><div class="ef-metric-card__value">42</div><p>Completed this month.</p></article>
+</section>

package/patterns/data-grid.html

@@ -0,0 +1,30 @@
+<div class="ef-data-grid" role="region" tabindex="0" aria-label="Invoice records">
+  <table>
+    <caption class="ef-visually-hidden">Invoice records</caption>
+    <thead>
+      <tr>
+        <th scope="col" aria-sort="ascending"><button type="button">Invoice</button></th>
+        <th scope="col"><button type="button">Customer</button></th>
+        <th scope="col"><button type="button">Due</button></th>
+        <th scope="col"><button type="button">Status</button></th>
+        <th scope="col"><span class="ef-visually-hidden">Actions</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td data-label="Invoice">INV-1042</td>
+        <td data-label="Customer">Acme Manufacturing</td>
+        <td data-label="Due">Oct 4, 2026</td>
+        <td data-label="Status"><span class="ef-status-lozenge" data-state="attention">Overdue</span></td>
+        <td data-label="Actions"><button type="button">Open</button></td>
+      </tr>
+      <tr>
+        <td data-label="Invoice">INV-1043</td>
+        <td data-label="Customer">Northstar Labs</td>
+        <td data-label="Due">Oct 18, 2026</td>
+        <td data-label="Status"><span class="ef-status-lozenge" data-state="ok">Current</span></td>
+        <td data-label="Actions"><button type="button">Open</button></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/patterns/date-range.html

@@ -0,0 +1,13 @@
+<fieldset class="ef-date-range">
+  <legend>Date range</legend>
+  <div class="ef-date-range__fields">
+    <label>From <input type="date" name="from"></label>
+    <span class="ef-date-range__separator" aria-hidden="true">→</span>
+    <label>To <input type="date" name="to"></label>
+  </div>
+  <div class="ef-date-range__presets" aria-label="Common ranges">
+    <button type="button">This month</button>
+    <button type="button">Last 30 days</button>
+    <button type="button">Year to date</button>
+  </div>
+</fieldset>

package/patterns/dialog.html

@@ -0,0 +1,15 @@
+<button type="button" commandfor="example-dialog" command="show-modal">Open modal</button>
+<dialog
+  class="ef-dialog"
+  id="example-dialog"
+  data-ef-motion-weight="heavy"
+  aria-labelledby="example-dialog-title"
+  aria-describedby="example-dialog-description">
+  <div class="ef-dialog__body">
+    <h2 id="example-dialog-title">Confirm action</h2>
+    <p id="example-dialog-description">The browser owns modal focus, inertness, Escape behavior, and focus restoration.</p>
+  </div>
+  <div class="ef-dialog__actions">
+    <button type="button" commandfor="example-dialog" command="close">Cancel</button>
+  </div>
+</dialog>

package/patterns/diff-viewer.html

@@ -0,0 +1,22 @@
+<section class="ef-diff-viewer" aria-labelledby="diff-title">
+  <header class="ef-diff-viewer__header">
+    <h3 id="diff-title">Version comparison</h3>
+    <p>2 fields changed</p>
+  </header>
+  <div class="ef-diff-viewer__grid">
+    <section class="ef-diff-viewer__side" aria-label="Previous version">
+      <h4>Before</h4>
+      <dl>
+        <div class="ef-diff-row" data-change="changed"><dt>Status</dt><dd>Draft</dd></div>
+        <div class="ef-diff-row"><dt>Owner</dt><dd>Operations</dd></div>
+      </dl>
+    </section>
+    <section class="ef-diff-viewer__side" aria-label="Current version">
+      <h4>After</h4>
+      <dl>
+        <div class="ef-diff-row" data-change="changed"><dt>Status</dt><dd>Ready for review</dd></div>
+        <div class="ef-diff-row"><dt>Owner</dt><dd>Operations</dd></div>
+      </dl>
+    </section>
+  </div>
+</section>

package/patterns/disclosure.html

@@ -0,0 +1,6 @@
+<details class="ef-disclosure" data-ef-motion-weight="light">
+  <summary>Advanced options</summary>
+  <div class="ef-disclosure__content">
+    <p>Additional controls or explanatory content go here.</p>
+  </div>
+</details>

package/patterns/empty-state.html

@@ -0,0 +1,6 @@
+<section class="ef-empty-state" aria-labelledby="empty-title">
+  <div class="ef-empty-state__symbol" aria-hidden="true">□</div>
+  <h3 id="empty-title">No results match these filters</h3>
+  <p>Clear one or more filters or broaden the search to see records.</p>
+  <button type="button">Clear filters</button>
+</section>

package/patterns/file-upload.html

@@ -0,0 +1,19 @@
+<section class="ef-file-upload" aria-labelledby="upload-title">
+  <div class="ef-file-upload__drop">
+    <h3 id="upload-title">Add evidence files</h3>
+    <p>Choose files. Drag and drop may be provided as an optional enhancement.</p>
+    <label class="ef-button">Choose files <input type="file" multiple></label>
+  </div>
+  <ul class="ef-file-upload__queue">
+    <li>
+      <div><strong>survey-results.csv</strong><small>1.8 MB</small></div>
+      <progress value="100" max="100" aria-label="survey-results.csv upload progress">100%</progress>
+      <span class="ef-status-lozenge" data-state="ok">Uploaded</span>
+    </li>
+    <li>
+      <div><strong>evidence.pdf</strong><small>4.2 MB</small></div>
+      <progress value="64" max="100" aria-label="evidence.pdf upload progress">64%</progress>
+      <button type="button">Cancel</button>
+    </li>
+  </ul>
+</section>

package/patterns/flyout.html

@@ -0,0 +1,72 @@
+<button type="button" commandfor="left-flyout" command="show-modal">Open left flyout</button>
+<dialog
+  class="ef-flyout"
+  id="left-flyout"
+  data-ef-side="left"
+  data-ef-motion-weight="heavy"
+  aria-labelledby="left-flyout-title"
+  aria-describedby="left-flyout-description">
+  <div class="ef-flyout__surface">
+    <header class="ef-flyout__header">
+      <div>
+        <p class="ef-component-kicker">Filters</p>
+        <h2 id="left-flyout-title">Refine results</h2>
+      </div>
+      <button
+        class="ef-flyout__close"
+        type="button"
+        commandfor="left-flyout"
+        command="close"
+        aria-label="Close left flyout">Close</button>
+    </header>
+    <div class="ef-flyout__body">
+      <p id="left-flyout-description">A left-edge modal surface for contextual controls or navigation.</p>
+      <label class="ef-checkbox" data-ef-motion-weight="standard">
+        <input class="ef-checkbox__input" type="checkbox" name="open-only" value="yes">
+        <span class="ef-checkbox__box" aria-hidden="true"></span>
+        <span class="ef-checkbox__text">
+          <span class="ef-checkbox__label">Open items only</span>
+        </span>
+      </label>
+    </div>
+    <footer class="ef-flyout__actions">
+      <button type="button" commandfor="left-flyout" command="close">Apply</button>
+    </footer>
+  </div>
+</dialog>
+
+<button type="button" commandfor="right-flyout" command="show-modal">Open right flyout</button>
+<dialog
+  class="ef-flyout"
+  id="right-flyout"
+  data-ef-side="right"
+  data-ef-motion-weight="heavy"
+  aria-labelledby="right-flyout-title"
+  aria-describedby="right-flyout-description">
+  <div class="ef-flyout__surface">
+    <header class="ef-flyout__header">
+      <div>
+        <p class="ef-component-kicker">Details</p>
+        <h2 id="right-flyout-title">Record context</h2>
+      </div>
+      <button
+        class="ef-flyout__close"
+        type="button"
+        commandfor="right-flyout"
+        command="close"
+        aria-label="Close right flyout">Close</button>
+    </header>
+    <div class="ef-flyout__body">
+      <p id="right-flyout-description">A right-edge modal surface for detail, inspection, or contextual work.</p>
+      <dl>
+        <dt>Status</dt>
+        <dd>Needs review</dd>
+        <dt>Owner</dt>
+        <dd>Application supplied</dd>
+      </dl>
+    </div>
+    <footer class="ef-flyout__actions">
+      <button type="button" commandfor="right-flyout" command="close">Done</button>
+    </footer>
+  </div>
+</dialog>

package/patterns/flyout.manifest.md

@@ -0,0 +1,43 @@
+# Feature Manifest — flyout pattern
+
+## Purpose
+
+Provide left- and right-edge modal surfaces for contextual navigation, filters, inspection, and bounded tasks while preserving native dialog semantics and Forma's zero-runtime boundary.
+
+## Ownership
+
+- State: native `dialog.open` / top-layer state
+- Transitions / commands / messages: browser-native dialog commands and Escape behavior
+- Invariants and guards: native modal focus, document inertness, accessible labeling, side-specific presentation
+- Capabilities / authority: none
+- Effects: native focus placement/restoration and dialog close events
+
+## Interfaces
+
+- Inbound: semantic dialog content, `data-ef-side="left|right"`, optional `data-ef-motion-weight="light|standard|heavy"`
+- Outbound: native dialog open/close state and events
+
+## Motion
+
+- Entry travels from the occupied edge using Forma's shared physics-derived inertia model.
+- Exit is shorter and uses the damped response rather than spring overshoot.
+- The backdrop coordinates with the temporary surface without becoming semantic authority.
+- Reduced motion removes the large edge translation and scale while preserving an immediate, clear state change.
+- Direct swipe/drag manipulation is not implemented by Forma; if required, Limen/application behavior owns it.
+
+## Tests and verification
+
+- `tests/browser/overlay-motion.spec.mjs`
+- `tests/browser/accessibility.spec.mjs`
+- Repository-wide mobile, zero-runtime, package, browser, and site checks
+
+## Modification boundaries
+
+- Keep modal flyouts on native `dialog` unless a documented application requirement cannot be met.
+- Nonmodal persistent drawers, resize/drag behavior, and swipe-to-close belong to Limen/application code.
+- Application/Ordo owns domain legality and the actions presented in the flyout.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- Last checked against implementation: 2026-09-23

package/patterns/hierarchical-choice.html

@@ -0,0 +1,25 @@
+<fieldset class="ef-hierarchy">
+  <legend class="ef-hierarchy__legend">Choose the affected service.</legend>
+  <p class="ef-field__description">Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.</p>
+
+  <ul class="ef-hierarchy__tree">
+    <li>
+      <details open>
+        <summary>Platform</summary>
+        <ul>
+          <li><label><input type="radio" name="service" value="identity"> Identity</label></li>
+          <li><label><input type="radio" name="service" value="billing"> Billing</label></li>
+        </ul>
+      </details>
+    </li>
+    <li>
+      <details>
+        <summary>Data</summary>
+        <ul>
+          <li><label><input type="radio" name="service" value="warehouse"> Warehouse</label></li>
+          <li><label><input type="radio" name="service" value="analytics"> Analytics</label></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</fieldset>

package/patterns/hierarchical-multi-choice.html

@@ -0,0 +1,27 @@
+<fieldset class="ef-hierarchy">
+  <legend class="ef-hierarchy__legend">Choose affected services.</legend>
+  <p class="ef-field__description">Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.</p>
+
+  <ul class="ef-hierarchy__tree">
+    <li>
+      <details open>
+        <summary>Platform</summary>
+        <ul>
+          <li><label><input type="checkbox" name="services" value="identity"> Identity</label></li>
+          <li><label><input type="checkbox" name="services" value="billing"> Billing</label></li>
+        </ul>
+      </details>
+    </li>
+    <li>
+      <details>
+        <summary>Data</summary>
+        <ul>
+          <li><label><input type="checkbox" name="services" value="warehouse"> Warehouse</label></li>
+          <li><label><input type="checkbox" name="services" value="analytics"> Analytics</label></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+
+  <p class="ef-selection-status" data-ef-state="valid" aria-live="polite">2 services selected</p>
+</fieldset>

package/patterns/image-choice.html

@@ -0,0 +1,25 @@
+<fieldset class="ef-choice-group">
+  <legend class="ef-choice-group__legend">Which layout is easiest to scan?</legend>
+
+  <label class="ef-choice ef-choice--media">
+    <input type="radio" name="layout-choice" value="compact" required>
+    <span class="ef-choice__media">
+      <img src="/path/to/compact-layout.png" alt="">
+    </span>
+    <span class="ef-choice__content">
+      <strong>Compact layout</strong>
+      <span>Dense rows with minimal whitespace.</span>
+    </span>
+  </label>
+
+  <label class="ef-choice ef-choice--media">
+    <input type="radio" name="layout-choice" value="spacious">
+    <span class="ef-choice__media">
+      <img src="/path/to/spacious-layout.png" alt="">
+    </span>
+    <span class="ef-choice__content">
+      <strong>Spacious layout</strong>
+      <span>More separation and larger grouping regions.</span>
+    </span>
+  </label>
+</fieldset>

package/patterns/manifest.md

@@ -0,0 +1,46 @@
+# Feature Manifest — HTML patterns
+
+## Purpose
+
+Own the canonical semantic HTML structures consumed by Echelon applications. Patterns contain no JavaScript and no hidden behavior.
+
+## Ownership
+
+- State, including presentation state: native HTML states such as checked, open, disabled, required, invalid, and popover-open
+- Transitions / commands / messages: browser-native behavior only; application behavior belongs to Limen/application code
+- Invariants and guards: semantic markup, labels, form association, accessible names, documented class structure
+- Capabilities / authority: none — patterns cannot decide domain legality
+- Important effects and effect contracts: native DOM events and native browser state
+
+## Interfaces
+
+- Inbound: semantic HTML attributes, application-rendered state, design tokens
+- Outbound: native DOM events, form values, focus behavior, CSS-selectable native state
+
+## Tests and verification
+
+- Local behavior tests: `tests/browser/**`
+- Boundary/contract tests: `tests/zero-runtime.test.mjs`
+- Integration/live verification: Chromium, Firefox, and WebKit
+
+## Dependencies
+
+- Allowed direct dependencies: semantic HTML, generated tokens CSS, Echelon CSS
+- Required composition context: consuming application supplies behavior beyond native HTML
+
+## Modification boundaries
+
+- Normal: `patterns/**`, `src/styles/components.css`, associated tests
+- Escalation required: adding script, custom-element registration, hidden runtime behavior, or changing required markup structure
+
+## Local agent instructions
+
+- 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.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- Last checked against implementation: 2026-09-23
+- Known gaps: advanced behavioral patterns require separate Limen contracts

package/patterns/master-detail.html

@@ -0,0 +1,16 @@
+<section class="ef-master-detail" aria-label="Record workspace">
+  <nav class="ef-master-detail__master" aria-label="Records">
+    <a href="#record-1" aria-current="page"><strong>INV-1042</strong><span>Acme Manufacturing</span></a>
+    <a href="#record-2"><strong>INV-1043</strong><span>Northstar Labs</span></a>
+    <a href="#record-3"><strong>INV-1044</strong><span>Atlas Works</span></a>
+  </nav>
+  <article class="ef-master-detail__detail" id="record-1">
+    <span class="ef-status-lozenge" data-state="attention">Overdue</span>
+    <h3>INV-1042</h3>
+    <dl class="ef-key-value-list">
+      <div><dt>Customer</dt><dd>Acme Manufacturing</dd></div>
+      <div><dt>Outstanding</dt><dd>$5,000</dd></div>
+      <div><dt>Due</dt><dd>October 4, 2026</dd></div>
+    </dl>
+  </article>
+</section>

package/patterns/matrix-single.html

@@ -0,0 +1,26 @@
+<fieldset class="ef-matrix">
+  <legend class="ef-matrix__legend">Rate each practice.</legend>
+  <p class="ef-field__description">Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.</p>
+
+  <div class="ef-matrix__rows">
+    <fieldset class="ef-matrix__row">
+      <legend>Automated testing</legend>
+      <div class="ef-matrix__choices">
+        <label><input type="radio" name="testing-maturity" value="1" required><span>Initial</span></label>
+        <label><input type="radio" name="testing-maturity" value="2"><span>Developing</span></label>
+        <label><input type="radio" name="testing-maturity" value="3"><span>Established</span></label>
+        <label><input type="radio" name="testing-maturity" value="4"><span>Optimized</span></label>
+      </div>
+    </fieldset>
+
+    <fieldset class="ef-matrix__row">
+      <legend>Deployment automation</legend>
+      <div class="ef-matrix__choices">
+        <label><input type="radio" name="deployment-maturity" value="1" required><span>Initial</span></label>
+        <label><input type="radio" name="deployment-maturity" value="2"><span>Developing</span></label>
+        <label><input type="radio" name="deployment-maturity" value="3"><span>Established</span></label>
+        <label><input type="radio" name="deployment-maturity" value="4"><span>Optimized</span></label>
+      </div>
+    </fieldset>
+  </div>
+</fieldset>

package/patterns/menu.html

@@ -0,0 +1,8 @@
+<button type="button" popovertarget="record-actions">More actions</button>
+<div class="ef-menu" id="record-actions" popover data-ef-motion-weight="light">
+  <ul class="ef-menu__list">
+    <li><button type="button">Duplicate record</button></li>
+    <li><button type="button">Export record</button></li>
+    <li><button type="button">Archive record</button></li>
+  </ul>
+</div>

package/patterns/metric-card.html

@@ -0,0 +1,6 @@
+<article class="ef-metric-card">
+  <div class="ef-metric-card__label">Outstanding AR</div>
+  <div class="ef-metric-card__value">$42,500</div>
+  <div class="ef-metric-card__context"><span class="ef-status-lozenge" data-state="attention">$12,500 overdue</span></div>
+  <a href="#details">View receivables</a>
+</article>

package/patterns/mobile-action-bar.html

@@ -0,0 +1,4 @@
+<nav class="ef-mobile-action-bar" aria-label="Record actions">
+  <button type="button" class="ef-mobile-action-bar__secondary">Cancel</button>
+  <button type="button" class="ef-mobile-action-bar__primary">Save changes</button>
+</nav>