@rcarls/rc-select 0.1.0 → 0.3.0

package/dist/{rc-select-BumY2uQl.js → rc-select-Bu4ukw92.js}

@@ -1,7 +1,7 @@
-import { css as v, LitElement as f, nothing as _, html as c } from "lit";
-import { property as n, query as h, state as p } from "lit/decorators.js";
-import { ActiveDescendantController as b, AnchorController as m } from "@rcarls/rc-common";
-const g = v`
+import { css as f, LitElement as b, nothing as _, html as h } from "lit";
+import { property as n, query as p, state as d } from "lit/decorators.js";
+import { NativeChildController as g, ActiveDescendantController as m, AnchorController as y } from "@rcarls/rc-common";
+const x = f`
   :host {
     display: inline-block;
   }
@@ -19,12 +19,15 @@ const g = v`
     flex-wrap: wrap;
     gap: var(--rc-select-gap, var(--rc-control-gap, 0.25em));
     min-block-size: var(--rc-select-control-block-size, var(--rc-control-block-size, auto));
-    padding: var(--rc-select-padding-block, var(--rc-control-padding-block, 0.25em))
-      var(--rc-select-padding-inline, var(--rc-control-padding-inline, 0.5em));
+    padding: var(--rc-select-padding-block, var(--rc-control-padding-block, 1px))
+      var(--rc-select-padding-inline, var(--rc-control-padding-inline, 4px));
     min-width: 8em;
     cursor: default;
     user-select: none;
-    border: var(--rc-select-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border: var(
+      --rc-select-border,
+      var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))
+    );
     border-radius: var(--rc-select-radius, var(--rc-control-radius, var(--rc-radius-sm, 0.125em)));
     background: var(--rc-field, Field);
     color: var(--rc-field-text, FieldText);
@@ -51,9 +54,12 @@ const g = v`
     white-space: nowrap;
   }
 
-  [part='toggle-icon'] {
+  [part='toggle-indicator'] {
     flex-shrink: 0;
-    font-size: 0.75em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--rc-select-toggle-indicator-size, 1.1em);
   }
 
   /* Chips — the whole chip is the remove button for a larger touch target */
@@ -61,9 +67,11 @@ const g = v`
     display: inline-flex;
     align-items: center;
     gap: var(--rc-select-chip-gap, calc(var(--rc-control-gap, 0.25em) * 0.8));
-    padding: var(--rc-select-chip-padding-block, 0.1em)
-      var(--rc-select-chip-padding-inline, 0.3em);
-    border: var(--rc-select-chip-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    padding: var(--rc-select-chip-padding-block, 0.1em) var(--rc-select-chip-padding-inline, 0.3em);
+    border: var(
+      --rc-select-chip-border,
+      var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))
+    );
     border-radius: var(--rc-select-chip-radius, var(--rc-radius-md, 0.25em));
     background: var(--rc-button-bg, ButtonFace);
     color: var(--rc-button-text, ButtonText);
@@ -92,8 +100,8 @@ const g = v`
     pointer-events: none;
   }
 
-  /* Hidden native select slot */
-  slot[name='select'] {
+  /* Hide the default slot — visually suppresses the slotted native <select> */
+  slot:not([name]) {
     display: none;
   }
 
@@ -102,44 +110,44 @@ const g = v`
     max-height: var(--rc-select-max-height, 20em);
     overflow-y: auto;
     background: var(--rc-surface, Canvas);
-    border: var(--rc-select-listbox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border: var(
+      --rc-select-listbox-border,
+      var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))
+    );
     border-radius: var(--rc-select-listbox-radius, var(--rc-control-radius, 0));
-    box-shadow: var(--rc-select-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));
+    box-shadow: var(
+      --rc-select-shadow,
+      var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))
+    );
     color: var(--rc-field-text, FieldText);
     padding-block: var(--rc-select-listbox-padding-block, var(--rc-control-padding-block, 0.25em));
+    --rc-listbox-option-gap: var(--rc-item-gap, 0.4em);
+    --rc-listbox-option-padding-block: var(--rc-item-padding-block, 0.3em);
+    --rc-listbox-option-padding-inline: var(--rc-item-padding-inline, 0.75em);
+    --rc-listbox-hover-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-hover-color: var(--rc-highlight-text, HighlightText);
+    --rc-listbox-active-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-active-color: var(--rc-highlight-text, HighlightText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    --rc-listbox-disabled-opacity: var(--rc-disabled-opacity, 0.5);
 
     &:not(:popover-open) {
       display: none;
     }
   }
 
-  /* Options within the listbox */
-  rc-listbox [part~='option'] {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-item-gap, 0.4em);
-    padding: var(--rc-item-padding-block, 0.3em) var(--rc-item-padding-inline, 0.75em);
-    cursor: default;
-
-    /* display: flex overrides [hidden]'s browser-default display:none — restore it explicitly */
-    &[hidden] { display: none; }
-
-    &:not([hidden]):not([aria-disabled='true']):hover {
-      background: var(--rc-highlight, Highlight);
-      color: var(--rc-highlight-text, HighlightText);
-    }
+  rc-listbox [part~='option'][hidden] {
+    display: none;
+  }
 
-    &[data-active]:not([aria-disabled='true']) {
-      background: var(--rc-highlight, Highlight);
-      color: var(--rc-highlight-text, HighlightText);
-      outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));
-      outline-offset: -2px;
-    }
+  rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {
+    outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));
+    outline-offset: -2px;
+  }
 
-    &[aria-disabled='true'] {
-      opacity: var(--rc-disabled-opacity, 0.5);
-      cursor: not-allowed;
-    }
+  rc-listbox [part~='option'][aria-disabled='true'] {
+    cursor: not-allowed;
   }
 
   /* Selection checkmark — reserves space whether visible or not */
@@ -162,17 +170,23 @@ const g = v`
     padding-top: 0.3em;
   }
 `;
-var y = Object.defineProperty, a = (u, e, t, i) => {
-  for (var s = void 0, r = u.length - 1, l; r >= 0; r--)
-    (l = u[r]) && (s = l(e, t, s) || s);
-  return s && y(e, t, s), s;
+var k = Object.defineProperty, a = (v, e, t, i) => {
+  for (var s = void 0, r = v.length - 1, l; r >= 0; r--)
+    (l = v[r]) && (s = l(e, t, s) || s);
+  return s && k(e, t, s), s;
 };
-const d = class d extends f {
+const u = class u extends b {
   constructor() {
-    super(...arguments), this.open = !1, this.multiple = !1, this.disabled = !1, this.placeholder = "", this.display = "auto", this._selectedValues = /* @__PURE__ */ new Set(), this._chipNavIndex = -1, this._options = [], this._selectRef = null, this._mutationObserver = null, this._selectionInitialized = !1, this._typeAheadBuffer = "", this._typeAheadTimer = 0, this._adc = new b(this, {
+    super(...arguments), this.open = !1, this.multiple = !1, this.disabled = !1, this.placeholder = "", this.display = "auto", this._selectedValues = /* @__PURE__ */ new Set(), this._chipNavIndex = -1, this._options = [], this._selectRef = null, this._selectController = new g(this, {
+      selector: ":scope > select",
+      observe: !0,
+      onChange: (e) => this._setupSelect(e),
+      onMissing: () => {
+      }
+    }), this._mutationObserver = null, this._selectionInitialized = !1, this._typeAheadBuffer = "", this._typeAheadTimer = 0, this._activeDescendantCtrl = new m(this, {
       host: () => this._$trigger ?? null,
       items: () => this._$listbox?.navigableItems ?? []
-    }), this._anchorCtrl = new m(this, {
+    }), this._anchorCtrl = new y(this, {
       anchor: () => this._$anchor ?? null,
       floating: () => this._$listbox ?? null,
       shadowHost: () => this,
@@ -192,16 +206,20 @@ const d = class d extends f {
       capture: !0
     }), this._mutationObserver?.disconnect();
   }
-  // ── Popup ────────────────────────────────────────────────────────────────────
+  updated(e) {
+    super.updated(e), this.toggleAttribute("has-value", this._selectedValues.size > 0);
+  }
+  /** Opens the popup listbox if not already open or disabled. */
   openPopup() {
-    this.open || this.disabled || (this.open = !0, this._$listbox.showPopover(), this._anchorCtrl.update(), this.dispatchEvent(
-      new CustomEvent("rc-select-open", { bubbles: !0, composed: !0 })
-    ), this.requestUpdate());
+    this.open || this.disabled || (this.open = !0, this._$listbox.showPopover(), this._anchorCtrl.update(), this.dispatchEvent(new CustomEvent("rc-select-open", { bubbles: !0, composed: !0 })), this.requestUpdate());
   }
+  /**
+   * Closes the popup listbox.
+   *
+   * @param returnFocus - When `true` (default), returns focus to the trigger.
+   */
   closePopup(e = !0) {
-    this.open && (this.open = !1, this._$listbox.hidePopover(), this._adc.clear(), e && this._$trigger?.focus(), this.dispatchEvent(
-      new CustomEvent("rc-select-close", { bubbles: !0, composed: !0 })
-    ));
+    this.open && (this.open = !1, this._$listbox.hidePopover(), this._activeDescendantCtrl.clear(), e && this._$trigger?.focus(), this.dispatchEvent(new CustomEvent("rc-select-close", { bubbles: !0, composed: !0 })));
   }
   /**
    * Current selection. Host writes update selection silently; user interaction
@@ -238,35 +256,49 @@ const d = class d extends f {
   get selectedValues() {
     return [...this._selectedValues];
   }
+  /** `ListboxOption` objects for the current selection; falls back to label-only stubs for unknown values. */
   get selectedOptions() {
     return this._selectedOptionsFor(this.selectedValues);
   }
+  /**
+   * Applies an already-normalized array of values as the current selection.
+   *
+   * In single-select mode only the first value is kept. Syncs `_$listbox` and the
+   * native `<select>` but does NOT dispatch `rc-select-change`.
+   */
   _applySelection(e) {
     const t = this.multiple ? e : e.slice(0, 1);
     this._selectedValues = new Set(t), this._$listbox?.setSelectedValues(t), this._syncNativeSelect(), this.requestUpdate();
   }
-  // ── Slot: native <select> ────────────────────────────────────────────────────
-  _handleSelectSlotChange(e) {
-    const i = e.target.assignedElements().find(
-      (s) => s instanceof HTMLSelectElement
-    ) ?? null;
-    this._mutationObserver?.disconnect(), this._mutationObserver = null, this._selectRef = i ? new WeakRef(i) : null, i && queueMicrotask(() => {
-      i.isConnected && (this.multiple = i.multiple, this.disabled = i.disabled, this._syncOptionsFromSelect(i), this._mutationObserver = new MutationObserver(() => {
-        const s = this._selectRef?.deref();
-        if (s) {
-          if (this.multiple = s.multiple, this.disabled = s.disabled, this._propertyOptions !== void 0) {
+  /**
+   * Resolves the slotted `<select>` on every `slotchange`, wires `_mutationObserver`,
+   * and seeds initial state via `queueMicrotask` to stay safe inside framework reactive passes.
+   */
+  _handleSelectSlotChange() {
+    this._selectController.sync();
+  }
+  _setupSelect(e) {
+    this._mutationObserver?.disconnect(), this._mutationObserver = null, this._selectRef = e ? new WeakRef(e) : null, e && queueMicrotask(() => {
+      e.isConnected && (this.multiple = e.multiple, this.disabled = e.disabled, this._syncOptionsFromSelect(e), this._mutationObserver = new MutationObserver(() => {
+        const t = this._selectRef?.deref();
+        if (t) {
+          if (this.multiple = t.multiple, this.disabled = t.disabled, this._propertyOptions !== void 0) {
             this._applySelectionFromCurrentSource();
             return;
           }
-          this._syncOptionsFromSelect(s);
+          this._syncOptionsFromSelect(t);
         }
-      }), this._mutationObserver.observe(i, {
+      }), this._mutationObserver.observe(e, {
         childList: !0,
         subtree: !0,
         attributes: !0
-      }), this._syncAccessibleName(i));
+      }), this._syncAccessibleName(e));
     });
   }
+  /**
+   * Derives options from `$select` (or defers to `_propertyOptions` when set)
+   * and re-applies selection from the current authoritative source.
+   */
   _syncOptionsFromSelect(e) {
     if (this._propertyOptions !== void 0) {
       this._syncOptions(this._propertyOptions), this._mirrorOptionsToNativeSelect(), this._applySelectionFromCurrentSource();
@@ -275,6 +307,10 @@ const d = class d extends f {
     const t = this._optionsFromSelect(e);
     this._syncOptions(t), this._applySelectionFromCurrentSource(), this._syncAccessibleName(e);
   }
+  /**
+   * Picks the correct selection source in priority order:
+   * controlled `_value` → `_defaultValue` → native `<select>` default/current state.
+   */
   _applySelectionFromCurrentSource() {
     if (this._value !== void 0) {
       this._applySelection(this._normalizeValue(this._value));
@@ -287,14 +323,22 @@ const d = class d extends f {
     const e = this._selectionInitialized ? this._selectedValuesFromNativeSelect() : this._defaultSelectedValuesFromNativeSelect();
     this._selectionInitialized = !0, this._applySelection(e);
   }
+  /** Writes `_options` and pushes the list to `_$listbox` when it is mounted. */
   _syncOptions(e) {
     this._options = [...e], this._$listbox && (this._$listbox.options = this._options);
   }
+  /** Returns `_propertyOptions` when set; otherwise reads live from the slotted `<select>`. */
   _currentOptions() {
-    if (this._propertyOptions !== void 0) return this._propertyOptions;
+    if (this._propertyOptions !== void 0)
+      return this._propertyOptions;
     const e = this._selectRef?.deref();
     return e ? this._optionsFromSelect(e) : [];
   }
+  /**
+   * Maps non-empty native `<option>` nodes to `ListboxOption` objects.
+   *
+   * Options with empty `value` are skipped (placeholder guard).
+   */
   _optionsFromSelect(e) {
     const t = [];
     for (const i of e.options)
@@ -305,14 +349,22 @@ const d = class d extends f {
       });
     return t;
   }
+  /** Returns values of currently selected `<option>` nodes; falls back to `selectedValues` when no native select is present. */
   _selectedValuesFromNativeSelect() {
     const e = this._selectRef?.deref();
     return e ? Array.from(e.selectedOptions).map((t) => t.value).filter(Boolean) : this.selectedValues;
   }
+  /** Returns values of `defaultSelected` `<option>` nodes (author `selected` attribute); falls back to `selectedValues`. */
   _defaultSelectedValuesFromNativeSelect() {
     const e = this._selectRef?.deref();
     return e ? Array.from(e.options).filter((t) => t.defaultSelected).map((t) => t.value).filter(Boolean) : this.selectedValues;
   }
+  /**
+   * Rebuilds native `<select>` options from `_propertyOptions`.
+   *
+   * Only runs when `_propertyOptions` is set; pauses then resumes `_mutationObserver`
+   * while writing to avoid re-entrant sync.
+   */
   _mirrorOptionsToNativeSelect() {
     const e = this._selectRef?.deref();
     if (!(!e || this._propertyOptions === void 0)) {
@@ -328,44 +380,69 @@ const d = class d extends f {
       });
     }
   }
+  /**
+   * Upserts a single option into `_options` (and `_propertyOptions` when set)
+   * and adds the corresponding `<option>` to the native `<select>` if absent.
+   */
   _addOption(e) {
     const t = this._options.some((r) => r.value === e.value) ? this._options.map((r) => r.value === e.value ? e : r) : [...this._options, e];
     this._propertyOptions !== void 0 && (this._propertyOptions = t), this._syncOptions(t);
     const i = this._selectRef?.deref();
-    if (!i || Array.from(i.options).some((r) => r.value === e.value)) return;
+    if (!i || Array.from(i.options).some((r) => r.value === e.value))
+      return;
     const s = document.createElement("option");
     s.value = e.value, s.text = e.label, s.disabled = e.disabled ?? !1, s.selected = this._selectedValues.has(e.value), i.add(s);
   }
+  /** Coerces `RCSelectValue` (string or string[]) to `string[]`; returns `[]` for empty-string singles. */
   _normalizeValue(e) {
     return Array.isArray(e) ? e : e ? [e] : [];
   }
+  /**
+   * Copies `aria-label` or first-label text from the native `<select>` to `_$trigger`.
+   *
+   * No-op when the trigger already has an explicit `aria-label`.
+   */
   _syncAccessibleName(e) {
-    if (!this._$trigger || this._$trigger.hasAttribute("aria-label")) return;
+    if (!this._$trigger || this._$trigger.hasAttribute("aria-label"))
+      return;
     const t = e.getAttribute("aria-label") ?? e.labels?.[0]?.textContent?.trim() ?? null;
     t ? this._$trigger.setAttribute("aria-label", t) : this._$trigger.removeAttribute("aria-label");
   }
-  // ── Selection ────────────────────────────────────────────────────────────────
+  /**
+   * Handles `rc-listbox-change` from the popup.
+   *
+   * Stops propagation, mutates `_selectedValues`, syncs state, and fires
+   * `rc-select-change`.
+   */
   _handleListboxChange(e) {
-    const { optionValue: t, value: i, selected: s } = e.detail, r = t ?? (Array.isArray(i) ? i.at(-1) : i);
-    if (r) {
+    const t = e.detail;
+    if (t.reason === "action") {
+      e.stopPropagation();
+      return;
+    }
+    const { optionValue: i, value: s, selected: r } = t, l = i ?? (Array.isArray(s) ? s.at(-1) : s);
+    if (l) {
       if (e.stopPropagation(), this.multiple) {
-        const l = new Set(this._selectedValues);
-        s ? l.add(r) : l.delete(r), this._selectedValues = l;
+        const c = new Set(this._selectedValues);
+        r ? c.add(l) : c.delete(l), this._selectedValues = c;
       } else
-        this._selectedValues = s ? /* @__PURE__ */ new Set([r]) : /* @__PURE__ */ new Set(), s && this.closePopup();
+        this._selectedValues = r ? /* @__PURE__ */ new Set([l]) : /* @__PURE__ */ new Set(), r && this.closePopup();
       this._selectionInitialized = !0, this._syncNativeSelect(), this._$listbox.setSelectedValues(this.selectedValues), this._dispatchChange();
     }
   }
+  /** Removes a single value from `_selectedValues`, syncs the listbox and native select, and dispatches `rc-select-change`. */
   _removeValue(e) {
     const t = new Set(this._selectedValues);
     t.delete(e), this._selectedValues = t, this._$listbox.setSelectedValues([...t]), this._selectionInitialized = !0, this._syncNativeSelect(), this._dispatchChange();
   }
+  /** Flips `selected` on each `<option>` in the native `<select>` to match `_selectedValues`; no-op when no native select is present. */
   _syncNativeSelect() {
     const e = this._selectRef?.deref();
     if (e)
       for (const t of e.options)
         t.selected = this._selectedValues.has(t.value);
   }
+  /** Constructs and dispatches `rc-select-change` with current `value`, `selectedValues`, and `selectedOptions`. */
   _dispatchChange() {
     this.dispatchEvent(
       new CustomEvent("rc-select-change", {
@@ -379,26 +456,33 @@ const d = class d extends f {
       })
     );
   }
+  /** Maps value strings to `ListboxOption` objects from `_options`; creates label-only fallback stubs for unknown values. */
   _selectedOptionsFor(e) {
-    return e.map((t) => this._options.find((i) => i.value === t) ?? {
+    return e.map((t) => this._options.find(
+      (i) => i.kind !== "action" && i.value === t
+    ) ?? {
       value: t,
       label: t
     });
   }
-  // ── Display helpers ──────────────────────────────────────────────────────────
+  /** Resolved display mode after `auto` pointer-detection: `'chips'` on fine-pointer devices, `'compact'` on coarse. */
   get _effectiveDisplay() {
     return this.display === "chips" ? "chips" : this.display === "compact" || window.matchMedia("(pointer: coarse)").matches ? "compact" : "chips";
   }
+  /** Looks up the display label for `value` from native `<select>` option text; returns `value` itself as a fallback. */
   _labelFor(e) {
     const t = this._selectRef?.deref();
     if (t) {
       for (const i of t.options)
-        if (i.value === e) return i.text;
+        if (i.value === e)
+          return i.text;
     }
     return e;
   }
+  /** Text shown in the trigger's value-display area; returns placeholder when chips are active or nothing is selected. */
   get _displayLabel() {
-    if (this._selectedValues.size === 0) return this.placeholder;
+    if (this._selectedValues.size === 0)
+      return this.placeholder;
     if (this._effectiveDisplay === "chips" && this.multiple)
       return this.placeholder;
     if (this._selectedValues.size === 1)
@@ -406,24 +490,29 @@ const d = class d extends f {
     const e = [...this._selectedValues];
     return `${this._labelFor(e[0])}, +${e.length - 1} more`;
   }
-  // ── Keyboard: trigger ────────────────────────────────────────────────────────
+  /**
+   * APG Combobox keyboard handler on the trigger.
+   *
+   * Arrow keys navigate/open, Space/Enter activate, Tab closes without focus return,
+   * ArrowLeft enters chip navigation, and printable chars forward to type-ahead.
+   */
   _handleTriggerKeyDown(e) {
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), this.open ? this._adc.navigate(1) : (this.openPopup(), this._adc.navigateToFirst());
+        e.preventDefault(), this.open ? this._activeDescendantCtrl.navigate(1) : (this.openPopup(), this._activeDescendantCtrl.navigateToFirst());
         break;
       case "ArrowUp":
-        e.preventDefault(), this.open ? this._adc.navigate(-1) : (this.openPopup(), this._adc.navigateToLast());
+        e.preventDefault(), this.open ? this._activeDescendantCtrl.navigate(-1) : (this.openPopup(), this._activeDescendantCtrl.navigateToLast());
         break;
       case "Home":
-        this.open && (e.preventDefault(), this._adc.navigateToFirst());
+        this.open && (e.preventDefault(), this._activeDescendantCtrl.navigateToFirst());
         break;
       case "End":
-        this.open && (e.preventDefault(), this._adc.navigateToLast());
+        this.open && (e.preventDefault(), this._activeDescendantCtrl.navigateToLast());
         break;
       case " ":
       case "Enter":
-        e.preventDefault(), this.open ? this._activateActive() : (this.openPopup(), this._adc.navigateToFirst());
+        e.preventDefault(), this.open ? this._activateActive() : (this.openPopup(), this._activeDescendantCtrl.navigateToFirst());
         break;
       case "Tab":
         this.open && this.closePopup(!1);
@@ -435,13 +524,20 @@ const d = class d extends f {
         e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && this._handleTypeAhead(e.key);
     }
   }
+  /**
+   * Dispatches a synthetic `pointerdown` on the active listbox item to activate it.
+   *
+   * Prefers `pointerdown` over a direct call so listbox item click logic
+   * (which is bound to `pointerdown`) fires through its normal path.
+   */
   _activateActive() {
-    const e = this._adc.activeItem;
-    e && e.dispatchEvent(
-      new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 })
-    );
+    const e = this._activeDescendantCtrl.activeItem;
+    e && e.dispatchEvent(new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 }));
   }
-  // ── Type-ahead ───────────────────────────────────────────────────────────────
+  /**
+   * Accumulates characters in `_typeAheadBuffer` and either immediately selects
+   * the first match (closed single-select) or moves the virtual cursor (open popup).
+   */
   _handleTypeAhead(e) {
     clearTimeout(this._typeAheadTimer), this._typeAheadBuffer += e.toLowerCase(), this._typeAheadTimer = window.setTimeout(() => {
       this._typeAheadBuffer = "";
@@ -453,26 +549,28 @@ const d = class d extends f {
       if (!this.open)
         this.multiple || (this._selectionInitialized = !0, this._applySelection([i.value]), this._dispatchChange());
       else {
-        const r = this._$listbox.navigableItems.find(
-          (l) => l.getAttribute("data-value") === i.value
-        );
-        r && this._adc.navigateToItem(r);
+        const r = this._$listbox.navigableItems.find((l) => l.getAttribute("data-value") === i.value);
+        r && this._activeDescendantCtrl.navigateToItem(r);
       }
   }
-  // ── Chip keyboard navigation ─────────────────────────────────────────────────
+  /** Focuses the last chip button and sets `_chipNavIndex` to begin roving-tabindex navigation within the chip group. */
   _enterChipNav() {
-    const e = this._getChipButtons();
+    const e = this._$chipButtons();
     e.length !== 0 && (this._chipNavIndex = e.length - 1, e[this._chipNavIndex].focus());
   }
-  _getChipButtons() {
-    return Array.from(
-      this.renderRoot.querySelectorAll(
-        'button[part~="chip"]'
-      )
-    );
+  /** Queries all `button[part~="chip"]` elements in `renderRoot`; order matches DOM order. */
+  _$chipButtons() {
+    return Array.from(this.renderRoot.querySelectorAll('button[part~="chip"]'));
   }
+  /**
+   * Keyboard handler for chip buttons.
+   *
+   * ArrowLeft/Right rove chip focus, Escape returns to trigger,
+   * Delete/Backspace/Enter/Space remove the chip's value
+   * and return focus to the trigger.
+   */
   _handleChipKeyDown(e, t) {
-    const i = this._getChipButtons();
+    const i = this._$chipButtons();
     switch (e.key) {
       case "ArrowLeft":
         e.preventDefault(), this._chipNavIndex > 0 && (this._chipNavIndex--, i[this._chipNavIndex]?.focus());
@@ -491,14 +589,13 @@ const d = class d extends f {
         break;
     }
   }
-  // ── Trigger click ────────────────────────────────────────────────────────────
+  /** Toggles the popup open or closed on trigger click. */
   _handleTriggerClick() {
     this.open ? this.closePopup() : this.openPopup();
   }
-  // ── Render ───────────────────────────────────────────────────────────────────
   render() {
     const e = this.multiple && this._effectiveDisplay === "chips" && this._selectedValues.size > 0;
-    return c`
+    return h`
       <div id="anchor" part="anchor">
         <div
           id="trigger"
@@ -514,9 +611,24 @@ const d = class d extends f {
           @keydown=${this._handleTriggerKeyDown}
         >
           ${e ? this._renderChips() : _}
+
           <span part="value-display">${this._displayLabel}</span>
-          <span part="toggle-icon" aria-hidden="true">
-            <slot name="toggle-icon">&#9660;</slot>
+
+          <span part="toggle-indicator" aria-hidden="true">
+            <slot name="toggle-indicator">
+              <svg
+                width="10"
+                height="6"
+                viewBox="0 0 10 6"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="1,1 5,5 9,1" />
+              </svg>
+            </slot>
           </span>
         </div>
       </div>
@@ -530,15 +642,16 @@ const d = class d extends f {
         @rc-listbox-change=${this._handleListboxChange}
       ></rc-listbox>
 
-      <slot name="select" @slotchange=${this._handleSelectSlotChange}></slot>
+      <slot @slotchange=${this._handleSelectSlotChange}></slot>
     `;
   }
+  /** Renders the chip group `<span>` with one `<button>` per selected value for multi-select chip display mode. */
   _renderChips() {
-    return c`
+    return h`
       <span part="chips" role="group" aria-label="Selected items">
         ${[...this._selectedValues].map((e) => {
       const t = this._labelFor(e);
-      return c`
+      return h`
             <button
               type="button"
               part="chip"
@@ -559,8 +672,8 @@ const d = class d extends f {
     `;
   }
 };
-d.styles = g;
-let o = d;
+u.styles = x;
+let o = u;
 a([
   n({ type: Boolean, reflect: !0 })
 ], o.prototype, "open");
@@ -577,24 +690,24 @@ a([
   n()
 ], o.prototype, "display");
 a([
-  h("#anchor")
+  p("#anchor")
 ], o.prototype, "_$anchor");
 a([
-  h("#trigger")
+  p("#trigger")
 ], o.prototype, "_$trigger");
 a([
-  h("#listbox")
+  p("#listbox")
 ], o.prototype, "_$listbox");
 a([
-  p()
+  d()
 ], o.prototype, "_selectedValues");
 a([
-  p()
+  d()
 ], o.prototype, "_chipNavIndex");
 a([
-  p()
+  d()
 ], o.prototype, "_options");
 export {
   o as R
 };
-//# sourceMappingURL=rc-select-BumY2uQl.js.map
+//# sourceMappingURL=rc-select-Bu4ukw92.js.map