@helixui/library 3.8.0 → 3.9.0-next.150

package/dist/css/helix-forms.css

@@ -155,17 +155,12 @@
     border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
-  /* ─── Checkmark Icon ─── */
+  /* ─── Checkmark Icon (hx-icon library="helix") ─── */
 
   .checkbox__icon {
     display: none;
-    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
-    stroke-width: 2.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+    --hx-icon-size: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    --hx-icon-color: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
   }
 
   .checkbox--checked .checkbox__icon--check {
@@ -272,7 +267,7 @@
     }
 
     .checkbox__icon {
-      stroke: HighlightText;
+      --hx-icon-color: HighlightText;
     }
 
     .checkbox--error .checkbox__box {
@@ -1144,6 +1139,14 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
+
+  /* hx-icon glyph sizing for migrated inline SVGs (library="helix"). */
+  .field__chip-remove-glyph {
+    --hx-icon-size: 8px;
+  }
+  .field__clear-button-glyph {
+    --hx-icon-size: 12px;
+  }
 /* ── hx-date-picker ── */
 /* ============================================================
      Host
@@ -1575,6 +1578,11 @@
       border-color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated calendar trigger SVG. */
+  .field__trigger-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-field ── */
 :host {
     display: block;
@@ -1965,6 +1973,10 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  .file-item__remove-glyph {
+    --hx-icon-size: 14px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .file-item__remove {
       transition: none;
@@ -2087,6 +2099,11 @@
     align-items: center;
   }
 
+  /* Render the migrated hx-icon glyph at 1em (matches the previous inline SVG sizing). */
+  .help-text__glyph {
+    --hx-icon-size: 1em;
+  }
+
   .help-text__text {
     min-width: 0;
   }
@@ -2339,10 +2356,9 @@
     cursor: not-allowed;
   }
 
-  .field__stepper-btn svg {
+  .field__stepper-glyph {
     pointer-events: none;
-    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
-    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    --hx-icon-size: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
   }
 
   /* Size sm adjustments for stepper */
@@ -2639,6 +2655,12 @@
     color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
   }
 
+  /* ─── Star Glyph (hx-icon) Sizing ─── */
+
+  .star-glyph {
+    --hx-icon-size: 1em;
+  }
+
   /* ─── Half-Star Layout ─── */
 
   .star-half {
@@ -4539,6 +4561,11 @@
       color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated clock toggle icon. */
+  .field__toggle-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-toggle-button ── */
 :host {
     display: inline-block;

package/dist/css/helix-media.css

@@ -73,9 +73,12 @@
     cursor: not-allowed;
   }
 
-  .nav-btn svg {
-    width: 1.25em;
-    height: 1.25em;
+  .nav-btn .carousel__nav-glyph {
+    --hx-icon-size: 1.25em;
+  }
+
+  .play-pause-btn .carousel__autoplay-glyph {
+    --hx-icon-size: 1em;
   }
 
   /* ─── Play/Pause ─── */

package/dist/css/helix-navigation.css

@@ -223,6 +223,7 @@
   /* ─── Chevron Icon ─── */
 
   .nav__chevron {
+    --hx-icon-size: 16px;
     transition: transform var(--hx-transition-normal, 200ms) ease;
     flex-shrink: 0;
   }
@@ -231,6 +232,12 @@
     transform: rotate(180deg);
   }
 
+  /* ─── Hamburger Icon (mobile menu trigger) ─── */
+
+  .nav__hamburger-glyph {
+    --hx-icon-size: 24px;
+  }
+
   /* ─── Submenu ─── */
 
   .nav__submenu {
@@ -540,6 +547,11 @@
       border: 2px solid CanvasText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated trigger icons (1em parity). */
+  .trigger__glyph {
+    --hx-icon-size: 1em;
+  }
 /* ── hx-pagination ── */
 :host {
     display: block;
@@ -888,15 +900,13 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
-  .side-nav__toggle svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .side-nav__toggle .side-nav__toggle-glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
     flex-shrink: 0;
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  :host([collapsed]) .side-nav__toggle svg {
+  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {
     transform: rotate(180deg);
   }
 
@@ -1191,8 +1201,7 @@
   }
 
   .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/helix-overlay.css

@@ -515,6 +515,11 @@
       border: 1px solid ButtonText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated close-button SVG. */
+  .drawer-close-button-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-dropdown ── */
 :host {
     display: inline-block;
@@ -548,6 +553,11 @@
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
     background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
+    /* Anchor slotted text color to the design-system primary text token so
+       slotted <li>'s and other native consumer markup don't inherit a
+       foreign color cascade (e.g. brand toolbar setting body { color: #fff }
+       and rendering Edit/Duplicate as white-on-white). */
+    color: var(--hx-dropdown-panel-color, var(--hx-color-text-primary, #1a1a1a));
     border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(

package/dist/css/helix-tokens.css

@@ -91,7 +91,7 @@
   --hx-color-text-primary: var(--hx-color-neutral-900);
   --hx-color-text-strong: var(--hx-color-neutral-800);
   --hx-color-text-secondary: var(--hx-color-neutral-700);
-  --hx-color-text-muted: var(--hx-color-neutral-600);
+  --hx-color-text-muted: var(--hx-color-neutral-700);
   --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);
@@ -109,7 +109,7 @@
   --hx-color-text-link-visited: var(--hx-color-secondary-700);
   --hx-color-text-link-active: var(--hx-color-primary-900);
   --hx-color-error-text: var(--hx-color-error-700);
-  --hx-color-success-text: var(--hx-color-success-700);
+  --hx-color-success-text: var(--hx-color-success-800);
   --hx-color-surface-default: var(--hx-color-neutral-0);
   --hx-color-surface-raised: var(--hx-color-neutral-50);
   --hx-color-surface-sunken: var(--hx-color-neutral-100);
@@ -267,6 +267,7 @@
   --hx-container-xl: 1280px;
   --hx-container-content: 72rem;
   --hx-container-narrow: 48rem;
+  --hx-icon-stroke-width: 2;
   --hx-input-height-sm: var(--hx-size-8);
   --hx-input-height-md: var(--hx-size-11);
   --hx-input-height-lg: var(--hx-size-12);

package/dist/css/helix-utility.css

@@ -503,6 +503,11 @@
     transform: rotate(180deg);
   }
 
+  /* hx-icon glyph sizing for the migrated chevron (12x8 → 12px). */
+  .split-button__chevron-glyph {
+    --hx-icon-size: 12px;
+  }
+
   /* ─── Size Variants ─── */
 
   /* sm */

package/dist/css/hx-alert.css

@@ -82,10 +82,8 @@
     color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .alert__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .alert__icon .alert__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
   /* ─── Title ─── */
@@ -172,10 +170,8 @@
     opacity: 1;
   }
 
-  .alert__close-button svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .alert__close-button .alert__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/css/hx-avatar.css

@@ -88,8 +88,7 @@
   /* ─── Fallback Icon ─── */
 
   .avatar__fallback-icon {
-    width: 60%;
-    height: 60%;
+    --hx-icon-size: 60%;
     color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 

package/dist/css/hx-badge.css

@@ -239,3 +239,8 @@
       border-width: 2px;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated remove-button SVG. */
+  .badge__remove-glyph {
+    --hx-icon-size: 10px;
+  }

package/dist/css/hx-banner.css

@@ -59,10 +59,8 @@
     color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .banner__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .banner__icon .banner__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
   /* ─── Message ─── */
@@ -142,10 +140,8 @@
     opacity: 1;
   }
 
-  .banner__close-button svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .banner__close-button .banner__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   /* ─── Variant: info ─── */

package/dist/css/hx-carousel.css

@@ -71,9 +71,12 @@
     cursor: not-allowed;
   }
 
-  .nav-btn svg {
-    width: 1.25em;
-    height: 1.25em;
+  .nav-btn .carousel__nav-glyph {
+    --hx-icon-size: 1.25em;
+  }
+
+  .play-pause-btn .carousel__autoplay-glyph {
+    --hx-icon-size: 1em;
   }
 
   /* ─── Play/Pause ─── */

package/dist/css/hx-checkbox.css

@@ -153,17 +153,12 @@
     border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
-  /* ─── Checkmark Icon ─── */
+  /* ─── Checkmark Icon (hx-icon library="helix") ─── */
 
   .checkbox__icon {
     display: none;
-    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
-    stroke-width: 2.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+    --hx-icon-size: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    --hx-icon-color: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
   }
 
   .checkbox--checked .checkbox__icon--check {
@@ -270,7 +265,7 @@
     }
 
     .checkbox__icon {
-      stroke: HighlightText;
+      --hx-icon-color: HighlightText;
     }
 
     .checkbox--error .checkbox__box {

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

@@ -108,15 +108,12 @@
     color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .clinical-status__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .clinical-status__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
-  .clinical-status--compact .clinical-status__icon svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
+  .clinical-status--compact .clinical-status__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   /* ─── Message ─── */

package/dist/css/hx-combobox.css

@@ -384,3 +384,11 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
+
+  /* hx-icon glyph sizing for migrated inline SVGs (library="helix"). */
+  .field__chip-remove-glyph {
+    --hx-icon-size: 8px;
+  }
+  .field__clear-button-glyph {
+    --hx-icon-size: 12px;
+  }

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

@@ -429,3 +429,8 @@
       border-color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated calendar trigger SVG. */
+  .field__trigger-glyph {
+    --hx-icon-size: 16px;
+  }

package/dist/css/hx-drawer.css

@@ -298,3 +298,8 @@
       border: 1px solid ButtonText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated close-button SVG. */
+  .drawer-close-button-glyph {
+    --hx-icon-size: 16px;
+  }

package/dist/css/hx-dropdown.css

@@ -31,6 +31,11 @@
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
     background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
+    /* Anchor slotted text color to the design-system primary text token so
+       slotted <li>'s and other native consumer markup don't inherit a
+       foreign color cascade (e.g. brand toolbar setting body { color: #fff }
+       and rendering Edit/Duplicate as white-on-white). */
+    color: var(--hx-dropdown-panel-color, var(--hx-color-text-primary, #1a1a1a));
     border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(

package/dist/css/hx-file-upload.css

@@ -179,6 +179,10 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  .file-item__remove-glyph {
+    --hx-icon-size: 14px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .file-item__remove {
       transition: none;

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

@@ -21,6 +21,11 @@
     align-items: center;
   }
 
+  /* Render the migrated hx-icon glyph at 1em (matches the previous inline SVG sizing). */
+  .help-text__glyph {
+    --hx-icon-size: 1em;
+  }
+
   .help-text__text {
     min-width: 0;
   }

package/dist/css/hx-icon.css

@@ -49,6 +49,12 @@
     width: 100%;
     height: 100%;
     fill: currentColor;
+    /* stroke-width is consumed by stroke-paint and mixed-paint icon libraries
+       (Lucide, Heroicons-outline, Phosphor). Built-in helix + fa-free
+       libraries declare paintMode: 'fill' and ignore this property; setting
+       it here makes the token universally available without per-library
+       branching in the resolver. */
+    stroke-width: var(--hx-icon-stroke-width, 2);
     display: block;
     overflow: visible;
   }
@@ -69,6 +75,7 @@
     width: 100%;
     height: 100%;
     fill: currentColor;
+    stroke-width: var(--hx-icon-stroke-width, 2);
     display: block;
   }
 

package/dist/css/hx-link.css

@@ -76,8 +76,7 @@
 
   .link__external-icon {
     display: inline-flex;
-    width: 0.75em;
-    height: 0.75em;
+    --hx-icon-size: 0.75em;
     flex-shrink: 0;
   }
 

package/dist/css/hx-nav.css

@@ -127,6 +127,7 @@
   /* ─── Chevron Icon ─── */
 
   .nav__chevron {
+    --hx-icon-size: 16px;
     transition: transform var(--hx-transition-normal, 200ms) ease;
     flex-shrink: 0;
   }
@@ -135,6 +136,12 @@
     transform: rotate(180deg);
   }
 
+  /* ─── Hamburger Icon (mobile menu trigger) ─── */
+
+  .nav__hamburger-glyph {
+    --hx-icon-size: 24px;
+  }
+
   /* ─── Submenu ─── */
 
   .nav__submenu {

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

@@ -203,10 +203,9 @@
     cursor: not-allowed;
   }
 
-  .field__stepper-btn svg {
+  .field__stepper-glyph {
     pointer-events: none;
-    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
-    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    --hx-icon-size: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
   }
 
   /* Size sm adjustments for stepper */

package/dist/css/hx-overflow-menu.css

@@ -165,3 +165,8 @@
       border: 2px solid CanvasText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated trigger icons (1em parity). */
+  .trigger__glyph {
+    --hx-icon-size: 1em;
+  }

package/dist/css/hx-phi-field.css

@@ -70,9 +70,8 @@
     opacity: var(--hx-opacity-50, 0.5);
   }
 
-  .phi-field__toggle svg {
-    width: 1em;
-    height: 1em;
+  .phi-field__glyph {
+    --hx-icon-size: 1em;
     pointer-events: none;
   }
 

package/dist/css/hx-rating.css

@@ -60,6 +60,12 @@
     color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
   }
 
+  /* ─── Star Glyph (hx-icon) Sizing ─── */
+
+  .star-glyph {
+    --hx-icon-size: 1em;
+  }
+
   /* ─── Half-Star Layout ─── */
 
   .star-half {

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

@@ -150,15 +150,13 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
-  .side-nav__toggle svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .side-nav__toggle .side-nav__toggle-glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
     flex-shrink: 0;
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  :host([collapsed]) .side-nav__toggle svg {
+  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {
     transform: rotate(180deg);
   }
 

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

@@ -121,6 +121,11 @@
     transform: rotate(180deg);
   }
 
+  /* hx-icon glyph sizing for the migrated chevron (12x8 → 12px). */
+  .split-button__chevron-glyph {
+    --hx-icon-size: 12px;
+  }
+
   /* ─── Size Variants ─── */
 
   /* sm */

package/dist/css/hx-stat.css

@@ -94,8 +94,7 @@
   }
 
   .stat__trend-arrow {
-    width: 0.75em;
-    height: 0.75em;
+    --hx-icon-size: 0.75em;
     flex-shrink: 0;
   }
 

package/dist/css/hx-tag.css

@@ -179,3 +179,8 @@
       border-width: 3px;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated remove-button SVG. */
+  .tag__remove-glyph {
+    --hx-icon-size: 10px;
+  }

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

@@ -245,3 +245,8 @@
       color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated clock toggle icon. */
+  .field__toggle-glyph {
+    --hx-icon-size: 16px;
+  }

package/dist/css/hx-toast.css

@@ -112,6 +112,12 @@
     display: none;
   }
 
+  /* Match the previous inline 16x16 SVG sizing for both the variant icon and
+     the close-button glyph migrated to hx-icon (library="helix"). */
+  .toast__glyph {
+    --hx-icon-size: 16px;
+  }
+
   /* ─── Message ─── */
 
   .toast__message {

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

@@ -90,8 +90,7 @@
   }
 
   .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-09T16:49:04.288Z */
+/* index.css — generated 2026-05-11T23:55:32.397Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';