@serendie/ui 2.1.3 → 2.2.0

package/dist/node_modules/@zag-js/combobox/dist/index.js

@@ -1,13 +1,13 @@
-import { createAnatomy as ce } from "../../anatomy/dist/index.js";
-import { ListCollection as ee } from "../../collection/dist/index.js";
-import { raf as f, setCaretToEnd as ge, observeAttributes as de, observeChildren as he, clickIfLink as Ie, dataAttr as u, ariaAttr as K, isDownloadingEvent as pe, isOpeningInNewTab as me, isContextMenuEvent as Ce, isLeftClick as U, getEventKey as $, isComposingEvent as fe, isAnchorElement as Oe, query as ve, scrollIntoView as Ee } from "../../dom-query/dist/index.js";
-import { getPlacement as q, getPlacementStyles as Ve } from "../../popper/dist/index.js";
-import { match as D, remove as Te, addOrRemove as Y, isBoolean as ye, isEqual as Pe, ensure as Se } from "../../utils/dist/index.js";
-import { ariaHidden as Ne } from "../../aria-hidden/dist/index.js";
-import { setup as be } from "../../core/dist/index.js";
-import { trackDismissableElement as ke } from "../../dismissable/dist/index.js";
+import { createAnatomy as ge } from "../../anatomy/dist/index.js";
+import { ListCollection as ie } from "../../collection/dist/index.js";
+import { raf as V, setCaretToEnd as de, nextTick as he, observeAttributes as pe, clickIfLink as me, dataAttr as c, ariaAttr as K, isDownloadingEvent as Ie, isOpeningInNewTab as Ce, isContextMenuEvent as ve, isLeftClick as D, getEventKey as $, isComposingEvent as fe, query as Oe, isAnchorElement as Ve, scrollIntoView as q } from "../../dom-query/dist/index.js";
+import { getPlacement as Y, getPlacementStyles as Ee } from "../../popper/dist/index.js";
+import { match as P, remove as Te, addOrRemove as j, isBoolean as ye, isEqual as Pe, ensure as ke } from "../../utils/dist/index.js";
+import { ariaHidden as Le } from "../../aria-hidden/dist/index.js";
+import { setup as Se } from "../../core/dist/index.js";
+import { trackDismissableElement as be } from "../../dismissable/dist/index.js";
 import { createProps as G } from "../../types/dist/index.js";
-var Le = ce("combobox").parts(
+var Ne = ge("combobox").parts(
   "root",
   "clearTrigger",
   "content",
@@ -22,15 +22,15 @@ var Le = ce("combobox").parts(
   "list",
   "positioner",
   "trigger"
-), p = Le.build(), te = (e) => new ee(e);
-te.empty = () => new ee({ items: [] });
+), C = Ne.build(), le = (e) => new ie(e);
+le.empty = () => new ie({ items: [] });
 var Fe = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.root) ?? `combobox:${e.id}`;
 }, B = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.label) ?? `combobox:${e.id}:label`;
-}, ie = (e) => {
+}, ne = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.control) ?? `combobox:${e.id}:control`;
 }, M = (e) => {
@@ -39,364 +39,367 @@ var Fe = (e) => {
 }, w = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.content) ?? `combobox:${e.id}:content`;
-}, ne = (e) => {
+}, oe = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.positioner) ?? `combobox:${e.id}:popper`;
-}, le = (e) => {
+}, ae = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.trigger) ?? `combobox:${e.id}:toggle-btn`;
-}, oe = (e) => {
+}, se = (e) => {
   var t;
   return ((t = e.ids) == null ? void 0 : t.clearTrigger) ?? `combobox:${e.id}:clear-btn`;
-}, Ae = (e, t) => {
-  var i, n;
-  return ((n = (i = e.ids) == null ? void 0 : i.itemGroup) == null ? void 0 : n.call(i, t)) ?? `combobox:${e.id}:optgroup:${t}`;
-}, j = (e, t) => {
-  var i, n;
-  return ((n = (i = e.ids) == null ? void 0 : i.itemGroupLabel) == null ? void 0 : n.call(i, t)) ?? `combobox:${e.id}:optgroup-label:${t}`;
+}, He = (e, t) => {
+  var i, l;
+  return ((l = (i = e.ids) == null ? void 0 : i.itemGroup) == null ? void 0 : l.call(i, t)) ?? `combobox:${e.id}:optgroup:${t}`;
 }, J = (e, t) => {
-  var i, n;
-  return ((n = (i = e.ids) == null ? void 0 : i.item) == null ? void 0 : n.call(i, t)) ?? `combobox:${e.id}:option:${t}`;
-}, T = (e) => e.getById(w(e)), y = (e) => e.getById(M(e)), Q = (e) => e.getById(ne(e)), X = (e) => e.getById(ie(e)), L = (e) => e.getById(le(e)), Z = (e) => e.getById(oe(e)), ae = (e, t) => {
-  if (t == null) return;
+  var i, l;
+  return ((l = (i = e.ids) == null ? void 0 : i.itemGroupLabel) == null ? void 0 : l.call(i, t)) ?? `combobox:${e.id}:optgroup-label:${t}`;
+}, Q = (e, t) => {
+  var i, l;
+  return ((l = (i = e.ids) == null ? void 0 : i.item) == null ? void 0 : l.call(i, t)) ?? `combobox:${e.id}:option:${t}`;
+}, k = (e) => e.getById(w(e)), L = (e) => e.getById(M(e)), X = (e) => e.getById(oe(e)), Z = (e) => e.getById(ne(e)), H = (e) => e.getById(ae(e)), z = (e) => e.getById(se(e)), F = (e, t) => {
+  if (t == null) return null;
   const i = `[role=option][data-value="${CSS.escape(t)}"]`;
-  return ve(T(e), i);
-}, z = (e) => {
-  const t = y(e);
+  return Oe(k(e), i);
+}, ee = (e) => {
+  const t = L(e);
   e.isActiveElement(t) || t == null || t.focus({ preventScroll: !0 });
 }, Re = (e) => {
-  const t = L(e);
+  const t = H(e);
   e.isActiveElement(t) || t == null || t.focus({ preventScroll: !0 });
 };
-function Ye(e, t) {
-  const { context: i, prop: n, state: o, send: a, scope: r, computed: C, event: k } = e, O = n("translations"), E = n("collection"), I = n("disabled"), P = C("isInteractive"), v = n("invalid"), S = n("readOnly"), d = o.hasTag("open"), F = o.hasTag("focused"), N = n("composite"), b = i.get("highlightedValue"), se = Ve({
-    ...n("positioning"),
+function qe(e, t) {
+  const { context: i, prop: l, state: n, send: o, scope: s, computed: u, event: E } = e, I = l("translations"), f = l("collection"), m = l("disabled"), T = u("isInteractive"), O = l("invalid"), N = l("readOnly"), h = n.hasTag("open"), R = n.hasTag("focused"), S = l("composite"), b = i.get("highlightedValue"), re = Ee({
+    ...l("positioning"),
     placement: i.get("currentPlacement")
   });
-  function H(l) {
-    const s = E.getItemDisabled(l.item), g = E.getItemValue(l.item);
-    return Se(g, () => `[zag-js] No value found for item ${JSON.stringify(l.item)}`), {
+  function U(a) {
+    const r = f.getItemDisabled(a.item), g = f.getItemValue(a.item);
+    return ke(g, () => `[zag-js] No value found for item ${JSON.stringify(a.item)}`), {
       value: g,
-      disabled: !!(s || s),
+      disabled: !!(r || r),
       highlighted: b === g,
       selected: i.get("value").includes(g)
     };
   }
   return {
-    focused: F,
-    open: d,
+    focused: R,
+    open: h,
     inputValue: i.get("inputValue"),
     highlightedValue: b,
     highlightedItem: i.get("highlightedItem"),
     value: i.get("value"),
-    valueAsString: i.get("valueAsString"),
-    hasSelectedItems: C("hasSelectedItems"),
+    valueAsString: u("valueAsString"),
+    hasSelectedItems: u("hasSelectedItems"),
     selectedItems: i.get("selectedItems"),
-    collection: n("collection"),
-    multiple: !!n("multiple"),
-    disabled: !!I,
+    collection: l("collection"),
+    multiple: !!l("multiple"),
+    disabled: !!m,
     syncSelectedItems() {
-      a({ type: "SELECTED_ITEMS.SYNC" });
+      o({ type: "SELECTED_ITEMS.SYNC" });
+    },
+    reposition(a = {}) {
+      o({ type: "POSITIONING.SET", options: a });
     },
-    reposition(l = {}) {
-      a({ type: "POSITIONING.SET", options: l });
+    setHighlightValue(a) {
+      o({ type: "HIGHLIGHTED_VALUE.SET", value: a });
     },
-    setHighlightValue(l) {
-      a({ type: "HIGHLIGHTED_VALUE.SET", value: l });
+    clearHighlightValue() {
+      o({ type: "HIGHLIGHTED_VALUE.CLEAR" });
     },
-    selectValue(l) {
-      a({ type: "ITEM.SELECT", value: l });
+    selectValue(a) {
+      o({ type: "ITEM.SELECT", value: a });
     },
-    setValue(l) {
-      a({ type: "VALUE.SET", value: l });
+    setValue(a) {
+      o({ type: "VALUE.SET", value: a });
     },
-    setInputValue(l) {
-      a({ type: "INPUT_VALUE.SET", value: l });
+    setInputValue(a, r = "script") {
+      o({ type: "INPUT_VALUE.SET", value: a, src: r });
     },
-    clearValue(l) {
-      l != null ? a({ type: "ITEM.CLEAR", value: l }) : a({ type: "VALUE.CLEAR" });
+    clearValue(a) {
+      a != null ? o({ type: "ITEM.CLEAR", value: a }) : o({ type: "VALUE.CLEAR" });
     },
     focus() {
-      var l;
-      (l = y(r)) == null || l.focus();
+      var a;
+      (a = L(s)) == null || a.focus();
     },
-    setOpen(l) {
-      o.hasTag("open") !== l && a({ type: l ? "OPEN" : "CLOSE" });
+    setOpen(a, r = "script") {
+      n.hasTag("open") !== a && o({ type: a ? "OPEN" : "CLOSE", src: r });
     },
     getRootProps() {
       return t.element({
-        ...p.root.attrs,
-        dir: n("dir"),
-        id: Fe(r),
-        "data-invalid": u(v),
-        "data-readonly": u(S)
+        ...C.root.attrs,
+        dir: l("dir"),
+        id: Fe(s),
+        "data-invalid": c(O),
+        "data-readonly": c(N)
       });
     },
     getLabelProps() {
       return t.label({
-        ...p.label.attrs,
-        dir: n("dir"),
-        htmlFor: M(r),
-        id: B(r),
-        "data-readonly": u(S),
-        "data-disabled": u(I),
-        "data-invalid": u(v),
-        "data-focus": u(F),
-        onClick(l) {
-          var s;
-          N || (l.preventDefault(), (s = L(r)) == null || s.focus({ preventScroll: !0 }));
+        ...C.label.attrs,
+        dir: l("dir"),
+        htmlFor: M(s),
+        id: B(s),
+        "data-readonly": c(N),
+        "data-disabled": c(m),
+        "data-invalid": c(O),
+        "data-focus": c(R),
+        onClick(a) {
+          var r;
+          S || (a.preventDefault(), (r = H(s)) == null || r.focus({ preventScroll: !0 }));
         }
       });
     },
     getControlProps() {
       return t.element({
-        ...p.control.attrs,
-        dir: n("dir"),
-        id: ie(r),
-        "data-state": d ? "open" : "closed",
-        "data-focus": u(F),
-        "data-disabled": u(I),
-        "data-invalid": u(v)
+        ...C.control.attrs,
+        dir: l("dir"),
+        id: ne(s),
+        "data-state": h ? "open" : "closed",
+        "data-focus": c(R),
+        "data-disabled": c(m),
+        "data-invalid": c(O)
       });
     },
     getPositionerProps() {
       return t.element({
-        ...p.positioner.attrs,
-        dir: n("dir"),
-        id: ne(r),
-        style: se.floating
+        ...C.positioner.attrs,
+        dir: l("dir"),
+        id: oe(s),
+        style: re.floating
       });
     },
     getInputProps() {
       return t.input({
-        ...p.input.attrs,
-        dir: n("dir"),
-        "aria-invalid": K(v),
-        "data-invalid": u(v),
-        "data-autofocus": u(n("autoFocus")),
-        name: n("name"),
-        form: n("form"),
-        disabled: I,
-        required: n("required"),
+        ...C.input.attrs,
+        dir: l("dir"),
+        "aria-invalid": K(O),
+        "data-invalid": c(O),
+        "data-autofocus": c(l("autoFocus")),
+        name: l("name"),
+        form: l("form"),
+        disabled: m,
+        required: l("required"),
         autoComplete: "off",
         autoCorrect: "off",
         autoCapitalize: "none",
         spellCheck: "false",
-        readOnly: S,
-        placeholder: n("placeholder"),
-        id: M(r),
+        readOnly: N,
+        placeholder: l("placeholder"),
+        id: M(s),
         type: "text",
         role: "combobox",
         defaultValue: i.get("inputValue"),
-        "aria-autocomplete": C("autoComplete") ? "both" : "list",
-        "aria-controls": w(r),
-        "aria-expanded": d,
-        "data-state": d ? "open" : "closed",
-        "aria-activedescendant": b ? J(r, b) : void 0,
-        onClick(l) {
-          l.defaultPrevented || n("openOnClick") && P && a({ type: "INPUT.CLICK" });
+        "aria-autocomplete": u("autoComplete") ? "both" : "list",
+        "aria-controls": w(s),
+        "aria-expanded": h,
+        "data-state": h ? "open" : "closed",
+        "aria-activedescendant": b ? Q(s, b) : void 0,
+        onClick(a) {
+          a.defaultPrevented || l("openOnClick") && T && o({ type: "INPUT.CLICK", src: "input-click" });
         },
         onFocus() {
-          I || a({ type: "INPUT.FOCUS" });
+          m || o({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          I || a({ type: "INPUT.BLUR" });
+          m || o({ type: "INPUT.BLUR" });
         },
-        onChange(l) {
-          a({ type: "INPUT.CHANGE", value: l.currentTarget.value });
+        onChange(a) {
+          o({ type: "INPUT.CHANGE", value: a.currentTarget.value, src: "input-change" });
         },
-        onKeyDown(l) {
-          if (l.defaultPrevented || !P || l.ctrlKey || l.shiftKey || fe(l)) return;
-          const s = n("openOnKeyPress"), g = l.ctrlKey || l.metaKey || l.shiftKey, h = !0, A = {
-            ArrowDown(V) {
-              !s && !d || (a({ type: V.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress: h }), V.preventDefault());
+        onKeyDown(a) {
+          if (a.defaultPrevented || !T || a.ctrlKey || a.shiftKey || fe(a)) return;
+          const r = l("openOnKeyPress"), g = a.ctrlKey || a.metaKey || a.shiftKey, p = !0, A = {
+            ArrowDown(y) {
+              !r && !h || (o({ type: y.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress: p, src: "arrow-key" }), y.preventDefault());
             },
             ArrowUp() {
-              !s && !d || (a({ type: l.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress: h }), l.preventDefault());
+              !r && !h || (o({ type: a.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress: p, src: "arrow-key" }), a.preventDefault());
             },
-            Home(V) {
-              g || (a({ type: "INPUT.HOME", keypress: h }), d && V.preventDefault());
+            Home(y) {
+              g || (o({ type: "INPUT.HOME", keypress: p }), h && y.preventDefault());
             },
-            End(V) {
-              g || (a({ type: "INPUT.END", keypress: h }), d && V.preventDefault());
+            End(y) {
+              g || (o({ type: "INPUT.END", keypress: p }), h && y.preventDefault());
             },
-            Enter(V) {
+            Enter(y) {
               var W;
-              a({ type: "INPUT.ENTER", keypress: h });
-              const ue = C("isCustomValue") && n("allowCustomValue");
-              if (d && !ue && V.preventDefault(), b == null) return;
-              const _ = ae(r, b);
-              Oe(_) && ((W = n("navigate")) == null || W({ value: b, node: _, href: _.href }));
+              o({ type: "INPUT.ENTER", keypress: p, src: "item-select" });
+              const ce = u("isCustomValue") && l("allowCustomValue");
+              if (h && !ce && y.preventDefault(), b == null) return;
+              const _ = F(s, b);
+              Ve(_) && ((W = l("navigate")) == null || W({ value: b, node: _, href: _.href }));
             },
             Escape() {
-              a({ type: "INPUT.ESCAPE", keypress: h }), l.preventDefault();
+              o({ type: "INPUT.ESCAPE", keypress: p, src: "escape-key" }), a.preventDefault();
             }
-          }, re = $(l, { dir: n("dir") }), x = A[re];
-          x == null || x(l);
+          }, ue = $(a, { dir: l("dir") }), x = A[ue];
+          x == null || x(a);
         }
       });
     },
-    getTriggerProps(l = {}) {
+    getTriggerProps(a = {}) {
       return t.button({
-        ...p.trigger.attrs,
-        dir: n("dir"),
-        id: le(r),
-        "aria-haspopup": N ? "listbox" : "dialog",
+        ...C.trigger.attrs,
+        dir: l("dir"),
+        id: ae(s),
+        "aria-haspopup": S ? "listbox" : "dialog",
         type: "button",
-        tabIndex: l.focusable ? void 0 : -1,
-        "aria-label": O.triggerLabel,
-        "aria-expanded": d,
-        "data-state": d ? "open" : "closed",
-        "aria-controls": d ? w(r) : void 0,
-        disabled: I,
-        "data-invalid": u(v),
-        "data-focusable": u(l.focusable),
-        "data-readonly": u(S),
-        "data-disabled": u(I),
+        tabIndex: a.focusable ? void 0 : -1,
+        "aria-label": I.triggerLabel,
+        "aria-expanded": h,
+        "data-state": h ? "open" : "closed",
+        "aria-controls": h ? w(s) : void 0,
+        disabled: m,
+        "data-invalid": c(O),
+        "data-focusable": c(a.focusable),
+        "data-readonly": c(N),
+        "data-disabled": c(m),
         onFocus() {
-          l.focusable && a({ type: "INPUT.FOCUS", src: "trigger" });
+          a.focusable && o({ type: "INPUT.FOCUS", src: "trigger" });
         },
-        onClick(s) {
-          s.defaultPrevented || P && U(s) && a({ type: "TRIGGER.CLICK" });
+        onClick(r) {
+          r.defaultPrevented || T && D(r) && o({ type: "TRIGGER.CLICK", src: "trigger-click" });
         },
-        onPointerDown(s) {
-          P && s.pointerType !== "touch" && U(s) && (s.preventDefault(), queueMicrotask(() => {
+        onPointerDown(r) {
+          T && r.pointerType !== "touch" && D(r) && (r.preventDefault(), queueMicrotask(() => {
             var g;
-            (g = y(r)) == null || g.focus({ preventScroll: !0 });
+            (g = L(s)) == null || g.focus({ preventScroll: !0 });
           }));
         },
-        onKeyDown(s) {
-          if (s.defaultPrevented || N) return;
+        onKeyDown(r) {
+          if (r.defaultPrevented || S) return;
           const g = {
             ArrowDown() {
-              a({ type: "INPUT.ARROW_DOWN", src: "trigger" });
+              o({ type: "INPUT.ARROW_DOWN", src: "arrow-key" });
             },
             ArrowUp() {
-              a({ type: "INPUT.ARROW_UP", src: "trigger" });
+              o({ type: "INPUT.ARROW_UP", src: "arrow-key" });
             }
-          }, h = $(s, { dir: n("dir") }), A = g[h];
-          A && (A(s), s.preventDefault());
+          }, p = $(r, { dir: l("dir") }), A = g[p];
+          A && (A(r), r.preventDefault());
         }
       });
     },
     getContentProps() {
       return t.element({
-        ...p.content.attrs,
-        dir: n("dir"),
-        id: w(r),
-        role: N ? "listbox" : "dialog",
+        ...C.content.attrs,
+        dir: l("dir"),
+        id: w(s),
+        role: S ? "listbox" : "dialog",
         tabIndex: -1,
-        hidden: !d,
-        "data-state": d ? "open" : "closed",
+        hidden: !h,
+        "data-state": h ? "open" : "closed",
         "data-placement": i.get("currentPlacement"),
-        "aria-labelledby": B(r),
-        "aria-multiselectable": n("multiple") && N ? !0 : void 0,
-        "data-empty": u(E.size === 0),
-        onPointerDown(l) {
-          U(l) && l.preventDefault();
+        "aria-labelledby": B(s),
+        "aria-multiselectable": l("multiple") && S ? !0 : void 0,
+        "data-empty": c(f.size === 0),
+        onPointerDown(a) {
+          D(a) && a.preventDefault();
         }
       });
     },
     getListProps() {
       return t.element({
-        ...p.list.attrs,
-        role: N ? void 0 : "listbox",
-        "data-empty": u(E.size === 0),
-        "aria-labelledby": B(r),
-        "aria-multiselectable": n("multiple") && !N ? !0 : void 0
+        ...C.list.attrs,
+        role: S ? void 0 : "listbox",
+        "data-empty": c(f.size === 0),
+        "aria-labelledby": B(s),
+        "aria-multiselectable": l("multiple") && !S ? !0 : void 0
       });
     },
     getClearTriggerProps() {
       return t.button({
-        ...p.clearTrigger.attrs,
-        dir: n("dir"),
-        id: oe(r),
+        ...C.clearTrigger.attrs,
+        dir: l("dir"),
+        id: se(s),
         type: "button",
         tabIndex: -1,
-        disabled: I,
-        "data-invalid": u(v),
-        "aria-label": O.clearTriggerLabel,
-        "aria-controls": M(r),
+        disabled: m,
+        "data-invalid": c(O),
+        "aria-label": I.clearTriggerLabel,
+        "aria-controls": M(s),
         hidden: !i.get("value").length,
-        onPointerDown(l) {
-          U(l) && l.preventDefault();
+        onPointerDown(a) {
+          D(a) && a.preventDefault();
         },
-        onClick(l) {
-          l.defaultPrevented || P && a({ type: "VALUE.CLEAR", src: "clear-trigger" });
+        onClick(a) {
+          a.defaultPrevented || T && o({ type: "VALUE.CLEAR", src: "clear-trigger" });
         }
       });
     },
-    getItemState: H,
-    getItemProps(l) {
-      const s = H(l), g = s.value;
+    getItemState: U,
+    getItemProps(a) {
+      const r = U(a), g = r.value;
       return t.element({
-        ...p.item.attrs,
-        dir: n("dir"),
-        id: J(r, g),
+        ...C.item.attrs,
+        dir: l("dir"),
+        id: Q(s, g),
         role: "option",
         tabIndex: -1,
-        "data-highlighted": u(s.highlighted),
-        "data-state": s.selected ? "checked" : "unchecked",
-        "aria-selected": K(s.highlighted),
-        "aria-disabled": K(s.disabled),
-        "data-disabled": u(s.disabled),
-        "data-value": s.value,
+        "data-highlighted": c(r.highlighted),
+        "data-state": r.selected ? "checked" : "unchecked",
+        "aria-selected": K(r.highlighted),
+        "aria-disabled": K(r.disabled),
+        "data-disabled": c(r.disabled),
+        "data-value": r.value,
         onPointerMove() {
-          s.disabled || s.highlighted || a({ type: "ITEM.POINTER_MOVE", value: g });
+          r.disabled || r.highlighted || o({ type: "ITEM.POINTER_MOVE", value: g });
         },
         onPointerLeave() {
-          if (l.persistFocus || s.disabled) return;
-          const h = k.previous();
-          h != null && h.type.includes("POINTER") && a({ type: "ITEM.POINTER_LEAVE", value: g });
+          if (a.persistFocus || r.disabled) return;
+          const p = E.previous();
+          p != null && p.type.includes("POINTER") && o({ type: "ITEM.POINTER_LEAVE", value: g });
         },
-        onClick(h) {
-          pe(h) || me(h) || Ce(h) || s.disabled || a({ type: "ITEM.CLICK", src: "click", value: g });
+        onClick(p) {
+          Ie(p) || Ce(p) || ve(p) || r.disabled || o({ type: "ITEM.CLICK", src: "item-select", value: g });
         }
       });
     },
-    getItemTextProps(l) {
-      const s = H(l);
+    getItemTextProps(a) {
+      const r = U(a);
       return t.element({
-        ...p.itemText.attrs,
-        dir: n("dir"),
-        "data-state": s.selected ? "checked" : "unchecked",
-        "data-disabled": u(s.disabled),
-        "data-highlighted": u(s.highlighted)
+        ...C.itemText.attrs,
+        dir: l("dir"),
+        "data-state": r.selected ? "checked" : "unchecked",
+        "data-disabled": c(r.disabled),
+        "data-highlighted": c(r.highlighted)
       });
     },
-    getItemIndicatorProps(l) {
-      const s = H(l);
+    getItemIndicatorProps(a) {
+      const r = U(a);
       return t.element({
         "aria-hidden": !0,
-        ...p.itemIndicator.attrs,
-        dir: n("dir"),
-        "data-state": s.selected ? "checked" : "unchecked",
-        hidden: !s.selected
+        ...C.itemIndicator.attrs,
+        dir: l("dir"),
+        "data-state": r.selected ? "checked" : "unchecked",
+        hidden: !r.selected
       });
     },
-    getItemGroupProps(l) {
-      const { id: s } = l;
+    getItemGroupProps(a) {
+      const { id: r } = a;
       return t.element({
-        ...p.itemGroup.attrs,
-        dir: n("dir"),
-        id: Ae(r, s),
-        "aria-labelledby": j(r, s),
-        "data-empty": u(E.size === 0),
+        ...C.itemGroup.attrs,
+        dir: l("dir"),
+        id: He(s, r),
+        "aria-labelledby": J(s, r),
+        "data-empty": c(f.size === 0),
         role: "group"
       });
     },
-    getItemGroupLabelProps(l) {
-      const { htmlFor: s } = l;
+    getItemGroupLabelProps(a) {
+      const { htmlFor: r } = a;
       return t.element({
-        ...p.itemGroupLabel.attrs,
-        dir: n("dir"),
-        id: j(r, s),
+        ...C.itemGroupLabel.attrs,
+        dir: l("dir"),
+        id: J(s, r),
         role: "presentation"
       });
     }
   };
 }
-var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = He, je = Ue({
+var { guards: Ae, createMachine: Ue, choose: De } = Se(), { and: d, not: v } = Ae, Ye = Ue({
   props({ props: e }) {
     return {
       loopFocus: !0,
@@ -410,9 +413,9 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
       openOnChange: !0,
       composite: !0,
       navigate({ node: t }) {
-        Ie(t);
+        me(t);
       },
-      collection: te.empty(),
+      collection: le.empty(),
       ...e,
       positioning: {
         placement: "bottom",
@@ -429,7 +432,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
   initialState({ prop: e }) {
     return e("open") || e("defaultOpen") ? "suggesting" : "idle";
   },
-  context({ prop: e, bindable: t, getContext: i }) {
+  context({ prop: e, bindable: t, getContext: i, getEvent: l }) {
     return {
       currentPlacement: t(() => ({
         defaultValue: void 0
@@ -442,37 +445,38 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
           return n.join(",");
         },
         onChange(n) {
-          var k;
-          const o = i(), a = o.get("selectedItems"), r = e("collection"), C = n.map((O) => a.find((I) => r.getItemValue(I) === O) || r.find(O));
-          o.set("selectedItems", C), o.set("valueAsString", r.stringifyItems(C)), (k = e("onValueChange")) == null || k({ value: n, items: C });
+          var I;
+          const o = i(), s = o.get("selectedItems"), u = e("collection"), E = n.map((f) => s.find((T) => u.getItemValue(T) === f) || u.find(f));
+          o.set("selectedItems", E), (I = e("onValueChange")) == null || I({ value: n, items: E });
         }
       })),
       highlightedValue: t(() => ({
         defaultValue: e("defaultHighlightedValue") || null,
         value: e("highlightedValue"),
         onChange(n) {
-          var a;
+          var s;
           const o = e("collection").find(n);
-          (a = e("onHighlightChange")) == null || a({ highlightedValue: n, highlightedItem: o });
+          (s = e("onHighlightChange")) == null || s({ highlightedValue: n, highlightedItem: o });
         }
       })),
       inputValue: t(() => {
         let n = e("inputValue") || e("defaultInputValue") || "";
         const o = e("defaultValue") || e("value") || [];
         if (!n.trim() && !e("multiple")) {
-          const a = e("collection").stringifyMany(o);
-          n = D(e("selectionBehavior"), {
-            preserve: n || a,
-            replace: a,
+          const s = e("collection").stringifyMany(o);
+          n = P(e("selectionBehavior"), {
+            preserve: n || s,
+            replace: s,
             clear: ""
           });
         }
         return {
           defaultValue: n,
           value: e("inputValue"),
-          onChange(a) {
-            var r;
-            (r = e("onInputValueChange")) == null || r({ inputValue: a });
+          onChange(s) {
+            var I;
+            const u = l(), E = (u.previousEvent || u).src;
+            (I = e("onInputValueChange")) == null || I({ inputValue: s, reason: E });
           }
         };
       }),
@@ -483,10 +487,6 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
       selectedItems: t(() => {
         const n = e("value") || e("defaultValue") || [];
         return { defaultValue: e("collection").findMany(n) };
-      }),
-      valueAsString: t(() => {
-        const n = e("value") || e("defaultValue") || [];
-        return { sync: !0, defaultValue: e("collection").stringifyMany(n) };
       })
     };
   },
@@ -496,17 +496,20 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
     autoComplete: ({ prop: e }) => e("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop: e }) => e("inputBehavior") === "autohighlight",
     hasSelectedItems: ({ context: e }) => e.get("value").length > 0,
-    isCustomValue: ({ context: e }) => e.get("inputValue") !== e.get("valueAsString")
+    valueAsString: ({ context: e, prop: t }) => t("collection").stringifyItems(e.get("selectedItems")),
+    isCustomValue: ({ context: e, computed: t }) => e.get("inputValue") !== t("valueAsString")
   },
-  watch({ context: e, prop: t, track: i, action: n }) {
+  watch({ context: e, prop: t, track: i, action: l, send: n }) {
     i([() => e.hash("value")], () => {
-      n(["syncSelectedItems"]);
+      l(["syncSelectedItems"]);
     }), i([() => e.get("inputValue")], () => {
-      n(["syncInputValue"]);
+      l(["syncInputValue"]);
     }), i([() => e.get("highlightedValue")], () => {
-      n(["syncHighlightedItem", "autofillInputValue"]);
+      l(["syncHighlightedItem", "autofillInputValue"]);
     }), i([() => t("open")], () => {
-      n(["toggleVisibility"]);
+      l(["toggleVisibility"]);
+    }), i([() => t("collection").toString()], () => {
+      n({ type: "CHILDREN_CHANGE" });
     });
   },
   on: {
@@ -514,7 +517,10 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
       actions: ["syncSelectedItems"]
     },
     "HIGHLIGHTED_VALUE.SET": {
-      actions: ["setHighlightedItem"]
+      actions: ["setHighlightedValue"]
+    },
+    "HIGHLIGHTED_VALUE.CLEAR": {
+      actions: ["clearHighlightedValue"]
     },
     "ITEM.SELECT": {
       actions: ["selectItem"]
@@ -541,7 +547,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
   states: {
     idle: {
       tags: ["idle", "closed"],
-      entry: ["scrollContentToTop", "clearHighlightedItem"],
+      entry: ["scrollContentToTop", "clearHighlightedValue"],
       on: {
         "CONTROLLED.OPEN": {
           target: "interacting"
@@ -587,7 +593,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
     },
     focused: {
       tags: ["focused", "closed"],
-      entry: ["scrollContentToTop", "clearHighlightedItem"],
+      entry: ["scrollContentToTop", "clearHighlightedValue"],
       on: {
         "CONTROLLED.OPEN": [
           {
@@ -600,7 +606,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         ],
         "INPUT.CHANGE": [
           {
-            guard: c("isOpenControlled", "openOnChange"),
+            guard: d("isOpenControlled", "openOnChange"),
             actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
           },
           {
@@ -616,7 +622,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
           target: "idle"
         },
         "INPUT.ESCAPE": {
-          guard: c("isCustomValue", m("allowCustomValue")),
+          guard: d("isCustomValue", v("allowCustomValue")),
           actions: ["revertInputValue"]
         },
         "INPUT.BLUR": {
@@ -645,7 +651,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         "INPUT.ARROW_DOWN": [
           // == group 1 ==
           {
-            guard: c("isOpenControlled", "autoComplete"),
+            guard: d("isOpenControlled", "autoComplete"),
             actions: ["invokeOnOpen"]
           },
           {
@@ -715,6 +721,15 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
             target: "idle"
           }
         ],
+        CHILDREN_CHANGE: [
+          {
+            guard: "isHighlightedItemRemoved",
+            actions: ["clearHighlightedValue"]
+          },
+          {
+            actions: ["scrollToHighlightedItem"]
+          }
+        ],
         "INPUT.HOME": {
           actions: ["highlightFirstItem"]
         },
@@ -723,8 +738,8 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         },
         "INPUT.ARROW_DOWN": [
           {
-            guard: c("autoComplete", "isLastItemHighlighted"),
-            actions: ["clearHighlightedItem", "scrollContentToTop"]
+            guard: d("autoComplete", "isLastItemHighlighted"),
+            actions: ["clearHighlightedValue", "scrollContentToTop"]
           },
           {
             actions: ["highlightNextItem"]
@@ -732,8 +747,8 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         ],
         "INPUT.ARROW_UP": [
           {
-            guard: c("autoComplete", "isFirstItemHighlighted"),
-            actions: ["clearHighlightedItem"]
+            guard: d("autoComplete", "isFirstItemHighlighted"),
+            actions: ["clearHighlightedValue"]
           },
           {
             actions: ["highlightPrevItem"]
@@ -742,17 +757,17 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         "INPUT.ENTER": [
           // == group 1 ==
           {
-            guard: c("isOpenControlled", "isCustomValue", m("hasHighlightedItem"), m("allowCustomValue")),
+            guard: d("isOpenControlled", "isCustomValue", v("hasHighlightedItem"), v("allowCustomValue")),
             actions: ["revertInputValue", "invokeOnClose"]
           },
           {
-            guard: c("isCustomValue", m("hasHighlightedItem"), m("allowCustomValue")),
+            guard: d("isCustomValue", v("hasHighlightedItem"), v("allowCustomValue")),
             target: "focused",
             actions: ["revertInputValue", "invokeOnClose"]
           },
           // == group 2 ==
           {
-            guard: c("isOpenControlled", "closeOnSelect"),
+            guard: d("isOpenControlled", "closeOnSelect"),
             actions: ["selectHighlightedItem", "invokeOnClose"]
           },
           {
@@ -772,18 +787,18 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
           },
           {
             target: "suggesting",
-            actions: ["clearHighlightedItem", "setInputValue"]
+            actions: ["clearHighlightedValue", "setInputValue"]
           }
         ],
         "ITEM.POINTER_MOVE": {
-          actions: ["setHighlightedItem"]
+          actions: ["setHighlightedValue"]
         },
         "ITEM.POINTER_LEAVE": {
-          actions: ["clearHighlightedItem"]
+          actions: ["clearHighlightedValue"]
         },
         "ITEM.CLICK": [
           {
-            guard: c("isOpenControlled", "closeOnSelect"),
+            guard: d("isOpenControlled", "closeOnSelect"),
             actions: ["selectItem", "invokeOnClose"]
           },
           {
@@ -797,7 +812,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         ],
         "LAYER.ESCAPE": [
           {
-            guard: c("isOpenControlled", "autoComplete"),
+            guard: d("isOpenControlled", "autoComplete"),
             actions: ["syncInputValue", "invokeOnClose"]
           },
           {
@@ -827,11 +842,11 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         "LAYER.INTERACT_OUTSIDE": [
           // == group 1 ==
           {
-            guard: c("isOpenControlled", "isCustomValue", m("allowCustomValue")),
+            guard: d("isOpenControlled", "isCustomValue", v("allowCustomValue")),
             actions: ["revertInputValue", "invokeOnClose"]
           },
           {
-            guard: c("isCustomValue", m("allowCustomValue")),
+            guard: d("isCustomValue", v("allowCustomValue")),
             target: "idle",
             actions: ["revertInputValue", "invokeOnClose"]
           },
@@ -869,13 +884,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
     },
     suggesting: {
       tags: ["open", "focused"],
-      effects: [
-        "trackDismissableLayer",
-        "scrollToHighlightedItem",
-        "trackPlacement",
-        "trackChildNodes",
-        "hideOtherElements"
-      ],
+      effects: ["trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement", "hideOtherElements"],
       entry: ["setInitialFocus"],
       on: {
         "CONTROLLED.CLOSE": [
@@ -888,10 +897,16 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
             target: "idle"
           }
         ],
-        CHILDREN_CHANGE: {
-          guard: "autoHighlight",
-          actions: ["highlightFirstItem"]
-        },
+        CHILDREN_CHANGE: [
+          {
+            guard: "autoHighlight",
+            actions: ["highlightFirstItem"]
+          },
+          {
+            guard: "isHighlightedItemRemoved",
+            actions: ["clearHighlightedValue"]
+          }
+        ],
         "INPUT.ARROW_DOWN": {
           target: "interacting",
           actions: ["highlightNextItem"]
@@ -911,17 +926,17 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         "INPUT.ENTER": [
           // == group 1 ==
           {
-            guard: c("isOpenControlled", "isCustomValue", m("hasHighlightedItem"), m("allowCustomValue")),
+            guard: d("isOpenControlled", "isCustomValue", v("hasHighlightedItem"), v("allowCustomValue")),
             actions: ["revertInputValue", "invokeOnClose"]
           },
           {
-            guard: c("isCustomValue", m("hasHighlightedItem"), m("allowCustomValue")),
+            guard: d("isCustomValue", v("hasHighlightedItem"), v("allowCustomValue")),
             target: "focused",
             actions: ["revertInputValue", "invokeOnClose"]
           },
           // == group 2 ==
           {
-            guard: c("isOpenControlled", "closeOnSelect"),
+            guard: d("isOpenControlled", "closeOnSelect"),
             actions: ["selectHighlightedItem", "invokeOnClose"]
           },
           {
@@ -948,19 +963,19 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         ],
         "ITEM.POINTER_MOVE": {
           target: "interacting",
-          actions: ["setHighlightedItem"]
+          actions: ["setHighlightedValue"]
         },
         "ITEM.POINTER_LEAVE": {
-          actions: ["clearHighlightedItem"]
+          actions: ["clearHighlightedValue"]
         },
         "LAYER.INTERACT_OUTSIDE": [
           // == group 1 ==
           {
-            guard: c("isOpenControlled", "isCustomValue", m("allowCustomValue")),
+            guard: d("isOpenControlled", "isCustomValue", v("allowCustomValue")),
             actions: ["revertInputValue", "invokeOnClose"]
           },
           {
-            guard: c("isCustomValue", m("allowCustomValue")),
+            guard: d("isCustomValue", v("allowCustomValue")),
             target: "idle",
             actions: ["revertInputValue", "invokeOnClose"]
           },
@@ -986,7 +1001,7 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         ],
         "ITEM.CLICK": [
           {
-            guard: c("isOpenControlled", "closeOnSelect"),
+            guard: d("isOpenControlled", "closeOnSelect"),
             actions: ["selectItem", "invokeOnClose"]
           },
           {
@@ -1042,133 +1057,164 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         var t;
         return ((t = e.previousEvent) == null ? void 0 : t.type) === "INPUT.CHANGE";
       },
-      autoFocus: ({ prop: e }) => !!e("autoFocus")
+      autoFocus: ({ prop: e }) => !!e("autoFocus"),
+      isHighlightedItemRemoved: ({ prop: e, context: t }) => !e("collection").has(t.get("highlightedValue"))
     },
     effects: {
       trackDismissableLayer({ send: e, prop: t, scope: i }) {
-        return t("disableLayer") ? void 0 : ke(() => T(i), {
+        return t("disableLayer") ? void 0 : be(() => k(i), {
           defer: !0,
-          exclude: () => [y(i), L(i), Z(i)],
+          exclude: () => [L(i), H(i), z(i)],
           onFocusOutside: t("onFocusOutside"),
           onPointerDownOutside: t("onPointerDownOutside"),
           onInteractOutside: t("onInteractOutside"),
-          onEscapeKeyDown(o) {
-            o.preventDefault(), o.stopPropagation(), e({ type: "LAYER.ESCAPE" });
+          onEscapeKeyDown(n) {
+            n.preventDefault(), n.stopPropagation(), e({ type: "LAYER.ESCAPE", src: "escape-key" });
           },
           onDismiss() {
-            e({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: !1 });
+            e({ type: "LAYER.INTERACT_OUTSIDE", src: "interact-outside", restoreFocus: !1 });
           }
         });
       },
       hideOtherElements({ scope: e }) {
-        return Ne([
-          y(e),
-          T(e),
+        return Le([
           L(e),
-          Z(e)
+          k(e),
+          H(e),
+          z(e)
         ]);
       },
       trackPlacement({ context: e, prop: t, scope: i }) {
-        const n = () => X(i) || L(i), o = () => Q(i);
-        return e.set("currentPlacement", t("positioning").placement), q(n, o, {
+        const l = () => Z(i) || H(i), n = () => X(i);
+        return e.set("currentPlacement", t("positioning").placement), Y(l, n, {
           ...t("positioning"),
           defer: !0,
-          onComplete(a) {
-            e.set("currentPlacement", a.placement);
+          onComplete(o) {
+            e.set("currentPlacement", o.placement);
           }
         });
       },
-      // in event the options are fetched (async), we still want to auto-highlight the first option
-      trackChildNodes({ scope: e, computed: t, send: i }) {
-        return t("autoHighlight") ? he(() => T(e), {
-          callback: () => i({ type: "CHILDREN_CHANGE" }),
-          defer: !0
-        }) : void 0;
-      },
-      scrollToHighlightedItem({ context: e, prop: t, scope: i, event: n }) {
-        const o = y(i);
-        let a = [];
-        const r = (O) => {
-          const E = n.current().type.includes("POINTER"), I = e.get("highlightedValue");
-          if (E || !I) return;
-          const P = ae(i, I), v = T(i), S = t("scrollToIndexFn");
-          if (S) {
-            const F = t("collection").indexOf(I);
-            S({ index: F, immediate: O });
+      scrollToHighlightedItem({ context: e, prop: t, scope: i, event: l }) {
+        const n = L(i);
+        let o = [];
+        const s = (I) => {
+          const f = l.current().type.includes("POINTER"), m = e.get("highlightedValue");
+          if (f || !m) return;
+          const T = k(i), O = t("scrollToIndexFn");
+          if (O) {
+            const R = t("collection").indexOf(m);
+            O({
+              index: R,
+              immediate: I,
+              getElement: () => F(i, m)
+            });
             return;
           }
-          const d = f(() => {
-            Ee(P, { rootEl: v, block: "nearest" });
+          const N = F(i, m), h = V(() => {
+            q(N, { rootEl: T, block: "nearest" });
           });
-          a.push(d);
-        }, C = f(() => r(!0));
-        a.push(C);
-        const k = de(o, {
+          o.push(h);
+        }, u = V(() => s(!0));
+        o.push(u);
+        const E = pe(n, {
           attributes: ["aria-activedescendant"],
-          callback: () => r(!1)
+          callback: () => s(!1)
         });
-        return a.push(k), () => {
-          a.forEach((O) => O());
+        return o.push(E), () => {
+          o.forEach((I) => I());
         };
       }
     },
     actions: {
-      reposition({ context: e, prop: t, scope: i, event: n }) {
-        q(() => X(i), () => Q(i), {
+      reposition({ context: e, prop: t, scope: i, event: l }) {
+        Y(() => Z(i), () => X(i), {
           ...t("positioning"),
-          ...n.options,
+          ...l.options,
           defer: !0,
           listeners: !1,
-          onComplete(r) {
-            e.set("currentPlacement", r.placement);
+          onComplete(s) {
+            e.set("currentPlacement", s.placement);
           }
         });
       },
-      setHighlightedItem(e) {
-        const { context: t, event: i } = e;
-        i.value != null && t.set("highlightedValue", i.value);
+      setHighlightedValue({ context: e, event: t }) {
+        t.value != null && e.set("highlightedValue", t.value);
       },
-      clearHighlightedItem(e) {
-        const { context: t } = e;
-        t.set("highlightedValue", null);
+      clearHighlightedValue({ context: e }) {
+        e.set("highlightedValue", null);
       },
       selectHighlightedItem(e) {
-        var a;
-        const { context: t, prop: i } = e, n = t.get("highlightedValue");
-        if (!n) return;
-        const o = i("multiple") ? Y(t.get("value"), n) : [n];
-        (a = i("onSelect")) == null || a({ value: o, itemValue: n }), t.set("value", o), t.set("inputValue", R(e));
+        var u;
+        const { context: t, prop: i } = e, l = i("collection"), n = t.get("highlightedValue");
+        if (!n || !l.has(n)) return;
+        const o = i("multiple") ? j(t.get("value"), n) : [n];
+        (u = i("onSelect")) == null || u({ value: o, itemValue: n }), t.set("value", o);
+        const s = P(i("selectionBehavior"), {
+          preserve: t.get("inputValue"),
+          replace: l.stringifyMany(o),
+          clear: ""
+        });
+        t.set("inputValue", s);
+      },
+      scrollToHighlightedItem({ context: e, prop: t, scope: i }) {
+        he(() => {
+          const l = e.get("highlightedValue");
+          if (l == null) return;
+          const n = F(i, l), o = k(i), s = t("scrollToIndexFn");
+          if (s) {
+            const u = t("collection").indexOf(l);
+            s({
+              index: u,
+              immediate: !0,
+              getElement: () => F(i, l)
+            });
+            return;
+          }
+          q(n, { rootEl: o, block: "nearest" });
+        });
       },
       selectItem(e) {
-        const { context: t, event: i, flush: n, prop: o } = e;
-        i.value != null && n(() => {
-          var r;
-          const a = o("multiple") ? Y(t.get("value"), i.value) : [i.value];
-          (r = o("onSelect")) == null || r({ value: a, itemValue: i.value }), t.set("value", a), t.set("inputValue", R(e));
+        const { context: t, event: i, flush: l, prop: n } = e;
+        i.value != null && l(() => {
+          var u;
+          const o = n("multiple") ? j(t.get("value"), i.value) : [i.value];
+          (u = n("onSelect")) == null || u({ value: o, itemValue: i.value }), t.set("value", o);
+          const s = P(n("selectionBehavior"), {
+            preserve: t.get("inputValue"),
+            replace: n("collection").stringifyMany(o),
+            clear: ""
+          });
+          t.set("inputValue", s);
         });
       },
       clearItem(e) {
-        const { context: t, event: i, flush: n } = e;
-        i.value != null && n(() => {
+        const { context: t, event: i, flush: l, prop: n } = e;
+        i.value != null && l(() => {
           const o = Te(t.get("value"), i.value);
-          t.set("value", o), t.set("inputValue", R(e));
+          t.set("value", o);
+          const s = P(n("selectionBehavior"), {
+            preserve: t.get("inputValue"),
+            replace: n("collection").stringifyMany(o),
+            clear: ""
+          });
+          t.set("inputValue", s);
         });
       },
       setInitialFocus({ scope: e }) {
-        f(() => {
-          z(e);
+        V(() => {
+          ee(e);
         });
       },
       setFinalFocus({ scope: e }) {
-        f(() => {
-          const t = L(e);
-          (t == null ? void 0 : t.dataset.focusable) == null ? z(e) : Re(e);
+        V(() => {
+          const t = H(e);
+          (t == null ? void 0 : t.dataset.focusable) == null ? ee(e) : Re(e);
         });
       },
       syncInputValue({ context: e, scope: t, event: i }) {
-        const n = y(t);
-        n && (n.value = e.get("inputValue"), queueMicrotask(() => {
-          i.current().type !== "INPUT.CHANGE" && ge(n);
+        const l = L(t);
+        l && (l.value = e.get("inputValue"), queueMicrotask(() => {
+          i.current().type !== "INPUT.CHANGE" && de(l);
         }));
       },
       setInputValue({ context: e, event: t }) {
@@ -1178,103 +1224,124 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
         e.set("inputValue", "");
       },
       revertInputValue({ context: e, prop: t, computed: i }) {
-        const n = t("selectionBehavior"), o = D(n, {
-          replace: i("hasSelectedItems") ? e.get("valueAsString") : "",
+        const l = t("selectionBehavior"), n = P(l, {
+          replace: i("hasSelectedItems") ? i("valueAsString") : "",
           preserve: e.get("inputValue"),
           clear: ""
         });
-        e.set("inputValue", o);
+        e.set("inputValue", n);
       },
       setValue(e) {
-        const { context: t, flush: i, event: n } = e;
+        const { context: t, flush: i, event: l, prop: n } = e;
         i(() => {
-          t.set("value", n.value), t.set("inputValue", R(e));
+          t.set("value", l.value);
+          const o = P(n("selectionBehavior"), {
+            preserve: t.get("inputValue"),
+            replace: n("collection").stringifyMany(l.value),
+            clear: ""
+          });
+          t.set("inputValue", o);
         });
       },
       clearSelectedItems(e) {
-        const { context: t, flush: i } = e;
+        const { context: t, flush: i, prop: l } = e;
         i(() => {
-          t.set("value", []), t.set("inputValue", R(e));
+          t.set("value", []);
+          const n = P(l("selectionBehavior"), {
+            preserve: t.get("inputValue"),
+            replace: l("collection").stringifyMany([]),
+            clear: ""
+          });
+          t.set("inputValue", n);
         });
       },
       scrollContentToTop({ prop: e, scope: t }) {
         const i = e("scrollToIndexFn");
-        if (i)
-          i({ index: 0, immediate: !0 });
-        else {
-          const n = T(t);
-          if (!n) return;
-          n.scrollTop = 0;
+        if (i) {
+          const l = e("collection").firstValue;
+          i({
+            index: 0,
+            immediate: !0,
+            getElement: () => F(t, l)
+          });
+        } else {
+          const l = k(t);
+          if (!l) return;
+          l.scrollTop = 0;
         }
       },
-      invokeOnOpen({ prop: e }) {
-        var t;
-        (t = e("onOpenChange")) == null || t({ open: !0 });
+      invokeOnOpen({ prop: e, event: t }) {
+        var l;
+        const i = te(t);
+        (l = e("onOpenChange")) == null || l({ open: !0, reason: i });
       },
-      invokeOnClose({ prop: e }) {
-        var t;
-        (t = e("onOpenChange")) == null || t({ open: !1 });
+      invokeOnClose({ prop: e, event: t }) {
+        var l;
+        const i = te(t);
+        (l = e("onOpenChange")) == null || l({ open: !1, reason: i });
       },
       highlightFirstItem({ context: e, prop: t, scope: i }) {
-        (T(i) ? queueMicrotask : f)(() => {
-          const o = t("collection").firstValue;
-          o && e.set("highlightedValue", o);
+        (k(i) ? queueMicrotask : V)(() => {
+          const n = t("collection").firstValue;
+          n && e.set("highlightedValue", n);
         });
       },
       highlightFirstItemIfNeeded({ computed: e, action: t }) {
         e("autoHighlight") && t(["highlightFirstItem"]);
       },
       highlightLastItem({ context: e, prop: t, scope: i }) {
-        (T(i) ? queueMicrotask : f)(() => {
-          const o = t("collection").lastValue;
-          o && e.set("highlightedValue", o);
+        (k(i) ? queueMicrotask : V)(() => {
+          const n = t("collection").lastValue;
+          n && e.set("highlightedValue", n);
         });
       },
       highlightNextItem({ context: e, prop: t }) {
         let i = null;
-        const n = e.get("highlightedValue"), o = t("collection");
-        n ? (i = o.getNextValue(n), !i && t("loopFocus") && (i = o.firstValue)) : i = o.firstValue, i && e.set("highlightedValue", i);
+        const l = e.get("highlightedValue"), n = t("collection");
+        l ? (i = n.getNextValue(l), !i && t("loopFocus") && (i = n.firstValue)) : i = n.firstValue, i && e.set("highlightedValue", i);
       },
       highlightPrevItem({ context: e, prop: t }) {
         let i = null;
-        const n = e.get("highlightedValue"), o = t("collection");
-        n ? (i = o.getPreviousValue(n), !i && t("loopFocus") && (i = o.lastValue)) : i = o.lastValue, i && e.set("highlightedValue", i);
+        const l = e.get("highlightedValue"), n = t("collection");
+        l ? (i = n.getPreviousValue(l), !i && t("loopFocus") && (i = n.lastValue)) : i = n.lastValue, i && e.set("highlightedValue", i);
       },
       highlightFirstSelectedItem({ context: e, prop: t }) {
-        f(() => {
+        V(() => {
           const [i] = t("collection").sort(e.get("value"));
           i && e.set("highlightedValue", i);
         });
       },
       highlightFirstOrSelectedItem({ context: e, prop: t, computed: i }) {
-        f(() => {
-          let n = null;
-          i("hasSelectedItems") ? n = t("collection").sort(e.get("value"))[0] : n = t("collection").firstValue, n && e.set("highlightedValue", n);
+        V(() => {
+          let l = null;
+          i("hasSelectedItems") ? l = t("collection").sort(e.get("value"))[0] : l = t("collection").firstValue, l && e.set("highlightedValue", l);
         });
       },
       highlightLastOrSelectedItem({ context: e, prop: t, computed: i }) {
-        f(() => {
-          const n = t("collection");
-          let o = null;
-          i("hasSelectedItems") ? o = n.sort(e.get("value"))[0] : o = n.lastValue, o && e.set("highlightedValue", o);
+        V(() => {
+          const l = t("collection");
+          let n = null;
+          i("hasSelectedItems") ? n = l.sort(e.get("value"))[0] : n = l.lastValue, n && e.set("highlightedValue", n);
         });
       },
-      autofillInputValue({ context: e, computed: t, prop: i, event: n, scope: o }) {
-        const a = y(o), r = i("collection");
-        if (!t("autoComplete") || !a || !n.keypress) return;
-        const C = r.stringify(e.get("highlightedValue"));
-        f(() => {
-          a.value = C || e.get("inputValue");
+      autofillInputValue({ context: e, computed: t, prop: i, event: l, scope: n }) {
+        const o = L(n), s = i("collection");
+        if (!t("autoComplete") || !o || !l.keypress) return;
+        const u = s.stringify(e.get("highlightedValue"));
+        V(() => {
+          o.value = u || e.get("inputValue");
         });
       },
       syncSelectedItems(e) {
         queueMicrotask(() => {
-          const { context: t, prop: i } = e, n = D(i("selectionBehavior"), {
+          const { context: t, prop: i } = e, l = i("collection"), n = t.get("value"), o = n.map((u) => t.get("selectedItems").find((I) => l.getItemValue(I) === u) || l.find(u));
+          t.set("selectedItems", o);
+          const s = P(i("selectionBehavior"), {
             preserve: t.get("inputValue"),
-            replace: i("collection").stringifyMany(t.get("value")),
+            replace: l.stringifyMany(n),
             clear: ""
           });
-          t.set("selectedItems", Me(e)), t.set("inputValue", n);
+          t.set("inputValue", s);
         });
       },
       syncHighlightedItem({ context: e, prop: t }) {
@@ -1287,19 +1354,8 @@ var { guards: He, createMachine: Ue, choose: De } = be(), { and: c, not: m } = H
     }
   }
 });
-function R({ context: e, prop: t }) {
-  return D(t("selectionBehavior"), {
-    preserve: e.get("inputValue"),
-    replace: e.get("valueAsString"),
-    clear: ""
-  });
-}
-function Me({ context: e, prop: t }) {
-  const i = t("collection");
-  return e.get("value").map((n) => {
-    const o = e.get("selectedItems").find((a) => i.getItemValue(a) === n);
-    return o || i.find(n);
-  });
+function te(e) {
+  return (e.previousEvent || e).src;
 }
 G()([
   "allowCustomValue",
@@ -1352,8 +1408,8 @@ G()(["htmlFor"]);
 G()(["id"]);
 G()(["item", "persistFocus"]);
 export {
-  Le as anatomy,
-  te as collection,
-  Ye as connect,
-  je as machine
+  Ne as anatomy,
+  le as collection,
+  qe as connect,
+  Ye as machine
 };