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

package/dist/patterns/active-filter-summary.html

@@ -0,0 +1,10 @@
+<section class="ef-active-filter-summary" aria-labelledby="active-filters-title">
+  <div class="ef-active-filter-summary__heading">
+    <h2 id="active-filters-title">Active filters</h2>
+    <button type="button">Clear all</button>
+  </div>
+  <ul class="ef-active-filter-summary__items">
+    <li><span>Status: Open</span><button type="button" aria-label="Remove Status: Open filter">Remove</button></li>
+    <li><span>Owner: Me</span><button type="button" aria-label="Remove Owner: Me filter">Remove</button></li>
+  </ul>
+</section>

package/dist/patterns/attention-path.html

@@ -0,0 +1,29 @@
+<main class="ef-attention-path" aria-labelledby="attention-title">
+  <header>
+    <p class="ef-component-kicker">Release verification</p>
+    <h2 id="attention-title">Human review required</h2>
+  </header>
+  <section class="ef-attention-path__primary" data-attention-step="1" aria-labelledby="attention-primary">
+    <span class="ef-status-lozenge" data-state="unknown">Unknown consumer outcome</span>
+    <h3 id="attention-primary">Reconcile the consumer smoke test before publishing</h3>
+    <p>The package build passed, but the consuming application has not reported a current verification result.</p>
+    <div class="ef-cluster">
+      <button type="button">Reconcile consumer</button>
+      <button type="button">Inspect evidence</button>
+    </div>
+  </section>
+  <div class="ef-attention-path__support">
+    <section data-attention-step="2" aria-labelledby="attention-evidence">
+      <h3 id="attention-evidence">Evidence</h3>
+      <p>CI run 1042 passed 148 checks. Package contents were generated successfully.</p>
+    </section>
+    <section data-attention-step="3" aria-labelledby="attention-context">
+      <h3 id="attention-context">Context</h3>
+      <p>Release 1.4.0 changes comparison and verification presentation contracts.</p>
+    </section>
+    <section data-attention-step="4" aria-labelledby="attention-history">
+      <h3 id="attention-history">Recent history</h3>
+      <p>Two previous releases completed without reconciliation work.</p>
+    </section>
+  </div>
+</main>

package/dist/patterns/badge.html

@@ -0,0 +1,9 @@
+<div class="ef-site">
+  <ul class="ef-badge-list" aria-label="Product facts">
+    <li><span class="ef-badge">F#</span></li>
+    <li><span class="ef-badge">Zero runtime</span></li>
+    <li><span class="ef-badge" data-ef-status="success">Stable</span></li>
+    <li><span class="ef-badge" data-ef-status="warning">Preview</span></li>
+    <li><a class="ef-badge" href="#changelog">Changelog</a></li>
+  </ul>
+</div>

package/dist/patterns/callout.html

@@ -0,0 +1,23 @@
+<div class="ef-site">
+  <article class="ef-prose">
+    <h2>Callouts mark supporting material, not ordinary emphasis</h2>
+    <p>Most prose needs no callout. Use one only when a reader must notice a note, a caution, cited evidence, or a recorded decision.</p>
+    <aside class="ef-callout" data-ef-callout="note" aria-labelledby="callout-note">
+      <p class="ef-callout__label" id="callout-note">Note</p>
+      <p>Supporting context that a reader can skip without losing the argument.</p>
+    </aside>
+    <aside class="ef-callout" data-ef-callout="caution" aria-labelledby="callout-caution">
+      <p class="ef-callout__label" id="callout-caution">Caution</p>
+      <p>A consequence the reader must weigh before acting on the surrounding text.</p>
+    </aside>
+    <figure class="ef-callout" data-ef-callout="evidence" aria-labelledby="callout-evidence">
+      <p class="ef-callout__label" id="callout-evidence">Evidence</p>
+      <blockquote><p>Quoted or cited source material stays a quotation in the document outline.</p></blockquote>
+      <figcaption>Source: the measurement it came from</figcaption>
+    </figure>
+    <aside class="ef-callout" data-ef-callout="decision" aria-labelledby="callout-decision">
+      <p class="ef-callout__label" id="callout-decision">Decision</p>
+      <p>The outcome that was settled, stated once so later sections can refer to it.</p>
+    </aside>
+  </article>
+</div>

package/dist/patterns/card-grid.html

@@ -0,0 +1,25 @@
+<div class="ef-site">
+  <ul class="ef-card-grid" data-ef-columns="3" aria-label="Capabilities">
+    <li>
+      <article class="ef-card">
+        <p class="ef-eyebrow">Diagnose</p>
+        <h3 class="ef-card__title"><a class="ef-card__link" href="#diagnose">Prove what is wrong before changing it</a></h3>
+        <p>Observations stay separate from explanations until evidence removes the alternatives.</p>
+        <p class="ef-card__footer">Outcome: a defensible root cause</p>
+      </article>
+    </li>
+    <li>
+      <article class="ef-card">
+        <p class="ef-eyebrow">Constrain</p>
+        <h3 class="ef-card__title">Make valid work explicit</h3>
+        <p>Domain state and legal transitions are modeled instead of implied.</p>
+      </article>
+    </li>
+    <li>
+      <article class="ef-card" data-ef-tone="inverse">
+        <h3 class="ef-card__title">Verify what people receive</h3>
+        <p>Accessibility, responsiveness, and meaning are checked as executable contracts.</p>
+      </article>
+    </li>
+  </ul>
+</div>

package/dist/patterns/character-grid-3270.html

@@ -0,0 +1,39 @@
+<div class="ef-character-grid" data-ef-profile="ibm-3270" data-ef-rows="24" data-ef-status-rows="1" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-3270-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="2" data-ef-len="4">OPSM</span>
+      <h2 class="ef-character-grid__text" id="character-grid-3270-title" data-ef-row="1" data-ef-col="33" data-ef-len="15" data-ef-emphasis="intensified">OPERATIONS MENU</h2>
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="64" data-ef-len="5">Date:</span>
+      <span class="ef-character-grid__value" data-ef-row="1" data-ef-col="70" data-ef-len="10">2026-09-27</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="2" data-ef-len="7">System:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="10" data-ef-len="8">ECHT01</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="60" data-ef-len="9">Operator:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="70" data-ef-len="8">OP0142</span>
+      <p class="ef-character-grid__text" data-ef-row="4" data-ef-col="2" data-ef-len="33">Select an option and press Enter.</p>
+      <dl class="ef-character-grid__group" aria-label="Options">
+        <dt class="ef-character-grid__value" data-ef-row="6" data-ef-col="6" data-ef-len="1">1</dt>
+        <dd class="ef-character-grid__text" data-ef-row="6" data-ef-col="10" data-ef-len="16">Customer inquiry</dd>
+        <dt class="ef-character-grid__value" data-ef-row="7" data-ef-col="6" data-ef-len="1">2</dt>
+        <dd class="ef-character-grid__text" data-ef-row="7" data-ef-col="10" data-ef-len="19">Account maintenance</dd>
+        <dt class="ef-character-grid__value" data-ef-row="8" data-ef-col="6" data-ef-len="1">3</dt>
+        <dd class="ef-character-grid__text" data-ef-row="8" data-ef-col="10" data-ef-len="19">Transaction history</dd>
+        <dt class="ef-character-grid__value" data-ef-row="9" data-ef-col="6" data-ef-len="1">4</dt>
+        <dd class="ef-character-grid__text" data-ef-row="9" data-ef-col="10" data-ef-len="7">Reports</dd>
+        <dt class="ef-character-grid__value" data-ef-row="10" data-ef-col="6" data-ef-len="1">X</dt>
+        <dd class="ef-character-grid__text" data-ef-row="10" data-ef-col="10" data-ef-len="4">Exit</dd>
+      </dl>
+      <label class="ef-character-grid__label" for="character-grid-3270-option" data-ef-row="13" data-ef-col="2" data-ef-len="11">Option<span class="ef-character-grid__leader" aria-hidden="true"> ===&gt;</span></label>
+      <input class="ef-character-grid__field" id="character-grid-3270-option" name="option" type="text" maxlength="2" required aria-describedby="character-grid-3270-option-hint" autocomplete="off" data-ef-row="13" data-ef-col="15" data-ef-len="2">
+      <span class="ef-character-grid__text" id="character-grid-3270-option-hint" data-ef-row="13" data-ef-col="20" data-ef-len="18" data-ef-emphasis="muted">(1-4 or X to exit)</span>
+      <p class="ef-character-grid__message" role="status" data-ef-severity="information" data-ef-row="21" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>INFO</span></span> OPSM000I Session started 2026-09-27 08:15.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="22" data-ef-col="2" data-ef-len="12"><kbd>Enter</kbd>=Select</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf1" formnovalidate data-ef-action="pf1" data-ef-row="22" data-ef-col="16" data-ef-len="8"><kbd>PF1</kbd>=Help</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="22" data-ef-col="26" data-ef-len="8"><kbd>PF3</kbd>=Exit</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf12" formnovalidate data-ef-action="pf12" data-ef-row="22" data-ef-col="36" data-ef-len="11"><kbd>PF12</kbd>=Cancel</button>
+        <button class="ef-character-grid__key" type="button" data-ef-action="reset" data-ef-row="23" data-ef-col="2" data-ef-len="12"><kbd>Reset</kbd>=Unlock</button>
+      </div>
+      <p class="ef-character-grid__status" role="status" data-ef-row="25" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__indicator"><span>READY</span></span></p>
+    </form>
+  </div>
+</div>

package/dist/patterns/character-grid-field.html

@@ -0,0 +1,21 @@
+<div class="ef-character-grid" data-ef-rows="10" data-ef-columns="60" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-field-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-field-title" data-ef-row="1" data-ef-col="23" data-ef-len="14" data-ef-emphasis="intensified">PAYMENT ENTRY</h2>
+      <label class="ef-character-grid__label" for="character-grid-field-account" data-ef-row="3" data-ef-col="2" data-ef-len="16">Account<span class="ef-character-grid__leader" aria-hidden="true">  . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-field-account" name="account" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="12" required aria-describedby="character-grid-field-account-hint" autocomplete="off" data-ef-row="3" data-ef-col="20" data-ef-len="12">
+      <span class="ef-character-grid__text" id="character-grid-field-account-hint" data-ef-row="3" data-ef-col="34" data-ef-len="21" data-ef-emphasis="muted">(required, 12 digits)</span>
+      <label class="ef-character-grid__label" for="character-grid-field-reference" data-ef-row="4" data-ef-col="2" data-ef-len="16">Reference<span class="ef-character-grid__leader" aria-hidden="true">  . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-field-reference" name="reference" type="text" maxlength="20" value="INV-1042" autocomplete="off" data-ef-row="4" data-ef-col="20" data-ef-len="20">
+      <label class="ef-character-grid__label" for="character-grid-field-amount" data-ef-row="5" data-ef-col="2" data-ef-len="16">Amount<span class="ef-character-grid__leader" aria-hidden="true"> . . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-field-amount" name="amount" type="text" inputmode="decimal" maxlength="12" value="12,48O.55" aria-invalid="true" aria-describedby="character-grid-field-error" autocomplete="off" data-ef-row="5" data-ef-col="20" data-ef-len="12">
+      <label class="ef-character-grid__label" for="character-grid-field-branch" data-ef-row="6" data-ef-col="2" data-ef-len="16">Branch<span class="ef-character-grid__leader" aria-hidden="true"> . . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-field-branch" name="branch" type="text" maxlength="8" value="NORTH" disabled data-ef-row="6" data-ef-col="20" data-ef-len="8">
+      <span class="ef-character-grid__text" data-ef-row="7" data-ef-col="2" data-ef-len="16">Opened<span class="ef-character-grid__leader" aria-hidden="true"> . . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="7" data-ef-col="20" data-ef-len="10">2014-03-11</span>
+      <label class="ef-character-grid__label" for="character-grid-field-session" data-ef-row="8" data-ef-col="2" data-ef-len="16">Session<span class="ef-character-grid__leader" aria-hidden="true">  . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-field-session" name="session" type="text" maxlength="16" value="S-20260927-01" readonly data-ef-row="8" data-ef-col="20" data-ef-len="16">
+      <p class="ef-character-grid__text" id="character-grid-field-error" data-ef-row="10" data-ef-col="2" data-ef-len="54">Error: Amount must contain digits only, e.g. 12480.55</p>
+    </form>
+  </div>
+</div>

package/dist/patterns/character-grid-keys.html

@@ -0,0 +1,20 @@
+<div class="ef-character-grid" data-ef-rows="6" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-keys-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-keys-title" data-ef-row="1" data-ef-col="33" data-ef-len="14" data-ef-emphasis="intensified">RECORD LOOKUP</h2>
+      <label class="ef-character-grid__label" for="character-grid-keys-record" data-ef-row="2" data-ef-col="2" data-ef-len="16">Record<span class="ef-character-grid__leader" aria-hidden="true"> . . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-keys-record" name="record" type="text" maxlength="10" required autocomplete="off" data-ef-row="2" data-ef-col="20" data-ef-len="10">
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="5" data-ef-col="2" data-ef-len="12"><kbd>Enter</kbd>=Search</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="clear" formnovalidate data-ef-action="clear" data-ef-row="5" data-ef-col="16" data-ef-len="11"><kbd>Clear</kbd>=Erase</button>
+        <button class="ef-character-grid__key" type="button" data-ef-action="reset" data-ef-row="5" data-ef-col="29" data-ef-len="12"><kbd>Reset</kbd>=Unlock</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf1" formnovalidate data-ef-action="pf1" data-ef-row="5" data-ef-col="43" data-ef-len="8"><kbd>PF1</kbd>=Help</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="5" data-ef-col="53" data-ef-len="8"><kbd>PF3</kbd>=Exit</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf12" formnovalidate data-ef-action="pf12" data-ef-row="5" data-ef-col="63" data-ef-len="11"><kbd>PF12</kbd>=Cancel</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf7" formnovalidate data-ef-action="pf7" disabled data-ef-row="6" data-ef-col="2" data-ef-len="8"><kbd>PF7</kbd>=Back</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf8" formnovalidate data-ef-action="pf8" data-ef-row="6" data-ef-col="12" data-ef-len="11"><kbd>PF8</kbd>=Forward</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="export" data-ef-action="export" data-ef-row="6" data-ef-col="25" data-ef-len="15"><kbd>F10</kbd>=Export CSV</button>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/patterns/character-grid-reveal.html

@@ -0,0 +1,16 @@
+<div class="ef-character-grid" data-ef-rows="8" data-ef-columns="60" data-ef-narrow="contained" data-ef-reveal="sequential" data-ef-reveal-rows="3">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-reveal-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-reveal-title" data-ef-reveal-run data-ef-row="1" data-ef-col="23" data-ef-len="15" data-ef-emphasis="intensified">ECHELON FOUNDRY</h2>
+      <p class="ef-character-grid__text" data-ef-reveal-run data-ef-row="2" data-ef-col="21" data-ef-len="18">OPERATIONS NETWORK</p>
+      <p class="ef-character-grid__text" data-ef-reveal-run data-ef-row="3" data-ef-col="20" data-ef-len="20" data-ef-emphasis="muted">Authorized use only.</p>
+      <label class="ef-character-grid__label" for="character-grid-reveal-operator" data-ef-row="5" data-ef-col="2" data-ef-len="16">Operator<span class="ef-character-grid__leader" aria-hidden="true"> . . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-reveal-operator" name="operator" type="text" maxlength="8" required autocomplete="username" data-ef-row="5" data-ef-col="20" data-ef-len="8">
+      <p class="ef-character-grid__message" role="status" data-ef-severity="information" data-ef-row="7" data-ef-col="2" data-ef-len="58"><span class="ef-character-grid__severity"><span>INFO</span></span> Enter your operator ID and press Enter.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="8" data-ef-col="2" data-ef-len="13"><kbd>Enter</kbd>=Sign on</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="8" data-ef-col="17" data-ef-len="8"><kbd>PF3</kbd>=Exit</button>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/patterns/character-grid-selection.html

@@ -0,0 +1,30 @@
+<div class="ef-character-grid" data-ef-rows="14" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-selection-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-selection-title" data-ef-row="1" data-ef-col="31" data-ef-len="18" data-ef-emphasis="intensified">WORK WITH ACCOUNTS</h2>
+      <p class="ef-character-grid__text" data-ef-row="3" data-ef-col="2" data-ef-len="26">Type options, press Enter.</p>
+      <p class="ef-character-grid__text" id="character-grid-selection-legend" data-ef-row="4" data-ef-col="4" data-ef-len="28">2=Change  4=Close  5=Display</p>
+      <div class="ef-character-grid__table" data-ef-row="6" data-ef-col="2" data-ef-len="77" data-ef-height="6">
+        <table data-ef-gutter="2">
+          <caption>Accounts, with a selection option per row</caption>
+          <thead><tr><th scope="col" id="character-grid-selection-opt" data-ef-len="3">Opt</th><th scope="col" data-ef-len="14">Account</th><th scope="col" data-ef-len="24">Name</th><th scope="col" data-ef-len="10">Type</th><th scope="col" data-ef-len="12" data-ef-align="end">Balance</th></tr></thead>
+          <tbody>
+          <tr><td><input class="ef-character-grid__field" id="character-grid-selection-opt-1" name="opt-00417-2231-09" type="text" inputmode="numeric" pattern="[245]" maxlength="1" autocomplete="off" aria-labelledby="character-grid-selection-opt character-grid-selection-row-1" aria-describedby="character-grid-selection-legend" data-ef-len="1"></td><th scope="row" id="character-grid-selection-row-1">00417-2231-09</th><td>RIVERA, ALEX</td><td>CHECKING</td><td data-ef-align="end">12,480.55</td></tr>
+          <tr><td><input class="ef-character-grid__field" id="character-grid-selection-opt-2" name="opt-00417-5518-02" type="text" inputmode="numeric" pattern="[245]" maxlength="1" autocomplete="off" value="5" aria-labelledby="character-grid-selection-opt character-grid-selection-row-2" aria-describedby="character-grid-selection-legend" data-ef-len="1"></td><th scope="row" id="character-grid-selection-row-2">00417-5518-02</th><td>RIVERA, ALEX</td><td>SAVINGS</td><td data-ef-align="end">8,215.00</td></tr>
+          <tr><td><input class="ef-character-grid__field" id="character-grid-selection-opt-3" name="opt-00902-1177-40" type="text" inputmode="numeric" pattern="[245]" maxlength="1" autocomplete="off" value="9" aria-invalid="true" aria-labelledby="character-grid-selection-opt character-grid-selection-row-3" aria-describedby="character-grid-selection-legend character-grid-selection-message" data-ef-len="1"></td><th scope="row" id="character-grid-selection-row-3">00902-1177-40</th><td>OKAFOR, CHIDI</td><td>LOAN</td><td data-ef-align="end">-4,100.00</td></tr>
+          <tr><td><input class="ef-character-grid__field" id="character-grid-selection-opt-4" name="opt-01233-0040-11" type="text" inputmode="numeric" pattern="[245]" maxlength="1" autocomplete="off" aria-labelledby="character-grid-selection-opt character-grid-selection-row-4" aria-describedby="character-grid-selection-legend" data-ef-len="1"></td><th scope="row" id="character-grid-selection-row-4">01233-0040-11</th><td>NAKAMURA, YUKI</td><td>CHECKING</td><td data-ef-align="end">310.72</td></tr>
+          <tr><td><input class="ef-character-grid__field" id="character-grid-selection-opt-5" name="opt-01233-0040-12" type="text" inputmode="numeric" pattern="[245]" maxlength="1" autocomplete="off" disabled aria-labelledby="character-grid-selection-opt character-grid-selection-row-5" aria-describedby="character-grid-selection-legend" data-ef-len="1"></td><th scope="row" id="character-grid-selection-row-5">01233-0040-12</th><td>NAKAMURA, YUKI</td><td>CLOSED</td><td data-ef-align="end">0.00</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <p class="ef-character-grid__text" data-ef-row="12" data-ef-col="72" data-ef-len="6">Bottom</p>
+      <p class="ef-character-grid__message" id="character-grid-selection-message" role="status" data-ef-severity="validation" data-ef-row="13" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>CHECK</span></span> Option 9 is not valid for 00902-1177-40. Type 2, 4, or 5.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="14" data-ef-col="2" data-ef-len="13"><kbd>Enter</kbd>=Process</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="14" data-ef-col="17" data-ef-len="8"><kbd>PF3</kbd>=Exit</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf5" formnovalidate data-ef-action="pf5" data-ef-row="14" data-ef-col="27" data-ef-len="11"><kbd>PF5</kbd>=Refresh</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf12" formnovalidate data-ef-action="pf12" data-ef-row="14" data-ef-col="40" data-ef-len="11"><kbd>PF12</kbd>=Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/patterns/character-grid-status.html

@@ -0,0 +1,11 @@
+<div class="ef-character-grid" data-ef-rows="6" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-status-title" tabindex="0">
+    <div class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-status-title" data-ef-row="1" data-ef-col="33" data-ef-len="14" data-ef-emphasis="intensified">BATCH TRANSFER</h2>
+      <span class="ef-character-grid__text" data-ef-row="3" data-ef-col="2" data-ef-len="16">Records<span class="ef-character-grid__leader" aria-hidden="true">  . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="3" data-ef-col="20" data-ef-len="6" data-ef-align="end">1,204</span>
+      <p class="ef-character-grid__message" role="alert" data-ef-severity="error" data-ef-row="5" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>ERROR</span></span> BTX009E Transfer service did not respond. Press Reset, then Enter.</p>
+      <p class="ef-character-grid__status" role="status" data-ef-row="6" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__indicator" data-ef-state="inhibited"><span>X SYSTEM</span></span>  Input inhibited</p>
+    </div>
+  </div>
+</div>

package/dist/patterns/character-grid-workflow.html

@@ -0,0 +1,147 @@
+<div class="ef-stack">
+<div class="ef-character-grid" data-ef-profile="ibm-3270" data-ef-rows="24" data-ef-status-rows="1" data-ef-columns="80" data-ef-narrow="contained" data-ef-reveal="sequential" data-ef-reveal-rows="1">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-workflow-cinq-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="2" data-ef-len="4">CINQ</span>
+      <h2 class="ef-character-grid__text" id="character-grid-workflow-cinq-title" data-ef-reveal-run data-ef-emphasis="intensified" data-ef-row="1" data-ef-col="33" data-ef-len="16">CUSTOMER INQUIRY</h2>
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="64" data-ef-len="5">Date:</span>
+      <span class="ef-character-grid__value" data-ef-row="1" data-ef-col="70" data-ef-len="10">2026-09-27</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="2" data-ef-len="7">System:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="10" data-ef-len="8">ECHT01</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="60" data-ef-len="9">Operator:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="70" data-ef-len="8">OP0142</span>
+      <p class="ef-character-grid__text" data-ef-row="4" data-ef-col="2" data-ef-len="52">Enter one or more search criteria, then press Enter.</p>
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-custno" data-ef-row="6" data-ef-col="2" data-ef-len="23">Customer number<span class="ef-character-grid__leader" aria-hidden="true"> . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-custno" name="custno" type="text" maxlength="10" autocomplete="off" inputmode="numeric" data-ef-row="6" data-ef-col="26" data-ef-len="10">
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-last" data-ef-row="7" data-ef-col="2" data-ef-len="23">Last name<span class="ef-character-grid__leader" aria-hidden="true"> . . . . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-last" name="last" type="text" maxlength="20" autocomplete="off" data-ef-row="7" data-ef-col="26" data-ef-len="20">
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-first" data-ef-row="8" data-ef-col="2" data-ef-len="23">First name<span class="ef-character-grid__leader" aria-hidden="true">  . . . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-first" name="first" type="text" maxlength="15" autocomplete="off" data-ef-row="8" data-ef-col="26" data-ef-len="15">
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-dob" data-ef-row="9" data-ef-col="2" data-ef-len="23">Date of birth<span class="ef-character-grid__leader" aria-hidden="true"> . . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-dob" name="dob" type="text" maxlength="10" autocomplete="off" aria-describedby="character-grid-workflow-cinq-dob-hint" data-ef-row="9" data-ef-col="26" data-ef-len="10">
+      <span class="ef-character-grid__text" id="character-grid-workflow-cinq-dob-hint" data-ef-emphasis="muted" data-ef-row="9" data-ef-col="38" data-ef-len="12">(YYYY-MM-DD)</span>
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-postal" data-ef-row="10" data-ef-col="2" data-ef-len="23">Postal code<span class="ef-character-grid__leader" aria-hidden="true"> . . . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-postal" name="postal" type="text" maxlength="10" autocomplete="off" data-ef-row="10" data-ef-col="26" data-ef-len="10">
+      <label class="ef-character-grid__label" for="character-grid-workflow-cinq-acct" data-ef-row="11" data-ef-col="2" data-ef-len="23">Account number<span class="ef-character-grid__leader" aria-hidden="true">  . . . .</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-cinq-acct" name="acct" type="text" maxlength="14" autocomplete="off" data-ef-row="11" data-ef-col="26" data-ef-len="14">
+      <p class="ef-character-grid__text" data-ef-row="13" data-ef-col="2" data-ef-len="75">At least one criterion is required. Last names match from the first letter.</p>
+      <p class="ef-character-grid__message" id="character-grid-workflow-cinq-message" role="status" data-ef-severity="information" data-ef-row="21" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>INFO</span></span> CINQ000I Type search criteria and press Enter.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="22" data-ef-col="2" data-ef-len="12"><kbd>Enter</kbd>=Search</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="clear" formnovalidate data-ef-action="clear" data-ef-row="22" data-ef-col="16" data-ef-len="11"><kbd>Clear</kbd>=Erase</button>
+        <button class="ef-character-grid__key" type="button" data-ef-action="reset" data-ef-row="22" data-ef-col="29" data-ef-len="12"><kbd>Reset</kbd>=Unlock</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf1" formnovalidate data-ef-action="pf1" data-ef-row="22" data-ef-col="43" data-ef-len="8"><kbd>PF1</kbd>=Help</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="22" data-ef-col="53" data-ef-len="8"><kbd>PF3</kbd>=Exit</button>
+      </div>
+      <p class="ef-character-grid__status" role="status" data-ef-row="25" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__indicator"><span>READY</span></span></p>
+    </form>
+  </div>
+</div>
+<div class="ef-character-grid" data-ef-profile="ibm-3270" data-ef-rows="24" data-ef-status-rows="1" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-workflow-accd-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="2" data-ef-len="4">ACCD</span>
+      <h2 class="ef-character-grid__text" id="character-grid-workflow-accd-title" data-ef-emphasis="intensified" data-ef-row="1" data-ef-col="34" data-ef-len="14">ACCOUNT DETAIL</h2>
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="64" data-ef-len="5">Date:</span>
+      <span class="ef-character-grid__value" data-ef-row="1" data-ef-col="70" data-ef-len="10">2026-09-27</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="2" data-ef-len="7">System:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="10" data-ef-len="8">ECHT01</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="60" data-ef-len="9">Operator:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="70" data-ef-len="8">OP0142</span>
+      <span class="ef-character-grid__text" data-ef-row="4" data-ef-col="2" data-ef-len="17">Customer<span class="ef-character-grid__leader" aria-hidden="true">  . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="4" data-ef-col="20" data-ef-len="10">0001042778</span>
+      <span class="ef-character-grid__text" data-ef-row="4" data-ef-col="34" data-ef-len="12">Name<span class="ef-character-grid__leader" aria-hidden="true"> . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="4" data-ef-col="47" data-ef-len="30">RIVERA, ALEX J</span>
+      <span class="ef-character-grid__text" data-ef-row="5" data-ef-col="2" data-ef-len="17">Address<span class="ef-character-grid__leader" aria-hidden="true"> . . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="5" data-ef-col="20" data-ef-len="40">1200 HARBOR VIEW DRIVE APT 4B</span>
+      <span class="ef-character-grid__value" data-ef-row="6" data-ef-col="20" data-ef-len="40">PORTLAND OR 97209-3311</span>
+      <span class="ef-character-grid__text" data-ef-row="7" data-ef-col="2" data-ef-len="17">Phone<span class="ef-character-grid__leader" aria-hidden="true"> . . . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-state="missing" data-ef-row="7" data-ef-col="20" data-ef-len="14">not on file</span>
+      <h3 class="ef-character-grid__text" data-ef-emphasis="intensified" data-ef-row="9" data-ef-col="2" data-ef-len="7">ACCOUNT</h3>
+      <span class="ef-character-grid__text" data-ef-row="10" data-ef-col="2" data-ef-len="17">Account number<span class="ef-character-grid__leader" aria-hidden="true">  :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="10" data-ef-col="20" data-ef-len="14">00417-2231-09</span>
+      <span class="ef-character-grid__text" data-ef-row="10" data-ef-col="42" data-ef-len="12">Type<span class="ef-character-grid__leader" aria-hidden="true"> . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="10" data-ef-col="55" data-ef-len="12">CHECKING</span>
+      <span class="ef-character-grid__text" data-ef-row="11" data-ef-col="2" data-ef-len="17">Status<span class="ef-character-grid__leader" aria-hidden="true">  . . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="11" data-ef-col="20" data-ef-len="10">ACTIVE</span>
+      <span class="ef-character-grid__text" data-ef-row="11" data-ef-col="42" data-ef-len="12">Opened<span class="ef-character-grid__leader" aria-hidden="true"> . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="11" data-ef-col="55" data-ef-len="10">2014-03-11</span>
+      <span class="ef-character-grid__text" data-ef-row="12" data-ef-col="2" data-ef-len="17">Currency<span class="ef-character-grid__leader" aria-hidden="true">  . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="12" data-ef-col="20" data-ef-len="3">USD</span>
+      <h3 class="ef-character-grid__text" data-ef-emphasis="intensified" data-ef-row="14" data-ef-col="2" data-ef-len="8">BALANCES</h3>
+      <span class="ef-character-grid__text" data-ef-row="15" data-ef-col="2" data-ef-len="17">Ledger balance<span class="ef-character-grid__leader" aria-hidden="true">  :</span></span>
+      <span class="ef-character-grid__value" data-ef-align="end" data-ef-row="15" data-ef-col="20" data-ef-len="15">12,480.55</span>
+      <span class="ef-character-grid__text" data-ef-row="15" data-ef-col="42" data-ef-len="11">Available<span class="ef-character-grid__leader" aria-hidden="true"> :</span></span>
+      <span class="ef-character-grid__value" data-ef-align="end" data-ef-row="15" data-ef-col="55" data-ef-len="15">12,230.55</span>
+      <span class="ef-character-grid__text" data-ef-row="16" data-ef-col="2" data-ef-len="17">Holds<span class="ef-character-grid__leader" aria-hidden="true"> . . . . . :</span></span>
+      <span class="ef-character-grid__value" data-ef-align="end" data-ef-row="16" data-ef-col="20" data-ef-len="15">250.00</span>
+      <span class="ef-character-grid__text" data-ef-row="16" data-ef-col="42" data-ef-len="11">Overdraft<span class="ef-character-grid__leader" aria-hidden="true"> :</span></span>
+      <span class="ef-character-grid__value" data-ef-align="end" data-ef-row="16" data-ef-col="55" data-ef-len="15">1,000.00</span>
+      <span class="ef-character-grid__text" data-ef-row="18" data-ef-col="2" data-ef-len="17">Last statement<span class="ef-character-grid__leader" aria-hidden="true">  :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="18" data-ef-col="20" data-ef-len="10">2026-08-31</span>
+      <p class="ef-character-grid__message" id="character-grid-workflow-accd-message" role="status" data-ef-severity="information" data-ef-row="21" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>INFO</span></span> ACCD000I Account 00417-2231-09 displayed.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="22" data-ef-col="2" data-ef-len="13"><kbd>Enter</kbd>=Refresh</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="22" data-ef-col="17" data-ef-len="10"><kbd>PF3</kbd>=Return</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf5" formnovalidate data-ef-action="pf5" data-ef-row="22" data-ef-col="29" data-ef-len="16"><kbd>PF5</kbd>=Transactions</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf12" formnovalidate data-ef-action="pf12" data-ef-row="22" data-ef-col="47" data-ef-len="12"><kbd>PF12</kbd>=Inquiry</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf1" formnovalidate data-ef-action="pf1" data-ef-row="22" data-ef-col="61" data-ef-len="8"><kbd>PF1</kbd>=Help</button>
+      </div>
+      <p class="ef-character-grid__status" role="status" data-ef-row="25" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__indicator"><span>READY</span></span></p>
+    </form>
+  </div>
+</div>
+<div class="ef-character-grid" data-ef-profile="ibm-3270" data-ef-rows="24" data-ef-status-rows="1" data-ef-columns="80" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-workflow-trnh-title" tabindex="0">
+    <form class="ef-character-grid__surface">
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="2" data-ef-len="4">TRNH</span>
+      <h2 class="ef-character-grid__text" id="character-grid-workflow-trnh-title" data-ef-emphasis="intensified" data-ef-row="1" data-ef-col="31" data-ef-len="19">TRANSACTION HISTORY</h2>
+      <span class="ef-character-grid__text" data-ef-row="1" data-ef-col="64" data-ef-len="5">Date:</span>
+      <span class="ef-character-grid__value" data-ef-row="1" data-ef-col="70" data-ef-len="10">2026-09-27</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="2" data-ef-len="7">System:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="10" data-ef-len="8">ECHT01</span>
+      <span class="ef-character-grid__text" data-ef-row="2" data-ef-col="60" data-ef-len="9">Operator:</span>
+      <span class="ef-character-grid__value" data-ef-row="2" data-ef-col="70" data-ef-len="8">OP0142</span>
+      <span class="ef-character-grid__text" data-ef-row="3" data-ef-col="2" data-ef-len="11">Account<span class="ef-character-grid__leader" aria-hidden="true"> . :</span></span>
+      <span class="ef-character-grid__value" data-ef-row="3" data-ef-col="14" data-ef-len="14">00417-2231-09</span>
+      <label class="ef-character-grid__label" for="character-grid-workflow-trnh-from" data-ef-row="3" data-ef-col="32" data-ef-len="11">From<span class="ef-character-grid__leader" aria-hidden="true">  . . :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-trnh-from" name="from" type="text" maxlength="10" autocomplete="off" value="2026-08-01" required data-ef-row="3" data-ef-col="44" data-ef-len="10">
+      <label class="ef-character-grid__label" for="character-grid-workflow-trnh-to" data-ef-row="3" data-ef-col="57" data-ef-len="4">To<span class="ef-character-grid__leader" aria-hidden="true"> :</span></label>
+      <input class="ef-character-grid__field" id="character-grid-workflow-trnh-to" name="to" type="text" maxlength="10" autocomplete="off" value="2026-09-27" required data-ef-row="3" data-ef-col="62" data-ef-len="10">
+      <div class="ef-character-grid__table" data-ef-row="5" data-ef-col="2" data-ef-len="77" data-ef-height="13">
+        <table data-ef-gutter="2">
+          <caption>Transactions for account 00417-2231-09, newest first</caption>
+          <thead><tr><th scope="col" data-ef-len="10">Date</th><th scope="col" data-ef-len="27">Description</th><th scope="col" data-ef-len="12" data-ef-align="end">Amount</th><th scope="col" data-ef-len="12" data-ef-align="end">Balance</th><th scope="col" data-ef-len="8">Status</th></tr></thead>
+          <tbody>
+          <tr><td>2026-09-26</td><td>PAYROLL DEPOSIT ACME CORP</td><td data-ef-align="end">2,450.00</td><td data-ef-align="end">12,480.55</td><td>POSTED</td></tr>
+          <tr><td>2026-09-25</td><td>CARD 4411 CITY MARKET</td><td data-ef-align="end">-86.12</td><td data-ef-align="end">10,030.55</td><td>POSTED</td></tr>
+          <tr><td>2026-09-25</td><td>CARD 4411 FUEL STOP 118</td><td data-ef-align="end">-52.40</td><td data-ef-align="end">10,116.67</td><td>POSTED</td></tr>
+          <tr><td>2026-09-24</td><td>TRANSFER TO SAVINGS 7710</td><td data-ef-align="end">-500.00</td><td data-ef-align="end">10,169.07</td><td>POSTED</td></tr>
+          <tr><td>2026-09-23</td><td>CHECK 1043</td><td data-ef-align="end">-1,200.00</td><td data-ef-align="end">10,669.07</td><td>POSTED</td></tr>
+          <tr><td>2026-09-22</td><td>ACH ELECTRIC UTILITY</td><td data-ef-align="end">-143.88</td><td data-ef-align="end">11,869.07</td><td>POSTED</td></tr>
+          <tr><td>2026-09-22</td><td>CARD 4411 BOOKSHOP</td><td data-ef-align="end">-24.99</td><td data-ef-align="end">12,012.95</td><td>PENDING</td></tr>
+          <tr><td>2026-09-20</td><td>ATM WITHDRAWAL 0931</td><td data-ef-align="end">-200.00</td><td data-ef-align="end">12,037.94</td><td>POSTED</td></tr>
+          <tr><td>2026-09-19</td><td>CHECK 1041</td><td data-ef-align="end">-310.00</td><td data-ef-align="end">12,237.94</td><td>RETURNED</td></tr>
+          <tr><td>2026-09-18</td><td>ONLINE PAYMENT CREDIT CARD</td><td data-ef-align="end">-640.00</td><td data-ef-align="end">12,547.94</td><td>POSTED</td></tr>
+          <tr><td>2026-09-17</td><td>INTEREST CREDIT</td><td data-ef-align="end">1.37</td><td data-ef-align="end">13,187.94</td><td>POSTED</td></tr>
+          <tr><td>2026-09-15</td><td>CARD 4411 PHARMACY</td><td data-ef-align="end">-18.45</td><td data-ef-align="end">13,186.57</td><td>REVERSED</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <span class="ef-character-grid__text" id="character-grid-workflow-trnh-position" data-ef-row="19" data-ef-col="2" data-ef-len="15">Rows 1-12 of 37</span>
+      <span class="ef-character-grid__text" data-ef-row="19" data-ef-col="72" data-ef-len="7">More: +</span>
+      <p class="ef-character-grid__message" id="character-grid-workflow-trnh-message" role="status" data-ef-severity="information" data-ef-row="21" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__severity"><span>INFO</span></span> TRNH000I 37 transactions from 2026-08-01 to 2026-09-27.</p>
+      <div class="ef-character-grid__group" role="group" aria-label="Function keys">
+        <button class="ef-character-grid__key" type="submit" name="action" value="enter" data-ef-action="enter" data-ef-row="22" data-ef-col="2" data-ef-len="17"><kbd>Enter</kbd>=Apply dates</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf3" formnovalidate data-ef-action="pf3" data-ef-row="22" data-ef-col="21" data-ef-len="10"><kbd>PF3</kbd>=Return</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf7" formnovalidate data-ef-action="pf7" data-ef-row="22" data-ef-col="33" data-ef-len="8"><kbd>PF7</kbd>=Back</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf8" formnovalidate data-ef-action="pf8" data-ef-row="22" data-ef-col="43" data-ef-len="11"><kbd>PF8</kbd>=Forward</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf12" formnovalidate data-ef-action="pf12" data-ef-row="22" data-ef-col="56" data-ef-len="12"><kbd>PF12</kbd>=Inquiry</button>
+        <button class="ef-character-grid__key" type="button" data-ef-action="reset" data-ef-row="23" data-ef-col="2" data-ef-len="12"><kbd>Reset</kbd>=Unlock</button>
+        <button class="ef-character-grid__key" type="submit" name="action" value="pf1" formnovalidate data-ef-action="pf1" data-ef-row="23" data-ef-col="17" data-ef-len="8"><kbd>PF1</kbd>=Help</button>
+      </div>
+      <p class="ef-character-grid__status" role="status" data-ef-row="25" data-ef-col="2" data-ef-len="78"><span class="ef-character-grid__indicator"><span>READY</span></span></p>
+    </form>
+  </div>
+</div>
+</div>

package/dist/patterns/character-grid.html

@@ -0,0 +1,16 @@
+<div class="ef-character-grid" data-ef-rows="8" data-ef-columns="40" data-ef-narrow="contained">
+  <div class="ef-character-grid__viewport" role="region" aria-labelledby="character-grid-title" tabindex="0">
+    <div class="ef-character-grid__surface">
+      <h2 class="ef-character-grid__text" id="character-grid-title" data-ef-row="1" data-ef-col="13" data-ef-len="15" data-ef-emphasis="intensified">SYSTEM OVERVIEW</h2>
+      <p class="ef-character-grid__text" data-ef-row="3" data-ef-col="2" data-ef-len="37">Positioned protected text, row-major.</p>
+      <dl class="ef-character-grid__group">
+        <dt class="ef-character-grid__text" data-ef-row="5" data-ef-col="2" data-ef-len="11">Region  . :</dt>
+        <dd class="ef-character-grid__value" data-ef-row="5" data-ef-col="14" data-ef-len="10">NORTH-EAST</dd>
+        <dt class="ef-character-grid__text" data-ef-row="6" data-ef-col="2" data-ef-len="11">Nodes . . :</dt>
+        <dd class="ef-character-grid__value" data-ef-row="6" data-ef-col="14" data-ef-len="4" data-ef-align="end">12</dd>
+        <dt class="ef-character-grid__text" data-ef-row="7" data-ef-col="2" data-ef-len="11">Updated . :</dt>
+        <dd class="ef-character-grid__value" data-ef-row="7" data-ef-col="14" data-ef-len="10">2026-09-27</dd>
+      </dl>
+    </div>
+  </div>
+</div>

package/dist/patterns/cluster.html

@@ -0,0 +1,5 @@
+<div class="ef-cluster" aria-label="Related actions">
+  <button type="button">Primary action</button>
+  <button type="button">Secondary action</button>
+  <a href="#details">View details</a>
+</div>

package/dist/patterns/code-sample.html

@@ -0,0 +1,9 @@
+<div class="ef-site">
+  <figure class="ef-code-figure">
+    <figcaption id="code-caption">Pin Forma in forma.lock</figcaption>
+    <pre class="ef-code" tabindex="0" aria-labelledby="code-caption"><code>forma 0.3.0
+repository kemiller2002/forma
+destination assets/forma
+asset forma-marketing.css sha256:&lt;digest&gt;</code></pre>
+  </figure>
+</div>

package/dist/patterns/command-group.html

@@ -0,0 +1,6 @@
+<section class="ef-command-group" aria-labelledby="edit-commands">
+  <h2 class="ef-command-group__label" id="edit-commands">Edit</h2>
+  <div class="ef-command-group__commands">
+    <button type="button">Cut</button><button type="button">Copy</button><button type="button">Paste</button>
+  </div>
+</section>

package/dist/patterns/comparison-grid.html

@@ -0,0 +1,7 @@
+<div class="ef-comparison-grid" role="region" aria-label="Plan comparison" tabindex="0">
+  <table>
+    <caption>Plan comparison</caption>
+    <thead><tr><th scope="col">Capability</th><th scope="col">Standard</th><th scope="col">Advanced</th></tr></thead>
+    <tbody><tr><th scope="row">Evidence history</th><td>30 days</td><td>Unlimited</td></tr><tr><th scope="row">Exports</th><td>Manual</td><td>Automated</td></tr></tbody>
+  </table>
+</div>

package/dist/patterns/comparison-pairs.html

@@ -0,0 +1,13 @@
+<section class="ef-comparison-pairs" aria-labelledby="comparison-pairs-title">
+  <h3 id="comparison-pairs-title">Configuration change</h3>
+  <div class="ef-comparison-pairs__item">
+    <div class="ef-comparison-pairs__label">Retention</div>
+    <div class="ef-comparison-pairs__value" data-side="before" data-label="Before">30 days</div>
+    <div class="ef-comparison-pairs__value" data-side="after" data-label="After">Unlimited</div>
+  </div>
+  <div class="ef-comparison-pairs__item">
+    <div class="ef-comparison-pairs__label">Export</div>
+    <div class="ef-comparison-pairs__value" data-side="before" data-label="Before">Manual</div>
+    <div class="ef-comparison-pairs__value" data-side="after" data-label="After">Automated after approval</div>
+  </div>
+</section>

package/dist/patterns/cta.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <section class="ef-section" aria-labelledby="cta-title">
+    <div class="ef-cta" data-ef-tone="inverse">
+      <div class="ef-cta__text">
+        <p class="ef-eyebrow">Start here</p>
+        <h2 id="cta-title">Bring the problem that matters</h2>
+        <p>One primary action per call to action; secondary actions stay visibly lower in the hierarchy.</p>
+      </div>
+      <div class="ef-actions"><a class="ef-button" data-ef-variant="primary" href="#contact">Start a diagnostic</a><a class="ef-button" href="#about">Meet the team</a></div>
+    </div>
+  </section>
+</div>

package/dist/patterns/dense-ledger.html

@@ -0,0 +1,7 @@
+<div class="ef-bounded-overflow" role="region" aria-label="Operational ledger" tabindex="0">
+  <table class="ef-dense-ledger">
+    <caption>Recent operational entries</caption>
+    <thead><tr><th scope="col">Reference</th><th scope="col">Status</th><th scope="col">Owner</th><th scope="col">Amount</th></tr></thead>
+    <tbody><tr><th scope="row">INV-1042</th><td>Needs review</td><td>Billing</td><td>$5,000</td></tr><tr><th scope="row">INV-1043</th><td>Ready</td><td>Billing</td><td>$2,750</td></tr></tbody>
+  </table>
+</div>

package/dist/patterns/diagnostic-status.html

@@ -0,0 +1,7 @@
+<div class="ef-diagnostic-status" data-ef-state="queued" role="status">
+  <span class="ef-diagnostic-status__marker" aria-hidden="true">↥</span>
+  <span class="ef-diagnostic-status__body">
+    <strong>Diagnostics queued</strong>
+    <span>3 reports are waiting to synchronize.</span>
+  </span>
+</div>