@helixui/library 3.1.0-next.72 → 3.2.0-next.100

package/dist/css/helix-overlay.css

@@ -154,10 +154,7 @@
 
   .dialog__close-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-dialog-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-dialog-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -429,10 +426,7 @@
 
   .drawer-close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-drawer-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-drawer-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -601,10 +595,7 @@
 
   [part='body']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-popover-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/helix-tokens.css

@@ -101,6 +101,9 @@
   --hx-color-text-on-success: var(--hx-color-neutral-900);
   --hx-color-text-on-warning: var(--hx-color-neutral-900);
   --hx-color-text-on-info: var(--hx-color-neutral-900);
+  --hx-color-text-on-primary-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-success-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-error-strong: var(--hx-color-neutral-0);
   --hx-color-text-link: var(--hx-color-primary-600);
   --hx-color-text-link-hover: var(--hx-color-primary-700);
   --hx-color-text-link-visited: var(--hx-color-secondary-600);
@@ -112,13 +115,34 @@
   --hx-color-surface-sunken: var(--hx-color-neutral-100);
   --hx-color-surface-inverse: var(--hx-color-neutral-900);
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.75);
+  --hx-color-surface-success-strong: var(--hx-color-success-700);
+  --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+  --hx-color-surface-danger-strong: var(--hx-color-error-600);
+  --hx-color-surface-info-strong: var(--hx-color-primary-600);
   --hx-color-border-default: var(--hx-color-neutral-200);
   --hx-color-border-subtle: var(--hx-color-neutral-100);
-  --hx-color-border-strong: var(--hx-color-neutral-400);
+  --hx-color-border-strong: var(--hx-color-neutral-500);
   --hx-color-border-focus: var(--hx-color-primary-500);
-  --hx-color-focus-ring: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
+  --hx-color-border-on-dark-default: var(--hx-overlay-white-30);
+  --hx-color-border-on-dark-subtle: var(--hx-overlay-white-10);
+  --hx-color-focus-ring: var(--hx-color-primary-600);
   --hx-color-selection-bg: var(--hx-color-primary-200);
   --hx-color-selection-color: var(--hx-color-neutral-900);
+  --hx-color-action-primary-bg: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-hover: var(--hx-color-primary-600);
+  --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
+  --hx-color-action-primary-bg-inverted-hover: var(--hx-color-primary-400);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-600);
+  --hx-color-action-secondary-border: var(--hx-color-primary-600);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-600);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-danger-bg: var(--hx-color-error-500);
+  --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
+  --hx-color-action-danger-bg-active: var(--hx-color-error-700);
+  --hx-color-action-danger-bg-inverted-hover: var(--hx-color-error-400);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
   --hx-body-font-family: var(--hx-font-family-sans);
@@ -218,7 +242,7 @@
   --hx-transition-slow: 350ms ease;
   --hx-touch-target-min: 2.75rem;
   --hx-touch-target-size: 44px;
-  --hx-focus-ring-color: var(--hx-color-primary-400);
+  --hx-focus-ring-color: var(--hx-color-primary-600);
   --hx-focus-ring-width: 2px;
   --hx-focus-ring-offset: 2px;
   --hx-focus-ring-style: solid;
@@ -346,13 +370,23 @@
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
     --hx-color-border-default: var(--hx-color-neutral-700);
     --hx-color-border-subtle: var(--hx-color-neutral-800);
-    --hx-color-border-strong: var(--hx-color-neutral-500);
+    --hx-color-border-strong: var(--hx-color-neutral-400);
     --hx-color-border-focus: var(--hx-color-primary-400);
+    --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
+    --hx-color-border-on-dark-default: var(--hx-overlay-black-30);
+    --hx-color-border-on-dark-subtle: var(--hx-overlay-black-10);
     --hx-color-focus-ring: var(--hx-color-primary-400);
     --hx-color-selection-bg: var(--hx-color-primary-800);
     --hx-color-selection-color: var(--hx-color-neutral-100);
+    --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+    --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+    --hx-color-action-secondary-border: var(--hx-color-primary-400);
+    --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+    --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+    --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
     --hx-body-bg: var(--hx-color-surface-default);
     --hx-body-color: var(--hx-color-text-primary);
+    --hx-focus-ring-color: var(--hx-color-primary-400);
     --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
     --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
     --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -382,13 +416,23 @@
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
   --hx-color-border-default: var(--hx-color-neutral-700);
   --hx-color-border-subtle: var(--hx-color-neutral-800);
-  --hx-color-border-strong: var(--hx-color-neutral-500);
+  --hx-color-border-strong: var(--hx-color-neutral-400);
   --hx-color-border-focus: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
+  --hx-color-border-on-dark-default: var(--hx-overlay-black-30);
+  --hx-color-border-on-dark-subtle: var(--hx-overlay-black-10);
   --hx-color-focus-ring: var(--hx-color-primary-400);
   --hx-color-selection-bg: var(--hx-color-primary-800);
   --hx-color-selection-color: var(--hx-color-neutral-100);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+  --hx-color-action-secondary-border: var(--hx-color-primary-400);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
+  --hx-focus-ring-color: var(--hx-color-primary-400);
   --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
   --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -426,6 +470,9 @@
     --hx-color-text-on-success: #000000;
     --hx-color-text-on-warning: #000000;
     --hx-color-text-on-info: #000000;
+    --hx-color-text-on-primary-strong: #000000;
+    --hx-color-text-on-error-strong: #000000;
+    --hx-color-text-on-success-strong: #000000;
     --hx-color-text-link: #FFFF00;
     --hx-color-text-link-hover: #FFFF99;
     --hx-color-text-link-visited: #FF80FF;
@@ -435,13 +482,21 @@
     --hx-color-surface-sunken: #000000;
     --hx-color-surface-inverse: #FFFFFF;
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
+    --hx-color-surface-success-strong: var(--hx-color-success-500);
+    --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+    --hx-color-surface-danger-strong: var(--hx-color-error-500);
+    --hx-color-surface-info-strong: var(--hx-color-primary-500);
     --hx-color-border-default: #FFFFFF;
     --hx-color-border-subtle: #C0C0C0;
     --hx-color-border-strong: #FFFFFF;
     --hx-color-border-focus: #FFFF00;
+    --hx-color-border-on-dark-strong: #FFFFFF;
+    --hx-color-border-on-dark-default: #FFFFFF;
+    --hx-color-border-on-dark-subtle: #C0C0C0;
     --hx-color-focus-ring: #FFFF00;
     --hx-color-selection-bg: #1AEBFF;
     --hx-color-selection-color: #000000;
+    --hx-color-action-danger-bg-active: var(--hx-color-error-500);
     --hx-body-bg: #000000;
     --hx-body-color: #FFFFFF;
     --hx-focus-ring-color: #FFFF00;

package/dist/css/helix-utility.css

@@ -417,7 +417,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -445,7 +445,7 @@
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-900, #0b3232));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
     background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
@@ -462,7 +462,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -539,7 +539,7 @@
     --hx-split-button-bg: var(--hx-color-primary-500, #429797);
     --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #6ab1b1);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
   }
 
   /* primary:hover — replace the universal brightness(0.9) filter (which would
@@ -626,7 +626,7 @@
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
     --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-split-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
     --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 

package/dist/css/hx-alert.css

@@ -160,7 +160,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-alert-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;

package/dist/css/hx-banner.css

@@ -98,7 +98,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-banner-action-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -142,7 +142,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-banner-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;

package/dist/css/hx-button.css

@@ -46,10 +46,7 @@
 
   .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, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -87,21 +84,24 @@
   /* ─── 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;
   }
 
   .button--secondary {
     --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);
+    /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.
+       primary-600 (#0F7078) on white = 5.82:1 — AA pass. */
+    --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 {
@@ -115,36 +115,52 @@
   }
 
   .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 3.28: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);
+  }
+
+  /* Pressed state binds explicitly to action.danger.bg-active (error-700,
+     #A21312) + text.on-error-strong (neutral-0) = 7.96:1 AA. Base
+     .button:active filter:brightness(0.8) would compound on top of bg-hover
+     (#C92A2A) and produce ~3.3:1 sub-AA on the bound colors. Override the
+     filter to none. HC override on action.danger.bg-active flips to HC
+     error-500 so the on-error-strong (HC = #000) pair is AA in HC too. */
+  .button--danger:active {
+    --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-danger-bg-active, #a21312));
+    --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);
+    filter: none;
   }
 
   .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);
+    /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.
+       primary-600 (#0F7078) on white = 5.82:1 — AA pass. */
+    --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 {
     --hx-button-bg: transparent;
     --hx-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--outline:hover {
@@ -152,12 +168,24 @@
   }
 
   /* 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);
+  }
+
+  /* Pressed state binds explicitly to action.primary.bg-active (primary-700,
+     #0F6363) + text.on-primary-strong (neutral-0) = 7.03:1 AA. The base
+     .button:active filter:brightness(0.8) would compound on top of bg-hover
+     (#0F7078) and produce ~3.7:1 sub-AA on the bound colors. Override the
+     filter to none so the action.*.bg-active token is what actually paints. */
+  .button--primary:active {
+    --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-primary-bg-active, #0f6363));
+    --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);
+    filter: none;
   }
 
   /* ─── Disabled ─── */
@@ -201,9 +229,19 @@
 
   /* ─── Inverted Mode ─── */
 
+  /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:
+     the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last
+     resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects
+     dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted
+     buttons stay visible on the now-light surface.inverse (#EBEEE9). The
+     inline white overlays would render invisible (≈1.1:1) on a light surface,
+     but they never paint when the theme is mounted. If a future change moves
+     these into a context where hx-theme is not guaranteed, replace with
+     mode-aware tokens. */
+
   /* 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;
   }
 
@@ -216,37 +254,89 @@
   }
 
   :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);
+  /* Primary inverted — resting bg routes through action.primary.bg-inverted-rest
+     so dark mode can flip the fill to primary-600. surface.inverse becomes light
+     (#EBEEE9) in dark mode; primary-500 on #EBEEE9 = 2.94:1 (sub-3:1 UI floor
+     fail for the inverted-button boundary). primary-600 on #EBEEE9 = 4.97:1
+     (AA pass). Light mode tracks action.primary.bg (primary-500, 5.20:1 on
+     dark surface.inverse). */
+  :host([inverted]) .button--primary {
+    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-rest, #429797);
+  }
+
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
   }
 
-  /* Secondary inverted — white border and text */
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
+  }
+
+  /* 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;
@@ -255,17 +345,17 @@
   :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 ─── */
@@ -293,6 +383,16 @@
       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;

package/dist/css/hx-card.css

@@ -84,10 +84,7 @@
 
   .card--interactive:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-card-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-carousel.css

@@ -62,7 +62,7 @@
 
   .nav-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -104,7 +104,7 @@
 
   .play-pause-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -176,7 +176,7 @@
 
   .pagination-item:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-full, 9999px);
   }

package/dist/css/hx-checkbox.css

@@ -58,7 +58,7 @@
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
     background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -74,7 +74,7 @@
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(
         --hx-checkbox-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
   }

package/dist/css/hx-clinical-status.css

@@ -184,8 +184,7 @@
   }
 
   .clinical-status__dismiss-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #429797));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -230,8 +229,7 @@
   }
 
   .clinical-status__acknowledge-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #429797));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-code-snippet.css

@@ -78,7 +78,8 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
     background-color: var(--hx-color-surface-inverse, #0d1825);
@@ -104,7 +105,7 @@
 
   .code-snippet__copy-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -123,7 +124,8 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
     /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
     background-color: var(--hx-color-surface-inverse, #0d1825);
     color: var(--hx-color-text-inverse, #ffffff);
@@ -145,7 +147,7 @@
 
   .code-snippet__expand-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }