@bridge-ui/vue 0.0.5 → 0.0.7

package/dist/Components/List/composables/useList.js

@@ -1,8 +1,8 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../listInjectionKey.js";
 import { computed as i, provide as a, useAttrs as o } from "vue";
-import { get as s, omit as c } from "es-toolkit/compat";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { cn as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l, omit as u } from "es-toolkit/compat";
 //#region src/Components/List/composables/useList.ts
 var d = [
 	"as",
@@ -12,7 +12,7 @@ var d = [
 	"customProps"
 ];
 function f(f) {
-	let p = o(), m = i(() => u({
+	let p = o(), m = i(() => c({
 		bridgeKeys: d,
 		props: {
 			...p,
@@ -26,13 +26,13 @@ function f(f) {
 		props: () => m.value.componentProps
 	});
 	a(r, i(() => ({ dense: h.value.dense === !0 })));
-	let y = i(() => c(m.value.inheritedAttrs, []));
+	let y = i(() => u(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, y.value, l({
+		rootBind: i(() => e(_.value?.root, y.value, s({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
-			[s(v.value, "root") ?? ""]: !0
+			[l(v.value, "root") ?? ""]: !0
 		})))
 	};
 }

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { useSlots, Slot } from 'vue';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { IconSource } from '../../../Adapters/Icon';
 import { ListItemOwnProps, ListItemProps } from '../listItem.types';
 type ListItemLibDefaults = LibDefaultsShape<ListItemOwnProps, "role">;
 type ListItemMerged = MergeLibDefaults<ListItemOwnProps, ListItemLibDefaults>;
@@ -34,7 +34,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
         size: "sm";
         class: string;
     }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-    resolvedSelectedIcon: import('vue').ComputedRef<LucideIcon | null>;
+    resolvedSelectedIcon: import('vue').ComputedRef<IconSource | null>;
 };
 export declare function resolveListItemPrimary(slots: ReturnType<typeof useSlots>, primary?: string): Slot | (() => null | string);
 export {};

package/dist/Components/ListItem/composables/useListItem.js

@@ -1,14 +1,13 @@
 import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { LIST_INJECTION_KEY as o } from "../../List/listInjectionKey.js";
-import { getListboxOptionId as s } from "../../Listbox/composables/useListboxNavigation.js";
+import { getListboxOptionId as o } from "../../Listbox/composables/useListboxNavigation.js";
+import { LIST_INJECTION_KEY as s } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as c } from "../../Listbox/listboxInjectionKey.js";
 import { computed as l, getCurrentInstance as u, inject as d, onBeforeUnmount as f, toValue as p, useAttrs as m, watch as h } from "vue";
-import { get as g, isNull as _, omit as v } from "es-toolkit/compat";
-import { cn as y, splitComponentProps as b } from "@bridge-ui/core";
-import { Check as x } from "@lucide/vue";
+import { cn as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { get as v, isNull as y, omit as b } from "es-toolkit/compat";
 //#region src/Components/ListItem/composables/useListItem.ts
-var S = [
+var x = [
 	"as",
 	"role",
 	"dense",
@@ -23,109 +22,109 @@ var S = [
 	"interactive",
 	"selectedIcon"
 ];
-function C(t, n, C) {
-	let w = m(), T = d(o, null), E = d(c, null), D = E != null, O = l(() => b({
+function S(t, n, S) {
+	let C = m(), w = d(s, null), T = d(c, null), E = T != null, D = l(() => _({
 		props: {
-			...w,
+			...C,
 			...t
 		},
-		bridgeKeys: S
-	})), { merged: k, entry: A } = i({
+		bridgeKeys: x
+	})), { merged: O, entry: k } = i({
 		libDefaults: n,
 		componentName: "ListItem",
-		props: () => O.value.componentProps
-	}), j = l(() => E ? p(E) : null), M = l(() => k.value.value == null || !D ? null : {
-		value: k.value.value,
-		description: k.value.secondary,
-		disabled: !!k.value.disabled,
-		label: k.value.primary ?? String(k.value.value)
-	}), N;
+		props: () => D.value.componentProps
+	}), A = l(() => T ? p(T) : null), j = l(() => O.value.value == null || !E ? null : {
+		value: O.value.value,
+		description: O.value.secondary,
+		disabled: !!O.value.disabled,
+		label: O.value.primary ?? String(O.value.value)
+	}), M;
 	h(() => {
-		let e = M.value;
+		let e = j.value;
 		return e ? `${String(e.value)}:${e.label}:${e.disabled}:${e.description ?? ""}` : null;
 	}, () => {
-		N?.(), N = void 0;
-		let e = M.value;
-		!e || !E || (N = p(E).registerOption(e));
+		M?.(), M = void 0;
+		let e = j.value;
+		!e || !T || (M = p(T).registerOption(e));
 	}, { immediate: !0 }), f(() => {
-		N?.();
+		M?.();
 	});
-	let P = l(() => M.value != null), F = l(() => !M.value || !j.value ? !1 : j.value.isSelected(M.value.value)), I = l(() => !M.value || !j.value ? -1 : j.value.getOptionIndex(M.value.value)), L = l(() => !j.value || I.value < 0 ? !1 : j.value.highlightedIndex === I.value), R = l(() => k.value.customProps), z = a({
-		entry: A,
-		props: () => O.value.componentProps
-	}), B = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : T ? p(T).dense : !1), V = l(() => e(C, "primary") || e(C, "default") || !!k.value.primary), H = l(() => e(C, "secondary") || !!k.value.secondary), U = l(() => e(C, "start")), W = l(() => P.value ? !F.value || !j.value?.showCheckmark ? null : x : !k.value.selected || _(k.value.selectedIcon) ? null : k.value.selectedIcon ?? x), G = l(() => e(C, "end") || W.value != null), K = l(() => v(O.value.inheritedAttrs, [])), q = l(() => r(R.value?.root, K.value, {
-		class: y({
+	let N = l(() => j.value != null), P = l(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = l(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = l(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = l(() => O.value.customProps), R = a({
+		entry: k,
+		props: () => D.value.componentProps
+	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || y(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => b(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
+		class: g({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0 dark:border-white/10": k.value.divider,
-			[g(z.value, "root") ?? ""]: !0
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
+			[v(R.value, "root") ?? ""]: !0
 		}),
-		id: P.value && j.value?.listboxId && I.value >= 0 ? s(j.value.listboxId, I.value) : void 0
-	})), J = l(() => k.value.interactive || P.value ? r(R.value?.interactive, {}, {
-		"aria-disabled": k.value.disabled ? !0 : void 0,
-		role: P.value ? "option" : k.value.role,
-		tabindex: k.value.disabled || P.value ? -1 : 0,
-		"data-selected": k.value.selected || F.value ? !0 : void 0,
-		"aria-selected": P.value ? F.value : void 0,
-		onMousedown: P.value ? (e) => {
+		id: N.value && A.value?.listboxId && F.value >= 0 ? o(A.value.listboxId, F.value) : void 0
+	})), q = l(() => O.value.interactive || N.value ? r(L.value?.interactive, {}, {
+		"aria-disabled": O.value.disabled ? !0 : void 0,
+		role: N.value ? "option" : O.value.role,
+		tabindex: O.value.disabled || N.value ? -1 : 0,
+		"data-selected": O.value.selected || P.value ? !0 : void 0,
+		"aria-selected": N.value ? P.value : void 0,
+		onMousedown: N.value ? (e) => {
 			e.preventDefault();
 		} : void 0,
-		onClick: P.value ? () => {
-			M.value && j.value?.onSelect(M.value);
+		onClick: N.value ? () => {
+			j.value && A.value?.onSelect(j.value);
 		} : void 0,
-		class: y({
+		class: g({
 			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
-			"cursor-pointer select-none": !k.value.disabled,
+			"cursor-pointer select-none": !O.value.disabled,
 			"px-4": !0,
-			"py-2": !B.value,
-			"py-1.5": B.value,
-			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !k.value.disabled && !P.value,
-			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": k.value.selected && !P.value,
-			[j.value?.optionSelectedClass ?? ""]: P.value && F.value,
-			[j.value?.mergedClasses.optionSelected ?? ""]: P.value && F.value,
-			[j.value?.optionHighlightedClass ?? ""]: P.value && L.value && !F.value,
-			[j.value?.mergedClasses.optionHighlighted ?? ""]: P.value && L.value && !F.value,
-			"opacity-50 pointer-events-none": k.value.disabled,
-			[g(z.value, "interactive") ?? ""]: !0,
-			[j.value?.sizeClasses?.option ?? ""]: !0
+			"py-2": !z.value,
+			"py-1.5": z.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !O.value.disabled && !N.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": O.value.selected && !N.value,
+			[A.value?.optionSelectedClass ?? ""]: N.value && P.value,
+			[A.value?.mergedClasses.optionSelected ?? ""]: N.value && P.value,
+			[A.value?.optionHighlightedClass ?? ""]: N.value && I.value && !P.value,
+			[A.value?.mergedClasses.optionHighlighted ?? ""]: N.value && I.value && !P.value,
+			"opacity-50 pointer-events-none": O.value.disabled,
+			[v(R.value, "interactive") ?? ""]: !0,
+			[A.value?.sizeClasses?.option ?? ""]: !0
 		})
-	}) : null), Y = l(() => y({
+	}) : null), J = l(() => g({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"items-center text-dark-900 dark:text-dark-100": !k.value.interactive,
-		"px-4": !k.value.interactive,
-		"py-2": !k.value.interactive && !B.value,
-		"py-1.5": !k.value.interactive && B.value
-	})), X = l(() => r(R.value?.start, {}, y({
+		"items-center text-dark-900 dark:text-dark-100": !O.value.interactive,
+		"px-4": !O.value.interactive,
+		"py-2": !O.value.interactive && !z.value,
+		"py-1.5": !O.value.interactive && z.value
+	})), Y = l(() => r(L.value?.start, {}, g({
 		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[g(z.value, "start") ?? ""]: !0
-	}))), Z = l(() => r(R.value?.content, {}, y({
+		[v(R.value, "start") ?? ""]: !0
+	}))), X = l(() => r(L.value?.content, {}, g({
 		"min-w-0 flex-1": !0,
-		[g(z.value, "content") ?? ""]: !0
-	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
+		[v(R.value, "content") ?? ""]: !0
+	}))), Z = l(() => r(L.value?.primary, {}, g("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, v(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, g("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, v(R.value, "secondary"))));
 	return {
-		merged: k,
-		hasEnd: G,
-		endBind: l(() => r(R.value?.end, {}, y({
+		merged: O,
+		hasEnd: W,
+		endBind: l(() => r(L.value?.end, {}, g({
 			"ml-auto flex shrink-0 items-center": !0,
-			[g(z.value, "end") ?? ""]: !0
+			[v(R.value, "end") ?? ""]: !0
 		}))),
-		rootBind: q,
-		rowClass: Y,
-		hasStart: U,
-		startBind: X,
-		hasPrimary: V,
-		contentBind: Z,
-		primaryBind: Q,
-		hasSecondary: H,
-		secondaryBind: $,
-		interactiveBind: J,
-		selectedIconBind: l(() => r(R.value?.selectedIcon, {}, {
+		rootBind: K,
+		rowClass: J,
+		hasStart: H,
+		startBind: Y,
+		hasPrimary: B,
+		contentBind: X,
+		primaryBind: Z,
+		hasSecondary: V,
+		secondaryBind: Q,
+		interactiveBind: q,
+		selectedIconBind: l(() => r(L.value?.selectedIcon, {}, {
 			size: "sm",
-			class: y("shrink-0", j.value?.checkClass, g(z.value, "selectedIcon"))
+			class: g("shrink-0", A.value?.checkClass, v(R.value, "selectedIcon"))
 		})),
-		resolvedSelectedIcon: W
+		resolvedSelectedIcon: U
 	};
 }
-function w(r, i) {
+function C(r, i) {
 	if (e(r, "primary")) return n(r, "primary");
 	if (e(r, "default")) return n(r, "default");
 	if (!t(i)) return () => null;
@@ -133,4 +132,4 @@ function w(r, i) {
 	return () => a;
 }
 //#endregion
-export { w as resolveListItemPrimary, C as useListItem };
+export { C as resolveListItemPrimary, S as useListItem };

package/dist/Components/ListItem/listItem.types.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot, VNode } from 'vue';
 import { ListboxValue, MergeHtmlProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface ListItemClasses {
     /**
@@ -146,7 +146,7 @@ export interface ListItemOwnProps {
      *
      * @default Check
      */
-    selectedIcon?: null | LucideIcon;
+    selectedIcon?: null | IconSource;
     /**
      * When set inside a `Listbox`, registers this row as a selectable option.
      *

package/dist/Components/ListSection/composables/useListSection.js

@@ -2,8 +2,8 @@ import { resolveSlotOrProp as e } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as i } from "../../List/listInjectionKey.js";
 import { computed as a, inject as o, toValue as s, useAttrs as c } from "vue";
-import { get as l, omit as u } from "es-toolkit/compat";
-import { cn as d, splitComponentProps as f } from "@bridge-ui/core";
+import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { get as d, omit as f } from "es-toolkit/compat";
 //#region src/Components/ListSection/composables/useListSection.ts
 var p = [
 	"as",
@@ -14,7 +14,7 @@ var p = [
 	"customProps"
 ];
 function m(m, h) {
-	let g = c(), _ = o(i, null), v = a(() => f({
+	let g = c(), _ = o(i, null), v = a(() => u({
 		props: {
 			...g,
 			...m
@@ -26,24 +26,24 @@ function m(m, h) {
 	}), x = a(() => y.value.customProps), S = r({
 		entry: b,
 		props: () => v.value.componentProps
-	}), C = a(() => _ ? s(_).dense : !1), w = a(() => e(h, "default", y.value.title)), T = a(() => u(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
+	}), C = a(() => _ ? s(_).dense : !1), w = a(() => e(h, "default", y.value.title)), T = a(() => f(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
 	return {
 		label: w,
 		merged: y,
-		rootBind: a(() => t(x.value?.root, T.value, d({
+		rootBind: a(() => t(x.value?.root, T.value, l({
 			"list-none": !0,
 			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
-			[l(S.value, "root") ?? ""]: !0
+			[d(S.value, "root") ?? ""]: !0
 		}))),
 		titleBind: a(() => t(x.value?.title, {}, {
 			role: "presentation",
-			class: d({
+			class: l({
 				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
 				"sticky top-0 z-10": y.value.sticky && E.value,
 				"py-2": !C.value,
 				"py-1.5": C.value,
 				"pl-14": y.value.inset,
-				[l(S.value, "title") ?? ""]: !0
+				[d(S.value, "title") ?? ""]: !0
 			})
 		}))
 	};

package/dist/Components/Listbox/Listbox.vue.d.ts

@@ -23,10 +23,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     multiple: boolean;
     disableAutoFocus: boolean;
     placement: import('@floating-ui/utils').Placement;
-    emptyMessage: string;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
-    loadingMessage: string;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,20 @@
-import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as n } from "../../Utils/index.js";
-import r from "../List/List.js";
-import { useListbox as i } from "./composables/useListbox.js";
-import { LISTBOX_INJECTION_KEY as ee } from "./listboxInjectionKey.js";
-import te from "../ListItem/ListItem.js";
-import ne from "../ListSection/ListSection.js";
-import a from "../Menu/Menu.js";
-import o from "../Progress/Progress.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as re, useSlots as ie, watch as O, withCtx as k } from "vue";
-import { isNil as ae } from "es-toolkit/compat";
-import { cn as A, entriesFromListboxOptions as j, flattenListboxOptions as M, mapListboxEntriesToRows as N } from "@bridge-ui/core";
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import { hasNamedSlot as t, resolveNamedSlot as n } from "../../Utils/slotOrProp.js";
+import { mergeNestedComponentProps as r } from "../../Utils/index.js";
+import { useListbox as ee } from "./composables/useListbox.js";
+import te from "../List/List.js";
+import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
+import a from "../ListItem/ListItem.js";
+import o from "../ListSection/ListSection.js";
+import s from "../Menu/Menu.js";
+import ne from "../Progress/Progress.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useModel as re, useSlots as ie, watch as k, withCtx as A } from "vue";
+import { cn as ae, entriesFromListboxOptions as oe, flattenListboxOptions as j, mapListboxEntriesToRows as M } from "@bridge-ui/core";
+import { isNil as N } from "es-toolkit/compat";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var P = { key: 1 }, F = /* @__PURE__ */ h({
+var P = { key: 1 }, F = /* @__PURE__ */ g({
 	__name: "Listbox",
-	props: /* @__PURE__ */ _({
+	props: /* @__PURE__ */ v({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -23,7 +24,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 			default: !1
 		},
 		disableMaxHeight: { type: Boolean },
-		emptyMessage: { default: "No options" },
+		emptyMessage: {},
 		entries: {},
 		hideEmptyMessage: {
 			type: Boolean,
@@ -38,7 +39,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 			type: Boolean,
 			default: !1
 		},
-		loadingMessage: { default: "Loading..." },
+		loadingMessage: {},
 		maxHeight: {},
 		multiple: {
 			type: Boolean,
@@ -59,99 +60,99 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ _([
+	emits: /* @__PURE__ */ v([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(h, { emit: _ }) {
-		let F = ie(), I = _, L = re(h, "modelValue");
-		O(L, (e) => {
+	setup(g, { emit: v }) {
+		let F = ie(), I = v, L = re(g, "modelValue");
+		k(L, (e) => {
 			I("show-change", e);
 		});
-		let R = h, { merged: z, checkClass: B, scrollBind: V, messageBind: H, sizeClasses: U, mergedClasses: W, optionSelectedClass: G, optionHighlightedClass: oe } = i(R, {
+		let R = g, z = e(), B = l(() => R.emptyMessage ?? z("No options")), V = l(() => R.loadingMessage ?? z("Loading...")), { merged: H, checkClass: U, scrollBind: W, messageBind: G, sizeClasses: K, mergedClasses: q, optionSelectedClass: se, optionHighlightedClass: ce } = ee(R, {
 			size: "md",
 			color: "primary"
-		}), K = c(() => R.options ?? []), q = c(() => R.entries ? R.entries : j(K.value)), J = c(() => M(q.value)), Y = c(() => e(F, "default")), X = c(() => !R.loading && !Y.value && J.value.length === 0 && R.hideEmptyMessage !== !0), se = c(() => A(B.value, W.value.check)), Z = S([]);
-		function Q(e) {
+		}), le = l(() => R.options ?? []), J = l(() => R.entries ? R.entries : oe(le.value)), Y = l(() => j(J.value)), X = l(() => t(F, "default")), Z = l(() => !R.loading && !X.value && Y.value.length === 0 && R.hideEmptyMessage !== !0), ue = l(() => ae(U.value, q.value.check)), Q = C([]);
+		function $(e) {
 			return R.isSelected?.(e) ?? !1;
 		}
-		function ce(e) {
+		function de(e) {
 			e.disabled || I("select", e);
 		}
-		function le(e) {
-			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
-				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
+		function fe(e) {
+			return Q.value.some((t) => String(t.value) === String(e.value)) || (Q.value = [...Q.value, e]), () => {
+				Q.value = Q.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function ue(e) {
-			return (Y.value ? Z.value : J.value).findIndex((t) => String(t.value) === String(e));
+		function pe(e) {
+			return (X.value ? Q.value : Y.value).findIndex((t) => String(t.value) === String(e));
 		}
-		O(Z, (e) => {
-			Y.value && I("registered-options-change", e);
-		}, { deep: !0 }), x(ee, c(() => ({
-			getOptionIndex: ue,
-			registerOption: le,
-			onSelect: ce,
+		k(Q, (e) => {
+			X.value && I("registered-options-change", e);
+		}, { deep: !0 }), S(i, l(() => ({
+			getOptionIndex: pe,
+			registerOption: fe,
+			onSelect: de,
 			listboxId: R.listboxId,
-			isSelected: Q,
-			sizeClasses: U.value,
+			isSelected: $,
+			sizeClasses: K.value,
 			showCheckmark: R.showCheckmark,
-			checkClass: se.value,
+			checkClass: ue.value,
 			highlightedIndex: R.highlightedIndex,
-			optionSelectedClass: G.value,
-			optionHighlightedClass: oe.value,
+			optionSelectedClass: se.value,
+			optionHighlightedClass: ce.value,
 			mergedClasses: {
-				optionSelected: W.value.optionSelected,
-				optionHighlighted: W.value.optionHighlighted
+				optionSelected: q.value.optionSelected,
+				optionHighlighted: q.value.optionHighlighted
 			}
 		})));
-		let de = c(() => N(q.value, Q)), fe = c(() => z.value.customProps?.menu), pe = c(() => z.value.customProps?.list), $ = c(() => z.value.customProps?.listItem), me = c(() => z.value.customProps?.progress), he = c(() => z.value.customProps?.listSection), ge = c(() => ({
-			...ae(R.rounded) ? {} : { rounded: R.rounded },
-			...fe.value
-		})), _e = c(() => ({
+		let me = l(() => M(J.value, $)), he = l(() => H.value.customProps?.menu), ge = l(() => H.value.customProps?.list), _e = l(() => H.value.customProps?.listItem), ve = l(() => H.value.customProps?.progress), ye = l(() => H.value.customProps?.listSection), be = l(() => ({
+			...N(R.rounded) ? {} : { rounded: R.rounded },
+			...he.value
+		})), xe = l(() => ({
 			size: "xs",
 			"aria-hidden": !0,
-			color: z.value.color,
-			...n(me.value, {
+			color: H.value.color,
+			...r(ve.value, {
 				class: "shrink-0",
-				classes: { bar: W.value.loading }
+				classes: { bar: q.value.loading }
 			})
-		})), ve = c(() => ({
+		})), Se = l(() => ({
 			dense: !0,
 			role: "listbox",
 			id: R.listboxId,
 			"aria-labelledby": R.labelledBy,
 			"aria-multiselectable": R.multiple || void 0,
-			...n(pe.value, { class: "p-0" })
+			...r(ge.value, { class: "p-0" })
 		}));
-		return (n, i) => (b(), l(D(a), v({
+		return (e, r) => (x(), u(O(s), y({
 			modelValue: L.value,
-			"onUpdate:modelValue": i[0] ||= (e) => L.value = e,
-			"anchor-el": h.anchorEl,
-			placement: h.placement,
+			"onUpdate:modelValue": r[0] ||= (e) => L.value = e,
+			"anchor-el": g.anchorEl,
+			placement: g.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": h.disableAutoFocus
-		}, ge.value), {
-			default: k(() => [
-				D(e)(D(F), "beforeOptions") ? (b(), l(T(D(t)(D(F), "beforeOptions")), { key: 0 })) : u("", !0),
-				h.loading ? (b(), d(s, { key: 1 }, [m(D(o), y(g(_e.value)), null, 16), f("div", y(g(D(H))), [D(e)(D(F), "loading") ? (b(), l(T(D(t)(D(F), "loading")), { key: 0 })) : (b(), d("span", P, E(h.loadingMessage), 1))], 16)], 64)) : (b(), d("div", y(v({ key: 2 }, D(V))), [m(D(r), y(g(ve.value)), {
-					default: k(() => [Y.value ? w(n.$slots, "default", { key: 0 }) : (b(!0), d(s, { key: 1 }, C(de.value, (t) => (b(), d(s, { key: t.key }, [t.kind === "section" ? (b(), l(D(ne), v({
+			"disable-auto-focus": g.disableAutoFocus
+		}, be.value), {
+			default: A(() => [
+				O(t)(O(F), "beforeOptions") ? (x(), u(E(O(n)(O(F), "beforeOptions")), { key: 0 })) : d("", !0),
+				g.loading ? (x(), f(c, { key: 1 }, [h(O(ne), b(_(xe.value)), null, 16), p("div", b(_(O(G))), [O(t)(O(F), "loading") ? (x(), u(E(O(n)(O(F), "loading")), { key: 0 })) : (x(), f("span", P, D(V.value), 1))], 16)], 64)) : (x(), f("div", b(y({ key: 2 }, O(W))), [h(O(te), b(_(Se.value)), {
+					default: A(() => [X.value ? T(e.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, w(me.value, (n) => (x(), f(c, { key: n.key }, [n.kind === "section" ? (x(), u(O(o), y({
 						key: 0,
-						title: t.title,
-						sticky: t.sticky
-					}, { ref_for: !0 }, he.value), null, 16, ["title", "sticky"])) : (b(), l(D(te), v({
+						title: n.title,
+						sticky: n.sticky
+					}, { ref_for: !0 }, ye.value), null, 16, ["title", "sticky"])) : (x(), u(O(a), y({
 						key: 1,
 						interactive: "",
-						value: t.option.value,
-						disabled: t.option.disabled,
-						secondary: t.option.description,
-						primary: D(e)(D(F), "option") ? void 0 : t.option.label
-					}, { ref_for: !0 }, $.value), p({ _: 2 }, [D(e)(D(F), "option") ? {
+						value: n.option.value,
+						disabled: n.option.disabled,
+						secondary: n.option.description,
+						primary: O(t)(O(F), "option") ? void 0 : n.option.label
+					}, { ref_for: !0 }, _e.value), m({ _: 2 }, [O(t)(O(F), "option") ? {
 						name: "default",
-						fn: k(() => [w(n.$slots, "option", {
-							option: t.option,
-							selected: t.selected
+						fn: A(() => [T(e.$slots, "option", {
+							option: n.option,
+							selected: n.selected
 						})]),
 						key: "0"
 					} : void 0]), 1040, [
@@ -162,8 +163,8 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				X.value && !D(e)(D(F), "empty") ? (b(), d("div", y(v({ key: 3 }, D(H))), E(h.emptyMessage), 17)) : X.value && D(e)(D(F), "empty") ? (b(), l(T(D(t)(D(F), "empty")), { key: 4 })) : u("", !0),
-				D(e)(D(F), "afterOptions") ? (b(), l(T(D(t)(D(F), "afterOptions")), { key: 5 })) : u("", !0)
+				Z.value && !O(t)(O(F), "empty") ? (x(), f("div", b(y({ key: 3 }, O(G))), D(B.value), 17)) : Z.value && O(t)(O(F), "empty") ? (x(), u(E(O(n)(O(F), "empty")), { key: 4 })) : d("", !0),
+				O(t)(O(F), "afterOptions") ? (x(), u(E(O(n)(O(F), "afterOptions")), { key: 5 })) : d("", !0)
 			]),
 			_: 3
 		}, 16, [

package/dist/Components/Listbox/composables/useListbox.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a } from "es-toolkit/compat";
-import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c } from "es-toolkit/compat";
 import { colorProps as l, invalidatedProps as u, sizeProps as d } from "@bridge-ui/core/Tokens/Listbox";
 //#region src/Components/Listbox/composables/useListbox.ts
 var f = [
@@ -14,7 +14,7 @@ var f = [
 	"disableMaxHeight"
 ];
 function p(p, m) {
-	let h = i(), g = r(() => c({
+	let h = i(), g = r(() => s({
 		props: {
 			...h,
 			...p
@@ -27,19 +27,19 @@ function p(p, m) {
 	}), y = n({
 		entry: v,
 		props: () => g.value.componentProps
-	}), b = r(() => a(s(l, v.value?.tokens?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.tokens?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.tokens?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
+	}), b = r(() => c(o(l, v.value?.tokens?.color), _.value.color ?? "primary")), x = r(() => o(u, v.value?.tokens?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => c(o(d, v.value?.tokens?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
 	return {
 		merged: _,
-		checkClass: r(() => o(C.value?.check, S.value?.check)),
+		checkClass: r(() => a(C.value?.check, S.value?.check)),
 		scrollBind: r(() => {
 			let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
-			return e(_.value.customProps?.scroll, {}, o({
+			return e(_.value.customProps?.scroll, {}, a({
 				"overflow-y-auto overscroll-contain": !n,
 				[t]: !n,
 				[y.value.scroll ?? ""]: !0
 			}));
 		}),
-		messageBind: r(() => e({}, {}, o({
+		messageBind: r(() => e({}, {}, a({
 			"text-gray-500": !0,
 			[C.value?.message ?? ""]: !0
 		}))),