@rcarls/rc-select 0.0.0-next-20260921045401

package/dist/rc-select-MQcvA385.js

@@ -0,0 +1,1079 @@
+import { css as g, LitElement as f, html as d, nothing as p } from "lit";
+import { property as c, query as u, state as h } from "lit/decorators.js";
+import { NativeChildController as b, ActiveDescendantController as m, AnchorController as y } from "@rcarls/rc-common";
+import "@rcarls/rc-dialog/define";
+const x = g`
+  :host {
+    display: inline-block;
+  }
+
+  #anchor {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--rc-select-gap, var(--rc-control-gap, 0.25em));
+  }
+
+  #trigger {
+    display: flex;
+    align-items: center;
+    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, 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-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);
+    font-family: var(--rc-font-family, inherit);
+    font-size: var(--rc-font-size, inherit);
+    line-height: var(--rc-line-height, normal);
+    transition:
+      background-color var(--rc-motion-duration, 120ms),
+      border-color var(--rc-motion-duration, 120ms),
+      box-shadow var(--rc-motion-duration, 120ms);
+
+    /* Keyboard focus indicator */
+    outline: none;
+    &:focus-visible {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  [part='value-display'] {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part='toggle-indicator'] {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--rc-select-toggle-indicator-size, 1.1em);
+  }
+
+  [part='chips'] {
+    flex: 0 1 auto;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    --rc-chip-group-column-gap: var(--rc-select-gap, var(--rc-control-gap, 0.25em));
+    --rc-chip-group-row-gap: 0;
+  }
+
+  /* Input-chip chrome; rc-chip keeps the native button as the removal action. */
+  [part='chip'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rc-select-chip-gap, calc(var(--rc-control-gap, 0.25em) * 0.8));
+    padding-block: var(--rc-select-chip-padding-block, 0.1em);
+    padding-inline-start: var(--rc-select-chip-padding-inline-start, 0.3em);
+    padding-inline-end: var(
+      --rc-select-chip-padding-inline-end,
+      calc(
+        var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem)
+      )
+    );
+    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);
+    font: inherit;
+    font-size: 0.875em;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--rc-highlight, Highlight);
+      color: var(--rc-highlight-text, HighlightText);
+    }
+
+    &:focus-visible {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  /* Decorative × icon inside the chip — no interaction, aria-hidden. */
+  [part='chip-remove'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    font-size: 0.85em;
+    pointer-events: none;
+  }
+
+  /* Hide the default slot — visually suppresses the slotted native <select> */
+  slot:not([name]) {
+    display: none;
+  }
+
+  /* Listbox popup — positioned by AnchorController via adoptedStyleSheets */
+  rc-listbox {
+    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-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))
+    );
+    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);
+  }
+
+  /*
+   * @media (prefers-reduced-motion: reduce) below restates this plainly for
+   * a reduced-motion user: without any transition on display, it still
+   * changes instantly, exactly like this unconditional rule would.
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    /*
+     * Opacity only, deliberately not a scale/slide transform: AnchorController
+     * (see rc-common) positions this listbox and applies its own
+     * viewport-clamping translate to it, tracked against
+     * getBoundingClientRect() to compute the next correction. A second,
+     * CSS-driven transform on the same element and property would fight
+     * that math on every open.
+     *
+     * display and overlay join the transition list, allow-discrete: without
+     * them, this listbox's own separate display: none on
+     * :not(:popover-open) (still needed, see below) would apply instantly,
+     * and a transition on a property of an element with no box doesn't
+     * render at all — confirmed directly, an earlier opacity-only version
+     * of this rule measured display: none and opacity: 0 only 300ms into
+     * what should have been a 2-second exit fade.
+     */
+    [part='listbox']:popover-open {
+      opacity: 1;
+      transition:
+        opacity var(--rc-select-listbox-duration, 150ms) var(--rc-motion-effects-easing-enter, ease-out),
+        overlay var(--rc-select-listbox-duration, 150ms) allow-discrete,
+        display var(--rc-select-listbox-duration, 150ms) allow-discrete;
+    }
+
+    [part='listbox']:not(:popover-open) {
+      opacity: 0;
+      transition:
+        opacity var(--rc-select-listbox-duration, 150ms) var(--rc-motion-effects-easing-exit, ease-in),
+        overlay var(--rc-select-listbox-duration, 150ms) allow-discrete,
+        display var(--rc-select-listbox-duration, 150ms) allow-discrete;
+    }
+
+    @starting-style {
+      [part='listbox']:popover-open {
+        opacity: 0;
+      }
+    }
+  }
+
+  [part='listbox']:not(:popover-open) {
+    display: none;
+  }
+
+  rc-dialog[variant='fullscreen'] {
+    display: contents;
+  }
+
+  [part~='dialog'] {
+    box-sizing: border-box;
+    background: var(--rc-surface, Canvas);
+    color: var(--rc-field-text, CanvasText);
+    font-family: var(--rc-font-family, inherit);
+
+    &[open] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rc-select-dialog-gap, 1rem);
+    }
+  }
+
+  [part~='dialog-header'] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--rc-select-dialog-header-gap, 0.5rem);
+  }
+
+  [part~='dialog-header'] > [part~='dialog-title']:first-child {
+    grid-column: 1 / 3;
+  }
+
+  [part~='dialog-title'] {
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: inherit;
+  }
+
+  [part~='dialog-cancel'],
+  [part~='dialog-confirm'] {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+  }
+
+  [part~='dialog-cancel'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  [part~='dialog-cancel-icon'] {
+    fill: currentColor;
+  }
+
+  [part~='dialog-selected'] {
+    max-block-size: 30%;
+    overflow: auto;
+  }
+
+  [part~='dialog-listbox'] {
+    flex: 1;
+    min-block-size: 0;
+    max-block-size: none;
+    box-shadow: none;
+  }
+
+  rc-listbox [part~='option'][hidden] {
+    display: none;
+  }
+
+  rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {
+    outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));
+    outline-offset: -2px;
+  }
+
+  rc-listbox [part~='option'][aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  /* Selection checkmark — reserves space whether visible or not */
+  rc-listbox [part~='option-checkmark'] {
+    flex-shrink: 0;
+    width: 1em;
+    text-align: center;
+    font-size: 0.85em;
+    visibility: hidden;
+  }
+
+  rc-listbox [part~='option'][aria-selected='true'] [part~='option-checkmark'] {
+    visibility: visible;
+  }
+
+  rc-listbox [part~='create-option'] {
+    font-style: italic;
+    border-top: 1px solid var(--rc-border-color, ButtonBorder);
+    margin-top: 0.25em;
+    padding-top: 0.3em;
+  }
+`;
+var k = Object.defineProperty, a = (_, e, t, i) => {
+  for (var s = void 0, r = _.length - 1, l; r >= 0; r--)
+    (l = _[r]) && (s = l(e, t, s) || s);
+  return s && k(e, t, s), s;
+};
+const v = class v extends f {
+  constructor() {
+    super(...arguments), this.open = !1, this.multiple = !1, this.disabled = !1, this.required = !1, this.placeholder = "", this.display = "auto", this.popupMode = "popover", this.dialogConfirmLabel = "Done", this.dialogCancelLabel = "Cancel", this.dialogCancelButton = "visible", this._selectedValues = /* @__PURE__ */ new Set(), this._pendingSelectedValues = null, this._accessibleName = "", this._activePopupMode = "popover", this._chipNavIndex = -1, this._options = [], this._$selectRef = null, this._selectController = new b(this, {
+      selector: ":scope > select",
+      observe: !0,
+      onChange: (e) => this._setupSelect(e),
+      onMissing: () => {
+      }
+    }), this._mutationObserver = null, this._selectionInitialized = !1, this._pickerGuardActive = !1, this._pickerGuardConsumerDisabled = !1, this._pickerGuardForm = null, this._typeAheadBuffer = "", this._typeAheadTimer = 0, this._activeDescendantCtrl = new m(this, {
+      host: () => this._$activeDescendantHost,
+      items: () => this._$listbox?.navigableItems ?? []
+    }), this._anchorCtrl = new y(this, {
+      anchor: () => this._$anchor ?? null,
+      floating: () => this._$listbox ?? null,
+      shadowHost: () => this,
+      placement: "bottom-start",
+      offset: 2
+    }), this._onDocClick = (e) => {
+      this.open && (e.composedPath().includes(this) || this.closePopup(!1));
+    }, this._onDocKeyDown = (e) => {
+      this.open && e.key === "Escape" && (e.preventDefault(), this.closePopup());
+    }, this._onNativeSelectClick = (e) => {
+      e.preventDefault();
+    }, this._handleFormData = (e) => {
+      const t = this._$selectRef?.deref();
+      if (!(!this._pickerGuardActive || !t?.name))
+        for (const i of this.selectedValues)
+          e.formData.append(t.name, i);
+    }, this._handleFormSubmit = (e) => {
+      const t = this._$selectRef?.deref();
+      if (!this._pickerGuardActive || !t)
+        return;
+      const i = e.currentTarget, s = e.submitter;
+      if (i.noValidate || s?.formNoValidate || t.validity.valid)
+        return;
+      e.preventDefault(), t.dispatchEvent(new Event("invalid", { cancelable: !0 })) && this._$trigger?.focus();
+    };
+  }
+  /** Element that owns `aria-activedescendant` for the currently rendered popup. */
+  get _$activeDescendantHost() {
+    return this._$trigger ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._onDocClick, { capture: !0 }), document.addEventListener("keydown", this._onDocKeyDown, { capture: !0 });
+    const e = this._$selectRef?.deref();
+    e && this._pickerGuardActive && this._syncFormListeners(e.form);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick, { capture: !0 }), document.removeEventListener("keydown", this._onDocKeyDown, {
+      capture: !0
+    }), this._mutationObserver?.disconnect(), this._syncFormListeners(null);
+  }
+  updated(e) {
+    super.updated(e), this.toggleAttribute("has-value", this._selectedValues.size > 0);
+  }
+  /**
+   * Forwards focus to the trigger. The host itself is never in the tab order, so without this
+   * override, calling `.focus()` on `<rc-select>` (as `rc-field` does when treating it as a
+   * control provider) would be a no-op.
+   */
+  focus(e) {
+    this._$trigger?.focus(e);
+  }
+  /** Forwards blur to the trigger; see `focus()`. */
+  blur() {
+    this._$trigger?.blur();
+  }
+  /** Opens the popup listbox if not already open or disabled. */
+  openPopup() {
+    if (!(this.open || this.disabled)) {
+      if (this._activePopupMode = this.popupMode, this._activePopupMode === "dialog") {
+        this._pendingSelectedValues = new Set(this._selectedValues), this.open = !0, this.requestUpdate(), this.updateComplete.then(async () => {
+          const e = this._$dialogHost;
+          !this.open || this._activePopupMode !== "dialog" || !e || (await e.updateComplete, !(!this.open || this._activePopupMode !== "dialog") && (this._$listbox?.setSelectedValues(this._dialogSelectedValues), e.showModal(), this._focusDialogContent(), this.dispatchEvent(new CustomEvent("rc-select-open", { bubbles: !0, composed: !0 }))));
+        });
+        return;
+      }
+      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) {
+    if (this.open) {
+      if (this._activePopupMode === "dialog") {
+        this._discardDialogSelection(), this._$dialogHost?.close("cancel"), this._finishDialogClose(e);
+        return;
+      }
+      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
+   * emits `rc-select-change`.
+   */
+  get value() {
+    return this.multiple ? this.selectedValues : this.selectedValues[0] ?? "";
+  }
+  set value(e) {
+    const t = this._value;
+    if (this._value = e, e === void 0) {
+      this.requestUpdate("value", t);
+      return;
+    }
+    this._selectionInitialized = !0, this._applySelection(this._normalizeValue(e)), this.requestUpdate("value", t);
+  }
+  /** Initial uncontrolled selection, applied before user or native state owns the value. */
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  set defaultValue(e) {
+    const t = this._defaultValue;
+    this._defaultValue = e, !this._selectionInitialized && this._value === void 0 && e !== void 0 && this._applySelection(this._normalizeValue(e)), this.requestUpdate("defaultValue", t);
+  }
+  /** Programmatic option source. Omit to derive options from the slotted `<select>`. */
+  get options() {
+    return this._propertyOptions ? [...this._propertyOptions] : void 0;
+  }
+  set options(e) {
+    const t = this._propertyOptions;
+    this._propertyOptions = e ? [...e] : void 0, this._syncOptions(this._currentOptions()), this._mirrorOptionsToNativeSelect(), this.requestUpdate("options", t);
+  }
+  /** Selected values as a consistently-array-shaped convenience getter. */
+  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`.
+   *
+   * @param fromUser - Pass `true` only for a selection driven by real user interaction, so
+   *   `_syncNativeSelect` dispatches native `input`/`change` on the underlying `<select>` (a
+   *   programmatic `value`/`defaultValue` write is not a native interaction and relies on an
+   *   external `sync()` call instead, the same as `rc-textarea`'s controlled-value contract).
+   */
+  _applySelection(e, t = !1) {
+    const i = this.multiple ? e : e.slice(0, 1);
+    this._selectedValues = new Set(i), this._$listbox?.setSelectedValues(i), this._syncNativeSelect(t), this.open && this._activePopupMode === "dialog" && this._pendingSelectedValues && (this._pendingSelectedValues = new Set(i)), this.requestUpdate();
+  }
+  /**
+   * Countermeasure for select["multiple"] bug in Firefox for Android / GeckoView.
+   *
+   * Works around a GeckoView bug where tapping anywhere inside an
+   * ancestor `<label>`'s bounds opens the native picker dialog of a wrapped
+   * `<select multiple>`, even though the select is hidden and the tap landed on this
+   * component's own UI.
+   *
+   * Label activation on a disabled control is a spec-defined no-op, so the slotted select
+   * is force-disabled after upgrade while it is `multiple`. A disabled select submits
+   * nothing, so form submission is restored by appending the current selection in a
+   * `formdata` listener on the owning form (`_handleFormData`). A disabled select is also
+   * barred from native constraint validation, so `_handleFormSubmit` enforces its
+   * `ValidityState` at submit time instead.
+   *
+   * Scoped to multiple selects: the single-select picker path is already suppressed by
+   * `_onNativeSelectClick`. Pre-upgrade behavior is unaffected — the guard
+   * only applies once the component initializes.
+   *
+   * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1475723
+   */
+  _applyPickerGuard(e) {
+    e.multiple && !this._pickerGuardActive ? (this._pickerGuardActive = !0, this._pickerGuardConsumerDisabled = e.disabled, e.disabled = !0) : !e.multiple && this._pickerGuardActive ? (this._pickerGuardActive = !1, e.disabled = this._pickerGuardConsumerDisabled) : e.multiple && !e.disabled && (this._pickerGuardConsumerDisabled = !1, this.disabled = !1, e.disabled = !0), this._syncFormListeners(this._pickerGuardActive ? e.form : null);
+  }
+  /** Moves the picker guard's `formdata` and `submit` listeners to `$form`; pass `null` to detach. */
+  _syncFormListeners(e) {
+    e !== this._pickerGuardForm && (this._pickerGuardForm?.removeEventListener("formdata", this._handleFormData), this._pickerGuardForm?.removeEventListener("submit", this._handleFormSubmit, {
+      capture: !0
+    }), this._pickerGuardForm = e, e?.addEventListener("formdata", this._handleFormData), e?.addEventListener("submit", this._handleFormSubmit, { capture: !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;
+    const t = this._$selectRef?.deref();
+    t && (t.removeEventListener("click", this._onNativeSelectClick), this._pickerGuardActive && (t.disabled = this._pickerGuardConsumerDisabled)), this._pickerGuardActive = !1, this._syncFormListeners(null), this._$selectRef = e ? new WeakRef(e) : null, e && (e.addEventListener("click", this._onNativeSelectClick), queueMicrotask(() => {
+      e.isConnected && (this.multiple = e.multiple, this.disabled = e.disabled, this.required = e.required, this._syncOptionsFromSelect(e), this._applyPickerGuard(e), this._mutationObserver = new MutationObserver(() => {
+        const i = this._$selectRef?.deref();
+        if (i) {
+          if (this.multiple = i.multiple, this.required = i.required, this._pickerGuardActive || (this.disabled = i.disabled), this._applyPickerGuard(i), this._propertyOptions !== void 0) {
+            this._applySelectionFromCurrentSource();
+            return;
+          }
+          this._syncOptionsFromSelect(i);
+        }
+      }), this._mutationObserver.observe(e, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0
+      }), 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();
+      return;
+    }
+    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));
+      return;
+    }
+    if (!this._selectionInitialized && this._defaultValue !== void 0) {
+      this._selectionInitialized = !0, this._applySelection(this._normalizeValue(this._defaultValue));
+      return;
+    }
+    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;
+    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)
+      i.value && t.push({
+        value: i.value,
+        label: i.text,
+        disabled: i.disabled
+      });
+    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)) {
+      this._mutationObserver?.disconnect(), e.replaceChildren();
+      for (const t of this._propertyOptions) {
+        const i = document.createElement("option");
+        i.value = t.value, i.text = t.label, i.disabled = t.disabled ?? !1, i.selected = this._selectedValues.has(t.value), e.add(i);
+      }
+      this._mutationObserver?.observe(e, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0
+      });
+    }
+  }
+  /**
+   * 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;
+    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;
+    const t = e.getAttribute("aria-label") ?? e.labels?.[0]?.textContent?.trim() ?? null;
+    this._accessibleName = t ?? "", t ? this._$trigger.setAttribute("aria-label", t) : this._$trigger.removeAttribute("aria-label");
+  }
+  /**
+   * Handles `rc-listbox-change` from the popup.
+   *
+   * Stops propagation, mutates `_selectedValues`, syncs state, and fires
+   * `rc-select-change`.
+   */
+  _handleListboxChange(e) {
+    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.open && this._activePopupMode === "dialog") {
+        const n = new Set(this._pendingSelectedValues ?? this._selectedValues);
+        this.multiple ? r ? n.add(l) : n.delete(l) : (n.clear(), r && n.add(l)), this._pendingSelectedValues = n, this._$listbox.setSelectedValues([...n]), this.requestUpdate();
+        return;
+      }
+      if (this.multiple) {
+        const n = new Set(this._selectedValues);
+        r ? n.add(l) : n.delete(l), this._selectedValues = n;
+      } else
+        this._selectedValues = r ? /* @__PURE__ */ new Set([l]) : /* @__PURE__ */ new Set(), r && this.closePopup();
+      this._selectionInitialized = !0, this._syncNativeSelect(!0), 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(!0), this._dispatchChange();
+  }
+  /**
+   * Flips `selected` on each `<option>` in the native `<select>` to match `_selectedValues`;
+   * no-op when no native select is present.
+   *
+   * @param fromUser - When `true`, also dispatches native `input` and `change` on `$select`
+   *   (in that order, matching a real `<select>`) so outside listeners, including an
+   *   `rc-field` ancestor treating this component as its control provider, observe the change.
+   */
+  _syncNativeSelect(e = !1) {
+    const t = this._$selectRef?.deref();
+    if (t) {
+      for (const i of t.options)
+        i.selected = this._selectedValues.has(i.value);
+      e && (t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
+    }
+  }
+  /** Constructs and dispatches `rc-select-change` with current `value`, `selectedValues`, and `selectedOptions`. */
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("rc-select-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.value,
+          selectedValues: this.selectedValues,
+          selectedOptions: this.selectedOptions
+        }
+      })
+    );
+  }
+  /** 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.kind !== "action" && i.value === t
+    ) ?? {
+      value: t,
+      label: t
+    });
+  }
+  /** 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;
+    }
+    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._effectiveDisplay === "chips" && this.multiple)
+      return this.placeholder;
+    if (this._selectedValues.size === 1)
+      return this._labelFor([...this._selectedValues][0]);
+    const e = [...this._selectedValues];
+    return `${this._labelFor(e[0])}, +${e.length - 1} more`;
+  }
+  /**
+   * 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._activeDescendantCtrl.navigate(1) : (this.openPopup(), this._activeDescendantCtrl.navigateToFirst());
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this.open ? this._activeDescendantCtrl.navigate(-1) : (this.openPopup(), this._activeDescendantCtrl.navigateToLast());
+        break;
+      case "Home":
+        this.open && (e.preventDefault(), this._activeDescendantCtrl.navigateToFirst());
+        break;
+      case "End":
+        this.open && (e.preventDefault(), this._activeDescendantCtrl.navigateToLast());
+        break;
+      case " ":
+      case "Enter":
+        e.preventDefault(), this.open ? this._activateActive() : (this.openPopup(), this._activeDescendantCtrl.navigateToFirst());
+        break;
+      case "Tab":
+        this.open && this.closePopup(!1);
+        break;
+      case "ArrowLeft":
+        !this.open && this.multiple && this._selectedValues.size > 0 && (e.preventDefault(), this._enterChipNav());
+        break;
+      default:
+        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._activeDescendantCtrl.activeItem;
+    e && e.dispatchEvent(new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 }));
+  }
+  /**
+   * 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 = "";
+    }, 500);
+    const i = (this._$listbox?.allOptions ?? []).find(
+      (s) => !s.disabled && s.label.toLowerCase().startsWith(this._typeAheadBuffer)
+    );
+    if (i)
+      if (!this.open)
+        this.multiple || (this._selectionInitialized = !0, this._applySelection([i.value], !0), this._dispatchChange());
+      else {
+        const r = this._$listbox.navigableItems.find((l) => l.getAttribute("data-value") === i.value);
+        r && this._activeDescendantCtrl.navigateToItem(r);
+      }
+  }
+  /** Focuses the last chip button and sets `_chipNavIndex` to begin roving-tabindex navigation within the chip group. */
+  _enterChipNav() {
+    const e = this._$chipButtons();
+    e.length !== 0 && (this._chipNavIndex = e.length - 1, e[this._chipNavIndex].focus());
+  }
+  /** Queries all native remove buttons inside input chips; order matches DOM order. */
+  _$chipButtons() {
+    return Array.from(
+      this.renderRoot.querySelectorAll('rc-chip > 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._$chipButtons();
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), this._chipNavIndex > 0 && (this._chipNavIndex--, i[this._chipNavIndex]?.focus());
+        break;
+      case "ArrowRight":
+        e.preventDefault(), this._chipNavIndex < i.length - 1 ? (this._chipNavIndex++, i[this._chipNavIndex]?.focus()) : (this._chipNavIndex = -1, this._$trigger?.focus());
+        break;
+      case "Escape":
+        e.preventDefault(), this._chipNavIndex = -1, this._$trigger?.focus();
+        break;
+      case "Delete":
+      case "Backspace":
+      case "Enter":
+      case " ":
+        e.preventDefault(), this._removeValue(t), this._chipNavIndex = -1, this._$trigger?.focus();
+        break;
+    }
+  }
+  /** Toggles the popup open or closed on trigger click. */
+  _handleTriggerClick() {
+    this.open ? this.closePopup() : this.openPopup();
+  }
+  get _dialogSelectedValues() {
+    return [...this._pendingSelectedValues ?? this._selectedValues];
+  }
+  _focusDialogContent() {
+    this._$listbox?.focus();
+  }
+  /** Hook for subclasses to finalize provisional options before dialog selection commits. */
+  _prepareDialogCommit() {
+  }
+  _commitDialogSelection() {
+    if (!this.open || this._activePopupMode !== "dialog")
+      return;
+    this._prepareDialogCommit();
+    const e = this._dialogSelectedValues, t = this.selectedValues, i = e.length !== t.length || e.some((s) => !t.includes(s));
+    this._pendingSelectedValues = null, i && (this._selectionInitialized = !0, this._applySelection(e, !0), this._dispatchChange()), this._$dialogHost?.close("done"), this._finishDialogClose(!0);
+  }
+  _discardDialogSelection() {
+    this._pendingSelectedValues = null, this._$listbox?.setSelectedValues(this.selectedValues);
+  }
+  _finishDialogClose(e) {
+    this.open && (this.open = !1, this._activeDescendantCtrl.clear(), e && this._$trigger?.focus(), this.dispatchEvent(new CustomEvent("rc-select-close", { bubbles: !0, composed: !0 })), this.requestUpdate());
+  }
+  _handleDialogClose(e) {
+    e.stopPropagation(), this.open && (this._discardDialogSelection(), this._finishDialogClose(!0));
+  }
+  _stopDialogEvent(e) {
+    e.stopPropagation();
+  }
+  _removePendingValue(e) {
+    const t = new Set(this._pendingSelectedValues ?? this._selectedValues);
+    t.delete(e), this._pendingSelectedValues = t, this._$listbox?.setSelectedValues([...t]), this.requestUpdate();
+  }
+  _renderDialogBody() {
+    return d`
+      <rc-listbox
+        id="dialog-listbox"
+        part="listbox dialog-listbox"
+        tabindex="0"
+        aria-label=${this._accessibleName || "Options"}
+        ?multiple=${this.multiple}
+        checkmark
+        .options=${this._options}
+        @rc-listbox-change=${this._handleListboxChange}
+      ></rc-listbox>
+    `;
+  }
+  _renderDialogPopup() {
+    const e = this._accessibleName || "Options", t = this.multiple && this._dialogSelectedValues.length > 0;
+    return d`
+      <rc-dialog
+        id="dialog-host"
+        variant="fullscreen"
+        closed-by="closerequest"
+        @rc-dialog-open=${this._stopDialogEvent}
+        @rc-dialog-toggle=${this._stopDialogEvent}
+        @rc-dialog-request-close=${this._stopDialogEvent}
+        @rc-dialog-cancel=${this._stopDialogEvent}
+        @rc-dialog-close=${this._handleDialogClose}
+      >
+        <dialog id="dialog" part="dialog" aria-labelledby="dialog-title">
+          <header part="dialog-header">
+            ${this.dialogCancelButton === "visible" ? d`
+                  <button
+                    part="dialog-cancel"
+                    type="button"
+                    aria-label=${this.dialogCancelLabel}
+                    @click=${() => this.closePopup()}
+                  >
+                    <svg
+                      part="dialog-cancel-icon"
+                      aria-hidden="true"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      height="24"
+                    >
+                      <path
+                        d="M6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4 17.6 5 12 10.6Z"
+                      />
+                    </svg>
+                  </button>
+                ` : p}
+
+            <h2 id="dialog-title" part="dialog-title">${e}</h2>
+
+            <div part="dialog-actions">
+              <button part="dialog-confirm" type="button" @click=${this._commitDialogSelection}>
+                ${this.dialogConfirmLabel}
+              </button>
+            </div>
+          </header>
+
+          ${t ? d`<div part="dialog-selected">
+                ${this._renderChips(this._dialogSelectedValues, !0)}
+              </div>` : p}
+          ${this._renderDialogBody()}
+        </dialog>
+      </rc-dialog>
+    `;
+  }
+  render() {
+    return (this.open ? this._activePopupMode : this.popupMode) === "dialog" ? d`
+        ${this._renderAnchor()} ${this.open ? this._renderDialogPopup() : p}
+        <slot @slotchange=${this._handleSelectSlotChange}></slot>
+      ` : d`
+      ${this._renderAnchor()}
+
+      <rc-listbox
+        id="listbox"
+        part="listbox"
+        popover="manual"
+        ?multiple=${this.multiple}
+        checkmark
+        @rc-listbox-change=${this._handleListboxChange}
+      ></rc-listbox>
+
+      <slot @slotchange=${this._handleSelectSlotChange}></slot>
+    `;
+  }
+  _renderAnchor() {
+    const e = this.multiple && this._effectiveDisplay === "chips" && this._selectedValues.size > 0, t = (this.open ? this._activePopupMode : this.popupMode) === "dialog";
+    return d`
+      <div id="anchor" part="anchor">
+        <div
+          id="trigger"
+          part="trigger"
+          role="combobox"
+          tabindex=${this.disabled ? "-1" : "0"}
+          aria-haspopup=${t ? "dialog" : "listbox"}
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${t ? "dialog" : "listbox"}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-required=${this.required ? "true" : "false"}
+          aria-label=${this.placeholder || p}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+        >
+          ${e ? this._renderChips() : p}
+
+          <span part="value-display">${this._displayLabel}</span>
+
+          <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>
+    `;
+  }
+  /** Renders selected values as removable input chips inside the shared chip-group layout. */
+  _renderChips(e = this._selectedValues, t = !1) {
+    return d`
+      <rc-chip-group part="chips" kind="generic" layout="wrap" aria-label="Selected items">
+        ${[...e].map((i) => {
+      const s = this._labelFor(i);
+      return d`
+            <rc-chip
+              variant="input"
+              removable
+              data-value=${i}
+              @rc-chip-remove=${(r) => {
+        r.stopPropagation(), t ? this._removePendingValue(i) : this._removeValue(i);
+      }}
+            >
+              <button
+                type="button"
+                part="chip"
+                tabindex="-1"
+                aria-label=${`Remove ${s}`}
+                @click=${(r) => r.stopPropagation()}
+                @keydown=${(r) => this._handleChipKeyDown(r, i)}
+              >
+                <span part="chip-label">${s}</span>
+              </button>
+              <span slot="remove-icon" part="chip-remove" aria-hidden="true">&#215;</span>
+            </rc-chip>
+          `;
+    })}
+      </rc-chip-group>
+    `;
+  }
+};
+v.styles = x;
+let o = v;
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "multiple");
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "required");
+a([
+  c()
+], o.prototype, "placeholder");
+a([
+  c()
+], o.prototype, "display");
+a([
+  c({ attribute: "popup-mode", reflect: !0 })
+], o.prototype, "popupMode");
+a([
+  c({ attribute: "dialog-confirm-label" })
+], o.prototype, "dialogConfirmLabel");
+a([
+  c({ attribute: "dialog-cancel-label" })
+], o.prototype, "dialogCancelLabel");
+a([
+  c({ attribute: "dialog-cancel-button", reflect: !0 })
+], o.prototype, "dialogCancelButton");
+a([
+  u("#anchor")
+], o.prototype, "_$anchor");
+a([
+  u("#trigger")
+], o.prototype, "_$trigger");
+a([
+  u("rc-listbox")
+], o.prototype, "_$listbox");
+a([
+  u("#dialog-host")
+], o.prototype, "_$dialogHost");
+a([
+  h()
+], o.prototype, "_selectedValues");
+a([
+  h()
+], o.prototype, "_pendingSelectedValues");
+a([
+  h()
+], o.prototype, "_accessibleName");
+a([
+  h()
+], o.prototype, "_chipNavIndex");
+a([
+  h()
+], o.prototype, "_options");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-select-MQcvA385.js.map