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

package/dist/css/helix-forms.css

@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-checkbox-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Control (checkbox + label row) ─── */
@@ -60,7 +60,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:
@@ -98,13 +98,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 ─── */
@@ -122,7 +122,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 ─── */
@@ -151,7 +151,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;
@@ -166,7 +166,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)
@@ -308,7 +308,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 ─── */
@@ -325,81 +325,1182 @@
     margin-bottom: var(--hx-space-1);
   }
 
-  .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
-    font-weight: var(--hx-font-weight-bold);
+  .fieldset__required-marker {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Items Container ─── */
+
+  .fieldset__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));
+  }
+
+  :host([orientation='horizontal']) .fieldset__items {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* ─── Error State ─── */
+
+  .fieldset--error .fieldset__legend {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .fieldset__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .fieldset__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .fieldset {
+      border: none;
+    }
+
+    .fieldset__legend {
+      color: CanvasText;
+    }
+
+    .fieldset--error .fieldset__legend {
+      color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .fieldset__legend {
+      color: GrayText;
+    }
+
+    .fieldset__help-text {
+      color: GrayText;
+    }
+
+    .fieldset__error {
+      color: LinkText;
+    }
+  }
+/* ── 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, 0.875rem);
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+  .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);
+  }
+  .trigger:hover:not([disabled]) {
+    border-color: var(--hx-color-primary-500, #2563eb);
+  }
+  :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, 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;
+  }
+  .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;
+  }
+  .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;
+  }
+  :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);
+  }
+  .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;
+  }
+  .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, #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%);
+  }
+  .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, #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%));
+  }
+  .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;
+    padding: 0;
+    flex-shrink: 0;
+    transition: transform var(--hx-transition-fast, 150ms 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, 0.3))
+    );
+  }
+  .input-area {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+  .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;
+  }
+  .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;
+  }
+  .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, 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-date-picker ── */
+/* ============================================================
+     Host
+     ============================================================ */
+
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ============================================================
+     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;
+  }
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .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);
+  }
+
+  .field__required-marker {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ============================================================
+     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;
+  }
+
+  .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
+      );
+  }
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .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
+      );
+  }
+
+  /* ============================================================
+     Input element
+     ============================================================ */
+
+  .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;
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     Calendar trigger button
+     ============================================================ */
+
+  .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;
+  }
+
+  .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, #334155));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+  }
+
+  .field__trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     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;
+  }
+
+  .calendar__nav-btn:hover {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  :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, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .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;
+  }
+
+  /* ============================================================
+     Calendar grid
+     ============================================================ */
+
+  .calendar__grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .calendar__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .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;
+  }
+
+  /* ============================================================
+     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;
+  }
+
+  .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);
+  }
+
+  .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));
   }
 
-  /* ─── Items Container ─── */
+  .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));
+  }
 
-  .fieldset__items {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));
+  .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;
   }
 
-  :host([orientation='horizontal']) .fieldset__items {
-    flex-direction: row;
-    flex-wrap: wrap;
+  .calendar__day--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  /* ─── Error State ─── */
+  /* ============================================================
+     Live region (screen reader announcements)
+     ============================================================ */
 
-  .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
+  .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;
   }
 
-  /* ─── Help Text & Error Messages ─── */
+  /* ============================================================
+     Help text and error message
+     ============================================================ */
 
-  .fieldset__help-text {
-    font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
-    line-height: var(--hx-line-height-normal);
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
   }
 
-  .fieldset__error {
-    font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
-    line-height: var(--hx-line-height-normal);
+  .field__help-text {
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
-  /* ─── High Contrast Mode (forced-colors) ─── */
+  .field__error {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ============================================================
+     Reduced motion
+     ============================================================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__trigger,
+    .calendar__nav-btn,
+    .calendar__day {
+      transition: none;
+    }
+  }
+
+  /* ============================================================
+     Forced colors (Windows High Contrast)
+     ============================================================ */
 
   @media (forced-colors: active) {
-    .fieldset {
-      border: none;
+    .field__input-wrapper {
+      border: 1px solid ButtonText;
     }
 
-    .fieldset__legend {
-      color: CanvasText;
+    .field__input-wrapper:focus-within {
+      outline: 2px solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
     }
 
-    .fieldset--error .fieldset__legend {
-      color: LinkText;
+    :is(.calendar__day:focus-visible, .calendar__nav-btn:focus-visible) {
+      outline: 2px solid Highlight;
+      box-shadow: none;
     }
 
-    :host([disabled]) {
-      opacity: 1;
+    .calendar__day--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid Highlight;
     }
 
-    :host([disabled]) .fieldset__legend {
-      color: GrayText;
+    .calendar__day--today:not(.calendar__day--selected) {
+      border: 2px solid LinkText;
     }
 
-    .fieldset__help-text {
+    .calendar__day--today:not(.calendar__day--selected)::after {
+      display: none;
+    }
+
+    .calendar__day--disabled {
       color: GrayText;
     }
 
-    .fieldset__error {
-      color: LinkText;
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
     }
   }
-/* ── 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-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-field ── */
 :host {
     display: block;
@@ -448,7 +1549,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;
   }
@@ -498,7 +1599,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);
   }
 
@@ -515,7 +1616,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);
   }
@@ -566,7 +1667,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));
   }
@@ -579,7 +1680,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) ─── */
@@ -627,7 +1728,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 ─── */
@@ -638,7 +1739,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);
   }
 
@@ -653,9 +1754,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:
@@ -663,7 +1764,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);
   }
 
@@ -694,7 +1795,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) {
@@ -739,7 +1840,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);
   }
@@ -754,7 +1855,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;
@@ -763,7 +1864,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 {
@@ -777,7 +1878,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:
@@ -787,7 +1888,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 {
@@ -810,7 +1911,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;
   }
@@ -911,7 +2012,7 @@
     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;
   }
 
@@ -928,25 +2029,25 @@
   /* ─── 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) ─── */
@@ -1315,7 +2416,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2, 0.5rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-radio-group-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Legend ─── */
@@ -1326,7 +2427,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-radio-group-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
@@ -1360,7 +2461,7 @@
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -1436,16 +2537,18 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
     line-height: 1;
-    transition: transform var(--hx-transition-fast, 0.15s ease);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    transition: transform var(--hx-transition-fast, 150ms ease);
   }
 
   .symbol:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   .symbol--full,
@@ -1485,7 +2588,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }
@@ -1543,14 +2646,14 @@
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
+    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
@@ -1560,10 +2663,10 @@
     );
 
     /* Error */
-    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
@@ -1815,7 +2918,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .field__error {
@@ -1931,7 +3034,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-slider-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Label Row ─── */
@@ -1946,14 +3049,14 @@
   .slider__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .slider__value-display {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #6c757d));
+    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -1971,7 +3074,7 @@
     position: relative;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e9ecef));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
     overflow: visible;
   }
 
@@ -2049,8 +3152,13 @@
     background: transparent;
     border: none;
     outline: none;
-    /* Expand the hit area so the thumb is easy to grab */
-    padding-block: var(--hx-slider-input-padding-block, 0.75rem);
+    /* Expand the hit area so the thumb meets WCAG 2.5.8 touch target (44px).
+       The input's total height = track height + 2 * padding-block. With 0.75rem
+       (~12px) padding on each side and a track of ~6px, the total target area is
+       ~30px. We increase to 1rem (~16px) per side for a ~38px minimum, supplemented
+       by the visual thumb size. */
+    padding-block: var(--hx-slider-input-padding-block, 1rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   /* In forced-color mode, restore native outline so the input remains focusable */
@@ -2166,7 +3274,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #adb5bd));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
     transform: translateX(-50%);
   }
 
@@ -2176,7 +3284,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -2185,18 +3293,18 @@
 
   .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-switch ── */
 :host {
@@ -2218,7 +3326,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-switch-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.
@@ -2241,7 +3349,7 @@
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -2337,7 +3445,7 @@
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -2353,7 +3461,7 @@
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2503,7 +3611,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2518,7 +3626,7 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
     transition:
@@ -2547,15 +3655,15 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
+        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -2567,7 +3675,7 @@
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     flex-shrink: 0;
   }
 
@@ -2590,14 +3698,14 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .field__input:focus-visible {
@@ -2630,7 +3738,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2738,7 +3846,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2753,7 +3861,7 @@
     display: flex;
     flex-direction: column;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
     transition:
@@ -2767,9 +3875,6 @@
       --hx-input-focus-ring-color,
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
     );
-    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
@@ -2785,18 +3890,15 @@
   /* --- Error State --- */
 
   .field--error .field__textarea-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   .field--error .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
-    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))
+        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -2811,7 +3913,7 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -2819,7 +3921,7 @@
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .field__textarea:focus-visible {
@@ -2857,7 +3959,7 @@
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -2880,7 +3982,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2948,7 +4050,230 @@
     }
   }
 /* ── 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-toggle-button ── */
 :host {
     display: inline-block;
@@ -3080,7 +4405,7 @@
    * 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)
@@ -3106,7 +4431,7 @@
     --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);
@@ -3117,7 +4442,7 @@
     --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;
   }