@echelon-foundry/design-system 0.6.1 → 0.7.0

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

@@ -1,4 +1,4 @@
-/*! Forma 0.6.1 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.7.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. */
 
@@ -737,6 +737,7 @@
   }
 
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    box-sizing: border-box;
     min-block-size: 2.75rem;
     inline-size: 100%;
     padding: 0.7rem 0.8rem;
@@ -744,6 +745,50 @@
     border-radius: var(--ef-primitive-radius-none, 0);
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
+    font: inherit;
+    line-height: var(--ef-field-line-height, 1.6);
+  }
+
+  /*
+   * Equivalent single-line controls share one intrinsic block size
+   * (UI-LAYOUT-INTERACTION ULI-L02, L13): one line of field text plus the
+   * field padding and border. Native date/time and select boxes otherwise
+   * differ by several pixels from text inputs (Chromium: 51.97 vs 49.97 vs
+   * 46.38 px), which staggers peers in a row. Em-based, so it grows with
+   * the user's text size.
+   */
+  :where(
+    input:not([type]),
+    input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"],
+      [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
+    select:not([multiple], [size])
+  ) {
+    block-size: var(--ef-field-control-block-size, calc(var(--ef-field-line-height, 1.6) * 1em + 1.4rem + 2px));
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  /* A fieldset's default min-inline-size is min-content, which lets a long
+     legend or option widen a form past a narrow viewport (ULI-L05). */
+  :where(fieldset) {
+    min-inline-size: 0;
+  }
+
+  /* iOS temporal controls otherwise retain a native intrinsic width despite
+     the author's width limit. Keep the native picker, not its native box. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-date-and-time-value {
+    min-inline-size: 0;
+    text-align: start;
   }
 
   :where(:focus-visible) {
@@ -755,16 +800,29 @@
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
   /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
-  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
+  /* min-inline-size: 0 lets an action row shrink inside a flex or grid parent
+     instead of being held at its widest button's word (ULI-L05). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; min-inline-size: 0; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18); min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
   .ef-surface :where(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
 
-  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th, dt, dd, caption, figcaption) {
     overflow-wrap: anywhere;
   }
 
+  /* 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
+     rather than overflow. Must follow the rule above (ULI-L06, L07). The
+     inline-size cap also clamps a flex item's automatic minimum, so a
+     button never pushes its row past its container (ULI-L05). */
+  :where(button, .ef-button) {
+    overflow-wrap: break-word;
+    max-inline-size: 100%;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       scroll-behavior: auto !important;
@@ -1261,6 +1319,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ef-space-3);
+    /* Shrinks inside a flex or grid parent instead of being held at its
+       widest button's word (ULI-L05). */
+    min-inline-size: 0;
   }
 
   .ef-site .ef-button {
@@ -1280,6 +1341,10 @@
     line-height: var(--ef-type-leading-snug);
     text-align: center;
     text-decoration: none;
+    /* Never wider than its row and never split mid-word unless one word is
+       wider than the row (ULI-L05, L06). */
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -1526,7 +1591,10 @@
     min-block-size: 1.5rem;
     font-size: var(--ef-type-size-small);
     font-weight: var(--ef-type-weight-strong);
-    white-space: nowrap;
+    /* One line whenever it fits (inline-flex shrinks to its content); it
+       wraps at word boundaries instead of overflowing a narrow column at
+       large text sizes (UI-LAYOUT-INTERACTION ULI-L05). */
+    max-inline-size: 100%;
   }
 
   /* Four disparate columns cannot degrade by a minimum item size, so the
@@ -1558,6 +1626,9 @@
     padding-block: var(--ef-space-4);
     border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
     color: var(--ef-tone-text);
+    /* The step text is an anonymous flex item; let a long word wrap inside
+       it instead of overflowing a narrow column (ULI-L05). */
+    overflow-wrap: anywhere;
   }
 
   .ef-steps > li::before {
@@ -1687,6 +1758,7 @@
 
   .ef-code-figure > figcaption {
     margin-block-end: var(--ef-space-2);
+    overflow-wrap: anywhere;
     color: var(--ef-tone-muted);
     font-family: var(--ef-type-family-mono);
     font-size: var(--ef-type-size-label);
@@ -1828,6 +1900,11 @@
   .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
     margin-block: calc(var(--ef-layout-section-space) / 2);
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* The block-space token is rem-based; at enlarged text on a phone it
+       would leave a few characters of line length (96px content at 320px
+       and 200% text). Cap only the inline padding by viewport width; this
+       changes nothing at the default text size (ULI-L05). */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
   }
 
   .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }

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

@@ -1,4 +1,4 @@
-/*! Forma 0.6.1 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.7.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.6.1 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.7.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. */
 
@@ -736,6 +736,7 @@
   }
 
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    box-sizing: border-box;
     min-block-size: 2.75rem;
     inline-size: 100%;
     padding: 0.7rem 0.8rem;
@@ -743,6 +744,50 @@
     border-radius: var(--ef-primitive-radius-none, 0);
     background: var(--ef-color-surface-primary, #f2efe7);
     color: var(--ef-color-text-primary, #171a18);
+    font: inherit;
+    line-height: var(--ef-field-line-height, 1.6);
+  }
+
+  /*
+   * Equivalent single-line controls share one intrinsic block size
+   * (UI-LAYOUT-INTERACTION ULI-L02, L13): one line of field text plus the
+   * field padding and border. Native date/time and select boxes otherwise
+   * differ by several pixels from text inputs (Chromium: 51.97 vs 49.97 vs
+   * 46.38 px), which staggers peers in a row. Em-based, so it grows with
+   * the user's text size.
+   */
+  :where(
+    input:not([type]),
+    input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"],
+      [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
+    select:not([multiple], [size])
+  ) {
+    block-size: var(--ef-field-control-block-size, calc(var(--ef-field-line-height, 1.6) * 1em + 1.4rem + 2px));
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  /* A fieldset's default min-inline-size is min-content, which lets a long
+     legend or option widen a form past a narrow viewport (ULI-L05). */
+  :where(fieldset) {
+    min-inline-size: 0;
+  }
+
+  /* iOS temporal controls otherwise retain a native intrinsic width despite
+     the author's width limit. Keep the native picker, not its native box. */
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-date-and-time-value {
+    min-inline-size: 0;
+    text-align: start;
   }
 
   :where(:focus-visible) {
@@ -754,16 +799,29 @@
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
   /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
-  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
+  /* min-inline-size: 0 lets an action row shrink inside a flex or grid parent
+     instead of being held at its widest button's word (ULI-L05). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; min-inline-size: 0; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c); --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18); min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
   .ef-surface :where(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
 
-  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th, dt, dd, caption, figcaption) {
     overflow-wrap: anywhere;
   }
 
+  /* 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
+     rather than overflow. Must follow the rule above (ULI-L06, L07). The
+     inline-size cap also clamps a flex item's automatic minimum, so a
+     button never pushes its row past its container (ULI-L05). */
+  :where(button, .ef-button) {
+    overflow-wrap: break-word;
+    max-inline-size: 100%;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       scroll-behavior: auto !important;
@@ -1260,6 +1318,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ef-space-3);
+    /* Shrinks inside a flex or grid parent instead of being held at its
+       widest button's word (ULI-L05). */
+    min-inline-size: 0;
   }
 
   .ef-site .ef-button {
@@ -1279,6 +1340,10 @@
     line-height: var(--ef-type-leading-snug);
     text-align: center;
     text-decoration: none;
+    /* Never wider than its row and never split mid-word unless one word is
+       wider than the row (ULI-L05, L06). */
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -1525,7 +1590,10 @@
     min-block-size: 1.5rem;
     font-size: var(--ef-type-size-small);
     font-weight: var(--ef-type-weight-strong);
-    white-space: nowrap;
+    /* One line whenever it fits (inline-flex shrinks to its content); it
+       wraps at word boundaries instead of overflowing a narrow column at
+       large text sizes (UI-LAYOUT-INTERACTION ULI-L05). */
+    max-inline-size: 100%;
   }
 
   /* Four disparate columns cannot degrade by a minimum item size, so the
@@ -1557,6 +1625,9 @@
     padding-block: var(--ef-space-4);
     border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
     color: var(--ef-tone-text);
+    /* The step text is an anonymous flex item; let a long word wrap inside
+       it instead of overflowing a narrow column (ULI-L05). */
+    overflow-wrap: anywhere;
   }
 
   .ef-steps > li::before {
@@ -1686,6 +1757,7 @@
 
   .ef-code-figure > figcaption {
     margin-block-end: var(--ef-space-2);
+    overflow-wrap: anywhere;
     color: var(--ef-tone-muted);
     font-family: var(--ef-type-family-mono);
     font-size: var(--ef-type-size-label);
@@ -1827,6 +1899,11 @@
   .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
     margin-block: calc(var(--ef-layout-section-space) / 2);
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* The block-space token is rem-based; at enlarged text on a phone it
+       would leave a few characters of line length (96px content at 320px
+       and 200% text). Cap only the inline padding by viewport width; this
+       changes nothing at the default text size (ULI-L05). */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
   }
 
   .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }

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

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.6.1",
+  "forma": "0.7.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.6.1",
+  "releaseTag": "v0.7.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 78117,
-      "sha256": "d2dd5cab7ebba2c2d667fa6cfab18bf3b19de729469e2fcca07a58d27c011525",
+      "bytes": 81740,
+      "sha256": "171d3cb1485da7a9f83f6bdfc80c8043b0d194a32eadc3e0b5e09b12fade2f80",
       "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": 6295,
-      "sha256": "33a128ec9b1fd5081a6d8ed37ca641a05ec9e91eb342026c34b5bed69f5d750b",
+      "sha256": "027334d7946a3342812dca297967630cb5f5b1e96dd849672c8e146bf257b153",
       "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": 84257,
-      "sha256": "6f89190f3133a0cad35b05d3b00c9e17f2036e3c8021347b0dcd7bad50ac5af5",
+      "bytes": 87880,
+      "sha256": "2baacb6423cc930e15b1da5cbf39289bed5bd3c721e35ef2e97cb73f48c0c0fc",
       "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": 317863,
-      "sha256": "3c129b05e8e6049e3e7d61bb09216640f1cae504689021b4262145000c37be01",
+      "bytes": 327293,
+      "sha256": "5aae64c6fa2e8784347b2207fe7324dae2492a5f45f6b134463e243f419b4dec",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-d2dd5cab7ebba2c2d667fa6cfab18bf3b19de729469e2fcca07a58d27c011525  forma-marketing.css
-33a128ec9b1fd5081a6d8ed37ca641a05ec9e91eb342026c34b5bed69f5d750b  forma-marketing-theme-echelon.css
-6f89190f3133a0cad35b05d3b00c9e17f2036e3c8021347b0dcd7bad50ac5af5  forma-echelon-marketing.css
-3c129b05e8e6049e3e7d61bb09216640f1cae504689021b4262145000c37be01  forma-all.css
+171d3cb1485da7a9f83f6bdfc80c8043b0d194a32eadc3e0b5e09b12fade2f80  forma-marketing.css
+027334d7946a3342812dca297967630cb5f5b1e96dd849672c8e146bf257b153  forma-marketing-theme-echelon.css
+2baacb6423cc930e15b1da5cbf39289bed5bd3c721e35ef2e97cb73f48c0c0fc  forma-echelon-marketing.css
+5aae64c6fa2e8784347b2207fe7324dae2492a5f45f6b134463e243f419b4dec  forma-all.css

package/dist/marketing.css

@@ -503,6 +503,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ef-space-3);
+    /* Shrinks inside a flex or grid parent instead of being held at its
+       widest button's word (ULI-L05). */
+    min-inline-size: 0;
   }
 
   .ef-site .ef-button {
@@ -522,6 +525,10 @@
     line-height: var(--ef-type-leading-snug);
     text-align: center;
     text-decoration: none;
+    /* Never wider than its row and never split mid-word unless one word is
+       wider than the row (ULI-L05, L06). */
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
     cursor: pointer;
     /* Hover and press are perceptual emphasis on the surface only: the hit
        target never moves under the pointer (MOT-014). */
@@ -768,7 +775,10 @@
     min-block-size: 1.5rem;
     font-size: var(--ef-type-size-small);
     font-weight: var(--ef-type-weight-strong);
-    white-space: nowrap;
+    /* One line whenever it fits (inline-flex shrinks to its content); it
+       wraps at word boundaries instead of overflowing a narrow column at
+       large text sizes (UI-LAYOUT-INTERACTION ULI-L05). */
+    max-inline-size: 100%;
   }
 
   /* Four disparate columns cannot degrade by a minimum item size, so the
@@ -800,6 +810,9 @@
     padding-block: var(--ef-space-4);
     border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
     color: var(--ef-tone-text);
+    /* The step text is an anonymous flex item; let a long word wrap inside
+       it instead of overflowing a narrow column (ULI-L05). */
+    overflow-wrap: anywhere;
   }
 
   .ef-steps > li::before {
@@ -929,6 +942,7 @@
 
   .ef-code-figure > figcaption {
     margin-block-end: var(--ef-space-2);
+    overflow-wrap: anywhere;
     color: var(--ef-tone-muted);
     font-family: var(--ef-type-family-mono);
     font-size: var(--ef-type-size-label);
@@ -1069,6 +1083,11 @@
   .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
     margin-block: calc(var(--ef-layout-section-space) / 2);
     padding: calc(var(--ef-layout-block-space) * 2);
+    /* The block-space token is rem-based; at enlarged text on a phone it
+       would leave a few characters of line length (96px content at 320px
+       and 200% text). Cap only the inline padding by viewport width; this
+       changes nothing at the default text size (ULI-L05). */
+    padding-inline: min(calc(var(--ef-layout-block-space) * 2), 12.5vw);
   }
 
   .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }

package/dist/patterns/form-row.html

@@ -0,0 +1,15 @@
+<div class="ef-form-row">
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-given-name">Given name</label>
+    <input id="form-row-given-name" name="given-name" type="text" autocomplete="given-name">
+  </div>
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-family-name">Family name</label>
+    <span class="ef-field__description" id="form-row-family-name-description">As printed on your passport or national identity card.</span>
+    <input id="form-row-family-name" name="family-name" type="text" autocomplete="family-name" aria-describedby="form-row-family-name-description">
+  </div>
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-birth-date">Date of birth</label>
+    <input id="form-row-birth-date" name="birth-date" type="date" autocomplete="bday">
+  </div>
+</div>

package/figma/component-contracts.json

@@ -670,6 +670,16 @@
         "status": "requires-published-figma-component"
       }
     },
+    {
+      "id": "form-row",
+      "figmaName": "Forma / Form Row",
+      "source": "patterns/form-row.html",
+      "codeConnect": {
+        "id": "Forma/form-row",
+        "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.6.1",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "description": "Zero-runtime HTML and CSS design system for Echelon Foundry applications.",
@@ -64,11 +64,11 @@
     "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",
     "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",
+    "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",
     "site:mobile": "playwright test --config=playwright.site.config.mjs",
     "pack:verify": "npm run build && npm pack --dry-run",
-    "test:package": "node --test tests/package-contract.test.mjs",
+    "test:package": "node --test tests/package-contract.test.mjs tests/conformance-package.test.mjs",
     "test:css": "node --test tests/css-source.test.mjs tests/dist-css.test.mjs tests/contrast-pairs.test.mjs tests/diagram-contract.test.mjs",
     "test:contrast": "node --test tests/contrast-pairs.test.mjs && playwright test tests/browser/pattern-contrast.spec.mjs --project=chromium",
     "brands:build": "dotnet run --project tools/BrandCompiler/BrandCompiler.fsproj -- brands dist/brands",
@@ -90,6 +90,7 @@
     "test:workflow-browser": "playwright test tests/browser/workflow-static.spec.mjs tests/browser/workflow-embed.spec.mjs",
     "workflow:check": "npm run workflow:test && npm run workflow:build && npm run test:workflow-package && npm run test:workflow-browser",
     "test:machine": "playwright test tests/browser/machine-operability.spec.mjs",
+    "ui:conformance": "npm run site:build && npm run catalog:check && npm run test:package && playwright test --config=playwright.conformance.config.mjs",
     "icons:check": "node --test tests/icons.test.mjs"
   },
   "devDependencies": {

package/patterns/form-row.html

@@ -0,0 +1,15 @@
+<div class="ef-form-row">
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-given-name">Given name</label>
+    <input id="form-row-given-name" name="given-name" type="text" autocomplete="given-name">
+  </div>
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-family-name">Family name</label>
+    <span class="ef-field__description" id="form-row-family-name-description">As printed on your passport or national identity card.</span>
+    <input id="form-row-family-name" name="family-name" type="text" autocomplete="family-name" aria-describedby="form-row-family-name-description">
+  </div>
+  <div class="ef-field">
+    <label class="ef-field__label" for="form-row-birth-date">Date of birth</label>
+    <input id="form-row-birth-date" name="birth-date" type="date" autocomplete="bday">
+  </div>
+</div>