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

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

@@ -6,7 +6,7 @@
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   /* ─── Trigger Button ─── */
@@ -18,11 +18,11 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
     padding: 0;
     line-height: 1;
@@ -38,11 +38,11 @@
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   /* ─── Size Variants ─── */
@@ -75,8 +75,8 @@
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -101,7 +101,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #111827);
+    color: var(--hx-color-neutral-900, #0f172a);
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -110,7 +110,7 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f9fafb);
+    background-color: var(--hx-color-neutral-50, #f8fafc);
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -131,3 +131,34 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .trigger {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .trigger[disabled] {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .panel {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }

package/dist/css/hx-pagination.css

@@ -1,7 +1,7 @@
 /* hx-pagination — extracted from Shadow DOM styles */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-pagination-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .pagination-root {
@@ -34,14 +34,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -54,7 +54,7 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
     border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
   }
 
@@ -85,9 +85,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
-    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #6b7280));
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -108,18 +108,18 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     white-space: nowrap;
   }
 
   .page-size-select {
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;

package/dist/css/hx-patient-banner.css

@@ -4,20 +4,20 @@
     width: 100%;
 
     /* ─── Private token vars (3-tier cascade) ─── */
-    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f9fafb));
-    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));
     --_padding: var(
       --hx-patient-banner-padding,
       var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)
     );
     --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));
     --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #6b7280));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #64748b));
     --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));
-    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));
+    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0f172a));
     --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
     --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
-    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));
+    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   * {
@@ -44,9 +44,9 @@
     flex-shrink: 0;
     width: var(--_photo-size);
     height: var(--_photo-size);
-    /* Minimum 44x44px touch target for interactive photo content. */
-    min-width: 44px;
-    min-height: 44px;
+    /* Minimum touch target for interactive photo content (WCAG 2.5.8). */
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
     display: flex;
@@ -99,7 +99,7 @@
     border-bottom-color: var(--hx-color-error-400, #f87171);
     background-color: var(--hx-color-error-50, #fef2f2);
     /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #334155));
   }
 
   :host([aria-invalid='true']) .banner::before {
@@ -110,7 +110,7 @@
     top: 0;
     bottom: 0;
     width: var(--hx-border-width-thick, 4px);
-    background-color: var(--hx-color-error-500, #ef4444);
+    background-color: var(--hx-color-error-500, #dc2626);
     border-radius: 0;
   }
 
@@ -137,3 +137,23 @@
       animation: none !important;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .banner {
+      border-bottom-color: CanvasText;
+    }
+
+    :host([aria-invalid='true']) .banner {
+      border-bottom-color: LinkText;
+    }
+
+    :host([aria-invalid='true']) .banner::before {
+      background-color: LinkText;
+    }
+
+    .banner__photo-area {
+      border: 1px solid CanvasText;
+    }
+  }

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

@@ -17,12 +17,12 @@
   .phi-field__value--masked {
     user-select: none;
     -webkit-user-select: none;
-    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
     letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {
-    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
   }
 
   /* ─── Screen Reader Status ─── */
@@ -44,9 +44,12 @@
   .phi-field__toggle {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     background: none;
     border: none;
     padding: var(--hx-space-1, 0.25rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
     cursor: pointer;
     line-height: 1;

package/dist/css/hx-popover.css

@@ -15,11 +15,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,
@@ -49,7 +49,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;
   }
@@ -59,3 +59,15 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='body'] {
+      border-color: CanvasText;
+    }
+
+    [part='arrow'] {
+      border-color: CanvasText;
+    }
+  }

package/dist/css/hx-popup.css

@@ -29,3 +29,15 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='popup'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
+  }

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

@@ -114,7 +114,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);
     }
   }
 

package/dist/css/hx-progress-ring.css

@@ -135,8 +135,30 @@
     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;
+    }
+  }

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

@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2, 0.5rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-radio-group-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Legend ─── */
@@ -32,7 +32,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
@@ -66,7 +66,7 @@
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -75,3 +75,35 @@
     color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
     line-height: var(--hx-line-height-normal, 1.5);
   }
+
+  /* ─── 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;
+    }
+  }

package/dist/css/hx-rating.css

@@ -33,16 +33,18 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
     line-height: 1;
-    transition: transform var(--hx-transition-fast, 0.15s ease);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    transition: transform var(--hx-transition-fast, 150ms ease);
   }
 
   .symbol:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   .symbol--full,
@@ -82,7 +84,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }
@@ -94,3 +96,42 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .symbol {
+      forced-color-adjust: none;
+      color: ButtonText;
+    }
+
+    .symbol:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .symbol--full,
+    .symbol--half {
+      color: Highlight;
+    }
+
+    .star-half__empty {
+      color: ButtonText;
+    }
+
+    .base:not(.base--readonly) .symbol:hover {
+      color: Highlight;
+    }
+
+    .symbol--disabled {
+      color: GrayText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .symbol {
+      color: GrayText;
+    }
+  }

package/dist/css/hx-select.css

@@ -5,14 +5,14 @@
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
+    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
@@ -22,10 +22,10 @@
     );
 
     /* Error */
-    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
@@ -277,7 +277,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .field__error {
@@ -291,3 +291,85 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .field__trigger {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+
+    .field__trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
+    .field__trigger[aria-disabled='true'] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    .field__trigger--placeholder .field__trigger-value {
+      color: GrayText;
+    }
+
+    .field__chevron::after {
+      border-color: FieldText;
+    }
+
+    .field__listbox {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+      box-shadow: none;
+    }
+
+    .field__option {
+      color: CanvasText;
+    }
+
+    .field__option:hover {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--focused {
+      outline-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--disabled {
+      color: GrayText;
+      opacity: 1;
+    }
+
+    .field--error .field__trigger {
+      border-color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .field__label {
+      color: CanvasText;
+    }
+
+    .field__help-text {
+      color: GrayText;
+    }
+
+    .field__error {
+      color: LinkText;
+    }
+  }

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

@@ -147,3 +147,29 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .side-nav {
+      border-inline-end-color: CanvasText;
+    }
+
+    .side-nav__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .side-nav__footer {
+      border-top-color: CanvasText;
+    }
+
+    .side-nav__toggle {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .side-nav__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }

package/dist/css/hx-skeleton.css

@@ -80,3 +80,15 @@
       display: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .skeleton {
+      border: 1px solid GrayText;
+    }
+
+    .skeleton--animated::after {
+      display: none;
+    }
+  }