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

package/CHANGELOG.md

@@ -7,6 +7,17 @@ published as GitHub release tarballs
 and to npm. Earlier releases are described in `docs/CONSUMING-FORMA.md` and
 `HANDOFF.md`.
 
+## Unreleased
+
+Patch candidate (proposed 0.13.1): marketing containment (MKT-CONTAIN, WI-0043). Found by the Echelon Diagnostic Framework site migration 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.
+- **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.
+
+### Tests
+- `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/dist/all.css

@@ -8056,6 +8056,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 +8654,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,7 +342,7 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 344943,
+    "all.css": 346039,
     "assessment.css": 36343,
     "brands/echelon.css": 4213,
     "brands/example-harbor.css": 4229,
@@ -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/marketing/forma-all.css

@@ -8061,6 +8061,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 +8659,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

@@ -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.css

@@ -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

@@ -8,8 +8,8 @@
     {
       "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": "08c70e579ad93f28d2dedf5d4c5e1b7d455773acff50b19a2a688f132123b9df",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.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": "d440c969a3defb5e8eb51043da8b66d3faa29094a429ece6a046deeea98377cb",
       "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": 346402,
+      "sha256": "0ba4ce2e6ef70b94000a725780d90e0061b312960265387bc3e2e06c34b92484",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-a2248c09b9c7731178f3046a245541fb240715c12b21638300d56a4fdd61819d  forma-marketing.css
+08c70e579ad93f28d2dedf5d4c5e1b7d455773acff50b19a2a688f132123b9df  forma-marketing.css
 0b803cade4de294a2e15ac8a8482cb2448617a2558d70fc6542a4b3b9a357bf2  forma-marketing-theme-echelon.css
-cdf0ebfa0b60219e72d1c32dc0ac068d73255654748b55283bbb1c7a9db78a7f  forma-echelon-marketing.css
-403d708505fc3fe2ac7bd2c78220e98ad9236a5c82f76d1b88d7a9c4b01ee213  forma-all.css
+d440c969a3defb5e8eb51043da8b66d3faa29094a429ece6a046deeea98377cb  forma-echelon-marketing.css
+0ba4ce2e6ef70b94000a725780d90e0061b312960265387bc3e2e06c34b92484  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/package.json

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