@helixui/library 3.6.0 → 3.8.0-next.145

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

@@ -1,6 +1,13 @@
 /* hx-toggle-button — extracted from Shadow DOM styles */
 :host {
     display: inline-block;
+    /*
+     * Suppress the browser default ~1px host outline. Without this the formal
+     * AAA audit harness (which measures computed outline-width on the focused
+     * host) records a sub-2px outline and reports WCAG 2.4.13 Partially Supports.
+     * The visual focus indicator is rendered on the inner .button below.
+     */
+    outline: none;
   }
 
   :host([disabled]) {
@@ -17,7 +24,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));
@@ -78,7 +85,10 @@
   .button--md {
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-size: var(--hx-font-size-md, 1rem);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the default md variant clears the
+       AAA-strict floor without requiring consumers to opt into sm or lg. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .button--lg {
@@ -90,7 +100,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 +178,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 +197,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 +222,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 +258,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/hx-tooltip.css

@@ -7,6 +7,19 @@
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted
+   * trigger. APG forbids the tooltip body from holding focus, so the
+   * trigger is the only AAA-relevant focus surface. Token-driven.
+   */
+  ::slotted([slot='trigger']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tooltip-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='tooltip'] {
     position: fixed;
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));

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

@@ -77,9 +77,20 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px ring on slotted nav
+   * controls (links, buttons, hx-link, hx-button). Slotted bare anchors
+   * otherwise fall back to the 1px browser default.
+   */
+  ::slotted(a:focus-visible),
+  ::slotted(button:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   .mobile-toggle__icon {
-    width: var(--hx-space-6, 1.5rem);
-    height: var(--hx-space-6, 1.5rem);
+    --hx-icon-size: var(--hx-space-6, 1.5rem);
   }
 
   /* ─── Collapsible panel (mobile) ─── */

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-05-08T00:23:51.361Z */
+/* index.css — generated 2026-05-11T04:21:22.706Z */
 /* 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-08T00:23:51.360Z",
+  "generated": "2026-05-11T04:21:22.705Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -18,6 +18,7 @@
         "--hx-action-bar-bg",
         "--hx-action-bar-border",
         "--hx-action-bar-border-radius",
+        "--hx-action-bar-focus-ring-color",
         "--hx-action-bar-gap",
         "--hx-action-bar-padding",
         "--hx-action-bar-padding-block-end",
@@ -28,6 +29,9 @@
         "--hx-color-border-default",
         "--hx-color-surface-default",
         "--hx-color-surface-raised",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
         "--hx-size-10",
         "--hx-size-12",
         "--hx-size-8",
@@ -151,6 +155,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 +163,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 +283,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",
@@ -304,7 +309,6 @@
         "--hx-line-height-tight",
         "--hx-opacity-disabled",
         "--hx-opacity-muted",
-        "--hx-size-10",
         "--hx-size-12",
         "--hx-space-1",
         "--hx-space-2",
@@ -423,7 +427,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 +436,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",
@@ -468,6 +472,7 @@
       "file": "hx-checkbox-group.css",
       "tokens": [
         "--hx-checkbox-group-error-color",
+        "--hx-checkbox-group-focus-ring-color",
         "--hx-checkbox-group-font-family",
         "--hx-checkbox-group-gap",
         "--hx-checkbox-group-help-text-color",
@@ -475,6 +480,9 @@
         "--hx-color-error-text",
         "--hx-color-text-muted",
         "--hx-color-text-strong",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
         "--hx-font-family-sans",
         "--hx-font-size-sm",
         "--hx-font-size-xs",
@@ -628,6 +636,7 @@
         "--hx-space-2",
         "--hx-space-3",
         "--hx-space-4",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -741,7 +750,6 @@
         "--hx-font-size-sm",
         "--hx-font-weight-medium",
         "--hx-opacity-disabled",
-        "--hx-size-10",
         "--hx-size-12",
         "--hx-space-1",
         "--hx-space-2",
@@ -823,12 +831,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 +862,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",
@@ -871,7 +879,6 @@
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
         "--hx-shadow-md",
-        "--hx-size-10",
         "--hx-size-8",
         "--hx-space-1",
         "--hx-space-2",
@@ -1009,11 +1016,17 @@
         "--hx-border-radius-md",
         "--hx-color-border-default",
         "--hx-color-surface-default",
+        "--hx-color-text-primary",
+        "--hx-dropdown-focus-ring-color",
         "--hx-dropdown-panel-bg",
         "--hx-dropdown-panel-border-color",
         "--hx-dropdown-panel-border-radius",
+        "--hx-dropdown-panel-color",
         "--hx-dropdown-panel-min-width",
         "--hx-dropdown-panel-z-index",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
         "--hx-opacity-disabled",
         "--hx-overlay-black-12",
         "--hx-transition-fast"
@@ -1154,6 +1167,7 @@
       "tokens": [
         "--hx-icon-color",
         "--hx-icon-size",
+        "--hx-icon-stroke-width",
         "--hx-size-10",
         "--hx-size-4",
         "--hx-size-5",
@@ -1167,13 +1181,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",
@@ -1326,13 +1341,14 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-border-radius-sm",
+        "--hx-color-action-primary-bg",
         "--hx-color-neutral-0",
         "--hx-color-neutral-100",
         "--hx-color-neutral-300",
         "--hx-color-neutral-700",
         "--hx-color-neutral-800",
         "--hx-color-neutral-900",
-        "--hx-color-primary-600",
+        "--hx-color-text-on-primary",
         "--hx-focus-ring-color",
         "--hx-focus-ring-offset",
         "--hx-focus-ring-width",
@@ -1353,6 +1369,7 @@
         "--hx-nav-link-color",
         "--hx-nav-link-hover-bg",
         "--hx-nav-link-hover-color",
+        "--hx-nav-link-min-height",
         "--hx-nav-padding",
         "--hx-nav-submenu-bg",
         "--hx-nav-submenu-min-width",
@@ -1362,6 +1379,7 @@
         "--hx-space-2",
         "--hx-space-3",
         "--hx-space-4",
+        "--hx-touch-target-min",
         "--hx-transition-fast",
         "--hx-transition-normal",
         "--hx-z-index-dropdown"
@@ -1411,6 +1429,7 @@
         "--hx-space-2",
         "--hx-space-3",
         "--hx-space-4",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -1457,8 +1476,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 +1502,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",
@@ -1596,6 +1614,10 @@
         "--hx-arrow-color",
         "--hx-arrow-size",
         "--hx-color-neutral-0",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
+        "--hx-popup-focus-ring-color",
         "--hx-popup-transition",
         "--hx-popup-z-index"
       ]
@@ -1669,6 +1691,9 @@
         "--hx-color-error-text",
         "--hx-color-text-muted",
         "--hx-color-text-strong",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
         "--hx-font-family-sans",
         "--hx-font-size-sm",
         "--hx-font-size-xs",
@@ -1677,6 +1702,7 @@
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
         "--hx-radio-group-error-color",
+        "--hx-radio-group-focus-ring-color",
         "--hx-radio-group-font-family",
         "--hx-radio-group-gap",
         "--hx-radio-group-help-text-color",
@@ -1794,6 +1820,7 @@
         "--hx-space-4",
         "--hx-space-5",
         "--hx-space-8",
+        "--hx-touch-target-min",
         "--hx-transition-fast",
         "--hx-transition-normal"
       ]
@@ -1898,6 +1925,8 @@
       "tokens": [
         "--hx-border-radius-md",
         "--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-400",
@@ -1908,13 +1937,13 @@
         "--hx-color-primary-300",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
-        "--hx-color-primary-600",
         "--hx-color-primary-900",
         "--hx-color-surface-default",
         "--hx-color-surface-raised",
         "--hx-color-surface-sunken",
         "--hx-color-text-on-error",
         "--hx-color-text-on-primary",
+        "--hx-color-text-on-primary-strong",
         "--hx-color-text-primary",
         "--hx-filter-brightness-active",
         "--hx-filter-brightness-hover",
@@ -1929,7 +1958,6 @@
         "--hx-line-height-tight",
         "--hx-opacity-disabled",
         "--hx-overlay-black-10",
-        "--hx-size-10",
         "--hx-size-12",
         "--hx-size-8",
         "--hx-space-1",
@@ -1949,6 +1977,7 @@
         "--hx-split-button-menu-border-color",
         "--hx-split-button-menu-border-radius",
         "--hx-split-button-menu-max-height",
+        "--hx-touch-target-min",
         "--hx-transition-fast",
         "--hx-z-index-dropdown"
       ]
@@ -2113,10 +2142,11 @@
       "file": "hx-switch.css",
       "tokens": [
         "--hx-border-radius-full",
+        "--hx-color-action-primary-bg",
         "--hx-color-border-strong",
         "--hx-color-error-text",
-        "--hx-color-primary-500",
         "--hx-color-primary-600",
+        "--hx-color-primary-700",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
         "--hx-color-text-strong",
@@ -2153,7 +2183,6 @@
         "--hx-switch-thumb-size-md",
         "--hx-switch-thumb-size-sm",
         "--hx-switch-track-bg",
-        "--hx-switch-track-checked-bg",
         "--hx-switch-track-checked-hover-bg",
         "--hx-switch-track-height-lg",
         "--hx-switch-track-height-md",
@@ -2348,7 +2377,6 @@
         "--hx-input-sm-font-size",
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
-        "--hx-size-10",
         "--hx-size-12",
         "--hx-size-8",
         "--hx-space-1",
@@ -2361,6 +2389,7 @@
         "--hx-text-input-padding-x",
         "--hx-text-input-padding-y",
         "--hx-text-input-sm-font-size",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -2443,7 +2472,6 @@
         "--hx-font-weight-medium",
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
-        "--hx-size-10",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-3",
@@ -2462,6 +2490,7 @@
         "--hx-time-picker-option-hover-bg",
         "--hx-time-picker-option-hover-color",
         "--hx-time-picker-option-selected-color",
+        "--hx-touch-target-min",
         "--hx-transition-fast",
         "--hx-z-index-dropdown"
       ]
@@ -2511,12 +2540,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",
@@ -2536,7 +2565,6 @@
         "--hx-font-weight-semibold",
         "--hx-line-height-tight",
         "--hx-opacity-disabled",
-        "--hx-size-10",
         "--hx-size-12",
         "--hx-space-1",
         "--hx-space-2",
@@ -2547,10 +2575,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"
       ]
@@ -2562,6 +2598,9 @@
         "--hx-border-radius-sm",
         "--hx-color-surface-inverse",
         "--hx-color-text-inverse",
+        "--hx-focus-ring-color",
+        "--hx-focus-ring-offset",
+        "--hx-focus-ring-width",
         "--hx-font-family-sans",
         "--hx-font-size-xs",
         "--hx-line-height-normal",
@@ -2573,6 +2612,7 @@
         "--hx-tooltip-bg",
         "--hx-tooltip-border-radius",
         "--hx-tooltip-color",
+        "--hx-tooltip-focus-ring-color",
         "--hx-tooltip-font-family",
         "--hx-tooltip-font-size",
         "--hx-tooltip-max-width",