@televet/kibble-ui 4.0.0-beta.99 → 4.0.0

package/dist/chunks/{index-BRBNqTA7.js → index-CJEisKZA.js}

@@ -1,14 +1,14 @@
-import { j as z, L as M, M as w, c as oe, z as ue, N as Y, r as x, g as de, o as ce, t as he, C as ge, O as B, P as me, b as fe, Q as Ie, R as pe, q as j, E as ve, S as Ee, w as ye, d as h, k as Te, T as Oe } from "./index-Ztgrae6O.js";
-import { g as J, d as Re, b as L } from "./use-locale-context-BNU4MHrO.js";
-var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t, u = (e, s, t) => Ve(e, typeof s != "symbol" ? s + "" : s, t), F = {
+import { k as z, M as x, N as M, c as oe, A as ue, O as Y, r as w, g as de, o as ce, t as he, E as ge, P as B, Q as me, b as pe, R as fe, S as Ie, u as j, H as Ee, T as ve, x as ye, d as h, l as Te, U as Oe } from "./index-DtPX2rUg.js";
+import { g as J, d as Re, b as F } from "./use-locale-context-CGfkkp7X.js";
+var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t, u = (e, s, t) => Ve(e, typeof s != "symbol" ? s + "" : s, t), P = {
   itemToValue(e) {
-    return typeof e == "string" ? e : M(e) && w(e, "value") ? e.value : "";
+    return typeof e == "string" ? e : x(e) && M(e, "value") ? e.value : "";
   },
   itemToString(e) {
-    return typeof e == "string" ? e : M(e) && w(e, "label") ? e.label : F.itemToValue(e);
+    return typeof e == "string" ? e : x(e) && M(e, "label") ? e.label : P.itemToValue(e);
   },
   isItemDisabled(e) {
-    return M(e) && w(e, "disabled") ? !!e.disabled : !1;
+    return x(e) && M(e, "disabled") ? !!e.disabled : !1;
   }
 }, ee = class te {
   constructor(s) {
@@ -30,7 +30,7 @@ var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable
     }), u(this, "sortFn", (t, i) => {
       const l = this.indexOf(t), n = this.indexOf(i);
       return (l ?? 0) - (n ?? 0);
-    }), u(this, "sort", (t) => [...t].sort(this.sortFn.bind(this))), u(this, "getItemValue", (t) => t == null ? null : this.options.itemToValue?.(t) ?? F.itemToValue(t)), u(this, "getItemDisabled", (t) => t == null ? !1 : this.options.isItemDisabled?.(t) ?? F.isItemDisabled(t)), u(this, "stringifyItem", (t) => t == null ? null : this.options.itemToString?.(t) ?? F.itemToString(t)), u(this, "stringify", (t) => t == null ? null : this.stringifyItem(this.find(t))), u(this, "stringifyItems", (t, i = ", ") => Array.from(t).map((l) => this.stringifyItem(l)).filter(Boolean).join(i)), u(this, "stringifyMany", (t, i) => this.stringifyItems(this.findMany(t), i)), u(this, "has", (t) => this.indexOf(t) !== -1), u(this, "hasItem", (t) => t == null ? !1 : this.has(this.getItemValue(t))), u(this, "group", () => {
+    }), u(this, "sort", (t) => [...t].sort(this.sortFn.bind(this))), u(this, "getItemValue", (t) => t == null ? null : this.options.itemToValue?.(t) ?? P.itemToValue(t)), u(this, "getItemDisabled", (t) => t == null ? !1 : this.options.isItemDisabled?.(t) ?? P.isItemDisabled(t)), u(this, "stringifyItem", (t) => t == null ? null : this.options.itemToString?.(t) ?? P.itemToString(t)), u(this, "stringify", (t) => t == null ? null : this.stringifyItem(this.find(t))), u(this, "stringifyItems", (t, i = ", ") => Array.from(t).map((l) => this.stringifyItem(l)).filter(Boolean).join(i)), u(this, "stringifyMany", (t, i) => this.stringifyItems(this.findMany(t), i)), u(this, "has", (t) => this.indexOf(t) !== -1), u(this, "hasItem", (t) => t == null ? !1 : this.has(this.getItemValue(t))), u(this, "group", () => {
       const { groupBy: t, groupSort: i } = this.options;
       if (!t) return [["", [...this.items]]];
       const l = /* @__PURE__ */ new Map();
@@ -73,19 +73,22 @@ var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable
       let l = i != null ? Se(this.items, this.indexOf(i)) : this.items;
       return t.length === 1 && (l = l.filter((o) => this.getItemValue(o) !== i)), l.find((o) => be(this.stringifyItem(o), t));
     }), u(this, "search", (t, i) => {
-      const { state: l, currentValue: n, timeout: o = 350 } = i, r = l.keysSoFar + t, m = r.length > 1 && Array.from(r).every((E) => E === r[0]) ? r[0] : r, v = this.getByText(m, n), I = this.getItemValue(v);
+      const { state: l, currentValue: n, timeout: o = 350 } = i, r = l.keysSoFar + t, m = r.length > 1 && Array.from(r).every((v) => v === r[0]) ? r[0] : r, E = this.getByText(m, n), f = this.getItemValue(E);
       function y() {
         clearTimeout(l.timer), l.timer = -1;
       }
-      function p(E) {
-        l.keysSoFar = E, y(), E !== "" && (l.timer = +setTimeout(() => {
-          p(""), y();
+      function I(v) {
+        l.keysSoFar = v, y(), v !== "" && (l.timer = +setTimeout(() => {
+          I(""), y();
         }, o));
       }
-      return p(r), I;
+      return I(r), f;
     }), u(this, "update", (t, i) => {
-      let l = this.items.findIndex((n) => this.getItemValue(n) === t);
+      let l = this.indexOf(t);
       return l === -1 ? this : this.copy([...this.items.slice(0, l), i, ...this.items.slice(l + 1)]);
+    }), u(this, "upsert", (t, i, l = "append") => {
+      let n = this.indexOf(t);
+      return n === -1 ? (l === "append" ? this.append : this.prepend)(i) : this.copy([...this.items.slice(0, n), i, ...this.items.slice(n + 1)]);
     }), u(this, "insert", (t, ...i) => this.copy(V(this.items, t, ...i))), u(this, "insertBefore", (t, ...i) => {
       let l = this.indexOf(t);
       if (l === -1)
@@ -99,7 +102,7 @@ var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable
         else return this;
       return this.copy(V(this.items, l + 1, ...i));
     }), u(this, "prepend", (...t) => this.copy(V(this.items, 0, ...t))), u(this, "append", (...t) => this.copy(V(this.items, this.items.length, ...t))), u(this, "filter", (t) => {
-      const i = this.items.filter((l, n) => t(this.stringifyItem(l), n));
+      const i = this.items.filter((l, n) => t(this.stringifyItem(l), n, l));
       return this.copy(i);
     }), u(this, "remove", (...t) => {
       const i = t.map(
@@ -113,18 +116,18 @@ var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable
       );
     }), u(this, "move", (t, i) => {
       const l = this.indexOf(t);
-      return l === -1 ? this : this.copy(A(this.items, [l], i));
+      return l === -1 ? this : this.copy(L(this.items, [l], i));
     }), u(this, "moveBefore", (t, ...i) => {
       let l = this.items.findIndex((o) => this.getItemValue(o) === t);
       if (l === -1) return this;
       let n = i.map((o) => this.items.findIndex((r) => this.getItemValue(r) === o)).sort((o, r) => o - r);
-      return this.copy(A(this.items, n, l));
+      return this.copy(L(this.items, n, l));
     }), u(this, "moveAfter", (t, ...i) => {
       let l = this.items.findIndex((o) => this.getItemValue(o) === t);
       if (l === -1) return this;
       let n = i.map((o) => this.items.findIndex((r) => this.getItemValue(r) === o)).sort((o, r) => o - r);
-      return this.copy(A(this.items, n, l + 1));
-    }), u(this, "reorder", (t, i) => this.copy(A(this.items, [t], i))), u(this, "compareValue", (t, i) => {
+      return this.copy(L(this.items, n, l + 1));
+    }), u(this, "reorder", (t, i) => this.copy(L(this.items, [t], i))), u(this, "compareValue", (t, i) => {
       const l = this.indexOf(t), n = this.indexOf(i);
       return l < n ? -1 : l > n ? 1 : 0;
     }), u(this, "range", (t, i) => {
@@ -176,14 +179,14 @@ var Ce = Object.defineProperty, Ve = (e, s, t) => s in e ? Ce(e, s, { enumerable
 function V(e, s, ...t) {
   return [...e.slice(0, s), ...t, ...e.slice(s)];
 }
-function A(e, s, t) {
+function L(e, s, t) {
   s = [...s].sort((l, n) => l - n);
   const i = s.map((l) => e[l]);
   for (let l = s.length - 1; l >= 0; l--)
     e = [...e.slice(0, s[l]), ...e.slice(s[l] + 1)];
   return t = Math.max(0, t - s.filter((l) => l < t).length), [...e.slice(0, t), ...i, ...e.slice(t)];
 }
-var Ge = fe("select").parts(
+var Ge = pe("select").parts(
   "label",
   "positioner",
   "trigger",
@@ -199,11 +202,11 @@ var Ge = fe("select").parts(
   "root",
   "control",
   "valueText"
-), f = Ge.build(), ie = (e) => new ee(e);
+), p = Ge.build(), ie = (e) => new ee(e);
 ie.empty = () => new ee({ items: [] });
-var Ae = (e) => e.ids?.root ?? `select:${e.id}`, W = (e) => e.ids?.content ?? `select:${e.id}:content`, U = (e) => e.ids?.trigger ?? `select:${e.id}:trigger`, se = (e) => e.ids?.clearTrigger ?? `select:${e.id}:clear-trigger`, P = (e) => e.ids?.label ?? `select:${e.id}:label`, Pe = (e) => e.ids?.control ?? `select:${e.id}:control`, K = (e, s) => e.ids?.item?.(s) ?? `select:${e.id}:option:${s}`, $ = (e) => e.ids?.hiddenSelect ?? `select:${e.id}:select`, le = (e) => e.ids?.positioner ?? `select:${e.id}:positioner`, Fe = (e, s) => e.ids?.itemGroup?.(s) ?? `select:${e.id}:optgroup:${s}`, Q = (e, s) => e.ids?.itemGroupLabel?.(s) ?? `select:${e.id}:optgroup-label:${s}`, _ = (e) => e.getById($(e)), b = (e) => e.getById(W(e)), O = (e) => e.getById(U(e)), Le = (e) => e.getById(se(e)), X = (e) => e.getById(le(e)), Ne = (e, s) => e.getById(K(e, s));
-function Me(e, s) {
-  const { context: t, prop: i, scope: l, state: n, computed: o, send: r } = e, c = i("disabled") || t.get("fieldsetDisabled"), m = i("invalid"), v = i("readOnly"), I = i("composite"), y = i("collection"), p = n.hasTag("open"), E = n.matches("focused"), C = t.get("highlightedValue"), ne = t.get("highlightedItem"), re = t.get("selectedItems"), N = t.get("currentPlacement"), q = o("isTypingAhead"), k = o("isInteractive"), D = C ? K(l, C) : void 0;
+var Le = (e) => e.ids?.root ?? `select:${e.id}`, U = (e) => e.ids?.content ?? `select:${e.id}:content`, W = (e) => e.ids?.trigger ?? `select:${e.id}:trigger`, se = (e) => e.ids?.clearTrigger ?? `select:${e.id}:clear-trigger`, A = (e) => e.ids?.label ?? `select:${e.id}:label`, Ae = (e) => e.ids?.control ?? `select:${e.id}:control`, K = (e, s) => e.ids?.item?.(s) ?? `select:${e.id}:option:${s}`, $ = (e) => e.ids?.hiddenSelect ?? `select:${e.id}:select`, le = (e) => e.ids?.positioner ?? `select:${e.id}:positioner`, Pe = (e, s) => e.ids?.itemGroup?.(s) ?? `select:${e.id}:optgroup:${s}`, Q = (e, s) => e.ids?.itemGroupLabel?.(s) ?? `select:${e.id}:optgroup-label:${s}`, _ = (e) => e.getById($(e)), b = (e) => e.getById(U(e)), O = (e) => e.getById(W(e)), Fe = (e) => e.getById(se(e)), X = (e) => e.getById(le(e)), Ne = (e, s) => e.getById(K(e, s));
+function xe(e, s) {
+  const { context: t, prop: i, scope: l, state: n, computed: o, send: r } = e, c = i("disabled") || t.get("fieldsetDisabled"), m = i("invalid"), E = i("readOnly"), f = i("composite"), y = i("collection"), I = n.hasTag("open"), v = n.matches("focused"), C = t.get("highlightedValue"), ne = t.get("highlightedItem"), re = t.get("selectedItems"), N = t.get("currentPlacement"), q = o("isTypingAhead"), H = o("isInteractive"), k = C ? K(l, C) : void 0;
   function G(a) {
     const d = y.getItemDisabled(a.item), g = y.getItemValue(a.item);
     return Oe(g, () => `[zag-js] No value found for item ${JSON.stringify(a.item)}`), {
@@ -218,15 +221,15 @@ function Me(e, s) {
     placement: N
   });
   return {
-    open: p,
-    focused: E,
+    open: I,
+    focused: v,
     empty: t.get("value").length === 0,
     highlightedItem: ne,
     highlightedValue: C,
     selectedItems: re,
     hasSelectedItems: o("hasSelectedItems"),
     value: t.get("value"),
-    valueAsString: t.get("valueAsString"),
+    valueAsString: o("valueAsString"),
     collection: y,
     multiple: !!i("multiple"),
     disabled: !!c,
@@ -248,30 +251,33 @@ function Me(e, s) {
     selectAll() {
       r({ type: "VALUE.SET", value: y.getValues() });
     },
-    highlightValue(a) {
+    setHighlightValue(a) {
       r({ type: "HIGHLIGHTED_VALUE.SET", value: a });
     },
+    clearHighlightValue() {
+      r({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+    },
     clearValue(a) {
       r(a ? { type: "ITEM.CLEAR", value: a } : { type: "VALUE.CLEAR" });
     },
     getItemState: G,
     getRootProps() {
       return s.element({
-        ...f.root.attrs,
+        ...p.root.attrs,
         dir: i("dir"),
-        id: Ae(l),
+        id: Le(l),
         "data-invalid": h(m),
-        "data-readonly": h(v)
+        "data-readonly": h(E)
       });
     },
     getLabelProps() {
       return s.label({
         dir: i("dir"),
-        id: P(l),
-        ...f.label.attrs,
+        id: A(l),
+        ...p.label.attrs,
         "data-disabled": h(c),
         "data-invalid": h(m),
-        "data-readonly": h(v),
+        "data-readonly": h(E),
         htmlFor: $(l),
         onClick(a) {
           a.defaultPrevented || c || O(l)?.focus({ preventScroll: !0 });
@@ -280,45 +286,45 @@ function Me(e, s) {
     },
     getControlProps() {
       return s.element({
-        ...f.control.attrs,
+        ...p.control.attrs,
         dir: i("dir"),
-        id: Pe(l),
-        "data-state": p ? "open" : "closed",
-        "data-focus": h(E),
+        id: Ae(l),
+        "data-state": I ? "open" : "closed",
+        "data-focus": h(v),
         "data-disabled": h(c),
         "data-invalid": h(m)
       });
     },
     getValueTextProps() {
       return s.element({
-        ...f.valueText.attrs,
+        ...p.valueText.attrs,
         dir: i("dir"),
         "data-disabled": h(c),
         "data-invalid": h(m),
-        "data-focus": h(E)
+        "data-focus": h(v)
       });
     },
     getTriggerProps() {
       return s.button({
-        id: U(l),
+        id: W(l),
         disabled: c,
         dir: i("dir"),
         type: "button",
         role: "combobox",
-        "aria-controls": W(l),
-        "aria-expanded": p,
+        "aria-controls": U(l),
+        "aria-expanded": I,
         "aria-haspopup": "listbox",
-        "data-state": p ? "open" : "closed",
+        "data-state": I ? "open" : "closed",
         "aria-invalid": m,
-        "aria-labelledby": P(l),
-        ...f.trigger.attrs,
+        "aria-labelledby": A(l),
+        ...p.trigger.attrs,
         "data-disabled": h(c),
         "data-invalid": h(m),
-        "data-readonly": h(v),
+        "data-readonly": h(E),
         "data-placement": N,
         "data-placeholder-shown": h(!o("hasSelectedItems")),
         onClick(a) {
-          k && (a.defaultPrevented || r({ type: "TRIGGER.CLICK" }));
+          H && (a.defaultPrevented || r({ type: "TRIGGER.CLICK" }));
         },
         onFocus() {
           r({ type: "TRIGGER.FOCUS" });
@@ -327,7 +333,7 @@ function Me(e, s) {
           r({ type: "TRIGGER.BLUR" });
         },
         onKeyDown(a) {
-          if (a.defaultPrevented || !k) return;
+          if (a.defaultPrevented || !H) return;
           const g = {
             ArrowUp() {
               r({ type: "TRIGGER.ARROW_UP" });
@@ -367,13 +373,13 @@ function Me(e, s) {
     },
     getIndicatorProps() {
       return s.element({
-        ...f.indicator.attrs,
+        ...p.indicator.attrs,
         dir: i("dir"),
         "aria-hidden": !0,
-        "data-state": p ? "open" : "closed",
+        "data-state": I ? "open" : "closed",
         "data-disabled": h(c),
         "data-invalid": h(m),
-        "data-readonly": h(v)
+        "data-readonly": h(E)
       });
     },
     getItemProps(a) {
@@ -381,7 +387,7 @@ function Me(e, s) {
       return s.element({
         id: K(l, d.value),
         role: "option",
-        ...f.item.attrs,
+        ...p.item.attrs,
         dir: i("dir"),
         "data-value": d.value,
         "aria-selected": d.selected,
@@ -403,7 +409,7 @@ function Me(e, s) {
     getItemTextProps(a) {
       const d = G(a);
       return s.element({
-        ...f.itemText.attrs,
+        ...p.itemText.attrs,
         "data-state": d.selected ? "checked" : "unchecked",
         "data-disabled": h(d.disabled),
         "data-highlighted": h(d.highlighted)
@@ -413,7 +419,7 @@ function Me(e, s) {
       const d = G(a);
       return s.element({
         "aria-hidden": !0,
-        ...f.itemIndicator.attrs,
+        ...p.itemIndicator.attrs,
         "data-state": d.selected ? "checked" : "unchecked",
         hidden: !d.selected
       });
@@ -421,7 +427,7 @@ function Me(e, s) {
     getItemGroupLabelProps(a) {
       const { htmlFor: d } = a;
       return s.element({
-        ...f.itemGroupLabel.attrs,
+        ...p.itemGroupLabel.attrs,
         id: Q(l, d),
         dir: i("dir"),
         role: "presentation"
@@ -430,9 +436,9 @@ function Me(e, s) {
     getItemGroupProps(a) {
       const { id: d } = a;
       return s.element({
-        ...f.itemGroup.attrs,
+        ...p.itemGroup.attrs,
         "data-disabled": h(c),
-        id: Fe(l, d),
+        id: Pe(l, d),
         "aria-labelledby": Q(l, d),
         role: "group",
         dir: i("dir")
@@ -440,7 +446,7 @@ function Me(e, s) {
     },
     getClearTriggerProps() {
       return s.button({
-        ...f.clearTrigger.attrs,
+        ...p.clearTrigger.attrs,
         id: se(l),
         type: "button",
         "aria-label": "Clear value",
@@ -471,12 +477,12 @@ function Me(e, s) {
         onFocus() {
           O(l)?.focus({ preventScroll: !0 });
         },
-        "aria-labelledby": P(l)
+        "aria-labelledby": A(l)
       });
     },
     getPositionerProps() {
       return s.element({
-        ...f.positioner.attrs,
+        ...p.positioner.attrs,
         dir: i("dir"),
         id: le(l),
         style: ae.floating
@@ -484,21 +490,21 @@ function Me(e, s) {
     },
     getContentProps() {
       return s.element({
-        hidden: !p,
+        hidden: !I,
         dir: i("dir"),
-        id: W(l),
-        role: I ? "listbox" : "dialog",
-        ...f.content.attrs,
-        "data-state": p ? "open" : "closed",
+        id: U(l),
+        role: f ? "listbox" : "dialog",
+        ...p.content.attrs,
+        "data-state": I ? "open" : "closed",
         "data-placement": N,
-        "data-activedescendant": D,
-        "aria-activedescendant": I ? D : void 0,
-        "aria-multiselectable": i("multiple") && I ? !0 : void 0,
-        "aria-labelledby": P(l),
+        "data-activedescendant": k,
+        "aria-activedescendant": f ? k : void 0,
+        "aria-multiselectable": i("multiple") && f ? !0 : void 0,
+        "aria-labelledby": A(l),
         tabIndex: 0,
         onKeyDown(a) {
-          if (!k || !Ie(a)) return;
-          if (a.key === "Tab" && !pe(a)) {
+          if (!H || !fe(a)) return;
+          if (a.key === "Tab" && !Ie(a)) {
             a.preventDefault();
             return;
           }
@@ -518,32 +524,32 @@ function Me(e, s) {
             Enter() {
               r({ type: "ITEM.CLICK", src: "keydown.enter" });
             },
-            Space(H) {
-              q ? r({ type: "CONTENT.TYPEAHEAD", key: H.key }) : d.Enter?.(H);
+            Space(D) {
+              q ? r({ type: "CONTENT.TYPEAHEAD", key: D.key }) : d.Enter?.(D);
             }
           }, g = d[j(a)];
           if (g) {
             g(a), a.preventDefault();
             return;
           }
-          const R = ve(a);
-          Ee(R) || B.isValidEvent(a) && (r({ type: "CONTENT.TYPEAHEAD", key: a.key }), a.preventDefault());
+          const R = Ee(a);
+          ve(R) || B.isValidEvent(a) && (r({ type: "CONTENT.TYPEAHEAD", key: a.key }), a.preventDefault());
         }
       });
     },
     getListProps() {
       return s.element({
-        ...f.list.attrs,
+        ...p.list.attrs,
         tabIndex: 0,
-        role: I ? void 0 : "listbox",
-        "aria-labelledby": U(l),
-        "aria-activedescendant": I ? void 0 : D,
-        "aria-multiselectable": !I && i("multiple") ? !0 : void 0
+        role: f ? void 0 : "listbox",
+        "aria-labelledby": W(l),
+        "aria-activedescendant": f ? void 0 : k,
+        "aria-multiselectable": !f && i("multiple") ? !0 : void 0
       });
     }
   };
 }
-var { and: S, not: T, or: ke } = ue(), we = oe({
+var { and: S, not: T, or: He } = ue(), Me = oe({
   props({ props: e }) {
     return {
       loopFocus: !1,
@@ -593,10 +599,6 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
       selectedItems: s(() => {
         const t = e("value") ?? e("defaultValue") ?? [];
         return { defaultValue: e("collection").findMany(t) };
-      }),
-      valueAsString: s(() => {
-        const t = e("value") ?? e("defaultValue") ?? [];
-        return { defaultValue: e("collection").stringifyMany(t) };
       })
     };
   },
@@ -609,7 +611,8 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
     hasSelectedItems: ({ context: e }) => e.get("value").length > 0,
     isTypingAhead: ({ refs: e }) => e.get("typeahead").keysSoFar !== "",
     isDisabled: ({ prop: e, context: s }) => !!e("disabled") || !!s.get("fieldsetDisabled"),
-    isInteractive: ({ prop: e }) => !(e("disabled") || e("readOnly"))
+    isInteractive: ({ prop: e }) => !(e("disabled") || e("readOnly")),
+    valueAsString: ({ context: e, prop: s }) => s("collection").stringifyItems(e.get("selectedItems"))
   },
   initialState({ prop: e }) {
     return e("open") || e("defaultOpen") ? "open" : "idle";
@@ -630,6 +633,9 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
     "HIGHLIGHTED_VALUE.SET": {
       actions: ["setHighlightedItem"]
     },
+    "HIGHLIGHTED_VALUE.CLEAR": {
+      actions: ["clearHighlightedItem"]
+    },
     "ITEM.SELECT": {
       actions: ["selectItem"]
     },
@@ -702,7 +708,7 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
             actions: ["setInitialFocus", "highlightComputedLastItem"]
           },
           {
-            guard: ke("isTriggerArrowDownEvent", "isTriggerEnterEvent"),
+            guard: He("isTriggerArrowDownEvent", "isTriggerEnterEvent"),
             target: "open",
             actions: ["setInitialFocus", "highlightComputedFirstItem"]
           },
@@ -934,7 +940,7 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         let l = !0;
         return he(i, {
           defer: !0,
-          exclude: [O(e), Le(e)],
+          exclude: [O(e), Fe(e)],
           onFocusOutside: t("onFocusOutside"),
           onPointerDownOutside: t("onPointerDownOutside"),
           onInteractOutside(n) {
@@ -959,15 +965,15 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         const l = (o) => {
           const r = e.get("highlightedValue");
           if (r == null || i.current().type.includes("POINTER")) return;
-          const c = Ne(t, r), m = b(t), v = s("scrollToIndexFn");
-          if (v) {
-            const I = s("collection").indexOf(r);
-            v?.({ index: I, immediate: o });
+          const c = Ne(t, r), m = b(t), E = s("scrollToIndexFn");
+          if (E) {
+            const f = s("collection").indexOf(r);
+            E?.({ index: f, immediate: o });
             return;
           }
           me(c, { rootEl: m, block: "nearest" });
         };
-        return x(() => l(!0)), ce(() => b(t), {
+        return w(() => l(!0)), ce(() => b(t), {
           defer: !0,
           attributes: ["data-activedescendant"],
           callback() {
@@ -996,13 +1002,13 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         const t = e.get("highlightedValue");
         if (t == null) return;
         const i = s("collection").getPreviousValue(t, 1, s("loopFocus"));
-        e.set("highlightedValue", i);
+        i != null && e.set("highlightedValue", i);
       },
       highlightNextItem({ context: e, prop: s }) {
         const t = e.get("highlightedValue");
         if (t == null) return;
         const i = s("collection").getNextValue(t, 1, s("loopFocus"));
-        e.set("highlightedValue", i);
+        i != null && e.set("highlightedValue", i);
       },
       highlightFirstItem({ context: e, prop: s }) {
         const t = s("collection").firstValue;
@@ -1013,21 +1019,21 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         e.set("highlightedValue", t);
       },
       setInitialFocus({ scope: e }) {
-        x(() => {
+        w(() => {
           de({
             root: b(e)
           })?.focus({ preventScroll: !0 });
         });
       },
       focusTriggerEl({ event: e, scope: s }) {
-        Z(e) && x(() => {
+        Z(e) && w(() => {
           O(s)?.focus({ preventScroll: !0 });
         });
       },
       selectHighlightedItem({ context: e, prop: s, event: t }) {
         let i = t.value ?? e.get("highlightedValue");
-        if (i == null) return;
-        i = s("deselectable") && !s("multiple") && e.get("value").includes(i) ? null : i, e.set("value", (n) => i == null ? [] : s("multiple") ? Y(n, i) : [i]);
+        if (i == null || !s("collection").has(i)) return;
+        s("onSelect")?.({ value: i }), i = s("deselectable") && !s("multiple") && e.get("value").includes(i) ? null : i, e.set("value", (n) => i == null ? [] : s("multiple") ? Y(n, i) : [i]);
       },
       highlightComputedFirstItem({ context: e, prop: s, computed: t }) {
         const i = s("collection"), l = t("hasSelectedItems") ? i.sort(e.get("value"))[0] : i.firstValue;
@@ -1059,6 +1065,7 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         e.set("highlightedValue", null);
       },
       selectItem({ context: e, prop: s, event: t }) {
+        s("onSelect")?.({ value: t.value });
         const l = s("deselectable") && !s("multiple") && e.get("value").includes(t.value) ? null : t.value;
         e.set("value", (n) => l == null ? [] : s("multiple") ? Y(n, l) : [l]);
       },
@@ -1119,12 +1126,10 @@ var { and: S, not: T, or: ke } = ue(), we = oe({
         i && e.set("highlightedItem", i);
         const l = t.findMany(e.get("value"));
         e.set("selectedItems", l);
-        const n = t.stringifyItems(l);
-        e.set("valueAsString", n);
       },
       syncSelectedItems({ context: e, prop: s }) {
         const t = s("collection"), i = e.get("selectedItems"), n = e.get("value").map((o) => i.find((c) => t.getItemValue(c) === o) || t.find(o));
-        e.set("selectedItems", n), e.set("valueAsString", t.stringifyItems(n));
+        e.set("selectedItems", n);
       },
       syncHighlightedItem({ context: e, prop: s }) {
         const t = s("collection"), i = e.get("highlightedValue"), l = i ? t.find(i) : null;
@@ -1145,12 +1150,16 @@ function Z(e) {
   const s = e.restoreFocus ?? e.previousEvent?.restoreFocus;
   return s == null || !!s;
 }
-L()([
+F()([
   "closeOnSelect",
   "collection",
+  "composite",
+  "defaultHighlightedValue",
+  "defaultOpen",
+  "defaultValue",
+  "deselectable",
   "dir",
   "disabled",
-  "deselectable",
   "form",
   "getRootNode",
   "highlightedValue",
@@ -1165,25 +1174,22 @@ L()([
   "onInteractOutside",
   "onOpenChange",
   "onPointerDownOutside",
+  "onSelect",
   "onValueChange",
-  "defaultOpen",
   "open",
-  "composite",
   "positioning",
-  "required",
   "readOnly",
+  "required",
   "scrollToIndexFn",
-  "value",
-  "defaultValue",
-  "defaultHighlightedValue"
+  "value"
 ]);
-L()(["item", "persistFocus"]);
-L()(["id"]);
-L()(["htmlFor"]);
+F()(["item", "persistFocus"]);
+F()(["id"]);
+F()(["htmlFor"]);
 export {
   ee as L,
   Ge as a,
-  Me as c,
-  we as m
+  xe as c,
+  Me as m
 };
-//# sourceMappingURL=index-BRBNqTA7.js.map
+//# sourceMappingURL=index-CJEisKZA.js.map