@echelon-foundry/design-system 0.3.0 → 0.4.0-main.222.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.3.0",
+  "version": "0.4.0-main.222.1",
   "private": false,
   "type": "module",
   "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
@@ -23,7 +23,12 @@
     "./marketing.css": "./dist/marketing.css",
     "./marketing/*": "./dist/marketing/*",
     "./tokens.json": "./tokens/echelon.tokens.json",
-    "./figma/components.json": "./figma/component-contracts.json"
+    "./figma/components.json": "./figma/component-contracts.json",
+    "./contracts/diagram-presentation.json": "./contracts/diagram-presentation.json",
+    "./workflow/forma-workflow.schema.json": "./schemas/workflow/1.0/forma-workflow.schema.json",
+    "./contracts/workflow-capabilities.json": "./contracts/workflow-capabilities.json",
+    "./workflow/examples/*": "./examples/workflows/forma/workflows/*",
+    "./contracts/machine-operability.json": "./contracts/machine-operability.json"
   },
   "files": [
     "dist",
@@ -32,7 +37,14 @@
     "docs/BRANDING.md",
     "docs/MARKETING-SITES.md",
     "tokens/echelon.tokens.json",
-    "figma/component-contracts.json"
+    "figma/component-contracts.json",
+    "contracts/diagram-presentation.json",
+    "schemas/workflow/1.0/forma-workflow.schema.json",
+    "contracts/workflow-capabilities.json",
+    "examples/workflows/forma/workflows",
+    "examples/workflows/fixtures.json",
+    "docs/workflow",
+    "contracts/machine-operability.json"
   ],
   "scripts": {
     "clean": "node tools/clean.mjs",
@@ -45,14 +57,14 @@
     "test:runtime": "node --test tests/zero-runtime.test.mjs",
     "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",
+    "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 workflow:test && npm run workflow:build && npm run test:workflow-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:test": "node --test tests/site-build.test.mjs tests/catalog-coverage.test.mjs",
+    "site:check": "npm run site:build && npm run catalog:check && 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",
+    "test:css": "node --test tests/css-source.test.mjs tests/diagram-contract.test.mjs",
     "brands:build": "dotnet run --project tools/BrandCompiler/BrandCompiler.fsproj -- brands dist/brands",
     "test:brands": "node --test tests/brand-compiler.test.mjs",
     "test:character-grid": "node --test tests/character-grid.test.mjs",
@@ -61,8 +73,17 @@
     "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"
+    "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 && npm run test:machine && playwright test tests/browser/marketing.spec.mjs && npm run site:check",
+    "test:figma": "node --test tests/figma-contract.test.mjs",
+    "catalog:check": "node tools/catalog/validate.mjs && node tools/catalog/inventory.mjs --check",
+    "catalog:inventory": "node tools/catalog/inventory.mjs",
+    "workflow:test": "dotnet run --project tests/workflow/Forma.Workflow.Tests -c Release",
+    "workflow:build": "node tools/build-workflow-package.mjs",
+    "workflow:validate": "dotnet run --project src/workflow/Forma.Workflow.Cli -c Release -- validate examples/workflows/forma/workflows/*.forma-workflow.json",
+    "test:workflow-package": "node --test tests/workflow-package.test.mjs",
+    "test:workflow-browser": "playwright test tests/browser/workflow-static.spec.mjs tests/browser/workflow-embed.spec.mjs",
+    "workflow:check": "npm run workflow:test && npm run workflow:build && npm run test:workflow-package && npm run test:workflow-browser",
+    "test:machine": "playwright test tests/browser/machine-operability.spec.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
@@ -81,6 +102,8 @@
     "design-system",
     "zero-runtime",
     "marketing-presentation",
-    "accessibility"
+    "accessibility",
+    "workflow",
+    "machine-operability"
   ]
 }

package/patterns/bounded-overflow.html

@@ -0,0 +1,9 @@
+<div class="ef-bounded-overflow" role="region" aria-label="Quarterly totals by region" tabindex="0">
+  <table>
+    <thead><tr><th scope="col">Region</th><th scope="col">Q1</th><th scope="col">Q2</th><th scope="col">Q3</th><th scope="col">Q4</th><th scope="col">Year</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">North America</th><td>1,204,000</td><td>1,318,500</td><td>1,402,250</td><td>1,511,000</td><td>5,435,750</td></tr>
+      <tr><th scope="row">Europe</th><td>904,100</td><td>931,000</td><td>1,010,400</td><td>1,120,900</td><td>3,966,400</td></tr>
+    </tbody>
+  </table>
+</div>

package/patterns/button.html

@@ -0,0 +1,5 @@
+<div class="ef-actions">
+  <button type="submit">Save changes</button>
+  <button type="button">Cancel</button>
+  <a class="ef-button" href="#button-help">Read the help article</a>
+</div>

package/patterns/container.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <div class="ef-container" data-ef-width="narrow">
+    <h2>Privacy notice</h2>
+    <p>Narrow containers keep reading-focused regions at a comfortable measure while the page background stays full width.</p>
+  </div>
+</div>

package/patterns/date-time-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="date-time-field-due">Due date</label>
+  <span class="ef-field__description" id="date-time-field-due-description">The browser supplies its own date picker; typing the date also works.</span>
+  <input id="date-time-field-due" name="due" type="date" aria-describedby="date-time-field-due-description">
+</div>

package/patterns/grid.html

@@ -0,0 +1,5 @@
+<ul class="ef-grid" aria-label="Environments" role="list">
+  <li class="ef-surface"><h3>Production</h3><p>12 services, all reporting.</p></li>
+  <li class="ef-surface"><h3>Staging</h3><p>12 services, 1 deploying.</p></li>
+  <li class="ef-surface"><h3>Development</h3><p>9 services, 3 idle.</p></li>
+</ul>

package/patterns/image-choice.html

@@ -4,7 +4,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="compact" required>
     <span class="ef-choice__media">
-      <img src="/path/to/compact-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='21' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='32' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='43' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='54' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='65' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='76' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Compact layout</strong>
@@ -15,7 +15,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="spacious">
     <span class="ef-choice__media">
-      <img src="/path/to/spacious-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='34' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='58' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Spacious layout</strong>

package/patterns/key-value-list.html

@@ -0,0 +1,5 @@
+<dl class="ef-key-value-list">
+  <div><dt>Account</dt><dd>Northwind Logistics</dd></div>
+  <div><dt>Plan</dt><dd>Team, billed annually</dd></div>
+  <div><dt>Renewal</dt><dd><time datetime="2027-03-01">1 March 2027</time></dd></div>
+</dl>

package/patterns/section.html

@@ -0,0 +1,4 @@
+<section class="ef-section" aria-labelledby="section-title">
+  <h2 id="section-title">Recent activity</h2>
+  <p>Sections separate page regions with a consistent block rhythm.</p>
+</section>

package/patterns/skip-link.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <a class="ef-skip-link" href="#skip-link-main">Skip to main content</a>
+  <main id="skip-link-main" tabindex="-1">
+    <h1>Account settings</h1>
+  </main>
+</div>

package/patterns/spatial-canvas.html

@@ -5,8 +5,8 @@
   </header>
   <div class="ef-spatial-canvas__viewport" tabindex="0" aria-label="Scrollable system map">
     <div class="ef-spatial-canvas__surface">
-      <article class="ef-surface"><h3>Billing</h3><p>Selected node</p></article>
-      <article class="ef-surface"><h3>Chrona</h3><p>Time source</p></article>
+      <article class="ef-surface" id="billing"><h3>Billing</h3><p>Selected node</p></article>
+      <article class="ef-surface" id="chrona"><h3>Chrona</h3><p>Time source</p></article>
     </div>
   </div>
   <details class="ef-spatial-canvas__index"><summary>Objects in this view</summary><nav aria-label="Canvas objects"><a href="#billing">Billing</a><a href="#chrona">Chrona</a></nav></details>

package/patterns/split.html

@@ -0,0 +1,12 @@
+<div class="ef-site">
+  <div class="ef-split">
+    <div>
+      <h2>Install</h2>
+      <p>The primary region takes the available space. The supporting region wraps below it when the row runs out of room.</p>
+    </div>
+    <aside aria-label="Requirements">
+      <h3>Requirements</h3>
+      <p>Node 22 or later.</p>
+    </aside>
+  </div>
+</div>

package/patterns/surface.html

@@ -0,0 +1,4 @@
+<section class="ef-surface" aria-labelledby="surface-title">
+  <h2 id="surface-title">Billing contact</h2>
+  <p>Invoices are sent to the finance team on the first business day of each month.</p>
+</section>

package/patterns/text-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="text-field-email">Work email</label>
+  <span class="ef-field__description" id="text-field-email-description">We send sign-in links to this address.</span>
+  <input id="text-field-email" name="email" type="email" autocomplete="email" aria-describedby="text-field-email-description" required>
+</div>

package/patterns/text-roles.html

@@ -0,0 +1,7 @@
+<div class="ef-site">
+  <p class="ef-eyebrow">Release 0.3</p>
+  <h2>Faster onboarding for new teams</h2>
+  <p class="ef-lead">A lead paragraph introduces the section in one or two sentences.</p>
+  <blockquote class="ef-statement"><p>Forma keeps behavior in the application and presentation in the design system.</p></blockquote>
+  <span class="ef-component-kicker">Component kicker</span>
+</div>

package/patterns/textarea.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="textarea-summary">Change summary</label>
+  <span class="ef-field__description" id="textarea-summary-description">Describe what changed and why. Plain text, up to 500 characters.</span>
+  <textarea id="textarea-summary" name="summary" rows="4" maxlength="500" aria-describedby="textarea-summary-description"></textarea>
+</div>

package/patterns/visually-hidden.html

@@ -0,0 +1,4 @@
+<button type="button">
+  <span aria-hidden="true">×</span>
+  <span class="ef-visually-hidden">Remove filter: Region is Europe</span>
+</button>