@helixui/library 3.2.0-next.89 → 3.2.0-next.94

package/dist/css/helix-navigation.css

@@ -136,10 +136,7 @@
 
   [part='toggle']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -192,10 +189,7 @@
 
   .nav__link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -389,10 +383,7 @@
 
   .trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -485,10 +476,7 @@
   ::slotted([role='menuitemcheckbox']:focus-visible),
   ::slotted([role='menuitemradio']:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: 0;
   }
 
@@ -592,10 +580,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-pagination-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -662,10 +647,7 @@
 
   .page-size-select:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-pagination-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -758,7 +740,7 @@
     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, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
   }
 
   /* ─── Collapsed State ─── */
@@ -776,7 +758,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, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
     overflow: hidden;
   }
 
@@ -803,7 +785,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, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
     overflow: hidden;
   }
 
@@ -849,7 +831,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, #6ab1b1));
+      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1139,10 +1121,7 @@
 
   .mobile-toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-top-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1309,7 +1288,7 @@
 
   .tree: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);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }

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

@@ -121,15 +121,16 @@
   --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-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-400);
+  --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);
@@ -141,6 +142,7 @@
   --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);
@@ -240,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;
@@ -368,11 +370,15 @@
     --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);
@@ -380,6 +386,7 @@
     --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);
@@ -409,11 +416,15 @@
   --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);
@@ -421,6 +432,7 @@
   --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);

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,7 +46,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
+      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -160,7 +160,7 @@
   .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 {
@@ -253,9 +253,56 @@
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #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)
+    );
+  }
+
+  /* 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 */

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-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,7 @@
     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-strong, #66787b);
     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 +104,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 +123,7 @@
     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-strong, #66787b);
     /* 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 +145,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);
   }
 

package/dist/css/hx-color-picker.css

@@ -28,10 +28,7 @@
   }
   :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-color-picker-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .trigger-swatch {
@@ -206,18 +203,11 @@
     outline: none;
   }
   .color-input:focus-visible {
-    border-color: var(
-      --hx-color-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-    );
+    border-color: var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 2px
       color-mix(
         in srgb,
-        var(
-            --hx-color-picker-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-          )
-          20%,
+        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
         transparent
       );
   }

package/dist/css/hx-combobox.css

@@ -34,7 +34,7 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -44,14 +44,14 @@
   .field__input-wrapper:focus-within {
     border-color: var(
       --hx-combobox-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))
     );
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(
             --hx-combobox-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))
           )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
@@ -161,7 +161,7 @@
     z-index: var(--hx-z-index-dropdown, 1000);
     background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,

package/dist/css/hx-data-table.css

@@ -92,10 +92,7 @@
 
   .sort-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-data-table-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-data-table-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -197,10 +194,7 @@
   [part~='td']:focus-visible,
   [part~='th']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-data-table-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-data-table-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, -2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }

package/dist/css/hx-date-picker.css

@@ -56,7 +56,7 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -68,14 +68,14 @@
   .field__input-wrapper:focus-within {
     border-color: var(
       --hx-date-picker-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))
     );
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(
             --hx-date-picker-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))
           )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
@@ -135,7 +135,7 @@
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     background: transparent;
     color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
@@ -147,13 +147,13 @@
   .field__trigger:focus-visible {
     color: var(
       --hx-date-picker-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))
     );
     background-color: color-mix(
       in srgb,
       var(
           --hx-date-picker-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))
         )
         8%,
       transparent
@@ -254,7 +254,7 @@
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       var(
         --hx-date-picker-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))
       );
     z-index: 1;
   }

package/dist/css/hx-dialog.css

@@ -152,10 +152,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);
   }
 

package/dist/css/hx-drawer.css

@@ -209,10 +209,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);
   }