@helixui/library 3.2.0-next.76 → 3.2.0-next.81

package/dist/css/hx-side-nav.css

@@ -8,7 +8,7 @@
        and evaluates their text against the page white background, producing
        false-positive color-contrast violations (WCAG 2.1 AA). */
     background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
-    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   * {
@@ -23,11 +23,11 @@
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
     background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
-    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
   }
 
   /* ─── Collapsed State ─── */
@@ -45,7 +45,7 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
     overflow: hidden;
   }
 
@@ -72,7 +72,7 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #8e9c98));
     overflow: hidden;
   }
 
@@ -95,7 +95,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #b6bfb9));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -104,10 +104,10 @@
 
   .side-nav__toggle:hover {
     background-color: var(
-      --hx-overlay-white-10,
+      --hx-color-border-on-dark-subtle,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-text-inverse, #ebeee9);
+    color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -118,10 +118,7 @@
 
   .side-nav__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-side-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -167,10 +164,18 @@
     }
 
     .side-nav__toggle {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
       color: ButtonText;
       border: 1px solid ButtonText;
     }
 
+    .side-nav__toggle:hover {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
     .side-nav__toggle:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/hx-text-input.css

@@ -291,10 +291,10 @@
 
   /* ─── High Contrast Mode (forced-colors) ───
    *
-   * Component-specific overrides that complement the shared forcedColorsField
-   * mixin (composed in static styles). The mixin handles the input/wrapper
-   * core; the rules below extend it to the label / error / help-text /
-   * disabled-host surfaces unique to hx-text-input.
+   * Bespoke block — sole owner of forced-colors deference for hx-text-input.
+   * Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;
+   * strictly more than forcedColorsField. The mixin is intentionally NOT
+   * composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).
    */
 
   @media (forced-colors: active) {

package/dist/css/hx-toast.css

@@ -49,33 +49,38 @@
    * error-600) because the lighter -500 fills can't pass AA against white
    * text in the precision-cool palette. The neutral-900 on-{role} tokens
    * are tuned for the lighter -500 surfaces and would fail here (e.g.
-   * neutral-900 on primary-600 = 3.07:1), so we hold fg at neutral-0
-   * directly for primary/success/danger.
-   * - neutral-0 on primary-600 (#0F7078) = 5.39:1 — AA pass
-   * - neutral-0 on success-700 (#146831) = 6.88:1 — AA pass
+   * neutral-900 on primary-600 = 3.07:1), so the on-{role}-strong tokens
+   * (neutral-0, no dark-mode flip) keep fg legible on the darker fills.
+   * - text.on-primary-strong on info.bg-strong (primary-600, #0F7078) = 5.39:1
+   * - text.on-success-strong on success.bg-strong (success-700, #146831) = 6.88:1
    *   (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)
-   * - neutral-0 on error-600   (#C92A2A) = 5.92:1 — AA pass
-   * - neutral-900 on warning-500 (#C2711C) = 4.83:1 — AA pass
+   * - text.on-error-strong   on danger.bg-strong  (error-600, #C92A2A) = 5.92:1
+   * - text.on-warning        on warning.bg-strong (warning-500, #C2711C) = 4.83:1
    *   (warning stays on the lighter -500 surface so on-warning works)
+   *
+   * 3.2.1 token-cascade: bg variants now route through surface.{role}-strong
+   * semantics; fg variants route through text.on-{role}-strong (or on-warning
+   * for the warning variant). Component-tier tokens are NOT bypassed — the
+   * --hx-toast-bg / --hx-toast-color slots remain the single override point.
    */
   .toast--success {
-    --hx-toast-bg: var(--hx-color-success-700, #146831);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-success-strong, #146831);
+    --hx-toast-color: var(--hx-color-text-on-success-strong, #ffffff);
   }
 
   .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #c2711c);
+    --hx-toast-bg: var(--hx-color-surface-warning-strong, #c2711c);
     --hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
   }
 
   .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #c92a2a);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-danger-strong, #c92a2a);
+    --hx-toast-color: var(--hx-color-text-on-error-strong, #ffffff);
   }
 
   .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #0f7078);
-    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toast-bg: var(--hx-color-surface-info-strong, #0f7078);
+    --hx-toast-color: var(--hx-color-text-on-primary-strong, #ffffff);
   }
 
   /* ─── Severity Label (WCAG 1.4.1) ─── */

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-25T17:34:50.957Z */
+/* index.css — generated 2026-04-25T20:44:53.981Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';

package/dist/css/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-04-25T17:34:50.956Z",
+  "generated": "2026-04-25T20:44:53.980Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -255,21 +255,34 @@
         "--hx-button-border-color",
         "--hx-button-border-radius",
         "--hx-button-color",
+        "--hx-button-focus-ring-color",
         "--hx-button-font-family",
         "--hx-button-font-weight",
         "--hx-button-hover-bg",
         "--hx-button-inverted-color",
+        "--hx-color-action-danger-bg",
+        "--hx-color-action-danger-bg-hover",
+        "--hx-color-action-ghost-bg-hover",
+        "--hx-color-action-ghost-fg",
+        "--hx-color-action-primary-bg",
+        "--hx-color-action-primary-bg-hover",
+        "--hx-color-action-primary-bg-inverted-hover",
+        "--hx-color-action-secondary-bg-hover",
+        "--hx-color-action-secondary-border",
+        "--hx-color-action-secondary-fg",
+        "--hx-color-border-on-dark-default",
+        "--hx-color-border-on-dark-strong",
+        "--hx-color-border-on-dark-subtle",
         "--hx-color-border-strong",
-        "--hx-color-error-500",
-        "--hx-color-error-600",
         "--hx-color-neutral-0",
-        "--hx-color-primary-400",
         "--hx-color-primary-500",
-        "--hx-color-primary-600",
         "--hx-color-surface-raised",
         "--hx-color-surface-sunken",
+        "--hx-color-text-inverse",
         "--hx-color-text-on-error",
+        "--hx-color-text-on-error-strong",
         "--hx-color-text-on-primary",
+        "--hx-color-text-on-primary-strong",
         "--hx-color-text-primary",
         "--hx-duration-spinner",
         "--hx-filter-brightness-active",
@@ -285,11 +298,6 @@
         "--hx-line-height-tight",
         "--hx-opacity-disabled",
         "--hx-opacity-muted",
-        "--hx-overlay-white-15",
-        "--hx-overlay-white-20",
-        "--hx-overlay-white-25",
-        "--hx-overlay-white-50",
-        "--hx-overlay-white-70",
         "--hx-size-10",
         "--hx-size-12",
         "--hx-space-1",
@@ -1756,7 +1764,6 @@
         "--hx-border-radius-sm",
         "--hx-border-width-thin",
         "--hx-color-border-strong",
-        "--hx-color-primary-400",
         "--hx-color-surface-inverse",
         "--hx-color-text-inverse",
         "--hx-focus-ring-color",
@@ -1766,9 +1773,11 @@
         "--hx-side-nav-border-color",
         "--hx-side-nav-collapsed-width",
         "--hx-side-nav-color",
+        "--hx-side-nav-focus-ring-color",
         "--hx-side-nav-footer-padding",
         "--hx-side-nav-header-padding",
         "--hx-side-nav-toggle-color",
+        "--hx-side-nav-toggle-hover-color",
         "--hx-side-nav-width",
         "--hx-space-14",
         "--hx-space-2",
@@ -2453,14 +2462,16 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-border-radius-sm",
-        "--hx-color-error-600",
-        "--hx-color-neutral-0",
-        "--hx-color-primary-600",
-        "--hx-color-success-700",
+        "--hx-color-surface-danger-strong",
+        "--hx-color-surface-info-strong",
         "--hx-color-surface-inverse",
+        "--hx-color-surface-success-strong",
+        "--hx-color-surface-warning-strong",
         "--hx-color-text-inverse",
+        "--hx-color-text-on-error-strong",
+        "--hx-color-text-on-primary-strong",
+        "--hx-color-text-on-success-strong",
         "--hx-color-text-on-warning",
-        "--hx-color-warning-500",
         "--hx-focus-ring-offset",
         "--hx-focus-ring-width",
         "--hx-font-family-sans",

package/dist/index.js

@@ -6,7 +6,7 @@ import { H as v } from "./shared/hx-avatar-C9hOmlAb.js";
 import { H as E } from "./shared/hx-badge-CQXgOXJM.js";
 import { H as k } from "./shared/hx-banner-DT7Zn9Bo.js";
 import { H as B, a as P } from "./shared/hx-breadcrumb-item-COeYcB2x.js";
-import { H as M } from "./shared/hx-button-modUSOpY.js";
+import { H as M } from "./shared/hx-button-kWxjKqo-.js";
 import { H as N } from "./shared/hx-button-group-BI-QBqmO.js";
 import { H as A } from "./shared/hx-card-CU1QnjNb.js";
 import { H as G, a as U } from "./shared/hx-carousel-item-BaE4hpLl.js";
@@ -53,7 +53,7 @@ import { H as So } from "./shared/hx-prose-BThYcASV.js";
 import { H as To, a as bo } from "./shared/hx-radio-N8xgDd_5.js";
 import { H as go } from "./shared/hx-rating-i2FL1WUN.js";
 import { H as vo } from "./shared/hx-select-vgaBo1Ai.js";
-import { H as Eo, a as Do } from "./shared/hx-nav-item-D8xHLVOs.js";
+import { H as Eo, a as Do } from "./shared/hx-nav-item-CMyMv5Gv.js";
 import { H as wo } from "./shared/hx-skeleton-Cnieh5Uc.js";
 import { H as Po } from "./shared/hx-slider-ydBamYhd.js";
 import { H as Mo } from "./shared/hx-spinner-DL5AYr16.js";
@@ -70,11 +70,11 @@ import { H as tt, a as rt, b as at, c as it, d as st, e as xt, f as Ht } from ".
 import { H as nt, a as pt, b as mt } from "./shared/hx-tab-panel-CbkO9VKu.js";
 import { H as ct } from "./shared/hx-tag-CNSmdyaK.js";
 import { H as ht } from "./shared/hx-text-Bz_9fJ3J.js";
-import { F as St, H as yt } from "./shared/hx-text-input-B-caO5fI.js";
+import { F as St, H as yt } from "./shared/hx-text-input-ClrrmoE1.js";
 import { H as bt } from "./shared/hx-textarea-D9O4U8cb.js";
 import { H as gt } from "./shared/hx-theme-BiyQ7UUK.js";
 import { H as vt } from "./shared/hx-time-picker-m0z4nFB-.js";
-import { H as Et, a as Dt, t as kt } from "./shared/toast-factory-DvDRAh0l.js";
+import { H as Et, a as Dt, t as kt } from "./shared/toast-factory-CIiZDZGZ.js";
 import { H as Bt } from "./shared/hx-toggle-button-Dd8clXB4.js";
 import { H as Ft } from "./shared/hx-tooltip-nYOv9OLu.js";
 import { H as Lt } from "./shared/hx-top-nav-CchPYaiV.js";

package/dist/shared/{hx-button-modUSOpY.js → hx-button-kWxjKqo-.js}

@@ -1,12 +1,11 @@
-import { css as f, html as u, nothing as s } from "lit";
+import { css as f, html as d, nothing as s } from "lit";
 import { property as a, customElement as v } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
+import { classMap as b } from "lit/directives/class-map.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
-import { f as p } from "./forced-colors-CTEDFRGa.js";
-import { d as x } from "./dev-warn-YlwPHjtX.js";
-import { m } from "./aria-delegation-Doq6RRUy.js";
+import { d as p } from "./dev-warn-YlwPHjtX.js";
+import { m as x } from "./aria-delegation-Doq6RRUy.js";
 import { H as g } from "./helix-element-BNEYeiys.js";
-const y = f`
+const m = f`
   :host {
     display: inline-block;
   }
@@ -54,10 +53,7 @@ const y = f`
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -95,8 +91,11 @@ const y = f`
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-button-bg: var(--hx-color-primary-500, #429797);
-    --hx-button-color: var(--hx-color-text-on-primary, #ffffff);
+    --hx-button-bg: var(--hx-color-action-primary-bg, #429797);
+    /* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);
+       cold-start without the semantic still paints AA-tuned dark-on-primary
+       rather than white-on-primary (3.43:1 fail). */
+    --hx-button-color: var(--hx-color-text-on-primary, #0d1825);
     --hx-button-border-color: transparent;
   }
 
@@ -104,12 +103,12 @@ const y = f`
     --hx-button-bg: transparent;
     /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
        primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
-    --hx-button-color: var(--hx-color-primary-600, #0f7078);
-    --hx-button-border-color: var(--hx-color-primary-600, #0f7078);
+    --hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);
+    --hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));
   }
 
   .button--tertiary {
@@ -123,30 +122,34 @@ const y = f`
   }
 
   .button--danger {
-    --hx-button-bg: var(--hx-color-error-500, #e5493e);
-    --hx-button-color: var(--hx-color-text-on-error, #ffffff);
+    --hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);
+    /* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);
+       cold-start without the semantic still paints AA-tuned dark-on-error
+       rather than white-on-error (3.92:1 fail). */
+    --hx-button-color: var(--hx-color-text-on-error, #0d1825);
     --hx-button-border-color: transparent;
   }
 
   /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
-     error-600 (#C92A2A) drops that to 2.25:1 — AA fail. Hold fg at neutral-0
-     directly so darker hover fills stay legible. Mirrors hx-toast precedent
-     (commit 300e21ab0). */
+     error-600 (#C92A2A) drops that to 2.25:1 — AA fail. text.on-error-strong
+     resolves to neutral-0 across modes (no dark flip) so the darker hover fill
+     stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed
+     through the semantic tier in 3.2.1 token-cascade remediation. */
   .button--danger:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600, #c92a2a));
-    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));
+    --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);
   }
 
   .button--ghost {
     --hx-button-bg: transparent;
     /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
        primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
-    --hx-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);
     --hx-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));
   }
 
   .button--outline {
@@ -160,12 +163,13 @@ const y = f`
   }
 
   /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
-     primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. Pin fg at
-     neutral-0 for the darker hover fill. Mirrors hx-toast precedent
-     (commit 300e21ab0). */
+     primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong
+     resolves to neutral-0 across modes (no dark flip) for the darker hover fill.
+     Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic
+     tier in 3.2.1 token-cascade remediation. */
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600, #0f7078));
-    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));
+    --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);
   }
 
   /* ─── Disabled ─── */
@@ -211,7 +215,7 @@ const y = f`
 
   /* Override text color and filter-based hover/active for all variants */
   :host([inverted]) .button {
-    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
     filter: none;
   }
 
@@ -224,37 +228,42 @@ const y = f`
   }
 
   :host([inverted]) .button:focus-visible {
+    /* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.
+       border-on-dark-default (overlay-white-30) ≈ 2.7:1 on neutral-900 — fails.
+       border-on-dark-strong (overlay-white-70) ≈ 5:1 — passes. */
     outline-color: var(
       --hx-button-inverted-focus-ring-color,
-      var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
     );
   }
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #6ab1b1);
+    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
   }
 
-  /* Secondary inverted — white border and text */
+  /* Secondary inverted — white border and translucent hover fill */
   :host([inverted]) .button--secondary {
-    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));
+    --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
   }
 
   :host([inverted]) .button--secondary:hover {
-    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+    --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));
   }
 
-  /* Tertiary inverted */
+  /* Tertiary inverted — resting at subtle (10%) lifts to default (30%) on hover
+     so the runtime hover delta is visually distinct, not collapsed onto a
+     single token. */
   :host([inverted]) .button--tertiary {
-    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+    --hx-button-bg: var(--hx-color-border-on-dark-subtle, rgba(255, 255, 255, 0.1));
     --hx-button-border-color: transparent;
   }
 
   :host([inverted]) .button--tertiary:hover {
-    --hx-button-bg: var(--hx-overlay-white-25, rgba(255, 255, 255, 0.25));
+    --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));
   }
 
-  /* Ghost inverted — transparent base, white hover bg */
+  /* Ghost inverted — transparent base, translucent hover bg */
   :host([inverted]) .button--ghost {
     --hx-button-bg: transparent;
     --hx-button-border-color: transparent;
@@ -263,17 +272,17 @@ const y = f`
   :host([inverted]) .button--ghost:hover {
     --hx-button-bg: var(
       --hx-button-inverted-ghost-hover-bg,
-      var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))
+      var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3))
     );
   }
 
   /* Outline inverted — white border */
   :host([inverted]) .button--outline {
-    --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));
+    --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
   }
 
   :host([inverted]) .button--outline:hover {
-    --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));
+    --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));
   }
 
   /* ─── Prefix / Suffix / Label ─── */
@@ -301,6 +310,16 @@ const y = f`
       border: 2px solid ButtonText;
     }
 
+    .button:hover {
+      /* Hover affordance must survive in HC. Highlight/HighlightText is the
+         OS-level "selected" pair, mirroring the forcedColorsInteractive mixin's
+         hover contract — kept inline since this component owns its bespoke HC
+         block (XOR rule). */
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
     .button:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -323,12 +342,12 @@ const y = f`
     }
   }
 `;
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
-  for (var o = i > 1 ? void 0 : i ? w(r, h) : r, l = t.length - 1, b; l >= 0; l--)
-    (b = t[l]) && (o = (i ? b(r, h, o) : b(o)) || o);
-  return i && o && _(r, h, o), o;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, r, l, i) => {
+  for (var o = i > 1 ? void 0 : i ? _(r, l) : r, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (i ? u(r, l, o) : u(o)) || o);
+  return i && o && y(r, l, o), o;
 };
-let e = class extends m(g) {
+let e = class extends x(g) {
   constructor() {
     super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.full = !1, this.inverted = !1, this.accessibleLabel = "", this._emptySlotWarnEmitted = !1;
   }
@@ -351,15 +370,15 @@ let e = class extends m(g) {
     const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     !((r == null ? void 0 : r.assignedNodes({ flatten: !0 })) ?? []).some(
       (o) => {
-        var l;
-        return o.nodeType !== Node.TEXT_NODE || (((l = o.textContent) == null ? void 0 : l.trim().length) ?? 0) > 0;
+        var h;
+        return o.nodeType !== Node.TEXT_NODE || (((h = o.textContent) == null ? void 0 : h.trim().length) ?? 0) > 0;
       }
     ) && !this._effectiveLabel && (this._emptySlotWarnEmitted = !0);
   }
   updated(t) {
     if (super.updated(t), t.has("variant")) {
       const r = [...e._VALID_VARIANTS];
-      r.includes(this.variant) || (x(
+      r.includes(this.variant) || (p(
         "hx-button",
         `Invalid variant "${this.variant}". Expected one of: ${r.join(", ")}. Clamping to "primary".`
       ), this.variant = "primary");
@@ -368,11 +387,11 @@ let e = class extends m(g) {
   // ─── Slot Handlers ───
   /** @internal */
   _handleDefaultSlotChange(t) {
-    const h = t.target.assignedNodes({ flatten: !0 }).some((i) => {
+    const l = t.target.assignedNodes({ flatten: !0 }).some((i) => {
       var o;
       return i.nodeType !== Node.TEXT_NODE || (((o = i.textContent) == null ? void 0 : o.trim().length) ?? 0) > 0;
     });
-    !h && !this._effectiveLabel && this._emptySlotWarnEmitted, h && (this._emptySlotWarnEmitted = !1);
+    !l && !this._effectiveLabel && this._emptySlotWarnEmitted, l && (this._emptySlotWarnEmitted = !1);
   }
   // ─── Event Handling ───
   /**
@@ -398,7 +417,7 @@ let e = class extends m(g) {
    * @internal
    */
   _renderSpinner() {
-    return u`
+    return d`
       <svg
         class="button__spinner"
         part="spinner"
@@ -430,7 +449,7 @@ let e = class extends m(g) {
    * @internal
    */
   _renderInner() {
-    return u`
+    return d`
       ${this.loading ? this._renderSpinner() : s}
       <span part="prefix" class="button__prefix">
         <slot name="prefix"></slot>
@@ -451,10 +470,10 @@ let e = class extends m(g) {
       [`button--${this.size}`]: !0,
       "button--loading": this.loading
     };
-    return this.href !== void 0 ? u`
+    return this.href !== void 0 ? d`
         <a
           part="button"
-          class=${d(t)}
+          class=${b(t)}
           href=${this.disabled || this.loading ? s : c(this.href)}
           target=${c(this.target)}
           rel=${this.target === "_blank" ? "noopener noreferrer" : s}
@@ -466,10 +485,10 @@ let e = class extends m(g) {
         >
           ${this._renderInner()}
         </a>
-      ` : u`
+      ` : d`
       <button
         part="button"
-        class=${d(t)}
+        class=${b(t)}
         ?disabled=${this.disabled}
         type=${this.type}
         aria-label=${this._effectiveLabel || s}
@@ -481,7 +500,7 @@ let e = class extends m(g) {
     `;
   }
 };
-e.styles = [y, p];
+e.styles = [m];
 e.formAssociated = !0;
 e._VALID_VARIANTS = [
   "primary",
@@ -533,4 +552,4 @@ e = n([
 export {
   e as H
 };
-//# sourceMappingURL=hx-button-modUSOpY.js.map
+//# sourceMappingURL=hx-button-kWxjKqo-.js.map