@rcarls/rc-select 0.5.0 → 0.7.0

package/dist/{rc-select-BRp1j-JD.js → rc-select-DX-fKYeR.js}

@@ -1,198 +1,47 @@
-import { css as f, LitElement as b, nothing as _, html as h } from "lit";
-import { property as n, query as d, state as p } from "lit/decorators.js";
-import { NativeChildController as m, ActiveDescendantController as g, AnchorController as y } from "@rcarls/rc-common";
-const x = f`
-  :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);
-  }
-
-  /* Chips — the whole chip is the remove button for a larger touch target */
-  [part='chip'] {
-    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))
-    );
-    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);
-
-    &:not(:popover-open) {
-      display: 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 = (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;
+import { css as k, LitElement as $, nothing as p, html as c } from "lit";
+import { property as d, query as _, state as u } from "lit/decorators.js";
+import { MessagesController as C, NativeChildController as w, ActiveDescendantController as S, AnchorController as V, PopoverController as D, inlineArrowKeys as g, resolveFlow as f, bidiIsolate as b, numberFormat as A } from "@rcarls/rc-common";
+const F = k`:host{display:inline-block}#anchor{align-items:center;gap:var(--rc-select-gap,var(--rc-control-gap,.25em));flex-wrap:wrap;display:flex}#trigger{align-items:center;gap:var(--rc-select-gap,var(--rc-control-gap,.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));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,.125em)));background:var(--rc-field,Field);min-width:8em;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,.12s), border-color var(--rc-motion-duration,.12s), box-shadow var(--rc-motion-duration,.12s);outline:none;flex-wrap:wrap;display:flex;&:focus-visible{outline:var(--rc-focus-ring,auto);outline-offset:var(--rc-focus-ring-offset,0)}}[part=value-display]{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[part=toggle-indicator]{inline-size:var(--rc-select-toggle-indicator-size,1.1em);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}[part=chips]{--rc-chip-group-column-gap:var(--rc-select-gap,var(--rc-control-gap,.25em));--rc-chip-group-row-gap:calc(var(--rc-chip-touch-target-overlap-block-start,0px) + var(--rc-chip-touch-target-overlap-block-end,0px));flex:0 auto;min-inline-size:0;max-inline-size:100%}[part=chip]{align-items:center;gap:var(--rc-select-chip-gap,calc(var(--rc-control-gap,.25em) * .8));padding-block:var(--rc-select-chip-padding-block,.1em);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,.25em));background:var(--rc-button-bg,ButtonFace);color:var(--rc-button-text,ButtonText);font:inherit;cursor:pointer;padding-inline-start:var(--rc-select-chip-padding-inline-start,.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,.125rem)));font-size:.875em;display:inline-flex;&: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)}}[part=chip-remove]{pointer-events:none;justify-content:center;align-items:center;width:1em;font-size:.85em;display:inline-flex}slot:not([name]){display:none}rc-listbox{max-height:var(--rc-select-max-height,20em);overflow-block:auto;background:var(--rc-select-listbox-background,var(--rc-popup-background,var(--rc-surface,Canvas)));border:var(--rc-select-listbox-border,var(--rc-popup-border,var(--rc-border,1px solid var(--rc-border-color,ButtonBorder))));border-radius:var(--rc-select-listbox-radius,var(--rc-popup-radius,var(--rc-radius-sm,0)));box-shadow:var(--rc-select-shadow,var(--rc-popup-shadow,var(--rc-shadow,0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))));color:var(--rc-select-listbox-color,var(--rc-popup-color,var(--rc-field-text,FieldText)));padding-block:var(--rc-select-listbox-padding-block,var(--rc-popup-padding-block,var(--rc-control-padding-block,.25em)));--rc-listbox-option-gap:var(--rc-item-gap,.4em);--rc-listbox-option-padding-block:var(--rc-item-padding-block,.3em);--rc-listbox-option-padding-inline:var(--rc-item-padding-inline,.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,.5);overflow-y:auto}@media (prefers-reduced-motion:no-preference){[part=listbox]:is(:popover-open,[data-rc-popover-fallback-open]){opacity:1;transition:opacity var(--rc-select-listbox-duration,.15s) var(--rc-motion-effects-easing-enter,ease-out), overlay var(--rc-select-listbox-duration,.15s) allow-discrete, display var(--rc-select-listbox-duration,.15s) allow-discrete}[part=listbox]:not(:popover-open):not([data-rc-popover-fallback-open]){opacity:0;transition:opacity var(--rc-select-listbox-duration,.15s) var(--rc-motion-effects-easing-exit,ease-in), overlay var(--rc-select-listbox-duration,.15s) allow-discrete, display var(--rc-select-listbox-duration,.15s) allow-discrete}@starting-style{[part=listbox]:is(:popover-open,[data-rc-popover-fallback-open]){opacity:0}}}[part=listbox]:not(:popover-open):not([data-rc-popover-fallback-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]{gap:var(--rc-select-dialog-gap,1rem);flex-direction:column;display:flex}}[part~=dialog-header]{align-items:center;gap:var(--rc-select-dialog-header-gap,.5rem);grid-template-columns:auto minmax(0,1fr) auto;display:grid}[part~=dialog-header]>[part~=dialog-title]:first-child{grid-column:1/3}[part~=dialog-title]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;font:inherit;margin:0;overflow:hidden}[part~=dialog-cancel],[part~=dialog-confirm]{min-block-size:2.75rem;min-inline-size:2.75rem}[part~=dialog-cancel]{justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=dialog-cancel-icon]{fill:currentColor}[part~=dialog-selected]{max-block-size:30%;overflow:auto}[part~=dialog-listbox]{min-block-size:0;max-block-size:none;box-shadow:none;flex:1}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}rc-listbox [part~=option-checkmark]{text-align:center;visibility:hidden;flex-shrink:0;width:1em;font-size:.85em}rc-listbox [part~=option][aria-selected=true] [part~=option-checkmark]{visibility:visible}rc-listbox [part~=create-option]{border-top:1px solid var(--rc-border-color,ButtonBorder);margin-top:.25em;padding-top:.3em;font-style:italic}`;
+var E = Object.defineProperty, l = (h, e, t, i) => {
+  for (var s = void 0, r = h.length - 1, a; r >= 0; r--)
+    (a = h[r]) && (s = a(e, t, s) || s);
+  return s && E(e, t, s), s;
 };
-const u = class u extends b {
+let m, y;
+function x() {
+  return m ??= import("@rcarls/rc-dialog/define"), m;
+}
+function O() {
+  return y ??= import("@rcarls/rc-chip-group/define"), y;
+}
+const z = Object.freeze({
+  options: "Options",
+  selectedItems: "Selected items",
+  remove: (h) => `Remove ${b(h)}`,
+  summary: (h, e, t) => `${b(h)}, +${A(t, { useGrouping: !1 }).format(e)} more`,
+  done: "Done",
+  cancel: "Cancel"
+}), v = class v extends $ {
   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._selectController = new m(this, {
+    super(...arguments), this._messages = new C(this, "rc-select", z, {
+      overrides: () => this.messages
+    }), this.open = !1, this.multiple = !1, this.disabled = !1, this.required = !1, this.placeholder = "", this.display = "auto", this.popupMode = "popover", 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 w(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 g(this, {
-      host: () => this._$trigger ?? null,
+    }), this._mutationObserver = null, this._selectionInitialized = !1, this._pickerGuardActive = !1, this._pickerGuardConsumerDisabled = !1, this._pickerGuardForm = null, this._typeAheadBuffer = "", this._typeAheadTimer = 0, this._activeDescendantCtrl = new S(this, {
+      host: () => this._$activeDescendantHost,
       items: () => this._$listbox?.navigableItems ?? []
-    }), this._anchorCtrl = new y(this, {
+    }), this._anchorCtrl = new V(this, {
       anchor: () => this._$anchor ?? null,
       floating: () => this._$listbox ?? null,
       shadowHost: () => this,
-      placement: "bottom-start",
-      offset: 2
-    }), this._onDocClick = (e) => {
+      placement: "block-end-start",
+      offset: 2,
+      disabled: () => !this.open || this._activePopupMode === "dialog"
+    }), this._popoverCtrl = new D(this, { element: () => this._$listbox ?? null }), this._onDocClick = (e) => {
       this.open && (e.composedPath().includes(this) || this.closePopup(!1));
     }, this._onDocKeyDown = (e) => {
       this.open && e.key === "Escape" && (e.preventDefault(), this.closePopup());
@@ -213,6 +62,14 @@ const u = class u extends b {
       e.preventDefault(), t.dispatchEvent(new Event("invalid", { cancelable: !0 })) && this._$trigger?.focus();
     };
   }
+  /** The resolved built-in text. Subclasses with more text resolve their own scope. */
+  get _text() {
+    return this._messages.value;
+  }
+  /** 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();
@@ -224,19 +81,47 @@ const u = class u extends b {
     }), this._mutationObserver?.disconnect(), this._syncFormListeners(null);
   }
   updated(e) {
-    super.updated(e), this.toggleAttribute("has-value", this._selectedValues.size > 0);
+    super.updated(e), this.toggleAttribute("has-value", this._selectedValues.size > 0), this.popupMode === "dialog" && x(), this.multiple && O();
+  }
+  /**
+   * 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() {
-    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());
+    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 () => {
+          await x();
+          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._popoverCtrl.sync(!0), 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.
+   * @param returnFocus - when `true` (default), returns focus to the trigger
    */
   closePopup(e = !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 })));
+    if (this.open) {
+      if (this._activePopupMode === "dialog") {
+        this._discardDialogSelection(), this._$dialogHost?.close?.("cancel"), this._finishDialogClose(e);
+        return;
+      }
+      this.open = !1, this._popoverCtrl.sync(!1), 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
@@ -282,10 +167,15 @@ const u = class u extends b {
    *
    * 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) {
-    const t = this.multiple ? e : e.slice(0, 1);
-    this._selectedValues = new Set(t), this._$listbox?.setSelectedValues(t), this._syncNativeSelect(), this.requestUpdate();
+  _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.
@@ -328,10 +218,10 @@ const u = class u extends b {
     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._syncOptionsFromSelect(e), this._applyPickerGuard(e), this._mutationObserver = new MutationObserver(() => {
+      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._pickerGuardActive || (this.disabled = i.disabled), this._applyPickerGuard(i), this._propertyOptions !== void 0) {
+          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;
           }
@@ -455,7 +345,7 @@ const u = class u extends b {
     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");
+    this._accessibleName = t ?? "", t ? this._$trigger.setAttribute("aria-label", t) : this._$trigger.removeAttribute("aria-label");
   }
   /**
    * Handles `rc-listbox-change` from the popup.
@@ -469,27 +359,41 @@ const u = class u extends b {
       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 c = new Set(this._selectedValues);
-        r ? c.add(l) : c.delete(l), this._selectedValues = c;
+    const { optionValue: i, value: s, selected: r } = t, a = i ?? (Array.isArray(s) ? s.at(-1) : s);
+    if (a) {
+      if (e.stopPropagation(), this.open && this._activePopupMode === "dialog") {
+        const n = new Set(this._pendingSelectedValues ?? this._selectedValues);
+        this.multiple ? r ? n.add(a) : n.delete(a) : (n.clear(), r && n.add(a)), this._pendingSelectedValues = n, this._$listbox.setSelectedValues([...n]), this.requestUpdate();
+        return;
+      }
+      if (this.multiple) {
+        const n = new Set(this._selectedValues);
+        r ? n.add(a) : n.delete(a), this._selectedValues = n;
       } else
-        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();
+        this._selectedValues = r ? /* @__PURE__ */ new Set([a]) : /* @__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(), this._dispatchChange();
+    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. */
-  _syncNativeSelect() {
-    const e = this._$selectRef?.deref();
-    if (e)
-      for (const t of e.options)
-        t.selected = this._selectedValues.has(t.value);
+  /**
+   * 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() {
@@ -536,8 +440,8 @@ const u = class u extends b {
       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`;
+    const e = [...this._selectedValues], t = this._labelFor(e[0]);
+    return this._text.summary(t, e.length - 1, this._messages.locale);
   }
   /**
    * APG Combobox keyboard handler on the trigger.
@@ -566,10 +470,11 @@ const u = class u extends b {
       case "Tab":
         this.open && this.closePopup(!1);
         break;
-      case "ArrowLeft":
-        !this.open && this.multiple && this._selectedValues.size > 0 && (e.preventDefault(), this._enterChipNav());
-        break;
       default:
+        if (e.key === g(f(this)).prev && !this.open && this.multiple && this._selectedValues.size > 0) {
+          e.preventDefault(), this._enterChipNav();
+          break;
+        }
         e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && this._handleTypeAhead(e.key);
     }
   }
@@ -596,9 +501,9 @@ const u = class u extends b {
     );
     if (i)
       if (!this.open)
-        this.multiple || (this._selectionInitialized = !0, this._applySelection([i.value]), this._dispatchChange());
+        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);
+        const r = this._$listbox.navigableItems.find((a) => a.getAttribute("data-value") === i.value);
         r && this._activeDescendantCtrl.navigateToItem(r);
       }
   }
@@ -607,9 +512,11 @@ const u = class u extends b {
     const e = this._$chipButtons();
     e.length !== 0 && (this._chipNavIndex = e.length - 1, e[this._chipNavIndex].focus());
   }
-  /** Queries all `button[part~="chip"]` elements in `renderRoot`; order matches DOM order. */
+  /** Queries all native remove buttons inside input chips; order matches DOM order. */
   _$chipButtons() {
-    return Array.from(this.renderRoot.querySelectorAll('button[part~="chip"]'));
+    return Array.from(
+      this.renderRoot.querySelectorAll('rc-chip > button[part~="chip"]')
+    );
   }
   /**
    * Keyboard handler for chip buttons.
@@ -619,12 +526,12 @@ const u = class u extends b {
    * and return focus to the trigger.
    */
   _handleChipKeyDown(e, t) {
-    const i = this._$chipButtons();
+    const i = this._$chipButtons(), s = g(f(this));
     switch (e.key) {
-      case "ArrowLeft":
+      case s.prev:
         e.preventDefault(), this._chipNavIndex > 0 && (this._chipNavIndex--, i[this._chipNavIndex]?.focus());
         break;
-      case "ArrowRight":
+      case s.next:
         e.preventDefault(), this._chipNavIndex < i.length - 1 ? (this._chipNavIndex++, i[this._chipNavIndex]?.focus()) : (this._chipNavIndex = -1, this._$trigger?.focus());
         break;
       case "Escape":
@@ -642,24 +549,145 @@ const u = class u extends b {
   _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 c`
+      <rc-listbox
+        lang=${this.getAttribute("lang") ?? p}
+        id="dialog-listbox"
+        part="listbox dialog-listbox"
+        tabindex="0"
+        aria-label=${this._accessibleName || this._text.options}
+        ?multiple=${this.multiple}
+        checkmark
+        .options=${this._options}
+        @rc-listbox-change=${this._handleListboxChange}
+      ></rc-listbox>
+    `;
+  }
+  _renderDialogPopup() {
+    const e = this._accessibleName || this._text.options, t = this.multiple && this._dialogSelectedValues.length > 0;
+    return c`
+      <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" ? c`
+                  <button
+                    part="dialog-cancel"
+                    type="button"
+                    aria-label=${this._text.cancel}
+                    @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._text.done}
+              </button>
+            </div>
+          </header>
+
+          ${t ? c`<div part="dialog-selected">
+                ${this._renderChips(this._dialogSelectedValues, !0)}
+              </div>` : p}
+          ${this._renderDialogBody()}
+        </dialog>
+      </rc-dialog>
+    `;
+  }
   render() {
-    const e = this.multiple && this._effectiveDisplay === "chips" && this._selectedValues.size > 0;
-    return h`
+    return (this.open ? this._activePopupMode : this.popupMode) === "dialog" ? c`
+        ${this._renderAnchor()} ${this.open ? this._renderDialogPopup() : p}
+        <slot @slotchange=${this._handleSelectSlotChange}></slot>
+      ` : c`
+      ${this._renderAnchor()}
+
+      <rc-listbox
+        lang=${this.getAttribute("lang") ?? p}
+        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 c`
       <div id="anchor" part="anchor">
         <div
           id="trigger"
           part="trigger"
           role="combobox"
           tabindex=${this.disabled ? "-1" : "0"}
-          aria-haspopup="listbox"
+          aria-haspopup=${t ? "dialog" : "listbox"}
           aria-expanded=${this.open ? "true" : "false"}
-          aria-controls="listbox"
+          aria-controls=${t ? "dialog" : "listbox"}
           aria-disabled=${this.disabled ? "true" : "false"}
-          aria-label=${this.placeholder || _}
+          aria-required=${this.required ? "true" : "false"}
+          aria-label=${this.placeholder || p}
           @click=${this._handleTriggerClick}
           @keydown=${this._handleTriggerKeyDown}
         >
-          ${e ? this._renderChips() : _}
+          ${e ? this._renderChips() : p}
 
           <span part="value-display">${this._displayLabel}</span>
 
@@ -681,82 +709,100 @@ const u = class u extends b {
           </span>
         </div>
       </div>
-
-      <rc-listbox
-        id="listbox"
-        part="listbox"
-        popover="manual"
-        ?multiple=${this.multiple}
-        checkmark
-        @rc-listbox-change=${this._handleListboxChange}
-      ></rc-listbox>
-
-      <slot @slotchange=${this._handleSelectSlotChange}></slot>
     `;
   }
-  /** Renders the chip group `<span>` with one `<button>` per selected value for multi-select chip display mode. */
-  _renderChips() {
-    return h`
-      <span part="chips" role="group" aria-label="Selected items">
-        ${[...this._selectedValues].map((e) => {
-      const t = this._labelFor(e);
-      return h`
-            <button
-              type="button"
-              part="chip"
-              data-value=${e}
-              tabindex="-1"
-              aria-label=${`Remove ${t}`}
-              @click=${(i) => {
-        i.stopPropagation(), this._removeValue(e);
+  /** Renders selected values as removable input chips inside the shared chip-group layout. */
+  _renderChips(e = this._selectedValues, t = !1) {
+    const i = this._text;
+    return c`
+      <rc-chip-group part="chips" kind="generic" layout="wrap" aria-label=${i.selectedItems}>
+        ${[...e].map((s) => {
+      const r = this._labelFor(s);
+      return c`
+            <rc-chip
+              variant="input"
+              removable
+              data-value=${s}
+              @rc-chip-remove=${(a) => {
+        a.stopPropagation(), t ? this._removePendingValue(s) : this._removeValue(s);
       }}
-              @keydown=${(i) => this._handleChipKeyDown(i, e)}
             >
-              <span part="chip-label">${t}</span
-              ><span part="chip-remove" aria-hidden="true">&#215;</span>
-            </button>
+              <button
+                type="button"
+                part="chip"
+                tabindex="-1"
+                aria-label=${i.remove(r)}
+                @click=${(a) => a.stopPropagation()}
+                @keydown=${(a) => this._handleChipKeyDown(a, s)}
+              >
+                <span part="chip-label">${r}</span>
+              </button>
+              <span slot="remove-icon" part="chip-remove" aria-hidden="true">&#215;</span>
+            </rc-chip>
           `;
     })}
-      </span>
+      </rc-chip-group>
     `;
   }
 };
-u.styles = x;
-let o = u;
-a([
-  n({ type: Boolean, reflect: !0 })
+v.styles = F;
+let o = v;
+l([
+  d({ attribute: !1 })
+], o.prototype, "messages");
+l([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "open");
-a([
-  n({ type: Boolean, reflect: !0 })
+l([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "multiple");
-a([
-  n({ type: Boolean, reflect: !0 })
+l([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled");
-a([
-  n()
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "required");
+l([
+  d()
 ], o.prototype, "placeholder");
-a([
-  n()
+l([
+  d()
 ], o.prototype, "display");
-a([
-  d("#anchor")
+l([
+  d({ attribute: "popup-mode", reflect: !0 })
+], o.prototype, "popupMode");
+l([
+  d({ attribute: "dialog-cancel-button", reflect: !0 })
+], o.prototype, "dialogCancelButton");
+l([
+  _("#anchor")
 ], o.prototype, "_$anchor");
-a([
-  d("#trigger")
+l([
+  _("#trigger")
 ], o.prototype, "_$trigger");
-a([
-  d("#listbox")
+l([
+  _("rc-listbox")
 ], o.prototype, "_$listbox");
-a([
-  p()
+l([
+  _("#dialog-host")
+], o.prototype, "_$dialogHost");
+l([
+  u()
 ], o.prototype, "_selectedValues");
-a([
-  p()
+l([
+  u()
+], o.prototype, "_pendingSelectedValues");
+l([
+  u()
+], o.prototype, "_accessibleName");
+l([
+  u()
 ], o.prototype, "_chipNavIndex");
-a([
-  p()
+l([
+  u()
 ], o.prototype, "_options");
 export {
+  z as D,
   o as R
 };
-//# sourceMappingURL=rc-select-BRp1j-JD.js.map
+//# sourceMappingURL=rc-select-DX-fKYeR.js.map