@helixui/library 2.1.2-next.53 → 2.1.2-next.57

package/dist/css/helix-tokens.css

@@ -21,17 +21,17 @@
   --hx-color-secondary-800: #164E63;
   --hx-color-secondary-900: #134152;
   --hx-color-secondary-950: #083344;
-  --hx-color-accent-50: #FFFBEB;
-  --hx-color-accent-100: #FEF3C7;
-  --hx-color-accent-200: #FDE68A;
-  --hx-color-accent-300: #FCD34D;
-  --hx-color-accent-400: #FBBF24;
-  --hx-color-accent-500: #D97706;
-  --hx-color-accent-600: #B45309;
-  --hx-color-accent-700: #92400E;
-  --hx-color-accent-800: #78350F;
-  --hx-color-accent-900: #633112;
-  --hx-color-accent-950: #451A03;
+  --hx-color-accent-50: #F5F3FF;
+  --hx-color-accent-100: #EDE9FE;
+  --hx-color-accent-200: #DDD6FE;
+  --hx-color-accent-300: #C4B5FD;
+  --hx-color-accent-400: #A78BFA;
+  --hx-color-accent-500: #7C3AED;
+  --hx-color-accent-600: #6D28D9;
+  --hx-color-accent-700: #5B21B6;
+  --hx-color-accent-800: #4C1D95;
+  --hx-color-accent-900: #3B0764;
+  --hx-color-accent-950: #2E1065;
   --hx-color-neutral-0: #FFFFFF;
   --hx-color-neutral-50: #F8FAFC;
   --hx-color-neutral-100: #F1F5F9;
@@ -144,7 +144,9 @@
   --hx-space-40: 10rem;
   --hx-space-48: 12rem;
   --hx-space-64: 16rem;
+  --hx-space-0-5: 0.125rem;
   --hx-space-px: 1px;
+  --hx-space-1-5: 0.375rem;
   --hx-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --hx-font-family-serif: 'Georgia', 'Times New Roman', serif;
   --hx-font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
@@ -198,6 +200,7 @@
   --hx-duration-normal: 200ms;
   --hx-duration-slow: 300ms;
   --hx-duration-slower: 500ms;
+  --hx-duration-spinner: 0.8s;
   --hx-duration-reduced: 0ms;
   --hx-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
   --hx-easing-in: cubic-bezier(0.4, 0, 1, 1);
@@ -206,9 +209,12 @@
   --hx-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --hx-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --hx-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --hx-transition-base: 150ms ease;
   --hx-transition-fast: 150ms ease;
   --hx-transition-normal: 250ms ease;
   --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-width: 2px;
   --hx-focus-ring-offset: 2px;
@@ -258,7 +264,10 @@
   --hx-opacity-90: 0.9;
   --hx-opacity-100: 1;
   --hx-opacity-disabled: 0.5;
+  --hx-opacity-muted: 0.6;
   --hx-opacity-overlay: 0.75;
+  --hx-size-1: 0.25rem;
+  --hx-size-3: 0.75rem;
   --hx-size-4: 1rem;
   --hx-size-5: 1.25rem;
   --hx-size-6: 1.5rem;
@@ -271,10 +280,16 @@
   --hx-size-14: 3.5rem;
   --hx-size-16: 4rem;
   --hx-size-20: 5rem;
+  --hx-size-1-5: 0.375rem;
+  --hx-size-3-5: 0.875rem;
+  --hx-size-4-5: 1.125rem;
+  --hx-size-5-5: 1.375rem;
+  --hx-size-6-5: 1.625rem;
   --hx-size-icon-sm: 1rem;
   --hx-size-icon-md: 1.25rem;
   --hx-size-icon-lg: 1.5rem;
   --hx-size-touch-target: 2.75rem;
+  --hx-size-touch-target-min: 2.75rem;
   --hx-overlay-black-6: rgba(0, 0, 0, 0.06);
   --hx-overlay-black-10: rgba(0, 0, 0, 0.10);
   --hx-overlay-black-12: rgba(0, 0, 0, 0.12);
@@ -285,9 +300,13 @@
   --hx-overlay-black-50: rgba(0, 0, 0, 0.50);
   --hx-overlay-white-8: rgba(255, 255, 255, 0.08);
   --hx-overlay-white-10: rgba(255, 255, 255, 0.10);
+  --hx-overlay-white-15: rgba(255, 255, 255, 0.15);
   --hx-overlay-white-20: rgba(255, 255, 255, 0.20);
+  --hx-overlay-white-25: rgba(255, 255, 255, 0.25);
   --hx-overlay-white-30: rgba(255, 255, 255, 0.30);
   --hx-overlay-white-40: rgba(255, 255, 255, 0.40);
+  --hx-overlay-white-50: rgba(255, 255, 255, 0.50);
+  --hx-overlay-white-70: rgba(255, 255, 255, 0.70);
   --hx-overlay-primary-25: rgba(37, 99, 235, 0.25);
   --hx-overlay-error-25: rgba(220, 53, 69, 0.25);
   --hx-overlay-neutral-12: rgba(13, 17, 23, 0.12);

package/dist/css/helix-utility.css

@@ -52,10 +52,10 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
     );
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
@@ -63,7 +63,7 @@
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
 
@@ -117,6 +117,20 @@
   ::slotted(*) {
     flex-shrink: 0;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /* Outlined variant: border is already present and will be honored by the browser */
+    .base--outlined {
+      border: 1px solid CanvasText;
+    }
+
+    /* Filled variant: background is suppressed — add border to maintain visual separation */
+    .base--filled {
+      border: 1px solid CanvasText;
+    }
+  }
 /* ── hx-copy-button ── */
 :host {
     display: inline-block;
@@ -146,7 +160,7 @@
     user-select: none;
     -webkit-user-select: none;
     flex-shrink: 0;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-copy-button-font-family, var(--hx-font-family-sans));
     font-weight: var(--hx-font-weight-medium);
     white-space: nowrap;
   }
@@ -169,8 +183,8 @@
 
   .button--sm {
     padding: var(--hx-space-1);
-    min-width: var(--hx-size-8);
-    height: var(--hx-size-8);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-sm);
   }
 
@@ -276,7 +290,7 @@
     align-items: baseline;
     font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
-    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));
     line-height: var(--hx-line-height-tight, 1.25);
     font-variant-numeric: tabular-nums;
   }
@@ -319,7 +333,14 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
-  /* Counter is text-only — forced-color-adjust: auto (default) is sufficient. */
+
+  @media (forced-colors: active) {
+    /* Counter is text-only — forced-color-adjust: auto (default) is sufficient.
+       The browser maps the custom color properties to CanvasText automatically. */
+    .counter {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-format-date ── */
 :host {
     display: inline;
@@ -330,6 +351,17 @@
     font: inherit;
     color: inherit;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-format-date renders text-only content using color: inherit from its parent.
+     forced-color-adjust: auto (default) is sufficient — the browser maps
+     inherited text color to CanvasText automatically in forced-colors mode. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-split-button ── */
 :host {
     display: inline-block;
@@ -410,7 +442,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, #3b82f6));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));
     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, #2563eb));
@@ -504,7 +536,7 @@
     --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
     --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);
+    --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
   }
 
   /* ─── Variant: secondary ─── */
@@ -696,4 +728,15 @@
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-theme is a transparent wrapper that applies design tokens.
+     It has no visual output of its own. forced-color-adjust: auto (default)
+     is sufficient — theme tokens will resolve to system colors as needed. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
   }

package/dist/css/hx-accordion.css

@@ -1,7 +1,7 @@
 /* hx-accordion — extracted from Shadow DOM styles */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .accordion {

package/dist/css/hx-action-bar.css

@@ -50,10 +50,10 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
     );
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
@@ -61,7 +61,7 @@
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
 
@@ -115,3 +115,17 @@
   ::slotted(*) {
     flex-shrink: 0;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /* Outlined variant: border is already present and will be honored by the browser */
+    .base--outlined {
+      border: 1px solid CanvasText;
+    }
+
+    /* Filled variant: background is suppressed — add border to maintain visual separation */
+    .base--filled {
+      border: 1px solid CanvasText;
+    }
+  }

package/dist/css/hx-alert.css

@@ -36,10 +36,10 @@
     gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
     border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
     border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));
-    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #f0f9ff));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
     font-family: var(--hx-alert-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);
@@ -52,7 +52,7 @@
   .alert--accent {
     border-width: 0;
     border-inline-start: var(--hx-alert-accent-width, 4px) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
     border-radius: 0;
   }
 
@@ -79,7 +79,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0284c7));
   }
 
   .alert__icon svg {
@@ -139,7 +139,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -179,19 +179,19 @@
 
   :host([variant='info']) .alert,
   :host(:not([variant])) .alert {
-    --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);
-    --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);
-    --hx-alert-color: var(--hx-color-info-800, #1a3a4a);
-    --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);
+    --hx-alert-bg: var(--hx-color-info-50, #f0f9ff);
+    --hx-alert-border-color: var(--hx-color-info-200, #bae6fd);
+    --hx-alert-color: var(--hx-color-info-800, #0c4a6e);
+    --hx-alert-icon-color: var(--hx-color-info-500, #0284c7);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .alert {
-    --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);
-    --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);
-    --hx-alert-color: var(--hx-color-success-800, #065f46);
-    --hx-alert-icon-color: var(--hx-color-success-500, #10b981);
+    --hx-alert-bg: var(--hx-color-success-50, #f0fdf4);
+    --hx-alert-border-color: var(--hx-color-success-200, #bbf7d0);
+    --hx-alert-color: var(--hx-color-success-800, #14532d);
+    --hx-alert-icon-color: var(--hx-color-success-500, #16a34a);
   }
 
   /* ─── Variant: warning ─── */
@@ -199,8 +199,8 @@
   :host([variant='warning']) .alert {
     --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
     --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-alert-color: var(--hx-color-warning-800, #92400e);
-    --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-alert-color: var(--hx-color-warning-800, #78350f);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #d97706);
   }
 
   /* ─── Variant: error ─── */
@@ -208,8 +208,8 @@
   :host([variant='error']) .alert {
     --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
     --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-alert-color: var(--hx-color-error-800, #991b1b);
-    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
+    --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */

package/dist/css/hx-avatar.css

@@ -76,7 +76,7 @@
   /* ─── Initials ─── */
 
   .avatar__initials {
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-avatar-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-avatar-font-size);
     font-weight: var(--hx-font-weight-semibold, 600);
     line-height: 1;

package/dist/css/hx-badge.css

@@ -51,29 +51,29 @@
   }
 
   .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-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, #f3f4f6))
+      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-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #15803d)
+      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-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, #eab308)
+      var(--hx-color-warning-500, #d97706)
     );
   }
 
@@ -87,20 +87,20 @@
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
-    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --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, #e5e7eb)
+      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-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
     );
   }
 
@@ -180,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);
@@ -193,7 +193,7 @@
 
   .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) ─── */

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 ─── */

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

@@ -140,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 ─── */
@@ -207,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,7 +156,7 @@
     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;
   }