@echelon-foundry/design-system 0.7.0 → 0.8.0-main.250.1

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-171d3cb1485da7a9f83f6bdfc80c8043b0d194a32eadc3e0b5e09b12fade2f80  forma-marketing.css
-027334d7946a3342812dca297967630cb5f5b1e96dd849672c8e146bf257b153  forma-marketing-theme-echelon.css
-2baacb6423cc930e15b1da5cbf39289bed5bd3c721e35ef2e97cb73f48c0c0fc  forma-echelon-marketing.css
-5aae64c6fa2e8784347b2207fe7324dae2492a5f45f6b134463e243f419b4dec  forma-all.css
+3089398445d5898cdae9cc0dc2ec4629e8130a1a885291d9ae1bfdf9141dab48  forma-marketing.css
+970b7986b609331c1bc12d51173c8e185f48906df5d8b2fcc585c3187be3e9fd  forma-marketing-theme-echelon.css
+ee17288af3ae5ba708b8fd1b471835a14ea93da588a39206dcc27db2ee2f98ba  forma-echelon-marketing.css
+93cafe35f219e7297b8ad5cd8b3a22ad660e753a2ce247c0709eb75281701cad  forma-all.css

package/dist/patterns/form.html

@@ -0,0 +1,19 @@
+<form class="ef-form" id="nasa-mission-customer" method="get" action="#nasa-mission-customer-saved" aria-labelledby="nasa-mission-customer-title">
+<h2 id="nasa-mission-customer-title">Artemis mission customer contact</h2>
+<div class="ef-form-row" data-ef-form-layout="grid">
+  <div class="ef-field">
+  <label class="ef-field__label" for="nasa-mission-contact-name">Mission contact name (required)</label>
+  <span class="ef-field__description" id="nasa-mission-contact-name-description">Primary contact for Artemis II payload coordination.</span>
+  <input type="text" id="nasa-mission-contact-name" name="contact-name" required autocomplete="name" value="Reid Wiseman" aria-describedby="nasa-mission-contact-name-description nasa-mission-contact-name-error">
+  <p class="ef-validation-message ef-validation-message--when-invalid" id="nasa-mission-contact-name-error"><span class="ef-validation-message__mark" aria-hidden="true">!</span>Enter the mission contact name.</p>
+  </div>
+  <div class="ef-field">
+  <label class="ef-field__label" for="nasa-mission-contact-email">Mission contact email (required)</label>
+  <span class="ef-field__description" id="nasa-mission-contact-email-description">Use the monitored address for launch-window updates.</span>
+  <input type="email" id="nasa-mission-contact-email" name="contact-email" required autocomplete="email" inputmode="email" value="artemis-ii@nasa.gov" aria-describedby="nasa-mission-contact-email-description nasa-mission-contact-email-error">
+  <p class="ef-validation-message ef-validation-message--when-invalid" id="nasa-mission-contact-email-error"><span class="ef-validation-message__mark" aria-hidden="true">!</span>Enter an email address such as name@nasa.gov.</p>
+  </div>
+</div>
+<div class="ef-actions"><button type="submit">Save customer</button><button type="reset">Reset form</button></div>
+<p class="ef-form__outcome" id="nasa-mission-customer-saved" role="status" aria-label="Save status">Mission customer contact saved.</p>
+</form>

package/docs/DESIGN-CONTRACT.md

@@ -0,0 +1,48 @@
+# Forma design contract 1.0
+
+Forma's design contract is an optional build-time guardrail for producing the same semantic HTML documented in the component catalog. It does not add a browser runtime and it does not replace ordinary HTML/CSS authoring.
+
+## Validate and render
+
+```sh
+npm run design:validate
+node tools/design-contract/cli.mjs validate examples/design/valid/customer-form.forma-design.json
+node tools/design-contract/cli.mjs render examples/design/valid/customer-form.forma-design.json
+```
+
+`validate` exits nonzero and prints stable diagnostic codes and JSON paths when a document is invalid. `render` validates first and emits no HTML on failure. The published JSON Schema supplies structural validation; the CLI adds contextual rules such as parent-child legality, ID references, standard-mode alignment, action binding, and feedback targets.
+
+## Modes
+
+- `standard`: documented semantics only. Grid fields align, overflow wraps, actions bind to native submit/reset, and raw overrides are refused.
+- `extended`: the same invariants plus namespaced extension data such as `acme:chart`.
+- `custom`: requires `customReason` and non-empty `validationEvidence`; it is auditable, not an accessibility bypass.
+
+## Supported form structure
+
+```text
+form
+├── layout (stack | grid)
+│   └── field (native control)
+├── actions
+│   └── action (form.submit | form.reset)
+└── feedback
+```
+
+The reference customer form uses a responsive grid with two peer fields, native email validation, Save and Reset commands, and URL-targeted save feedback. At narrow container widths the grid becomes a stack without changing DOM, reading, focus, or submission order.
+
+## Unsupported examples
+
+The fixtures under `examples/design/invalid/` are executable documentation:
+
+- `misaligned-standard-fields`: turns off peer alignment in standard mode;
+- `unsupported-standard-override`: injects raw presentation overrides;
+- `missing-action-binding`: supplies an action with no supported command;
+- `invalid-parent-child`: places an action inside a field layout;
+- `unsupported-version`: asks 1.0 tooling to guess a different contract.
+
+Each fails before rendering and identifies the exact correction. Unsupported contract versions must be migrated explicitly. Hand-authored Forma patterns remain compatible and do not have to adopt the contract.
+
+## Application boundary
+
+Forma can bind native submit and reset. Persistence, network requests, computed values, conditional application state, asynchronous feedback, authorization, and domain legality belong to Limen or the consuming application. Extended/custom contracts may preserve namespaced intent, but a renderer must report unavailable capabilities rather than emit a decorative no-op control.

package/examples/design/invalid/invalid-parent-child.forma-design.json

@@ -0,0 +1,36 @@
+{
+  "format": "forma.design",
+  "schemaVersion": "1.0.0",
+  "id": "invalid-parent-child",
+  "mode": "standard",
+  "compatibility": { "forma": ">=0.8.0 <1.0.0" },
+  "responsive": { "strategy": "container", "narrow": "stack", "minimumViewportCssPx": 320 },
+  "motion": { "profile": "none", "reducedMotion": "preserve-state" },
+  "root": {
+    "kind": "form",
+    "id": "parent-form",
+    "title": "Parent form",
+    "method": "get",
+    "action": "#saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "fields",
+        "model": "grid",
+        "alignControls": true,
+        "overflow": "wrap",
+        "children": [
+          { "kind": "action", "id": "save-in-fields", "label": "Save", "type": "submit", "binding": "form.submit" }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "actions",
+        "children": [
+          { "kind": "action", "id": "save", "label": "Save", "type": "submit", "binding": "form.submit" }
+        ]
+      },
+      { "kind": "feedback", "id": "saved", "label": "Save status", "message": "Saved." }
+    ]
+  }
+}

package/examples/design/invalid/misaligned-standard-fields.forma-design.json

@@ -0,0 +1,36 @@
+{
+  "format": "forma.design",
+  "schemaVersion": "1.0.0",
+  "id": "misaligned-fields",
+  "mode": "standard",
+  "compatibility": { "forma": ">=0.8.0 <1.0.0" },
+  "responsive": { "strategy": "container", "narrow": "stack", "minimumViewportCssPx": 320 },
+  "motion": { "profile": "none", "reducedMotion": "preserve-state" },
+  "root": {
+    "kind": "form",
+    "id": "bad-form",
+    "title": "Bad form",
+    "method": "get",
+    "action": "#saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "fields",
+        "model": "grid",
+        "alignControls": false,
+        "overflow": "wrap",
+        "children": [
+          { "kind": "field", "id": "name", "name": "name", "label": "Name", "control": { "kind": "text" } }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "actions",
+        "children": [
+          { "kind": "action", "id": "save", "label": "Save", "type": "submit", "binding": "form.submit" }
+        ]
+      },
+      { "kind": "feedback", "id": "saved", "label": "Save status", "message": "Saved." }
+    ]
+  }
+}

package/examples/design/invalid/missing-action-binding.forma-design.json

@@ -0,0 +1,35 @@
+{
+  "format": "forma.design",
+  "schemaVersion": "1.0.0",
+  "id": "missing-action-binding",
+  "mode": "standard",
+  "compatibility": { "forma": ">=0.8.0 <1.0.0" },
+  "responsive": { "strategy": "container", "narrow": "stack", "minimumViewportCssPx": 320 },
+  "motion": { "profile": "none", "reducedMotion": "preserve-state" },
+  "root": {
+    "kind": "form",
+    "id": "binding-form",
+    "title": "Binding form",
+    "method": "get",
+    "action": "#saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "fields",
+        "model": "stack",
+        "overflow": "wrap",
+        "children": [
+          { "kind": "field", "id": "name", "name": "name", "label": "Name", "control": { "kind": "text" } }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "actions",
+        "children": [
+          { "kind": "action", "id": "save", "label": "Save", "type": "submit" }
+        ]
+      },
+      { "kind": "feedback", "id": "saved", "label": "Save status", "message": "Saved." }
+    ]
+  }
+}

package/examples/design/invalid/unsupported-standard-override.forma-design.json

@@ -0,0 +1,36 @@
+{
+  "format": "forma.design",
+  "schemaVersion": "1.0.0",
+  "id": "raw-override",
+  "mode": "standard",
+  "compatibility": { "forma": ">=0.8.0 <1.0.0" },
+  "responsive": { "strategy": "container", "narrow": "stack", "minimumViewportCssPx": 320 },
+  "motion": { "profile": "none", "reducedMotion": "preserve-state" },
+  "root": {
+    "kind": "form",
+    "id": "override-form",
+    "title": "Override form",
+    "method": "get",
+    "action": "#saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "fields",
+        "model": "stack",
+        "overflow": "wrap",
+        "overrides": { "margin-left": "37px" },
+        "children": [
+          { "kind": "field", "id": "name", "name": "name", "label": "Name", "control": { "kind": "text" } }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "actions",
+        "children": [
+          { "kind": "action", "id": "save", "label": "Save", "type": "submit", "binding": "form.submit" }
+        ]
+      },
+      { "kind": "feedback", "id": "saved", "label": "Save status", "message": "Saved." }
+    ]
+  }
+}

package/examples/design/invalid/unsupported-version.forma-design.json

@@ -0,0 +1,35 @@
+{
+  "format": "forma.design",
+  "schemaVersion": "2.0.0",
+  "id": "future-form",
+  "mode": "standard",
+  "compatibility": { "forma": ">=1.0.0 <2.0.0" },
+  "responsive": { "strategy": "container", "narrow": "stack", "minimumViewportCssPx": 320 },
+  "motion": { "profile": "none", "reducedMotion": "preserve-state" },
+  "root": {
+    "kind": "form",
+    "id": "future",
+    "title": "Future form",
+    "method": "get",
+    "action": "#saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "fields",
+        "model": "stack",
+        "overflow": "wrap",
+        "children": [
+          { "kind": "field", "id": "name", "name": "name", "label": "Name", "control": { "kind": "text" } }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "actions",
+        "children": [
+          { "kind": "action", "id": "save", "label": "Save", "type": "submit", "binding": "form.submit" }
+        ]
+      },
+      { "kind": "feedback", "id": "saved", "label": "Save status", "message": "Saved." }
+    ]
+  }
+}

package/examples/design/valid/customer-form.forma-design.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "../../../schemas/design/1.0/forma-design.schema.json",
+  "format": "forma.design",
+  "schemaVersion": "1.0.0",
+  "id": "nasa-mission-customer-form",
+  "mode": "standard",
+  "compatibility": { "forma": ">=0.8.0 <1.0.0" },
+  "responsive": {
+    "strategy": "container",
+    "narrow": "stack",
+    "minimumViewportCssPx": 320
+  },
+  "motion": {
+    "profile": "none",
+    "reducedMotion": "preserve-state"
+  },
+  "root": {
+    "kind": "form",
+    "id": "nasa-mission-customer",
+    "title": "Artemis mission customer contact",
+    "method": "get",
+    "action": "#nasa-mission-customer-saved",
+    "children": [
+      {
+        "kind": "layout",
+        "id": "nasa-mission-customer-fields",
+        "model": "grid",
+        "alignControls": true,
+        "overflow": "wrap",
+        "density": "comfortable",
+        "children": [
+          {
+            "kind": "field",
+            "id": "nasa-mission-contact-name",
+            "name": "contact-name",
+            "label": "Mission contact name",
+            "description": "Primary contact for Artemis II payload coordination.",
+            "control": {
+              "kind": "text",
+              "value": "Reid Wiseman",
+              "required": true,
+              "autocomplete": "name"
+            },
+            "validation": {
+              "kind": "required",
+              "message": "Enter the mission contact name."
+            }
+          },
+          {
+            "kind": "field",
+            "id": "nasa-mission-contact-email",
+            "name": "contact-email",
+            "label": "Mission contact email",
+            "description": "Use the monitored address for launch-window updates.",
+            "control": {
+              "kind": "email",
+              "value": "artemis-ii@nasa.gov",
+              "required": true,
+              "autocomplete": "email",
+              "inputmode": "email"
+            },
+            "validation": {
+              "kind": "email",
+              "message": "Enter an email address such as name@nasa.gov."
+            }
+          }
+        ]
+      },
+      {
+        "kind": "actions",
+        "id": "nasa-mission-customer-actions",
+        "children": [
+          {
+            "kind": "action",
+            "id": "save-nasa-mission-customer",
+            "label": "Save customer",
+            "type": "submit",
+            "binding": "form.submit"
+          },
+          {
+            "kind": "action",
+            "id": "reset-nasa-mission-customer",
+            "label": "Reset form",
+            "type": "reset",
+            "binding": "form.reset"
+          }
+        ]
+      },
+      {
+        "kind": "feedback",
+        "id": "nasa-mission-customer-saved",
+        "label": "Save status",
+        "message": "Mission customer contact saved."
+      }
+    ]
+  }
+}

package/figma/component-contracts.json

@@ -680,6 +680,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "form",
+      "figmaName": "Forma / Form",
+      "source": "patterns/form.html",
+      "codeConnect": {
+        "id": "Forma/form",
+        "nodeUrl": null,
+        "status": "requires-published-figma-component"
+      }
+    },
     {
       "id": "grid",
       "figmaName": "Forma / Grid",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.7.0",
+  "version": "0.8.0-main.250.1",
   "private": false,
   "type": "module",
   "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
@@ -28,6 +28,9 @@
     "./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/*",
+    "./design/forma-design.schema.json": "./schemas/design/1.0/forma-design.schema.json",
+    "./contracts/design-capabilities.json": "./contracts/design-capabilities.json",
+    "./design/examples/*": "./examples/design/*",
     "./contracts/machine-operability.json": "./contracts/machine-operability.json",
     "./icons/registry.schema.json": "./schemas/icon-registry.schema.json",
     "./icons/*": "./dist/icons/*"
@@ -46,6 +49,10 @@
     "examples/workflows/forma/workflows",
     "examples/workflows/fixtures.json",
     "docs/workflow",
+    "schemas/design/1.0/forma-design.schema.json",
+    "contracts/design-capabilities.json",
+    "examples/design",
+    "docs/DESIGN-CONTRACT.md",
     "contracts/machine-operability.json",
     "CHANGELOG.md",
     "schemas/icon-registry.schema.json",
@@ -60,9 +67,10 @@
     "test:browser": "playwright test",
     "test:a11y": "playwright test tests/browser/accessibility.spec.mjs",
     "test:runtime": "node --test tests/zero-runtime.test.mjs",
+    "test:design": "node --test tests/design-contract.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 icons:check && 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",
+    "check": "npm run build && npm run icons:check && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:design && 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 tests/catalog-coverage.test.mjs tests/icon-docs.test.mjs tests/catalog-interaction.test.mjs",
     "site:check": "npm run site:build && npm run catalog:check && npm run site:test && npm run site:mobile",
@@ -79,13 +87,14 @@
     "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 icons:check && 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",
+    "release:check": "npm run build && npm run icons:check && npm run test:tokens && npm run test:brands && npm run test:runtime && npm run test:design && 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",
+    "design:validate": "node tools/design-contract/cli.mjs validate examples/design/valid/*.forma-design.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",
@@ -113,5 +122,6 @@
     "accessibility",
     "workflow",
     "machine-operability"
-  ]
+  ],
+  "license": "PolyForm-Noncommercial-1.0.0"
 }

package/patterns/form.html

@@ -0,0 +1,19 @@
+<form class="ef-form" id="nasa-mission-customer" method="get" action="#nasa-mission-customer-saved" aria-labelledby="nasa-mission-customer-title">
+<h2 id="nasa-mission-customer-title">Artemis mission customer contact</h2>
+<div class="ef-form-row" data-ef-form-layout="grid">
+  <div class="ef-field">
+  <label class="ef-field__label" for="nasa-mission-contact-name">Mission contact name (required)</label>
+  <span class="ef-field__description" id="nasa-mission-contact-name-description">Primary contact for Artemis II payload coordination.</span>
+  <input type="text" id="nasa-mission-contact-name" name="contact-name" required autocomplete="name" value="Reid Wiseman" aria-describedby="nasa-mission-contact-name-description nasa-mission-contact-name-error">
+  <p class="ef-validation-message ef-validation-message--when-invalid" id="nasa-mission-contact-name-error"><span class="ef-validation-message__mark" aria-hidden="true">!</span>Enter the mission contact name.</p>
+  </div>
+  <div class="ef-field">
+  <label class="ef-field__label" for="nasa-mission-contact-email">Mission contact email (required)</label>
+  <span class="ef-field__description" id="nasa-mission-contact-email-description">Use the monitored address for launch-window updates.</span>
+  <input type="email" id="nasa-mission-contact-email" name="contact-email" required autocomplete="email" inputmode="email" value="artemis-ii@nasa.gov" aria-describedby="nasa-mission-contact-email-description nasa-mission-contact-email-error">
+  <p class="ef-validation-message ef-validation-message--when-invalid" id="nasa-mission-contact-email-error"><span class="ef-validation-message__mark" aria-hidden="true">!</span>Enter an email address such as name@nasa.gov.</p>
+  </div>
+</div>
+<div class="ef-actions"><button type="submit">Save customer</button><button type="reset">Reset form</button></div>
+<p class="ef-form__outcome" id="nasa-mission-customer-saved" role="status" aria-label="Save status">Mission customer contact saved.</p>
+</form>