@helixui/library 1.1.1 → 1.1.2-next.2

package/dist/css/helix-forms.css

@@ -0,0 +1,2498 @@
+/* helix-forms.css — 20 components */
+
+/* ── hx-checkbox ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Control (checkbox + label row) ─── */
+
+  .checkbox__control {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--hx-space-2, 0.5rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .checkbox__control {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hidden Native Input ─── */
+
+  .checkbox__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Visual Checkbox ─── */
+
+  .checkbox__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    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));
+    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:
+      background-color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    margin-top: var(--hx-space-px, 1px);
+  }
+
+  /* ─── Focus Ring ─── */
+
+  .checkbox__input:focus-visible ~ .checkbox__box {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-checkbox-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Checked State ─── */
+
+  .checkbox--checked .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Indeterminate State ─── */
+
+  .checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Error State ─── */
+
+  .checkbox--error .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .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));
+  }
+
+  /* ─── Hover ─── */
+
+  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */
+  .checkbox__control:hover .checkbox__box {
+    border-color: var(
+      --hx-checkbox-hover-border-color,
+      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
+    );
+  }
+
+  .checkbox--checked .checkbox__control:hover .checkbox__box {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .checkbox--error .checkbox__control:hover .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Checkmark Icon ─── */
+
+  .checkbox__icon {
+    display: none;
+    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-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .checkbox--checked .checkbox__icon--check {
+    display: block;
+  }
+
+  .checkbox--indeterminate .checkbox__icon--indeterminate {
+    display: block;
+  }
+
+  /* ─── Label ─── */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .checkbox__required-marker {
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .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));
+    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)
+    );
+  }
+
+  .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    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)
+    );
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) {
+    --hx-checkbox-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__help-text,
+  :host([hx-size='sm']) .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  :host([hx-size='lg']) {
+    --hx-checkbox-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__help-text,
+  :host([hx-size='lg']) .checkbox__error {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .checkbox__box {
+      transition: none;
+    }
+  }
+/* ── hx-checkbox-group ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Fieldset ─── */
+
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2);
+    font-family: var(--hx-font-family-sans);
+  }
+
+  /* ─── Legend ─── */
+
+  .fieldset__legend {
+    display: flex;
+    align-items: baseline;
+    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));
+    line-height: var(--hx-line-height-normal);
+    padding: 0;
+    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);
+  }
+
+  /* ─── 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-500, #dc3545));
+  }
+
+  /* ─── 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-500, #dc3545));
+    line-height: var(--hx-line-height-normal);
+  }
+/* ── 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{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}}
+/* ── 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}}: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;
+  }
+
+  :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-field-gap, var(--hx-space-1, 0.25rem));
+    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Inline Layout ─── */
+
+  .field--layout-inline {
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .field--layout-inline .field__label-wrapper {
+    display: flex;
+    align-items: baseline;
+    flex-shrink: 0;
+    min-width: 8rem;
+  }
+
+  /* ─── Label ─── */
+
+  .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-field-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: pointer;
+  }
+
+  .field__required-marker {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Control Wrapper ─── */
+
+  .field__control {
+    display: block;
+  }
+
+  /* ─── Error Slot Announcer (visually hidden live region) ─── */
+
+  .field__error-slot-announcer {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) .field__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='sm']) .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__help-text {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__label {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .field--error .field__control {
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+/* ── hx-field-label ── */
+:host {
+    display: block;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: baseline;
+    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));
+    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));
+  }
+
+  .required-indicator {
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  .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);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+/* ── hx-file-upload ── */
+: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-2, 0.5rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Label ─── */
+
+  .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-color-neutral-700, #343a40);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Dropzone ─── */
+
+  .dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    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));
+    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));
+    cursor: pointer;
+    text-align: center;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      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);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .dropzone:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-color: var(
+      --hx-file-upload-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-500))
+    );
+  }
+
+  .dropzone--drag-over {
+    border-color: var(--hx-color-primary-500, #2563eb);
+    background-color: var(
+      --hx-file-upload-dropzone-active-bg,
+      color-mix(
+        in srgb,
+        var(--hx-color-primary-500, #2563eb) 8%,
+        var(--hx-color-neutral-0, #ffffff)
+      )
+    );
+    border-style: solid;
+  }
+
+  .dropzone--error {
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropzone {
+      transition: none;
+    }
+  }
+
+  /* ─── Hidden file input ─── */
+
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── File list ─── */
+
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .file-list:empty {
+    display: none;
+  }
+
+  /* ─── File item ─── */
+
+  .file-item {
+    display: flex;
+    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-radius: var(--hx-border-radius-md, 0.375rem);
+    background-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .file-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .file-item__name {
+    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);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-item__size {
+    flex-shrink: 0;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+  }
+
+  .file-item__remove {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-1, 0.25rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6c757d);
+    cursor: pointer;
+    line-height: 1;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .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);
+  }
+
+  .file-item__remove:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-file-upload-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .file-item__remove {
+      transition: none;
+    }
+  }
+
+  /* ─── Progress bar ─── */
+
+  .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);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    width: 100%;
+    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
+    border-radius: inherit;
+    transform-origin: left center;
+    transform: scaleX(var(--_progress-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none;
+    }
+  }
+
+  /* ─── Screen-reader only utility ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Error message ─── */
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+/* ── hx-help-text ── */
+:host {
+    display: block;
+  }
+
+  .help-text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hx-help-text-icon-gap, 0.375rem);
+    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));
+    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));
+    margin: 0;
+  }
+
+  .help-text__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .help-text__text {
+    min-width: 0;
+  }
+
+  /* ─── Variant: default ─── */
+
+  .help-text--default {
+    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  /* ─── Variant: error ─── */
+
+  .help-text--error {
+    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  .help-text--warning {
+    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+  }
+
+  /* ─── Variant: success ─── */
+
+  .help-text--success {
+    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+  }
+/* ── hx-number-input ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1);
+    font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));
+  }
+
+  /* ─── Label ─── */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    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));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__required-marker {
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Input Wrapper ─── */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+    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));
+    transition:
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Slots (Prefix / Suffix) ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-3);
+    color: var(--hx-color-neutral-500);
+    flex-shrink: 0;
+  }
+
+  /* ─── Native Input ─── */
+
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal);
+    width: 100%;
+    /* Size: md (default) */
+    padding: var(--hx-space-2) var(--hx-space-3);
+    font-size: var(--hx-font-size-md);
+    min-height: var(--hx-size-10);
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hide native browser spinners ─── */
+
+  .field__input[type='number']::-webkit-inner-spin-button,
+  .field__input[type='number']::-webkit-outer-spin-button {
+    display: none;
+  }
+
+  .field__input[type='number'] {
+    appearance: textfield;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .field--sm .field__input {
+    padding: var(--hx-space-1) var(--hx-space-2);
+    font-size: var(--hx-font-size-sm);
+    min-height: var(--hx-size-8);
+  }
+
+  .field--lg .field__input {
+    padding: var(--hx-space-3) var(--hx-space-4);
+    font-size: var(--hx-font-size-lg);
+    min-height: var(--hx-size-12);
+  }
+
+  /* ─── Stepper ─── */
+
+  .field__stepper {
+    display: flex;
+    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));
+  }
+
+  .field__stepper-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--hx-color-neutral-600);
+    padding: 0;
+    flex: 1;
+    min-width: var(--hx-size-8);
+    line-height: 1;
+    transition: background-color var(--hx-transition-fast);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .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));
+  }
+
+  .field__stepper-btn:hover:not(:disabled) {
+    background-color: var(--hx-color-neutral-50);
+    color: var(--hx-color-neutral-800);
+  }
+
+  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
+  .field__stepper-btn:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .field__stepper-btn:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+  }
+
+  .field__stepper-btn:disabled {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .field__stepper-btn svg {
+    pointer-events: none;
+    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+  }
+
+  /* Size sm adjustments for stepper */
+  .field--sm .field__stepper-btn {
+    min-width: var(--hx-size-6);
+  }
+
+  /* Size lg adjustments for stepper */
+  .field--lg .field__stepper-btn {
+    min-width: var(--hx-size-10);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-color-neutral-500);
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper {
+      transition: none;
+    }
+
+    .field__stepper-btn {
+      transition: none;
+    }
+  }
+/* ── hx-radio-group ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Fieldset ─── */
+
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Legend ─── */
+
+  .fieldset__legend {
+    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-radio-group-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding: 0;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+  }
+
+  .fieldset__required-marker {
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Group Container ─── */
+
+  .fieldset__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));
+  }
+
+  :host([orientation='horizontal']) .fieldset__group {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* ─── Error State ─── */
+
+  .fieldset--error .fieldset__legend {
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .fieldset__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+/* ── hx-rating ── */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Base Container ─── */
+
+  .base {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));
+    font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));
+  }
+
+  .base--readonly {
+    cursor: default;
+  }
+
+  .base--disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Symbol (each star) ─── */
+
+  .symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    line-height: 1;
+    transition: transform var(--hx-transition-fast, 0.15s 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);
+  }
+
+  .symbol--full,
+  .symbol--half {
+    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
+  }
+
+  .symbol--disabled {
+    cursor: not-allowed;
+  }
+
+  .base:not(.base--readonly) .symbol:hover {
+    transform: scale(1.15);
+    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
+  }
+
+  /* ─── Half-Star Layout ─── */
+
+  .star-half {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 1em;
+    height: 1em;
+  }
+
+  .star-half__filled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    /* Clip to left 50% for the filled half */
+    clip-path: inset(0 50% 0 0);
+  }
+
+  .star-half__empty {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));
+    /* Clip to right 50% for the empty half */
+    clip-path: inset(0 0 0 50%);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .symbol {
+      transition: none;
+    }
+  }
+/* ── hx-select ── */
+: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-select-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-select-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  .field__select-wrapper {
+    position: relative;
+    display: block;
+  }
+
+  .field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    cursor: pointer;
+    text-align: start;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  .field__trigger:focus,
+  .field__trigger:focus-visible {
+    border-color: var(
+      --hx-select-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-select-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__trigger[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  .field__trigger--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__trigger--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__trigger-value {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .field__trigger--placeholder .field__trigger-value {
+    color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+  }
+
+  .field__chevron {
+    flex-shrink: 0;
+    width: 12px;
+    height: 8px;
+    position: relative;
+    color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    pointer-events: none;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .field__chevron::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2px;
+    width: 7px;
+    height: 7px;
+    border-inline-end: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(45deg);
+  }
+
+  .field--open .field__chevron {
+    transform: rotate(180deg);
+  }
+
+  .field--error .field__trigger {
+    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__trigger:focus,
+  .field--error .field__trigger:focus-visible {
+    border-color: var(--hx-select-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-select-error-color, var(--hx-color-error-500, #dc3545))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .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-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-select-listbox-shadow,
+      0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))
+    );
+    max-height: var(--hx-select-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-select-color, var(--hx-color-neutral-800, #212529));
+    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-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  .field__option--selected {
+    background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .field__option--focused {
+    background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
+  }
+
+  .field__option--focused.field__option--selected {
+    background-color: var(--hx-select-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, #adb5bd);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .field__select {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    clip: rect(0, 0, 0, 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, #6c757d);
+  }
+
+  .field__error {
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__trigger,
+    .field__chevron,
+    .field__option {
+      transition: none;
+    }
+  }
+/* ── hx-slider ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Container ─── */
+
+  .slider {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Label Row ─── */
+
+  .slider__label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .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));
+    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));
+    line-height: var(--hx-line-height-normal, 1.5);
+    font-variant-numeric: tabular-nums;
+    min-width: var(--hx-size-8, 2rem);
+    text-align: end;
+  }
+
+  /* ─── Track Container ─── */
+
+  .slider__track-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .slider__track {
+    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));
+    overflow: visible;
+  }
+
+  /* ─── Size: sm ─── */
+
+  .slider--sm .slider__track {
+    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));
+  }
+
+  .slider--sm .slider__input {
+    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));
+  }
+
+  /* ─── Size: md ─── */
+
+  .slider--md .slider__track {
+    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));
+  }
+
+  .slider--md .slider__input {
+    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));
+  }
+
+  /* ─── Size: lg ─── */
+
+  .slider--lg .slider__track {
+    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));
+  }
+
+  .slider--lg .slider__input {
+    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));
+  }
+
+  /* ─── Fill ─── */
+
+  .slider__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
+    pointer-events: none;
+    transform-origin: left center;
+    transform: scaleX(var(--_fill-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  /* Suppress fill animation on initial render — only animate on user interaction */
+  :host(:not([data-ready])) .slider__fill {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slider__fill {
+      transition: none;
+    }
+  }
+
+  /* ─── Native Range Input ─── */
+
+  .slider__input {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    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);
+  }
+
+  /* In forced-color mode, restore native outline so the input remains focusable */
+  @media (forced-colors: active) {
+    .slider__input {
+      outline: revert;
+      opacity: 1;
+    }
+    .slider__input:focus-visible {
+      outline: 2px solid ButtonText;
+    }
+  }
+
+  .slider__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Thumb (visual, :before on a wrapper or via ::after on track) ─── */
+  /*
+   * The native thumb is hidden (opacity 0 on the input). We render a visible
+   * thumb element positioned by --fill-pct (a raw 0–100 number set in JS).
+   *
+   * Correct alignment formula keeps the thumb centered within the track at
+   * both extremes, preventing the left/right halves from clipping outside:
+   *   left = fillPct% * (1 – thumbSize/100%) + thumbSize * (1 – fillPct/100)
+   * Simplified: left = calc(var(--fill-pct,0)*1% + var(--_thumb-size)*(1 - var(--fill-pct,0)/100))
+   * Combined with translate(-50%,-50%) this places the thumb center correctly
+   * at every position from min to max.
+   */
+
+  .slider__thumb-visual {
+    position: absolute;
+    top: 50%;
+    /* Corrected position: thumb stays within track at all fill values */
+    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));
+    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)));
+    pointer-events: none;
+    transition:
+      box-shadow var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slider__thumb-visual {
+      transition: none;
+    }
+  }
+
+  .slider__input:focus-visible ~ .slider__thumb-visual {
+    box-shadow:
+      0 0 0 var(--hx-focus-ring-width, 2px)
+        var(
+          --hx-slider-focus-ring-color,
+          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        ),
+      var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+  }
+
+  /* ─── Thumb sizes ─── */
+
+  .slider--sm .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-sm, var(--hx-size-3, 0.75rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  .slider--md .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-md, var(--hx-size-4, 1rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  .slider--lg .slider__thumb-visual {
+    --_thumb-size: var(--hx-slider-thumb-size-lg, var(--hx-size-5, 1.25rem));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+  }
+
+  /* ─── Forced colors (Windows High Contrast) ─── */
+  @media (forced-colors: active) {
+    .slider__fill {
+      background-color: Highlight;
+    }
+    .slider__track {
+      background-color: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+    .slider__thumb-visual {
+      background-color: ButtonText;
+      border-color: ButtonText;
+    }
+    .slider__input:focus-visible ~ .slider__thumb-visual {
+      outline: 2px solid Highlight;
+    }
+  }
+
+  /* ─── Ticks ─── */
+
+  .slider__ticks {
+    position: relative;
+    width: 100%;
+    height: var(--hx-space-2, 0.5rem);
+    margin-top: var(--hx-space-1, 0.25rem);
+  }
+
+  .slider__tick {
+    position: absolute;
+    top: 0;
+    width: var(--hx-border-width-thin, 1px);
+    height: 100%;
+    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #adb5bd));
+    transform: translateX(-50%);
+  }
+
+  /* ─── Range Labels ─── */
+
+  .slider__range-labels {
+    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));
+    line-height: var(--hx-line-height-normal, 1.5);
+    margin-top: var(--hx-space-0-5, 0.125rem);
+  }
+
+  /* ─── Help Text ─── */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Disabled state ─── */
+
+  .slider--disabled .slider__fill {
+    background-color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .slider--disabled .slider__thumb-visual {
+    border-color: var(--hx-color-neutral-400, #adb5bd);
+  }
+/* ── hx-switch ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* --- Layout --- */
+
+  .switch {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .switch__control-row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  /* --- Track --- */
+
+  .switch__track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    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));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .switch__track:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-switch-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .switch--checked .switch__track {
+    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* --- Thumb --- */
+
+  .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));
+    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);
+  }
+
+  /* --- Size: sm (track 32x18, thumb 14px) --- */
+
+  .switch--sm .switch__track {
+    width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));
+    height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));
+  }
+
+  .switch--sm .switch__thumb {
+    width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
+    height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--sm.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));
+  }
+
+  /* --- Size: md (track 40x22, thumb 18px) --- */
+
+  .switch--md .switch__track {
+    width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));
+    height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));
+  }
+
+  .switch--md .switch__thumb {
+    width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
+    height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--md.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));
+  }
+
+  /* --- Size: lg (track 48x26, thumb 22px) --- */
+
+  .switch--lg .switch__track {
+    width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));
+    height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));
+  }
+
+  .switch--lg .switch__thumb {
+    width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
+    height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));
+    top: 50%;
+    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));
+    transform: translateY(-50%);
+  }
+
+  .switch--lg.switch--checked .switch__thumb {
+    transform: translateY(-50%)
+      translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));
+  }
+
+  /* --- Label --- */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .switch__required-marker {
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* --- Help Text & Error --- */
+
+  .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));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .switch__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* --- Reduced Motion --- */
+
+  @media (prefers-reduced-motion: reduce) {
+    .switch__track,
+    .switch__thumb {
+      transition: none;
+    }
+  }
+/* ── hx-text-input ── */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  /*
+   * Attribute-based focus hooks set by FocusMixin.
+   * :host([focused]) — fires whenever the component or any descendant has focus.
+   * :host([focused-visible]) — fires only for keyboard-initiated focus.
+   * These complement the :focus-within rules on .field__input-wrapper and are
+   * exposed as theming hooks for consumers who target the host element.
+   */
+  :host([focused]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  :host([focused-visible]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Label ─── */
+
+  .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-input-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-input-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: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+    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:
+      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-input-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-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-input-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-input-error-color, var(--hx-color-error-500, #dc3545))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Slots (Prefix / Suffix) ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    color: var(--hx-color-neutral-500, #6c757d);
+    flex-shrink: 0;
+  }
+
+  /* Only add padding when slot has content — avoids phantom space on empty slots */
+  .field__prefix--filled {
+    padding: 0 var(--hx-space-3, 0.75rem);
+  }
+
+  .field__suffix--filled {
+    padding: 0 var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Native Input ─── */
+
+  .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-input-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%;
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .field--size-sm .field__input {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-size-8, 2rem);
+    font-size: var(--hx-input-sm-font-size, 0.875rem);
+  }
+
+  .field--size-md .field__input {
+    /* md is the default — no overrides needed */
+  }
+
+  .field--size-lg .field__input {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    min-height: var(--hx-size-12, 3rem);
+    font-size: var(--hx-input-lg-font-size, 1.125rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper {
+      transition: none;
+    }
+  }
+/* ── hx-textarea ── */
+: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-input-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* --- Label --- */
+
+  .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-input-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* --- Textarea Wrapper --- */
+
+  .field__textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));
+    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:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: hidden;
+  }
+
+  .field__textarea-wrapper:focus-within {
+    border-color: var(
+      --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,
+        var(
+            --hx-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* --- Error State --- */
+
+  .field--error .field__textarea-wrapper {
+    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .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));
+    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))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* --- Native Textarea --- */
+
+  .field__textarea {
+    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-input-color, var(--hx-color-neutral-800, #212529));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
+    width: 100%;
+    resize: vertical;
+  }
+
+  .field__textarea::placeholder {
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .field__textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__textarea-wrapper {
+      transition: none;
+    }
+  }
+
+  /* --- Resize Variants --- */
+
+  :host([resize='none']) .field__textarea {
+    resize: none;
+  }
+
+  /* resize: vertical is the base default — no override needed for [resize='vertical'] */
+
+  :host([resize='both']) .field__textarea {
+    resize: both;
+  }
+
+  :host([resize='auto']) .field__textarea {
+    resize: none;
+    overflow: hidden;
+  }
+
+  /* --- Character Counter --- */
+
+  .field__counter {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+    text-align: end;
+  }
+
+  /* --- Visually Hidden (screen reader only) --- */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* --- Help Text & Error Messages --- */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+/* ── 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))}
+/* ── hx-toggle-button ── */
+:host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* ─── Base Button ─── */
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    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));
+    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);
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    text-decoration: none;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-toggle-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .button:hover {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .button:active {
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .button--sm {
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  .button--md {
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  .button--lg {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  /* ─── Style Variants ─── */
+
+  .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-border-color: transparent;
+  }
+
+  .button--secondary {
+    --hx-toggle-button-bg: transparent;
+    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .button--secondary:hover {
+    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
+  }
+
+  .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-border-color: transparent;
+  }
+
+  .button--tertiary:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+  }
+
+  .button--ghost {
+    --hx-toggle-button-bg: transparent;
+    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  .button--ghost:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-100, #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);
+  }
+
+  .button--outline:hover {
+    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+  }
+
+  /* ─── Pressed State ─── */
+
+  /*
+   * Primary: already uses solid primary bg; pressed deepens to primary-700
+   * 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-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-neutral-0, #ffffff)
+    );
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  /*
+   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg
+   * so the state change is immediately legible.
+   */
+  .button--secondary.button--pressed {
+    --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)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
+  .button--tertiary.button--pressed {
+    --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)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
+  }
+
+  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
+  .button--ghost.button--pressed {
+    --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)
+    );
+    --hx-toggle-button-border-color: transparent;
+  }
+
+  /* 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-color: var(
+      --hx-toggle-button-pressed-color,
+      var(--hx-color-neutral-900, #0f172a)
+    );
+    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
+    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
+  }
+
+  /* ─── Disabled ─── */
+
+  .button[disabled] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Prefix / Suffix / Label ─── */
+
+  .button__prefix,
+  .button__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .button__label {
+    flex: 1 1 auto;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .button {
+      transition: none;
+    }
+  }