bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/BbDropdown/BbDropdownList.vue_vue_type_script_setup_true_lang.js

@@ -4,18 +4,19 @@ import n from "../CommonPopover/CommonPopover.vue.js";
 import { useSheetSurface as r } from "../../composables/useSheetSurface.js";
 import i from "../BbBaseButton/BbBaseButton.vue.js";
 import { BB_BASE_BUTTON_PROP_KEYS as a } from "../BbBaseButton/types.js";
-import o from "../BbIcon/BbIcon.vue.js";
-import { matchAnyKey as s } from "../../utilities/functions/matchAnyKey.js";
+import { useLocale as o } from "../../composables/useLocale.js";
+import s from "../BbIcon/BbIcon.vue.js";
+import ee from "../BbBadge/BbBadge.vue.js";
+import { matchAnyKey as te } from "../../utilities/functions/matchAnyKey.js";
 import { slotKey as c } from "../../utilities/functions/slotKey.js";
-import ee from "../../assets/svgs/check_stroke.svg_raw.js";
-import te from "../../assets/svgs/chevron_right.svg_raw.js";
-import ne from "../../assets/svgs/search.svg_raw.js";
-import { useImeDismissBlur as re } from "../../composables/useImeDismissBlur.js";
-import { useLocale as ie } from "../../composables/useLocale.js";
-import { levelHasSearch as ae, normalizeGroups as oe } from "./normalizeGroups.js";
-import { useDropdownContext as se } from "./useDropdownContext.js";
-import ce from "./BbDropdownList.vue.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as le, createVNode as h, defineComponent as ue, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as de, onBeforeUnmount as fe, onMounted as pe, openBlock as y, ref as b, renderList as me, resolveDynamicComponent as x, toDisplayString as S, unref as C, watch as he, watchEffect as ge, withCtx as w, withKeys as T, withModifiers as E } from "vue";
+import ne from "../../assets/svgs/check_stroke.svg_raw.js";
+import re from "../../assets/svgs/chevron_right.svg_raw.js";
+import ie from "../../assets/svgs/search.svg_raw.js";
+import { useImeDismissBlur as ae } from "../../composables/useImeDismissBlur.js";
+import { levelHasSearch as oe, normalizeGroups as se } from "./normalizeGroups.js";
+import { useDropdownContext as ce } from "./useDropdownContext.js";
+import le from "./BbDropdownList.vue.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as ue, createVNode as h, defineComponent as de, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as fe, onBeforeUnmount as pe, onMounted as me, openBlock as y, ref as b, renderList as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, watch as he, watchEffect as ge, withCtx as T, withKeys as E, withModifiers as D } from "vue";
 //#region src/components/BbDropdown/BbDropdownList.vue?vue&type=script&setup=true&lang.ts
 var _e = {
 	key: 0,
@@ -32,35 +33,38 @@ var _e = {
 	class: "group-title__content"
 }, be = {
 	key: 2,
+	class: "bb-dropdown__sheet-selection"
+}, xe = { class: "bb-dropdown__sheet-chips" }, Se = {
+	key: 3,
 	class: "bb-dropdown__group-search",
 	role: "none"
-}, xe = [
+}, Ce = [
 	"aria-label",
 	"placeholder",
 	"value",
 	"onInput",
 	"onKeydown"
-], Se = {
+], we = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "bb-dropdown__group-loading"
-}, Ce = ["aria-labelledby", "role"], we = {
+}, Te = ["aria-labelledby", "role"], Ee = {
 	key: 1,
 	class: "item__content"
-}, Te = {
+}, De = {
 	key: 4,
 	class: "item__content"
-}, Ee = {
+}, Oe = {
 	key: 0,
 	class: "item__description"
-}, De = [
+}, ke = [
 	"id",
 	"aria-label",
 	"data-bb-dropdown-surface",
 	"inert",
 	"role",
 	"onPointerleave"
-], Oe = 289, ke = 160, Ae = 100, je = 120, Me = /*@__PURE__*/ ue({
+], Ae = 289, je = 160, Me = 100, Ne = 120, Pe = /*@__PURE__*/ de({
 	__name: "BbDropdownList",
 	props: {
 		groups: {},
@@ -69,20 +73,20 @@ var _e = {
 		back: {}
 	},
 	emits: ["close-level"],
-	setup(ue, { expose: Me, emit: Ne }) {
-		let D = ue, Pe = Ne, O = se(), { inSheet: Fe } = r(), { t: Ie } = ie(), Le = Ie("select.searchLabel"), Re = Ie("common.noDataText"), ze = (e, t, n) => {
+	setup(de, { expose: Pe, emit: Fe }) {
+		let O = de, Ie = Fe, k = ce(), { inSheet: A } = r(), { t: Le } = o(), Re = Le("select.searchLabel"), ze = Le("common.noDataText"), Be = (e, t, n) => {
 			if (e.placeholder) return !0;
 			let r = n && n.length ? n : e.description == null ? ["text"] : ["text", "description"];
 			try {
-				return s(e, r, t);
+				return te(e, r, t);
 			} catch {
 				return !1;
 			}
-		}, k = u(() => D.groups.map((e) => {
-			if (!e.searchable || !e.key || O.isPipelineGroup(e.key)) return e;
-			let t = O.queryFor(e.key).trim();
+		}, j = u(() => O.groups.map((e) => {
+			if (!e.searchable || !e.key || k.isPipelineGroup(e.key)) return e;
+			let t = k.queryFor(e.key).trim();
 			if (!t) return e;
-			let n = e.items.filter((n) => ze(n, t, e.filterBy));
+			let n = e.items.filter((n) => Be(n, t, e.filterBy));
 			return n.length ? {
 				...e,
 				items: n
@@ -91,104 +95,105 @@ var _e = {
 				items: [{
 					key: "__bb-dropdown:no-results__",
 					placeholder: "no-data",
-					text: O.noDataText.value ?? Re.value,
+					text: k.noDataText.value ?? ze.value,
 					disabled: !0
 				}]
 			};
 		}));
 		ge(() => {
-			if (D.level !== 0) return;
-			let e = k.value.flatMap((e) => e.items).find((e) => e.placeholder);
-			O.setStatus(e?.text);
+			if (O.level !== 0) return;
+			let e = j.value.flatMap((e) => e.items).find((e) => e.placeholder);
+			k.setStatus(e?.text);
 		}), ge(() => {
-			for (let e of D.groups) e.key && O.isPipelineGroup(e.key) && O.activateGroup(e.key);
+			for (let e of O.groups) e.key && k.isPipelineGroup(e.key) && k.activateGroup(e.key);
 		});
-		let A = b({}), Be = (e, n) => {
+		let M = b({}), Ve = (e, n) => {
 			let r = t(n);
-			r instanceof HTMLInputElement ? A.value[e] = r : delete A.value[e];
-		}, Ve = u(() => k.value.find((e) => e.searchable && e.key)?.key), He = (e) => {
-			let t = e.maxHeight ?? (e.searchable ? Oe : void 0);
+			r instanceof HTMLInputElement ? M.value[e] = r : delete M.value[e];
+		}, He = u(() => j.value.find((e) => e.searchable && e.key)?.key), Ue = (e) => {
+			if (A.value) return;
+			let t = e.maxHeight ?? (e.searchable ? Ae : void 0);
 			if (!(t == null || t === 0 || t === "none")) return typeof t == "number" ? `${t}px` : t;
-		}, Ue = (e) => oe(e).map((e) => e.selectable ? {
+		}, We = (e) => se(e).map((e) => e.selectable ? {
 			...e,
-			selected: O.selectedFor(e.key ?? "")
-		} : e), We = (e) => c(e.key), Ge = (e) => e.slotKey ? c(e.slotKey) : We(e), j = (e, t) => {
-			let n = Ge(e), r = t ? `${n}:${t}` : n, i = O.slots[r];
+			selected: k.selectedFor(e.key ?? "")
+		} : e), Ge = (e) => c(e.key), Ke = (e) => e.slotKey ? c(e.slotKey) : Ge(e), N = (e, t) => {
+			let n = Ke(e), r = t ? `${n}:${t}` : n, i = k.slots[r];
 			if (i) return i;
-			let a = We(e);
+			let a = Ge(e);
 			if (a === n) return;
 			let o = t ? `${a}:${t}` : a;
-			return O.slots[o];
-		}, Ke = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__item--variant-${e.variant}` : void 0, qe = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__group-title--variant-${e.variant}` : void 0, Je = (e) => e.selectable ? e.multiple ? "menuitemcheckbox" : "menuitemradio" : "menuitem", M = (e, t) => e.selected.includes(t.key), N = (e) => {
+			return k.slots[o];
+		}, qe = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__item--variant-${e.variant}` : void 0, Je = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__group-title--variant-${e.variant}` : void 0, Ye = (e) => e.selectable ? e.multiple ? "menuitemcheckbox" : "menuitemradio" : "menuitem", P = (e, t) => e.selected.includes(t.key), F = (e) => {
 			let t = 0;
-			for (let n = 0; n < e; n++) t += k.value[n]?.items.length ?? 0;
+			for (let n = 0; n < e; n++) t += j.value[n]?.items.length ?? 0;
 			return t;
-		}, Ye = /* @__PURE__ */ new Set([...a.filter((e) => e !== "text" && e !== "disabled")]), Xe = (e) => {
+		}, Xe = /* @__PURE__ */ new Set([...a.filter((e) => e !== "text" && e !== "disabled")]), Ze = (e) => {
 			let t = {};
-			for (let [n, r] of Object.entries(e)) (Ye.has(n) || /^(aria|data)-/.test(n)) && (t[n] = r);
+			for (let [n, r] of Object.entries(e)) (Xe.has(n) || /^(aria|data)-/.test(n)) && (t[n] = r);
 			return t;
-		}, Ze = (e) => e.placeholder ? O.slots[e.placeholder === "loading" ? "loading" : "no-data"] : void 0, P = (e, t, n) => ({
-			disabled: t.disabled || O.disabled.value,
+		}, Qe = (e) => e.placeholder ? k.slots[e.placeholder === "loading" ? "loading" : "no-data"] : void 0, I = (e, t, n) => ({
+			disabled: t.disabled || k.disabled.value,
 			index: n,
 			item: t,
-			selected: e.selectable && M(e, t),
-			loading: O.isItemLoading(t.key),
-			open: O.open.value,
-			placement: O.placement.value,
+			selected: e.selectable && P(e, t),
+			loading: k.isItemLoading(t.key),
+			open: k.open.value,
+			placement: k.placement.value,
 			text: t.text,
 			description: t.description
-		}), F = (e, t) => {
+		}), L = (e, t) => {
 			if (!e.key) return;
 			let n = c(e.key);
-			return O.slots[t ? `${n}:${t}` : n];
-		}, I = (e) => !e.hideLabel && (!!e.label || !!e["prepend:icon"] || !!e["append:icon"] || !!F(e) || !!F(e, "prepend") || !!F(e, "append")), Qe = e().id, L = (e) => `${Qe.value}_group-title_${e}`, $e = u(() => ae(k.value)), et = (e) => !!e.items && ae(Ue(e.items)), tt = (e) => $e.value ? "menu" : I(e) ? "group" : "none", nt = (e, t) => I(e) ? L(t) : void 0, R = (e, t) => ({
-			disabled: O.disabled.value,
+			return k.slots[t ? `${n}:${t}` : n];
+		}, R = (e) => !e.hideLabel && (!!e.label || !!e["prepend:icon"] || !!e["append:icon"] || !!L(e) || !!L(e, "prepend") || !!L(e, "append")), $e = (e) => !e.key || !e.selectable || !e.multiple ? [] : k.selectedChipsFor(e.key), et = e().id, tt = (e) => `${et.value}_group-title_${e}`, nt = u(() => oe(j.value)), rt = (e) => !!e.items && oe(We(e.items)), it = (e) => nt.value ? "menu" : R(e) ? "group" : "none", at = (e, t) => R(e) ? tt(t) : void 0, z = (e, t) => ({
+			disabled: k.disabled.value,
 			index: t,
 			item: e,
 			selected: !1,
 			loading: !1,
-			open: O.open.value,
-			placement: O.placement.value,
+			open: k.open.value,
+			placement: k.placement.value,
 			text: e.label
-		}), z = b({}), rt = (e, n) => {
+		}), B = b({}), ot = (e, n) => {
 			let r = t(n);
-			r ? z.value[e] = r : delete z.value[e];
-		}, B = b({}), it = (e, n) => {
+			r ? B.value[e] = r : delete B.value[e];
+		}, st = b({}), ct = (e, n) => {
 			let r = t(n);
-			r instanceof HTMLElement ? B.value[e] = r : delete B.value[e];
+			r instanceof HTMLElement ? st.value[e] = r : delete st.value[e];
 		}, V = () => {
 			let e = [], t = 0;
-			for (let n of k.value) {
-				n.onClick && I(n) && e.push(t - .5);
-				for (let r of n.items) r.disabled || O.disabled.value || e.push(t), t++;
+			for (let n of j.value) {
+				n.onClick && R(n) && e.push(t - .5);
+				for (let r of n.items) r.disabled || k.disabled.value || e.push(t), t++;
 			}
 			return e;
-		}, at = (e) => {
+		}, lt = (e) => {
 			let t = 0;
-			for (let n = 0; n < k.value.length; n++) {
+			for (let n = 0; n < j.value.length; n++) {
 				if (t - .5 === e) return n;
-				t += k.value[n].items.length;
+				t += j.value[n].items.length;
 			}
 			return -1;
 		}, H = (e) => {
 			if (e != null) {
 				if (Number.isInteger(e)) {
-					z.value[e]?.focus();
+					B.value[e]?.focus();
 					return;
 				}
-				B.value[at(e)]?.focus();
+				st.value[lt(e)]?.focus();
 			}
-		}, ot = () => Object.values(A.value).some((e) => e === document.activeElement);
-		re({
-			active: Fe,
-			input: () => Object.values(A.value).find((e) => e === document.activeElement) ?? null
+		}, ut = () => Object.values(M.value).some((e) => e === document.activeElement);
+		ae({
+			active: A,
+			input: () => Object.values(M.value).find((e) => e === document.activeElement) ?? null
 		});
-		let st = () => {
-			let e = Ve.value;
-			return e ? (A.value[e]?.focus(), !0) : !1;
-		}, ct = () => H(V()[0]), lt = (e) => {
+		let dt = () => {
+			let e = He.value;
+			return e ? (M.value[e]?.focus(), !0) : !1;
+		}, ft = () => H(V()[0]), pt = (e) => {
 			let t = 0;
-			for (let n of k.value) for (let r of n.items) {
+			for (let n of j.value) for (let r of n.items) {
 				if (r.key === e) return t;
 				t++;
 			}
@@ -199,96 +204,96 @@ var _e = {
 			let r = n.indexOf(e), i = r === -1 ? t > 0 ? 0 : n.length - 1 : (r + t + n.length) % n.length;
 			H(n[i]);
 		}, W = () => {
-			st() || ct();
+			!A.value && dt() || ft();
 		}, G = () => {
 			let e = V();
 			H(e[e.length - 1]);
 		};
-		pe(() => {
-			D.level === 0 && Ve.value && _(() => st());
+		me(() => {
+			O.level === 0 && He.value && !A.value && _(() => dt());
 		});
-		let K = b(null), q = b({}), J, Y, ut = 0, X = b(null), Z;
+		let K = b(null), q = b({}), J, Y, mt = 0, X = b(null), Z;
 		he(K, (e, t) => {
 			clearTimeout(Z), X.value = t ?? null, t != null && (Z = setTimeout(() => {
 				X.value = null;
-			}, je));
+			}, Ne));
 		});
-		let dt = (e) => K.value !== e && X.value !== e, ft = b(0), pt = () => {
-			let e = Object.values(z.value)[0], t = e?.closest(".bb-dropdown");
-			!e || !t || (ft.value = Math.max(0, t.getBoundingClientRect().right - e.getBoundingClientRect().right));
-		}, mt = (e, t) => {
+		let ht = (e) => K.value !== e && X.value !== e, gt = b(0), _t = () => {
+			let e = Object.values(B.value)[0], t = e?.closest(".bb-dropdown");
+			!e || !t || (gt.value = Math.max(0, t.getBoundingClientRect().right - e.getBoundingClientRect().right));
+		}, vt = (e, t) => {
 			t ? q.value[e] = t : delete q.value[e];
 		}, Q = () => clearTimeout(J), $ = () => clearTimeout(Y);
-		fe(() => {
+		pe(() => {
 			clearTimeout(Y), clearTimeout(J), clearTimeout(Z);
 		});
-		let ht = (e) => {
+		let yt = (e) => {
 			$(), clearTimeout(J), J = setTimeout(() => {
 				K.value === e && (K.value = null);
-			}, ke);
-		}, gt = (e) => {
+			}, je);
+		}, bt = (e) => {
 			let t = e.trim();
 			return t ? t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : Number.parseFloat(t) || 0 : 0;
-		}, _t = (e) => {
-			let t = z.value[e];
+		}, xt = (e) => {
+			let t = B.value[e];
 			if (!t) return 0;
 			let n = t.closest(".bb-common-popover");
 			if (!n) return 0;
-			let r = getComputedStyle(n).getPropertyValue("--transition-duration"), i = gt(r);
+			let r = getComputedStyle(n).getPropertyValue("--transition-duration"), i = bt(r);
 			if (!i) return 0;
-			let a = performance.now() - ut;
+			let a = performance.now() - mt;
 			return Math.max(0, i - a + 16);
-		}, vt = async (e, t = !1) => {
-			Q(), pt(), K.value = e, t && (await _(), q.value[e]?.focusFirst());
+		}, St = async (e, t = !1) => {
+			Q(), _t(), K.value = e, t && (await _(), q.value[e]?.focusFirst());
 		};
-		he(O.open, (e) => {
+		he(k.open, (e) => {
 			if (!e) {
 				$(), Q(), K.value = null;
 				return;
 			}
-			ut = performance.now();
+			mt = performance.now();
 		});
-		let yt = (e, t) => {
+		let Ct = (e, t) => {
 			t ? K.value = e : K.value === e && (K.value = null);
-		}, bt = (e) => {
+		}, wt = (e) => {
 			K.value = null, _(() => H(e));
-		}, xt = (e, t, n) => {
+		}, Tt = (e, t, n) => {
 			if (n.pointerType !== "mouse") return;
 			if (Q(), $(), K.value !== null && K.value === e.key) {
 				H(t);
 				return;
 			}
 			let r = () => {
-				H(t), e.items ? vt(e.key) : K.value = null;
+				H(t), e.items ? St(e.key) : K.value = null;
 			};
 			if (K.value !== null) {
-				let e = lt(K.value);
-				e >= 0 && Math.abs(t - e) <= 1 ? Y = setTimeout(r, Ae) : r();
+				let e = pt(K.value);
+				e >= 0 && Math.abs(t - e) <= 1 ? Y = setTimeout(r, Me) : r();
 				return;
 			}
-			let i = e.items ? _t(t) : 0;
+			let i = e.items ? xt(t) : 0;
 			i ? Y = setTimeout(r, i) : r();
-		}, St = () => {
+		}, Et = () => {
 			Q(), $();
-		}, Ct = (e, t) => {
-			t.pointerType === "mouse" && e.items && ht(e.key);
-		}, wt = (e, t) => {
-			t.pointerType === "mouse" && ht(e);
-		}, Tt = (e, t) => {
+		}, Dt = (e, t) => {
+			t.pointerType === "mouse" && e.items && yt(e.key);
+		}, Ot = (e, t) => {
+			t.pointerType === "mouse" && yt(e);
+		}, kt = (e, t) => {
 			e.searchable && t.preventDefault();
-		}, Et = (e, t, n, r) => {
-			if (!(t.disabled || O.disabled.value) && !O.isItemLoading(t.key)) {
+		}, At = (e, t, n, r) => {
+			if (!(t.disabled || k.disabled.value) && !k.isItemLoading(t.key)) {
 				if (t.items) {
-					r.stopPropagation(), Q(), $(), D.navigate ? D.navigate(t) : K.value = t.key;
+					r.stopPropagation(), Q(), $(), O.navigate ? O.navigate(t) : K.value = t.key;
 					return;
 				}
 				if (e.selectable && e.key) {
-					r.stopPropagation(), O.toggleSelect(e, t), O.runItemAction(t, r), ot() || H(n);
+					r.stopPropagation(), k.toggleSelect(e, t), k.runItemAction(t, r), ut() || H(n);
 					return;
 				}
-				r.stopPropagation(), O.runItemAction(t, r, { close: !0 });
+				r.stopPropagation(), k.runItemAction(t, r, { close: !0 });
 			}
-		}, Dt = (e, t, n) => {
+		}, jt = (e, t, n) => {
 			switch (n.key) {
 				case "ArrowDown":
 					n.preventDefault(), $(), Q(), K.value = null, U(t, 1);
@@ -303,14 +308,14 @@ var _e = {
 					n.preventDefault(), G();
 					break;
 				case "ArrowRight":
-					e.items && (n.preventDefault(), n.stopPropagation(), D.navigate ? D.navigate(e) : vt(e.key, !0));
+					e.items && (n.preventDefault(), n.stopPropagation(), O.navigate ? O.navigate(e) : St(e.key, !0));
 					break;
 				case "ArrowLeft":
-					D.back ? (n.preventDefault(), n.stopPropagation(), D.back()) : D.level > 0 && (n.preventDefault(), n.stopPropagation(), Pe("close-level"));
+					O.back ? (n.preventDefault(), n.stopPropagation(), O.back()) : O.level > 0 && (n.preventDefault(), n.stopPropagation(), Ie("close-level"));
 					break;
 			}
-		}, Ot = (e, t) => {
-			let n = N(e) - .5;
+		}, Mt = (e, t) => {
+			let n = F(e) - .5;
 			switch (t.key) {
 				case "ArrowDown":
 					t.preventDefault(), U(n, 1);
@@ -325,159 +330,171 @@ var _e = {
 					t.preventDefault(), G();
 					break;
 				case "ArrowLeft":
-					D.back ? (t.preventDefault(), t.stopPropagation(), D.back()) : D.level > 0 && (t.preventDefault(), t.stopPropagation(), Pe("close-level"));
+					O.back ? (t.preventDefault(), t.stopPropagation(), O.back()) : O.level > 0 && (t.preventDefault(), t.stopPropagation(), Ie("close-level"));
 					break;
 			}
 		};
-		return Me({
+		return Pe({
 			focusFirst: W,
 			focusLast: G
-		}), (e, t) => (y(!0), p(l, null, me(k.value, (r, a) => (y(), p(l, { key: r.key ?? a }, [
+		}), (e, t) => (y(!0), p(l, null, x(j.value, (r, a) => (y(), p(l, { key: r.key ?? a }, [
 			r.divider ? (y(), p("hr", _e)) : f("", !0),
-			I(r) ? (y(), p("div", {
+			R(r) ? (y(), p("div", {
 				key: 1,
-				id: L(a),
+				id: tt(a),
 				ref_for: !0,
-				ref: (e) => it(a, e),
-				class: v(["bb-dropdown__group-title", qe(r)]),
+				ref: (e) => ct(a, e),
+				class: v(["bb-dropdown__group-title", Je(r)]),
 				role: r.onClick ? "menuitem" : "presentation",
 				tabindex: r.onClick ? -1 : void 0,
 				onClick: (e) => r.onClick?.(e),
 				onKeydown: [
-					(e) => r.onClick && Ot(a, e),
-					T((e) => r.onClick?.(e), ["enter"]),
-					T(E((e) => r.onClick?.(e), ["prevent"]), ["space"])
+					(e) => r.onClick && Mt(a, e),
+					E((e) => r.onClick?.(e), ["enter"]),
+					E(D((e) => r.onClick?.(e), ["prevent"]), ["space"])
 				]
 			}, [
-				F(r, "prepend") ? (y(), d(x(F(r, "prepend")), g({
+				L(r, "prepend") ? (y(), d(S(L(r, "prepend")), g({
 					key: 0,
 					ref_for: !0
-				}, R(r, N(a))), null, 16)) : C(O).slots["item:prepend"] ? (y(), d(x(C(O).slots["item:prepend"]), g({
+				}, z(r, F(a))), null, 16)) : w(k).slots["item:prepend"] ? (y(), d(S(w(k).slots["item:prepend"]), g({
 					key: 1,
 					ref_for: !0
-				}, R(r, N(a))), null, 16)) : r["prepend:icon"] ? (y(), d(o, {
+				}, z(r, F(a))), null, 16)) : r["prepend:icon"] ? (y(), d(s, {
 					key: 2,
 					class: "group-title__prepend-icon",
 					icon: r["prepend:icon"]
 				}, null, 8, ["icon"])) : f("", !0),
-				F(r) ? (y(), d(x(F(r)), g({
+				L(r) ? (y(), d(S(L(r)), g({
 					key: 3,
 					ref_for: !0
-				}, R(r, N(a))), null, 16)) : r.label ? (y(), p("span", ye, S(r.label), 1)) : f("", !0),
-				F(r, "append") ? (y(), d(x(F(r, "append")), g({
+				}, z(r, F(a))), null, 16)) : r.label ? (y(), p("span", ye, C(r.label), 1)) : f("", !0),
+				L(r, "append") ? (y(), d(S(L(r, "append")), g({
 					key: 5,
 					ref_for: !0
-				}, R(r, N(a))), null, 16)) : r["append:icon"] ? (y(), d(o, {
+				}, z(r, F(a))), null, 16)) : r["append:icon"] ? (y(), d(s, {
 					key: 6,
 					class: "group-title__append-icon",
 					icon: r["append:icon"]
-				}, null, 8, ["icon"])) : C(O).slots["item:append"] ? (y(), d(x(C(O).slots["item:append"]), g({
+				}, null, 8, ["icon"])) : w(k).slots["item:append"] ? (y(), d(S(w(k).slots["item:append"]), g({
 					key: 7,
 					ref_for: !0
-				}, R(r, N(a))), null, 16)) : f("", !0)
+				}, z(r, F(a))), null, 16)) : f("", !0)
 			], 42, ve)) : f("", !0),
-			r.searchable && r.key ? (y(), p("div", be, [
-				h(o, {
+			w(A) && $e(r).length ? (y(), p("div", be, [m("div", xe, [(y(!0), p(l, null, x($e(r), (e) => (y(), d(ee, {
+				key: e.key,
+				class: "bb-dropdown__sheet-chip",
+				clearable: !w(k).disabled.value,
+				size: "xl",
+				variant: "secondary",
+				"onClick:clear": (t) => w(k).deselect(r.key, e.key),
+				onMousedown: t[0] ||= D(() => {}, ["prevent"])
+			}, {
+				default: T(() => [ue(C(e.text), 1)]),
+				_: 2
+			}, 1032, ["clearable", "onClick:clear"]))), 128))])])) : f("", !0),
+			r.searchable && r.key ? (y(), p("div", Se, [
+				h(s, {
 					"aria-hidden": "true",
 					class: "bb-dropdown__search-icon",
 					focusable: "false",
-					icon: C(ne)
+					icon: w(ie)
 				}, null, 8, ["icon"]),
 				m("input", {
 					ref_for: !0,
-					ref: (e) => Be(r.key, e),
-					"aria-label": r.searchPlaceholder || C(Le),
+					ref: (e) => Ve(r.key, e),
+					"aria-label": r.searchPlaceholder || w(Re),
 					autocomplete: "off",
 					class: "bb-dropdown__search-input",
-					placeholder: r.searchPlaceholder || C(Le),
+					placeholder: r.searchPlaceholder || w(Re),
 					role: "searchbox",
 					type: "text",
-					value: C(O).queryFor(r.key),
-					onInput: (e) => C(O).setQuery(r.key, e.target.value),
+					value: w(k).queryFor(r.key),
+					onInput: (e) => w(k).setQuery(r.key, e.target.value),
 					onKeydown: [
-						T(E(ct, ["stop", "prevent"]), ["down"]),
-						t[0] ||= T(E((e) => C(O).close(), ["stop", "prevent"]), ["esc"]),
-						T(E(G, ["stop", "prevent"]), ["up"])
+						E(D(ft, ["stop", "prevent"]), ["down"]),
+						t[1] ||= E(D((e) => w(k).close(), ["stop", "prevent"]), ["esc"]),
+						E(D(G, ["stop", "prevent"]), ["up"])
 					]
-				}, null, 40, xe),
-				r.key && C(O).isGroupLoading(r.key) ? (y(), p("div", Se)) : f("", !0)
+				}, null, 40, Ce),
+				r.key && w(k).isGroupLoading(r.key) ? (y(), p("div", we)) : f("", !0)
 			])) : f("", !0),
 			m("div", {
-				"aria-labelledby": nt(r, a),
+				"aria-labelledby": at(r, a),
 				class: v(["bb-dropdown__group-items", {
-					"bb-dropdown__group-items--capped": !!He(r),
-					"bb-dropdown__group-items--loading": !!r.key && C(O).isGroupLoading(r.key)
+					"bb-dropdown__group-items--capped": !!Ue(r),
+					"bb-dropdown__group-items--loading": !!r.key && w(k).isGroupLoading(r.key)
 				}]),
-				role: tt(r),
-				style: de({ maxHeight: He(r) })
-			}, [(y(!0), p(l, null, me(r.items, (t, s) => (y(), p(l, { key: t.key }, [t.placeholder ? (y(), p("div", {
+				role: it(r),
+				style: fe({ maxHeight: Ue(r) })
+			}, [(y(!0), p(l, null, x(r.items, (t, o) => (y(), p(l, { key: t.key }, [t.placeholder ? (y(), p("div", {
 				key: 0,
 				class: v(["bb-dropdown__placeholder", `bb-dropdown__placeholder--${t.placeholder}`]),
 				role: "presentation"
-			}, [Ze(t) ? (y(), d(x(Ze(t)), {
+			}, [Qe(t) ? (y(), d(S(Qe(t)), {
 				key: 0,
 				"group-key": r.key,
 				text: t.text
-			}, null, 8, ["group-key", "text"])) : (y(), p("span", we, S(t.text), 1))], 2)) : (y(), p(l, { key: 1 }, [h(i, g({
+			}, null, 8, ["group-key", "text"])) : (y(), p("span", Ee, C(t.text), 1))], 2)) : (y(), p(l, { key: 1 }, [h(i, g({
 				ref_for: !0,
-				ref: (e) => rt(N(a) + s, e),
-				"aria-busy": C(O).isItemLoading(t.key) || void 0
-			}, Xe(t), {
-				"aria-checked": r.selectable ? M(r, t) : void 0,
+				ref: (e) => ot(F(a) + o, e),
+				"aria-busy": w(k).isItemLoading(t.key) || void 0
+			}, Ze(t), {
+				"aria-checked": r.selectable ? P(r, t) : void 0,
 				"aria-expanded": t.items ? K.value === t.key : void 0,
 				"aria-haspopup": t.items ? "menu" : void 0,
-				class: ["bb-dropdown__item", [Ke(t), {
-					"bb-dropdown__item--selected": r.selectable && M(r, t),
+				class: ["bb-dropdown__item", [qe(t), {
+					"bb-dropdown__item--selected": r.selectable && P(r, t),
 					"bb-dropdown__item--has-submenu": !!t.items,
 					"bb-dropdown__item--description": !!t.description
 				}]],
 				"data-dropdown-item": "",
-				disabled: t.disabled || C(O).disabled.value,
-				role: Je(r),
+				disabled: t.disabled || w(k).disabled.value,
+				role: Ye(r),
 				tabindex: "-1",
-				onClick: (e) => Et(r, t, N(a) + s, e),
-				onKeydown: (e) => Dt(t, N(a) + s, e),
-				onMousedown: (e) => Tt(r, e),
-				onPointerenter: (e) => xt(t, N(a) + s, e),
-				onPointerleave: (e) => Ct(t, e)
+				onClick: (e) => At(r, t, F(a) + o, e),
+				onKeydown: (e) => jt(t, F(a) + o, e),
+				onMousedown: (e) => kt(r, e),
+				onPointerenter: (e) => Tt(t, F(a) + o, e),
+				onPointerleave: (e) => Dt(t, e)
 			}), {
-				default: w(() => [
-					j(t, "prepend") ? (y(), d(x(j(t, "prepend")), g({
+				default: T(() => [
+					N(t, "prepend") ? (y(), d(S(N(t, "prepend")), g({
 						key: 0,
 						ref_for: !0
-					}, P(r, t, N(a) + s)), null, 16)) : C(O).slots["item:prepend"] ? (y(), d(x(C(O).slots["item:prepend"]), g({
+					}, I(r, t, F(a) + o)), null, 16)) : w(k).slots["item:prepend"] ? (y(), d(S(w(k).slots["item:prepend"]), g({
 						key: 1,
 						ref_for: !0
-					}, P(r, t, N(a) + s)), null, 16)) : t["prepend:icon"] ? (y(), d(o, {
+					}, I(r, t, F(a) + o)), null, 16)) : t["prepend:icon"] ? (y(), d(s, {
 						key: 2,
 						class: "item__prepend-icon",
 						icon: t["prepend:icon"]
 					}, null, 8, ["icon"])) : f("", !0),
-					j(t) ? (y(), d(x(j(t)), g({
+					N(t) ? (y(), d(S(N(t)), g({
 						key: 3,
 						ref_for: !0
-					}, P(r, t, N(a) + s)), null, 16)) : (y(), p("span", Te, [le(S(t.text) + " ", 1), t.description ? (y(), p("span", Ee, S(t.description), 1)) : f("", !0)])),
-					j(t, "append") ? (y(), d(x(j(t, "append")), g({
+					}, I(r, t, F(a) + o)), null, 16)) : (y(), p("span", De, [ue(C(t.text) + " ", 1), t.description ? (y(), p("span", Oe, C(t.description), 1)) : f("", !0)])),
+					N(t, "append") ? (y(), d(S(N(t, "append")), g({
 						key: 5,
 						ref_for: !0
-					}, P(r, t, N(a) + s)), null, 16)) : r.selectable ? (y(), d(o, {
+					}, I(r, t, F(a) + o)), null, 16)) : r.selectable ? (y(), d(s, {
 						key: 6,
 						"aria-hidden": "true",
 						class: "item__check",
-						icon: C(ee)
-					}, null, 8, ["icon"])) : t.items ? (y(), d(o, {
+						icon: w(ne)
+					}, null, 8, ["icon"])) : t.items ? (y(), d(s, {
 						key: 7,
 						"aria-hidden": "true",
 						class: "item__chevron",
-						icon: C(te)
-					}, null, 8, ["icon"])) : t["append:icon"] ? (y(), d(o, {
+						icon: w(re)
+					}, null, 8, ["icon"])) : t["append:icon"] ? (y(), d(s, {
 						key: 8,
 						class: "item__append-icon",
 						icon: t["append:icon"]
-					}, null, 8, ["icon"])) : C(O).slots["item:append"] ? (y(), d(x(C(O).slots["item:append"]), g({
+					}, null, 8, ["icon"])) : w(k).slots["item:append"] ? (y(), d(S(w(k).slots["item:append"]), g({
 						key: 9,
 						ref_for: !0
-					}, P(r, t, N(a) + s)), null, 16)) : f("", !0)
+					}, I(r, t, F(a) + o)), null, 16)) : f("", !0)
 				]),
 				_: 2
 			}, 1040, [
@@ -495,46 +512,46 @@ var _e = {
 				"onPointerleave"
 			]), t.items && !e.navigate ? (y(), d(n, {
 				key: 0,
-				anchor: z.value[N(a) + s],
+				anchor: B.value[F(a) + o],
 				class: "bb-dropdown bb-dropdown--submenu",
 				"hide-arrow": "",
 				"model-value": K.value === t.key,
-				offset: ft.value,
+				offset: gt.value,
 				placement: "right-start",
 				role: "none",
-				"transition-duration": je,
-				"onUpdate:modelValue": (e) => yt(t.key, e)
+				"transition-duration": Ne,
+				"onUpdate:modelValue": (e) => Ct(t.key, e)
 			}, {
-				default: w(({ availableHeight: n }) => [m("span", {
-					id: `submenu_${C(O).rootId}_${t.key}`,
-					"aria-label": et(t) ? t.text : void 0,
+				default: T(({ availableHeight: n }) => [m("span", {
+					id: `submenu_${w(k).rootId}_${t.key}`,
+					"aria-label": rt(t) ? t.text : void 0,
 					class: "bb-dropdown__items-container",
-					"data-bb-dropdown-surface": C(O).rootId,
-					inert: dt(t.key),
-					role: et(t) ? "dialog" : "menu",
-					style: de({ "--max-h": n == null ? void 0 : `${n}px` }),
-					onPointerenter: St,
-					onPointerleave: (e) => wt(t.key, e)
-				}, [h(ce, {
+					"data-bb-dropdown-surface": w(k).rootId,
+					inert: ht(t.key),
+					role: rt(t) ? "dialog" : "menu",
+					style: fe({ "--max-h": n == null ? void 0 : `${n}px` }),
+					onPointerenter: Et,
+					onPointerleave: (e) => Ot(t.key, e)
+				}, [h(le, {
 					ref_for: !0,
-					ref: (e) => mt(t.key, e),
-					groups: Ue(t.items),
+					ref: (e) => vt(t.key, e),
+					groups: We(t.items),
 					level: e.level + 1,
-					onCloseLevel: (e) => bt(N(a) + s)
+					onCloseLevel: (e) => wt(F(a) + o)
 				}, null, 8, [
 					"groups",
 					"level",
 					"onCloseLevel"
-				])], 44, De)]),
+				])], 44, ke)]),
 				_: 2
 			}, 1032, [
 				"anchor",
 				"model-value",
 				"offset",
 				"onUpdate:modelValue"
-			])) : f("", !0)], 64))], 64))), 128))], 14, Ce)
+			])) : f("", !0)], 64))], 64))), 128))], 14, Te)
 		], 64))), 128));
 	}
 });
 //#endregion
-export { Me as default };
+export { Pe as default };