@happyvertical/smrt-ui 0.55.19 → 0.55.21

package/dist/components/data/DataTable.svelte

@@ -2351,5 +2351,10 @@ $effect(() => {
   .data-table-container--narrow .data-table { table-layout: fixed; }
   .data-table-container--narrow .data-table__cell { white-space: normal; overflow-wrap: anywhere; }
   .data-table-container--narrow .data-table__sort-button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .data-table__row--selected, .data-table__row--selected .data-table__cell--pinned-start, .data-table__row--selected .data-table__cell--pinned-end { background: Canvas; }
+    .data-table__row--selected { outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
+  }
 }
 </style>

package/dist/components/feedback/Alert.svelte

@@ -60,5 +60,10 @@ const role = $derived(
   .dismiss { width: 2rem; height: 2rem; margin: -.35rem; border: 0; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer; }
   .dismiss:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
   .dismiss:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .alert { background: Canvas; border-color: CanvasText; }
+    .marker { background: CanvasText; }
+  }
 }
 </style>

package/dist/components/feedback/Progress.svelte

@@ -68,5 +68,12 @@ const displayValue = $derived(
   .progress--circular > span { position: absolute; font: var(--smrt-typography-label-small-font); }
   @keyframes linear-progress { from { left: -40%; } to { left: 105%; } } @keyframes spin { to { transform: rotate(270deg); } }
   @media (prefers-reduced-motion: reduce) { .progress--linear .indicator, .progress--circular .indicator { transition: none; } .progress--linear.indeterminate .indicator { animation-duration: 2.5s; } }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .progress--linear .track { background: Canvas; border: var(--smrt-hairline-strong); }
+    .progress--linear .indicator { background: Highlight; }
+    .progress--circular .track { stroke: CanvasText; }
+    .progress--circular .indicator { stroke: Highlight; }
+  }
 }
 </style>

package/dist/components/forms/Checkbox.svelte

@@ -193,5 +193,14 @@ useControlRegistration(() => {
   .checkbox[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .checkbox[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .checkbox { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .checkbox__box { background: Canvas; border-color: CanvasText; }
+    input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: Highlight; border-color: Highlight; color: HighlightText; }
+    .checkbox__dash { background: HighlightText; }
+    .checkbox--disabled { opacity: 1; color: GrayText; }
+    .checkbox--disabled .checkbox__box, .checkbox--disabled input:checked + .checkbox__box, .checkbox--disabled input:indeterminate + .checkbox__box { background: Canvas; border-color: GrayText; color: GrayText; }
+    .checkbox--disabled .checkbox__dash { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/Radio.svelte

@@ -48,5 +48,14 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
 
   /* Table cells: grow vertically only, never into a neighbouring cell. */
   :global(:is(td, th)) .radio::before { inline-size: var(--smrt-radio-box); margin-inline-start: calc(var(--smrt-radio-box) / -2); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .radio__mark { border-color: CanvasText; }
+    .radio__mark::after { background: Highlight; }
+    input:checked + .radio__mark { border-color: Highlight; }
+    .radio.disabled { opacity: 1; color: GrayText; }
+    .radio.disabled .radio__mark, .radio.disabled input:checked + .radio__mark { border-color: GrayText; }
+    .radio.disabled .radio__mark::after { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/SegmentedControl.svelte

@@ -263,5 +263,10 @@ useControlRegistration(() => {
   .segmented[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   label { min-height: max(2.5rem, var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
   input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    label.selected { background: Highlight; color: HighlightText; }
+    label.disabled, label:has(input:disabled), label.selected.disabled, label.selected:has(input:disabled) { opacity: 1; background: Canvas; color: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/Switch.svelte

@@ -155,5 +155,15 @@ useControlRegistration(() => {
   .switch[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .switch[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .switch { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .switch__track { background: Canvas; border-color: CanvasText; }
+    .switch__thumb { background: CanvasText; }
+    input:checked + .switch__track { background: Highlight; border-color: Highlight; }
+    input:checked + .switch__track .switch__thumb { background: HighlightText; }
+    .switch--disabled { opacity: 1; color: GrayText; }
+    .switch--disabled .switch__track, .switch--disabled input:checked + .switch__track { background: Canvas; border-color: GrayText; }
+    .switch--disabled .switch__thumb, .switch--disabled input:checked + .switch__track .switch__thumb { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/Toggle.svelte

@@ -223,5 +223,17 @@ const sizeClasses = {
       transition: none;
     }
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .toggle__thumb, .toggle:not(.toggle--disabled):hover .toggle__thumb { background: Canvas; outline: var(--smrt-hairline-strong); outline-offset: 0; }
+    .toggle__input:checked + .toggle__thumb, .toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb { background: Highlight; outline-color: Highlight; }
+    .toggle__thumb::after { background: CanvasText; }
+    .toggle__input:checked + .toggle__thumb::after { background: HighlightText; }
+    .toggle__input:focus-visible + .toggle__thumb { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+    .toggle--disabled { opacity: 1; color: GrayText; }
+    .toggle--disabled .toggle__label { color: GrayText; }
+    .toggle--disabled .toggle__thumb, .toggle--disabled .toggle__input:checked + .toggle__thumb { background: Canvas; outline-color: GrayText; }
+    .toggle--disabled .toggle__thumb::after, .toggle--disabled .toggle__input:checked + .toggle__thumb::after { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/ToggleButton.svelte

@@ -99,5 +99,10 @@ useControlRegistration(() => {
   .toggle-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .toggle-button:disabled { opacity: .5; cursor: not-allowed; }
   .toggle-button[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .toggle-button.pressed { background: Highlight; color: HighlightText; border-color: Highlight; }
+    .toggle-button:disabled, .toggle-button.pressed:disabled { opacity: 1; background: Canvas; color: GrayText; border-color: GrayText; }
+  }
 }
 </style>

package/dist/components/nav/FilterChips.svelte

@@ -158,5 +158,10 @@ function handleClick(value: string) {
   .filter-chips[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .filter-chips[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .filter-chip { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .filter-chip.active { background-color: Highlight; color: HighlightText; border-color: Highlight; }
+    .filter-chip:disabled, .filter-chip.active:disabled { opacity: 1; background: Canvas; color: GrayText; border-color: GrayText; }
+  }
 }
 </style>

package/dist/components/nav/Tabs.svelte

@@ -523,5 +523,15 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .active-indicator { background-color: Highlight; }
+    .tab-button.active, .tab-link.active { color: Highlight; }
+    .tab-link { border-bottom-color: Canvas; }
+    .tab-link.active { border-bottom-color: Highlight; }
+    .tab-dot { background: CanvasText; }
+    .tab-badge { background: Canvas; border: var(--smrt-hairline-strong); }
+    .tab-button:disabled, .tab-link[aria-disabled='true'] { opacity: 1; color: GrayText; }
+  }
 }
 </style>

package/dist/components/ui/Badge.svelte

@@ -73,5 +73,9 @@ const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .badge { background: Canvas; color: CanvasText; border-color: CanvasText; }
+  }
 }
 </style>

package/dist/components/ui/Chip.svelte

@@ -190,5 +190,10 @@ const {
     outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
     outline-offset: var(--smrt-focus-ring-offset);
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .chip.selected { border-color: Highlight; outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
+    .chip.disabled, .chip.selected.disabled { opacity: 1; color: GrayText; border-color: GrayText; outline-color: GrayText; }
+  }
 }
 </style>

package/dist/components/ui/IconToggle.svelte

@@ -138,5 +138,11 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .icon-toggle.pressed { background: Highlight; color: HighlightText; border-color: Highlight; }
+    .icon-toggle.pressed:not(:focus-visible) { outline: var(--smrt-focus-ring-width) solid CanvasText; outline-offset: calc(-2 * var(--smrt-focus-ring-width)); }
+    .icon-toggle:disabled, .icon-toggle.pressed:disabled { opacity: 1; background: Canvas; color: GrayText; border-color: GrayText; }
+  }
 }
 </style>

package/dist/themes/README.md

@@ -323,11 +323,65 @@ Behaviour notes (state exposed on context: `contrast`, `isChangingScheme`):
   the root and `<html>` for one `--smrt-duration-scheme`, so styles can crossfade.
   Never on first paint; skipped under `prefers-reduced-motion: reduce`.
 - Contrast: `data-contrast="standard|more|forced"` on `<html>` and the root;
-  `forced-colors: active` also sets `data-forced-colors`. Contract for components in
-  forced-colors mode: do not paint over system colours, hairlines become `CanvasText`
-  and focus rings `Highlight` (component side: #3867 follow-up).
+  `forced-colors: active` also sets `data-forced-colors`. See [Forced colors](#forced-colors).
 - `themeScript()` stamps `data-contrast` and (when persisted) `data-density` pre-paint.
 
+## Forced colors
+
+Windows High Contrast (`forced-colors: active`) replaces author colours with the user's
+system palette. The theme layer and the components cooperate so nothing paints over it.
+
+**Token level** (`styles/base.css`, mirrored by `FORCED_COLORS_TOKENS` in
+`forced-colors.ts`). Under `@media (forced-colors: active)` and `[data-forced-colors]`
+(stamped by `ThemeProvider` and `themeScript()` only while the media query matches; a test
+can set it without emulation) the theme tokens below are redefined. Surface, text and
+primary colours are not mapped: in forced-colors mode the browser already replaces them
+with the system palette, so the map covers only what it cannot see through (shadows,
+blur, translucent state layers, custom-property colours used outside colour properties):
+
+| Token | Forced value |
+| --- | --- |
+| `--smrt-hairline-color` / `-strong-color` and the `--smrt-hairline*` shorthands | `CanvasText` |
+| `--smrt-focus-ring-color` / `-width` / `-offset` | `Highlight` / `3px` / `2px` |
+| `--smrt-inset-highlight`, `--smrt-elevation-0..5` | transparent shadows (never `none`: components compose `box-shadow` lists) |
+| `--smrt-glass-blur` / `-saturation` | `0px` / `100%` |
+| `--smrt-glass-surface(-strong)`, `--smrt-surface-overlay` | `Canvas` (scrim and glass edges also `CanvasText`) |
+| `--smrt-state-hover/pressed/selected/focus/dragged` | `0` (a translucent fill cannot be seen) |
+| `--smrt-accent-color`, selection, caret, scrollbar | `Highlight`, `HighlightText`, `CanvasText` |
+
+These blocks are deliberately **unlayered**. Preset stylesheets declare their tokens
+unlayered on `[data-theme][data-color-scheme]`, and an unlayered rule always beats a
+layered one, so a layered override would never apply. The selectors out-rank the preset
+block by one attribute. While forced, `ThemeProvider` also appends the same map to the
+root inline style (after generated variables and `primaryColor`, before explicit
+`overrides`), so runtime themes and `primaryColor` cannot win.
+
+**Generic rules** (in `smrt.theme`, zero specificity, so a component rule always wins):
+hover is a 1px `Highlight` outline instead of a state-layer fill, disabled controls use
+`GrayText`, and elements that rely on the UA focus ring get the token ring.
+
+**Components** add `@media (forced-colors: active)` rules only where colour alone carried
+meaning, using system colours: `Canvas`, `CanvasText`, `Highlight`, `HighlightText`,
+`GrayText` (and `LinkText` and friends for chart series). Switch, Toggle, Checkbox and
+Radio fill their track, box or mark with `Highlight`; Tabs draw the `Highlight` indicator
+only on the current tab; Chip, FilterChips, SegmentedControl, ToggleButton, IconToggle
+and the selected DataTable row get a `Highlight` fill or outline; Badge and Alert keep
+text and border without the tinted fill; Progress uses `Highlight`/`CanvasText`. The shell
+(TenantNav, phone tab bar, dock toggles, account trigger, focus tools) keeps its selected
+and open states, e.g. the tenant nav start bar becomes `Highlight` and the row is bold.
+Component rules use the media query only (no attribute mirror); the attribute path exists
+for the token layer.
+
+**Exceptions to `forced-color-adjust: auto`**: none are needed today, because system
+colour keywords survive the adjustment. A component that must show an author colour to be
+understood (a colour picker or swatch) sets `forced-color-adjust: none` on that element
+only and documents why. Chart series cycle system colours by slot and the legend always
+carries label, value and share as text.
+
+Verification: Chromium e2e with `page.emulateMedia({ forcedColors: 'active' })` in
+`e2e/forced-colors.spec.ts` (smrt-ui), `packages/smrt-svelte/e2e/forced-colors.spec.ts`
+(shell) and the playground host. Unit parity test: `src/themes/__tests__/forced-colors.test.ts`.
+
 ## Theme Switching
 
 Use the context to switch themes programmatically:

package/dist/themes/ThemeProvider.svelte

@@ -5,6 +5,7 @@ import { SMRT_CASCADE_LAYERS_CSS } from '../styles/layers.js';
 import { setThemeContext, type ThemeContext } from './context.svelte.js';
 import { derivePrimaryOverrides } from './create-theme.js';
 import { generateThemeVariables } from './css-generator.js';
+import { FORCED_COLORS_TOKENS } from './forced-colors.js';
 import { availablePresets, getTheme, isValidPreset } from './registry.js';
 import type {
   ColorScheme,
@@ -190,6 +191,14 @@ const styleString = $derived.by(() => {
     );
   }
 
+  // Forced colors (#3908): system palette beats every preset, runtime theme and
+  // primaryColor value; explicit `overrides` still win below.
+  if (resolvedContrast === 'forced') {
+    for (const [key, value] of Object.entries(FORCED_COLORS_TOKENS)) {
+      declarations.push(`${key}: ${value}`);
+    }
+  }
+
   // Apply custom overrides
   for (const [key, value] of Object.entries(config.overrides ?? {})) {
     declarations.push(`${key}: ${value}`);

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqdD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AA8dD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/forced-colors.d.ts

@@ -0,0 +1,2 @@
+export declare const FORCED_COLORS_TOKENS: Readonly<Record<string, string>>;
+//# sourceMappingURL=forced-colors.d.ts.map

package/dist/themes/forced-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors.d.ts","sourceRoot":"","sources":["../../src/themes/forced-colors.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgCjE,CAAC"}

package/dist/themes/forced-colors.js

@@ -0,0 +1,49 @@
+/**
+ * Forced-colors (Windows High Contrast) token overrides (#3908).
+ *
+ * The single source for the theme-level contract documented in
+ * `themes/README.md` ("Forced colors"). `styles/base.css` carries the same
+ * declarations for stylesheet-only delivery (under `@media (forced-colors:
+ * active)` and `[data-forced-colors]`); `ThemeProvider` appends them to the
+ * root inline style while forced colors are active so a runtime theme or an
+ * inline `primaryColor` cannot paint over the system palette. A unit test keeps
+ * the two copies in step.
+ *
+ * Values are system colour keywords or inert shadows. Elevations are
+ * transparent shadows, never `none`, because components compose `box-shadow`
+ * lists such as `var(--smrt-inset-highlight), var(--smrt-elevation-3)`.
+ */
+const INERT_SHADOW = '0 0 0 0 transparent';
+export const FORCED_COLORS_TOKENS = {
+    '--smrt-hairline-color': 'CanvasText',
+    '--smrt-hairline-strong-color': 'CanvasText',
+    '--smrt-hairline': '1px solid CanvasText',
+    '--smrt-hairline-strong': '1px solid CanvasText',
+    '--smrt-inset-highlight': 'inset 0 0 0 0 transparent',
+    '--smrt-elevation-0': INERT_SHADOW,
+    '--smrt-elevation-1': INERT_SHADOW,
+    '--smrt-elevation-2': INERT_SHADOW,
+    '--smrt-elevation-3': INERT_SHADOW,
+    '--smrt-elevation-4': INERT_SHADOW,
+    '--smrt-elevation-5': INERT_SHADOW,
+    '--smrt-focus-ring-color': 'Highlight',
+    '--smrt-focus-ring-width': '3px',
+    '--smrt-focus-ring-offset': '2px',
+    '--smrt-glass-blur': '0px',
+    '--smrt-glass-saturation': '100%',
+    '--smrt-glass-surface': 'Canvas',
+    '--smrt-glass-surface-strong': 'Canvas',
+    '--smrt-glass-border': 'CanvasText',
+    '--smrt-surface-overlay': 'Canvas',
+    '--smrt-state-hover': '0',
+    '--smrt-state-pressed': '0',
+    '--smrt-state-selected': '0',
+    '--smrt-state-focus': '0',
+    '--smrt-state-dragged': '0',
+    '--smrt-accent-color': 'Highlight',
+    '--smrt-caret-color': 'CanvasText',
+    '--smrt-selection-background': 'Highlight',
+    '--smrt-selection-color': 'HighlightText',
+    '--smrt-scrollbar-thumb': 'CanvasText',
+    '--smrt-scrollbar-track': 'Canvas',
+};

package/dist/themes/styles/base.css

@@ -1,5 +1,8 @@
 
-@layer smrt.reset, smrt.structure, smrt.theme;/**
+@layer smrt.reset, smrt.structure, smrt.theme;
+@import url('./forced-colors.css') (forced-colors: active);
+
+/**
  * Application baseline for SMRT interfaces.
  *
  * Import this once at an application entry point, alongside the selected
@@ -257,3 +260,79 @@ time,
   }
 }
 }
+
+/*
+ * Forced colors (#3908). Token level: Windows High Contrast / `forced-colors:
+ * active` maps the theme onto the system palette. These two token blocks are
+ * deliberately UNLAYERED: preset stylesheets declare their tokens unlayered on
+ * `[data-theme][data-color-scheme]`, and an unlayered rule always beats a
+ * layered one, so a layered override would never apply. The selectors match
+ * whichever element carries the theme attributes (document root, ThemeProvider
+ * root or a consumer wrapper) with one more attribute selector than the preset
+ * block. The `forced-colors: active` media case is the conditional `@import`
+ * at the top of this file (forced-colors.css); the attribute case is the
+ * block below. The same values ship as
+ * `FORCED_COLORS_TOKENS` (src/themes/forced-colors.ts): ThemeProvider appends
+ * them inline so runtime themes cannot win; a unit test keeps both in step.
+ * `[data-forced-colors]` is stamped by ThemeProvider and `themeScript()`;
+ * tests can set it without media emulation. Components only consume tokens.
+ */
+
+[data-forced-colors][data-theme][data-color-scheme] {
+  --smrt-hairline-color: CanvasText;
+  --smrt-hairline-strong-color: CanvasText;
+  --smrt-hairline: 1px solid CanvasText;
+  --smrt-hairline-strong: 1px solid CanvasText;
+  --smrt-inset-highlight: inset 0 0 0 0 transparent;
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 0 0 0 transparent;
+  --smrt-elevation-2: 0 0 0 0 transparent;
+  --smrt-elevation-3: 0 0 0 0 transparent;
+  --smrt-elevation-4: 0 0 0 0 transparent;
+  --smrt-elevation-5: 0 0 0 0 transparent;
+  --smrt-focus-ring-color: Highlight;
+  --smrt-focus-ring-width: 3px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-glass-blur: 0px;
+  --smrt-glass-saturation: 100%;
+  --smrt-glass-surface: Canvas;
+  --smrt-glass-surface-strong: Canvas;
+  --smrt-glass-border: CanvasText;
+  --smrt-surface-overlay: Canvas;
+  --smrt-state-hover: 0;
+  --smrt-state-pressed: 0;
+  --smrt-state-selected: 0;
+  --smrt-state-focus: 0;
+  --smrt-state-dragged: 0;
+  --smrt-accent-color: Highlight;
+  --smrt-caret-color: CanvasText;
+  --smrt-selection-background: Highlight;
+  --smrt-selection-color: HighlightText;
+  --smrt-scrollbar-thumb: CanvasText;
+  --smrt-scrollbar-track: Canvas;
+}
+
+/*
+ * A translucent state-layer fill cannot be seen in forced colors, so hover is
+ * an outline instead. :where() keeps specificity at zero: every component's own
+ * focus, selected or outline rule still wins.
+ */
+@layer smrt.theme {
+@media (forced-colors: active) {
+  :where(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], a[href], summary, label):where(:hover):where(:not(:disabled, [aria-disabled="true"])) {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+
+  :where(:disabled, [aria-disabled="true"]) {
+    color: GrayText;
+  }
+
+  /* Elements that rely on the UA focus ring get the token ring instead (a
+     solid Highlight ring of a stated width); component rules still win. */
+  :where(a[href], button, summary, input, select, textarea, [tabindex], [role="tab"], [role="menuitem"], [role="option"]):where(:focus-visible) {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+}
+}

package/dist/themes/styles/forced-colors.css

@@ -0,0 +1,42 @@
+/*
+ * Forced colors token layer (#3908), loaded by base.css as
+ * `@import url('./forced-colors.css') (forced-colors: active)`. Deliberately
+ * UNLAYERED (and a declaration-only block): preset stylesheets declare their
+ * tokens unlayered on `[data-theme][data-color-scheme]`, and an unlayered rule
+ * always beats a layered one. The repeated `[data-theme]` out-ranks that block
+ * by one attribute. Values mirror `FORCED_COLORS_TOKENS`
+ * (src/themes/forced-colors.ts); a unit test keeps the copies in step.
+ */
+[data-theme][data-theme][data-color-scheme] {
+  --smrt-hairline-color: CanvasText;
+  --smrt-hairline-strong-color: CanvasText;
+  --smrt-hairline: 1px solid CanvasText;
+  --smrt-hairline-strong: 1px solid CanvasText;
+  --smrt-inset-highlight: inset 0 0 0 0 transparent;
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 0 0 0 transparent;
+  --smrt-elevation-2: 0 0 0 0 transparent;
+  --smrt-elevation-3: 0 0 0 0 transparent;
+  --smrt-elevation-4: 0 0 0 0 transparent;
+  --smrt-elevation-5: 0 0 0 0 transparent;
+  --smrt-focus-ring-color: Highlight;
+  --smrt-focus-ring-width: 3px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-glass-blur: 0px;
+  --smrt-glass-saturation: 100%;
+  --smrt-glass-surface: Canvas;
+  --smrt-glass-surface-strong: Canvas;
+  --smrt-glass-border: CanvasText;
+  --smrt-surface-overlay: Canvas;
+  --smrt-state-hover: 0;
+  --smrt-state-pressed: 0;
+  --smrt-state-selected: 0;
+  --smrt-state-focus: 0;
+  --smrt-state-dragged: 0;
+  --smrt-accent-color: Highlight;
+  --smrt-caret-color: CanvasText;
+  --smrt-selection-background: Highlight;
+  --smrt-selection-color: HighlightText;
+  --smrt-scrollbar-thumb: CanvasText;
+  --smrt-scrollbar-track: Canvas;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.55.19",
+  "version": "0.55.21",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -155,7 +155,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.55.19",
+    "@happyvertical/smrt-types": "0.55.21",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {