@helixui/library 1.0.0 → 1.1.1

package/dist/shared/{hx-combobox-BBi3izKJ.js → hx-combobox-CivfelTS.js}

@@ -1,419 +1,29 @@
 import { css as v, LitElement as m, html as h, nothing as n } from "lit";
 import { property as a, state as u, query as g, customElement as y } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
+import { classMap as _ } from "lit/directives/class-map.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
-import { tokenStyles as w } from "@helixui/tokens/lit";
-const $ = v`
-  :host {
-    display: block;
-  }
-
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    pointer-events: none;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  /* ─── Field Container ─── */
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));
-    position: relative;
-  }
-
-  /* ─── 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-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);
-  }
-
-  /* ─── Input Wrapper ─── */
-
-  .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, 0.375rem));
-    background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
-    transition:
-      border-color var(--hx-transition-fast, 150ms ease),
-      box-shadow var(--hx-transition-fast, 150ms ease);
-  }
-
-  .field__input-wrapper:focus-within {
-    border-color: var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    /* P2-7: Solid fallback for browsers without color-mix() (Chrome <111, Safari <16.2) */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-overlay-primary-25, rgba(37, 99, 235, 0.25));
-    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, #2563eb))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
-  .field--error .field__input-wrapper {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));
-  }
-
-  .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));
-    /* P2-7: Solid fallback for browsers without color-mix() */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-overlay-error-25, rgba(220, 53, 69, 0.25));
-    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, 0.25) * 100%),
-        transparent
-      );
-  }
-
-  /* ─── Prefix / Suffix Slots ─── */
-
-  .field__prefix,
-  .field__suffix {
-    display: flex;
-    align-items: center;
-    padding: 0 var(--hx-space-2, 0.5rem);
-    color: var(--hx-color-neutral-500, #6c757d);
-    flex-shrink: 0;
-  }
-
-  /* ─── Text Input ─── */
-
-  .field__input {
-    flex: 1;
-    min-width: 0;
-    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, 0.5rem) var(--hx-space-3, 0.75rem);
-  }
-
-  .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
-  }
-
-  /* ─── Input size variants ─── */
-
-  .field__input--sm {
-    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
-  }
-
-  .field__input--md {
-    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
-    font-size: var(--hx-font-size-md, 1rem);
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-  }
-
-  .field__input--lg {
-    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));
-    font-size: var(--hx-font-size-lg, 1.125rem);
-    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
-  }
-
-  /* ─── Clear Button ─── */
-
-  .field__clear-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-inline-end: var(--hx-space-2, 0.5rem);
-    flex-shrink: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    padding: 0;
-    color: var(--hx-color-neutral-400, #adb5bd);
-    border-radius: var(--hx-border-radius-full, 9999px);
-    transition: color var(--hx-transition-fast, 150ms ease);
-  }
-
-  .field__clear-button:hover {
-    color: var(--hx-color-neutral-700, #343a40);
-  }
-
-  .field__clear-button:focus-visible {
-    outline: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    outline-offset: 1px;
-  }
-
-  /* ─── Loading Indicator ─── */
-
-  .field__loading-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-    margin-inline-end: var(--hx-space-2, 0.5rem);
-    flex-shrink: 0;
-    color: var(--hx-color-neutral-400, #adb5bd);
-  }
-
-  .field__loading-spinner {
-    width: 1rem;
-    height: 1rem;
-    border: 2px solid currentColor;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: hx-spin 0.7s linear infinite;
-  }
-
-  @keyframes hx-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .field__loading-spinner {
-      animation: none;
-    }
-  }
-
-  /* ─── Listbox Panel ─── */
-
-  .field__listbox {
-    position: absolute;
-    top: calc(100% + var(--hx-space-1, 0.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, 0.375rem));
-    /* P2-7: Solid fallback for browsers without color-mix() */
-    box-shadow: 0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12));
-    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;
-  }
-
-  /* ─── Options Container ─── */
-
-  .field__options {
-    overflow-y: auto;
-    flex: 1;
-    padding: var(--hx-space-1, 0.25rem) 0;
-  }
-
-  /* ─── Individual Options ─── */
-
-  .field__option {
-    display: flex;
-    align-items: center;
-    gap: var(--hx-space-2, 0.5rem);
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #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-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: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    outline-offset: -2px;
-  }
-
-  .field__option--focused.field__option--selected {
-    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
-  }
-
-  .field__option--disabled {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .field__option-label {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* ─── No Options / Empty State ─── */
-
-  .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);
-  }
-
-  /* ─── Screen Reader Only ─── */
-
-  .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;
-  }
-
-  /* ─── 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-combobox-error-color, var(--hx-color-error-text, #b91c1c));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  /* ─── Reduced Motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .field__input-wrapper,
-    .field__option {
-      transition: none;
-    }
-  }
-
-  /* ─── Multiple Selection / Chips (P0-1) ─── */
-
-  :host([multiple]) .field__input-wrapper {
-    flex-wrap: wrap;
-    padding: var(--hx-space-1, 0.25rem);
-    gap: var(--hx-space-1, 0.25rem);
-    align-items: center;
-  }
-
-  :host([multiple]) .field__input {
-    min-width: 8rem;
-    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    flex-shrink: 1;
-  }
-
-  .field__chip {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--hx-space-1, 0.25rem);
-    padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
-    height: 1.5rem;
-    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
-    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));
-    border-radius: var(--hx-border-radius-full, 9999px);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    white-space: nowrap;
-    max-width: 12rem;
-    flex-shrink: 0;
-  }
-
-  .field__chip-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 8rem;
-  }
-
-  .field__chip-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0;
-    color: inherit;
-    opacity: 0.7;
-    border-radius: 50%;
-    line-height: 1;
-    transition: opacity var(--hx-transition-fast, 150ms ease);
-  }
-
-  .field__chip-remove:hover {
-    opacity: 1;
-    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
-  }
-
-  .field__chip-remove:focus-visible {
-    outline: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    outline-offset: 1px;
-    opacity: 1;
-  }
-`;
-var k = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
+import { repeat as w } from "lit/directives/repeat.js";
+import { tokenStyles as $ } from "@helixui/tokens/lit";
+const k = v`: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, #2563eb));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, #2563eb)) 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}`;
+var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
   for (var s = o > 1 ? void 0 : o ? I(t, i) : t, d = e.length - 1, p; d >= 0; d--)
     (p = e[d]) && (s = (o ? p(t, i, s) : p(s)) || s);
-  return o && s && k(t, i, s), s;
+  return o && s && O(t, i, s), s;
 };
-let O = 0, r = class extends m {
+let C = 0, r = class extends m {
   constructor() {
-    super(), this._id = `hx-combobox-${++O}`, this._listboxId = `${this._id}-listbox`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, this._liveRegionId = `${this._id}-live`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.multiple = !1, this.clearable = !1, this.loading = !1, this.filterDebounce = 0, this.ariaLabel = null, this.labelNoOptions = "No options found", this.labelRequired = "Please select an option.", this._options = [], this._filterText = "", this._open = !1, this._focusedOptionIndex = -1, this._hasErrorSlot = !1, this._filterAnnouncement = "", this._debounceTimer = null, this._handleOutsideClick = (e) => {
+    super(), this._id = `hx-combobox-${++C}`, this._listboxId = `${this._id}-listbox`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, this._liveRegionId = `${this._id}-live`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.multiple = !1, this.clearable = !1, this.loading = !1, this.filterDebounce = 0, this.ariaLabel = null, this.labelNoOptions = "No options found", this.labelRequired = "Please select an option.", this.labelRemoveOption = (e) => `Remove ${e}`, this._options = [], this._filterText = "", this._open = !1, this._focusedOptionIndex = -1, this._hasErrorSlot = !1, this._filterAnnouncement = "", this._debounceTimer = null, this._handleOutsideClick = (e) => {
       this._open && !e.composedPath().includes(this) && this._closeDropdown();
     }, this._internals = this.attachInternals();
   }
   // ─── Multiple Selection ───
   // P0-1: Derive selected values Set from the comma-separated value property
+  /** @internal */
   get _selectedValuesSet() {
     return !this.multiple || !this.value ? /* @__PURE__ */ new Set() : new Set(this.value.split(",").filter(Boolean));
   }
   // ─── Filtered options ───
+  /** @internal */
   get _filteredOptions() {
     if (!this._filterText) return this._options;
     const e = this._filterText.toLowerCase();
@@ -427,7 +37,7 @@ let O = 0, r = class extends m {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._debounceTimer !== null && clearTimeout(this._debounceTimer);
   }
   updated(e) {
-    e.has("value") && (this._updateFormValue(), this._updateValidity());
+    super.updated(e), e.has("value") && (this._updateFormValue(), this._updateValidity());
   }
   // ─── Form Integration ───
   /** Returns the associated form element, if any. */
@@ -450,9 +60,11 @@ let O = 0, r = class extends m {
   reportValidity() {
     return this._internals.reportValidity();
   }
+  /** @internal */
   _updateFormValue() {
     this._internals.setFormValue(this.value || null);
   }
+  /** @internal */
   _updateValidity() {
     this.required && !this.value ? this._internals.setValidity(
       { valueMissing: !0 },
@@ -474,13 +86,16 @@ let O = 0, r = class extends m {
     this.disabled = e;
   }
   // ─── Option Syncing from Slot ───
+  /** @internal */
   _handleSlotChange() {
     this._readOptions();
   }
+  /** @internal */
   _parseOption(e) {
     var t;
     return { value: e.value, label: ((t = e.textContent) == null ? void 0 : t.trim()) ?? e.value, disabled: e.disabled };
   }
+  /** @internal */
   _readOptions() {
     var i;
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="option"]');
@@ -495,28 +110,34 @@ let O = 0, r = class extends m {
     this._options = t;
   }
   // ─── Slot Change Handlers ───
+  /** @internal */
   _handleErrorSlotChange(e) {
     const t = e.target;
     this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Dropdown Control ───
+  /** @internal */
   _openDropdown() {
     this.disabled || this._open || (this._open = !0, this._focusedOptionIndex = -1, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })));
   }
+  /** @internal */
   _closeDropdown() {
     this._open && (this._open = !1, this._focusedOptionIndex = -1, this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })));
   }
   // ─── Input Handling ───
+  /** @internal */
   _handleInput(e) {
     const t = e.target;
     this._filterText = t.value, this._open || this._openDropdown(), this._focusedOptionIndex = -1, this.filterDebounce > 0 ? (this._debounceTimer !== null && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => {
       this._emitInput(), this._announceFilterResults();
     }, this.filterDebounce)) : (this._emitInput(), this._announceFilterResults());
   }
+  /** @internal */
   _announceFilterResults() {
     const e = this._filteredOptions.length;
     this._filterAnnouncement = e === 0 ? "No matching options" : `${e} ${e === 1 ? "option" : "options"} available`;
   }
+  /** @internal */
   _emitInput() {
     this.dispatchEvent(
       new CustomEvent("hx-input", {
@@ -526,10 +147,12 @@ let O = 0, r = class extends m {
       })
     );
   }
+  /** @internal */
   _handleFocus() {
     this._openDropdown();
   }
   // ─── Keyboard Navigation ───
+  /** @internal */
   _handleKeydown(e) {
     if (this.disabled) return;
     const t = this._filteredOptions, i = t.map((o, s) => ({ o, i: s })).filter(({ o }) => !o.disabled).map(({ i: o }) => o);
@@ -586,6 +209,7 @@ let O = 0, r = class extends m {
   }
   // ─── Selection ───
   // P0-1: Handle both single and multiple selection modes
+  /** @internal */
   _selectOption(e) {
     if (!e.disabled) {
       if (this.multiple) {
@@ -597,15 +221,18 @@ let O = 0, r = class extends m {
     }
   }
   // P0-1: Remove a single value from multi-selection
+  /** @internal */
   _removeValue(e) {
     const t = this._selectedValuesSet;
     t.delete(e), this.value = [...t].join(","), this._dispatchChange();
   }
   // ─── Clear ───
+  /** @internal */
   _handleClear(e) {
     e.stopPropagation(), this.value = "", this._filterText = "", this._input && (this._input.value = "", this._input.focus()), this._internals.setFormValue(null), this._updateValidity(), this.dispatchEvent(new CustomEvent("hx-clear", { bubbles: !0, composed: !0 }));
   }
   // ─── Event Dispatchers ───
+  /** @internal */
   _dispatchChange() {
     this.dispatchEvent(
       new CustomEvent("hx-change", {
@@ -622,41 +249,48 @@ let O = 0, r = class extends m {
     (t = this._input) == null || t.focus(e);
   }
   // ─── Render Helpers ───
+  /** @internal */
   _optionId(e) {
     return `${this._id}-option-${e}`;
   }
+  /** @internal */
   get _displayValue() {
     if (this.multiple || !this.value) return "";
     const e = this._options.find((t) => t.value === this.value);
     return e ? e.label : this.value;
   }
+  /** @internal */
   _renderOptions() {
     const e = this._filteredOptions;
     return e.length === 0 ? h`
         <slot name="empty-label">
           <div class="field__no-options">${this.labelNoOptions}</div>
         </slot>
-      ` : e.map((t, i) => {
-      const o = this.multiple ? this._selectedValuesSet.has(t.value) : t.value === this.value, s = i === this._focusedOptionIndex;
-      return h`
-        <div
-          id=${this._optionId(i)}
-          part="option"
-          role="option"
-          class=${x({
-        field__option: !0,
-        "field__option--selected": o,
-        "field__option--focused": s,
-        "field__option--disabled": t.disabled
-      })}
-          aria-selected=${o ? "true" : "false"}
-          aria-disabled=${t.disabled ? "true" : n}
-          @click=${() => this._selectOption(t)}
-        >
-          <span class="field__option-label">${t.label}</span>
-        </div>
-      `;
-    });
+      ` : w(
+      e,
+      (t) => t.value,
+      (t, i) => {
+        const o = this.multiple ? this._selectedValuesSet.has(t.value) : t.value === this.value, s = i === this._focusedOptionIndex;
+        return h`
+          <div
+            id=${this._optionId(i)}
+            part="option"
+            role="option"
+            class=${_({
+          field__option: !0,
+          "field__option--selected": o,
+          "field__option--focused": s,
+          "field__option--disabled": t.disabled
+        })}
+            aria-selected=${o ? "true" : n}
+            aria-disabled=${t.disabled ? "true" : n}
+            @click=${() => this._selectOption(t)}
+          >
+            <span class="field__option-label">${t.label}</span>
+          </div>
+        `;
+      }
+    );
   }
   // ─── Main Render ───
   render() {
@@ -674,7 +308,7 @@ let O = 0, r = class extends m {
       this.helpText ? this._helpTextId : null
     ].filter(Boolean).join(" ") || void 0, d = this._open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : void 0;
     return h`
-      <div part="field" class=${x(i)}>
+      <div part="field" class=${_(i)}>
         <!-- Label -->
         <slot name="label">
           ${this.label ? h`<label id=${this._labelId} for=${this._id} part="label" class="field__label">
@@ -690,14 +324,14 @@ let O = 0, r = class extends m {
 
           <!-- P0-1: Selected value chips for multiple mode -->
           ${this.multiple && this._selectedValuesSet.size > 0 ? [...this._selectedValuesSet].map((p) => {
-      const b = this._options.find((f) => f.value === p), _ = b ? b.label : p;
+      const b = this._options.find((f) => f.value === p), x = b ? b.label : p;
       return h`
                   <span class="field__chip">
-                    <span class="field__chip-label">${_}</span>
+                    <span class="field__chip-label">${x}</span>
                     <button
                       type="button"
                       class="field__chip-remove"
-                      aria-label="Remove ${_}"
+                      aria-label=${this.labelRemoveOption(x)}
                       @click=${(f) => {
         f.stopPropagation(), this._removeValue(p);
       }}
@@ -727,7 +361,7 @@ let O = 0, r = class extends m {
             part="input"
             type="text"
             id=${this._id}
-            class=${x(o)}
+            class=${_(o)}
             role="combobox"
             aria-expanded=${this._open ? "true" : "false"}
             aria-autocomplete="list"
@@ -763,7 +397,7 @@ let O = 0, r = class extends m {
                   part="clear-button"
                   type="button"
                   class="field__clear-button"
-                  aria-label="Clear"
+                  aria-label=${`Clear ${this.label || this.ariaLabel || "selection"}`}
                   tabindex="0"
                   @click=${this._handleClear}
                 >
@@ -827,7 +461,7 @@ let O = 0, r = class extends m {
     `;
   }
 };
-r.styles = [w, $];
+r.styles = [$, k];
 r.formAssociated = !0;
 l([
   a({ type: String })
@@ -877,6 +511,9 @@ l([
 l([
   a({ type: String, attribute: "label-required" })
 ], r.prototype, "labelRequired", 2);
+l([
+  a({ attribute: !1 })
+], r.prototype, "labelRemoveOption", 2);
 l([
   u()
 ], r.prototype, "_options", 2);
@@ -904,4 +541,4 @@ r = l([
 export {
   r as H
 };
-//# sourceMappingURL=hx-combobox-BBi3izKJ.js.map
+//# sourceMappingURL=hx-combobox-CivfelTS.js.map