@helixui/library 3.5.0 → 3.7.0

package/dist/css/helix-forms.css

@@ -98,15 +98,21 @@
   /* ─── Checked State ─── */
 
   .checkbox--checked .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Indeterminate State ─── */
 
   .checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Error State ─── */
@@ -1405,13 +1411,16 @@
   }
 
   .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
   .calendar__day--selected:hover {
-    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
+    background-color: var(
+      --hx-date-picker-selected-hover-bg,
+      var(--hx-color-action-primary-bg-hover, #0f6363)
+    );
   }
 
   .calendar__day--today:not(.calendar__day--selected) {
@@ -4474,7 +4483,7 @@
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -4547,7 +4556,7 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-bg: var(--hx-color-action-primary-bg, #0f7078);
     --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
@@ -4625,12 +4634,15 @@
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-border-color: var(--hx-color-action-primary-bg, #0f7078);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
@@ -4641,7 +4653,8 @@
       var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-primary-600, #0f7078);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
@@ -4665,7 +4678,8 @@
       var(--hx-color-text-primary, #0d1825)
     );
     --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */
@@ -4700,15 +4714,17 @@
   @media (forced-colors: active) {
     .button {
       forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
+      background-color: var(--hx-toggle-button-fc-bg, ButtonFace);
+      color: var(--hx-toggle-button-fc-color, ButtonText);
+      border: var(--hx-toggle-button-fc-border-width, 2px) solid
+        var(--hx-toggle-button-fc-border-color, ButtonText);
     }
 
     :host(:focus-visible) .button,
     .button:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
+      outline: var(--hx-toggle-button-fc-focus-ring-width, 3px) solid
+        var(--hx-toggle-button-fc-focus-ring-color, Highlight);
+      outline-offset: var(--hx-toggle-button-fc-focus-ring-offset, 2px);
     }
 
     .button--pressed {

package/dist/css/helix-navigation.css

@@ -575,7 +575,10 @@
 
   .button:hover:not(:disabled) {
     background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
+    border-color: var(
+      --hx-pagination-hover-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   .button:focus-visible {
@@ -585,10 +588,10 @@
   }
 
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
+    background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
     color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);

package/dist/css/helix-tokens.css

@@ -95,7 +95,7 @@
   --hx-color-text-placeholder: var(--hx-color-neutral-500);
   --hx-color-text-disabled: var(--hx-color-neutral-400);
   --hx-color-text-inverse: var(--hx-color-neutral-0);
-  --hx-color-text-on-primary: var(--hx-color-neutral-900);
+  --hx-color-text-on-primary: var(--hx-color-neutral-0);
   --hx-color-text-on-secondary: var(--hx-color-neutral-900);
   --hx-color-text-on-error: var(--hx-color-neutral-900);
   --hx-color-text-on-success: var(--hx-color-neutral-900);
@@ -129,10 +129,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: var(--hx-color-primary-600);
   --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-hover: var(--hx-color-primary-700);
+  --hx-color-action-primary-bg-active: var(--hx-color-primary-800);
   --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);
@@ -496,6 +496,7 @@
     --hx-color-focus-ring: #FFFF00;
     --hx-color-selection-bg: #1AEBFF;
     --hx-color-selection-color: #000000;
+    --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
     --hx-color-action-danger-bg-active: var(--hx-color-error-500);
     --hx-body-bg: #000000;
     --hx-body-color: #FFFFFF;

package/dist/css/hx-badge.css

@@ -9,8 +9,8 @@
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
-    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
+    background-color: var(--hx-badge-bg, var(--hx-color-action-primary-bg, #0f7078));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -42,11 +42,11 @@
   /* ─── Style Variants ─── */
 
   .badge--primary {
-    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
-    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
   }
 

package/dist/css/hx-button.css

@@ -290,9 +290,16 @@
      (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).
+     light mode (AA fail). Pin color to neutral-900 directly (the primitive,
+     not text.primary which flips to neutral-100 in dark mode and would regress
+     the pair to ~2.10:1) so the foreground is dark in both modes —
+     neutral-900 on primary-400 = 7.27:1 AAA in Apex; AAA across all 6 brands.
+     Decoupled from text.on-primary in 3.3.x because text.on-primary now
+     resolves to neutral-0 (white) for the AAA-large coordinated pair on
+     primary-600; using it here would regress this pair to ~2.45:1 (Apex)
+     since primary-400 is light teal. neutral-900 is the correct anchor — it
+     is the primitive that both light/dark text.primary used to resolve to,
+     never flipped by mode/brand.
      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
@@ -307,7 +314,7 @@
     );
     color: var(
       --hx-button-inverted-primary-interactive-color,
-      var(--hx-color-text-on-primary, #0d1825)
+      var(--hx-color-neutral-900, #0d1825)
     );
   }
 

package/dist/css/hx-checkbox.css

@@ -96,15 +96,21 @@
   /* ─── Checked State ─── */
 
   .checkbox--checked .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Indeterminate State ─── */
 
   .checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Error State ─── */

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

@@ -299,13 +299,16 @@
   }
 
   .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
   .calendar__day--selected:hover {
-    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
+    background-color: var(
+      --hx-date-picker-selected-hover-bg,
+      var(--hx-color-action-primary-bg-hover, #0f6363)
+    );
   }
 
   .calendar__day--today:not(.calendar__day--selected) {

package/dist/css/hx-icon-button.css

@@ -74,16 +74,15 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-bg: var(--hx-color-action-primary-bg, #0f7078);
     --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
-  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
-     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
-     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
+  /* Hover deepens to action.primary.bg-hover (primary-700) + neutral-0 = 7.03:1 AA.
+     Mirrors hx-button. */
   .button--primary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-icon-button-bg: var(--hx-color-action-primary-bg-hover, #0f6363);
     --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 

package/dist/css/hx-pagination.css

@@ -55,7 +55,10 @@
 
   .button:hover:not(:disabled) {
     background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
+    border-color: var(
+      --hx-pagination-hover-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   .button:focus-visible {
@@ -65,10 +68,10 @@
   }
 
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
+    background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
     color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);

package/dist/css/hx-toggle-button.css

@@ -17,7 +17,7 @@
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -90,7 +90,7 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-bg: var(--hx-color-action-primary-bg, #0f7078);
     --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
@@ -168,12 +168,15 @@
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-border-color: var(--hx-color-action-primary-bg, #0f7078);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
@@ -184,7 +187,8 @@
       var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-primary-600, #0f7078);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
@@ -208,7 +212,8 @@
       var(--hx-color-text-primary, #0d1825)
     );
     --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */
@@ -243,15 +248,17 @@
   @media (forced-colors: active) {
     .button {
       forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
+      background-color: var(--hx-toggle-button-fc-bg, ButtonFace);
+      color: var(--hx-toggle-button-fc-color, ButtonText);
+      border: var(--hx-toggle-button-fc-border-width, 2px) solid
+        var(--hx-toggle-button-fc-border-color, ButtonText);
     }
 
     :host(:focus-visible) .button,
     .button:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
+      outline: var(--hx-toggle-button-fc-focus-ring-width, 3px) solid
+        var(--hx-toggle-button-fc-focus-ring-color, Highlight);
+      outline-offset: var(--hx-toggle-button-fc-focus-ring-offset, 2px);
     }
 
     .button--pressed {

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-05-07T16:41:47.067Z */
+/* index.css — generated 2026-05-08T04:06:33.763Z */
 /* 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-05-07T16:41:47.066Z",
+  "generated": "2026-05-08T04:06:33.762Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -151,6 +151,7 @@
         "--hx-border-radius-full",
         "--hx-border-radius-md",
         "--hx-border-radius-sm",
+        "--hx-color-action-primary-bg",
         "--hx-color-error-500",
         "--hx-color-info-700",
         "--hx-color-neutral-0",
@@ -158,7 +159,6 @@
         "--hx-color-neutral-200",
         "--hx-color-neutral-700",
         "--hx-color-neutral-900",
-        "--hx-color-primary-500",
         "--hx-color-success-700",
         "--hx-color-text-on-error",
         "--hx-color-text-on-primary",
@@ -279,6 +279,7 @@
         "--hx-color-border-on-dark-strong",
         "--hx-color-border-strong",
         "--hx-color-neutral-0",
+        "--hx-color-neutral-900",
         "--hx-color-primary-500",
         "--hx-color-surface-on-dark-overlay-default",
         "--hx-color-surface-on-dark-overlay-subtle",
@@ -423,7 +424,6 @@
         "--hx-checkbox-border-color",
         "--hx-checkbox-border-radius",
         "--hx-checkbox-checked-bg",
-        "--hx-checkbox-checked-border-color",
         "--hx-checkbox-checkmark-color",
         "--hx-checkbox-error-color",
         "--hx-checkbox-focus-ring-color",
@@ -433,6 +433,7 @@
         "--hx-checkbox-help-text-color",
         "--hx-checkbox-label-color",
         "--hx-checkbox-size",
+        "--hx-color-action-primary-bg",
         "--hx-color-border-strong",
         "--hx-color-error-500",
         "--hx-color-error-text",
@@ -823,12 +824,13 @@
         "--hx-border-radius-md",
         "--hx-border-radius-sm",
         "--hx-border-width-thin",
+        "--hx-color-action-primary-bg",
+        "--hx-color-action-primary-bg-hover",
         "--hx-color-border-default",
         "--hx-color-border-strong",
         "--hx-color-error-500",
         "--hx-color-error-text",
         "--hx-color-neutral-900",
-        "--hx-color-primary-500",
         "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-surface-sunken",
@@ -853,7 +855,6 @@
         "--hx-date-picker-label-color",
         "--hx-date-picker-selected-bg",
         "--hx-date-picker-selected-color",
-        "--hx-date-picker-selected-hover-bg",
         "--hx-date-picker-today-color",
         "--hx-date-picker-trigger-color",
         "--hx-date-picker-trigger-hover-color",
@@ -1167,13 +1168,14 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-border-width-thin",
+        "--hx-color-action-primary-bg",
+        "--hx-color-action-primary-bg-hover",
         "--hx-color-border-strong",
         "--hx-color-error-500",
         "--hx-color-error-600",
         "--hx-color-neutral-0",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
-        "--hx-color-primary-600",
         "--hx-color-surface-raised",
         "--hx-color-surface-sunken",
         "--hx-color-text-on-error",
@@ -1457,8 +1459,8 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-border-width-thin",
+        "--hx-color-action-primary-bg",
         "--hx-color-border-strong",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-surface-sunken",
         "--hx-color-text-muted",
@@ -1483,7 +1485,6 @@
         "--hx-pagination-font-family",
         "--hx-pagination-gap",
         "--hx-pagination-hover-bg",
-        "--hx-pagination-hover-border-color",
         "--hx-pagination-page-size-label-color",
         "--hx-space-1",
         "--hx-space-2",
@@ -2511,12 +2512,12 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-border-width-thin",
+        "--hx-color-action-primary-bg",
         "--hx-color-border-strong",
         "--hx-color-neutral-0",
         "--hx-color-neutral-500",
         "--hx-color-primary-100",
         "--hx-color-primary-50",
-        "--hx-color-primary-500",
         "--hx-color-primary-600",
         "--hx-color-primary-700",
         "--hx-color-surface-raised",
@@ -2547,10 +2548,18 @@
         "--hx-toggle-button-border-color",
         "--hx-toggle-button-border-radius",
         "--hx-toggle-button-color",
+        "--hx-toggle-button-fc-bg",
+        "--hx-toggle-button-fc-border-color",
+        "--hx-toggle-button-fc-border-width",
+        "--hx-toggle-button-fc-color",
+        "--hx-toggle-button-fc-focus-ring-color",
+        "--hx-toggle-button-fc-focus-ring-offset",
+        "--hx-toggle-button-fc-focus-ring-width",
         "--hx-toggle-button-focus-ring-color",
         "--hx-toggle-button-font-family",
         "--hx-toggle-button-font-weight",
         "--hx-toggle-button-pressed-bg",
+        "--hx-toggle-button-pressed-ring-width",
         "--hx-touch-target-min",
         "--hx-transition-fast"
       ]

package/dist/index.js

@@ -3,14 +3,14 @@ import { H as S, a as y } from "./shared/hx-accordion-ZVzgDzTG.js";
 import { H as b } from "./shared/hx-action-bar-CitgcpGv.js";
 import { H as g } from "./shared/hx-alert-Bto8-TIi.js";
 import { H as v } from "./shared/hx-avatar-C9hOmlAb.js";
-import { H as E } from "./shared/hx-badge-JlFtAdxS.js";
+import { H as E } from "./shared/hx-badge-DFL35nzi.js";
 import { H as k } from "./shared/hx-banner-fpRnciIO.js";
 import { H as B, a as P } from "./shared/hx-breadcrumb-item-3tKppF9h.js";
-import { H as M } from "./shared/hx-button-BOwAEcF1.js";
+import { H as M } from "./shared/hx-button-rRNmD4fd.js";
 import { H as N } from "./shared/hx-button-group-4NUBpkyC.js";
 import { H as A } from "./shared/hx-card-CswtnYvj.js";
 import { H as G, a as U } from "./shared/hx-carousel-item-z1Lc24op.js";
-import { H as O } from "./shared/hx-checkbox-CYd0YV_u.js";
+import { H as O } from "./shared/hx-checkbox-hPlIw6Lb.js";
 import { H as K } from "./shared/hx-checkbox-group-D5piJLY8.js";
 import { H as Y } from "./shared/hx-clinical-status-D3XQIOqX.js";
 import { H as q } from "./shared/hx-code-snippet-fVV3Z2DZ.js";
@@ -20,7 +20,7 @@ import { H as oe } from "./shared/hx-container-DVI7sxfX.js";
 import { H as re } from "./shared/hx-copy-button-sUVuikyH.js";
 import { H as ie } from "./shared/hx-counter-0zYapFhf.js";
 import { H as xe } from "./shared/hx-data-table-Ct3gQ6ya.js";
-import { H as le } from "./shared/hx-date-picker-B49yo4Vm.js";
+import { H as le } from "./shared/hx-date-picker-DSKDkCy1.js";
 import { H as pe } from "./shared/hx-dialog-B4weoj_1.js";
 import { H as fe } from "./shared/hx-divider-CYfcUjcr.js";
 import { H as de } from "./shared/hx-drawer-CM_upadk.js";
@@ -33,7 +33,7 @@ import { H as Ee } from "./shared/hx-format-date-CKnlQOmV.js";
 import { H as ke, a as we } from "./shared/hx-grid-CXZf3jeK.js";
 import { H as Pe } from "./shared/hx-help-text-Xb2Yr8x2.js";
 import { H as Me } from "./shared/hx-icon-fuVm4-bk.js";
-import { H as Ne } from "./shared/hx-icon-button-a6OpeQz5.js";
+import { H as Ne } from "./shared/hx-icon-button-B2BdVdyK.js";
 import { H as Ae } from "./shared/hx-image-Ben_4yM5.js";
 import { H as Ge } from "./shared/hx-link-CMnZRUtQ.js";
 import { H as Ve, a as Oe } from "./shared/hx-list-Bp8HeLHh.js";
@@ -42,7 +42,7 @@ import { H as qe } from "./shared/hx-meter-BnpmF3Vx.js";
 import { H as Je } from "./shared/hx-nav-ldFM3Fle.js";
 import { H as Ze } from "./shared/hx-number-input-yUzFOSC1.js";
 import { H as oo } from "./shared/hx-overflow-menu-DFjJAziP.js";
-import { H as ro } from "./shared/hx-pagination-C7y8GVyU.js";
+import { H as ro } from "./shared/hx-pagination-D726PyTM.js";
 import { H as io } from "./shared/hx-patient-banner-CkS-Lmj4.js";
 import { H as xo } from "./shared/hx-phi-field-C19oxlrr.js";
 import { H as lo } from "./shared/hx-popover-BAlAFOH9.js";
@@ -50,7 +50,7 @@ import { H as po } from "./shared/hx-popup-COUXXZ9X.js";
 import { H as fo } from "./shared/hx-progress-bar-CYz9U721.js";
 import { H as ho } from "./shared/hx-progress-ring-TwHyXeEp.js";
 import { H as So } from "./shared/hx-prose-BThYcASV.js";
-import { H as To, a as bo } from "./shared/hx-radio-C7eTj5YI.js";
+import { H as To, a as bo } from "./shared/hx-radio-CY4kQfZw.js";
 import { H as go } from "./shared/hx-rating-C3QP53k9.js";
 import { H as vo } from "./shared/hx-select-DahFehiZ.js";
 import { H as Eo, a as Do } from "./shared/hx-nav-item-CODtUlew.js";
@@ -62,7 +62,7 @@ import { H as Ao } from "./shared/hx-split-panel-B-u0Z3mm.js";
 import { H as Go } from "./shared/hx-stack-DGfcOfWJ.js";
 import { H as Vo } from "./shared/hx-stat-Gtw_SpK8.js";
 import { H as Xo } from "./shared/hx-status-indicator-BlQyen43.js";
-import { H as Wo, a as Yo } from "./shared/hx-step-R2rjp1fT.js";
+import { H as Wo, a as Yo } from "./shared/hx-step-CUzliIK_.js";
 import { H as qo, a as zo } from "./shared/hx-structured-list-m_-dMJbC.js";
 import { H as Qo } from "./shared/hx-style-scope-TDnR8H4O.js";
 import { H as et } from "./shared/hx-switch-TvKGvZJz.js";
@@ -75,7 +75,7 @@ import { H as bt } from "./shared/hx-textarea-CNG590KY.js";
 import { H as gt } from "./shared/hx-theme-BsefFWTO.js";
 import { H as vt } from "./shared/hx-time-picker-Bo7FWzmf.js";
 import { H as Et, a as Dt, t as kt } from "./shared/toast-factory-Dht3pVsw.js";
-import { H as Bt } from "./shared/hx-toggle-button-DwBers3A.js";
+import { H as Bt } from "./shared/hx-toggle-button-DSJeFlb0.js";
 import { H as Ft } from "./shared/hx-tooltip-DVqtKPCD.js";
 import { H as Lt } from "./shared/hx-top-nav-DP6OFS8C.js";
 import { H as Rt, a as At } from "./shared/hx-tree-item-CXyspGxI.js";