@echelon-foundry/design-system 0.2.0 → 0.3.0-main.216.1

package/dist/assessment.css

@@ -44,6 +44,21 @@
 
   .ef-question__body { min-inline-size: 0; }
 
+  /*
+   * Shared assessment selection response (MOT-015, FORMA-MOT-003). Native
+   * inputs own selection and it changes immediately. Every selectable option
+   * family uses the same perceptual interpolation for its surface and the
+   * same timing for every value, so motion never encodes score, preference
+   * strength, correctness, quality or severity. Fallbacks restate the shared
+   * vocabulary for pages that load assessment.css without components.css.
+   */
+  :where(.ef-ordinal-option, .ef-choice, .ef-special-choice, .ef-binary-option, .ef-symbol-rating__option, .ef-semantic-differential__scale label) {
+    transition:
+      background-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1));
+  }
+
   /* Ordinal / Likert scale --------------------------------------------- */
   .ef-ordinal-scale,
   .ef-choice-group,
@@ -94,19 +109,18 @@
     color: var(--ef-color-text-primary, #171a18);
     text-align: center;
     cursor: pointer;
-    transition:
-      background var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
-      color var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
-      transform var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
   }
 
   .ef-ordinal-option + .ef-ordinal-option {
     border-inline-start: 1px solid var(--ef-color-border-subtle, #e3e0d7);
   }
 
+  /* Native inputs stay topmost for direct and assistive hit-testing, including
+     while a marker is press-compressed. */
   .ef-ordinal-option input,
   .ef-choice input,
   .ef-special-choice input {
+    z-index: 1;
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -125,6 +139,12 @@
     font-family: var(--ef-primitive-font-family-mono, ui-monospace, monospace);
     font-size: 0.75rem;
     font-weight: 700;
+    scale: none;
+    transition:
+      scale var(--ef-motion-press-duration, 107ms) var(--ef-motion-damped-easing, cubic-bezier(0.2, 0.8, 0.2, 1)),
+      background-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .ef-ordinal-option__label {
@@ -135,7 +155,9 @@
   }
 
   .ef-ordinal-option:hover { background: var(--ef-color-surface-secondary, #e3e0d7); }
-  .ef-ordinal-option:has(input:active) { transform: scale(0.985); }
+  /* Light inertial press on the marker only; the option (hit target) never
+     moves or shrinks (MOT-014). */
+  .ef-ordinal-option:has(input:active:not(:disabled)) .ef-ordinal-option__marker { scale: 0.92; }
 
   .ef-ordinal-option:has(input:checked) {
     background: var(--ef-color-surface-inverse, #202421);
@@ -199,9 +221,6 @@
     border: 1px solid var(--ef-color-border-functional, #3a403c);
     background: var(--ef-color-surface-primary, #f2efe7);
     cursor: pointer;
-    transition:
-      background var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease),
-      border-color var(--ef-primitive-motion-duration-fast, 120ms) var(--ef-primitive-motion-easing-standard, ease);
   }
 
   .ef-choice::before {
@@ -1072,12 +1091,12 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ef-ordinal-option,
-    .ef-choice,
-    .ef-binary-option,
-    .ef-symbol-rating__option {
+    .ef-ordinal-option__marker {
       transition-duration: 0.01ms;
     }
+
+    /* Remove spatial press compression; selection styling is unchanged. */
+    .ef-ordinal-option:has(input:active:not(:disabled)) .ef-ordinal-option__marker { scale: none; }
   }
 
   @media (forced-colors: active) {
@@ -1106,11 +1125,35 @@
     .ef-semantic-differential__scale label:has(input:checked),
     .ef-matrix__choices label:has(input:checked),
     .ef-pairwise__option:has(input:checked) {
+      /* Firefox otherwise forces Highlight back to Canvas; system colors
+         keep the selection legible in every contrast theme. */
+      forced-color-adjust: none;
+      border-color: HighlightText;
       background: Highlight;
       color: HighlightText;
     }
 
+    /* forced-color-adjust is inherited, so every author color painted
+       inside a selected option is restated as a system color. */
+    :is(.ef-ordinal-option, .ef-special-choice, .ef-choice, .ef-binary-option, .ef-symbol-rating__option, .ef-semantic-differential__scale label, .ef-matrix__choices label, .ef-pairwise__option):has(input:checked):has(input:focus-visible) {
+      outline-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .ef-choice:has(input:checked) .ef-choice__content > span { color: inherit; }
+
+    .ef-choice:has(input:checked)::before {
+      background: radial-gradient(circle, HighlightText 0 42%, transparent 44%);
+      border-color: HighlightText;
+    }
+
+    .ef-choice:has(input[type="checkbox"]:checked)::before {
+      background: HighlightText;
+      box-shadow: inset 0 0 0 3px Highlight;
+    }
+
     .ef-ordinal-option:has(input:checked) .ef-ordinal-option__marker {
+      forced-color-adjust: none;
       background: Highlight;
       color: HighlightText;
       border-color: HighlightText;

package/dist/build-metrics.json

@@ -7,146 +7,322 @@
     "brands/index.json",
     "components.css",
     "foundations.css",
+    "marketing.css",
+    "patterns/active-filter-summary.html",
     "patterns/alert.html",
     "patterns/allocation.html",
+    "patterns/attention-path.html",
+    "patterns/badge.html",
     "patterns/best-worst.html",
     "patterns/binary-choice.html",
+    "patterns/callout.html",
+    "patterns/card-grid.html",
+    "patterns/character-grid-3270.html",
+    "patterns/character-grid-field.html",
+    "patterns/character-grid-keys.html",
+    "patterns/character-grid-reveal.html",
+    "patterns/character-grid-selection.html",
+    "patterns/character-grid-status.html",
+    "patterns/character-grid-workflow.html",
+    "patterns/character-grid.html",
     "patterns/checkbox.html",
     "patterns/choice-group.html",
+    "patterns/cluster.html",
+    "patterns/code-sample.html",
     "patterns/collection-toolbar.html",
     "patterns/combobox.html",
+    "patterns/command-group.html",
     "patterns/command-palette.html",
+    "patterns/comparison-grid.html",
+    "patterns/comparison-pairs.html",
     "patterns/composer.html",
     "patterns/conflict-review.html",
     "patterns/conversation.html",
+    "patterns/cta.html",
     "patterns/dashboard-grid.html",
     "patterns/data-grid.html",
     "patterns/date-range.html",
+    "patterns/dense-ledger.html",
+    "patterns/diagnostic-status.html",
+    "patterns/diagram.html",
     "patterns/dialog.html",
     "patterns/diff-viewer.html",
     "patterns/disclosure.html",
+    "patterns/documentation-layout.html",
+    "patterns/emphasis-budget.html",
     "patterns/empty-state.html",
+    "patterns/entry-index.html",
+    "patterns/evidence-relationship.html",
+    "patterns/facts.html",
+    "patterns/fault-banner.html",
+    "patterns/fault-blocking.html",
+    "patterns/fault-details.html",
+    "patterns/fault-inline.html",
+    "patterns/fault-notification.html",
+    "patterns/fault-reference.html",
+    "patterns/fault-summary.html",
+    "patterns/fault.html",
+    "patterns/feed-item.html",
     "patterns/file-upload.html",
     "patterns/flyout.html",
+    "patterns/focus-stage.html",
+    "patterns/frame.html",
+    "patterns/freshness.html",
+    "patterns/handoff-summary.html",
+    "patterns/hero.html",
     "patterns/hierarchical-choice.html",
     "patterns/hierarchical-multi-choice.html",
+    "patterns/hierarchy-tree.html",
+    "patterns/identifier.html",
     "patterns/image-choice.html",
+    "patterns/landmark-region.html",
+    "patterns/lane-board.html",
+    "patterns/marketing-shell.html",
     "patterns/master-detail.html",
     "patterns/matrix-single.html",
+    "patterns/measure.html",
     "patterns/menu.html",
     "patterns/metric-card.html",
+    "patterns/metric-value-change.html",
     "patterns/mobile-action-bar.html",
+    "patterns/mosaic.html",
     "patterns/multi-choice.html",
+    "patterns/navigation-shell.html",
     "patterns/numeric-stepper.html",
     "patterns/obligation-panel.html",
     "patterns/operation-status.html",
     "patterns/ordinal-scale.html",
+    "patterns/overflow-command-disclosure.html",
+    "patterns/overview-disclosure.html",
     "patterns/pagination.html",
     "patterns/pairwise-choice.html",
+    "patterns/path-summary.html",
     "patterns/popover.html",
     "patterns/preview-surface.html",
+    "patterns/priority-stack.html",
+    "patterns/progress-bar.html",
+    "patterns/prose.html",
     "patterns/provenance-trail.html",
     "patterns/question.html",
+    "patterns/rail.html",
     "patterns/range-entry.html",
     "patterns/ranking.html",
     "patterns/readiness-checklist.html",
     "patterns/record-header.html",
+    "patterns/recovery-actions.html",
+    "patterns/relationship-index.html",
+    "patterns/reorder-states.html",
+    "patterns/resizable-split-pane.html",
+    "patterns/responsive-grid.html",
     "patterns/rule-builder.html",
+    "patterns/scope-trail.html",
+    "patterns/scroll-progress.html",
     "patterns/search.html",
+    "patterns/section-heading.html",
+    "patterns/security-blockers.html",
+    "patterns/security-evidence-age.html",
+    "patterns/security-evidence-chain.html",
+    "patterns/security-exception.html",
+    "patterns/security-invariant-result.html",
+    "patterns/security-posture.html",
+    "patterns/security-state-matrix.html",
+    "patterns/security-trend.html",
+    "patterns/security-unknown.html",
     "patterns/segmented-control.html",
     "patterns/select.html",
     "patterns/semantic-differential.html",
+    "patterns/sidebar.html",
+    "patterns/site-footer.html",
+    "patterns/site-header.html",
     "patterns/skeleton.html",
     "patterns/slider.html",
+    "patterns/spatial-canvas.html",
     "patterns/special-choice.html",
+    "patterns/spinner.html",
+    "patterns/split-pane.html",
+    "patterns/stack.html",
+    "patterns/state-survivability.html",
     "patterns/status-lozenge.html",
+    "patterns/steps.html",
     "patterns/survey-progress.html",
     "patterns/switch.html",
+    "patterns/switcher.html",
     "patterns/symbol-rating.html",
     "patterns/tabs.html",
     "patterns/timeline.html",
     "patterns/toast.html",
+    "patterns/tooltip.html",
     "patterns/understanding.html",
     "patterns/validation-message.html",
     "patterns/validation-summary.html",
+    "patterns/verification-frame.html",
     "patterns/wizard.html",
     "patterns/work-queue.html",
+    "patterns/workspace-shell.html",
     "skins.css",
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 102460,
-    "assessment.css": 32070,
+    "all.css": 300750,
+    "assessment.css": 34482,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 62742,
-    "foundations.css": 3834,
+    "components.css": 189629,
+    "foundations.css": 10639,
+    "marketing.css": 45073,
+    "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,
     "patterns/allocation.html": 1033,
+    "patterns/attention-path.html": 1493,
+    "patterns/badge.html": 411,
     "patterns/best-worst.html": 1268,
     "patterns/binary-choice.html": 652,
+    "patterns/callout.html": 1408,
+    "patterns/card-grid.html": 1032,
+    "patterns/character-grid-3270.html": 4693,
+    "patterns/character-grid-field.html": 3425,
+    "patterns/character-grid-keys.html": 2766,
+    "patterns/character-grid-reveal.html": 2002,
+    "patterns/character-grid-selection.html": 5244,
+    "patterns/character-grid-status.html": 1267,
+    "patterns/character-grid-workflow.html": 20814,
+    "patterns/character-grid.html": 1311,
     "patterns/checkbox.html": 503,
     "patterns/choice-group.html": 869,
+    "patterns/cluster.html": 197,
+    "patterns/code-sample.html": 349,
     "patterns/collection-toolbar.html": 1203,
     "patterns/combobox.html": 583,
+    "patterns/command-group.html": 307,
     "patterns/command-palette.html": 745,
+    "patterns/comparison-grid.html": 444,
+    "patterns/comparison-pairs.html": 770,
     "patterns/composer.html": 1074,
     "patterns/conflict-review.html": 854,
     "patterns/conversation.html": 1009,
+    "patterns/cta.html": 597,
     "patterns/dashboard-grid.html": 590,
     "patterns/data-grid.html": 1316,
     "patterns/date-range.html": 519,
+    "patterns/dense-ledger.html": 526,
+    "patterns/diagnostic-status.html": 303,
+    "patterns/diagram.html": 4260,
     "patterns/dialog.html": 622,
     "patterns/diff-viewer.html": 851,
     "patterns/disclosure.html": 222,
+    "patterns/documentation-layout.html": 844,
+    "patterns/emphasis-budget.html": 1523,
     "patterns/empty-state.html": 319,
+    "patterns/entry-index.html": 914,
+    "patterns/evidence-relationship.html": 466,
+    "patterns/facts.html": 342,
+    "patterns/fault-banner.html": 845,
+    "patterns/fault-blocking.html": 1183,
+    "patterns/fault-details.html": 508,
+    "patterns/fault-inline.html": 734,
+    "patterns/fault-notification.html": 964,
+    "patterns/fault-reference.html": 198,
+    "patterns/fault-summary.html": 886,
+    "patterns/fault.html": 745,
+    "patterns/feed-item.html": 574,
     "patterns/file-upload.html": 867,
     "patterns/flyout.html": 2488,
+    "patterns/focus-stage.html": 377,
+    "patterns/frame.html": 365,
+    "patterns/freshness.html": 187,
+    "patterns/handoff-summary.html": 686,
+    "patterns/hero.html": 1066,
     "patterns/hierarchical-choice.html": 919,
     "patterns/hierarchical-multi-choice.html": 1086,
+    "patterns/hierarchy-tree.html": 480,
+    "patterns/identifier.html": 617,
     "patterns/image-choice.html": 878,
+    "patterns/landmark-region.html": 265,
+    "patterns/lane-board.html": 710,
+    "patterns/marketing-shell.html": 2405,
     "patterns/master-detail.html": 792,
     "patterns/matrix-single.html": 1422,
+    "patterns/measure.html": 203,
     "patterns/menu.html": 377,
     "patterns/metric-card.html": 317,
+    "patterns/metric-value-change.html": 660,
     "patterns/mobile-action-bar.html": 233,
+    "patterns/mosaic.html": 517,
     "patterns/multi-choice.html": 1174,
+    "patterns/navigation-shell.html": 565,
     "patterns/numeric-stepper.html": 313,
     "patterns/obligation-panel.html": 1411,
     "patterns/operation-status.html": 583,
     "patterns/ordinal-scale.html": 1917,
+    "patterns/overflow-command-disclosure.html": 261,
+    "patterns/overview-disclosure.html": 601,
     "patterns/pagination.html": 512,
     "patterns/pairwise-choice.html": 811,
+    "patterns/path-summary.html": 456,
     "patterns/popover.html": 358,
     "patterns/preview-surface.html": 798,
+    "patterns/priority-stack.html": 366,
+    "patterns/progress-bar.html": 682,
+    "patterns/prose.html": 539,
     "patterns/provenance-trail.html": 711,
     "patterns/question.html": 590,
+    "patterns/rail.html": 302,
     "patterns/range-entry.html": 852,
     "patterns/ranking.html": 1635,
     "patterns/readiness-checklist.html": 772,
     "patterns/record-header.html": 777,
+    "patterns/recovery-actions.html": 340,
+    "patterns/relationship-index.html": 461,
+    "patterns/reorder-states.html": 1940,
+    "patterns/resizable-split-pane.html": 814,
+    "patterns/responsive-grid.html": 417,
     "patterns/rule-builder.html": 1081,
+    "patterns/scope-trail.html": 188,
+    "patterns/scroll-progress.html": 446,
     "patterns/search.html": 385,
+    "patterns/section-heading.html": 528,
+    "patterns/security-blockers.html": 399,
+    "patterns/security-evidence-age.html": 370,
+    "patterns/security-evidence-chain.html": 432,
+    "patterns/security-exception.html": 409,
+    "patterns/security-invariant-result.html": 472,
+    "patterns/security-posture.html": 1218,
+    "patterns/security-state-matrix.html": 483,
+    "patterns/security-trend.html": 571,
+    "patterns/security-unknown.html": 401,
     "patterns/segmented-control.html": 403,
     "patterns/select.html": 589,
     "patterns/semantic-differential.html": 1667,
+    "patterns/sidebar.html": 384,
+    "patterns/site-footer.html": 702,
+    "patterns/site-header.html": 922,
     "patterns/skeleton.html": 354,
     "patterns/slider.html": 403,
+    "patterns/spatial-canvas.html": 951,
     "patterns/special-choice.html": 568,
+    "patterns/spinner.html": 175,
+    "patterns/split-pane.html": 348,
+    "patterns/stack.html": 353,
+    "patterns/state-survivability.html": 999,
     "patterns/status-lozenge.html": 358,
+    "patterns/steps.html": 287,
     "patterns/survey-progress.html": 446,
     "patterns/switch.html": 506,
+    "patterns/switcher.html": 386,
     "patterns/symbol-rating.html": 1493,
     "patterns/tabs.html": 741,
     "patterns/timeline.html": 902,
     "patterns/toast.html": 525,
+    "patterns/tooltip.html": 2188,
     "patterns/understanding.html": 1554,
     "patterns/validation-message.html": 180,
     "patterns/validation-summary.html": 530,
+    "patterns/verification-frame.html": 1245,
     "patterns/wizard.html": 817,
     "patterns/work-queue.html": 971,
+    "patterns/workspace-shell.html": 479,
     "skins.css": 924,
-    "tokens.css": 3811
+    "tokens.css": 20923
   }
 }