@echelon-foundry/design-system 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -7,6 +7,28 @@ published as GitHub release tarballs
 and to npm. Earlier releases are described in `docs/CONSUMING-FORMA.md` and
 `HANDOFF.md`.
 
+## 0.13.1
+
+Patch release with two fixes:
+
+- marketing containment (MKT-CONTAIN, WI-0043), found by the Echelon Diagnostic Framework site migration to 0.13.0;
+- the record header's type label below 24em (GH-179, WI-0044), found by Signal's upgrade to 0.13.0.
+
+No class, token, element or attribute was removed or renamed.
+
+### Fixed
+- **Text containment in marketing components.** LRP-001 (0.13.0) passed `overflow-wrap: break-word` only to the application containers. Marketing components hold the same kind of content, so list items, spans and divs inside them could still escape: on 0.13.0 a release URL in a `span` escaped `.ef-card` by 160px at 320px, and at 200% text ordinary list words ("explanations", "propagation") escaped a card by up to 18px. `.ef-site` now passes `break-word` from `.ef-hero`, `.ef-section-heading`, `.ef-card`, `.ef-facts`, `.ef-index`, `.ef-callout`, `.ef-cta`, `.ef-split`, `.ef-doc`, `.ef-prose`, `.ef-statement` and `.ef-site-footer`. Words that fit are never split; declared values (badges, steps, code) are unchanged.
+- **Record header type label below 24em (GH-179).** In 0.13.0 the header's `@container (max-width: 24em)` rule dropped the title grid's rows, but the identity block stayed `grid-template-rows: subgrid`, so the type label collapsed onto the title. It overlapped by 120–145px at 320–375px and by up to 790px at 200% text in the LRP-001 fixture, and in Signal it overlapped the page title on phones. The identity block now uses its own implicit rows below 24em, so the label sits above the title as it did in 0.6.1. Nothing changes above 24em.
+- **Toned CTA at narrow widths.** `.ef-cta[data-ef-tone]` caps its inline padding at `12.5vw`, as a toned `.ef-section` already does (ULI-L05). At 320px and 200% text the uncapped padding left a 96px content box. Nothing changes at the default text size.
+
+### Added
+- **Optional requirement identity (FMO-019).** `Forma.Workflow.RequirementIdentity` (EchelonFoundry.Forma.Workflow, additive public API) puts `data-requirement-id` (and `data-requirement-instance` for repeated controls) on the element of a component's kind. It refuses wrappers, labels and unrelated elements, ambiguous markup, re-identification and invalid IDs, and it detects duplicate identities in a scope. `contracts/machine-operability.json` 1.1.0 adds `requirementIdentity` under locator tier 3. The attribute is optional and application-owned (FMO-013 unchanged), and no existing markup changes.
+
+### Tests
+- `tests/workflow/Forma.Workflow.Tests/RequirementIdentityTests.fs` (11 cases) and `tests/browser/requirement-identity.spec.mjs` with the generated `tests/browser/fixture/requirement-identity.html`: placement on the control, untouched attributes, label association and role, stability across re-render, refusal of unrelated or ambiguous elements, instance keys, duplicate detection, hidden and disabled states.
+- `tests/browser/layout-reliability.spec.mjs`: the record header's type label ends at or above its title at 320, 375, 768 and 1280px with default and 200% text (GH-179). It fails on 0.13.0 at five of those eight points; containment could not see the defect because both boxes stay inside the header.
+- `tests/browser/marketing-containment.spec.mjs` with `tests/browser/fixture/marketing-containment.html`: containment of every marketing container at 320, 375, 768 and 1280px with default and 200% text, the toned-CTA line length, and that fitting words in cards are not split. Nine of its ten tests fail on 0.13.0.
+
 ## 0.13.0
 
 Minor release: layout reliability (LRP-001). The source document is `.praxis/inbox/documents/2026-10-30-LRP-001-layout-reliability.md`; the baseline and the Indy Init report are in `docs/reliability/`. `@echelon-foundry/forma-conformance` 0.3.0 ships the new geometry checks.

package/contracts/color-contract.json

@@ -1,6 +1,6 @@
 {
   "format": "forma.color-contract/1.0.0",
-  "formaVersion": "0.13.0",
+  "formaVersion": "0.13.1",
   "validationScope": "CSS var() references to --ef-color-* plus reserved internal color-related prefixes; other Forma APIs are governed by their own contracts.",
   "compatibility": {
     "policy": "Validate with the contract shipped by the pinned Forma package version.",

package/contracts/machine-operability.json

@@ -1,6 +1,6 @@
 {
   "name": "forma-machine-operability",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "referenceAutomation": "Playwright",
   "toolNeutral": true,
   "principle": "Every human-operable action has a deterministic semantically discoverable machine-operable path to the same authoritative application state.",
@@ -44,5 +44,30 @@
     "forma": "semantic markup, accessible naming, public structure and presentation-state hooks",
     "applicationOrLimen": "behavior beyond native HTML and application state synchronization",
     "ordoOrDomain": "legality, capabilities, obligations, permissions and consequential transitions"
+  },
+  "requirementIdentity": {
+    "requirement": "FMO-019",
+    "required": false,
+    "owner": "application",
+    "locatorTier": "documented-application-owned-stable-object-identity",
+    "attribute": "data-requirement-id",
+    "instanceAttribute": "data-requirement-instance",
+    "placement": "on the element of the component's kind (the input, textarea, select, button, link, display or region itself), never on a wrapper, label or unrelated element",
+    "components": {
+      "text-input": "input of type text, search, email, url, tel, number, date, datetime-local or password",
+      "textarea": "textarea",
+      "select": "select",
+      "checkbox": "input type=checkbox",
+      "button": "button, or input type=submit|button",
+      "link": "a[href]",
+      "display": "dd, dt, time, output, p, span, strong, data, li, td, h1-h4",
+      "region": "section, form, fieldset, main, nav, aside, dialog"
+    },
+    "scope": "one element per ID per active scope; repeated controls carry distinct data-requirement-instance keys",
+    "neverReplaces": [
+      "role-and-accessible-name",
+      "native-label-id-name-value-or-url-target"
+    ],
+    "implementation": "Forma.Workflow.RequirementIdentity (EchelonFoundry.Forma.Workflow)"
   }
 }

package/dist/all.css

@@ -3241,7 +3241,10 @@
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {
     .ef-record-header__title { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
-    .ef-record-header__title > :first-child { grid-row: auto; }
+    /* The title grid has no rows here, so the identity block cannot stay a
+       subgrid: it would collapse the type label onto the title (GH-179).
+       Its own implicit rows keep the label above the title. */
+    .ef-record-header__title > :first-child { grid-row: auto; grid-template-rows: none; }
     .ef-record-header__title > :not(:first-child) { grid-row: auto; justify-self: start; }
   }
   .ef-record-header__title h2 { margin: 0.15rem 0 0; }
@@ -8056,6 +8059,23 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Marketing containment (MKT-CONTAIN, WI-0043). LRP-001 passes
+   * overflow-wrap: break-word to arbitrary content inside the application
+   * containers; marketing components hold the same kind of content (list
+   * items, spans and divs that the element rule above does not reach), so
+   * they pass it on too. break-word never splits a word that fits and leaves
+   * min-content sizes alone; declared values (badges, steps, code) win over
+   * inheritance. Found by the EDF site at 320px: list words escaped a card at
+   * 200% text and a release URL in a span escaped it at every width.
+   */
+  .ef-site :where(
+    .ef-hero, .ef-section-heading, .ef-card, .ef-facts, .ef-index, .ef-callout,
+    .ef-cta, .ef-split, .ef-doc, .ef-prose, .ef-statement, .ef-site-footer
+  ) {
+    overflow-wrap: break-word;
+  }
+
   .ef-site :where(hr) {
     margin-block: var(--ef-layout-section-space);
     border: 0;
@@ -8637,6 +8657,10 @@
 
   .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* Same cap as a toned .ef-section (ULI-L05): at 320px and 200% text the
+       uncapped inline padding left a 96px content box (MKT-CONTAIN). It
+       changes nothing at the default text size. */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
     border-block-start: 0;
   }
 

package/dist/build-metrics.json

@@ -342,12 +342,12 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 344943,
+    "all.css": 346279,
     "assessment.css": 36343,
     "brands/echelon.css": 4213,
     "brands/example-harbor.css": 4229,
     "brands/index.json": 335,
-    "components.css": 214119,
+    "components.css": 214359,
     "foundations.css": 22874,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,
@@ -510,7 +510,7 @@
     "icons/warning.svg": 324,
     "icons/wifi-off.svg": 269,
     "icons/workflow.svg": 345,
-    "marketing.css": 47868,
+    "marketing.css": 48964,
     "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,
     "patterns/allocation.html": 1033,

package/dist/components.css

@@ -2182,7 +2182,10 @@
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {
     .ef-record-header__title { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
-    .ef-record-header__title > :first-child { grid-row: auto; }
+    /* The title grid has no rows here, so the identity block cannot stay a
+       subgrid: it would collapse the type label onto the title (GH-179).
+       Its own implicit rows keep the label above the title. */
+    .ef-record-header__title > :first-child { grid-row: auto; grid-template-rows: none; }
     .ef-record-header__title > :not(:first-child) { grid-row: auto; justify-self: start; }
   }
   .ef-record-header__title h2 { margin: 0.15rem 0 0; }

package/dist/icons/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "formaVersion": "0.13.0",
+  "formaVersion": "0.13.1",
   "grid": 24,
   "icons": [
     {

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.13.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.13.1 | forma-all.css | bundle echelon-marketing
     Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -3246,7 +3246,10 @@
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {
     .ef-record-header__title { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
-    .ef-record-header__title > :first-child { grid-row: auto; }
+    /* The title grid has no rows here, so the identity block cannot stay a
+       subgrid: it would collapse the type label onto the title (GH-179).
+       Its own implicit rows keep the label above the title. */
+    .ef-record-header__title > :first-child { grid-row: auto; grid-template-rows: none; }
     .ef-record-header__title > :not(:first-child) { grid-row: auto; justify-self: start; }
   }
   .ef-record-header__title h2 { margin: 0.15rem 0 0; }
@@ -8061,6 +8064,23 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Marketing containment (MKT-CONTAIN, WI-0043). LRP-001 passes
+   * overflow-wrap: break-word to arbitrary content inside the application
+   * containers; marketing components hold the same kind of content (list
+   * items, spans and divs that the element rule above does not reach), so
+   * they pass it on too. break-word never splits a word that fits and leaves
+   * min-content sizes alone; declared values (badges, steps, code) win over
+   * inheritance. Found by the EDF site at 320px: list words escaped a card at
+   * 200% text and a release URL in a span escaped it at every width.
+   */
+  .ef-site :where(
+    .ef-hero, .ef-section-heading, .ef-card, .ef-facts, .ef-index, .ef-callout,
+    .ef-cta, .ef-split, .ef-doc, .ef-prose, .ef-statement, .ef-site-footer
+  ) {
+    overflow-wrap: break-word;
+  }
+
   .ef-site :where(hr) {
     margin-block: var(--ef-layout-section-space);
     border: 0;
@@ -8642,6 +8662,10 @@
 
   .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* Same cap as a toned .ef-section (ULI-L05): at 320px and 200% text the
+       uncapped inline padding left a 96px content box (MKT-CONTAIN). It
+       changes nothing at the default text size. */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
     border-block-start: 0;
   }
 

package/dist/marketing/forma-echelon-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.13.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.13.1 | forma-echelon-marketing.css | bundle echelon-marketing
     Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -1353,6 +1353,23 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Marketing containment (MKT-CONTAIN, WI-0043). LRP-001 passes
+   * overflow-wrap: break-word to arbitrary content inside the application
+   * containers; marketing components hold the same kind of content (list
+   * items, spans and divs that the element rule above does not reach), so
+   * they pass it on too. break-word never splits a word that fits and leaves
+   * min-content sizes alone; declared values (badges, steps, code) win over
+   * inheritance. Found by the EDF site at 320px: list words escaped a card at
+   * 200% text and a release URL in a span escaped it at every width.
+   */
+  .ef-site :where(
+    .ef-hero, .ef-section-heading, .ef-card, .ef-facts, .ef-index, .ef-callout,
+    .ef-cta, .ef-split, .ef-doc, .ef-prose, .ef-statement, .ef-site-footer
+  ) {
+    overflow-wrap: break-word;
+  }
+
   .ef-site :where(hr) {
     margin-block: var(--ef-layout-section-space);
     border: 0;
@@ -1935,6 +1952,10 @@
 
   .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* Same cap as a toned .ef-section (ULI-L05): at 320px and 200% text the
+       uncapped inline padding left a 96px content box (MKT-CONTAIN). It
+       changes nothing at the default text size. */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
     border-block-start: 0;
   }
 

package/dist/marketing/forma-marketing-theme-echelon.css

@@ -1,4 +1,4 @@
-/*! Forma 0.13.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.13.1 | forma-marketing-theme-echelon.css | bundle echelon-marketing
     Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 

package/dist/marketing/forma-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.13.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.13.1 | forma-marketing.css | bundle echelon-marketing
     Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -1352,6 +1352,23 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Marketing containment (MKT-CONTAIN, WI-0043). LRP-001 passes
+   * overflow-wrap: break-word to arbitrary content inside the application
+   * containers; marketing components hold the same kind of content (list
+   * items, spans and divs that the element rule above does not reach), so
+   * they pass it on too. break-word never splits a word that fits and leaves
+   * min-content sizes alone; declared values (badges, steps, code) win over
+   * inheritance. Found by the EDF site at 320px: list words escaped a card at
+   * 200% text and a release URL in a span escaped it at every width.
+   */
+  .ef-site :where(
+    .ef-hero, .ef-section-heading, .ef-card, .ef-facts, .ef-index, .ef-callout,
+    .ef-cta, .ef-split, .ef-doc, .ef-prose, .ef-statement, .ef-site-footer
+  ) {
+    overflow-wrap: break-word;
+  }
+
   .ef-site :where(hr) {
     margin-block: var(--ef-layout-section-space);
     border: 0;
@@ -1934,6 +1951,10 @@
 
   .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* Same cap as a toned .ef-section (ULI-L05): at 320px and 200% text the
+       uncapped inline padding left a 96px content box (MKT-CONTAIN). It
+       changes nothing at the default text size. */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
     border-block-start: 0;
   }
 

package/dist/marketing/forma-marketing.manifest.json

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.13.0",
+  "forma": "0.13.1",
   "bundle": "echelon-marketing",
   "description": "Forma presentation artifacts for Echelon marketing sites. Every artifact is a single self-contained CSS file with no imports or relative URLs.",
-  "releaseTag": "v0.13.0",
+  "releaseTag": "v0.13.1",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 95041,
-      "sha256": "a2248c09b9c7731178f3046a245541fb240715c12b21638300d56a4fdd61819d",
+      "bytes": 96137,
+      "sha256": "77ed356b74ee190e0ae1181fd83c4308d159f60e16bc93e3fc89b893c1f06ebc",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.css",
@@ -23,7 +23,7 @@
       "file": "forma-marketing-theme-echelon.css",
       "description": "Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.",
       "bytes": 6296,
-      "sha256": "0b803cade4de294a2e15ac8a8482cb2448617a2558d70fc6542a4b3b9a357bf2",
+      "sha256": "6801950c7438a1274dc4a8cb24d642f67d0d8e67be3e8a9e1e037a0734078fc4",
       "sources": [
         "build/marketing/echelon-marketing.tokens.css",
         "themes/echelon/marketing.css"
@@ -32,8 +32,8 @@
     {
       "file": "forma-echelon-marketing.css",
       "description": "Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.",
-      "bytes": 101181,
-      "sha256": "cdf0ebfa0b60219e72d1c32dc0ac068d73255654748b55283bbb1c7a9db78a7f",
+      "bytes": 102277,
+      "sha256": "92803ba115f644b36800a6a26b0162dad927aa051792e88f9713d0bafac01e73",
       "sources": [
         "artifact:forma-marketing.css",
         "artifact:forma-marketing-theme-echelon.css"
@@ -42,8 +42,8 @@
     {
       "file": "forma-all.css",
       "description": "Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.",
-      "bytes": 345306,
-      "sha256": "403d708505fc3fe2ac7bd2c78220e98ad9236a5c82f76d1b88d7a9c4b01ee213",
+      "bytes": 346642,
+      "sha256": "0a0919db3accd32e2663266c69604cc7e3c47f3c1e96a3067ce3a58e67126734",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-a2248c09b9c7731178f3046a245541fb240715c12b21638300d56a4fdd61819d  forma-marketing.css
-0b803cade4de294a2e15ac8a8482cb2448617a2558d70fc6542a4b3b9a357bf2  forma-marketing-theme-echelon.css
-cdf0ebfa0b60219e72d1c32dc0ac068d73255654748b55283bbb1c7a9db78a7f  forma-echelon-marketing.css
-403d708505fc3fe2ac7bd2c78220e98ad9236a5c82f76d1b88d7a9c4b01ee213  forma-all.css
+77ed356b74ee190e0ae1181fd83c4308d159f60e16bc93e3fc89b893c1f06ebc  forma-marketing.css
+6801950c7438a1274dc4a8cb24d642f67d0d8e67be3e8a9e1e037a0734078fc4  forma-marketing-theme-echelon.css
+92803ba115f644b36800a6a26b0162dad927aa051792e88f9713d0bafac01e73  forma-echelon-marketing.css
+0a0919db3accd32e2663266c69604cc7e3c47f3c1e96a3067ce3a58e67126734  forma-all.css

package/dist/marketing.css

@@ -285,6 +285,23 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Marketing containment (MKT-CONTAIN, WI-0043). LRP-001 passes
+   * overflow-wrap: break-word to arbitrary content inside the application
+   * containers; marketing components hold the same kind of content (list
+   * items, spans and divs that the element rule above does not reach), so
+   * they pass it on too. break-word never splits a word that fits and leaves
+   * min-content sizes alone; declared values (badges, steps, code) win over
+   * inheritance. Found by the EDF site at 320px: list words escaped a card at
+   * 200% text and a release URL in a span escaped it at every width.
+   */
+  .ef-site :where(
+    .ef-hero, .ef-section-heading, .ef-card, .ef-facts, .ef-index, .ef-callout,
+    .ef-cta, .ef-split, .ef-doc, .ef-prose, .ef-statement, .ef-site-footer
+  ) {
+    overflow-wrap: break-word;
+  }
+
   .ef-site :where(hr) {
     margin-block: var(--ef-layout-section-space);
     border: 0;
@@ -866,6 +883,10 @@
 
   .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* Same cap as a toned .ef-section (ULI-L05): at 320px and 200% text the
+       uncapped inline padding left a 96px content box (MKT-CONTAIN). It
+       changes nothing at the default text size. */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
     border-block-start: 0;
   }
 

package/dist/runtime.js

@@ -52,6 +52,6 @@ export function registerEchelonRuntime(name, metadata, target = globalThis) {
   return installEchelonRuntimeRegistrar(target)?.(name, metadata);
 }
 
-export const FORMA_VERSION = "0.13.0";
+export const FORMA_VERSION = "0.13.1";
 
 if (typeof window !== "undefined") registerEchelonRuntime("forma", { version: FORMA_VERSION }, window);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@echelon-foundry/design-system",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "private": false,
   "type": "module",
   "description": "Zero-component-runtime HTML and CSS design system for Echelon Foundry applications.",