bitboss-ui 3.0.0-beta.47 → 3.0.0-beta.49

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

@@ -5,63 +5,58 @@ import { extractDomContainer as r } from "../../utilities/functions/extractDomCo
 import i from "../CommonPopover/CommonPopover.vue.js";
 import { useSheetSurface as a } from "../../composables/useSheetSurface.js";
 import { BB_BASE_BUTTON_PROP_KEYS as ee } from "../BbBaseButton/types.js";
-import te from "../BbBaseButton/BbBaseButton.vue.js";
-import { useLocale as ne } from "../../composables/useLocale.js";
+import { useLocale as te } from "../../composables/useLocale.js";
 import o from "../BbIcon/BbIcon.vue.js";
-import re from "../BbBadge/BbBadge.vue.js";
-import ie from "../ErrorIcon/ErrorIcon.vue.js";
+import ne from "../BbBadge/BbBadge.vue.js";
+import re from "../ErrorIcon/ErrorIcon.vue.js";
+import ie from "./DropdownRow.vue.js";
 import { isImeComposing as ae } from "../../utilities/functions/isImeComposing.js";
 import { matchAnyKey as oe } from "../../utilities/functions/matchAnyKey.js";
-import se from "../../assets/svgs/check_stroke.svg_raw.js";
-import ce from "../../assets/svgs/chevron_right.svg_raw.js";
-import le from "../../assets/svgs/search.svg_raw.js";
-import { useImeDismissBlur as ue } from "../../composables/useImeDismissBlur.js";
-import { isPrintableTypeaheadKey as de, normalizeSearchToken as fe, useTypeahead as pe } from "../../composables/useTypeahead.js";
-import { levelHasSearch as me, normalizeGroups as he } from "./normalizeGroups.js";
-import { useDropdownContext as ge } from "./useDropdownContext.js";
-import _e from "./BbDropdownList.vue.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as ve, createVNode as ye, defineComponent as be, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as xe, onBeforeUnmount as Se, onMounted as Ce, openBlock as g, ref as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as we, watchEffect as Te, withCtx as S, withKeys as Ee, withModifiers as De } from "vue";
+import se from "../../assets/svgs/search.svg_raw.js";
+import { useImeDismissBlur as ce } from "../../composables/useImeDismissBlur.js";
+import { isPrintableTypeaheadKey as le, normalizeSearchToken as ue, useTypeahead as de } from "../../composables/useTypeahead.js";
+import { levelHasSearch as fe, normalizeGroups as pe } from "./normalizeGroups.js";
+import { useDropdownContext as me } from "./useDropdownContext.js";
+import he from "./BbDropdownList.vue.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as ge, createVNode as p, defineComponent as _e, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as ve, onBeforeUnmount as ye, onMounted as be, openBlock as _, ref as v, renderList as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, watch as xe, watchEffect as Se, withCtx as Ce, withKeys as we, withModifiers as Te } from "vue";
 //#region src/components/BbDropdown/BbDropdownList.vue?vue&type=script&setup=true&lang.ts
-var Oe = {
+var Ee = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "bb-dropdown__divider"
-}, ke = [
+}, De = [
 	"id",
 	"role",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], Ae = {
+], Oe = {
 	key: 4,
 	class: "group-title__content"
-}, je = {
+}, ke = {
 	key: 2,
 	class: "bb-dropdown__sheet-selection"
-}, Me = { class: "bb-dropdown__sheet-chips" }, Ne = {
+}, Ae = { class: "bb-dropdown__sheet-chips" }, je = {
 	key: 3,
 	class: "bb-dropdown__group-search",
 	role: "none"
-}, Pe = [
+}, Me = [
 	"aria-label",
 	"placeholder",
 	"value",
 	"onInput"
-], Fe = {
+], Ne = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "bb-dropdown__group-loading"
-}, Ie = ["aria-labelledby", "role"], Le = { class: "item__content" }, Re = {
-	key: 4,
-	class: "item__content"
-}, ze = ["id"], Be = ["id"], Ve = [
+}, Pe = ["aria-labelledby", "role"], Fe = { class: "item__content" }, Ie = [
 	"id",
 	"aria-label",
 	"data-bb-dropdown-surface",
 	"inert",
 	"role",
 	"onPointerleave"
-], He = 289, Ue = 160, We = 100, Ge = 120, Ke = /*@__PURE__*/ be({
+], Le = 289, Re = 160, ze = 100, C = 120, w = /*@__PURE__*/ _e({
 	__name: "BbDropdownList",
 	props: {
 		groups: {},
@@ -71,560 +66,531 @@ var Oe = {
 		slotDepth: {}
 	},
 	emits: ["close-level"],
-	setup(be, { expose: Ke, emit: qe }) {
-		let C = be, Je = qe, Ye = c(() => C.slotDepth ?? C.level), w = ge(), { inSheet: T } = a(), { t: Xe } = ne(), Ze = Xe("select.searchLabel"), Qe = Xe("common.emptyText"), $e = (e, t, n) => {
+	setup(_e, { expose: w, emit: Be }) {
+		let T = _e, E = Be, D = c(() => T.slotDepth ?? T.level), O = me(), { inSheet: k } = a(), { t: Ve } = te(), He = Ve("select.searchLabel"), Ue = Ve("common.emptyText"), We = (e, t, n) => {
 			if (e.placeholder) return !0;
-			let r = n && n.length ? n : e.description == null ? ["text"] : ["text", "description"];
+			let r = n && n.length ? n : e.description == null ? ["label"] : ["label", "description"];
 			try {
 				return oe(e, r, t);
 			} catch {
 				return !1;
 			}
-		}, E = c(() => C.groups.map((e) => {
-			if (!e.searchable || !e.key || w.isPipelineGroup(e.key)) return e;
-			let t = w.queryFor(e.key).trim();
+		}, A = c(() => T.groups.map((e) => {
+			if (!e.searchable || !e.id || O.isPipelineGroup(e.id)) return e;
+			let t = O.queryFor(e.id).trim();
 			if (!t) return e;
-			let n = e.items.filter((n) => $e(n, t, e.filterBy));
+			let n = e.items.filter((n) => We(n, t, e.filterBy));
 			return n.length ? {
 				...e,
 				items: n
 			} : {
 				...e,
 				items: [{
-					key: "__bb-dropdown:no-results__",
+					rowKey: "__bb-dropdown:no-results__",
+					domKey: "no-results",
 					placeholder: "empty",
-					text: w.emptyText.value ?? Qe.value,
+					label: O.emptyText.value ?? Ue.value,
 					disabled: !0
 				}]
 			};
 		}));
-		Te(() => {
-			if (C.level !== 0) return;
-			let e = E.value.flatMap((e) => e.items).find((e) => e.placeholder);
-			w.setStatus(e?.text);
-		}), Te(() => {
-			for (let e of C.groups) e.key && w.isPipelineGroup(e.key) && w.activateGroup(e.key);
+		Se(() => {
+			if (T.level !== 0) return;
+			let e = A.value.flatMap((e) => e.items).find((e) => e.placeholder);
+			O.setStatus(e?.label);
+		}), Se(() => {
+			for (let e of T.groups) e.id && O.isPipelineGroup(e.id) && O.activateGroup(e.id);
 		});
-		let D = _({}), et = (e, t) => {
+		let j = v({}), Ge = (e, t) => {
 			let n = r(t);
-			n instanceof HTMLInputElement ? D.value[e] = n : delete D.value[e];
-		}, tt = c(() => E.value.find((e) => e.searchable && e.key)?.key), nt = (e) => {
-			if (T.value) return;
-			let t = e.maxHeight ?? (e.searchable ? He : void 0);
+			n instanceof HTMLInputElement ? j.value[e] = n : delete j.value[e];
+		}, Ke = c(() => A.value.find((e) => e.searchable && e.id)?.id), qe = (e) => {
+			if (k.value) return;
+			let t = e.maxHeight ?? (e.searchable ? Le : void 0);
 			if (!(t == null || t === 0 || t === "none")) return typeof t == "number" ? `${t}px` : t;
-		}, rt = (e) => he(e).map((e) => e.selectable ? {
+		}, Je = (e) => pe(e).map((e) => e.selectable ? {
 			...e,
-			selected: w.selectedFor(e.key ?? "")
-		} : e), it = (e) => e.keyless || e.key == null || e.key === "" ? null : n(String(e.key)), at = (e) => e.slotKey ? n(e.slotKey) : it(e), O = (e, t) => {
-			let n = at(e);
-			if (n === null) return;
-			let r = t ? `${n}:${t}` : n, i = w.slots[r];
-			if (i) return i;
-			let a = it(e);
-			if (a === null || a === n) return;
-			let ee = t ? `${a}:${t}` : a;
-			return w.slots[ee];
-		}, k = (e, t, n) => O(t, n) ?? A(e, n), A = (e, t) => {
-			if (!e.key) return;
-			let r = `${n(e.key)}:item`;
-			return w.slots[t ? `${r}:${t}` : r];
-		}, ot = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__item--variant-${e.variant}` : void 0, st = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__group-title--variant-${e.variant}` : void 0, ct = (e) => e.selectable ? e.multiple ? "menuitemcheckbox" : "menuitemradio" : "menuitem", j = (e, t) => e.selected.includes(t.key), M = (e) => {
+			selected: O.selectedFor(e.id ?? "")
+		} : e), Ye = /* @__PURE__ */ new WeakMap(), Xe = (e) => {
+			let t = Ye.get(e);
+			return t === void 0 && Ye.set(e, t = Ze(e)), t;
+		}, Ze = (e) => {
+			if (e.slotKey) return n(e.slotKey);
+			if (e.keyless) return null;
+			let t = e.value;
+			return typeof t == "number" ? n(String(t)) : typeof t == "string" && t !== "" ? n(t) : null;
+		}, Qe = (e, t) => {
+			let n = Xe(e);
+			if (n !== null) return O.slots[t ? `${n}:${t}` : n];
+		}, $e = (e, t, n) => Qe(t, n) ?? et(e, n), et = (e, t) => {
+			if (!e.id) return;
+			let r = `${n(e.id)}:item`;
+			return O.slots[t ? `${r}:${t}` : r];
+		}, tt = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__item--variant-${e.variant}` : void 0, nt = (e) => e.variant && e.variant !== "default" ? `bb-dropdown__group-title--variant-${e.variant}` : void 0, rt = (e) => e.selectable ? e.multiple ? "menuitemcheckbox" : "menuitemradio" : "menuitem", it = (e, t) => e.selected.includes(t.rowKey), at = /* @__PURE__ */ new WeakMap(), ot = (e, t) => {
+			let n = Object.keys(e);
+			return n.length === Object.keys(t).length && n.every((n) => n === "selected" || e[n] === t[n]);
+		}, st = (e) => {
+			let t = at.get(e.items);
+			return t && ot(t, e) ? t : (at.set(e.items, e), e);
+		}, M = (e) => {
 			let t = 0;
-			for (let n = 0; n < e; n++) t += E.value[n]?.items.length ?? 0;
+			for (let n = 0; n < e; n++) t += A.value[n]?.items.length ?? 0;
 			return t;
-		}, lt = /* @__PURE__ */ new Set([...ee.filter((e) => e !== "text" && e !== "disabled")]), ut = (e) => {
+		}, ct = /* @__PURE__ */ new Set([...ee.filter((e) => e !== "text" && e !== "disabled")]), lt = (e) => {
 			let t = {};
-			for (let [n, r] of Object.entries(e)) (lt.has(n) || /^(aria|data)-/.test(n)) && (t[n] = r);
+			for (let [n, r] of Object.entries(e)) (ct.has(n) || /^(aria|data)-/.test(n)) && (t[n] = r);
 			return t;
-		}, dt = (e, t, n) => p(ut(t), {
-			"aria-busy": w.isItemLoading(t.key) || void 0,
-			"aria-checked": e.selectable ? j(e, t) : void 0,
-			"aria-describedby": xt(e, t, n),
-			"aria-labelledby": bt(e, t, n),
-			"aria-expanded": t.items ? q.value === t.key : void 0,
+		}, ut = (e, t, n, r) => m(lt(t), {
+			"aria-busy": O.isItemLoading(t.rowKey) || void 0,
+			"aria-checked": e.selectable ? r : void 0,
+			"aria-describedby": St(e, t, n),
+			"aria-labelledby": xt(e, t, n),
+			"aria-expanded": t.items ? G.value === t.rowKey : void 0,
 			"aria-haspopup": t.items ? "menu" : void 0,
-			class: [ot(t), {
-				"bb-dropdown__item--selected": e.selectable && j(e, t),
+			class: [tt(t), {
+				"bb-dropdown__item--selected": r,
 				"bb-dropdown__item--has-submenu": !!t.items,
 				"bb-dropdown__item--description": !!t.description
 			}],
 			"data-dropdown-item": "",
-			disabled: t.disabled || w.disabled.value,
-			role: ct(e),
+			disabled: t.disabled || O.disabled.value,
+			role: rt(e),
 			tabindex: -1,
-			onClick: (r) => tn(e, t, n, r),
-			onKeydown: (e) => nn(t, n, e),
-			onMousedown: (t) => en(e, t),
-			onPointerenter: (e) => Xt(t, n, e),
-			onPointerleave: (e) => Qt(t, e)
-		}, N("item", e, t));
-		function N(e, t, n) {
-			return w.passthrough.part(e, {
-				selected: !!(t.selectable && j(t, n)),
-				disabled: n.disabled || w.disabled.value || void 0
-			}, pt(n));
+			onClick: (r) => en(e, t, n, r),
+			onKeydown: (e) => tn(t, n, e),
+			onMousedown: (t) => $t(e, t),
+			onPointerenter: (e) => Yt(t, n, e),
+			onPointerleave: (e) => Zt(t, e)
+		}, dt("item", t, r));
+		function dt(e, t, n) {
+			return O.passthrough.part(e, {
+				selected: n,
+				disabled: t.disabled || O.disabled.value || void 0
+			}, pt(t));
 		}
-		let ft = (e) => e.placeholder ? w.slots[e.placeholder === "loading" ? "loading" : "empty"] : void 0, pt = (e) => {
-			if (!e.keyless) return e;
-			let { key: t, keyless: n, ...r } = e;
-			return r;
+		let ft = (e) => e.placeholder ? O.slots[e.placeholder === "loading" ? "loading" : "empty"] : void 0, pt = (e) => {
+			let { rowKey: t, domKey: n, keyless: r, ...i } = e;
+			return i;
 		}, mt = (e) => ({
-			key: e.key,
+			id: e.id,
 			label: e.label,
 			meta: e.meta,
 			multiple: e.multiple,
 			selectable: e.selectable
-		}), P = (e, t, n) => ({
-			disabled: t.disabled || w.disabled.value,
+		}), ht = (e, t, n, r) => ({
+			disabled: t.disabled || O.disabled.value,
 			group: mt(e),
 			groupTitle: !1,
 			index: n,
 			item: pt(t),
-			level: Ye.value,
-			selected: e.selectable && j(e, t),
-			loading: w.isItemLoading(t.key),
-			open: w.open.value,
-			placement: w.placement.value,
-			text: t.text,
+			level: D.value,
+			selected: r,
+			loading: O.isItemLoading(t.rowKey),
+			open: O.open.value,
+			placement: O.placement.value,
+			label: t.label,
 			description: t.description
-		}), F = (e, t) => {
-			if (!e.key) return;
-			let r = n(e.key);
-			return w.slots[t ? `${r}:${t}` : r];
-		}, I = (e) => !e.hideLabel && (!!e.label || !!e["prepend:icon"] || !!e["append:icon"] || !!F(e) || !!F(e, "prepend") || !!F(e, "append")), ht = (e) => !e.key || !e.selectable || !e.multiple ? [] : w.selectedChipsFor(e.key), L = t().id, gt = (e) => `${L.value}_group-title_${e}`, _t = (e) => `${L.value}_row-text_${e}`, vt = (e) => `${L.value}_row-description_${e}`, yt = (e, t) => !!t.description && !k(e, t), bt = (e, t, n) => {
+		}), N = (e, t) => {
+			if (!e.id) return;
+			let r = n(e.id);
+			return O.slots[t ? `${r}:${t}` : r];
+		}, P = (e) => !e.hideLabel && (!!e.label || !!e["prepend:icon"] || !!e["append:icon"] || !!N(e) || !!N(e, "prepend") || !!N(e, "append")), gt = (e) => !e.id || !e.selectable || !e.multiple ? [] : O.selectedChipsFor(e.id), F = t().id, _t = (e) => `${F.value}_group-title_${e}`, vt = (e) => `${F.value}_row-text_${e}`, yt = (e) => `${F.value}_row-description_${e}`, bt = (e, t) => !!t.description && !$e(e, t), xt = (e, t, n) => {
 			let r = t;
-			return yt(e, t) && !r["aria-label"] && !r["aria-labelledby"] ? _t(n) : r["aria-labelledby"];
-		}, xt = (e, t, n) => {
+			return bt(e, t) && !r["aria-label"] && !r["aria-labelledby"] ? vt(n) : r["aria-labelledby"];
+		}, St = (e, t, n) => {
 			let r = t["aria-describedby"];
-			return yt(e, t) ? [r, vt(n)].filter(Boolean).join(" ") : r;
-		}, St = c(() => me(E.value)), Ct = (e) => !!e.items && me(rt(e.items)), wt = (e) => St.value ? "menu" : I(e) ? "group" : "none", Tt = (e, t) => I(e) ? gt(t) : void 0, R = (e, t) => ({
-			disabled: w.disabled.value,
+			return bt(e, t) ? [r, yt(n)].filter(Boolean).join(" ") : r;
+		}, Ct = c(() => fe(A.value)), wt = (e) => !!e.items && fe(Je(e.items)), Tt = (e) => Ct.value ? "menu" : P(e) ? "group" : "none", Et = (e, t) => P(e) ? _t(t) : void 0, I = (e, t) => ({
+			disabled: O.disabled.value,
 			group: mt(e),
 			groupTitle: !0,
 			index: t,
 			item: e,
-			level: Ye.value,
+			level: D.value,
 			selected: !1,
 			loading: !1,
-			open: w.open.value,
-			placement: w.placement.value,
-			text: e.label
-		}), z = _({}), Et = (e, t) => {
+			open: O.open.value,
+			placement: O.placement.value,
+			label: e.label
+		}), L = v({}), Dt = (e, t) => {
 			let n = r(t);
-			n ? z.value[e] = n : delete z.value[e];
-		}, B = _({}), Dt = (e, t) => {
+			n ? L.value[e] = n : delete L.value[e];
+		}, R = v({}), Ot = (e, t) => {
 			let n = r(t);
-			n instanceof HTMLElement ? B.value[e] = n : delete B.value[e];
-		}, V = () => {
+			n instanceof HTMLElement ? R.value[e] = n : delete R.value[e];
+		}, z = () => {
 			let e = [], t = 0;
-			for (let n of E.value) {
-				n.onClick && I(n) && e.push(t - .5);
-				for (let r of n.items) r.disabled || w.disabled.value || e.push(t), t++;
+			for (let n of A.value) {
+				n.onClick && P(n) && e.push(t - .5);
+				for (let r of n.items) r.disabled || O.disabled.value || e.push(t), t++;
 			}
 			return e;
-		}, Ot = (e) => {
+		}, kt = (e) => {
 			let t = 0;
-			for (let n = 0; n < E.value.length; n++) {
+			for (let n = 0; n < A.value.length; n++) {
 				if (t - .5 === e) return n;
-				t += E.value[n].items.length;
+				t += A.value[n].items.length;
 			}
 			return -1;
-		}, H = (e) => {
+		}, B = (e) => {
 			if (e != null) {
 				if (Number.isInteger(e)) {
-					z.value[e]?.focus();
+					L.value[e]?.focus();
 					return;
 				}
-				B.value[Ot(e)]?.focus();
+				R.value[kt(e)]?.focus();
 			}
-		}, kt = () => Object.values(D.value).some((e) => e === document.activeElement);
-		ue({
-			active: T,
-			input: () => Object.values(D.value).find((e) => e === document.activeElement) ?? null
+		}, At = () => Object.values(j.value).some((e) => e === document.activeElement);
+		ce({
+			active: k,
+			input: () => Object.values(j.value).find((e) => e === document.activeElement) ?? null
 		});
-		let At = () => {
-			let e = tt.value;
-			return e ? (D.value[e]?.focus(), !0) : !1;
-		}, U = () => H(V()[0]), jt = (e) => {
+		let jt = () => {
+			let e = Ke.value;
+			return e ? (j.value[e]?.focus(), !0) : !1;
+		}, V = () => B(z()[0]), Mt = (e) => {
 			let t = 0;
-			for (let n of E.value) for (let r of n.items) {
-				if (r.key === e) return t;
+			for (let n of A.value) for (let r of n.items) {
+				if (r.rowKey === e) return t;
 				t++;
 			}
 			return -1;
-		}, W = (e, t) => {
-			let n = V();
+		}, H = (e, t) => {
+			let n = z();
 			if (!n.length) return;
 			let r = n.indexOf(e), i = r === -1 ? t > 0 ? 0 : n.length - 1 : (r + t + n.length) % n.length;
-			H(n[i]);
-		}, G = () => {
-			!T.value && At() || U();
-		}, K = () => {
-			let e = V();
-			H(e[e.length - 1]);
-		}, Mt = (e) => {
+			B(n[i]);
+		}, U = () => {
+			!k.value && jt() || V();
+		}, W = () => {
+			let e = z();
+			B(e[e.length - 1]);
+		}, Nt = (e) => {
 			let t = 0;
-			for (let n of E.value) for (let r of n.items) {
+			for (let n of A.value) for (let r of n.items) {
 				if (t === e) return r;
 				t++;
 			}
-		}, Nt = e(), Pt = pe({
-			candidates: () => V().filter(Number.isInteger),
-			getTokens: (e) => [fe(Mt(e)?.text ?? "", Nt.locale)],
+		}, Pt = e(), Ft = de({
+			candidates: () => z().filter(Number.isInteger),
+			getTokens: (e) => [ue(Nt(e)?.label ?? "", Pt.locale)],
 			getCurrent: () => {
-				let e = Object.entries(z.value).find(([, e]) => e === document.activeElement);
+				let e = Object.entries(L.value).find(([, e]) => e === document.activeElement);
 				return e ? Number(e[0]) : void 0;
 			},
-			onMatch: (e) => H(e),
-			locale: () => Nt.locale
-		}), Ft = (e) => {
-			de(e) && Pt.onKeydown(e);
-		}, It = {
-			ArrowDown: () => U(),
-			ArrowUp: () => K(),
-			Down: () => U(),
-			Esc: () => w.close(),
-			Escape: () => w.close(),
-			Up: () => K()
-		}, Lt = (e) => {
+			onMatch: (e) => B(e),
+			locale: () => Pt.locale
+		}), It = (e) => {
+			le(e) && Ft.onKeydown(e);
+		}, Lt = {
+			ArrowDown: () => V(),
+			ArrowUp: () => W(),
+			Down: () => V(),
+			Esc: () => O.close(),
+			Escape: () => O.close(),
+			Up: () => W()
+		}, Rt = (e) => {
 			if (ae(e)) return;
-			let t = It[e.key];
+			let t = Lt[e.key];
 			t && (e.stopPropagation(), e.preventDefault(), t());
 		};
-		Ce(() => {
-			C.level === 0 && tt.value && !T.value && m(() => At());
+		be(() => {
+			T.level === 0 && Ke.value && !k.value && h(() => jt());
 		});
-		let q = _(null), J = _({}), Y, X, Rt = 0, Z = _(null), zt;
-		we(q, (e, t) => {
-			clearTimeout(zt), Z.value = t ?? null, t != null && (zt = setTimeout(() => {
-				Z.value = null;
-			}, Ge));
+		let G = v(null), K = v({}), q, J, zt = 0, Y = v(null), X;
+		xe(G, (e, t) => {
+			clearTimeout(X), Y.value = t ?? null, t != null && (X = setTimeout(() => {
+				Y.value = null;
+			}, C));
 		});
-		let Bt = (e) => q.value !== e && Z.value !== e, Vt = _(0), Ht = () => {
-			let e = Object.values(z.value)[0], t = e?.closest(".bb-dropdown");
+		let Bt = (e) => G.value !== e && Y.value !== e, Vt = v(0), Ht = () => {
+			let e = Object.values(L.value)[0], t = e?.closest(".bb-dropdown");
 			!e || !t || (Vt.value = Math.max(0, t.getBoundingClientRect().right - e.getBoundingClientRect().right));
 		}, Ut = (e, t) => {
-			t ? J.value[e] = t : delete J.value[e];
-		}, Q = () => clearTimeout(Y), $ = () => clearTimeout(X);
-		Se(() => {
-			clearTimeout(X), clearTimeout(Y), clearTimeout(zt);
+			t ? K.value[e] = t : delete K.value[e];
+		}, Z = () => clearTimeout(q), Q = () => clearTimeout(J);
+		ye(() => {
+			clearTimeout(J), clearTimeout(q), clearTimeout(X);
 		});
 		let Wt = (e) => {
-			$(), clearTimeout(Y), Y = setTimeout(() => {
-				q.value === e && (q.value = null);
-			}, Ue);
+			Q(), clearTimeout(q), q = setTimeout(() => {
+				G.value === e && (G.value = null);
+			}, Re);
 		}, Gt = (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;
 		}, Kt = (e) => {
-			let t = z.value[e];
+			let t = L.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);
 			if (!i) return 0;
-			let a = performance.now() - Rt;
+			let a = performance.now() - zt;
 			return Math.max(0, i - a + 16);
-		}, qt = async (e, t = !1) => {
-			Q(), Ht(), q.value = e, t && (await m(), J.value[e]?.focusFirst());
+		}, $ = async (e, t = !1) => {
+			Z(), Ht(), G.value = e, t && (await h(), K.value[e]?.focusFirst());
 		};
-		we(w.open, (e) => {
+		xe(O.open, (e) => {
 			if (!e) {
-				$(), Q(), q.value = null;
+				Q(), Z(), G.value = null;
 				return;
 			}
-			Rt = performance.now();
+			zt = performance.now();
 		});
-		let Jt = (e, t) => {
-			t ? q.value = e : q.value === e && (q.value = null);
-		}, Yt = (e) => {
-			q.value = null, m(() => H(e));
-		}, Xt = (e, t, n) => {
+		let qt = (e, t) => {
+			t ? G.value = e : G.value === e && (G.value = null);
+		}, Jt = (e) => {
+			G.value = null, h(() => B(e));
+		}, Yt = (e, t, n) => {
 			if (n.pointerType !== "mouse") return;
-			if (Q(), $(), q.value !== null && q.value === e.key) {
-				H(t);
+			if (Z(), Q(), G.value !== null && G.value === e.rowKey) {
+				B(t);
 				return;
 			}
 			let r = () => {
-				H(t), e.items ? qt(e.key) : q.value = null;
+				B(t), e.items ? $(e.rowKey) : G.value = null;
 			};
-			if (q.value !== null) {
-				let e = jt(q.value);
-				e >= 0 && Math.abs(t - e) <= 1 ? X = setTimeout(r, We) : r();
+			if (G.value !== null) {
+				let e = Mt(G.value);
+				e >= 0 && Math.abs(t - e) <= 1 ? J = setTimeout(r, ze) : r();
 				return;
 			}
 			let i = e.items ? Kt(t) : 0;
-			i ? X = setTimeout(r, i) : r();
-		}, Zt = () => {
-			Q(), $();
+			i ? J = setTimeout(r, i) : r();
+		}, Xt = () => {
+			Z(), Q();
+		}, Zt = (e, t) => {
+			t.pointerType === "mouse" && e.items && Wt(e.rowKey);
 		}, Qt = (e, t) => {
-			t.pointerType === "mouse" && e.items && Wt(e.key);
-		}, $t = (e, t) => {
 			t.pointerType === "mouse" && Wt(e);
-		}, en = (e, t) => {
+		}, $t = (e, t) => {
 			e.searchable && t.preventDefault();
-		}, tn = (e, t, n, r) => {
-			if (!(t.disabled || w.disabled.value) && !w.isItemLoading(t.key)) {
+		}, en = (e, t, n, r) => {
+			if (!(t.disabled || O.disabled.value) && !O.isItemLoading(t.rowKey)) {
 				if (t.items) {
-					r.stopPropagation(), Q(), $(), C.navigate ? C.navigate(t) : q.value = t.key;
+					r.stopPropagation(), Z(), Q(), T.navigate ? T.navigate(t) : G.value = t.rowKey;
 					return;
 				}
-				if (e.selectable && e.key) {
-					r.stopPropagation(), w.toggleSelect(e, t), w.runItemAction(t, r), kt() || H(n);
+				if (e.selectable && e.id) {
+					r.stopPropagation(), O.toggleSelect(e, t), O.runItemAction(t, r), At() || B(n);
 					return;
 				}
-				r.stopPropagation(), w.runItemAction(t, r, { close: !0 });
+				r.stopPropagation(), O.runItemAction(t, r, { close: !0 });
 			}
-		}, nn = (e, t, n) => {
+		}, tn = (e, t, n) => {
 			switch (n.key) {
 				case "ArrowDown":
-					n.preventDefault(), $(), Q(), q.value = null, W(t, 1);
+					n.preventDefault(), Q(), Z(), G.value = null, H(t, 1);
 					break;
 				case "ArrowUp":
-					n.preventDefault(), $(), Q(), q.value = null, W(t, -1);
+					n.preventDefault(), Q(), Z(), G.value = null, H(t, -1);
 					break;
 				case "Home":
-					n.preventDefault(), G();
+					n.preventDefault(), U();
 					break;
 				case "End":
-					n.preventDefault(), K();
+					n.preventDefault(), W();
 					break;
 				case "ArrowRight":
-					e.items && (n.preventDefault(), n.stopPropagation(), C.navigate ? C.navigate(e) : qt(e.key, !0));
+					e.items && (n.preventDefault(), n.stopPropagation(), T.navigate ? T.navigate(e) : $(e.rowKey, !0));
 					break;
 				case "ArrowLeft":
-					C.back ? (n.preventDefault(), n.stopPropagation(), C.back()) : C.level > 0 && (n.preventDefault(), n.stopPropagation(), Je("close-level"));
+					T.back ? (n.preventDefault(), n.stopPropagation(), T.back()) : T.level > 0 && (n.preventDefault(), n.stopPropagation(), E("close-level"));
 					break;
-				default: Ft(n);
+				default: It(n);
 			}
-		}, rn = (e, t) => {
+		}, nn = (e, t) => {
 			let n = M(e) - .5;
 			switch (t.key) {
 				case "ArrowDown":
-					t.preventDefault(), W(n, 1);
+					t.preventDefault(), H(n, 1);
 					break;
 				case "ArrowUp":
-					t.preventDefault(), W(n, -1);
+					t.preventDefault(), H(n, -1);
 					break;
 				case "Home":
-					t.preventDefault(), G();
+					t.preventDefault(), U();
 					break;
 				case "End":
-					t.preventDefault(), K();
+					t.preventDefault(), W();
 					break;
 				case "ArrowLeft":
-					C.back ? (t.preventDefault(), t.stopPropagation(), C.back()) : C.level > 0 && (t.preventDefault(), t.stopPropagation(), Je("close-level"));
+					T.back ? (t.preventDefault(), t.stopPropagation(), T.back()) : T.level > 0 && (t.preventDefault(), t.stopPropagation(), E("close-level"));
 					break;
-				default: Ft(t);
+				default: It(t);
 			}
+		}, rn = {
+			slots: O.slots,
+			setItemEl: Dt,
+			itemAttrs: ut,
+			rowPart: dt,
+			slotProps: ht,
+			rowSlot: $e,
+			itemSlot: Qe,
+			groupRowSlot: et,
+			rowTextId: vt,
+			rowDescriptionId: yt
 		};
-		return Ke({
-			focusFirst: G,
-			focusLast: K
-		}), (e, t) => (g(!0), d(s, null, v(E.value, (n, r) => (g(), d(s, { key: n.key ?? r }, [
-			n.divider ? (g(), d("hr", Oe)) : u("", !0),
-			I(n) ? (g(), d("div", {
+		return w({
+			focusFirst: U,
+			focusLast: W
+		}), (e, t) => (_(!0), d(s, null, y(A.value, (n, r) => (_(), d(s, { key: n.id ?? r }, [
+			n.divider ? (_(), d("hr", Ee)) : u("", !0),
+			P(n) ? (_(), d("div", {
 				key: 1,
-				id: gt(r),
+				id: _t(r),
 				ref_for: !0,
-				ref: (e) => Dt(r, e),
-				class: h(["bb-dropdown__group-title", st(n)]),
+				ref: (e) => Ot(r, e),
+				class: g(["bb-dropdown__group-title", nt(n)]),
 				role: n.onClick ? "menuitem" : "presentation",
 				tabindex: n.onClick ? -1 : void 0,
 				onClick: (e) => n.onClick?.(e),
 				onKeydown: [
-					(e) => n.onClick && rn(r, e),
-					Ee((e) => n.onClick?.(e), ["enter"]),
-					Ee(De((e) => n.onClick?.(e), ["prevent"]), ["space"])
+					(e) => n.onClick && nn(r, e),
+					we((e) => n.onClick?.(e), ["enter"]),
+					we(Te((e) => n.onClick?.(e), ["prevent"]), ["space"])
 				]
 			}, [
-				F(n, "prepend") ? (g(), l(y(F(n, "prepend")), p({
+				N(n, "prepend") ? (_(), l(b(N(n, "prepend")), m({
 					key: 0,
 					ref_for: !0
-				}, R(n, M(r))), null, 16)) : x(w).slots["item:prepend"] ? (g(), l(y(x(w).slots["item:prepend"]), p({
+				}, I(n, M(r))), null, 16)) : S(O).slots["item:prepend"] ? (_(), l(b(S(O).slots["item:prepend"]), m({
 					key: 1,
 					ref_for: !0
-				}, R(n, M(r))), null, 16)) : n["prepend:icon"] ? (g(), l(o, {
+				}, I(n, M(r))), null, 16)) : n["prepend:icon"] ? (_(), l(o, {
 					key: 2,
 					class: "group-title__prepend-icon",
 					icon: n["prepend:icon"]
 				}, null, 8, ["icon"])) : u("", !0),
-				F(n) ? (g(), l(y(F(n)), p({
+				N(n) ? (_(), l(b(N(n)), m({
 					key: 3,
 					ref_for: !0
-				}, R(n, M(r))), null, 16)) : n.label ? (g(), d("span", Ae, b(n.label), 1)) : u("", !0),
-				F(n, "append") ? (g(), l(y(F(n, "append")), p({
+				}, I(n, M(r))), null, 16)) : n.label ? (_(), d("span", Oe, x(n.label), 1)) : u("", !0),
+				N(n, "append") ? (_(), l(b(N(n, "append")), m({
 					key: 5,
 					ref_for: !0
-				}, R(n, M(r))), null, 16)) : x(w).slots["item:append"] ? (g(), l(y(x(w).slots["item:append"]), p({
+				}, I(n, M(r))), null, 16)) : S(O).slots["item:append"] ? (_(), l(b(S(O).slots["item:append"]), m({
 					key: 6,
 					ref_for: !0
-				}, R(n, M(r))), null, 16)) : n["append:icon"] ? (g(), l(o, {
+				}, I(n, M(r))), null, 16)) : n["append:icon"] ? (_(), l(o, {
 					key: 7,
 					class: "group-title__append-icon",
 					icon: n["append:icon"]
 				}, null, 8, ["icon"])) : u("", !0)
-			], 42, ke)) : u("", !0),
-			x(T) && ht(n).length ? (g(), d("div", je, [f("div", Me, [(g(!0), d(s, null, v(ht(n), (e) => (g(), l(re, {
+			], 42, De)) : u("", !0),
+			S(k) && gt(n).length ? (_(), d("div", ke, [f("div", Ae, [(_(!0), d(s, null, y(gt(n), (e) => (_(), l(ne, {
 				key: e.key,
 				class: "bb-dropdown__sheet-chip",
-				clearable: !x(w).disabled.value,
+				clearable: !S(O).disabled.value,
 				size: "xl",
 				variant: "secondary",
-				"onClick:clear": (t) => x(w).deselect(n.key, e.key),
-				onMousedown: t[0] ||= De(() => {}, ["prevent"])
+				"onClick:clear": (t) => S(O).deselect(n.id, e.key),
+				onMousedown: t[0] ||= Te(() => {}, ["prevent"])
 			}, {
-				default: S(() => [ve(b(e.text), 1)]),
+				default: Ce(() => [ge(x(e.text), 1)]),
 				_: 2
 			}, 1032, ["clearable", "onClick:clear"]))), 128))])])) : u("", !0),
-			n.searchable && n.key ? (g(), d("div", Ne, [
-				ye(o, {
+			n.searchable && n.id ? (_(), d("div", je, [
+				p(o, {
 					"aria-hidden": "true",
 					class: "bb-dropdown__search-icon",
 					focusable: "false",
-					icon: x(le)
+					icon: S(se)
 				}, null, 8, ["icon"]),
-				f("input", p({
+				f("input", m({
 					ref_for: !0,
-					ref: (e) => et(n.key, e),
-					"aria-label": n.searchPlaceholder || x(Ze),
+					ref: (e) => Ge(n.id, e),
+					"aria-label": n.searchPlaceholder || S(He),
 					autocomplete: "off",
 					class: "bb-dropdown__search-input",
-					placeholder: n.searchPlaceholder || x(Ze),
+					placeholder: n.searchPlaceholder || S(He),
 					role: "searchbox",
 					type: "text",
-					value: x(w).queryFor(n.key)
-				}, x(w).passthrough.input, {
-					onInput: (e) => x(w).setQuery(n.key, e.target.value),
-					onKeydown: Lt
-				}), null, 16, Pe),
-				n.key && x(w).isGroupLoading(n.key) ? (g(), d("div", Fe)) : u("", !0)
+					value: S(O).queryFor(n.id)
+				}, S(O).passthrough.input, {
+					onInput: (e) => S(O).setQuery(n.id, e.target.value),
+					onKeydown: Rt
+				}), null, 16, Me),
+				n.id && S(O).isGroupLoading(n.id) ? (_(), d("div", Ne)) : u("", !0)
 			])) : u("", !0),
 			f("div", {
-				"aria-labelledby": Tt(n, r),
-				class: h(["bb-dropdown__group-items", {
-					"bb-dropdown__group-items--capped": !!nt(n),
-					"bb-dropdown__group-items--loading": !!n.key && x(w).isGroupLoading(n.key)
+				"aria-labelledby": Et(n, r),
+				class: g(["bb-dropdown__group-items", {
+					"bb-dropdown__group-items--capped": !!qe(n),
+					"bb-dropdown__group-items--loading": !!n.id && S(O).isGroupLoading(n.id)
 				}]),
-				role: wt(n),
-				style: xe({ maxHeight: nt(n) })
-			}, [(g(!0), d(s, null, v(n.items, (t, a) => (g(), d(s, { key: t.key }, [t.placeholder ? (g(), d("div", {
+				role: Tt(n),
+				style: ve({ maxHeight: qe(n) })
+			}, [(_(!0), d(s, null, y(n.items, (t, a) => (_(), d(s, { key: t.rowKey }, [t.placeholder ? (_(), d("div", {
 				key: 0,
-				class: h(["bb-dropdown__placeholder", `bb-dropdown__placeholder--${t.placeholder}`]),
+				class: g(["bb-dropdown__placeholder", `bb-dropdown__placeholder--${t.placeholder}`]),
 				role: "presentation"
-			}, [ft(t) ? (g(), l(y(ft(t)), {
+			}, [ft(t) ? (_(), l(b(ft(t)), {
 				key: 0,
 				error: t.placeholder === "loading" ? void 0 : t.error ?? null,
-				"group-key": n.key,
-				text: t.text
+				"group-id": n.id,
+				text: t.label
 			}, null, 8, [
 				"error",
-				"group-key",
+				"group-id",
 				"text"
-			])) : (g(), d(s, { key: 1 }, [t.placeholder === "failed" ? (g(), l(ie, {
+			])) : (_(), d(s, { key: 1 }, [t.placeholder === "failed" ? (_(), l(re, {
 				key: 0,
 				class: "bb-dropdown__placeholder-icon"
-			})) : u("", !0), f("span", Le, b(t.text), 1)], 64))], 2)) : (g(), d(s, { key: 1 }, [ye(te, p({
-				ref_for: !0,
-				ref: (e) => Et(M(r) + a, e),
-				class: "bb-dropdown__item"
-			}, dt(n, t, M(r) + a)), {
-				default: S(() => [
-					k(n, t, "prepend") ? (g(), l(y(k(n, t, "prepend")), p({
-						key: 0,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : x(w).slots["item:prepend"] ? (g(), l(y(x(w).slots["item:prepend"]), p({
-						key: 1,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : t["prepend:icon"] ? (g(), l(o, p({
-						key: 2,
-						class: "bb-dropdown__item-icon item__prepend-icon",
-						icon: t["prepend:icon"],
-						ref_for: !0
-					}, N("itemIcon", n, t)), null, 16, ["icon"])) : u("", !0),
-					k(n, t) ? (g(), l(y(k(n, t)), p({
-						key: 3,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : (g(), d("span", Re, [f("span", p({
-						id: _t(M(r) + a),
-						class: "bb-dropdown__item-text",
-						ref_for: !0
-					}, N("itemText", n, t)), b(t.text), 17, ze), t.description ? (g(), d("span", p({
-						key: 0,
-						id: vt(M(r) + a),
-						class: "bb-dropdown__item-description",
-						ref_for: !0
-					}, N("itemDescription", n, t)), b(t.description), 17, Be)) : u("", !0)])),
-					n.selectable ? (g(), l(o, {
-						key: 5,
-						"aria-hidden": "true",
-						class: "item__check",
-						icon: x(se)
-					}, null, 8, ["icon"])) : u("", !0),
-					n.selectable && j(n, t) ? u("", !0) : (g(), d(s, { key: 6 }, [O(t, "append") ? (g(), l(y(O(t, "append")), p({
-						key: 0,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : t.items ? (g(), l(o, {
-						key: 1,
-						"aria-hidden": "true",
-						class: "item__chevron",
-						icon: x(ce)
-					}, null, 8, ["icon"])) : A(n, "append") ? (g(), l(y(A(n, "append")), p({
-						key: 2,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : x(w).slots["item:append"] ? (g(), l(y(x(w).slots["item:append"]), p({
-						key: 3,
-						ref_for: !0
-					}, P(n, t, M(r) + a)), null, 16)) : t["append:icon"] ? (g(), l(o, p({
-						key: 4,
-						class: "bb-dropdown__item-icon item__append-icon",
-						icon: t["append:icon"],
-						ref_for: !0
-					}, N("itemIcon", n, t)), null, 16, ["icon"])) : u("", !0)], 64))
-				]),
-				_: 2
-			}, 1040), t.items && !e.navigate ? (g(), l(i, {
+			})) : u("", !0), f("span", Fe, x(t.label), 1)], 64))], 2)) : (_(), d(s, { key: 1 }, [p(ie, {
+				group: st(n),
+				index: M(r) + a,
+				item: t,
+				row: rn,
+				selected: !!n.selectable && it(n, t)
+			}, null, 8, [
+				"group",
+				"index",
+				"item",
+				"selected"
+			]), t.items && !e.navigate ? (_(), l(i, {
 				key: 0,
-				anchor: z.value[M(r) + a],
+				anchor: L.value[M(r) + a],
 				class: "bb-dropdown bb-dropdown--submenu",
 				"hide-arrow": "",
-				"model-value": q.value === t.key,
+				"model-value": G.value === t.rowKey,
 				offset: Vt.value,
 				placement: "right-start",
 				role: "none",
-				"transition-duration": Ge,
-				"onUpdate:modelValue": (e) => Jt(t.key, e)
+				"transition-duration": C,
+				"onUpdate:modelValue": (e) => qt(t.rowKey, e)
 			}, {
-				default: S(({ availableHeight: n }) => [f("span", {
-					id: `submenu_${x(w).rootId}_${t.key}`,
-					"aria-label": Ct(t) ? t.text : void 0,
+				default: Ce(({ availableHeight: n }) => [f("span", {
+					id: `submenu_${S(O).rootId}_${t.domKey}`,
+					"aria-label": wt(t) ? t.label : void 0,
 					class: "bb-dropdown__list",
-					"data-bb-dropdown-surface": x(w).rootId,
-					inert: Bt(t.key),
-					role: Ct(t) ? "dialog" : "menu",
-					style: xe({ "--max-h": n == null ? void 0 : `${n}px` }),
-					onPointerenter: Zt,
-					onPointerleave: (e) => $t(t.key, e)
-				}, [ye(_e, {
+					"data-bb-dropdown-surface": S(O).rootId,
+					inert: Bt(t.rowKey),
+					role: wt(t) ? "dialog" : "menu",
+					style: ve({ "--max-h": n == null ? void 0 : `${n}px` }),
+					onPointerenter: Xt,
+					onPointerleave: (e) => Qt(t.rowKey, e)
+				}, [p(he, {
 					ref_for: !0,
-					ref: (e) => Ut(t.key, e),
-					groups: rt(t.items),
+					ref: (e) => Ut(t.rowKey, e),
+					groups: Je(t.items),
 					level: e.level + 1,
-					onCloseLevel: (e) => Yt(M(r) + a)
+					onCloseLevel: (e) => Jt(M(r) + a)
 				}, null, 8, [
 					"groups",
 					"level",
 					"onCloseLevel"
-				])], 44, Ve)]),
+				])], 44, Ie)]),
 				_: 2
 			}, 1032, [
 				"anchor",
 				"model-value",
 				"offset",
 				"onUpdate:modelValue"
-			])) : u("", !0)], 64))], 64))), 128))], 14, Ie)
+			])) : u("", !0)], 64))], 64))), 128))], 14, Pe)
 		], 64))), 128));
 	}
 });
 //#endregion
-export { Ke as default };
+export { w as default };