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

package/dist/patterns/toast.html

@@ -0,0 +1,10 @@
+<button type="button" popovertarget="save-notification" popovertargetaction="show">Show notification</button>
+<aside class="ef-toast" id="save-notification" popover="manual" role="status" data-ef-motion-weight="standard">
+  <div class="ef-toast__header">
+    <div>
+      <h3 class="ef-toast__title">Changes saved</h3>
+      <p>The current draft is stored.</p>
+    </div>
+    <button type="button" popovertarget="save-notification" popovertargetaction="hide" aria-label="Dismiss notification">Close</button>
+  </div>
+</aside>

package/dist/patterns/understanding.html

@@ -0,0 +1,32 @@
+<section class="ef-understanding" aria-labelledby="understanding-title">
+  <header class="ef-understanding__header">
+    <div>
+      <span class="ef-component-kicker">Understanding</span>
+      <h2 id="understanding-title">I found 4 things</h2>
+      <p>Review what the application understood before any consequential transition.</p>
+    </div>
+    <span class="ef-status-lozenge" data-state="attention">1 question</span>
+  </header>
+  <ol class="ef-understanding__items">
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Medication change</strong><p>Medication increased to 40 mg.</p></div>
+      <button type="button">Source</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Symptom</strong><p>Ankle swelling returned.</p></div>
+      <button type="button">Source</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="unknown">
+      <span class="ef-understanding__state">Unknown</span>
+      <div><strong>Medication frequency</strong><p>The dose frequency was not supplied.</p></div>
+      <button type="button">Answer</button>
+    </li>
+    <li class="ef-understanding__item" data-ef-state="accepted">
+      <span class="ef-understanding__state">Understood</span>
+      <div><strong>Visit</strong><p>Dr. Smith visit occurred yesterday.</p></div>
+      <button type="button">Source</button>
+    </li>
+  </ol>
+</section>

package/dist/patterns/validation-message.html

@@ -0,0 +1,4 @@
+<p class="ef-validation-message" id="question-example-error">
+  <span class="ef-validation-message__mark" aria-hidden="true">!</span>
+  Choose one response before continuing.
+</p>

package/dist/patterns/validation-summary.html

@@ -0,0 +1,10 @@
+<div class="ef-validation-summary" role="alert" tabindex="-1" aria-labelledby="validation-summary-title">
+  <div class="ef-validation-summary__icon" aria-hidden="true">!</div>
+  <div>
+    <h2 class="ef-validation-summary__title" id="validation-summary-title">There are 2 responses to review</h2>
+    <ul class="ef-validation-summary__list">
+      <li><a href="#question-security">Question 4 requires a response.</a></li>
+      <li><a href="#question-allocation">Question 8 must total 10 points.</a></li>
+    </ul>
+  </div>
+</div>

package/dist/patterns/wizard.html

@@ -0,0 +1,19 @@
+<section class="ef-wizard" aria-labelledby="wizard-title">
+  <header class="ef-wizard__header">
+    <div><span class="ef-wizard__position">Step 2 of 4</span><h3 id="wizard-title">Review details</h3></div>
+    <progress value="2" max="4" aria-label="Workflow progress">2 of 4</progress>
+  </header>
+  <ol class="ef-wizard__steps" aria-label="Workflow steps">
+    <li data-state="complete"><span>1</span>Details</li>
+    <li data-state="current" aria-current="step"><span>2</span>Review</li>
+    <li><span>3</span>Validate</li>
+    <li><span>4</span>Publish</li>
+  </ol>
+  <div class="ef-wizard__body">
+    <p>Confirm the supplied information before continuing.</p>
+  </div>
+  <footer class="ef-wizard__actions">
+    <button type="button">Back</button>
+    <button type="button">Continue</button>
+  </footer>
+</section>

package/dist/patterns/work-queue.html

@@ -0,0 +1,20 @@
+<section class="ef-work-queue" aria-labelledby="work-queue-title">
+  <header class="ef-work-queue__header">
+    <div><span class="ef-component-kicker">Attention</span><h3 id="work-queue-title">Needs your attention</h3></div>
+    <span class="ef-status-lozenge">3 items</span>
+  </header>
+  <ol class="ef-work-queue__list">
+    <li class="ef-work-queue__item">
+      <div><strong>Invoice INV-1042 is overdue</strong><p>32 days overdue · Customer follow-up is available.</p></div>
+      <button type="button">Review</button>
+    </li>
+    <li class="ef-work-queue__item">
+      <div><strong>Write outcome is unknown</strong><p>Reconcile before retrying or assuming failure.</p></div>
+      <button type="button">Reconcile</button>
+    </li>
+    <li class="ef-work-queue__item">
+      <div><strong>Publication validation has warnings</strong><p>2 warnings require review before publishing.</p></div>
+      <button type="button">Inspect</button>
+    </li>
+  </ol>
+</section>

package/dist/skins.css

@@ -0,0 +1,29 @@
+/* Intentionally unlayered: opt-in skins override layered brand/token presentation primitives. */
+  [data-ef-skin="compact"] {
+    --ef-primitive-spacing-1: 3px;
+    --ef-primitive-spacing-2: 6px;
+    --ef-primitive-spacing-3: 9px;
+    --ef-primitive-spacing-4: 12px;
+    --ef-primitive-spacing-5: 18px;
+    --ef-primitive-spacing-6: 24px;
+    --ef-primitive-spacing-7: 36px;
+    --ef-primitive-spacing-8: 48px;
+    --ef-primitive-radius-small: 3px;
+    --ef-primitive-radius-medium: 6px;
+  }
+
+  [data-ef-skin="comfortable"] {
+    --ef-primitive-spacing-1: 5px;
+    --ef-primitive-spacing-2: 10px;
+    --ef-primitive-spacing-3: 15px;
+    --ef-primitive-spacing-4: 20px;
+    --ef-primitive-spacing-5: 30px;
+    --ef-primitive-spacing-6: 40px;
+    --ef-primitive-spacing-7: 60px;
+    --ef-primitive-spacing-8: 80px;
+  }
+
+  [data-ef-skin="square"] {
+    --ef-primitive-radius-small: 0;
+    --ef-primitive-radius-medium: 0;
+  }

package/dist/tokens.css

@@ -0,0 +1,99 @@
+/* Generated from tokens/echelon.tokens.json. Do not edit directly. */
+@layer echelon.tokens {
+  :root {
+  --ef-primitive-color-carbon: #171a18;
+  --ef-primitive-color-forged-iron: #3a403c;
+  --ef-primitive-color-foundry-charcoal: #202421;
+  --ef-primitive-color-graphite: #686d68;
+  --ef-primitive-color-oxide-bronze: #905831;
+  --ef-primitive-color-oxide-bronze-light: #a87e5e;
+  --ef-primitive-color-parchment: #f2efe7;
+  --ef-primitive-color-stone: #e3e0d7;
+  --ef-primitive-color-verdigris: #47756b;
+  --ef-primitive-color-verdigris-light: #698d84;
+  --ef-primitive-font-family-display: Newsreader, Georgia, serif;
+  --ef-primitive-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --ef-primitive-font-family-sans: Manrope, system-ui, sans-serif;
+  --ef-primitive-motion-duration-fast: 120ms;
+  --ef-primitive-motion-duration-instant: 0ms;
+  --ef-primitive-motion-duration-slow: 280ms;
+  --ef-primitive-motion-duration-standard: 180ms;
+  --ef-primitive-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ef-primitive-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ef-primitive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ef-primitive-radius-medium: 8px;
+  --ef-primitive-radius-none: 0px;
+  --ef-primitive-radius-pill: 999px;
+  --ef-primitive-radius-small: 4px;
+  --ef-primitive-spacing-1: 4px;
+  --ef-primitive-spacing-2: 8px;
+  --ef-primitive-spacing-3: 12px;
+  --ef-primitive-spacing-4: 16px;
+  --ef-primitive-spacing-5: 24px;
+  --ef-primitive-spacing-6: 32px;
+  --ef-primitive-spacing-7: 48px;
+  --ef-primitive-spacing-8: 64px;
+}
+  :root, [data-ef-theme="light"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #47756b;
+  --ef-color-border-functional: #3a403c;
+  --ef-color-border-subtle: #e3e0d7;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #f2efe7;
+  --ef-color-focus-ring: #171a18;
+  --ef-color-surface-inverse: #202421;
+  --ef-color-surface-inverse-secondary: #3a403c;
+  --ef-color-surface-primary: #f2efe7;
+  --ef-color-surface-secondary: #e3e0d7;
+  --ef-color-text-heading: #202421;
+  --ef-color-text-inverse: #f2efe7;
+  --ef-color-text-on-secondary-surface: #3a403c;
+  --ef-color-text-primary: #171a18;
+  --ef-color-text-secondary: #686d68;
+}
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-ef-theme]) {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  }
+  [data-ef-theme="dark"] {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+}

package/docs/BRANDING.md

@@ -0,0 +1,148 @@
+# Forma Branding and Skinning
+
+Forma treats branding and skinning as separate presentation contracts.
+
+- A **brand** changes identity and brand-level design tokens.
+- A **skin** changes presentation density/shape without changing identity.
+- Neither contract owns application behavior or domain state.
+
+## Brand Manifest
+
+Create a JSON manifest that conforms to `schemas/brand-manifest.schema.json`.
+Repository-owned manifests live in `brands/*.brand.json`.
+
+A manifest contains a stable brand ID, identity metadata, optional typography
+and shape values, complete light/dark semantic colors, and optional application
+terminology.
+
+The manifest is data. Do not place CSS, script, credentials, or executable
+configuration in it.
+
+## Build
+
+Compile all repository brand manifests with:
+
+```bash
+npm run brands:build
+```
+
+The F# compiler writes static files to:
+
+```text
+dist/brands/<brand-id>.css
+dist/brands/index.json
+```
+
+Invalid six-digit colors, unsafe font values, invalid dimensions, unsupported
+schema versions, or insufficient required contrast fail the build.
+
+## Load and apply a brand
+
+Load Forma first, then the desired generated brand CSS:
+
+```html
+<link rel="stylesheet" href="/forma/all.css">
+<link rel="stylesheet" href="/forma/brands/acme.css">
+```
+
+Apply the brand at the document root:
+
+```html
+<html data-ef-brand="acme">
+```
+
+or to a subtree:
+
+```html
+<section data-ef-brand="acme">
+  <!-- canonical Forma markup -->
+</section>
+```
+
+Because brands override the same documented `--ef-*` variables consumed by
+Forma, canonical component markup does not change.
+
+Multiple brand scopes can coexist on one page. This is useful for previews,
+embedded products, partner portals, accessibility comparison, and design-system
+testing.
+
+## Themes
+
+Forma still uses `data-ef-theme="light"` and `data-ef-theme="dark"`.
+The brand compiler emits both semantic maps and also honors operating-system dark
+preference when an explicit theme is absent.
+
+```html
+<section data-ef-brand="acme" data-ef-theme="dark">
+  ...
+</section>
+```
+
+Theme selection or persistence at runtime belongs to the consuming application,
+normally through Limen. Forma only supplies the static presentation contract.
+
+## Skins
+
+`dist/skins.css` defines the initial zero-runtime skin presets:
+
+- `compact`
+- `comfortable`
+- `square`
+
+Use a skin independently of brand:
+
+```html
+<main data-ef-brand="acme" data-ef-skin="compact">
+  ...
+</main>
+```
+
+A skin must not change labels, identity, permissions, workflow, validation,
+scoring, or domain state.
+
+## Terminology and assets
+
+Brand terminology and identity assets are intentionally not converted into CSS.
+Applications/build tooling consume those fields because they affect content and
+metadata rather than component presentation.
+
+This keeps a strong boundary:
+
+```text
+Brand Manifest
+  ├─ identity / assets / terms -> application/build adapters
+  └─ presentation             -> BrandCompiler -> scoped CSS variables
+
+Skin
+  └─ presentation only        -> skins.css
+
+Application / Limen
+  └─ runtime selection, persistence, remote loading, preview behavior
+
+Ordo / domain
+  └─ legal state and transitions
+```
+
+## Accessibility
+
+The brand compiler currently validates the relationships that are most likely to
+make a branded interface unreadable: primary and secondary text, text on
+secondary surfaces, inverse text, primary/secondary accents, and focus rings.
+
+A failed brand does not get a best-effort output. Fix the manifest and compile
+again.
+
+Forced-colors behavior and non-color state cues remain part of Forma's existing
+component accessibility contract.
+
+## White-labeling rules for applications
+
+Applications should not fork Forma component CSS just to implement customer
+branding. Add or update a Brand Manifest and consume its generated CSS.
+
+Arbitrary customer CSS is not the supported extension mechanism. Internal
+component structure is not a theming API.
+
+If a required presentation concept cannot be expressed through the current
+manifest/token contract, record the gap in Forma and extend the public contract
+deliberately.

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@echelon-foundry/design-system",
+  "version": "0.2.0-main.15.1",
+  "private": false,
+  "type": "module",
+  "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
+  "sideEffects": [
+    "./dist/*.css",
+    "./dist/brands/*.css"
+  ],
+  "exports": {
+    "./tokens.css": "./dist/tokens.css",
+    "./foundations.css": "./dist/foundations.css",
+    "./components.css": "./dist/components.css",
+    "./all.css": "./dist/all.css",
+    "./patterns/*": "./dist/patterns/*",
+    "./assessment.css": "./dist/assessment.css",
+    "./skins.css": "./dist/skins.css",
+    "./brands/*": "./dist/brands/*",
+    "./brand-manifest.schema.json": "./schemas/brand-manifest.schema.json"
+  },
+  "files": [
+    "dist",
+    "patterns",
+    "schemas/brand-manifest.schema.json",
+    "docs/BRANDING.md"
+  ],
+  "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",
+    "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",
+    "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",
+    "brands:build": "dotnet run --project tools/BrandCompiler/BrandCompiler.fsproj -- brands dist/brands",
+    "test:brands": "node --test tests/brand-compiler.test.mjs"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.13.0",
+    "@playwright/test": "1.63.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kemiller2002/forma.git"
+  },
+  "homepage": "https://forma.echelonfoundry.com/"
+}

package/patterns/alert.html

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

package/patterns/allocation.html

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

package/patterns/assessment.manifest.md

@@ -0,0 +1,93 @@
+# Feature Manifest — Assessment and workflow patterns
+
+## Purpose
+
+Provide reusable semantic markup and CSS for assessment, decision, validation, and Ordo-style unresolved-work presentation without embedding application behavior.
+
+## Ownership
+
+- State, including presentation state: native radio/checkbox/number/progress state plus application-rendered `data-ef-*` state
+- Transitions / commands / messages: native HTML events only for declarative controls; ranking/allocation/rule-builder behavior belongs to Limen/application code
+- Invariants and guards: semantic form grouping, accessible names, non-color state cues, special answer separation, zero-runtime boundary
+- Capabilities / authority: none — Signal/Ordo/application owns applicability, scoring, validation, capabilities, obligations, and completion
+- Important effects and effect contracts: none
+
+## Interfaces
+
+### Declarative patterns
+
+- `.ef-question`
+- `.ef-ordinal-scale`
+- `.ef-choice-group`
+- `.ef-special-choices`
+- `.ef-validation-message`
+- `.ef-validation-summary`
+- `.ef-survey-progress`
+- `.ef-obligation-panel`
+- `.ef-binary-choice`
+- `.ef-semantic-differential`
+- `.ef-symbol-rating`
+- `.ef-numeric-stepper`
+- `.ef-range-entry`
+- `.ef-choice--media`
+- `.ef-matrix`
+- `.ef-pairwise`
+- `.ef-best-worst`
+- `.ef-hierarchy`
+
+### Behavior-required visual contracts
+
+- `.ef-ranking`
+- `.ef-allocation` aggregate validation
+- `.ef-rule-builder`
+- graphical dual-thumb range interaction
+- best/worst cross-column exclusion
+- multi-choice cardinality/exclusive-option enforcement
+- matrix global constraints
+- hierarchical cascading/parent-child policy
+
+## Tests and verification
+
+- browser behavior: `tests/browser/assessment.spec.mjs`
+- automated accessibility: `tests/browser/accessibility.spec.mjs`
+- zero-runtime boundary: `tests/zero-runtime.test.mjs`
+- responsive ordinal presentation: browser test at narrow viewport
+
+## Dependencies
+
+- allowed direct dependencies: semantic tokens, foundations, assessment CSS
+- required composition context: consuming application supplies domain state and Limen behavior where documented
+
+## Modification boundaries
+
+Normal:
+
+- `patterns/question.html`
+- `patterns/ordinal-scale.html`
+- `patterns/choice-group.html`
+- `patterns/special-choice.html`
+- `patterns/validation-*.html`
+- `patterns/survey-progress.html`
+- `patterns/ranking.html`
+- `patterns/allocation.html`
+- `patterns/rule-builder.html`
+- `patterns/obligation-panel.html`
+- `src/styles/assessment.css`
+- related tests/docs
+
+Escalation required:
+
+- adding executable behavior to the package;
+- creating scoring semantics from presentation;
+- replacing native radio/checkbox semantics;
+- collapsing Unknown, Not Applicable, and ordinal values into one visual continuum;
+- making drag the only ranking path;
+- using a checkbox switch where Unanswered must remain distinct from false;
+- treating NPS/Likert/star/icon labels as scoring authority;
+- requiring horizontal scrolling as the only matrix mobile interaction.
+
+## Maintenance
+
+- Owner: Echelon Foundry design system
+- First demanding consumer: Echelon Signal
+- Last checked against implementation: 2026-09-22

package/patterns/best-worst.html

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

package/patterns/binary-choice.html

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

package/patterns/checkbox.html

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

package/patterns/choice-group.html

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