@echelon-foundry/design-system 0.12.0 → 0.13.0-main.263.1

package/CHANGELOG.md

@@ -7,6 +7,55 @@ published as GitHub release tarballs
 and to npm. Earlier releases are described in `docs/CONSUMING-FORMA.md` and
 `HANDOFF.md`.
 
+## 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.
+
+**Behaviour change: a token too long for its line now breaks inside Forma containers.** Before this release, a token without spaces kept its full width and escaped the card, dialog or field around it. This affected URLs, SHAs, paths and identifiers in a `span`, `strong`, `em`, `div` or `li`. Such a token now breaks at the container's edge. Words that fit are never split: containers pass on `overflow-wrap: break-word`, which leaves a word's minimum width alone, not `anywhere`. Content with an explicit `white-space` (`nowrap`, `pre`) keeps its wrapping, as do code blocks, truncating selects, character-grid runs and buttons. No class, token, element or attribute was removed or renamed (QD-004).
+
+### Fixed
+- **Text containment.** `overflow-wrap: break-word` is now inherited from these Forma containers, so arbitrary application text inside them breaks only when it would overflow:
+  - `.ef-surface`, `.ef-stack`, `.ef-cluster`, `.ef-actions`, `.ef-grid`, `.ef-responsive-grid`, `.ef-rail`, `.ef-mosaic`, `.ef-priority-stack`, `.ef-focus-stage`, `.ef-sidebar`, `.ef-switcher`, `.ef-split-pane`;
+  - `.ef-dialog`, `.ef-popover`, `.ef-menu`, `.ef-form`, `.ef-field`, `.ef-validation-summary`, `.ef-record-header`.
+
+  At 320px on 0.12.0, the fixtures measured escapes of up to 716px.
+- **Flex rows.** Children of `.ef-cluster` and `.ef-actions` are capped at the row's width (`max-inline-size: 100%`). This also caps their automatic flex minimum, so a long label no longer pushes the row past its container; it breaks inside the row. Items that fit keep their content size, and no control is shrunk below its label. A `dialog` or `[popover]` authored inside the row is exempt. A full-bleed child that uses negative margins is now capped at the row's width.
+- **Record header.** The type label can break when it is wider than a narrow header (320px at 200% text).
+- **Command palette.** A command's label is capped at its button's width, so a long label no longer overflows the palette.
+- **WebKit horizontal scrolling in forms.** A `select` with a long option inside `.ef-form-row` added the option's width to the page's horizontal scroll in WebKit/Safari. It now gets layout containment, which keeps that width inside the select; the subgrid alignment is kept.
+- **Focus on date and time pickers.** In Chromium, keyboard focus on the picker button of a date, time, datetime-local, month or week input painted no focus indicator. It now shows the Forma focus ring. The rule applies only to that case (`:focus-within:not(:focus)`), so pointer focus on the input itself keeps the native behaviour.
+- **Focus scrolling.** Focus-visible elements have `scroll-margin: 0.5rem`, so tabbing to an element at the viewport edge brings its whole focus ring into view. Chromium and WebKit honour this; Firefox does not.
+  - Side effect: in WebKit, tabbing into a mandatory scroll-snap container offsets the snap position by that margin.
+
+### Added
+- **Design-token validator (`tools/TokenValidator`).** It is written in F#, has no dependencies, and ships in the package. It validates `var(--ef-*)` references and `--ef-*` declarations against the Forma installation itself. That installation's token sources, built CSS and color contract are the source of truth. It reports:
+  - `unknown-token`, even when the reference has a fallback;
+  - `deprecated-token` (DTCG `$deprecated`);
+  - `namespace`: `--forma-*`, `--ef_*`, a dropped segment such as `--ef-spacing-4`, or an application minting a new `--ef-*` name;
+  - `internal-variable`;
+  - custom-property `cycle`, judged per rule and at-rule context.
+
+  Strings and comments are inert. With `--self` it also checks Forma's own `invalid-alias`, alias `cycle`, `theme-missing` (token themes and brand manifests) and `missing-definition`. Application-owned custom properties are never reported.
+  - Forma itself: `npm run tokens:validate`, which is now part of `check` and `release:check`. These scripts therefore need the .NET SDK.
+  - Applications: `dotnet run --project node_modules/@echelon-foundry/design-system/tools/TokenValidator/TokenValidator.fsproj -- --forma node_modules/@echelon-foundry/design-system src/`. See `docs/CONSUMING-FORMA.md`, "Design-token validation".
+- **`@echelon-foundry/forma-conformance` 0.3.0**, which also publishes the 0.11.0 corner-containment helpers:
+  - `measureContainment`, `expectContained` and `evaluateContainment` (ULI-L05 `contain.element`) check that every descendant box and text line stays inside a component's content box.
+  - `measureFocusVisibility`, `expectFocusVisible` and `evaluateFocusVisibility` (WCAG 2.4.7/2.4.11 `focus.unclipped`) check that a visible outline or outward box-shadow is painted and that no hard clip cuts it.
+- **Browser geometry suite.**
+  - `tests/browser/layout-reliability.spec.mjs` covers 11 adversarial fixtures at 320, 375, 768 and 1280px and at 200% text. It also runs dialog, dropdown, focus, media, theme, skin and axe checks. On 0.12.0 it failed 48 of 78 checks across Chromium, Firefox and WebKit.
+  - `tests/browser/word-integrity.spec.mjs` checks that no canonical pattern or fixture splits a word that fits its box.
+  - `tests/browser/causa-representative.spec.mjs` covers Causa-shaped regions at phone, iPad portrait, iPad landscape and desktop sizes.
+
+### Known limitations
+- `.ef-dashboard-grid`, `.ef-split-pane` and `.ef-operation-status` reflow only at a viewport media query. Under page-level 200% text at iPad portrait width they stay wider than their region. This is the same class as the alert's viewport-based stacking. The Causa spec asserts these still fail, so a fix is noticed.
+- A narrowed `<svg>` with `width`/`height` attributes keeps its attribute height, so its box is taller than the drawing; the drawing itself is letterboxed, not distorted.
+  - No single declaration fixes this without a regression in some engine. `block-size: auto` makes icons stretch in flex rows in every engine. The intrinsic keywords avoid that stretch, but WebKit does not resize an SVG with them.
+  - Workaround: give such charts `block-size: auto` yourself, or omit the `height` attribute.
+
+## @echelon-foundry/forma-workflow 1.2.0
+
+Minor release of the workflow package (and `EchelonFoundry.Forma.Workflow` 1.2.0): it ships the Forma 0.12.0 engine. **Behaviour change: validation is stricter.** Documents that validated under 1.1.0 can now fail with `A11Y-NONTEXT-CONTRAST` (WCAG 1.4.11, 3:1), and `render` refuses documents that fail validation. Added: `token:status-warning|danger|success|info` diagram colours, `ValidationOptions.Theme` and `--theme` on `validate`/`render`. No element, class, attribute or token was removed or renamed (QD-004), so this is a minor release, as Forma 0.12.0 was. See 0.12.0 below for the migration.
+
 ## 0.12.0
 
 Minor release: diagram non-text contrast and status tokens.

package/contracts/color-contract.json

@@ -1,6 +1,6 @@
 {
   "format": "forma.color-contract/1.0.0",
-  "formaVersion": "0.12.0",
+  "formaVersion": "0.13.0",
   "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/dist/all.css

@@ -794,6 +794,20 @@
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
     box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+    /* Focus scrolling brings the whole indicator into view, not only the
+       element's border box (LRP-001). Changes scroll position only. */
+    scroll-margin: 0.5rem;
+  }
+
+  /* Keyboard focus on a date or time control's own picker button leaves the
+     host input :focus-within but neither :focus nor :focus-visible
+     (Chromium), which painted no indicator at all (LRP-001). :not(:focus)
+     limits this to that case: pointer focus on the input itself (WebKit)
+     keeps the native behaviour. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):focus-within:not(:focus) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
   }
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
@@ -811,6 +825,39 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Layout reliability (LRP-001, docs/reliability/layout-baseline.md).
+   * Forma containers that hold arbitrary application content pass
+   * overflow-wrap: break-word to that content by inheritance, so a long token
+   * in a span, strong, em, div or li breaks instead of escaping the card,
+   * dialog or field. break-word, unlike anywhere, leaves min-content sizes
+   * alone: a word that fits is never split, and auto-sized flex and grid
+   * items keep whole words. Inheritance never overrides a declared value:
+   * text elements above keep anywhere, character-grid runs keep normal, and
+   * white-space: pre or nowrap content (code blocks, truncating selects,
+   * scrollers) does not wrap.
+   */
+  :where(
+    .ef-surface, .ef-stack, .ef-cluster, .ef-actions, .ef-grid, .ef-responsive-grid,
+    .ef-rail, .ef-mosaic, .ef-priority-stack, .ef-focus-stage, .ef-sidebar, .ef-switcher, .ef-split-pane,
+    .ef-dialog, .ef-popover, .ef-menu, .ef-form, .ef-field, .ef-validation-summary, .ef-record-header
+  ) {
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * A wrapping row's item can be no wider than the row (LRP-001), which also
+   * caps its automatic flex minimum, so a long label or an inline-block item
+   * cannot push the row past its container; the item's text then breaks
+   * inside it. Items keep their content size whenever it fits: nothing here
+   * shrinks a control below its label. Top-layer children (a dialog or
+   * popover authored inside the row) keep their own sizing. A full-bleed
+   * child with negative margins is capped at the row's width.
+   */
+  :where(.ef-cluster, .ef-actions) > :not(dialog, [popover]) {
+    max-inline-size: 100%;
+  }
+
   /* Action labels never split mid-word because their container allows it
      (a link button inherits the rule above; a button inherits it from a
      table cell). A single word wider than its container may still break
@@ -1075,6 +1122,12 @@
   .ef-form-row > .ef-field > .ef-field__description { grid-row: 2; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  /* WebKit lets a select's longest option add scrollable overflow through
+     the subgrid, so a 320px form scrolled sideways by the option's width
+     (LRP-001; Safari is the primary iPad target). Layout containment keeps
+     it inside the select. Rows align at start, so the lost baseline is
+     unused here. */
+  .ef-form-row > .ef-field > select { contain: layout; }
 
   /* Form contract ------------------------------------------------------- */
   .ef-form {
@@ -3044,6 +3097,9 @@
     border-inline: 0;
     border-block-end: 0;
   }
+  /* A command's label is no wider than its button, so a long label breaks
+     inside the button instead of overflowing the palette (LRP-001). */
+  .ef-command-palette__group button > * { max-inline-size: 100%; }
   .ef-command-palette__group button:last-child { border-block-end: 1px solid var(--ef-color-border-functional, #3a403c); }
   .ef-command-palette kbd {
     padding: 0.1rem 0.35rem;
@@ -3178,7 +3234,9 @@
     row-gap: 0;
     min-inline-size: 0;
   }
-  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; }
+  /* A type label wider than a narrow header (320px at 200% text) breaks
+     rather than setting the column's minimum and overflowing (LRP-001). */
+  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; overflow-wrap: anywhere; }
   .ef-record-header__title > :first-child > :is(h1, h2, h3, h4) { grid-row: 2; }
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {

package/dist/build-metrics.json

@@ -342,13 +342,13 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 341701,
+    "all.css": 344943,
     "assessment.css": 36343,
     "brands/echelon.css": 4213,
     "brands/example-harbor.css": 4229,
     "brands/index.json": 335,
-    "components.css": 213356,
-    "foundations.css": 20395,
+    "components.css": 214119,
+    "foundations.css": 22874,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,
     "icons/archive.svg": 248,

package/dist/components.css

@@ -63,6 +63,12 @@
   .ef-form-row > .ef-field > .ef-field__description { grid-row: 2; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  /* WebKit lets a select's longest option add scrollable overflow through
+     the subgrid, so a 320px form scrolled sideways by the option's width
+     (LRP-001; Safari is the primary iPad target). Layout containment keeps
+     it inside the select. Rows align at start, so the lost baseline is
+     unused here. */
+  .ef-form-row > .ef-field > select { contain: layout; }
 
   /* Form contract ------------------------------------------------------- */
   .ef-form {
@@ -2032,6 +2038,9 @@
     border-inline: 0;
     border-block-end: 0;
   }
+  /* A command's label is no wider than its button, so a long label breaks
+     inside the button instead of overflowing the palette (LRP-001). */
+  .ef-command-palette__group button > * { max-inline-size: 100%; }
   .ef-command-palette__group button:last-child { border-block-end: 1px solid var(--ef-color-border-functional, #3a403c); }
   .ef-command-palette kbd {
     padding: 0.1rem 0.35rem;
@@ -2166,7 +2175,9 @@
     row-gap: 0;
     min-inline-size: 0;
   }
-  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; }
+  /* A type label wider than a narrow header (320px at 200% text) breaks
+     rather than setting the column's minimum and overflowing (LRP-001). */
+  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; overflow-wrap: anywhere; }
   .ef-record-header__title > :first-child > :is(h1, h2, h3, h4) { grid-row: 2; }
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {

package/dist/foundations.css

@@ -183,6 +183,20 @@
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
     box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+    /* Focus scrolling brings the whole indicator into view, not only the
+       element's border box (LRP-001). Changes scroll position only. */
+    scroll-margin: 0.5rem;
+  }
+
+  /* Keyboard focus on a date or time control's own picker button leaves the
+     host input :focus-within but neither :focus nor :focus-visible
+     (Chromium), which painted no indicator at all (LRP-001). :not(:focus)
+     limits this to that case: pointer focus on the input itself (WebKit)
+     keeps the native behaviour. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):focus-within:not(:focus) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
   }
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
@@ -200,6 +214,39 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Layout reliability (LRP-001, docs/reliability/layout-baseline.md).
+   * Forma containers that hold arbitrary application content pass
+   * overflow-wrap: break-word to that content by inheritance, so a long token
+   * in a span, strong, em, div or li breaks instead of escaping the card,
+   * dialog or field. break-word, unlike anywhere, leaves min-content sizes
+   * alone: a word that fits is never split, and auto-sized flex and grid
+   * items keep whole words. Inheritance never overrides a declared value:
+   * text elements above keep anywhere, character-grid runs keep normal, and
+   * white-space: pre or nowrap content (code blocks, truncating selects,
+   * scrollers) does not wrap.
+   */
+  :where(
+    .ef-surface, .ef-stack, .ef-cluster, .ef-actions, .ef-grid, .ef-responsive-grid,
+    .ef-rail, .ef-mosaic, .ef-priority-stack, .ef-focus-stage, .ef-sidebar, .ef-switcher, .ef-split-pane,
+    .ef-dialog, .ef-popover, .ef-menu, .ef-form, .ef-field, .ef-validation-summary, .ef-record-header
+  ) {
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * A wrapping row's item can be no wider than the row (LRP-001), which also
+   * caps its automatic flex minimum, so a long label or an inline-block item
+   * cannot push the row past its container; the item's text then breaks
+   * inside it. Items keep their content size whenever it fits: nothing here
+   * shrinks a control below its label. Top-layer children (a dialog or
+   * popover authored inside the row) keep their own sizing. A full-bleed
+   * child with negative margins is capped at the row's width.
+   */
+  :where(.ef-cluster, .ef-actions) > :not(dialog, [popover]) {
+    max-inline-size: 100%;
+  }
+
   /* Action labels never split mid-word because their container allows it
      (a link button inherits the rule above; a button inherits it from a
      table cell). A single word wider than its container may still break

package/dist/icons/registry.json

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

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.12.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.13.0 | 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. */
 
@@ -799,6 +799,20 @@
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
     box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+    /* Focus scrolling brings the whole indicator into view, not only the
+       element's border box (LRP-001). Changes scroll position only. */
+    scroll-margin: 0.5rem;
+  }
+
+  /* Keyboard focus on a date or time control's own picker button leaves the
+     host input :focus-within but neither :focus nor :focus-visible
+     (Chromium), which painted no indicator at all (LRP-001). :not(:focus)
+     limits this to that case: pointer focus on the input itself (WebKit)
+     keeps the native behaviour. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):focus-within:not(:focus) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
   }
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
@@ -816,6 +830,39 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Layout reliability (LRP-001, docs/reliability/layout-baseline.md).
+   * Forma containers that hold arbitrary application content pass
+   * overflow-wrap: break-word to that content by inheritance, so a long token
+   * in a span, strong, em, div or li breaks instead of escaping the card,
+   * dialog or field. break-word, unlike anywhere, leaves min-content sizes
+   * alone: a word that fits is never split, and auto-sized flex and grid
+   * items keep whole words. Inheritance never overrides a declared value:
+   * text elements above keep anywhere, character-grid runs keep normal, and
+   * white-space: pre or nowrap content (code blocks, truncating selects,
+   * scrollers) does not wrap.
+   */
+  :where(
+    .ef-surface, .ef-stack, .ef-cluster, .ef-actions, .ef-grid, .ef-responsive-grid,
+    .ef-rail, .ef-mosaic, .ef-priority-stack, .ef-focus-stage, .ef-sidebar, .ef-switcher, .ef-split-pane,
+    .ef-dialog, .ef-popover, .ef-menu, .ef-form, .ef-field, .ef-validation-summary, .ef-record-header
+  ) {
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * A wrapping row's item can be no wider than the row (LRP-001), which also
+   * caps its automatic flex minimum, so a long label or an inline-block item
+   * cannot push the row past its container; the item's text then breaks
+   * inside it. Items keep their content size whenever it fits: nothing here
+   * shrinks a control below its label. Top-layer children (a dialog or
+   * popover authored inside the row) keep their own sizing. A full-bleed
+   * child with negative margins is capped at the row's width.
+   */
+  :where(.ef-cluster, .ef-actions) > :not(dialog, [popover]) {
+    max-inline-size: 100%;
+  }
+
   /* Action labels never split mid-word because their container allows it
      (a link button inherits the rule above; a button inherits it from a
      table cell). A single word wider than its container may still break
@@ -1080,6 +1127,12 @@
   .ef-form-row > .ef-field > .ef-field__description { grid-row: 2; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
+  /* WebKit lets a select's longest option add scrollable overflow through
+     the subgrid, so a 320px form scrolled sideways by the option's width
+     (LRP-001; Safari is the primary iPad target). Layout containment keeps
+     it inside the select. Rows align at start, so the lost baseline is
+     unused here. */
+  .ef-form-row > .ef-field > select { contain: layout; }
 
   /* Form contract ------------------------------------------------------- */
   .ef-form {
@@ -3049,6 +3102,9 @@
     border-inline: 0;
     border-block-end: 0;
   }
+  /* A command's label is no wider than its button, so a long label breaks
+     inside the button instead of overflowing the palette (LRP-001). */
+  .ef-command-palette__group button > * { max-inline-size: 100%; }
   .ef-command-palette__group button:last-child { border-block-end: 1px solid var(--ef-color-border-functional, #3a403c); }
   .ef-command-palette kbd {
     padding: 0.1rem 0.35rem;
@@ -3183,7 +3239,9 @@
     row-gap: 0;
     min-inline-size: 0;
   }
-  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; }
+  /* A type label wider than a narrow header (320px at 200% text) breaks
+     rather than setting the column's minimum and overflowing (LRP-001). */
+  .ef-record-header__title > :first-child > .ef-record-header__type { grid-row: 1; align-self: end; overflow-wrap: anywhere; }
   .ef-record-header__title > :first-child > :is(h1, h2, h3, h4) { grid-row: 2; }
   .ef-record-header__title > :not(:first-child) { grid-row: 2; }
   @container (max-width: 24em) {

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

@@ -1,4 +1,4 @@
-/*! Forma 0.12.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.13.0 | 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. */
 
@@ -903,6 +903,20 @@
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
     box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+    /* Focus scrolling brings the whole indicator into view, not only the
+       element's border box (LRP-001). Changes scroll position only. */
+    scroll-margin: 0.5rem;
+  }
+
+  /* Keyboard focus on a date or time control's own picker button leaves the
+     host input :focus-within but neither :focus nor :focus-visible
+     (Chromium), which painted no indicator at all (LRP-001). :not(:focus)
+     limits this to that case: pointer focus on the input itself (WebKit)
+     keeps the native behaviour. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):focus-within:not(:focus) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
   }
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
@@ -920,6 +934,39 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Layout reliability (LRP-001, docs/reliability/layout-baseline.md).
+   * Forma containers that hold arbitrary application content pass
+   * overflow-wrap: break-word to that content by inheritance, so a long token
+   * in a span, strong, em, div or li breaks instead of escaping the card,
+   * dialog or field. break-word, unlike anywhere, leaves min-content sizes
+   * alone: a word that fits is never split, and auto-sized flex and grid
+   * items keep whole words. Inheritance never overrides a declared value:
+   * text elements above keep anywhere, character-grid runs keep normal, and
+   * white-space: pre or nowrap content (code blocks, truncating selects,
+   * scrollers) does not wrap.
+   */
+  :where(
+    .ef-surface, .ef-stack, .ef-cluster, .ef-actions, .ef-grid, .ef-responsive-grid,
+    .ef-rail, .ef-mosaic, .ef-priority-stack, .ef-focus-stage, .ef-sidebar, .ef-switcher, .ef-split-pane,
+    .ef-dialog, .ef-popover, .ef-menu, .ef-form, .ef-field, .ef-validation-summary, .ef-record-header
+  ) {
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * A wrapping row's item can be no wider than the row (LRP-001), which also
+   * caps its automatic flex minimum, so a long label or an inline-block item
+   * cannot push the row past its container; the item's text then breaks
+   * inside it. Items keep their content size whenever it fits: nothing here
+   * shrinks a control below its label. Top-layer children (a dialog or
+   * popover authored inside the row) keep their own sizing. A full-bleed
+   * child with negative margins is capped at the row's width.
+   */
+  :where(.ef-cluster, .ef-actions) > :not(dialog, [popover]) {
+    max-inline-size: 100%;
+  }
+
   /* Action labels never split mid-word because their container allows it
      (a link button inherits the rule above; a button inherits it from a
      table cell). A single word wider than its container may still break

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

@@ -1,4 +1,4 @@
-/*! Forma 0.12.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.13.0 | 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.12.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.13.0 | 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. */
 
@@ -902,6 +902,20 @@
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
     box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+    /* Focus scrolling brings the whole indicator into view, not only the
+       element's border box (LRP-001). Changes scroll position only. */
+    scroll-margin: 0.5rem;
+  }
+
+  /* Keyboard focus on a date or time control's own picker button leaves the
+     host input :focus-within but neither :focus nor :focus-visible
+     (Chromium), which painted no indicator at all (LRP-001). :not(:focus)
+     limits this to that case: pointer focus on the input itself (WebKit)
+     keeps the native behaviour. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):focus-within:not(:focus) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
   }
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
@@ -919,6 +933,39 @@
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Layout reliability (LRP-001, docs/reliability/layout-baseline.md).
+   * Forma containers that hold arbitrary application content pass
+   * overflow-wrap: break-word to that content by inheritance, so a long token
+   * in a span, strong, em, div or li breaks instead of escaping the card,
+   * dialog or field. break-word, unlike anywhere, leaves min-content sizes
+   * alone: a word that fits is never split, and auto-sized flex and grid
+   * items keep whole words. Inheritance never overrides a declared value:
+   * text elements above keep anywhere, character-grid runs keep normal, and
+   * white-space: pre or nowrap content (code blocks, truncating selects,
+   * scrollers) does not wrap.
+   */
+  :where(
+    .ef-surface, .ef-stack, .ef-cluster, .ef-actions, .ef-grid, .ef-responsive-grid,
+    .ef-rail, .ef-mosaic, .ef-priority-stack, .ef-focus-stage, .ef-sidebar, .ef-switcher, .ef-split-pane,
+    .ef-dialog, .ef-popover, .ef-menu, .ef-form, .ef-field, .ef-validation-summary, .ef-record-header
+  ) {
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * A wrapping row's item can be no wider than the row (LRP-001), which also
+   * caps its automatic flex minimum, so a long label or an inline-block item
+   * cannot push the row past its container; the item's text then breaks
+   * inside it. Items keep their content size whenever it fits: nothing here
+   * shrinks a control below its label. Top-layer children (a dialog or
+   * popover authored inside the row) keep their own sizing. A full-bleed
+   * child with negative margins is capped at the row's width.
+   */
+  :where(.ef-cluster, .ef-actions) > :not(dialog, [popover]) {
+    max-inline-size: 100%;
+  }
+
   /* Action labels never split mid-word because their container allows it
      (a link button inherits the rule above; a button inherits it from a
      table cell). A single word wider than its container may still break

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

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.12.0",
+  "forma": "0.13.0",
   "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.12.0",
+  "releaseTag": "v0.13.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 92562,
-      "sha256": "e945b2e9f5396108446be83c8b0af50b64487b5749fc35a05e3b8582090dbd5f",
+      "bytes": 95041,
+      "sha256": "a2248c09b9c7731178f3046a245541fb240715c12b21638300d56a4fdd61819d",
       "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": "495b81a7dae75204ac9fcd2531754a2e0fa6e912009430d78d97d87807104402",
+      "sha256": "0b803cade4de294a2e15ac8a8482cb2448617a2558d70fc6542a4b3b9a357bf2",
       "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": 98702,
-      "sha256": "f93946ab2401d3a65f10ce96bbea8c830ad1c239bcc412c8f7906dfba8f6616c",
+      "bytes": 101181,
+      "sha256": "cdf0ebfa0b60219e72d1c32dc0ac068d73255654748b55283bbb1c7a9db78a7f",
       "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": 342064,
-      "sha256": "8126a388b0563f6d7f40a84058035bfd6cd62e966c181ff3c055f530bc2cc32c",
+      "bytes": 345306,
+      "sha256": "403d708505fc3fe2ac7bd2c78220e98ad9236a5c82f76d1b88d7a9c4b01ee213",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-e945b2e9f5396108446be83c8b0af50b64487b5749fc35a05e3b8582090dbd5f  forma-marketing.css
-495b81a7dae75204ac9fcd2531754a2e0fa6e912009430d78d97d87807104402  forma-marketing-theme-echelon.css
-f93946ab2401d3a65f10ce96bbea8c830ad1c239bcc412c8f7906dfba8f6616c  forma-echelon-marketing.css
-8126a388b0563f6d7f40a84058035bfd6cd62e966c181ff3c055f530bc2cc32c  forma-all.css
+a2248c09b9c7731178f3046a245541fb240715c12b21638300d56a4fdd61819d  forma-marketing.css
+0b803cade4de294a2e15ac8a8482cb2448617a2558d70fc6542a4b3b9a357bf2  forma-marketing-theme-echelon.css
+cdf0ebfa0b60219e72d1c32dc0ac068d73255654748b55283bbb1c7a9db78a7f  forma-echelon-marketing.css
+403d708505fc3fe2ac7bd2c78220e98ad9236a5c82f76d1b88d7a9c4b01ee213  forma-all.css

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.12.0";
+export const FORMA_VERSION = "0.13.0";
 
 if (typeof window !== "undefined") registerEchelonRuntime("forma", { version: FORMA_VERSION }, window);