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

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0-main.216.1",
   "private": false,
   "type": "module",
   "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
   "sideEffects": [
     "./dist/*.css",
-    "./dist/brands/*.css"
+    "./dist/brands/*.css",
+    "./dist/marketing.css",
+    "./dist/marketing/*.css"
   ],
   "exports": {
     "./tokens.css": "./dist/tokens.css",
@@ -17,32 +19,50 @@
     "./assessment.css": "./dist/assessment.css",
     "./skins.css": "./dist/skins.css",
     "./brands/*": "./dist/brands/*",
-    "./brand-manifest.schema.json": "./schemas/brand-manifest.schema.json"
+    "./brand-manifest.schema.json": "./schemas/brand-manifest.schema.json",
+    "./marketing.css": "./dist/marketing.css",
+    "./marketing/*": "./dist/marketing/*",
+    "./tokens.json": "./tokens/echelon.tokens.json",
+    "./figma/components.json": "./figma/component-contracts.json"
   },
   "files": [
     "dist",
     "patterns",
     "schemas/brand-manifest.schema.json",
-    "docs/BRANDING.md"
+    "docs/BRANDING.md",
+    "docs/MARKETING-SITES.md",
+    "tokens/echelon.tokens.json",
+    "figma/component-contracts.json"
   ],
   "scripts": {
     "clean": "node tools/clean.mjs",
     "tokens:build": "dotnet run --project tools/TokenCompiler/TokenCompiler.fsproj -- tokens/echelon.tokens.json dist/tokens.css",
     "assets:build": "node tools/build-assets.mjs",
-    "build": "npm run clean && npm run tokens:build && npm run brands:build && npm run assets:build",
+    "build": "npm run clean && npm run tokens:build && npm run brands:build && npm run marketing:theme && npm run assets:build && npm run marketing:build && npm run example:install",
     "test:tokens": "node --test tests/token-compiler.test.mjs",
     "test:browser": "playwright test",
     "test:a11y": "playwright test tests/browser/accessibility.spec.mjs",
     "test:runtime": "node --test tests/zero-runtime.test.mjs",
-    "check": "npm run build && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:package && npm run test:browser",
+    "motion:audit": "node tools/motion-audit.mjs",
+    "test:motion": "node --test tests/motion-audit.test.mjs tests/motion-gate.test.mjs && node tools/motion-audit.mjs --strict",
+    "check": "npm run build && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:motion && npm run test:marketing && npm run test:character-grid && npm run test:figma && npm run test:css && npm run test:package && npm run test:browser",
     "site:build": "npm run build && node tools/build-site.mjs",
     "site:test": "node --test tests/site-build.test.mjs",
     "site:check": "npm run site:build && npm run site:test && npm run site:mobile",
     "site:mobile": "playwright test --config=playwright.site.config.mjs",
     "pack:verify": "npm run build && npm pack --dry-run",
     "test:package": "node --test tests/package-contract.test.mjs",
+    "test:css": "node --test tests/css-source.test.mjs",
     "brands:build": "dotnet run --project tools/BrandCompiler/BrandCompiler.fsproj -- brands dist/brands",
-    "test:brands": "node --test tests/brand-compiler.test.mjs"
+    "test:brands": "node --test tests/brand-compiler.test.mjs",
+    "test:character-grid": "node --test tests/character-grid.test.mjs",
+    "marketing:theme": "dotnet run --project tools/TokenCompiler/TokenCompiler.fsproj -- themes/echelon/marketing.tokens.json build/marketing/echelon-marketing.tokens.css --reference tokens/echelon.tokens.json",
+    "marketing:build": "dotnet run --project tools/PresentationBundler/PresentationBundler.fsproj -- bundles/echelon-marketing.bundle.json package.json",
+    "test:marketing": "node --test tests/marketing-tokens.test.mjs tests/marketing-distribution.test.mjs tests/marketing-structure.test.mjs tests/site-css-policy.test.mjs",
+    "example:install": "mkdir -p build/example && cp examples/echelon-marketing-site/forma.lock build/example/forma.lock && bash actions/install-presentation/install.sh --lock build/example/forma.lock --source dist/marketing --update --output examples/echelon-marketing-site/assets/forma",
+    "policy:check": "dotnet run --project tools/SiteCssPolicy/SiteCssPolicy.fsproj --",
+    "release:check": "npm run build && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:motion && npm run test:marketing && npm run test:character-grid && npm run test:css && npm run test:package && playwright test tests/browser/marketing.spec.mjs && npm run site:check",
+    "test:figma": "node --test tests/figma-contract.test.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
@@ -56,5 +76,11 @@
     "type": "git",
     "url": "git+https://github.com/kemiller2002/forma.git"
   },
-  "homepage": "https://forma.echelonfoundry.com/"
+  "homepage": "https://forma.echelonfoundry.com/",
+  "keywords": [
+    "design-system",
+    "zero-runtime",
+    "marketing-presentation",
+    "accessibility"
+  ]
 }

package/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/patterns/aegis-faults.manifest.md

@@ -0,0 +1,81 @@
+# Feature Manifest — Aegis fault presentation
+
+## Purpose
+
+Provide the canonical Forma presentation vocabulary for user-facing Aegis faults without making Forma understand, store, classify, recover, or authorize a raw Aegis `Fault`.
+
+## Upstream contract
+
+The default integration input is the safe Aegis `Presentation.T` model:
+
+- `Title`
+- `Message`
+- `Severity`
+- `Intent`
+- `Actions`
+- `Reference`
+
+The full Aegis `Fault` record is not a Forma input contract.
+
+## Intent mapping
+
+- `Silent`: render no visible fault surface.
+- `Inline`: `.ef-fault--inline` / `<ef-fault-inline>`.
+- `Notification`: `.ef-fault-notification` / `<ef-fault-notification>`.
+- `Banner`: `.ef-fault-banner` / `<ef-fault-banner>`.
+- `Blocking`: `.ef-fault-blocking` / `<ef-fault-blocking>`.
+
+`<ef-fault>` is the common visual shell. The intent-specific patterns are preferred when the Aegis intent is already known.
+
+## Ownership
+
+- Aegis owns fault classification, presentation intent, severity, recovery policy, safe user message, reference, lifecycle, throttling, and recovery capability derivation.
+- Ordo/application state owns whether a recovery transition is currently legal.
+- Limen/application behavior maps Aegis data into DOM, handles clicks, focus, notification lifecycle, blocking-dialog policy, copy behavior, and revalidates capabilities before executing them.
+- Forma owns semantic markup, CSS, non-color cues, responsive composition, focus styling, reduced-motion behavior, and forced-colors behavior.
+
+## Security boundary
+
+Do not pass the raw Aegis `Fault`, `TechnicalDetails`, `ExceptionDetail`, stack trace, raw context values, breadcrumbs, snapshot locations, secrets, or unredacted diagnostics into these patterns.
+
+`fault-details` is not an escape hatch. It accepts only data that the application has explicitly approved and sanitized for the current audience.
+
+## Recovery action contract
+
+Buttons use `data-ef-aegis-capability` with the exact Aegis capability name. The attribute is descriptive, not authoritative. The consuming application must re-check current capability/state at activation time.
+
+Canonical labels mirror Aegis:
+
+- `CanRetry` → Try again
+- `CanReauthenticate` → Sign in
+- `CanReload` → Reload
+- `CanQuarantine` → Set aside
+- `CanReprocess` → Process again
+- `CanOpenReadOnly` → Open read-only
+- `CanRestoreSink` → Reconnect diagnostics
+
+Never synthesize `Continue anyway` or another action that Aegis/application state did not supply.
+
+## Notification policy
+
+Forma does not run timers. Fault notifications with recovery actions are persistent until the application dismisses/resolves them. An application that chooses timed dismissal for non-actionable information must preserve an accessible durable history or equivalent recovery path and pause/extend timing when required by accessibility policy.
+
+## Summary and repeat policy
+
+Forma does not fingerprint or deduplicate faults. Aegis/application code performs lifecycle/fingerprint logic and supplies already-grouped entries plus occurrence counts. The summary pattern only presents that result.
+
+## Blocking policy
+
+The blocking pattern uses native `dialog` as the semantic surface. Limen/application code is responsible for opening it modally, handling browser close/cancel requests according to current Aegis/Ordo state, keeping legal recovery actions reachable, and restoring focus after resolution.
+
+## Verification
+
+The feature is covered by:
+
+- zero-runtime package checks;
+- generated-site coverage and 320px mobile examples;
+- Axe WCAG A/AA checks;
+- accessible-name/role tests;
+- recovery capability attribute tests;
+- mobile overflow tests;
+- pull-request CI across the repository validation workflows.

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