@helixui/library 2.1.2 → 3.0.0-next.62

package/dist/css/hx-badge.css

@@ -44,43 +44,64 @@
   .badge--primary {
     --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
     --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
-    --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-color-primary-500, #2563eb)
+    );
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
-    --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
+    );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-bg: var(--hx-color-success-700, #166534);
     --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
-    --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-color-success-700, #166534)
+    );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
-    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
-    --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);
+    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
+    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-color-warning-500, #d97706)
+    );
   }
 
   .badge--error {
     --hx-badge-bg: var(--hx-color-error-500, #dc2626);
     --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
-    --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-color-error-500, #dc2626)
+    );
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
-    --hx-badge-color: var(--hx-color-neutral-700, #374151);
-    --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-badge-color: var(--hx-color-neutral-700, #334155);
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-color-neutral-200, #e2e8f0)
+    );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
     --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
-    --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-pulse-color-internal: var(
+      --hx-badge-pulse-color,
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
+    );
   }
 
   /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
@@ -114,13 +135,11 @@
     border-radius: var(--hx-border-radius-full, 9999px);
   }
 
-  /* Guard: hide prefix slot and slotted content in dot mode to prevent overflow */
-  .badge--dot ::slotted(*) {
-    display: none;
-  }
-
+  /* Guard: hide all inner content in dot mode — the dot is purely visual */
+  .badge--dot ::slotted(*),
+  .badge--dot slot,
   .badge--dot slot[name='prefix'] {
-    display: none;
+    display: none !important;
   }
 
   /* ─── Pulse Animation ─── */
@@ -129,7 +148,7 @@
     0%,
     100% {
       opacity: 1;
-      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);
+      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color-internal, currentColor);
     }
     50% {
       opacity: var(--hx-opacity-75, 0.75);
@@ -161,7 +180,7 @@
     cursor: pointer;
     color: inherit;
     opacity: var(--hx-opacity-75, 0.75);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
     line-height: 0;
     /* WCAG 2.5.5: minimum 44×44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
@@ -174,5 +193,21 @@
 
   .badge__remove-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
-    outline-offset: var(--hx-focus-ring-offset, 1px);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .badge {
+      border: 1px solid CanvasText;
+    }
+
+    .badge--pulse {
+      animation: none;
+    }
+
+    .badge__remove-button {
+      color: ButtonText;
+    }
   }

package/dist/css/hx-banner.css

@@ -40,10 +40,10 @@
     align-items: center;
     gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
-    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #e8f4fd));
-    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #f0f9ff));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
     border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-banner-border-color, var(--hx-color-info-200, #b3d9ef));
+      var(--hx-banner-border-color, var(--hx-color-info-200, #bae6fd));
     font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #3b82f6));
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0284c7));
   }
 
   .banner__icon svg {
@@ -78,7 +78,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a)));
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e)));
     font-weight: var(--hx-font-weight-semibold, 600);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -118,7 +118,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -152,19 +152,19 @@
 
   :host([variant='info']) .banner,
   :host(:not([variant])) .banner {
-    --hx-banner-bg: var(--hx-color-info-50, #e8f4fd);
-    --hx-banner-border-color: var(--hx-color-info-200, #b3d9ef);
-    --hx-banner-color: var(--hx-color-info-800, #1a3a4a);
-    --hx-banner-icon-color: var(--hx-color-info-500, #3b82f6);
+    --hx-banner-bg: var(--hx-color-info-50, #f0f9ff);
+    --hx-banner-border-color: var(--hx-color-info-200, #bae6fd);
+    --hx-banner-color: var(--hx-color-info-800, #0c4a6e);
+    --hx-banner-icon-color: var(--hx-color-info-500, #0284c7);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .banner {
-    --hx-banner-bg: var(--hx-color-success-50, #ecfdf5);
-    --hx-banner-border-color: var(--hx-color-success-200, #a7f3d0);
-    --hx-banner-color: var(--hx-color-success-800, #065f46);
-    --hx-banner-icon-color: var(--hx-color-success-500, #10b981);
+    --hx-banner-bg: var(--hx-color-success-50, #f0fdf4);
+    --hx-banner-border-color: var(--hx-color-success-200, #bbf7d0);
+    --hx-banner-color: var(--hx-color-success-800, #14532d);
+    --hx-banner-icon-color: var(--hx-color-success-500, #16a34a);
   }
 
   /* ─── Variant: warning ─── */
@@ -172,8 +172,8 @@
   :host([variant='warning']) .banner {
     --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
     --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-banner-color: var(--hx-color-warning-800, #92400e);
-    --hx-banner-icon-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-banner-color: var(--hx-color-warning-800, #78350f);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #d97706);
   }
 
   /* ─── Variant: error ─── */
@@ -181,8 +181,8 @@
   :host([variant='error']) .banner {
     --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
     --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-banner-color: var(--hx-color-error-800, #991b1b);
-    --hx-banner-icon-color: var(--hx-color-error-500, #ef4444);
+    --hx-banner-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-banner-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Position: fixed ─── */
@@ -201,3 +201,20 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .banner {
+      border-bottom-color: CanvasText;
+    }
+
+    .banner__icon svg {
+      fill: CanvasText;
+    }
+
+    .banner__close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }

package/dist/css/hx-breadcrumb.css

@@ -27,6 +27,20 @@
     display: none;
   }
 
+  /*
+   * Ellipsis ordering when collapsed (FS-014 fix):
+   * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating
+   * the consumer's light DOM. CSS order places it between the first item
+   * (order: 0, default) and the last item (order: 2) in the flex <ol>.
+   */
+  .hx-bc-ellipsis {
+    order: 1;
+  }
+
+  ::slotted([data-bc-last]) {
+    order: 2;
+  }
+
   /* Visually hide the separator slot — used only to read text content.
    * display:none is intentional: the slot contains no interactive or focusable
    * content. If a future change adds focusable elements to this slot, switch to
@@ -34,3 +48,16 @@
   .separator-slot {
     display: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-breadcrumb is a nav container. Link colors and separators are handled
+   * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed
+   * at the container level.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }

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

@@ -89,3 +89,16 @@
     z-index: 1;
     position: relative;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * In forced-colors mode, negative margins that collapse borders between grouped
+     * buttons can obscure focus rings. Raise focused children so the Highlight
+     * outline from hx-button's own forced-colors block is fully visible.
+     */
+    .group ::slotted(:focus-within) {
+      z-index: 2;
+    }
+  }

package/dist/css/hx-button.css

@@ -60,10 +60,13 @@
 
   /* ─── Size Variants ─── */
 
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.
+     min-height uses --hx-touch-target-min to guarantee the interactive area
+     meets the threshold even though the visual size token is smaller. */
   .button--sm {
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    min-height: var(--hx-size-8, 2rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .button--md {
@@ -137,7 +140,7 @@
   }
 
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
   }
 
   /* ─── Disabled ─── */
@@ -204,7 +207,7 @@
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);
+    --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
   }
 
   /* Secondary inverted — white border and text */

package/dist/css/hx-card.css

@@ -10,12 +10,12 @@
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
     background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
     transition:
       box-shadow var(--hx-transition-normal, 250ms ease),
       transform var(--hx-transition-normal, 250ms ease);
@@ -76,7 +76,7 @@
 
   .card--interactive:hover {
     box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-    transform: translateY(var(--hx-lift-md, -2px));
+    transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
   .card--interactive:focus-visible {
@@ -138,7 +138,7 @@
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #495057));
+    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
   }
 
   .card__footer {
@@ -156,6 +156,18 @@
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     margin-top: auto;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .card {
+      border-color: CanvasText;
+    }
+
+    .card__actions {
+      border-top-color: CanvasText;
+    }
+  }

package/dist/css/hx-carousel.css

@@ -38,22 +38,22 @@
     /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-0, #fff);
-    color: var(--hx-color-neutral-700, #374151);
+    background: var(--hx-color-neutral-0, #ffffff);
+    color: var(--hx-color-neutral-700, #334155);
     cursor: pointer;
     padding: 0;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease),
-      border-color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .nav-btn:hover:not([disabled]) {
-    background: var(--hx-color-neutral-50, #f9fafb);
-    border-color: var(--hx-color-neutral-400, #9ca3af);
+    background: var(--hx-color-neutral-50, #f8fafc);
+    border-color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .nav-btn:focus-visible {
@@ -63,7 +63,7 @@
   }
 
   .nav-btn[disabled] {
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -86,16 +86,16 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     cursor: pointer;
     padding: 0;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    transition: background-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .play-pause-btn:hover {
-    background: var(--hx-color-neutral-100, #f3f4f6);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .play-pause-btn:focus-visible {
@@ -158,15 +158,15 @@
     width: var(--hx-carousel-pagination-dot-size, 0.5rem);
     height: var(--hx-carousel-pagination-dot-size, 0.5rem);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-300, #d1d5db);
+    background: var(--hx-color-neutral-300, #cbd5e1);
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      transform var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
   }
 
   .pagination-item[aria-current='true'] .pagination-dot,
   .pagination-item.is-active .pagination-dot {
-    background: var(--hx-color-primary-600, #2563eb);
+    background: var(--hx-color-primary-600, #1d4ed8);
     transform: scale(1.25);
   }
 
@@ -209,3 +209,27 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .nav-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .play-pause-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .pagination-dot {
+      border: 1px solid CanvasText;
+    }
+
+    .pagination-item[aria-current='true'] .pagination-dot,
+    .pagination-item.is-active .pagination-dot {
+      background: Highlight;
+      border-color: Highlight;
+    }
+  }

package/dist/css/hx-checkbox-group.css

@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2);
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));
   }
 
   /* ─── Legend ─── */
@@ -39,7 +39,7 @@
   }
 
   .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -59,7 +59,7 @@
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
   }
 
   /* ─── Help Text & Error Messages ─── */
@@ -72,6 +72,38 @@
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     line-height: var(--hx-line-height-normal);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .fieldset {
+      border: none;
+    }
+
+    .fieldset__legend {
+      color: CanvasText;
+    }
+
+    .fieldset--error .fieldset__legend {
+      color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .fieldset__legend {
+      color: GrayText;
+    }
+
+    .fieldset__help-text {
+      color: GrayText;
+    }
+
+    .fieldset__error {
+      color: LinkText;
+    }
+  }