@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/{hx-select-C50lD7NS.js → hx-select-4-nHL0vd.js}

@@ -1,10 +1,12 @@
-import { css as b, LitElement as m, html as h, nothing as n } from "lit";
-import { property as d, state as v, query as _, customElement as y } from "lit/decorators.js";
+import { css as g, html as h, nothing as n } from "lit";
+import { property as d, state as _, query as x, customElement as m } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
-import { tokenStyles as w } from "@helixui/tokens/lit";
-import { d as $ } from "./dev-warn-YlwPHjtX.js";
-const I = b`
+import { repeat as y } from "lit/directives/repeat.js";
+import { tokenStyles as $ } from "@helixui/tokens/lit";
+import { d as I } from "./dev-warn-YlwPHjtX.js";
+import { H as w, c as O } from "./id-counter-JhvVCnjh.js";
+const k = g`
   :host {
     display: block;
   }
@@ -18,8 +20,6 @@ const I = b`
     box-sizing: border-box;
   }
 
-  /* ─── Field Container ─── */
-
   .field {
     display: flex;
     flex-direction: column;
@@ -28,8 +28,6 @@ const I = b`
     position: relative;
   }
 
-  /* ─── Label ─── */
-
   .field__label {
     display: flex;
     align-items: baseline;
@@ -45,21 +43,18 @@ const I = b`
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
-  /* ─── Select Wrapper ─── */
-
   .field__select-wrapper {
     position: relative;
     display: block;
   }
 
-  /* ─── Trigger Button ─── */
-
   .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));
@@ -70,65 +65,47 @@ const I = b`
     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: left;
+    text-align: start;
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     outline: none;
   }
 
-  /* Fallback focus ring for environments where :focus-visible is unavailable */
-  .field__trigger:focus {
-    border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-  }
-
-  /* Enhanced focus ring with opacity via color-mix when :focus-visible is available */
+  .field__trigger:focus,
   .field__trigger:focus-visible {
-    border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    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)
-      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-  }
-
-  @supports (color: color-mix(in srgb, red 50%, blue)) {
-    .field__trigger:focus-visible {
-      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, #2563eb))
-            calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-          transparent
-        );
-    }
+      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;
   }
 
-  /* ─── Trigger size variants ─── */
-
   .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--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__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);
   }
 
-  /* ─── Trigger value ─── */
-
   .field__trigger-value {
     flex: 1;
     min-width: 0;
@@ -141,8 +118,6 @@ const I = b`
     color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
   }
 
-  /* ─── Chevron (CSS-drawn) ─── */
-
   .field__chevron {
     flex-shrink: 0;
     width: 12px;
@@ -160,7 +135,7 @@ const I = b`
     left: 2px;
     width: 7px;
     height: 7px;
-    border-right: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
     border-bottom: 1.5px solid currentColor;
     transform: rotate(45deg);
   }
@@ -169,50 +144,28 @@ const I = b`
     transform: rotate(180deg);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .field__chevron {
-      transition: none;
-    }
-  }
-
-  /* ─── Error State (trigger) ─── */
-
   .field--error .field__trigger {
     border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
   }
 
-  .field--error .field__trigger:focus {
-    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      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)
-      var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
-  }
-
-  @supports (color: color-mix(in srgb, red 50%, blue)) {
-    .field--error .field__trigger:focus-visible {
-      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
-        );
-    }
+      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
+      );
   }
 
-  /* ─── 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);
+    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));
@@ -231,16 +184,12 @@ const I = b`
     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;
@@ -287,8 +236,6 @@ const I = b`
     text-overflow: ellipsis;
   }
 
-  /* ─── No Options State ─── */
-
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
@@ -296,8 +243,6 @@ const I = b`
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
-  /* ─── Hidden native select (form participation + test compat) ─── */
-
   .field__select {
     position: absolute;
     width: 1px;
@@ -308,58 +253,42 @@ const I = b`
     clip: rect(0, 0, 0, 0);
   }
 
-  /* ─── Size Variants (mirrored on native select for test compat) ─── */
-
-  .field__select--sm {
-    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
-    font-size: var(--hx-font-size-sm, 0.875rem);
-  }
-
-  .field__select--md {
-    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
-    font-size: var(--hx-font-size-md, 1rem);
-  }
-
-  .field__select--lg {
-    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));
-    font-size: var(--hx-font-size-lg, 1.125rem);
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
   }
 
-  /* ─── 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-select-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__trigger,
+    .field__chevron,
     .field__option {
       transition: none;
     }
   }
 `;
-var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? z(t, a) : t, s = e.length - 1, f; s >= 0; s--)
-    (f = e[s]) && (i = (r ? f(t, a, i) : f(i)) || i);
-  return r && i && O(t, a, i), i;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? S(t, a) : t, l = e.length - 1, f; l >= 0; l--)
+    (f = e[l]) && (r = (i ? f(t, a, r) : f(r)) || r);
+  return i && r && C(t, a, r), r;
 };
-let k = 0, o = class extends m {
+const z = O("hx-select");
+let o = class extends w {
   constructor() {
-    super(), this._selectId = `hx-select-${++k}`, this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
+    super(...arguments), this._selectId = z(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
       this.open && !e.composedPath().includes(this) && (this.open = !1);
-    }, this._internals = this.attachInternals();
+    };
   }
   // ─── Computed helpers ───
+  /** @internal */
   get _displayValue() {
     if (!this.value) return "";
     const e = this._options.find((t) => t.value === this.value);
@@ -367,15 +296,15 @@ let k = 0, o = class extends m {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+    super.connectedCallback();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this.open && (this.open = !1, this._focusedOptionIndex = -1);
   }
   updated(e) {
-    if (e.has("value") && (this._syncNativeSelect(), this._updateFormValue(), this._updateValidity()), e.has("size")) {
+    if (e.has("open") && (this.open ? document.addEventListener("click", this._handleOutsideClick) : document.removeEventListener("click", this._handleOutsideClick)), e.has("value") && (this._syncNativeSelect(), this._updateFormValue(), this._updateValidity()), e.has("size")) {
       const t = ["sm", "md", "lg"];
-      t.includes(this.size) || $(
+      t.includes(this.size) || I(
         "hx-select",
         `Invalid size "${this.size}". Expected one of: ${t.join(", ")}.`
       );
@@ -402,33 +331,35 @@ let k = 0, o = 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 },
-      this.error || "Please select an option.",
+      this.error || this.labelRequired,
       this._trigger ?? this._select
     ) : this._internals.setValidity({});
   }
-  /** Called by the browser when the owning form resets. */
-  formResetCallback() {
+  // ─── Form Lifecycle Hooks ───
+  _onFormReset() {
     this.value = "", this._internals.setFormValue(null);
   }
-  /** Called when the browser restores form state (e.g., bfcache navigation). */
-  formStateRestoreCallback(e, t) {
+  _onFormStateRestore(e, t) {
     typeof e == "string" && (this.value = e);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
-  formDisabledCallback(e) {
+  _onFormDisabled(e) {
     this.disabled = e;
   }
   // ─── Native Select Sync ───
+  /** @internal */
   _syncNativeSelect() {
     this._select && this.value && (this._select.value = this.value);
   }
   // ─── Option Syncing from Slot ───
+  /** @internal */
   _parseOption(e) {
     var t;
     return { value: e.value, label: ((t = e.textContent) == null ? void 0 : t.trim()) ?? e.value, disabled: e.disabled };
@@ -438,31 +369,34 @@ let k = 0, o = class extends m {
    * listbox AND clones them into the native <select> for form participation.
    * Handles both top-level <option> and <optgroup> children.
    */
+  /** @internal */
   _handleSlotChange() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     if (!e) return;
     const t = [];
-    this._select && this._select.querySelectorAll("option[data-cloned]").forEach((i) => i.remove());
-    const a = (i) => {
+    this._select && this._select.querySelectorAll("option[data-cloned]").forEach((r) => r.remove());
+    const a = (r) => {
       if (!this._select) return;
-      const s = i.cloneNode(!0);
-      s.setAttribute("data-cloned", ""), this._select.appendChild(s);
+      const l = r.cloneNode(!0);
+      l.setAttribute("data-cloned", ""), this._select.appendChild(l);
     };
-    for (const i of e.assignedElements({ flatten: !0 }))
-      if (i instanceof HTMLOptionElement)
-        t.push(this._parseOption(i)), a(i);
-      else if (i instanceof HTMLOptGroupElement)
-        for (const s of Array.from(i.children))
-          s instanceof HTMLOptionElement && (t.push(this._parseOption(s)), a(s));
-    this._options = t, this._select && (this.value ? this._select.value = this.value : !this.placeholder && t.length > 0 && (this.value = this._select.value, this._updateFormValue()));
+    for (const r of e.assignedElements({ flatten: !0 }))
+      if (r instanceof HTMLOptionElement)
+        t.push(this._parseOption(r)), a(r);
+      else if (r instanceof HTMLOptGroupElement)
+        for (const l of Array.from(r.children))
+          l instanceof HTMLOptionElement && (t.push(this._parseOption(l)), a(l));
+    this._options = t, t.length, this._select && (this.value ? this._select.value = this.value : !this.placeholder && t.length > 0 && (this.value = this._select.value, this._updateFormValue()));
   }
   // ─── Slot Change Handlers ───
+  /** @internal */
   _handleErrorSlotChange(e) {
     const t = e.target;
     this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Dropdown Control ───
+  /** @internal */
   _toggleDropdown() {
     if (!this.disabled)
       if (this.open = !this.open, this.open) {
@@ -472,29 +406,30 @@ let k = 0, o = class extends m {
         this._focusedOptionIndex = -1;
   }
   // ─── Keyboard Navigation ───
+  /** @internal */
   _handleKeydown(e) {
     var a;
     if (this.disabled) return;
-    const t = this._options.map((r, i) => ({ o: r, i })).filter(({ o: r }) => !r.disabled).map(({ i: r }) => r);
+    const t = this._options.map((i, r) => ({ o: i, i: r })).filter(({ o: i }) => !i.disabled).map(({ i }) => i);
     switch (e.key) {
       case "ArrowDown": {
         if (e.preventDefault(), !this.open) {
           this.open = !0, this._focusedOptionIndex = t.length > 0 ? t[0] ?? 0 : 0;
           break;
         }
-        const r = t.find((i) => i > this._focusedOptionIndex);
-        this._focusedOptionIndex = r !== void 0 ? r : t[0] ?? this._focusedOptionIndex;
+        const i = t.find((r) => r > this._focusedOptionIndex);
+        this._focusedOptionIndex = i !== void 0 ? i : t[0] ?? this._focusedOptionIndex;
         break;
       }
       case "ArrowUp": {
         if (e.preventDefault(), !this.open) {
           this.open = !0;
-          const s = t[t.length - 1];
-          this._focusedOptionIndex = s !== void 0 ? s : 0;
+          const l = t[t.length - 1];
+          this._focusedOptionIndex = l !== void 0 ? l : 0;
           break;
         }
-        const r = [...t].reverse().find((s) => s < this._focusedOptionIndex), i = t[t.length - 1];
-        this._focusedOptionIndex = r !== void 0 ? r : i ?? this._focusedOptionIndex;
+        const i = [...t].reverse().find((l) => l < this._focusedOptionIndex), r = t[t.length - 1];
+        this._focusedOptionIndex = i !== void 0 ? i : r ?? this._focusedOptionIndex;
         break;
       }
       case "Home": {
@@ -503,21 +438,21 @@ let k = 0, o = class extends m {
       }
       case "End": {
         e.preventDefault(), this.open || (this.open = !0);
-        const r = t[t.length - 1];
-        this._focusedOptionIndex = r !== void 0 ? r : 0;
+        const i = t[t.length - 1];
+        this._focusedOptionIndex = i !== void 0 ? i : 0;
         break;
       }
       case "Enter":
       case " ": {
         if (e.preventDefault(), !this.open) {
           this.open = !0;
-          const r = this._options.findIndex((i) => i.value === this.value);
-          this._focusedOptionIndex = r >= 0 ? r : t[0] ?? 0;
+          const i = this._options.findIndex((r) => r.value === this.value);
+          this._focusedOptionIndex = i >= 0 ? i : t[0] ?? 0;
           break;
         }
         if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {
-          const r = this._options[this._focusedOptionIndex];
-          r && this._selectOption(r);
+          const i = this._options[this._focusedOptionIndex];
+          i && this._selectOption(i);
         }
         break;
       }
@@ -531,18 +466,20 @@ let k = 0, o = class extends m {
       }
       default: {
         if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
-          const r = e.key.toLowerCase(), i = this.open ? this._focusedOptionIndex + 1 : 0, s = this._options.map((p, g) => ({ o: p, i: g })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(r)), x = s.find(({ i: p }) => p >= i) ?? s[0];
-          x && (this.open || (this.open = !0), this._focusedOptionIndex = x.i, e.preventDefault());
+          const i = e.key.toLowerCase(), r = this.open ? this._focusedOptionIndex + 1 : 0, l = this._options.map((p, b) => ({ o: p, i: b })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(i)), v = l.find(({ i: p }) => p >= r) ?? l[0];
+          v && (this.open || (this.open = !0), this._focusedOptionIndex = v.i, e.preventDefault());
         }
         break;
       }
     }
   }
   // ─── Selection ───
+  /** @internal */
   _selectOption(e) {
     e.disabled || (this.value = e.value, this._dispatchChange(), this.open = !1, this._focusedOptionIndex = -1);
   }
   // ─── Event Dispatchers ───
+  /** @internal */
   _dispatchChange() {
     this.dispatchEvent(
       new CustomEvent("hx-change", {
@@ -552,6 +489,7 @@ let k = 0, o = class extends m {
       })
     );
   }
+  /** @internal */
   _handleNativeChange(e) {
     this.value = e.target.value, this._dispatchChange();
   }
@@ -562,35 +500,41 @@ let k = 0, o = class extends m {
     (t = this._trigger) == null || t.focus(e);
   }
   // ─── Render Helpers ───
+  /** @internal */
   _optionId(e) {
     return `hx-select-option-${this._selectId}-${e}`;
   }
+  /** @internal */
   _renderOptions() {
-    return this._options.length === 0 ? h`<div class="field__no-options">No options found</div>` : this._options.map((e, t) => {
-      const a = e.value === this.value, r = t === this._focusedOptionIndex;
-      return h`
-        <div
-          id=${this._optionId(t)}
-          part="option"
-          role="option"
-          class=${u({
-        field__option: !0,
-        "field__option--selected": a,
-        "field__option--focused": r,
-        "field__option--disabled": e.disabled
-      })}
-          aria-selected=${a ? "true" : "false"}
-          aria-disabled=${e.disabled ? "true" : n}
-          @click=${() => this._selectOption(e)}
-        >
-          <span class="field__option-label">${e.label}</span>
-        </div>
-      `;
-    });
+    return this._options.length === 0 ? h`<div class="field__no-options">${this.labelNoOptions}</div>` : y(
+      this._options,
+      (e) => e.value,
+      (e, t) => {
+        const a = e.value === this.value, i = t === this._focusedOptionIndex;
+        return h`
+          <div
+            id=${this._optionId(t)}
+            part="option"
+            role="option"
+            class=${u({
+          field__option: !0,
+          "field__option--selected": a,
+          "field__option--focused": i,
+          "field__option--disabled": e.disabled
+        })}
+            aria-selected=${a ? "true" : n}
+            aria-disabled=${e.disabled ? "true" : n}
+            @click=${() => this._selectOption(e)}
+          >
+            <span class="field__option-label">${e.label}</span>
+          </div>
+        `;
+      }
+    );
   }
   // ─── Main Render ───
   render() {
-    const e = !!this.error, t = {
+    const e = !!this.error || this._hasErrorSlot, t = {
       field: !0,
       "field--error": e,
       "field--disabled": this.disabled,
@@ -600,10 +544,10 @@ let k = 0, o = class extends m {
       field__trigger: !0,
       [`field__trigger--${this.size}`]: !0,
       "field__trigger--placeholder": !this.value
-    }, r = {
+    }, i = {
       field__select: !0,
       [`field__select--${this.size}`]: !0
-    }, i = [
+    }, r = [
       e || this._hasErrorSlot ? this._errorId : null,
       this.helpText ? this._helpTextId : null
     ].filter(Boolean).join(" ") || void 0;
@@ -636,7 +580,7 @@ let k = 0, o = class extends m {
             aria-controls=${this._listboxId}
             aria-activedescendant=${this.open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : n}
             aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(i)}
+            aria-describedby=${c(r)}
             aria-required=${this.required ? "true" : n}
             aria-disabled=${this.disabled ? "true" : n}
             aria-labelledby=${c(this.label ? this._labelId : void 0)}
@@ -665,7 +609,7 @@ let k = 0, o = class extends m {
           <!-- Hidden native select (form participation + test compat) -->
           <select
             part="select"
-            class=${u(r)}
+            class=${u(i)}
             tabindex="-1"
             aria-hidden="true"
             ?required=${this.required}
@@ -673,7 +617,7 @@ let k = 0, o = class extends m {
             name=${c(this.name || void 0)}
             aria-label=${c(this.ariaLabel ?? void 0)}
             aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(i)}
+            aria-describedby=${c(r)}
             aria-required=${this.required ? "true" : n}
             @change=${this._handleNativeChange}
           >
@@ -701,60 +645,66 @@ let k = 0, o = class extends m {
     `;
   }
 };
-o.styles = [w, I];
+o.styles = [$, k];
 o.formAssociated = !0;
-l([
+s([
   d({ type: String })
 ], o.prototype, "label", 2);
-l([
+s([
   d({ type: String })
 ], o.prototype, "placeholder", 2);
-l([
+s([
   d({ type: String, reflect: !0 })
 ], o.prototype, "value", 2);
-l([
+s([
   d({ type: Boolean, reflect: !0 })
 ], o.prototype, "required", 2);
-l([
+s([
   d({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-l([
+s([
   d({ type: String })
 ], o.prototype, "name", 2);
-l([
+s([
   d({ type: String })
 ], o.prototype, "error", 2);
-l([
+s([
   d({ type: String, attribute: "help-text" })
 ], o.prototype, "helpText", 2);
-l([
+s([
   d({ type: String, attribute: "hx-size", reflect: !0 })
 ], o.prototype, "size", 2);
-l([
+s([
   d({ type: String, attribute: "aria-label" })
 ], o.prototype, "ariaLabel", 2);
-l([
+s([
   d({ type: Boolean, reflect: !0 })
 ], o.prototype, "open", 2);
-l([
-  v()
+s([
+  d({ attribute: "label-required" })
+], o.prototype, "labelRequired", 2);
+s([
+  d({ attribute: "label-no-options" })
+], o.prototype, "labelNoOptions", 2);
+s([
+  _()
 ], o.prototype, "_options", 2);
-l([
-  v()
+s([
+  _()
 ], o.prototype, "_hasErrorSlot", 2);
-l([
-  v()
+s([
+  _()
 ], o.prototype, "_focusedOptionIndex", 2);
-l([
-  _(".field__select")
+s([
+  x(".field__select")
 ], o.prototype, "_select", 2);
-l([
-  _(".field__trigger")
+s([
+  x(".field__trigger")
 ], o.prototype, "_trigger", 2);
-o = l([
-  y("hx-select")
+o = s([
+  m("hx-select")
 ], o);
 export {
   o as H
 };
-//# sourceMappingURL=hx-select-C50lD7NS.js.map
+//# sourceMappingURL=hx-select-4-nHL0vd.js.map