@helixui/library 2.1.2 → 3.0.0

package/dist/css/helix-overlay.css

@@ -103,7 +103,7 @@
 
   .dialog__heading {
     margin: 0;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -129,7 +129,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:
@@ -190,6 +190,27 @@
     white-space: nowrap;
     border: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: 1px solid CanvasText;
+    }
+
+    .dialog__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .dialog__footer {
+      border-top-color: CanvasText;
+    }
+
+    .dialog__close-btn {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-drawer ── */
 /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
   [hidden] {
@@ -358,7 +379,7 @@
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -452,6 +473,27 @@
       var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
     flex-shrink: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .drawer-panel {
+      border: 1px solid CanvasText;
+    }
+
+    .drawer-header {
+      border-bottom-color: CanvasText;
+    }
+
+    .drawer-footer {
+      border-top-color: CanvasText;
+    }
+
+    .drawer-close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-dropdown ── */
 :host {
     display: inline-block;
@@ -472,7 +514,7 @@
     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-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,
@@ -498,6 +540,15 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    [part='panel'] {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-popover ── */
 :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
@@ -515,11 +566,11 @@
     max-width: var(--hx-popover-max-width, 320px);
     padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
     background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
+    font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-normal, 1.5);
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -549,7 +600,7 @@
     width: var(--hx-popover-arrow-size, 10px);
     height: var(--hx-popover-arrow-size, 10px);
     background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -559,6 +610,18 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='body'] {
+      border-color: CanvasText;
+    }
+
+    [part='arrow'] {
+      border-color: CanvasText;
+    }
+  }
 /* ── hx-popup ── */
 :host {
     display: inline-block;
@@ -590,6 +653,18 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='popup'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
+  }
 /* ── hx-tooltip ── */
 :host {
     display: inline-block;
@@ -604,9 +679,9 @@
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
     border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -631,7 +706,7 @@
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -640,4 +715,16 @@
     [part='tooltip'] {
       transition: none;
     }
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='tooltip'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
   }

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);
   }
 
@@ -238,6 +252,34 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .button {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .button:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .button[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    .button--copied {
+      border-color: Highlight;
+      color: Highlight;
+    }
+  }
 /* ── hx-counter ── */
 :host {
     display: inline-block;
@@ -248,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;
   }
@@ -289,6 +331,16 @@
          will see the final value immediately via the component logic */
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @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;
@@ -299,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;
@@ -379,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));
@@ -473,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 ─── */
@@ -608,6 +671,41 @@
       animation: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .split-button__primary,
+    .split-button__trigger {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .split-button__primary:focus-visible,
+    .split-button__trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .split-button__primary[disabled],
+    .split-button__trigger[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .split-button__menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-theme ── */
 :host {
     display: contents;
@@ -630,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,10 +1,18 @@
 /* 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 {
     border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .accordion {
+      border: 2px solid CanvasText;
+    }
+  }

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,6 +208,27 @@
   :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) ─── */
+
+  @media (forced-colors: active) {
+    .alert {
+      border-color: CanvasText;
+    }
+
+    .alert--accent {
+      border-inline-start-color: CanvasText;
+    }
+
+    .alert__icon svg {
+      fill: CanvasText;
+    }
+
+    .alert__close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
   }

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;