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

package/dist/foundations.css

@@ -0,0 +1,113 @@
+@layer echelon.foundations {
+  *, *::before, *::after { box-sizing: border-box; }
+
+  :where(html) {
+    color-scheme: light dark;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(body) {
+    margin: 0;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  :where(h1, h2) {
+    color: var(--ef-color-text-heading, #202421);
+    font-family: var(--ef-primitive-font-family-display, Georgia, serif);
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.02;
+  }
+
+  :where(h3, h4, h5, h6) {
+    color: var(--ef-color-text-heading, #202421);
+    line-height: 1.25;
+  }
+
+  :where(p) {
+    color: var(--ef-color-text-secondary, #686d68);
+    max-inline-size: 72ch;
+  }
+
+  :where(a) {
+    color: var(--ef-color-accent-primary, #905831);
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.18em;
+  }
+
+  :where(button, input, select, textarea) {
+    max-inline-size: 100%;
+    font: inherit;
+  }
+
+  :where(img, picture, video, canvas, svg) {
+    max-inline-size: 100%;
+  }
+
+  :where(img, video, canvas) {
+    block-size: auto;
+  }
+
+  :where(button, .ef-button) {
+    min-block-size: 2.75rem;
+    padding: 0.65rem 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-weight: 700;
+  }
+
+  :where(button, .ef-button):where(:not(:disabled)):hover {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    min-block-size: 2.75rem;
+    inline-size: 100%;
+    padding: 0.7rem 0.8rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(:focus-visible) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
+  .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
+  .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
+  .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
+
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+    overflow-wrap: anywhere;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button, .ef-button, input, textarea, select, .ef-surface) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/patterns/alert.html

@@ -0,0 +1,8 @@
+<aside class="ef-alert" role="status" data-tone="attention" data-ef-motion-weight="standard" data-ef-motion-entry>
+  <div class="ef-alert__icon" aria-hidden="true">!</div>
+  <div>
+    <h3 class="ef-alert__title">Review required</h3>
+    <p>Two values changed since this view was loaded. No update has been applied.</p>
+  </div>
+  <button type="button">Review changes</button>
+</aside>

package/dist/patterns/allocation.html

@@ -0,0 +1,24 @@
+<fieldset class="ef-allocation">
+  <legend class="ef-allocation__legend">Distribute 10 points across these priorities.</legend>
+
+  <div class="ef-allocation__items">
+    <label class="ef-allocation__item">
+      <span>Reliability</span>
+      <input type="number" name="reliability" min="0" max="10" step="1" value="4" inputmode="numeric">
+    </label>
+    <label class="ef-allocation__item">
+      <span>Delivery speed</span>
+      <input type="number" name="delivery-speed" min="0" max="10" step="1" value="3" inputmode="numeric">
+    </label>
+    <label class="ef-allocation__item">
+      <span>Cost efficiency</span>
+      <input type="number" name="cost-efficiency" min="0" max="10" step="1" value="3" inputmode="numeric">
+    </label>
+  </div>
+
+  <div class="ef-allocation__total" data-ef-state="valid" aria-live="polite" aria-atomic="true">
+    <span>Total</span>
+    <output>10 / 10</output>
+  </div>
+  <p class="ef-field__description">Limen validates the aggregate total and renders the authoritative state.</p>
+</fieldset>

package/dist/patterns/best-worst.html

@@ -0,0 +1,21 @@
+<fieldset class="ef-best-worst">
+  <legend class="ef-best-worst__legend">Choose the most important and least important item.</legend>
+  <p class="ef-field__description">One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.</p>
+
+  <div class="ef-best-worst__header" aria-hidden="true">
+    <span>Option</span><span>Best</span><span>Worst</span>
+  </div>
+
+  <div class="ef-best-worst__row">
+    <span id="bw-reliability">Reliability</span>
+    <label><input type="radio" name="best" value="reliability" aria-labelledby="bw-reliability bw-best-label"><span class="ef-sr-only" id="bw-best-label">Best</span></label>
+    <label><input type="radio" name="worst" value="reliability" aria-labelledby="bw-reliability bw-worst-label"><span class="ef-sr-only" id="bw-worst-label">Worst</span></label>
+  </div>
+  <div class="ef-best-worst__row">
+    <span id="bw-speed">Delivery speed</span>
+    <label><input type="radio" name="best" value="speed" aria-label="Delivery speed, Best"></label>
+    <label><input type="radio" name="worst" value="speed" aria-label="Delivery speed, Worst"></label>
+  </div>
+
+  <p class="ef-best-worst__status" data-ef-state="incomplete" aria-live="polite">Choose one Best and one Worst.</p>
+</fieldset>

package/dist/patterns/binary-choice.html

@@ -0,0 +1,15 @@
+<fieldset class="ef-binary-choice">
+  <legend class="ef-binary-choice__legend">Is automated deployment currently in use?</legend>
+  <p class="ef-field__description" id="binary-choice-help">Choose one response. An unanswered question remains distinct from No.</p>
+
+  <div class="ef-binary-choice__options" aria-describedby="binary-choice-help">
+    <label class="ef-binary-option">
+      <input type="radio" name="automated-deployment" value="yes" required>
+      <span>Yes</span>
+    </label>
+    <label class="ef-binary-option">
+      <input type="radio" name="automated-deployment" value="no">
+      <span>No</span>
+    </label>
+  </div>
+</fieldset>

package/dist/patterns/checkbox.html

@@ -0,0 +1,13 @@
+<label class="ef-checkbox" data-ef-motion-weight="standard">
+  <input
+    class="ef-checkbox__input"
+    type="checkbox"
+    name="audit-log"
+    value="enabled"
+    aria-describedby="audit-log-description">
+  <span class="ef-checkbox__box" aria-hidden="true"></span>
+  <span class="ef-checkbox__text">
+    <span class="ef-checkbox__label">Record audit events</span>
+    <span class="ef-checkbox__description" id="audit-log-description">Include this action in the audit trail.</span>
+  </span>
+</label>

package/dist/patterns/choice-group.html

@@ -0,0 +1,27 @@
+<fieldset class="ef-choice-group">
+  <legend class="ef-choice-group__legend">Which environment is most representative?</legend>
+
+  <label class="ef-choice">
+    <input type="radio" name="environment" value="cloud" required>
+    <span class="ef-choice__content">
+      <strong>Cloud</strong>
+      <span>Primarily hosted cloud infrastructure.</span>
+    </span>
+  </label>
+
+  <label class="ef-choice">
+    <input type="radio" name="environment" value="hybrid">
+    <span class="ef-choice__content">
+      <strong>Hybrid</strong>
+      <span>Cloud and on-premises infrastructure.</span>
+    </span>
+  </label>
+
+  <label class="ef-choice">
+    <input type="radio" name="environment" value="on-premises">
+    <span class="ef-choice__content">
+      <strong>On-premises</strong>
+      <span>Primarily locally hosted infrastructure.</span>
+    </span>
+  </label>
+</fieldset>

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