@happyvertical/smrt-ui 0.55.20 → 0.55.22

package/dist/components/ui/Chip.svelte

@@ -45,16 +45,16 @@ const {
 </script>
 
 <span
-  class="chip {size}"
-  class:selected
-  class:disabled
-  class:selectable
-  class:closeable data-smrt-component="Chip"
+  class="smrt-chip__root smrt-chip__{size}"
+  class:smrt-chip__selected={selected}
+  class:smrt-chip__disabled={disabled}
+  class:smrt-chip__selectable={selectable}
+  class:smrt-chip__closeable={closeable} data-smrt-component="Chip"
 >
   {#if selectable}
     <button
       type="button"
-      class="chip__body"
+      class="smrt-chip__body" data-smrt-part="body"
       aria-pressed={selected}
       {disabled}
       onclick={() => onselect?.()}
@@ -62,7 +62,7 @@ const {
       {#if children}{@render children()}{:else}{label}{/if}
     </button>
   {:else}
-    <span class="chip__body">
+    <span class="smrt-chip__body" data-smrt-part="body">
       {#if children}{@render children()}{:else}{label}{/if}
     </span>
   {/if}
@@ -70,7 +70,7 @@ const {
   {#if closeable}
     <button
       type="button"
-      class="chip__close"
+      class="smrt-chip__close" data-smrt-part="close"
       aria-label={label ? `Remove ${label}` : 'Remove'}
       {disabled}
       onclick={() => onclose?.()}
@@ -94,101 +94,111 @@ const {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .chip {
+@layer smrt.structure {
+  .smrt-chip__root {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1);
+    max-width: 100%;
+  }
+  .smrt-chip__root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .smrt-chip__root.smrt-chip__sm {
+    padding: 0 var(--smrt-spacing-1);
+  }
+  .smrt-chip__root.smrt-chip__md {
+    min-block-size: var(--smrt-control-height-small);
+    padding: 0 var(--smrt-spacing-2);
+  }
+  .smrt-chip__root.smrt-chip__disabled {
+    pointer-events: none;
+  }
+  .smrt-chip__body {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .smrt-chip__root.smrt-chip__selectable .smrt-chip__body {
+    cursor: pointer;
+  }
+  .smrt-chip__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: var(--smrt-spacing-1);
+  }
+}
+@layer smrt.theme {
+  .smrt-chip__root {
     border-radius: var(--smrt-control-radius);
     background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
     border: var(--smrt-hairline);
     font-weight: var(--smrt-control-weight);
-    max-width: 100%;
   }
-
-  /* State layer: currentColor mixed at the theme's state opacity. */
-  .chip::after {
-    content: '';
-    position: absolute;
-    inset: 0;
+  .smrt-chip__root::after {
     border-radius: inherit;
     background: transparent;
-    pointer-events: none;
   }
-
-  .chip.selectable:hover::after {
+  .smrt-chip__root.smrt-chip__selectable:hover::after {
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
-
-  .chip.selectable:active::after {
+  .smrt-chip__root.smrt-chip__selectable:active::after {
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
-
-  .chip.sm {
-    padding: 0 var(--smrt-spacing-1);
-    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+  .smrt-chip__root.smrt-chip__sm {
+    font-size: var(--smrt-typography-label-small-size);
   }
-  .chip.sm {
+  .smrt-chip__root.smrt-chip__sm {
     border-radius: var(--smrt-control-radius-small);
   }
-  .chip.md {
-    min-block-size: var(--smrt-control-height-small);
-    padding: 0 var(--smrt-spacing-2);
-    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  .smrt-chip__root.smrt-chip__md {
+    font-size: var(--smrt-typography-label-large-size);
   }
-
-  .chip.selected {
+  .smrt-chip__root.smrt-chip__selected {
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
     border-color: var(--smrt-color-primary);
   }
-
-  .chip.disabled {
+  .smrt-chip__root.smrt-chip__disabled {
     opacity: var(--smrt-state-disabled);
-    pointer-events: none;
   }
-
-  .chip__body {
+  .smrt-chip__body {
     appearance: none;
     background: none;
     border: none;
     color: inherit;
     font: inherit;
-    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
-    cursor: default;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
-
-  .chip.selectable .chip__body {
-    cursor: pointer;
-  }
-
-  .chip__close {
+  .smrt-chip__close {
     appearance: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     background: none;
     border: none;
     color: inherit;
-    cursor: pointer;
-    padding: var(--smrt-spacing-1);
     border-radius: var(--smrt-radius-full);
     opacity: 0.7;
   }
-  .chip__close:hover {
+  .smrt-chip__close:hover {
     opacity: 1;
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
-
-  .chip__body:focus-visible,
-  .chip__close:focus-visible {
+  .smrt-chip__body:focus-visible,
+  .smrt-chip__close: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) {
+    .smrt-chip__root.smrt-chip__selected { border-color: Highlight; outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
+    .smrt-chip__root.smrt-chip__disabled, .smrt-chip__root.smrt-chip__selected.smrt-chip__disabled { opacity: 1; color: GrayText; border-color: GrayText; outline-color: GrayText; }
+  }
 }
 </style>

package/dist/components/ui/Disclosure.svelte

@@ -46,7 +46,7 @@ function handleToggle(event: Event) {
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .disclosure { border-bottom: 1px solid var(--smrt-color-outline-variant); color: var(--smrt-color-on-surface); }
+  .disclosure { border-bottom: var(--smrt-hairline); color: var(--smrt-color-on-surface); }
   summary { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) 0; font: var(--smrt-typography-title-small-font); cursor: pointer; list-style: none; }
   summary::-webkit-details-marker { display: none; }
   summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }

package/dist/components/ui/IconToggle.svelte

@@ -79,7 +79,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     min-width: 2.75rem;
     min-height: 2.75rem;
     padding: 0;
-    border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container, var(--smrt-color-surface));
     color: var(--smrt-color-on-surface);
@@ -129,7 +129,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     /* Outlined, not filled: a surface-coloured face (so the button's edge does
        not show through where the badge overlaps it), a 1px theme outline and
        neutral text, readable on light and dark themes alike. */
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface-variant);
     font-size: 0.68rem;
@@ -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/styles/unstyled.css

@@ -10,8 +10,8 @@
  * CSS, the --smrt-* tokens, or the data-smrt-component / data-smrt-part hooks.
  *
  * The reverted property list is explicit on purpose. `all: revert-layer` would
- * also drop layout declarations, because until per-package structure/theme
- * sorting lands every component rule sits in smrt.theme. Keep this list in
+ * also drop layout from unsorted components, including those nested inside
+ * the ten wave-2 pilot primitives. Keep this list in
  * step with the "Styleless mode" section of agents/styling.md.
  */
 @layer smrt.reset, smrt.structure, smrt.theme;

package/dist/svelte/playground/BaseControlsPreview.svelte

@@ -133,7 +133,7 @@ function handleSubmit() {
 
   .workbench__header {
     padding-bottom: var(--smrt-spacing-4);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   h4,
@@ -193,7 +193,7 @@ function handleSubmit() {
   .actions {
     align-items: flex-start;
     padding-top: var(--smrt-spacing-5);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .save-status {

package/dist/svelte/playground/CollectionsPreview.svelte

@@ -55,7 +55,7 @@ const filtered = $derived(
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
-  header { padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
+  header { padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .status { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); font: var(--smrt-typography-label-small-font); }
 }

package/dist/svelte/playground/DataTablePreview.svelte

@@ -514,7 +514,7 @@ function selectAllMatching() {
     justify-content: space-between;
     gap: var(--smrt-spacing-4);
     padding-bottom: var(--smrt-spacing-4);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   h4,
@@ -561,7 +561,7 @@ function selectAllMatching() {
   .table-frame {
     overflow: auto;
     max-width: 100%;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-medium);
   }
 
@@ -569,14 +569,14 @@ function selectAllMatching() {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .report-fixture {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .manual-fixture,
@@ -585,7 +585,7 @@ function selectAllMatching() {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .table-frame--virtual {

package/dist/svelte/playground/FeedbackPreview.svelte

@@ -41,7 +41,7 @@ const menu = [
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
-  header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .stack { display: grid; gap: var(--smrt-spacing-2); }

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -118,7 +118,7 @@ const identity = (controlId: string) => ({
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
-  header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
   header p:not(.eyebrow) { max-width: 40rem; color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }

package/dist/svelte/playground/StylelessPreview.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 import Alert from '../../components/feedback/Alert.svelte';
+import Checkbox from '../../components/forms/Checkbox.svelte';
 import Input from '../../components/forms/Input.svelte';
 import Select from '../../components/forms/Select.svelte';
+import Switch from '../../components/forms/Switch.svelte';
 import Tabs from '../../components/nav/Tabs.svelte';
 import Badge from '../../components/ui/Badge.svelte';
 import Button from '../../components/ui/Button.svelte';
@@ -11,6 +13,30 @@ import unstyledCss from '../../styles/unstyled.css?inline';
 
 // Native checkbox, outside the catalogue, so the toggle itself is never stripped.
 let styleless = $state(false);
+let allProperties = $state(false);
+// Experimental wave-2 reset. Keep production unstyled.css on its explicit
+// property list until unsorted components nested inside these roots migrate.
+const pilotRoots = [
+  'Button',
+  'Badge',
+  'Chip',
+  'Card',
+  'Alert',
+  'Input',
+  'Select',
+  'Checkbox',
+  'Switch',
+  'Tabs',
+]
+  .map((name) => `[data-smrt-component="${name}"]`)
+  .join(', ');
+const pilotScope = `:is(${pilotRoots})`;
+const pilotSelector = `:is(${pilotScope}, ${pilotScope} *):not(#\\#):not(#\\#):not(#\\#)`;
+const pilotCss = `@layer smrt.theme {
+  ${pilotSelector}, ${pilotSelector}::before, ${pilotSelector}::after {
+    all: revert-layer;
+  }
+}`;
 let active = $state('overview');
 
 // Svelte does not interpolate text inside a style element, so the stylesheet is
@@ -19,7 +45,7 @@ $effect(() => {
   if (!styleless) return;
   const style = document.createElement('style');
   style.setAttribute('data-smrt-styleless', '');
-  style.textContent = unstyledCss;
+  style.textContent = unstyledCss + (allProperties ? pilotCss : '');
   document.head.appendChild(style);
   return () => style.remove();
 });
@@ -49,6 +75,11 @@ const tabs = [
     themed look. The page chrome is not a smrt component, so it is unaffected.
   </p>
 
+  <label class="toggle">
+    <input type="checkbox" bind:checked={allProperties} />
+    Try all: revert-layer on the ten pilot primitives
+  </label>
+
   <div class="catalogue">
     <section>
       <h5>Buttons and badges</h5>
@@ -82,6 +113,8 @@ const tabs = [
           <option value="owner">Owner</option>
           <option value="member">Member</option>
         </Select>
+        <Checkbox label="Send updates" />
+        <Switch label="Enable alerts" />
       </div>
     </section>
 
@@ -96,7 +129,7 @@ const tabs = [
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
-  header { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; }
   h4 { font: var(--smrt-typography-headline-small-font); }
   h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }

package/dist/svelte/playground/StylelessPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StylelessPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/StylelessPreview.svelte.ts"],"names":[],"mappings":"AA+GA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"StylelessPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/StylelessPreview.svelte.ts"],"names":[],"mappings":"AAkJA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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:
@@ -673,7 +727,7 @@ calc(var(--smrt-button-state-hover, var(--smrt-state-hover)) * 100%), transparen
 | `--smrt-surface-overlay` | Modal scrim | `background` of Modal/Drawer backdrops |
 | `--smrt-hairline-color` / `-strong-color` | Quiet and strong edge colours | `border-color`, `outline-color`, dividers |
 | `--smrt-hairline` / `--smrt-hairline-strong` | `1px solid` edge shorthands | `border`, `border-top` etc. on panels (quiet) and controls (strong) |
-| `--smrt-inset-highlight` | Top inner light line (`none` on light) | `box-shadow` (layer with an elevation) on raised dark surfaces |
+| `--smrt-inset-highlight` | Top inner light line (transparent shadow on light, never `none` in a shadow list) | `box-shadow` (layer with an elevation) on raised dark surfaces |
 | `--smrt-state-{hover,pressed,selected,focus,dragged,disabled}` | Unitless state-layer opacities, 0 to 1 | Mix percentage of a state overlay (`calc(var(--smrt-state-hover) * 100%)`); `disabled` as `opacity` |
 | `--smrt-shadow-color` | `rgb(r g b)` shadow base, per scheme | `box-shadow` colour: `rgb(from var(--smrt-shadow-color) r g b / 0.2)` |
 | `--smrt-elevation-0..5` | Existing shadow scale | `box-shadow` |

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/components/ColorSchemeToggle.svelte

@@ -122,7 +122,7 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -145,7 +145,7 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -167,7 +167,7 @@ const labels = {
   .smrt-color-scheme-toggle__segmented {
     display: inline-flex;
     background: var(--smrt-color-surface-container-lowest);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }

package/dist/themes/components/ThemeSwitcher.svelte

@@ -118,7 +118,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__select {
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     background: var(--smrt-color-surface, white);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -135,7 +135,7 @@ const themeIcons: Record<ThemePreset, string> = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -157,7 +157,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__segmented {
     display: inline-flex;
     background: var(--smrt-color-surface-container-lowest);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }

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',
+};