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

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

package/patterns/diagram.html

@@ -0,0 +1,49 @@
+<figure class="ef-diagram" aria-labelledby="diagram-title">
+  <figcaption id="diagram-title">Publication workflow</figcaption>
+  <p>Fill colors show the owning team through a consumer-defined mapping (see the key). They say nothing about state: each item states its kind and state in text.</p>
+  <div class="ef-diagram__viewport" tabindex="0" role="group" aria-label="Publication workflow canvas, scroll to see all items">
+    <div class="ef-diagram__canvas" style="--ef-diagram-canvas-w: 720px; --ef-diagram-canvas-h: 330px;">
+      <svg class="ef-diagram__wires" viewBox="0 0 720 330" aria-hidden="true" focusable="false">
+        <defs>
+          <marker id="diagram-arrow" class="ef-diagram-marker" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
+        </defs>
+        <path class="ef-diagram-connector" d="M216 70 H258" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" d="M460 70 H502" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" data-ef-line="dashed" d="M360 150 V198" marker-end="url(#diagram-arrow)"/>
+        <path class="ef-diagram-connector" data-ef-line="dotted" d="M260 260 H116 V152" marker-end="url(#diagram-arrow)"/>
+      </svg>
+      <article class="ef-diagram-node" data-ef-shape="rounded" aria-labelledby="node-draft" style="--ef-diagram-x: 16px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">Task</p>
+        <h3 class="ef-diagram-node__label" id="node-draft">Draft article</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Done</dd><dt>Team</dt><dd>Editorial</dd></dl>
+      </article>
+      <article class="ef-diagram-node" aria-labelledby="node-review" style="--ef-diagram-x: 260px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #fff1d6; --ef-diagram-accent: #8a5300; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">Decision</p>
+        <h3 class="ef-diagram-node__label" id="node-review">Legal review</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Active</dd><dt>Team</dt><dd>Legal</dd></dl>
+      </article>
+      <article class="ef-diagram-node" data-ef-shape="pill" aria-labelledby="node-publish" style="--ef-diagram-x: 504px; --ef-diagram-y: 24px; --ef-diagram-w: 200px; --ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3; --ef-diagram-foreground: #1d1d1b;">
+        <p class="ef-diagram-node__kind">End</p>
+        <h3 class="ef-diagram-node__label" id="node-publish"><a href="#diagram-title">Publish</a></h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Waiting</dd><dt>Team</dt><dd>Editorial</dd></dl>
+      </article>
+      <article class="ef-diagram-node" data-ef-shape="rounded" aria-labelledby="node-rework" style="--ef-diagram-x: 260px; --ef-diagram-y: 200px; --ef-diagram-w: 200px;">
+        <p class="ef-diagram-node__kind">Task</p>
+        <h3 class="ef-diagram-node__label" id="node-rework">Rework</h3>
+        <dl class="ef-diagram-node__meta"><dt>State</dt><dd>Not started</dd></dl>
+      </article>
+      <span class="ef-diagram-connector__label" style="--ef-diagram-x: 372px; --ef-diagram-y: 164px;">changes requested</span>
+    </div>
+  </div>
+  <ol class="ef-diagram__relations" aria-label="Relationships">
+    <li>Draft article leads to Legal review (solid line).</li>
+    <li>Legal review leads to Publish when approved (solid line).</li>
+    <li>Legal review leads to Rework when changes are requested (dashed line).</li>
+    <li>Rework returns to Draft article (dotted line).</li>
+  </ol>
+  <dl class="ef-diagram-legend" aria-label="Key: fill color by owning team">
+    <div><dt><span class="ef-diagram-legend__swatch" style="--ef-diagram-fill: #e8f0ff; --ef-diagram-accent: #2f5fb3;"></span> Editorial</dt><dd>blue fill</dd></div>
+    <div><dt><span class="ef-diagram-legend__swatch" style="--ef-diagram-fill: #fff1d6; --ef-diagram-accent: #8a5300;"></span> Legal</dt><dd>amber fill</dd></div>
+    <div><dt><span class="ef-diagram-legend__swatch"></span> Unassigned</dt><dd>Forma default</dd></div>
+  </dl>
+</figure>

package/patterns/documentation-layout.html

@@ -0,0 +1,18 @@
+<div class="ef-site" data-ef-layout="documentation">
+  <div class="ef-site__main">
+  <div class="ef-doc">
+    <nav class="ef-doc__nav" aria-label="Documentation">
+      <p class="ef-eyebrow ef-doc__heading">Guides</p>
+      <ul><li><a href="#install" aria-current="page">Install</a></li><li><a href="#configure">Configure</a></li><li><a href="#upgrade">Upgrade</a></li></ul>
+    </nav>
+    <article class="ef-doc__content ef-prose" id="install">
+      <h1>Install</h1>
+      <p>Documentation pages pair a navigation rail with a prose article and an optional page outline.</p>
+    </article>
+    <nav class="ef-doc__aside" aria-label="On this page">
+      <p class="ef-eyebrow ef-doc__heading">On this page</p>
+      <ul><li><a href="#install">Requirements</a></li><li><a href="#install">Verify</a></li></ul>
+    </nav>
+  </div>
+  </div>
+</div>

package/patterns/emphasis-budget.html

@@ -0,0 +1,21 @@
+<main class="ef-emphasis-budget" data-emphasis-budget="one-primary" aria-labelledby="emphasis-budget-title">
+  <header>
+    <p class="ef-component-kicker">Deployment review</p>
+    <h2 id="emphasis-budget-title">Release decision</h2>
+  </header>
+  <section data-emphasis="primary" aria-labelledby="emphasis-primary">\n    <p class="ef-emphasis-label">Primary</p>
+    <span class="ef-status-lozenge" data-state="unknown">Unknown consumer outcome</span>
+    <h3 id="emphasis-primary">Reconcile before publishing</h3>
+    <p>The consuming application has not supplied current verification evidence.</p>
+    <button type="button">Reconcile consumer</button>
+  </section>
+  <section data-emphasis="secondary" aria-labelledby="emphasis-secondary">\n    <p class="ef-emphasis-label">Secondary</p>
+    <h3 id="emphasis-secondary">Verification evidence</h3>
+    <p>Package build and repository checks passed. Consumer verification remains unresolved.</p>
+  </section>
+  <div class="ef-emphasis-budget__support">
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>History</h3><p>The previous release completed successfully.</p></section>
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>Package</h3><p>Version 1.4.0 with provenance enabled.</p></section>
+    <section data-emphasis="supporting"><p class="ef-emphasis-label">Supporting</p><h3>Activity</h3><p>Recent repository work includes presentation and browser-test changes.</p></section>
+  </div>
+</main>

package/patterns/entry-index.html

@@ -0,0 +1,16 @@
+<div class="ef-site">
+  <ol class="ef-index" aria-label="Research areas">
+    <li class="ef-index__item">
+      <p class="ef-index__marker">R / 01</p>
+      <div class="ef-index__heading"><p class="ef-eyebrow">Intelligent systems</p><h3 class="ef-index__title">AI Engineering</h3></div>
+      <p class="ef-index__summary">Dependable practice, evaluation, human oversight, and workflow design.</p>
+      <a class="ef-index__link" href="#ai">Visit AI Engineering</a>
+    </li>
+    <li class="ef-index__item">
+      <p class="ef-index__marker">R / 02</p>
+      <div class="ef-index__heading"><p class="ef-eyebrow">Perception &amp; composition</p><h3 class="ef-index__title">Visual Engineering</h3></div>
+      <p class="ef-index__summary">Evidence-led hierarchy, typography, color, composition, and interaction.</p>
+      <a class="ef-index__link" href="#visual">Visit Visual Engineering</a>
+    </li>
+  </ol>
+</div>

package/patterns/evidence-relationship.html

@@ -0,0 +1 @@
+<article class="ef-evidence-relationship" aria-labelledby="relationship-claim"><header><p class="ef-component-kicker">Supports</p><h2 id="relationship-claim">Claim: deployment is ready</h2></header><div class="ef-evidence-relationship__body"><p><strong>Evidence:</strong> Required checks passed.</p><p><strong>Source:</strong> CI run 1042</p><p><strong>Scope:</strong> commit abc123</p></div><footer><span class="ef-status-lozenge">Current</span></footer></article>

package/patterns/facts.html

@@ -0,0 +1,7 @@
+<div class="ef-site">
+  <dl class="ef-facts">
+    <div class="ef-facts__item"><dt>Version 0.3.0</dt><dd>Pinned in the site's forma.lock</dd></div>
+    <div class="ef-facts__item"><dt>Zero runtime</dt><dd>HTML and CSS only</dd></div>
+    <div class="ef-facts__item"><dt>WCAG 2.2 AA</dt><dd>Target for stable patterns</dd></div>
+  </dl>
+</div>

package/patterns/fault-banner.html

@@ -0,0 +1,19 @@
+<aside
+  class="ef-alert ef-fault-banner"
+  role="status"
+  data-ef-intent="banner"
+  data-ef-severity="critical"
+  data-ef-motion-weight="standard"
+  data-ef-motion-entry
+  aria-labelledby="fault-banner-title">
+  <div class="ef-alert__icon ef-fault-banner__marker" aria-hidden="true">!!</div>
+  <div class="ef-fault-banner__body">
+    <p class="ef-fault__severity">Critical</p>
+    <h2 class="ef-alert__title" id="fault-banner-title">Diagnostics storage is unavailable</h2>
+    <p>The application is running in a degraded state. New diagnostics are queued locally.</p>
+    <p class="ef-fault-reference">Reference <code>AG-22K8M</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRestoreSink">Reconnect diagnostics</button>
+  </div>
+</aside>

package/patterns/fault-blocking.html

@@ -0,0 +1,25 @@
+<button type="button" commandfor="blocking-fault-dialog" command="show-modal">Preview blocking fault</button>
+<dialog
+  class="ef-dialog ef-fault-blocking"
+  id="blocking-fault-dialog"
+  data-ef-intent="blocking"
+  data-ef-severity="critical"
+  data-ef-motion-weight="heavy"
+  aria-labelledby="blocking-fault-title"
+  aria-describedby="blocking-fault-message">
+  <div class="ef-dialog__body">
+    <div class="ef-fault-blocking__heading">
+      <div class="ef-fault-blocking__marker" aria-hidden="true">!!</div>
+      <div>
+        <p class="ef-fault__severity">Critical</p>
+        <h2 id="blocking-fault-title">This application cannot continue safely</h2>
+      </div>
+    </div>
+    <p id="blocking-fault-message">The current state cannot be verified. Use one of the recovery actions below before continuing.</p>
+    <p class="ef-fault-reference">Reference <code>AG-7P2DX</code></p>
+  </div>
+  <div class="ef-dialog__actions ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanOpenReadOnly">Open read-only</button>
+    <button type="button" data-ef-aegis-capability="CanReload">Reload</button>
+  </div>
+</dialog>

package/patterns/fault-details.html

@@ -0,0 +1,11 @@
+<details class="ef-fault-details">
+  <summary>Safe diagnostic details</summary>
+  <div class="ef-fault-details__content">
+    <dl class="ef-fault-details__list">
+      <div><dt>Reference</dt><dd><code>AG-4F82C</code></dd></div>
+      <div><dt>Application</dt><dd>Chrona</dd></div>
+      <div><dt>Recovery state</dt><dd>Retry available</dd></div>
+    </dl>
+    <p class="ef-fault-details__boundary">Only explicitly approved, already-sanitized diagnostic values belong in this surface.</p>
+  </div>
+</details>

package/patterns/fault-inline.html

@@ -0,0 +1,17 @@
+<div
+  class="ef-fault ef-fault--inline"
+  id="profile-save-fault"
+  data-ef-intent="inline"
+  data-ef-severity="error"
+  aria-labelledby="profile-save-fault-title">
+  <div class="ef-fault__marker" aria-hidden="true">!</div>
+  <div class="ef-fault__body">
+    <p class="ef-fault__severity">Error</p>
+    <p class="ef-fault__title" id="profile-save-fault-title"><strong>Profile was not saved.</strong></p>
+    <p class="ef-fault__message">Check your connection and try again.</p>
+    <p class="ef-fault-reference">Reference <code>AG-4F82C</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+  </div>
+</div>

package/patterns/fault-notification.html

@@ -0,0 +1,20 @@
+<aside
+  class="ef-toast ef-fault-notification"
+  role="status"
+  data-ef-intent="notification"
+  data-ef-severity="warning"
+  data-ef-motion-weight="standard"
+  data-ef-motion-entry
+  aria-labelledby="fault-notification-title">
+  <div class="ef-fault-notification__marker" aria-hidden="true">!</div>
+  <div class="ef-fault-notification__body">
+    <p class="ef-fault__severity">Warning</p>
+    <h3 class="ef-toast__title" id="fault-notification-title">GitHub is temporarily unavailable</h3>
+    <p>Your work is still local. You can retry the synchronization.</p>
+    <p class="ef-fault-reference">Reference <code>AG-91B7Q</code></p>
+    <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+      <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+    </div>
+  </div>
+  <button type="button" class="ef-fault-notification__dismiss" data-ef-action="dismiss" aria-label="Dismiss notification">Close</button>
+</aside>

package/patterns/fault-reference.html

@@ -0,0 +1,5 @@
+<p class="ef-fault-reference">
+  <span>Reference</span>
+  <code>AG-4F82C</code>
+  <button type="button" data-ef-action="copy-reference" aria-label="Copy fault reference AG-4F82C">Copy</button>
+</p>

package/patterns/fault-summary.html

@@ -0,0 +1,20 @@
+<section class="ef-fault-summary" tabindex="-1" aria-labelledby="fault-summary-title">
+  <div class="ef-fault-summary__heading">
+    <div class="ef-fault-summary__marker" aria-hidden="true">!</div>
+    <div>
+      <p class="ef-fault__severity">2 unresolved faults</p>
+      <h2 id="fault-summary-title">Some work needs your attention</h2>
+      <p>Repeated occurrences are grouped by the application before rendering.</p>
+    </div>
+  </div>
+  <ol class="ef-fault-summary__list">
+    <li data-ef-severity="error">
+      <a href="#customer-name">Customer name could not be saved</a>
+      <span class="ef-fault-summary__meta">Error · AG-4F82C · occurred 3 times</span>
+    </li>
+    <li data-ef-severity="warning">
+      <a href="#sync-status">Synchronization is waiting for GitHub</a>
+      <span class="ef-fault-summary__meta">Warning · AG-91B7Q</span>
+    </li>
+  </ol>
+</section>

package/patterns/fault.html

@@ -0,0 +1,17 @@
+<section
+  class="ef-fault"
+  data-ef-intent="inline"
+  data-ef-severity="error"
+  aria-labelledby="fault-title"
+  aria-describedby="fault-message">
+  <div class="ef-fault__marker" aria-hidden="true">!</div>
+  <div class="ef-fault__body">
+    <p class="ef-fault__severity">Error</p>
+    <h3 class="ef-fault__title" id="fault-title">Could not save changes</h3>
+    <p class="ef-fault__message" id="fault-message">The update did not complete. Your current values are still available.</p>
+    <p class="ef-fault-reference">Reference <code>AG-4F82C</code></p>
+  </div>
+  <div class="ef-recovery-actions" role="group" aria-label="Recovery actions">
+    <button type="button" data-ef-aegis-capability="CanRetry">Try again</button>
+  </div>
+</section>

package/patterns/feed-item.html

@@ -0,0 +1,12 @@
+<article class="ef-feed-item" aria-labelledby="feed-item-title">
+  <div class="ef-feed-item__primary">
+    <p class="ef-feed-item__source">Build system</p>
+    <h2 id="feed-item-title">Deployment requires review</h2>
+  </div>
+  <div class="ef-feed-item__meta">
+    <span class="ef-status-lozenge" data-state="warning">Needs review</span>
+    <time datetime="2026-09-25T18:30:00Z">18:30</time>
+  </div>
+  <p class="ef-feed-item__summary">Production approval is still unresolved.</p>
+  <div class="ef-feed-item__actions"><button type="button">Review</button></div>
+</article>

package/patterns/focus-stage.html

@@ -0,0 +1,4 @@
+<section class="ef-focus-stage" aria-label="Focused work">
+  <main class="ef-focus-stage__primary ef-surface"><h2>Primary artifact</h2><p>The dominant work surface receives available space.</p></main>
+  <aside class="ef-focus-stage__support ef-stack"><h2>Inspector</h2><label>Title <input value="Primary artifact"></label><button type="button">Apply</button></aside>
+</section>

package/patterns/frame.html

@@ -0,0 +1,4 @@
+<figure class="ef-frame">
+  <div class="ef-frame__media"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450'%3E%3Crect width='100%25' height='100%25' fill='%23ddd'/%3E%3C/svg%3E" alt=""></div>
+  <figcaption>Frame preserves a declared media proportion without making the content itself a component.</figcaption>
+</figure>

package/patterns/freshness.html

@@ -0,0 +1 @@
+<p class="ef-freshness"><span class="ef-freshness__label">Last verified</span> <time datetime="2026-09-26T04:30:00Z">04:30 UTC</time> <span class="ef-freshness__state">Current</span></p>

package/patterns/handoff-summary.html

@@ -0,0 +1 @@
+<section class="ef-handoff-summary" aria-labelledby="handoff-title"><header><p class="ef-component-kicker">Agent proposal</p><h2 id="handoff-title">Publish release</h2><p>Agent: OpenAI implementation agent</p></header><dl><div><dt>Proposed consequence</dt><dd>Publish version 1.4.0</dd></div><div><dt>Evidence</dt><dd>Tests and validation passed</dd></div><div><dt>Uncertainty</dt><dd>Production consumer smoke test not observed</dd></div><div><dt>Human authority</dt><dd>Approval required before publication</dd></div></dl><div class="ef-cluster"><button type="button">Approve</button><button type="button">Reject</button><button type="button">Request changes</button></div></section>