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

package/dist/css/helix-all.css

@@ -3,7 +3,7 @@
 /* ── hx-accordion ── */
 :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 {
@@ -70,10 +70,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);
   }
@@ -81,7 +81,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);
   }
 
@@ -135,6 +135,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-alert ── */
 :host {
     display: block;
@@ -173,10 +187,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);
@@ -189,7 +203,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;
   }
 
@@ -216,7 +230,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 {
@@ -276,7 +290,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;
@@ -316,19 +330,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 ─── */
@@ -336,8 +350,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 ─── */
@@ -345,8 +359,8 @@
   :host([variant='error']) .alert {
     --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
     --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-alert-color: var(--hx-color-error-800, #991b1b);
-    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
+    --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
@@ -447,7 +461,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;
@@ -556,29 +570,29 @@
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6))
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
     );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-bg: var(--hx-color-success-700, #166534);
     --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #15803d)
+      var(--hx-color-success-700, #166534)
     );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
-    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
+    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
+    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-warning-500, #eab308)
+      var(--hx-color-warning-500, #d97706)
     );
   }
 
@@ -592,20 +606,20 @@
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
-    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-badge-color: var(--hx-color-neutral-700, #334155);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-neutral-200, #e5e7eb)
+      var(--hx-color-neutral-200, #e2e8f0)
     );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
     --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
     );
   }
 
@@ -685,7 +699,7 @@
     cursor: pointer;
     color: inherit;
     opacity: var(--hx-opacity-75, 0.75);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
     line-height: 0;
     /* WCAG 2.5.5: minimum 44×44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
@@ -698,7 +712,7 @@
 
   .badge__remove-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
-    outline-offset: var(--hx-focus-ring-offset, 1px);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
@@ -758,10 +772,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);
@@ -774,7 +788,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 {
@@ -796,7 +810,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;
@@ -836,7 +850,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;
@@ -870,19 +884,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 ─── */
@@ -890,8 +904,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 ─── */
@@ -899,8 +913,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 ─── */
@@ -965,6 +979,20 @@
     display: none;
   }
 
+  /*
+   * Ellipsis ordering when collapsed (FS-014 fix):
+   * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating
+   * the consumer's light DOM. CSS order places it between the first item
+   * (order: 0, default) and the last item (order: 2) in the flex <ol>.
+   */
+  .hx-bc-ellipsis {
+    order: 1;
+  }
+
+  ::slotted([data-bc-last]) {
+    order: 2;
+  }
+
   /* Visually hide the separator slot — used only to read text content.
    * display:none is intentional: the slot contains no interactive or focusable
    * content. If a future change adds focusable elements to this slot, switch to
@@ -972,6 +1000,19 @@
   .separator-slot {
     display: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-breadcrumb is a nav container. Link colors and separators are handled
+   * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed
+   * at the container level.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-button ── */
 :host {
     display: inline-block;
@@ -1114,7 +1155,7 @@
   }
 
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
   }
 
   /* ─── Disabled ─── */
@@ -1181,7 +1222,7 @@
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);
+    --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
   }
 
   /* Secondary inverted — white border and text */
@@ -1362,6 +1403,19 @@
     z-index: 1;
     position: relative;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * In forced-colors mode, negative margins that collapse borders between grouped
+     * buttons can obscure focus rings. Raise focused children so the Highlight
+     * outline from hx-button's own forced-colors block is fully visible.
+     */
+    .group ::slotted(:focus-within) {
+      z-index: 2;
+    }
+  }
 /* ── hx-card ── */
 :host {
     display: block;
@@ -1374,12 +1428,12 @@
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
     background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
     transition:
       box-shadow var(--hx-transition-normal, 250ms ease),
       transform var(--hx-transition-normal, 250ms ease);
@@ -1440,7 +1494,7 @@
 
   .card--interactive:hover {
     box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-    transform: translateY(var(--hx-lift-md, -2px));
+    transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
   .card--interactive:focus-visible {
@@ -1502,7 +1556,7 @@
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #495057));
+    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
   }
 
   .card__footer {
@@ -1520,7 +1574,7 @@
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     margin-top: auto;
   }
 
@@ -1575,22 +1629,22 @@
     /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-0, #fff);
-    color: var(--hx-color-neutral-700, #374151);
+    background: var(--hx-color-neutral-0, #ffffff);
+    color: var(--hx-color-neutral-700, #334155);
     cursor: pointer;
     padding: 0;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease),
-      border-color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .nav-btn:hover:not([disabled]) {
-    background: var(--hx-color-neutral-50, #f9fafb);
-    border-color: var(--hx-color-neutral-400, #9ca3af);
+    background: var(--hx-color-neutral-50, #f8fafc);
+    border-color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .nav-btn:focus-visible {
@@ -1600,7 +1654,7 @@
   }
 
   .nav-btn[disabled] {
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -1623,16 +1677,16 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     cursor: pointer;
     padding: 0;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    transition: background-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .play-pause-btn:hover {
-    background: var(--hx-color-neutral-100, #f3f4f6);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .play-pause-btn:focus-visible {
@@ -1695,15 +1749,15 @@
     width: var(--hx-carousel-pagination-dot-size, 0.5rem);
     height: var(--hx-carousel-pagination-dot-size, 0.5rem);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-300, #d1d5db);
+    background: var(--hx-color-neutral-300, #cbd5e1);
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      transform var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
   }
 
   .pagination-item[aria-current='true'] .pagination-dot,
   .pagination-item.is-active .pagination-dot {
-    background: var(--hx-color-primary-600, #2563eb);
+    background: var(--hx-color-primary-600, #1d4ed8);
     transform: scale(1.25);
   }
 
@@ -1788,7 +1842,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-checkbox-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Control (checkbox + label row) ─── */
@@ -1830,7 +1884,7 @@
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
     background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
     transition:
@@ -1868,13 +1922,13 @@
   /* ─── Error State ─── */
 
   .checkbox--error .checkbox__box {
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   .checkbox--error.checkbox--checked .checkbox__box,
   .checkbox--error.checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   /* ─── Hover ─── */
@@ -1892,7 +1946,7 @@
   }
 
   .checkbox--error .checkbox__control:hover .checkbox__box {
-    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   /* ─── Checkmark Icon ─── */
@@ -1921,7 +1975,7 @@
   .checkbox__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     user-select: none;
     -webkit-user-select: none;
@@ -1936,7 +1990,7 @@
 
   .checkbox__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     padding-inline-start: calc(
       var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -2078,7 +2132,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2);
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));
   }
 
   /* ─── Legend ─── */
@@ -2096,7 +2150,7 @@
   }
 
   .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -2116,7 +2170,7 @@
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
   }
 
   /* ─── Help Text & Error Messages ─── */
@@ -2129,7 +2183,7 @@
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -2200,12 +2254,12 @@
     gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
     border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bae6fd));
     border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
-      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));
     border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #f0f9ff));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     font-family: var(--hx-clinical-status-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);
@@ -2226,11 +2280,11 @@
 
   :host([severity='info']) .clinical-status,
   :host(:not([severity])) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);
-    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);
-    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);
-    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);
-    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);
+    --hx-clinical-status-bg: var(--hx-color-info-50, #f0f9ff);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);
+    --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);
   }
 
   /* ─── Severity: warning ─── */
@@ -2238,9 +2292,9 @@
   :host([severity='warning']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
     --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);
-    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);
-    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #d97706);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);
   }
 
   /* ─── Severity: critical ─── */
@@ -2248,9 +2302,9 @@
   :host([severity='critical']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
     --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);
-    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);
-    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #dc2626);
+    --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Severity: emergent ─── */
@@ -2258,9 +2312,9 @@
   :host([severity='emergent']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
     --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
-    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);
-    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);
-    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #991b1b);
+    --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);
     border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
     font-weight: var(--hx-font-weight-semibold, 600);
   }
@@ -2271,7 +2325,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0284c7));
   }
 
   .clinical-status__icon svg {
@@ -2334,7 +2388,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -2351,7 +2405,7 @@
 
   .clinical-status__dismiss-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -2382,7 +2436,7 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-semibold, 600);
     text-transform: uppercase;
-    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
     cursor: pointer;
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-touch-target-size, 44px);
@@ -2397,7 +2451,7 @@
 
   .clinical-status__acknowledge-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -2500,7 +2554,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);
   }
@@ -2519,7 +2573,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 */
@@ -2561,7 +2615,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;
@@ -2637,186 +2691,939 @@
     border: 0;
   }
 /* ── hx-color-picker ── */
-:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus-visible{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}@media(forced-colors:active){.trigger{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.trigger:hover:not([disabled]){border-color:Highlight}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline-color:Highlight}.panel{forced-color-adjust:none;background-color:Canvas;border:2px solid CanvasText;box-shadow:none}.gradient-thumb,.slider-thumb{box-shadow:0 0 0 2px CanvasText}.swatch-btn{border:2px solid ButtonText}.swatch-btn:hover{border-color:Highlight}.color-input{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.color-input:focus-visible{border-color:Highlight;box-shadow:none}.format-btn{forced-color-adjust:none;background-color:ButtonFace;color:ButtonText;border:2px solid ButtonText}.trigger-label{color:FieldText}:host([disabled]){opacity:1}:host([disabled]) .trigger{border-color:GrayText;color:GrayText}}
-/* ── hx-combobox ── */
-:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}@media(forced-colors:active){.field__input-wrapper{forced-color-adjust:none;background-color:Field;color:FieldText;border:2px solid ButtonText}.field__input{color:FieldText}.field__input::placeholder{color:GrayText}.field__input-wrapper:focus-within{border-color:Highlight;box-shadow:none}.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__chip{forced-color-adjust:none;background-color:Highlight;color:HighlightText;border:1px solid HighlightText}.field__chip-remove:focus-visible{outline-color:Highlight}.field__clear-button:focus-visible{outline-color:Highlight}.field--error .field__input-wrapper{border-color:LinkText}:host([disabled]){opacity:1}:host([disabled]) .field__input-wrapper{border-color:GrayText;color:GrayText}:host([disabled]) .field__input{color:GrayText}.field__label{color:CanvasText}.field__help-text{color:GrayText}.field__error{color:LinkText}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}
-/* ── hx-container ── */
 :host {
-    display: block;
-    contain: layout style;
-    width: 100%;
-    background-color: var(--hx-container-bg, transparent);
-    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
   }
-
-  /* ─── Vertical Padding Variants ─── */
-
-  :host([padding='sm']) {
-    padding-top: var(--hx-space-6, 1.5rem);
-    padding-bottom: var(--hx-space-6, 1.5rem);
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
-
-  :host([padding='md']) {
-    padding-top: var(--hx-space-12, 3rem);
-    padding-bottom: var(--hx-space-12, 3rem);
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    padding: var(--hx-space-1, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-color-neutral-0, #ffffff);
+    cursor: pointer;
+    transition: border-color var(--hx-transition-fast, 150ms ease);
   }
-
-  :host([padding='lg']) {
-    padding-top: var(--hx-space-16, 4rem);
-    padding-bottom: var(--hx-space-16, 4rem);
+  .trigger:hover:not([disabled]) {
+    border-color: var(--hx-color-primary-500, #2563eb);
   }
-
-  :host([padding='xl']) {
-    padding-top: var(--hx-space-24, 6rem);
-    padding-bottom: var(--hx-space-24, 6rem);
+  :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
-
-  :host([padding='2xl']) {
-    padding-top: var(--hx-space-32, 8rem);
-    padding-bottom: var(--hx-space-32, 8rem);
+  .trigger-swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
+    background: var(--_preview-color, #000);
+    display: block;
+    flex-shrink: 0;
   }
-
-  /* ─── Inner Container ─── */
-
-  .container__inner {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
-    padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
-    box-sizing: border-box;
-    width: 100%;
+  .trigger-label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-700, #334155);
+    font-family: var(--hx-font-family-mono, monospace);
+    white-space: nowrap;
   }
-
-  /* ─── Width Variants ─── */
-
-  .container__inner--full {
-    max-width: none;
+  .panel {
+    position: absolute;
+    z-index: var(--hx-color-picker-z-index, 1000);
+    top: calc(100% + 4px);
+    left: 0;
+    background: var(--hx-color-neutral-0, #ffffff);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border-radius: var(--hx-border-radius-lg, 0.5rem);
+    box-shadow: 0 8px 24px
+      var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
+    padding: var(--hx-space-4, 1rem);
+    width: var(--hx-color-picker-width, 260px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+    outline: none;
   }
-
-  .container__inner--content {
-    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));
+  :host([inline]) .panel {
+    position: static;
+    box-shadow: none;
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border-radius: var(--hx-border-radius-lg, 0.5rem);
   }
-
-  .container__inner--narrow {
-    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));
+  .gradient-grid {
+    position: relative;
+    width: 100%;
+    height: var(--hx-color-picker-grid-height, 160px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: crosshair;
+    overflow: hidden;
+    touch-action: none;
+    flex-shrink: 0;
   }
-
-  .container__inner--sm {
-    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));
+  .gradient-grid-bg {
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(to bottom, transparent, #000),
+      linear-gradient(to right, #fff, var(--_hue-color, hsl(0, 100%, 50%)));
+    pointer-events: none;
   }
-
-  .container__inner--md {
-    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));
+  .gradient-thumb {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),
+      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    top: var(--_thumb-y, 0%);
+    left: var(--_thumb-x, 100%);
   }
-
-  .container__inner--lg {
-    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));
+  .slider-track {
+    position: relative;
+    width: 100%;
+    height: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    touch-action: none;
+    flex-shrink: 0;
   }
-
-  .container__inner--xl {
-    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
+  .hue-track {
+    background: linear-gradient(
+      to right,
+      red,
+      #ff8000,
+      #ff0,
+      #80ff00,
+      #0f0,
+      #00ff80,
+      #0ff,
+      #0080ff,
+      #00f,
+      #7f00ff,
+      #f0f,
+      #ff0080,
+      red
+    );
   }
-/* ── hx-copy-button ── */
-:host {
-    display: inline-block;
+  .opacity-track {
+    background-image:
+      linear-gradient(to right, transparent, var(--_hue-color, hsl(0, 100%, 50%))),
+      repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
   }
-
-  :host([disabled]) {
+  .slider-thumb {
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),
+      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));
+    transform: translate(-50%, -50%);
     pointer-events: none;
+    left: var(--_slider-pct, 0%);
+    background: var(--_thumb-color, hsl(0, 100%, 50%));
   }
-
-  .button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--hx-space-2);
-    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
-    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-copy-button-bg, transparent);
-    color: var(--hx-copy-button-color, var(--hx-color-primary-500));
+  .swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+  .swatch-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
     cursor: pointer;
-    transition:
-      background-color var(--hx-transition-fast),
-      color var(--hx-transition-fast),
-      border-color var(--hx-transition-fast),
-      box-shadow var(--hx-transition-fast);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
+    padding: 0;
     flex-shrink: 0;
-    font-family: var(--hx-font-family-sans);
-    font-weight: var(--hx-font-weight-medium);
-    white-space: nowrap;
+    transition: transform var(--hx-transition-fast, 150ms ease);
   }
-
-  .button:focus-visible {
-    outline: var(--hx-focus-ring-width) solid
-      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));
-    outline-offset: var(--hx-focus-ring-offset);
+  .swatch-btn:hover {
+    transform: scale(1.15);
+    border-color: var(
+      --hx-color-picker-swatch-border-hover,
+      var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3))
+    );
   }
-
-  .button:hover {
-    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  .input-area {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
   }
-
-  .button:active {
-    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  .format-btn {
+    flex-shrink: 0;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    background: var(--hx-color-neutral-100, #f1f5f9);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #475569);
+    text-transform: uppercase;
+    font-weight: var(--hx-font-weight-semibold, 600);
+    letter-spacing: 0.05em;
   }
-
-  /* ─── Size Variants ─── */
-
-  .button--sm {
-    padding: var(--hx-space-1);
-    min-width: var(--hx-size-8);
-    height: var(--hx-size-8);
-    font-size: var(--hx-font-size-sm);
+  .color-input {
+    flex: 1;
+    min-width: 0;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    font-family: var(--hx-font-family-mono, monospace);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-900, #0f172a);
+    background: var(--hx-color-neutral-0, #ffffff);
+    outline: none;
   }
-
-  .button--md {
-    padding: var(--hx-space-2);
-    min-width: var(--hx-size-10);
-    height: var(--hx-size-10);
-    font-size: var(--hx-font-size-md);
+  .color-input:focus-visible {
+    border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
   }
-
-  .button--lg {
-    padding: var(--hx-space-3);
+  .input-preview {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
+    background: var(--_preview-color, #000);
+    flex-shrink: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .trigger,
+    .swatch-btn {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .trigger {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .trigger:hover:not([disabled]) {
+      border-color: Highlight;
+    }
+    :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
+      outline-color: Highlight;
+    }
+    .panel {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+      box-shadow: none;
+    }
+    .gradient-thumb,
+    .slider-thumb {
+      box-shadow: 0 0 0 2px CanvasText;
+    }
+    .swatch-btn {
+      border: 2px solid ButtonText;
+    }
+    .swatch-btn:hover {
+      border-color: Highlight;
+    }
+    .color-input {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .color-input:focus-visible {
+      border-color: Highlight;
+      box-shadow: none;
+    }
+    .format-btn {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+    .trigger-label {
+      color: FieldText;
+    }
+    :host([disabled]) {
+      opacity: 1;
+    }
+    :host([disabled]) .trigger {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+/* ── hx-combobox ── */
+:host {
+    display: block;
+  }
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));
+    position: relative;
+  }
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    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-combobox-label-color, var(--hx-color-neutral-700, #334155));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+  }
+  .field__input-wrapper:focus-within {
+    border-color: var(
+      --hx-combobox-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(
+            --hx-combobox-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
+  }
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-combobox-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-combobox-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-2, 0.5rem);
+    color: var(--hx-color-neutral-500, #64748b);
+    flex-shrink: 0;
+  }
+  .field__input {
+    flex: 1;
+    min-width: 0;
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
+  .field__input--sm {
+    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+  }
+  .field__input--lg {
+    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  }
+  .field__clear-button,
+  .field__loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-end: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
+  .field__clear-button {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    transition: color var(--hx-transition-fast, 150ms ease);
+  }
+  .field__clear-button:hover {
+    color: var(--hx-color-neutral-700, #334155);
+  }
+  .field__clear-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+  .field__loading-indicator {
+    width: 1rem;
+    height: 1rem;
+  }
+  .field__loading-spinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: hx-spin 0.7s linear infinite;
+  }
+  @keyframes hx-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__loading-spinner {
+      animation: none;
+    }
+  }
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    right: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-combobox-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)
+    );
+    max-height: var(--hx-combobox-listbox-max-height, 16rem);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .field__listbox[hidden] {
+    display: none;
+  }
+  .field__options {
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--hx-space-1, 0.25rem) 0;
+  }
+  .field__option {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+  .field__option:hover {
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+  .field__option--selected {
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--focused {
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
+  }
+  .field__option--focused.field__option--selected {
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+  }
+  .field__option--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .field__option-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .field__no-options {
+    padding: var(--hx-space-3, 0.75rem);
+    text-align: center;
+    color: var(--hx-color-neutral-400, #94a3b8);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+  .field__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__help-text {
+    color: var(--hx-color-neutral-500, #64748b);
+  }
+  .field__error {
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__option,
+    .field__clear-button,
+    .field__chip-remove {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .field__input-wrapper {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .field__input {
+      color: FieldText;
+    }
+    .field__input::placeholder {
+      color: GrayText;
+    }
+    .field__input-wrapper:focus-within {
+      border-color: Highlight;
+      box-shadow: none;
+    }
+    .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__chip {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid HighlightText;
+    }
+    .field__chip-remove:focus-visible {
+      outline-color: Highlight;
+    }
+    .field__clear-button:focus-visible {
+      outline-color: Highlight;
+    }
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
+    }
+    :host([disabled]) {
+      opacity: 1;
+    }
+    :host([disabled]) .field__input-wrapper {
+      border-color: GrayText;
+      color: GrayText;
+    }
+    :host([disabled]) .field__input {
+      color: GrayText;
+    }
+    .field__label {
+      color: CanvasText;
+    }
+    .field__help-text {
+      color: GrayText;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }
+  :host([multiple]) .field__input-wrapper {
+    flex-wrap: wrap;
+    padding: var(--hx-space-1, 0.25rem);
+    gap: var(--hx-space-1, 0.25rem);
+    align-items: center;
+  }
+  :host([multiple]) .field__input {
+    min-width: 8rem;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    flex-shrink: 1;
+  }
+  .field__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
+    height: 1.5rem;
+    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
+    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));
+    border-radius: var(--hx-border-radius-full, 9999px);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    white-space: nowrap;
+    max-width: 12rem;
+    flex-shrink: 0;
+  }
+  .field__chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 8rem;
+  }
+  .field__chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    line-height: 1;
+    transition: opacity var(--hx-transition-fast, 150ms ease);
+  }
+  .field__chip-remove:hover {
+    opacity: 1;
+    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
+  }
+  .field__chip-remove:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    opacity: 1;
+  }
+/* ── hx-container ── */
+:host {
+    display: block;
+    contain: layout style;
+    width: 100%;
+    background-color: var(--hx-container-bg, transparent);
+    box-sizing: border-box;
+  }
+
+  /* ─── Vertical Padding Variants ─── */
+
+  :host([padding='sm']) {
+    padding-top: var(--hx-space-6, 1.5rem);
+    padding-bottom: var(--hx-space-6, 1.5rem);
+  }
+
+  :host([padding='md']) {
+    padding-top: var(--hx-space-12, 3rem);
+    padding-bottom: var(--hx-space-12, 3rem);
+  }
+
+  :host([padding='lg']) {
+    padding-top: var(--hx-space-16, 4rem);
+    padding-bottom: var(--hx-space-16, 4rem);
+  }
+
+  :host([padding='xl']) {
+    padding-top: var(--hx-space-24, 6rem);
+    padding-bottom: var(--hx-space-24, 6rem);
+  }
+
+  :host([padding='2xl']) {
+    padding-top: var(--hx-space-32, 8rem);
+    padding-bottom: var(--hx-space-32, 8rem);
+  }
+
+  /* ─── Inner Container ─── */
+
+  .container__inner {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ─── Width Variants ─── */
+
+  .container__inner--full {
+    max-width: none;
+  }
+
+  .container__inner--content {
+    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));
+  }
+
+  .container__inner--narrow {
+    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));
+  }
+
+  .container__inner--sm {
+    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));
+  }
+
+  .container__inner--md {
+    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));
+  }
+
+  .container__inner--lg {
+    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));
+  }
+
+  .container__inner--xl {
+    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-container 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;
+    }
+  }
+/* ── hx-copy-button ── */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2);
+    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
+    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-copy-button-bg, transparent);
+    color: var(--hx-copy-button-color, var(--hx-color-primary-500));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast),
+      color var(--hx-transition-fast),
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+    font-family: var(--hx-copy-button-font-family, var(--hx-font-family-sans));
+    font-weight: var(--hx-font-weight-medium);
+    white-space: nowrap;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+
+  .button:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .button--sm {
+    padding: var(--hx-space-1);
+    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);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2);
+    min-width: var(--hx-size-10);
+    height: var(--hx-size-10);
+    font-size: var(--hx-font-size-md);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3);
     min-width: var(--hx-size-12);
     height: var(--hx-size-12);
     font-size: var(--hx-font-size-lg);
   }
 
-  /* ─── Copied / Success State ─── */
+  /* ─── Copied / Success State ─── */
+
+  .button--copied {
+    color: var(--hx-color-success-text, var(--hx-color-primary-500));
+    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
+       A border provides visual differentiation for users with color blindness. */
+    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
+  }
+
+  /* ─── Icon Container ─── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+    opacity: var(--hx-opacity-disabled);
+  }
+
+  /* ─── Screen Reader Only ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      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;
+  }
 
-  .button--copied {
-    color: var(--hx-color-success-text, var(--hx-color-primary-500));
-    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
-       A border provides visual differentiation for users with color blindness. */
-    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
+  .counter {
+    display: inline-flex;
+    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, #0f172a));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-variant-numeric: tabular-nums;
   }
 
-  /* ─── Icon Container ─── */
+  /* ─── Size Variants ─── */
 
-  .icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    pointer-events: none;
-    flex-shrink: 0;
+  .counter--sm {
+    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
   }
 
-  /* ─── Disabled ─── */
+  .counter--md {
+    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+  }
 
-  .button[disabled] {
-    cursor: not-allowed;
-    opacity: var(--hx-opacity-disabled);
+  .counter--lg {
+    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
   }
 
-  /* ─── Screen Reader Only ─── */
+  /* ─── Screen-reader only (visually hidden live region) ─── */
 
   .sr-only {
     position: absolute;
@@ -2827,330 +3634,695 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
-    border-width: 0;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .counter {
+      /* Animation is handled in JS — reduced-motion consumers
+         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-data-table ── */
+:host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--hx-data-table-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Scroll Wrapper ─── */
+
+  .table-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ─── Table ─── */
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: var(--hx-data-table-min-width, 600px);
+  }
+
+  /* ─── Head ─── */
+
+  thead {
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  :host([sticky-header]) thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Cells ─── */
+
+  th,
+  td {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    text-align: start;
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    vertical-align: middle;
+  }
+
+  th {
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    white-space: nowrap;
+  }
+
+  td {
+    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+  }
+
+  /* ─── Checkbox Column ─── */
+
+  th.col-checkbox,
+  td.col-checkbox {
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    width: var(--hx-touch-target-min, 2.75rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    padding-inline-end: var(--hx-space-2, 0.5rem);
+  }
+
+  th.col-checkbox {
+    text-align: center;
+  }
+
+  td.col-checkbox {
+    text-align: center;
+  }
+
+  /* ─── Sort Button ─── */
+
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: inherit;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .sort-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Sort Icon ─── */
+
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .sort-icon--active {
+    opacity: var(--hx-opacity-100, 1);
+    color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .sort-icon--desc {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Row States ─── */
+
+  tbody tr {
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  tbody tr:hover {
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  tbody tr[aria-selected='true'] {
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  /* ─── Checkbox Input ─── */
+
+  input[type='checkbox'] {
+    width: var(--hx-size-4, 1rem);
+    height: var(--hx-size-4, 1rem);
+    cursor: pointer;
+    accent-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* ─── Loading Skeleton ─── */
+
+  .skeleton-cell {
+    display: block;
+    height: 1em;
+    border-radius: var(--hx-border-radius-sm, 2px);
+    background: linear-gradient(
+      90deg,
+      var(--hx-color-neutral-200, #e2e8f0) 25%,
+      var(--hx-color-neutral-100, #f1f5f9) 50%,
+      var(--hx-color-neutral-200, #e2e8f0) 75%
+    );
+    background-size: 200% 100%;
+    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
+  }
+
+  @keyframes hx-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-cell {
+      animation: none;
+      opacity: var(
+        --hx-opacity-50,
+        0.5
+      ); /* reduced from animation; approximate to available token */
+    }
+
+    .sort-icon {
+      transition: none;
+    }
+
+    tbody tr {
+      transition: none;
+    }
+  }
+
+  /* ─── Cell Focus ─── */
+
+  td:focus-visible,
+  th:focus-visible,
+  [part~='td']:focus-visible,
+  [part~='th']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
   }
 
-  /* ─── Reduced Motion ─── */
+  /* ─── Empty State ─── */
 
-  @media (prefers-reduced-motion: reduce) {
-    .button {
-      transition: none;
-    }
+  .empty-cell {
+    text-align: center;
+    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 
-  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* ─── Forced Colors (Windows High Contrast) ─── */
 
   @media (forced-colors: active) {
-    .button {
-      forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
+    table {
+      border: 1px solid CanvasText;
     }
 
-    .button:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
+    th,
+    td {
+      border-bottom-color: CanvasText;
     }
 
-    .button[disabled] {
-      background-color: ButtonFace;
-      color: GrayText;
-      border-color: GrayText;
-      opacity: 1;
+    tbody tr[aria-selected='true'] {
+      outline: 2px solid Highlight;
     }
 
-    .button--copied {
-      border-color: Highlight;
-      color: Highlight;
+    .skeleton-cell {
+      animation: none;
+      border: 1px solid GrayText;
+      background: none;
     }
   }
-/* ── hx-counter ── */
-:host {
-    display: inline-block;
+/* ── hx-date-picker ── */
+/* ============================================================
+     Host
+     ============================================================ */
+
+  :host {
+    display: block;
+    position: relative;
   }
 
-  .counter {
-    display: inline-flex;
-    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));
-    line-height: var(--hx-line-height-tight, 1.25);
-    font-variant-numeric: tabular-nums;
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
   }
 
-  /* ─── Size Variants ─── */
+  * {
+    box-sizing: border-box;
+  }
 
-  .counter--sm {
-    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+  /* ============================================================
+     Field layout
+     ============================================================ */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));
+    position: relative;
   }
 
-  .counter--md {
-    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+  .field__label-wrapper {
+    display: contents;
   }
 
-  .counter--lg {
-    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    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-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    line-height: var(--hx-line-height-normal, 1.5);
   }
 
-  /* ─── Screen-reader only (visually hidden live region) ─── */
+  .field__required-marker {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
 
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
+  /* ============================================================
+     Input wrapper
+     ============================================================ */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
   }
 
-  /* ─── Reduced Motion ─── */
+  .field__input-wrapper:focus-within {
+    border-color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(
+            --hx-date-picker-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
 
-  @media (prefers-reduced-motion: reduce) {
-    .counter {
-      /* Animation is handled in JS — reduced-motion consumers
-         will see the final value immediately via the component logic */
-    }
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
   }
 
-  /* ─── Forced Colors (Windows High Contrast) ─── */
-  /* Counter is text-only — forced-color-adjust: auto (default) is sufficient. */
-/* ── hx-data-table ── */
-:host {
-    display: block;
-    overflow-x: auto;
-    font-family: var(--hx-font-family-sans, sans-serif);
-    font-size: var(--hx-font-size-sm, 0.875rem);
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-date-picker-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-date-picker-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
   }
 
-  /* ─── Scroll Wrapper ─── */
+  /* ============================================================
+     Input element
+     ============================================================ */
 
-  .table-wrapper {
-    min-width: 0;
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    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-date-picker-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%;
+    cursor: default;
   }
 
-  /* ─── Table ─── */
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    min-width: var(--hx-data-table-min-width, 600px);
+  .field__input:disabled {
+    cursor: not-allowed;
   }
 
-  /* ─── Head ─── */
+  /* ============================================================
+     Calendar trigger button
+     ============================================================ */
 
-  thead {
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  .field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    border: none;
+    border-left: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    background: transparent;
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color var(--hx-transition-fast, 150ms ease);
+    outline: none;
   }
 
-  :host([sticky-header]) thead th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  .field__trigger:focus-visible {
+    color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    background-color: color-mix(
+      in srgb,
+      var(
+          --hx-date-picker-focus-ring-color,
+          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        )
+        8%,
+      transparent
+    );
   }
 
-  /* ─── Cells ─── */
+  .field__trigger:hover:not(:disabled) {
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+  }
 
-  th,
-  td {
-    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
-    text-align: start;
-    border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
-    vertical-align: middle;
+  .field__trigger:disabled {
+    cursor: not-allowed;
   }
 
-  th {
-    font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
-    white-space: nowrap;
+  /* ============================================================
+     Calendar popover
+     ============================================================ */
+
+  .calendar {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    min-width: var(--hx-date-picker-calendar-min-width, 18rem);
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(
+      --hx-date-picker-calendar-shadow,
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
+    );
+    padding: var(--hx-space-3, 0.75rem);
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .calendar {
+      animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+
+  @keyframes calendar-appear {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ============================================================
+     Calendar navigation
+     ============================================================ */
+
+  .calendar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--hx-space-3, 0.75rem);
+  }
+
+  :is(.calendar__nav-btn, .calendar__day, .calendar__day-cell, .calendar__weekday) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :is(.calendar__nav-btn, .calendar__day) {
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .calendar__nav-btn {
+    color: var(--hx-color-neutral-600, #475569);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    line-height: 1;
   }
 
-  td {
-    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+  .calendar__nav-btn:hover {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
   }
 
-  /* ─── Checkbox Column ─── */
-
-  th.col-checkbox,
-  td.col-checkbox {
-    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
-    width: var(--hx-touch-target-min, 2.75rem);
-    min-width: var(--hx-touch-target-min, 2.75rem);
-    padding-inline-end: var(--hx-space-2, 0.5rem);
+  :is(.calendar__nav-btn, .calendar__day):focus-visible {
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(
+        --hx-date-picker-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    z-index: 1;
   }
 
-  th.col-checkbox {
-    text-align: center;
+  .calendar__nav-btn:disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  td.col-checkbox {
+  .calendar__month-label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-800, #1e293b);
+    flex: 1;
     text-align: center;
   }
 
-  /* ─── Sort Button ─── */
+  /* ============================================================
+     Calendar grid
+     ============================================================ */
 
-  .sort-btn {
-    display: inline-flex;
-    align-items: center;
+  .calendar__grid {
+    display: flex;
+    flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    background: none;
-    border: none;
-    padding: 0;
-    font: inherit;
-    font-weight: inherit;
-    color: inherit;
-    cursor: pointer;
-    white-space: nowrap;
   }
 
-  .sort-btn:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 2px);
+  .calendar__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--hx-space-1, 0.25rem);
   }
 
-  /* ─── Sort Icon ─── */
+  .calendar__weekday {
+    height: var(--hx-size-8, 2rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-500, #64748b);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
 
-  .sort-icon {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    width: 1em;
-    height: 1em;
-    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */
-    transition:
-      opacity var(--hx-transition-fast, 150ms ease),
-      transform var(--hx-transition-fast, 150ms ease);
+  /* ============================================================
+     Calendar day cells
+     ============================================================ */
+
+  .calendar__day {
+    color: var(--hx-color-neutral-800, #1e293b);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    position: relative;
   }
 
-  .sort-icon--active {
-    opacity: var(--hx-opacity-100, 1);
-    color: var(--hx-color-primary-500, #2563eb);
+  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
   }
 
-  .sort-icon--desc {
-    transform: rotate(180deg);
+  .calendar__day--selected {
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    font-weight: var(--hx-font-weight-semibold, 600);
   }
 
-  /* ─── Row States ─── */
+  .calendar__day--selected:hover {
+    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
+  }
 
-  tbody tr {
-    transition: background-color var(--hx-transition-fast, 150ms ease);
+  .calendar__day--today:not(.calendar__day--selected) {
+    font-weight: var(--hx-font-weight-bold, 700);
+    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
   }
 
-  tbody tr:hover {
-    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  .calendar__day--today:not(.calendar__day--selected)::after {
+    content: '';
+    position: absolute;
+    bottom: 0.2rem;
+    left: 50%;
+    transform: translate(-50%);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background-color: currentColor;
   }
 
-  tbody tr[aria-selected='true'] {
-    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+  .calendar__day--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  /* ─── Checkbox Input ─── */
+  /* ============================================================
+     Live region (screen reader announcements)
+     ============================================================ */
 
-  input[type='checkbox'] {
-    width: var(--hx-size-4, 1rem);
-    height: var(--hx-size-4, 1rem);
-    cursor: pointer;
-    accent-color: var(--hx-color-primary-500, #2563eb);
+  .calendar__live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 
-  /* ─── Loading Skeleton ─── */
+  /* ============================================================
+     Help text and error message
+     ============================================================ */
 
-  .skeleton-cell {
-    display: block;
-    height: 1em;
-    border-radius: var(--hx-border-radius-sm, 2px);
-    background: linear-gradient(
-      90deg,
-      var(--hx-color-neutral-200, #e2e8f0) 25%,
-      var(--hx-color-neutral-100, #f1f5f9) 50%,
-      var(--hx-color-neutral-200, #e2e8f0) 75%
-    );
-    background-size: 200% 100%;
-    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
   }
 
-  @keyframes hx-shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
+  .field__help-text {
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .skeleton-cell {
-      animation: none;
-      opacity: var(
-        --hx-opacity-50,
-        0.5
-      ); /* reduced from animation; approximate to available token */
-    }
+  .field__error {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
 
-    .sort-icon {
-      transition: none;
-    }
+  /* ============================================================
+     Reduced motion
+     ============================================================ */
 
-    tbody tr {
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__trigger,
+    .calendar__nav-btn,
+    .calendar__day {
       transition: none;
     }
   }
 
-  /* ─── Cell Focus ─── */
+  /* ============================================================
+     Forced colors (Windows High Contrast)
+     ============================================================ */
 
-  td:focus-visible,
-  th:focus-visible,
-  [part~='td']:focus-visible,
-  [part~='th']:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
-    outline-offset: var(--hx-focus-ring-offset, -2px);
-    border-radius: var(--hx-border-radius-sm, 2px);
-  }
+  @media (forced-colors: active) {
+    .field__input-wrapper {
+      border: 1px solid ButtonText;
+    }
 
-  /* ─── Empty State ─── */
+    .field__input-wrapper:focus-within {
+      outline: 2px solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
+    }
 
-  .empty-cell {
-    text-align: center;
-    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
-    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
-  }
+    :is(.calendar__day:focus-visible, .calendar__nav-btn:focus-visible) {
+      outline: 2px solid Highlight;
+      box-shadow: none;
+    }
 
-  /* ─── Forced Colors (Windows High Contrast) ─── */
+    .calendar__day--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid Highlight;
+    }
 
-  @media (forced-colors: active) {
-    table {
-      border: 1px solid CanvasText;
+    .calendar__day--today:not(.calendar__day--selected) {
+      border: 2px solid LinkText;
     }
 
-    th,
-    td {
-      border-bottom-color: CanvasText;
+    .calendar__day--today:not(.calendar__day--selected)::after {
+      display: none;
     }
 
-    tbody tr[aria-selected='true'] {
-      outline: 2px solid Highlight;
+    .calendar__day--disabled {
+      color: GrayText;
     }
 
-    .skeleton-cell {
-      animation: none;
-      border: 1px solid GrayText;
-      background: none;
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
     }
   }
-/* ── hx-date-picker ── */
-:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}
 /* ── hx-dialog ── */
 :host {
     display: contents;
@@ -3254,7 +4426,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);
@@ -3280,7 +4452,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:
@@ -3625,7 +4797,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);
@@ -3760,7 +4932,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,
@@ -3843,7 +5015,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-field-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
@@ -3893,7 +5065,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3910,7 +5082,7 @@
   }
 
   .field--error .field__control {
-    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -3961,7 +5133,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
     font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
   }
@@ -3974,7 +5146,7 @@
   .optional-indicator {
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-normal, 400);
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -4022,7 +5194,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-file-upload-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Label ─── */
@@ -4033,7 +5205,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-color-neutral-700, #343a40);
+    color: var(--hx-color-neutral-700, #334155);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -4048,9 +5220,9 @@
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
-    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8fafc));
     cursor: pointer;
     text-align: center;
     transition:
@@ -4058,7 +5230,7 @@
       background-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     user-select: none;
-    color: var(--hx-color-neutral-600, #495057);
+    color: var(--hx-color-neutral-600, #475569);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -4089,7 +5261,7 @@
   }
 
   .dropzone--error {
-    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -4134,7 +5306,7 @@
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: var(--hx-color-neutral-0, #ffffff);
   }
@@ -4149,7 +5321,7 @@
     flex: 1;
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-800, #212529);
+    color: var(--hx-color-neutral-800, #1e293b);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -4158,7 +5330,7 @@
   .file-item__size {
     flex-shrink: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .file-item__remove {
@@ -4172,7 +5344,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     cursor: pointer;
     line-height: 1;
     transition:
@@ -4182,7 +5354,7 @@
 
   .file-item__remove:hover {
     color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
-    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);
+    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc2626) 8%, transparent);
   }
 
   .file-item__remove:focus-visible {
@@ -4205,7 +5377,7 @@
   .progress-track {
     width: 100%;
     height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
-    background-color: var(--hx-color-neutral-200, #e9ecef);
+    background-color: var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
   }
@@ -4303,6 +5475,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-grid ── */
 :host {
     display: block;
@@ -4317,6 +5500,16 @@ export const helixGridItemStyles = css`
     min-width: 0;
     min-height: 0;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-grid and hx-grid-item are layout wrappers with no state communicated
+     via color. forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-help-text ── */
 :host {
     display: block;
@@ -4330,7 +5523,7 @@ export const helixGridItemStyles = css`
     font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
     line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
     margin: 0;
   }
 
@@ -4347,25 +5540,25 @@ export const helixGridItemStyles = css`
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
   }
 
   /* ─── Variant: error ─── */
 
   .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+    --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
   }
 
   /* ─── Variant: warning ─── */
 
   .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+    --hx-help-text-color: var(--hx-color-warning-700, #92400e);
   }
 
   /* ─── Variant: success ─── */
 
   .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+    --hx-help-text-color: var(--hx-color-success-700, #166534);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -4667,8 +5860,8 @@ export const helixGridItemStyles = css`
     align-items: center;
     justify-content: center;
     min-height: var(--hx-image-fallback-min-height, 3rem);
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
-    color: var(--hx-color-neutral-500, #6b7280);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .image__img {
@@ -4681,7 +5874,7 @@ export const helixGridItemStyles = css`
   .image__caption {
     display: none;
     padding: var(--hx-image-caption-padding, 0.5rem 0 0);
-    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
     font-size: var(--hx-image-caption-font-size, 0.875rem);
   }
 
@@ -4725,12 +5918,12 @@ export const helixGridItemStyles = css`
   }
 
   .link:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: var(--hx-link-text-decoration-hover, underline);
   }
 
   .link:active {
-    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
   }
 
   .link:focus-visible {
@@ -4740,7 +5933,7 @@ export const helixGridItemStyles = css`
         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);
   }
 
   /* --- Variant: subtle --- */
@@ -4751,7 +5944,7 @@ export const helixGridItemStyles = css`
   }
 
   .link--subtle:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: underline;
   }
 
@@ -4762,7 +5955,7 @@ export const helixGridItemStyles = css`
   }
 
   .link--danger:hover {
-    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
   }
 
   /* --- Disabled --- */
@@ -4867,6 +6060,16 @@ export const helixGridItemStyles = css`
     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-menu ── */
 :host {
     display: block;
@@ -4882,8 +6085,7 @@ export const helixGridItemStyles = css`
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-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))
     );
     min-width: var(--hx-menu-min-width, 10rem);
     max-height: var(--hx-menu-max-height, 20rem);
@@ -4915,14 +6117,14 @@ export const helixGridItemStyles = css`
   }
 
   .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);
   }
 
@@ -4930,7 +6132,7 @@ export const helixGridItemStyles = css`
     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;
   }
@@ -4959,17 +6161,17 @@ export const helixGridItemStyles = css`
   /* ─── 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']) {
@@ -4985,15 +6187,15 @@ export const helixGridItemStyles = css`
     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'] {
@@ -5041,8 +6243,8 @@ export const helixGridItemStyles = css`
 
   [part='nav'] {
     position: relative;
-    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
   }
 
@@ -5056,14 +6258,14 @@ export const helixGridItemStyles = css`
     background: transparent;
     border: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms) ease;
     line-height: 0;
   }
 
   [part='toggle']:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
   }
 
   [part='toggle']:focus-visible {
@@ -5098,7 +6300,7 @@ export const helixGridItemStyles = css`
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
     border: none;
@@ -5115,7 +6317,7 @@ export const helixGridItemStyles = css`
   }
 
   .nav__link:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
     color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -5126,7 +6328,7 @@ export const helixGridItemStyles = css`
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
     color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -5151,12 +6353,11 @@ export const helixGridItemStyles = css`
     list-style: none;
     margin: 0;
     padding: var(--hx-space-1, 0.25rem) 0;
-    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
     border-radius: var(--hx-border-radius-md, 0.375rem);
     box-shadow: var(
-      --hx-shadow-md,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      --hx-nav-shadow,
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     z-index: var(--hx-z-index-dropdown, 1000);
   }
@@ -5206,7 +6407,7 @@ export const helixGridItemStyles = css`
   :host([orientation='vertical']) .nav__submenu .nav__link {
     padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
   }
 
   /* ─── Mobile Responsive ─── */
@@ -5616,7 +6817,7 @@ export const helixGridItemStyles = css`
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   /* ─── Trigger Button ─── */
@@ -5628,11 +6829,11 @@ export const helixGridItemStyles = css`
     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;
@@ -5648,11 +6849,11 @@ export const helixGridItemStyles = css`
   }
 
   .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 ─── */
@@ -5685,8 +6886,8 @@ export const helixGridItemStyles = css`
     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)
@@ -5711,7 +6912,7 @@ export const helixGridItemStyles = css`
     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;
@@ -5720,7 +6921,7 @@ export const helixGridItemStyles = css`
   ::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),
@@ -5775,7 +6976,7 @@ export const helixGridItemStyles = css`
 /* ── hx-pagination ── */
 :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 {
@@ -5808,14 +7009,14 @@ export const helixGridItemStyles = css`
     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;
@@ -5828,7 +7029,7 @@ export const helixGridItemStyles = css`
   }
 
   .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));
   }
 
@@ -5859,9 +7060,9 @@ export const helixGridItemStyles = css`
     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;
   }
@@ -5882,18 +7083,18 @@ export const helixGridItemStyles = css`
     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;
@@ -5971,20 +7172,20 @@ export const helixGridItemStyles = css`
     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));
   }
 
   * {
@@ -6011,9 +7212,9 @@ export const helixGridItemStyles = css`
     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;
@@ -6066,7 +7267,7 @@ export const helixGridItemStyles = css`
     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 {
@@ -6077,7 +7278,7 @@ export const helixGridItemStyles = css`
     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;
   }
 
@@ -6143,12 +7344,12 @@ export const helixGridItemStyles = css`
   .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 ─── */
@@ -6170,9 +7371,12 @@ export const helixGridItemStyles = css`
   .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;
@@ -6252,11 +7456,11 @@ export const helixGridItemStyles = css`
     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,
@@ -6286,7 +7490,7 @@ export const helixGridItemStyles = css`
     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;
   }
@@ -6467,7 +7671,7 @@ export const helixGridItemStyles = css`
     .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);
     }
   }
 
@@ -6621,11 +7825,33 @@ export const helixGridItemStyles = css`
     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-radio-group ── */
 :host {
     display: block;
@@ -6649,7 +7875,7 @@ export const helixGridItemStyles = css`
     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 ─── */
@@ -6660,7 +7886,7 @@ export const helixGridItemStyles = css`
     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);
@@ -6694,7 +7920,7 @@ export const helixGridItemStyles = css`
 
   .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);
   }
 
@@ -6770,16 +7996,18 @@ export const helixGridItemStyles = css`
     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,
@@ -6819,7 +8047,7 @@ export const helixGridItemStyles = css`
     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%);
   }
@@ -6877,14 +8105,14 @@ export const helixGridItemStyles = css`
 
     /* 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 */
@@ -6894,10 +8122,10 @@ export const helixGridItemStyles = css`
     );
 
     /* 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 */
@@ -7149,7 +8377,7 @@ export const helixGridItemStyles = css`
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .field__error {
@@ -7414,6 +8642,11 @@ export const helixGridItemStyles = css`
       color: ButtonText;
       border: 1px solid ButtonText;
     }
+
+    .side-nav__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }
 /* ── hx-skeleton ── */
 :host {
@@ -7529,7 +8762,7 @@ export const helixGridItemStyles = css`
     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 ─── */
@@ -7544,14 +8777,14 @@ export const helixGridItemStyles = css`
   .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);
@@ -7569,7 +8802,7 @@ export const helixGridItemStyles = css`
     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;
   }
 
@@ -7647,8 +8880,13 @@ export const helixGridItemStyles = css`
     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 */
@@ -7764,7 +9002,7 @@ export const helixGridItemStyles = css`
     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%);
   }
 
@@ -7774,7 +9012,7 @@ export const helixGridItemStyles = css`
     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);
   }
@@ -7783,18 +9021,18 @@ export const helixGridItemStyles = css`
 
   .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);
   }
 /* ── hx-spinner ── */
 :host {
@@ -8004,7 +9242,7 @@ export const helixGridItemStyles = css`
     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));
@@ -8098,7 +9336,7 @@ export const helixGridItemStyles = css`
     --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 ─── */
@@ -8554,6 +9792,16 @@ export const helixGridItemStyles = css`
   :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;
+    }
+  }
 /* ── hx-stat ── */
 :host {
     display: block;
@@ -8564,7 +9812,7 @@ export const helixGridItemStyles = css`
     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 ─── */
@@ -8608,13 +9856,13 @@ export const helixGridItemStyles = css`
   }
 
   .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);
   }
 
@@ -8640,12 +9888,12 @@ export const helixGridItemStyles = css`
   }
 
   .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));
   }
 
@@ -8715,7 +9963,7 @@ export const helixGridItemStyles = css`
     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));
   }
@@ -8779,7 +10027,7 @@ export const helixGridItemStyles = css`
       --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;
   }
@@ -8898,6 +10146,18 @@ export const helixGridItemStyles = css`
     --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;
+    }
+  }
 /* ── hx-structured-list ── */
 :host {
     display: block;
@@ -8963,12 +10223,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);
   }
 
@@ -8993,6 +10253,17 @@ export const helixStructuredListRowStyles = css`
 :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;
+    }
+  }
 /* ── hx-switch ── */
 :host {
     display: block;
@@ -9013,7 +10284,7 @@ export const helixStructuredListRowStyles = css`
     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.
@@ -9036,7 +10307,7 @@ export const helixStructuredListRowStyles = css`
     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;
@@ -9132,7 +10403,7 @@ export const helixStructuredListRowStyles = css`
   .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;
@@ -9148,7 +10419,7 @@ export const helixStructuredListRowStyles = css`
 
   .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);
   }
 
@@ -9228,7 +10499,7 @@ export const helixStructuredListRowStyles = css`
 :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);
   }
 
@@ -9363,7 +10634,7 @@ export const helixTableSectionBaseStyles = css`
 /* ── hx-tabs ── */
 :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));
   }
 
   * {
@@ -9390,7 +10661,7 @@ export const helixTableSectionBaseStyles = css`
     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;
   }
@@ -9415,7 +10686,7 @@ export const helixTableSectionBaseStyles = css`
     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);
@@ -9464,15 +10735,15 @@ export const helixTableSectionBaseStyles = css`
     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 ─── */
@@ -9498,32 +10769,32 @@ export const helixTableSectionBaseStyles = css`
   /* ─── 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);
   }
 
@@ -9582,7 +10853,7 @@ export const helixTableSectionBaseStyles = css`
     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;
   }
 
@@ -9592,7 +10863,7 @@ export const helixTableSectionBaseStyles = css`
 
   .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) ─── */
@@ -9615,7 +10886,7 @@ export const helixTableSectionBaseStyles = css`
 
   .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);
@@ -9681,7 +10952,7 @@ export const helixTableSectionBaseStyles = css`
     --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;
   }
 
@@ -9704,15 +10975,15 @@ export const helixTableSectionBaseStyles = css`
   }
 
   .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 ─── */
@@ -9755,6 +11026,39 @@ export const helixTableSectionBaseStyles = css`
   :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;
+    }
+  }
 /* ── hx-text-input ── */
 :host {
     display: block;
@@ -9829,7 +11133,7 @@ export const helixTableSectionBaseStyles = css`
     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);
   }
 
@@ -9844,7 +11148,7 @@ export const helixTableSectionBaseStyles = css`
     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:
@@ -9873,15 +11177,15 @@ export const helixTableSectionBaseStyles = css`
   /* ─── 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
       );
@@ -9893,7 +11197,7 @@ export const helixTableSectionBaseStyles = css`
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     flex-shrink: 0;
   }
 
@@ -9916,14 +11220,14 @@ export const helixTableSectionBaseStyles = css`
     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 {
@@ -9956,7 +11260,7 @@ export const helixTableSectionBaseStyles = css`
 
   .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);
   }
 
@@ -10064,7 +11368,7 @@ export const helixTableSectionBaseStyles = css`
     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);
   }
 
@@ -10079,7 +11383,7 @@ export const helixTableSectionBaseStyles = css`
     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:
@@ -10093,9 +11397,6 @@ export const helixTableSectionBaseStyles = css`
       --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,
@@ -10111,18 +11412,15 @@ export const helixTableSectionBaseStyles = css`
   /* --- 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
       );
@@ -10137,7 +11435,7 @@ export const helixTableSectionBaseStyles = css`
     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%;
@@ -10145,7 +11443,7 @@ export const helixTableSectionBaseStyles = css`
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .field__textarea:focus-visible {
@@ -10183,7 +11481,7 @@ export const helixTableSectionBaseStyles = css`
 
   .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;
   }
@@ -10206,7 +11504,7 @@ export const helixTableSectionBaseStyles = css`
 
   .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);
   }
 
@@ -10296,8 +11594,242 @@ export const helixTableSectionBaseStyles = css`
     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;
+    }
+  }
 /* ── hx-time-picker ── */
-:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif))}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-time-picker-label-color, var(--hx-color-neutral-700));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__combobox{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-time-picker-bg, var(--hx-color-neutral-0));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:visible}.field__combobox:focus-within{border-color:var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__combobox{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500))}.field--error .field__combobox:focus-within{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-error-color, var(--hx-color-error-500)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-time-picker-color, var(--hx-color-neutral-800));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:text}.field__input::placeholder{color:var(--hx-color-neutral-400)}.field__input:disabled{cursor:not-allowed}.field__toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0 var(--hx-space-3, .75rem);color:var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));cursor:pointer;height:100%;min-height:var(--hx-size-10, 2.5rem);flex-shrink:0;border-inline-start:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300))}.field__toggle:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));outline-offset:-2px;border-radius:0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem))}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));inset-inline-start:0;inset-inline-end:0;z-index:var(--hx-z-index-dropdown, 1000);background-color:var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-time-picker-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent) );max-height:var(--hx-time-picker-listbox-max-height, 16rem);overflow-y:auto;padding:var(--hx-space-1, .25rem) 0;list-style:none;margin:0}@media(prefers-reduced-motion:no-preference){.field__listbox{animation:hx-listbox-enter var(--hx-transition-fast, .15s ease) forwards}}@keyframes hx-listbox-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.field__option{display:flex;align-items:center;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);font-family:inherit;color:var(--hx-time-picker-option-color, var(--hx-color-neutral-800));cursor:pointer;transition:background-color var(--hx-transition-fast, .15s ease);line-height:var(--hx-line-height-normal, 1.5)}.field__option:hover,.field__option--active{background-color:var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));color:var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700))}.field__option--selected{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));color:var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));font-weight:var(--hx-font-weight-medium, 500)}.field__option--selected.field__option--active{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100))}@media(prefers-reduced-motion:reduce){.field__combobox,.field__option{transition:none}}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500)}.field__error{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c))}
+:host {
+    display: block;
+    position: relative;
+  }
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    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-time-picker-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: visible;
+  }
+  .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__combobox {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+  }
+  .field--error .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    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-time-picker-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: text;
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+  .field__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    cursor: pointer;
+    height: 100%;
+    min-height: var(--hx-size-10, 2.5rem);
+    flex-shrink: 0;
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+  }
+  .field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+    border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-time-picker-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)
+    );
+    max-height: var(--hx-time-picker-listbox-max-height, 16rem);
+    overflow-y: auto;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    list-style: none;
+    margin: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .field__listbox {
+      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+  @keyframes hx-listbox-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .field__option {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    font-family: inherit;
+    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__option:hover,
+  .field__option--active {
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+  }
+  .field__option--selected {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--selected.field__option--active {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__combobox,
+    .field__option {
+      transition: none;
+    }
+  }
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__help-text {
+    color: var(--hx-color-neutral-500);
+  }
+  .field__error {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+  @media (forced-colors: active) {
+    .field__combobox {
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+    .field__combobox:focus-within {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+      box-shadow: none;
+    }
+    .field--error .field__combobox {
+      border-color: LinkText;
+    }
+    .field--error .field__combobox:focus-within {
+      outline-color: Highlight;
+      box-shadow: none;
+    }
+    .field__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+    }
+    .field__listbox {
+      border-color: ButtonText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .field__option:hover,
+    .field__option--active {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }
 /* ── hx-toast ── */
 /* ─── hx-toast host ─── */
 
@@ -10320,13 +11852,12 @@ export const helixTableSectionBaseStyles = css`
     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)));
@@ -10346,22 +11877,22 @@ export const helixTableSectionBaseStyles = css`
   /* ─── 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);
   }
 
@@ -10672,7 +12203,7 @@ export const helixToastStackStyles = css`
    * to give clear visual feedback without introducing a new color.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -10698,7 +12229,7 @@ export const helixToastStackStyles = css`
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
     box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
@@ -10709,7 +12240,7 @@ export const helixToastStackStyles = css`
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: transparent;
   }
@@ -10799,9 +12330,9 @@ export const helixToastStackStyles = css`
     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));
@@ -10826,7 +12357,7 @@ export const helixToastStackStyles = css`
     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;
   }
@@ -10876,10 +12407,10 @@ export const helixToastStackStyles = css`
 
   .nav {
     background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
-    font-family: var(--hx-font-family-sans, sans-serif);
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Bar row (always visible) ─── */
@@ -10912,13 +12443,13 @@ export const helixToastStackStyles = css`
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f3f5);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .mobile-toggle:focus-visible {
@@ -10940,12 +12471,12 @@ export const helixToastStackStyles = css`
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   .nav__collapsible--open {
     display: flex;
-    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;
   }
 
   /* ─── Menu and actions in collapsible (mobile) ─── */
@@ -10962,7 +12493,7 @@ export const helixToastStackStyles = css`
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Desktop breakpoint ─── */
@@ -11094,6 +12625,15 @@ export const helixToastStackStyles = css`
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
 /* ── hx-visually-hidden ── */
 :host {
     position: absolute !important;
@@ -11119,4 +12659,16 @@ export const helixToastStackStyles = css`
     clip-path: none !important;
     white-space: normal !important;
     border: 0 !important;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-visually-hidden clips content off-screen for sighted users; in forced-colors
+     mode this behavior is intentional. When the focusable variant becomes visible
+     on focus, the browser's forced-colors mapping handles text/background colors
+     correctly via the default forced-color-adjust: auto. */
+  @media (forced-colors: active) {
+    :host([focusable]:focus-within) {
+      forced-color-adjust: auto;
+    }
   }