@helixui/library 2.1.2-next.52 → 2.1.2-next.54

package/dist/css/helix-data.css

@@ -65,7 +65,7 @@
     display: block;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
-    line-height: var(--hx-line-height-relaxed, 1.625);
+    line-height: var(--hx-line-height-relaxed, 1.75);
     color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
@@ -84,7 +84,7 @@
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background-color: var(--hx-color-neutral-800, #1e293b);
     color: var(--hx-color-neutral-200, #e2e8f0);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
     line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */
@@ -126,7 +126,7 @@
     border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
     background-color: var(--hx-color-neutral-800, #1e293b);
     color: var(--hx-color-neutral-300, #cbd5e1);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
     text-align: center;
@@ -166,6 +166,28 @@
     }
   }
 
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .code-snippet {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet--inline {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet__copy-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .code-snippet__expand-button {
+      border-top-color: CanvasText;
+      color: ButtonText;
+    }
+  }
+
   /* ─── Screen-reader only ─── */
 
   .sr-only {
@@ -183,7 +205,7 @@
 :host {
     display: block;
     overflow-x: auto;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-data-table-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -386,6 +408,29 @@
     color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    table {
+      border: 1px solid CanvasText;
+    }
+
+    th,
+    td {
+      border-bottom-color: CanvasText;
+    }
+
+    tbody tr[aria-selected='true'] {
+      outline: 2px solid Highlight;
+    }
+
+    .skeleton-cell {
+      animation: none;
+      border: 1px solid GrayText;
+      background: none;
+    }
+  }
 /* ── hx-list ── */
 :host {
     display: block;
@@ -434,6 +479,16 @@
     border-bottom: var(--hx-border-width-thin, 1px) solid
       var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /* Divider borders are already using a border property, which forced-colors respects.
+       Ensure the system color is used for divider borders. */
+    :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
+      border-bottom-color: CanvasText;
+    }
+  }
 /* ── hx-structured-list ── */
 :host {
     display: block;
@@ -468,6 +523,14 @@
   :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {
     background: var(--_bg-stripe);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host([bordered]) .list {
+      border-color: CanvasText;
+    }
+  }
 `;
 
 export const helixStructuredListRowStyles = css`
@@ -491,12 +554,12 @@ export const helixStructuredListRowStyles = css`
 
   .row__label {
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .row__value {
-    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -509,11 +572,19 @@ export const helixStructuredListRowStyles = css`
   .row__actions:empty {
     display: none;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host(:not(:last-of-type)) .row {
+      border-bottom-color: CanvasText;
+    }
+  }
 /* ── hx-table ── */
 :host {
     display: block;
     overflow-x: auto;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-table-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -615,6 +686,14 @@ export const helixStructuredListRowStyles = css`
       transition: none !important;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    table {
+      border: 1px solid CanvasText;
+    }
+  }
 `;
 
 /**

package/dist/css/helix-feedback.css

@@ -38,10 +38,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);
@@ -54,7 +54,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;
   }
 
@@ -81,7 +81,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 {
@@ -141,7 +141,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;
@@ -181,19 +181,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 ─── */
@@ -201,8 +201,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 ─── */
@@ -210,8 +210,29 @@
   :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;
+    }
   }
 /* ── hx-banner ── */
 :host {
@@ -255,10 +276,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);
@@ -271,7 +292,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 {
@@ -293,7 +314,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;
@@ -333,7 +354,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;
@@ -367,19 +388,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 ─── */
@@ -387,8 +408,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 ─── */
@@ -396,8 +417,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 ─── */
@@ -416,6 +437,23 @@
       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;
+    }
+  }
 /* ── hx-meter ── */
 :host {
     display: block;
@@ -432,14 +470,14 @@
   }
 
   .meter:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #60a5fa);
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .meter__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -447,7 +485,7 @@
     position: relative;
     width: 100%;
     height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
-    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
@@ -476,17 +514,17 @@
   /* ─── Default (no thresholds configured) ─── */
 
   :host {
-    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #2563eb));
   }
 
   /* ─── Semantic state colors ─── */
 
   :host([data-state='optimum']) {
-    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #16a34a));
   }
 
   :host([data-state='warning']) {
-    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #d97706));
   }
 
   :host([data-state='danger']) {
@@ -502,15 +540,15 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
     line-height: var(--hx-line-height-tight, 1.25);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-meter-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .meter__state-label[data-state='optimum'] {
-    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #166534));
   }
 
   .meter__state-label[data-state='warning'] {
-    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #92400e));
   }
 
   .meter__state-label[data-state='danger'] {
@@ -530,6 +568,19 @@
     white-space: nowrap;
     border: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .meter__track {
+      border: 1px solid CanvasText;
+    }
+
+    .meter__indicator {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+  }
 /* ── hx-progress-bar ── */
 :host {
     display: block;
@@ -646,7 +697,7 @@
     .progress-bar--indeterminate .progress-bar__fill {
       animation: none;
       transform: scaleX(1);
-      opacity: var(--hx-opacity-disabled, 0.5); /* reduced from animation; no exact token for 0.4 */
+      opacity: var(--hx-opacity-disabled, 0.5);
     }
   }
 
@@ -800,11 +851,33 @@
     justify-content: center;
     inset: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-font-weight-semibold, 600);
     color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
     pointer-events: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * SVG stroke colors are suppressed in forced-colors mode. Use system color
+     * keywords so progress state remains distinguishable.
+     */
+    .progress-ring__track {
+      stroke: GrayText;
+    }
+
+    .progress-ring__indicator {
+      stroke: Highlight;
+    }
+
+    :host([variant='success']) .progress-ring__indicator,
+    :host([variant='warning']) .progress-ring__indicator,
+    :host([variant='danger']) .progress-ring__indicator {
+      stroke: Highlight;
+    }
+  }
 /* ── hx-stat ── */
 :host {
     display: block;
@@ -815,7 +888,7 @@
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
   }
 
   /* ─── Size Variants ─── */
@@ -859,13 +932,13 @@
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -891,12 +964,12 @@
   }
 
   .stat__trend--up {
-    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
     background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
   }
 
   .stat__trend--down {
-    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
     background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
   }
 
@@ -966,7 +1039,7 @@
     gap: var(--hx-space-2, 0.5rem);
     position: relative;
     flex-shrink: 0;
-    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));
     /* Default size (md) — always defined so .indicator never collapses to 0x0 */
     --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
@@ -1030,7 +1103,7 @@
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
     line-height: 1;
     white-space: nowrap;
   }
@@ -1084,6 +1157,19 @@
   :host([status='unknown']) {
     --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .indicator__dot {
+      forced-color-adjust: none;
+      border: 2px solid CanvasText;
+    }
+
+    .indicator__pulse-ring {
+      display: none;
+    }
+  }
 /* ── hx-toast ── */
 /* ─── hx-toast host ─── */
 
@@ -1106,13 +1192,12 @@
     border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
     color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-toast-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);
     box-shadow: var(
       --hx-toast-shadow,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     opacity: 0;
     transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));
@@ -1132,22 +1217,22 @@
   /* ─── Variant overrides ─── */
 
   .toast--success {
-    --hx-toast-bg: var(--hx-color-success-600, #16a34a);
+    --hx-toast-bg: var(--hx-color-success-600, #15803d);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);
+    --hx-toast-bg: var(--hx-color-warning-500, #d97706);
     --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
   }
 
   .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #dc2626);
+    --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);
+    --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
@@ -1239,6 +1324,19 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .toast {
+      border: 1px solid CanvasText;
+    }
+
+    .toast__close {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 `;
 
 export const helixToastStackStyles = css`