@helixui/library 3.0.0-next.65 → 3.1.0-next.66

package/dist/css/helix-forms.css

@@ -60,9 +60,9 @@
     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, #cbd5e1));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #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));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       border-color var(--hx-transition-fast, 150ms ease),
@@ -132,7 +132,7 @@
     width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -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, #334155));
+    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #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, #64748b));
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #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)
@@ -319,7 +319,7 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     padding: 0;
     margin-bottom: var(--hx-space-1);
@@ -353,7 +353,7 @@
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
+    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -695,7 +695,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-combobox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
@@ -707,9 +707,9 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #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));
+    background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -748,7 +748,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-2, 0.5rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     flex-shrink: 0;
   }
   .field__input {
@@ -761,11 +761,11 @@
     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));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
   .field__input--sm {
     min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -784,7 +784,7 @@
     justify-content: center;
     margin-inline-end: var(--hx-space-2, 0.5rem);
     flex-shrink: 0;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
   .field__clear-button {
     width: 1.25rem;
@@ -797,7 +797,7 @@
     transition: color var(--hx-transition-fast, 150ms ease);
   }
   .field__clear-button:hover {
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #334155);
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -832,9 +832,9 @@
     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));
+    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,
@@ -859,7 +859,7 @@
     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));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
@@ -895,7 +895,7 @@
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
   .field__sr-only {
@@ -915,7 +915,7 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
   .field__error {
     color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
@@ -1104,7 +1104,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-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -1121,9 +1121,9 @@
     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));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #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));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -1174,7 +1174,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-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
@@ -1182,7 +1182,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
 
   .field__input:disabled {
@@ -1200,9 +1200,9 @@
     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));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
     background: transparent;
-    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
     cursor: pointer;
     flex-shrink: 0;
     transition: color var(--hx-transition-fast, 150ms ease);
@@ -1226,7 +1226,7 @@
   }
 
   .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
     background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
   }
 
@@ -1244,9 +1244,9 @@
     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));
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #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,
@@ -1305,14 +1305,14 @@
   }
 
   .calendar__nav-btn {
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #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);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   :is(.calendar__nav-btn, .calendar__day):focus-visible {
@@ -1333,7 +1333,7 @@
   .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);
+    color: var(--hx-color-text-strong, #1e293b);
     flex: 1;
     text-align: center;
   }
@@ -1358,7 +1358,7 @@
     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);
+    color: var(--hx-color-text-muted, #64748b);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -1368,20 +1368,20 @@
      ============================================================ */
 
   .calendar__day {
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #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);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #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));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
@@ -1439,7 +1439,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .field__error {
@@ -1549,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, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
@@ -1599,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, #64748b));
+    color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -1667,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, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #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));
   }
@@ -1680,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, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -1739,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, #334155);
+    color: var(--hx-color-text-strong, #334155);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -1754,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, #cbd5e1));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #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, #f8fafc));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
     cursor: pointer;
     text-align: center;
     transition:
@@ -1764,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, #475569);
+    color: var(--hx-color-text-secondary, #475569);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -1788,7 +1788,7 @@
       color-mix(
         in srgb,
         var(--hx-color-primary-500, #2563eb) 8%,
-        var(--hx-color-neutral-0, #ffffff)
+        var(--hx-color-surface-default, #ffffff)
       )
     );
     border-style: solid;
@@ -1840,9 +1840,9 @@
     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, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0);
     border-radius: var(--hx-border-radius-md, 0.375rem);
-    background-color: var(--hx-color-neutral-0, #ffffff);
+    background-color: var(--hx-color-surface-default, #ffffff);
   }
 
   .file-item__row {
@@ -1855,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, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1864,7 +1864,7 @@
   .file-item__size {
     flex-shrink: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .file-item__remove {
@@ -1878,7 +1878,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     cursor: pointer;
     line-height: 1;
     transition:
@@ -1911,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, #e2e8f0);
+    background-color: var(--hx-color-border-default, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
   }
@@ -2012,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, #64748b));
+    color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
     margin: 0;
   }
 
@@ -2029,7 +2029,7 @@
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-help-text-color: var(--hx-color-text-muted, #64748b);
   }
 
   /* ─── Variant: error ─── */
@@ -2102,7 +2102,7 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -2117,9 +2117,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -2167,7 +2167,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -2179,7 +2179,7 @@
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -2189,7 +2189,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -2228,7 +2228,7 @@
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -2238,7 +2238,7 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -2250,12 +2250,12 @@
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -2294,7 +2294,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 
@@ -2427,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, #334155));
+    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
@@ -2461,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, #64748b));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -2645,15 +2645,18 @@
     display: block;
 
     /* Background & foreground */
-    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
+    --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
+    --_placeholder-color: var(
+      --hx-select-placeholder-color,
+      var(--hx-color-text-placeholder, #64748b)
+    );
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
@@ -2666,11 +2669,11 @@
     --_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, #64748b));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
-    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
     --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
     --_option-selected-bg: var(
       --hx-select-option-selected-bg,
@@ -2918,7 +2921,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .field__error {
@@ -3049,14 +3052,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, #334155));
+    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #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, #475569));
+    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -3074,7 +3077,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, #e2e8f0));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
     overflow: visible;
   }
 
@@ -3196,7 +3199,7 @@
     left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
     transform: translate(-50%, -50%);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-slider-thumb-border-width, 2px) solid
       var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
     box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
@@ -3274,7 +3277,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
     transform: translateX(-50%);
   }
 
@@ -3284,7 +3287,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, #64748b));
+    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -3293,18 +3296,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, #64748b));
+    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-color-neutral-400, #94a3b8);
+    background-color: var(--hx-color-border-strong, #94a3b8);
   }
 
   .slider--disabled .slider__thumb-visual {
-    border-color: var(--hx-color-neutral-400, #94a3b8);
+    border-color: var(--hx-color-border-strong, #94a3b8);
   }
 /* ── hx-switch ── */
 :host {
@@ -3349,7 +3352,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, #cbd5e1));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #cbd5e1));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -3375,7 +3378,7 @@
   .switch__thumb {
     position: absolute;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
     box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
@@ -3445,7 +3448,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, #334155));
+    color: var(--hx-switch-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -3461,7 +3464,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, #64748b));
+    color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3611,7 +3614,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, #334155));
+    color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3626,9 +3629,9 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-input-border-color, var(--hx-color-border-strong, #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));
+    background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3675,7 +3678,7 @@
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     flex-shrink: 0;
   }
 
@@ -3698,14 +3701,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, #1e293b));
+    color: var(--hx-input-color, var(--hx-color-text-strong, #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, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
 
   .field__input:focus-visible {
@@ -3738,7 +3741,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3846,7 +3849,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, #334155));
+    color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -3861,9 +3864,9 @@
     display: flex;
     flex-direction: column;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-input-border-color, var(--hx-color-border-strong, #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));
+    background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -3913,7 +3916,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, #1e293b));
+    color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -3921,7 +3924,7 @@
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
 
   .field__textarea:focus-visible {
@@ -3959,7 +3962,7 @@
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -3982,7 +3985,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -4073,7 +4076,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-time-picker-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
@@ -4085,9 +4088,9 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
     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));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -4124,14 +4127,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-time-picker-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #1e293b));
     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);
+    color: var(--hx-color-text-placeholder, #64748b);
   }
   .field__input:disabled {
     cursor: not-allowed;
@@ -4143,13 +4146,13 @@
     border: none;
     background: transparent;
     padding: 0 var(--hx-space-3, 0.75rem);
-    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #64748b));
     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));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
   }
   .field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -4163,9 +4166,9 @@
     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));
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #94a3b8));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-time-picker-listbox-shadow,
@@ -4198,7 +4201,7 @@
     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));
+    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #1e293b));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -4228,7 +4231,7 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #64748b);
   }
   .field__error {
     color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
@@ -4294,7 +4297,7 @@
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -4354,7 +4357,7 @@
 
   .button--primary {
     --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
 
@@ -4369,13 +4372,13 @@
   }
 
   .button--tertiary {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #e2e8f0);
   }
 
   .button--ghost {
@@ -4385,17 +4388,17 @@
   }
 
   .button--ghost:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f1f5f9);
   }
 
   .button--outline {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0f172a);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #cbd5e1);
   }
 
   .button--outline:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f8fafc);
   }
 
   /* ─── Pressed State ─── */
@@ -4408,7 +4411,7 @@
     --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)
+      var(--hx-color-text-on-primary, #ffffff)
     );
     --hx-toggle-button-border-color: transparent;
   }
@@ -4421,7 +4424,7 @@
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-0, #ffffff)
+      var(--hx-color-text-on-primary, #ffffff)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
   }
@@ -4449,12 +4452,15 @@
 
   /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
   .button--outline.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-surface-sunken, #f1f5f9)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-900, #0f172a)
+      var(--hx-color-text-primary, #0f172a)
     );
-    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
+    --hx-toggle-button-border-color: var(--hx-color-text-muted, #64748b);
     box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
   }