@happyvertical/smrt-ui 0.55.20 → 0.55.22

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.20",
+  "version": "0.55.22",
   "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.20",
+    "@happyvertical/smrt-types": "0.55.22",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {