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

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

@@ -167,4 +167,9 @@
       color: ButtonText;
       border: 1px solid ButtonText;
     }
+
+    .side-nav__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }

package/dist/css/hx-slider.css

@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-slider-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Label Row ─── */
@@ -33,14 +33,14 @@
   .slider__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .slider__value-display {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #6c757d));
+    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -58,7 +58,7 @@
     position: relative;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e9ecef));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
     overflow: visible;
   }
 
@@ -136,8 +136,13 @@
     background: transparent;
     border: none;
     outline: none;
-    /* Expand the hit area so the thumb is easy to grab */
-    padding-block: var(--hx-slider-input-padding-block, 0.75rem);
+    /* Expand the hit area so the thumb meets WCAG 2.5.8 touch target (44px).
+       The input's total height = track height + 2 * padding-block. With 0.75rem
+       (~12px) padding on each side and a track of ~6px, the total target area is
+       ~30px. We increase to 1rem (~16px) per side for a ~38px minimum, supplemented
+       by the visual thumb size. */
+    padding-block: var(--hx-slider-input-padding-block, 1rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   /* In forced-color mode, restore native outline so the input remains focusable */
@@ -253,7 +258,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #adb5bd));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
     transform: translateX(-50%);
   }
 
@@ -263,7 +268,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -272,16 +277,16 @@
 
   .slider__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-color-neutral-400, #adb5bd);
+    background-color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .slider--disabled .slider__thumb-visual {
-    border-color: var(--hx-color-neutral-400, #adb5bd);
+    border-color: var(--hx-color-neutral-400, #94a3b8);
   }

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

@@ -78,7 +78,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));
@@ -172,7 +172,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 ─── */

package/dist/css/hx-stack.css

@@ -102,3 +102,13 @@
   :host([gap='xl']) [part='base'] {
     gap: var(--hx-space-8, 2rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-stack is a layout wrapper with no state communicated via color.
+     forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/hx-stat.css

@@ -8,7 +8,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 ─── */
@@ -52,13 +52,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);
   }
 
@@ -84,12 +84,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));
   }
 

package/dist/css/hx-status-indicator.css

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

package/dist/css/hx-steps.css

@@ -50,3 +50,15 @@
     --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-steps is a layout container — forced-colors state is handled
+   * by each hx-step child element's own forced-colors block.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/hx-structured-list.css

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

package/dist/css/hx-style-scope.css

@@ -2,3 +2,14 @@
 :host {
     display: contents;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-style-scope is a transparent layout wrapper (display: contents).
+     It has no visual output of its own. forced-color-adjust: auto (default)
+     is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/hx-switch.css

@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-switch-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.
@@ -41,7 +41,7 @@
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -137,7 +137,7 @@
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -153,7 +153,7 @@
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-table.css

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

package/dist/css/hx-tabs.css

@@ -1,7 +1,7 @@
 /* hx-tabs — extracted from Shadow DOM styles */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   * {
@@ -28,7 +28,7 @@
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -53,7 +53,7 @@
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);

package/dist/css/hx-tag.css

@@ -14,15 +14,15 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));
-    color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
     font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
     vertical-align: middle;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Size Variants ─── */
@@ -48,32 +48,32 @@
   /* ─── Color Variants ─── */
 
   .tag--default {
-    --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);
-    --hx-tag-color: var(--hx-color-neutral-700, #374151);
-    --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-tag-color: var(--hx-color-neutral-700, #334155);
+    --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
   }
 
   .tag--primary {
     --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
-    --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);
+    --hx-tag-color: var(--hx-color-primary-700, #1e40af);
     --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
   }
 
   .tag--success {
     --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-tag-color: var(--hx-color-success-700, #15803d);
+    --hx-tag-color: var(--hx-color-success-700, #166534);
     --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
   }
 
   .tag--warning {
     --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-tag-color: var(--hx-color-warning-700, #b45309);
+    --hx-tag-color: var(--hx-color-warning-700, #92400e);
     --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
   }
 
   .tag--danger {
     --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-tag-color: var(--hx-color-error-700, #b91c1c);
+    --hx-tag-color: var(--hx-color-error-700, #991b1b);
     --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
   }
 
@@ -132,7 +132,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;
   }
 
@@ -142,7 +142,7 @@
 
   .tag__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-text-input.css

@@ -72,7 +72,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-input-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -87,7 +87,7 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
     transition:
@@ -116,15 +116,15 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
+        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -136,7 +136,7 @@
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     flex-shrink: 0;
   }
 
@@ -159,14 +159,14 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .field__input:focus-visible {
@@ -199,7 +199,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-text.css

@@ -7,7 +7,7 @@
 
   .text {
     display: inline;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-text-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-text-font-size);
     font-weight: var(--hx-text-font-weight);
     line-height: var(--hx-text-line-height);
@@ -73,7 +73,7 @@
     --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
     --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
     --hx-text-line-height: var(--hx-line-height-tight, 1.25);
-    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
     text-transform: uppercase;
   }
 
@@ -96,15 +96,15 @@
   }
 
   .text--color-danger {
-    --hx-text-color: var(--hx-color-error-600, #dc2626);
+    --hx-text-color: var(--hx-color-error-600, #b91c1c);
   }
 
   .text--color-success {
-    --hx-text-color: var(--hx-color-success-600, #16a34a);
+    --hx-text-color: var(--hx-color-success-600, #15803d);
   }
 
   .text--color-warning {
-    --hx-text-color: var(--hx-color-warning-600, #d97706);
+    --hx-text-color: var(--hx-color-warning-600, #b45309);
   }
 
   /* ─── Weight Overrides ─── */
@@ -147,3 +147,36 @@
   :host([lines]:not([lines='0'])) {
     display: block;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * Semantic color variants (danger, success, warning) communicate state via color
+     * alone. In forced-colors mode the browser overrides custom colors, so we must
+     * use system color keywords to preserve the semantic distinction.
+     */
+    .text--color-danger {
+      color: LinkText;
+    }
+
+    .text--color-success {
+      color: CanvasText;
+    }
+
+    .text--color-warning {
+      color: CanvasText;
+    }
+
+    .text--color-disabled {
+      color: GrayText;
+    }
+
+    .text--color-inverse {
+      color: CanvasText;
+    }
+
+    .text--color-subtle {
+      color: CanvasText;
+    }
+  }

package/dist/css/hx-textarea.css

@@ -31,7 +31,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-input-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -46,7 +46,7 @@
     display: flex;
     flex-direction: column;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
     transition:
@@ -60,9 +60,6 @@
       --hx-input-focus-ring-color,
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
     );
-    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
@@ -78,18 +75,15 @@
   /* --- Error State --- */
 
   .field--error .field__textarea-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   .field--error .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
-    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
+        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -104,7 +98,7 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -112,7 +106,7 @@
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .field__textarea:focus-visible {
@@ -150,7 +144,7 @@
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -173,7 +167,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-theme.css

@@ -21,3 +21,14 @@
     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;
+    }
+  }