@echelon-foundry/design-system 0.6.0 → 0.6.1-main.236.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`.
 
+## 0.6.1
+
+Patch release: responsive navigation and native date/time field containment.
+- Site navigation labels no longer break mid-word or overlap the header at tablet sizes, mobile widths, or larger text scales. Navigation reflows into its own bounded, keyboard-accessible horizontal scroll region.
+- Shared native date, time, and datetime-local fields constrain their intrinsic width within grid columns, including Safari, without replacing the browser picker.
+- Documentation example previews and code snippets scroll within their own containers instead of widening the page.
+- Documentation navigation now highlights only the current section, with `aria-current="page"` on section index pages and `aria-current="location"` on descendants; the Agent use link is not a permanently highlighted call-to-action.
+- Adds generated-page and WebKit responsive tests at eight widths, including the reported date-time-field examples and enlarged text.
+
+No public icon identifiers, assets, or component semantics were renamed.
+
 ## 0.6.0
 
 Additive icon-library expansion: **80 icons in total**, up from 40, with no changes to existing icon identifiers or their geometry.

package/dist/all.css

@@ -767,10 +767,22 @@
   }
 
   .ef-field {
+    /* A native date/time picker can have a larger intrinsic minimum than its
+       form column in WebKit. Keep the field's track shrinkable instead of
+       letting it widen the containing card or example frame. */
     display: grid;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--ef-primitive-spacing-2, 0.5rem);
   }
 
+  .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    min-inline-size: 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
   .ef-field__label {
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.9375rem;
@@ -832,7 +844,7 @@
     --ef-motion-gravity-duration: 255ms;
     --ef-motion-state-duration: 154ms;
     --ef-motion-press-duration: 107ms;
-    --ef-motion-exit-duration: 146ms;
+    --ef-motion-exit-duration: 214ms;
     --ef-motion-spring-easing: linear(0, 0.42 24%, 0.82 48%, 1.055 70%, 0.988 88%, 1);
     --ef-motion-damped-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
   }
@@ -906,11 +918,8 @@
         calc(var(--ef-motion-inertia-duration) * 0.5),
         160ms
       );
-      --ef-motion-exit-duration: clamp(
-        80ms,
-        calc(var(--ef-motion-inertia-duration) * 0.68),
-        220ms
-      );
+      /* Compatibility token: reciprocal motion has one response time. */
+      --ef-motion-exit-duration: var(--ef-motion-inertia-duration);
     }
   }
 
@@ -1503,8 +1512,7 @@
   .ef-tooltip__surface:popover-open {
     opacity: 1;
     translate: 0 0;
-    /* Entry settles over the light inertial duration; exit (above) uses the
-       shorter derived exit duration. Opacity stays perceptual both ways. */
+    /* Spatial response and perceptual opacity are identical both ways. */
     transition-duration:
       var(--ef-motion-perceptual-duration),
       var(--ef-motion-inertia-duration),
@@ -1642,8 +1650,8 @@
 
   /* Dialog and flyout ---------------------------------------------------- */
   :where(.ef-dialog, .ef-flyout) {
-    --ef-overlay-motion-duration: var(--ef-motion-exit-duration);
-    --ef-overlay-spatial-easing: var(--ef-motion-damped-easing);
+    --ef-overlay-motion-duration: var(--ef-motion-inertia-duration);
+    --ef-overlay-spatial-easing: var(--ef-motion-spring-easing);
     padding: 0;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);

package/dist/build-metrics.json

@@ -339,12 +339,12 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 317020,
+    "all.css": 317434,
     "assessment.css": 35692,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 203770,
+    "components.css": 204184,
     "foundations.css": 11558,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,

package/dist/components.css

@@ -19,10 +19,22 @@
   }
 
   .ef-field {
+    /* A native date/time picker can have a larger intrinsic minimum than its
+       form column in WebKit. Keep the field's track shrinkable instead of
+       letting it widen the containing card or example frame. */
     display: grid;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--ef-primitive-spacing-2, 0.5rem);
   }
 
+  .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    min-inline-size: 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
   .ef-field__label {
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.9375rem;
@@ -84,7 +96,7 @@
     --ef-motion-gravity-duration: 255ms;
     --ef-motion-state-duration: 154ms;
     --ef-motion-press-duration: 107ms;
-    --ef-motion-exit-duration: 146ms;
+    --ef-motion-exit-duration: 214ms;
     --ef-motion-spring-easing: linear(0, 0.42 24%, 0.82 48%, 1.055 70%, 0.988 88%, 1);
     --ef-motion-damped-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
   }
@@ -158,11 +170,8 @@
         calc(var(--ef-motion-inertia-duration) * 0.5),
         160ms
       );
-      --ef-motion-exit-duration: clamp(
-        80ms,
-        calc(var(--ef-motion-inertia-duration) * 0.68),
-        220ms
-      );
+      /* Compatibility token: reciprocal motion has one response time. */
+      --ef-motion-exit-duration: var(--ef-motion-inertia-duration);
     }
   }
 
@@ -755,8 +764,7 @@
   .ef-tooltip__surface:popover-open {
     opacity: 1;
     translate: 0 0;
-    /* Entry settles over the light inertial duration; exit (above) uses the
-       shorter derived exit duration. Opacity stays perceptual both ways. */
+    /* Spatial response and perceptual opacity are identical both ways. */
     transition-duration:
       var(--ef-motion-perceptual-duration),
       var(--ef-motion-inertia-duration),
@@ -894,8 +902,8 @@
 
   /* Dialog and flyout ---------------------------------------------------- */
   :where(.ef-dialog, .ef-flyout) {
-    --ef-overlay-motion-duration: var(--ef-motion-exit-duration);
-    --ef-overlay-spatial-easing: var(--ef-motion-damped-easing);
+    --ef-overlay-motion-duration: var(--ef-motion-inertia-duration);
+    --ef-overlay-spatial-easing: var(--ef-motion-spring-easing);
     padding: 0;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);

package/dist/icons/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "formaVersion": "0.6.0",
+  "formaVersion": "0.6.1",
   "grid": 24,
   "icons": [
     {

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.6.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.6.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. */
 
@@ -772,10 +772,22 @@
   }
 
   .ef-field {
+    /* A native date/time picker can have a larger intrinsic minimum than its
+       form column in WebKit. Keep the field's track shrinkable instead of
+       letting it widen the containing card or example frame. */
     display: grid;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--ef-primitive-spacing-2, 0.5rem);
   }
 
+  .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+    min-inline-size: 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
   .ef-field__label {
     color: var(--ef-color-text-primary, #171a18);
     font-size: 0.9375rem;
@@ -837,7 +849,7 @@
     --ef-motion-gravity-duration: 255ms;
     --ef-motion-state-duration: 154ms;
     --ef-motion-press-duration: 107ms;
-    --ef-motion-exit-duration: 146ms;
+    --ef-motion-exit-duration: 214ms;
     --ef-motion-spring-easing: linear(0, 0.42 24%, 0.82 48%, 1.055 70%, 0.988 88%, 1);
     --ef-motion-damped-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
   }
@@ -911,11 +923,8 @@
         calc(var(--ef-motion-inertia-duration) * 0.5),
         160ms
       );
-      --ef-motion-exit-duration: clamp(
-        80ms,
-        calc(var(--ef-motion-inertia-duration) * 0.68),
-        220ms
-      );
+      /* Compatibility token: reciprocal motion has one response time. */
+      --ef-motion-exit-duration: var(--ef-motion-inertia-duration);
     }
   }
 
@@ -1508,8 +1517,7 @@
   .ef-tooltip__surface:popover-open {
     opacity: 1;
     translate: 0 0;
-    /* Entry settles over the light inertial duration; exit (above) uses the
-       shorter derived exit duration. Opacity stays perceptual both ways. */
+    /* Spatial response and perceptual opacity are identical both ways. */
     transition-duration:
       var(--ef-motion-perceptual-duration),
       var(--ef-motion-inertia-duration),
@@ -1647,8 +1655,8 @@
 
   /* Dialog and flyout ---------------------------------------------------- */
   :where(.ef-dialog, .ef-flyout) {
-    --ef-overlay-motion-duration: var(--ef-motion-exit-duration);
-    --ef-overlay-spatial-easing: var(--ef-motion-damped-easing);
+    --ef-overlay-motion-duration: var(--ef-motion-inertia-duration);
+    --ef-overlay-spatial-easing: var(--ef-motion-spring-easing);
     padding: 0;
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);

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

@@ -1,4 +1,4 @@
-/*! Forma 0.6.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.6.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. */
 

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

@@ -1,4 +1,4 @@
-/*! Forma 0.6.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.6.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.6.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.6.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. */
 

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

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.6.0",
+  "forma": "0.6.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.6.0",
+  "releaseTag": "v0.6.1",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
       "bytes": 78117,
-      "sha256": "70f644cd6fa38182ff0f77a88bafcbe2e8412132702c6cc82227aa7a400d1db7",
+      "sha256": "d2dd5cab7ebba2c2d667fa6cfab18bf3b19de729469e2fcca07a58d27c011525",
       "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": "ba79be2b4d49b13d503bb2f0439960618b80f9d450f866ac29403c4c55c099a8",
+      "sha256": "33a128ec9b1fd5081a6d8ed37ca641a05ec9e91eb342026c34b5bed69f5d750b",
       "sources": [
         "build/marketing/echelon-marketing.tokens.css",
         "themes/echelon/marketing.css"
@@ -33,7 +33,7 @@
       "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": "2649a4803c98d51b933f32ed5f4712889dd1f23038e0b94aab0e2e8e1e849347",
+      "sha256": "6f89190f3133a0cad35b05d3b00c9e17f2036e3c8021347b0dcd7bad50ac5af5",
       "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": 317382,
-      "sha256": "26cd0c1b8e90f191418fb9cd4657b68eda7c503e2e853e7e07649846a4f3f29f",
+      "bytes": 317796,
+      "sha256": "745a95984fd4ba3db4bdda3f5b11d842c9c57631f588c232fa7f846f37728c6b",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-70f644cd6fa38182ff0f77a88bafcbe2e8412132702c6cc82227aa7a400d1db7  forma-marketing.css
-ba79be2b4d49b13d503bb2f0439960618b80f9d450f866ac29403c4c55c099a8  forma-marketing-theme-echelon.css
-2649a4803c98d51b933f32ed5f4712889dd1f23038e0b94aab0e2e8e1e849347  forma-echelon-marketing.css
-26cd0c1b8e90f191418fb9cd4657b68eda7c503e2e853e7e07649846a4f3f29f  forma-all.css
+d2dd5cab7ebba2c2d667fa6cfab18bf3b19de729469e2fcca07a58d27c011525  forma-marketing.css
+33a128ec9b1fd5081a6d8ed37ca641a05ec9e91eb342026c34b5bed69f5d750b  forma-marketing-theme-echelon.css
+6f89190f3133a0cad35b05d3b00c9e17f2036e3c8021347b0dcd7bad50ac5af5  forma-echelon-marketing.css
+745a95984fd4ba3db4bdda3f5b11d842c9c57631f588c232fa7f846f37728c6b  forma-all.css

package/package.json

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