@bridge-ui/vue 0.0.10 → 0.0.11

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

@@ -4,8 +4,8 @@ import { getListboxOptionId as i } from "../../Listbox/composables/useListboxNav
 import { LIST_INJECTION_KEY as a } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as o } from "../../Listbox/listboxInjectionKey.js";
 import { computed as s, getCurrentInstance as c, inject as l, onBeforeUnmount as u, toValue as d, useAttrs as f, watch as p } from "vue";
-import { cn as m, splitComponentProps as h } from "@bridge-ui/core";
-import { get as g, isNull as _, omit as v } from "es-toolkit/compat";
+import { get as m, isNull as h, omit as g } from "es-toolkit/compat";
+import { cn as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/ListItem/composables/useListItem.ts
 var y = [
 	"as",
@@ -23,7 +23,7 @@ var y = [
 	"selectedIcon"
 ];
 function b(b, x, S) {
-	let C = f(), w = l(a, null), T = l(o, null), E = T != null, D = s(() => h({
+	let C = f(), w = l(a, null), T = l(o, null), E = T != null, D = s(() => v({
 		props: {
 			...C,
 			...b
@@ -52,11 +52,11 @@ function b(b, x, S) {
 	let N = s(() => j.value != null), P = s(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = s(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = s(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = s(() => O.value.customProps), R = r({
 		entry: k,
 		props: () => D.value.componentProps
-	}), z = s(() => "dense" in (c()?.vnode.props ?? {}) ? b.dense === !0 : b.dense === !0 ? !0 : w ? d(w).dense : !1), B = s(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = s(() => e(S, "secondary") || !!O.value.secondary), H = s(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || _(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), U = s(() => e(S, "end") || H.value != null), W = s(() => v(D.value.inheritedAttrs, [])), G = s(() => t(L.value?.root, W.value, {
-		class: m({
+	}), z = s(() => "dense" in (c()?.vnode.props ?? {}) ? b.dense === !0 : b.dense === !0 ? !0 : w ? d(w).dense : !1), B = s(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = s(() => e(S, "secondary") || !!O.value.secondary), H = s(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || h(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), U = s(() => e(S, "end") || H.value != null), W = s(() => g(D.value.inheritedAttrs, [])), G = s(() => t(L.value?.root, W.value, {
+		class: _({
 			"list-none": !0,
 			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
-			[g(R.value, "root") ?? ""]: !0
+			[m(R.value, "root") ?? ""]: !0
 		}),
 		id: N.value && A.value?.listboxId && F.value >= 0 ? i(A.value.listboxId, F.value) : void 0
 	})), K = s(() => O.value.interactive || N.value ? t(L.value?.interactive, {}, {
@@ -71,7 +71,7 @@ function b(b, x, S) {
 		onClick: N.value ? () => {
 			j.value && A.value?.onSelect(j.value);
 		} : void 0,
-		class: m({
+		class: _({
 			"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": !O.value.disabled,
 			"px-4": !0,
@@ -79,33 +79,35 @@ function b(b, x, S) {
 			"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?.optionHoverClass ?? ""]: N.value && !O.value.disabled && !P.value,
+			[A.value?.mergedClasses.optionHover ?? ""]: N.value && !O.value.disabled && !P.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,
-			[g(R.value, "interactive") ?? ""]: !0,
+			[m(R.value, "interactive") ?? ""]: !0,
 			[A.value?.sizeClasses?.option ?? ""]: !0
 		})
-	}) : null), q = s(() => m({
+	}) : null), q = s(() => _({
 		"flex w-full min-w-0 gap-x-3": !0,
 		"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
-	})), J = s(() => t(L.value?.start, {}, m({
+	})), J = s(() => t(L.value?.start, {}, _({
 		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[g(R.value, "start") ?? ""]: !0
-	}))), Y = s(() => t(L.value?.content, {}, m({
+		[m(R.value, "start") ?? ""]: !0
+	}))), Y = s(() => t(L.value?.content, {}, _({
 		"min-w-0 flex-1": !0,
-		[g(R.value, "content") ?? ""]: !0
-	}))), X = s(() => t(L.value?.primary, {}, m("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, g(R.value, "primary")))), Z = s(() => t(L.value?.secondary, {}, m("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, g(R.value, "secondary"))));
+		[m(R.value, "content") ?? ""]: !0
+	}))), X = s(() => t(L.value?.primary, {}, _("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, m(R.value, "primary")))), Z = s(() => t(L.value?.secondary, {}, _("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, m(R.value, "secondary"))));
 	return {
 		merged: O,
 		hasEnd: U,
-		endBind: s(() => t(L.value?.end, {}, m({
+		endBind: s(() => t(L.value?.end, {}, _({
 			"ml-auto flex shrink-0 items-center": !0,
-			[g(R.value, "end") ?? ""]: !0
+			[m(R.value, "end") ?? ""]: !0
 		}))),
 		rootBind: G,
 		rowClass: q,
@@ -118,7 +120,7 @@ function b(b, x, S) {
 		interactiveBind: K,
 		selectedIconBind: s(() => t(L.value?.selectedIcon, {}, {
 			size: "sm",
-			class: m("shrink-0", A.value?.checkClass, g(R.value, "selectedIcon"))
+			class: _("shrink-0", A.value?.checkClass, m(R.value, "selectedIcon"))
 		})),
 		resolvedSelectedIcon: H
 	};

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, Slot, VNode } from 'vue';
-import { ListboxValue, MergeHtmlProps } from '@bridge-ui/core';
+import { ListboxValue } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface ListItemClasses {

package/dist/Components/ListSection/composables/useListSection.d.ts

@@ -1,8 +1,8 @@
 import { ListSectionOwnProps, ListSectionProps } from '../listSection.types';
 export declare function useListSection(props: ListSectionOwnProps): {
     merged: import('vue').ComputedRef<ListSectionOwnProps>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
-    titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         role: string;
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;

package/dist/Components/ListSection/composables/useListSection.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 "../../List/listInjectionKey.js";
 import { computed as i, inject as a, toValue as o, useAttrs as s } from "vue";
-import { cn as c, splitComponentProps as l } from "@bridge-ui/core";
-import { get as u, omit as d } from "es-toolkit/compat";
+import { get as c, omit as l } from "es-toolkit/compat";
+import { cn as u, splitComponentProps as d } from "@bridge-ui/core/Utils";
 //#region src/Components/ListSection/composables/useListSection.ts
 var f = [
 	"as",
@@ -13,7 +13,7 @@ var f = [
 	"customProps"
 ];
 function p(p) {
-	let m = s(), h = a(r, null), g = i(() => l({
+	let m = s(), h = a(r, null), g = i(() => d({
 		props: {
 			...m,
 			...p
@@ -25,23 +25,23 @@ function p(p) {
 	}), y = i(() => _.value.customProps), b = n({
 		entry: v,
 		props: () => g.value.componentProps
-	}), x = i(() => h ? o(h).dense : !1), S = i(() => d(g.value.inheritedAttrs, [])), C = i(() => _.value.as === "div");
+	}), x = i(() => h ? o(h).dense : !1), S = i(() => l(g.value.inheritedAttrs, [])), C = i(() => _.value.as === "div");
 	return {
 		merged: _,
-		rootBind: i(() => e(y.value?.root, S.value, c({
+		rootBind: i(() => e(y.value?.root, S.value, u({
 			"list-none": !0,
 			"sticky top-0 z-10 bg-white dark:bg-dark-800": _.value.sticky && !C.value,
-			[u(b.value, "root") ?? ""]: !0
+			[c(b.value, "root") ?? ""]: !0
 		}))),
 		titleBind: i(() => e(y.value?.title, {}, {
 			role: "presentation",
-			class: c({
+			class: u({
 				"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": _.value.sticky && C.value,
 				"py-2": !x.value,
 				"py-1.5": x.value,
 				"pl-14": _.value.inset,
-				[u(b.value, "title") ?? ""]: !0
+				[c(b.value, "title") ?? ""]: !0
 			})
 		}))
 	};

package/dist/Components/ListSection/listSection.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Slot, VNode } from 'vue';
-import { MergeHtmlProps } from '@bridge-ui/core';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 export interface ListSectionClasses {
     /**
      * The classes to apply to the root.

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

@@ -1,4 +1,4 @@
-import { ListboxOption } from '@bridge-ui/core';
+import { ListboxOption } from '@bridge-ui/core/Domain';
 import { ListboxOwnProps, ListboxSlots } from './listbox.types';
 type __VLS_Slots = ListboxSlots;
 type __VLS_Props = ListboxOwnProps;
@@ -8,28 +8,29 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (option: ListboxOption) => any;
+    apply: () => any;
     cancel: () => any;
     "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
-    apply: () => any;
     "registered-options-change": (options: ListboxOption[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
-    onApply?: (() => any) | undefined;
     "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
 }>, {
-    color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
-    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
+    color: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
+    size: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
+    overlay: import('@bridge-ui/core/Domain').FieldOverlayMode;
+    showFooter: boolean;
     multiple: boolean;
     loading: boolean;
     placement: import('@floating-ui/utils').Placement;
     disableAutoFocus: boolean;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
-    overlay: import('@bridge-ui/core').FieldOverlayMode;
     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

@@ -10,10 +10,11 @@ import i from "../ListItem/ListItem.js";
 import a from "../ListSection/ListSection.js";
 import ie from "../Progress/Progress.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ae, renderSlot as w, toDisplayString as T, unref as E, useModel as oe, useSlots as se, watch as D, withCtx as O } from "vue";
-import { cn as ce, entriesFromListboxOptions as le, flattenListboxOptions as k, mapListboxEntriesToRows as A } from "@bridge-ui/core";
-import { isNil as j } from "es-toolkit/compat";
+import { isNil as ce } from "es-toolkit/compat";
+import { entriesFromListboxOptions as le, flattenListboxOptions as ue, mapListboxEntriesToRows as de } from "@bridge-ui/core/Domain";
+import { cn as k } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var M = { key: 1 }, N = /*@__PURE__*/ h({
+var A = { key: 1 }, j = /*@__PURE__*/ h({
 	__name: "Listbox",
 	props: /*@__PURE__*/ _({
 		anchorEl: {},
@@ -55,7 +56,10 @@ var M = { key: 1 }, N = /*@__PURE__*/ h({
 			type: Boolean,
 			default: !0
 		},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		size: { default: "md" }
 	}, {
 		modelValue: {
@@ -72,96 +76,104 @@ var M = { key: 1 }, N = /*@__PURE__*/ h({
 		"show-change"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = se(), P = _, F = oe(h, "modelValue");
-		D(F, (e) => {
-			P("show-change", e);
+		let j = se(), M = _, N = oe(h, "modelValue");
+		D(N, (e) => {
+			M("show-change", e);
 		});
-		let I = h, L = e(), R = s(() => I.emptyMessage ?? L("No options")), z = s(() => I.loadingMessage ?? L("Loading...")), { merged: B, checkClass: V, scrollBind: H, footerBind: U, showFooter: W, applyLabel: ue, cancelLabel: de, messageBind: G, surfaceBind: fe, sizeClasses: pe, mergedClasses: K, applyButtonProps: me, cancelButtonProps: he, optionSelectedClass: ge, optionHighlightedClass: _e } = ee(I, {
+		let P = h, F = e(), I = s(() => P.emptyMessage ?? F("No options")), L = s(() => P.loadingMessage ?? F("Loading...")), { merged: R, checkClass: z, scrollBind: B, footerBind: V, showFooter: H, applyLabel: fe, cancelLabel: pe, messageBind: U, surfaceBind: me, sizeClasses: he, mergedClasses: W, applyButtonProps: ge, optionHoverClass: _e, cancelButtonProps: ve, optionSelectedClass: ye, optionHighlightedClass: be } = ee(P, {
 			size: "md",
 			color: "primary"
-		}, { componentName: I.componentName }), ve = s(() => I.options ?? []), q = s(() => I.entries ? I.entries : le(ve.value)), J = s(() => k(q.value)), Y = s(() => t(N, "default")), X = s(() => !I.loading && !Y.value && J.value.length === 0 && I.hideEmptyMessage !== !0), ye = s(() => ce(V.value, K.value.check)), Z = C([]);
-		function Q(e) {
-			return I.isSelected?.(e) ?? !1;
+		}, { componentName: P.componentName }), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
+		function X(e) {
+			return P.isSelected?.(e) ?? !1;
 		}
-		function be(e) {
-			e.disabled || P("select", e);
+		function Ce(e) {
+			e.disabled || M("select", e);
 		}
-		function xe(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 we(e) {
+			return Y.value.some((t) => String(t.value) === String(e.value)) || (Y.value = [...Y.value, e]), () => {
+				Y.value = Y.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function Se(e) {
-			return (Y.value ? Z.value : J.value).findIndex((t) => String(t.value) === String(e));
+		function Te(e) {
+			return (q.value ? Y.value : K.value).findIndex((t) => String(t.value) === String(e));
 		}
-		D(Z, (e) => {
-			Y.value && P("registered-options-change", e);
+		D(Y, (e) => {
+			q.value && M("registered-options-change", e);
 		}, { deep: !0 });
-		let Ce = s(() => ({
-			getOptionIndex: Se,
-			registerOption: xe,
-			onSelect: be,
-			listboxId: I.listboxId,
-			isSelected: Q,
-			sizeClasses: pe.value,
-			showCheckmark: I.showCheckmark,
-			checkClass: ye.value,
-			highlightedIndex: I.highlightedIndex,
-			optionSelectedClass: ge.value,
-			optionHighlightedClass: _e.value,
+		let Ee = s(() => ({
+			getOptionIndex: Te,
+			registerOption: we,
+			onSelect: Ce,
+			listboxId: P.listboxId,
+			isSelected: X,
+			sizeClasses: he.value,
+			showCheckmark: P.showCheckmark,
+			checkClass: Se.value,
+			highlightedIndex: P.highlightedIndex,
+			optionHoverClass: _e.value,
+			optionSelectedClass: ye.value,
+			optionHighlightedClass: be.value,
 			mergedClasses: {
-				optionSelected: K.value.optionSelected,
-				optionHighlighted: K.value.optionHighlighted
+				optionHover: W.value.optionHover,
+				optionSelected: W.value.optionSelected,
+				optionHighlighted: W.value.optionHighlighted
 			}
 		}));
-		S(re, Ce);
-		let we = s(() => A(q.value, Q)), Te = s(() => B.value.customProps?.menu), Ee = s(() => B.value.customProps?.modal), De = s(() => B.value.customProps?.drawer), $ = s(() => B.value.customProps?.list), Oe = s(() => B.value.customProps?.listItem), ke = s(() => B.value.customProps?.progress), Ae = s(() => B.value.customProps?.listSection), je = s(() => ({
-			modal: Ee.value,
-			drawer: De.value,
+		S(re, Ee);
+		let De = s(() => de(G.value, X)), Oe = s(() => R.value.customProps?.menu), ke = s(() => R.value.customProps?.modal), Z = s(() => R.value.customProps?.drawer), Ae = s(() => R.value.customProps?.list), je = s(() => R.value.customProps?.listItem), Me = s(() => R.value.customProps?.progress), Ne = s(() => R.value.customProps?.listSection), Pe = s(() => ({
+			modal: ke.value,
+			drawer: Z.value,
 			menu: {
-				anchorEl: I.anchorEl,
-				placement: I.placement,
-				disableAutoFocus: I.disableAutoFocus,
-				...j(I.rounded) ? {} : { rounded: I.rounded },
-				...Te.value
+				anchorEl: P.anchorEl,
+				placement: P.placement,
+				disableAutoFocus: P.disableAutoFocus,
+				...ce(P.rounded) ? {} : { rounded: P.rounded },
+				...Oe.value
 			}
-		})), Me = s(() => ({
+		})), Fe = s(() => ({
 			size: "xs",
 			"aria-hidden": !0,
-			color: B.value.color,
-			...n(ke.value, {
+			color: R.value.color,
+			...n(Me.value, {
 				class: "shrink-0",
-				classes: { bar: K.value.loading }
+				classes: { bar: W.value.loading }
 			})
-		})), Ne = s(() => ({
+		})), Ie = s(() => ({
 			dense: !0,
 			role: "listbox",
-			id: I.listboxId,
-			"aria-labelledby": I.labelledBy,
-			"aria-multiselectable": I.multiple || void 0,
-			...n($.value, { class: "p-0" })
+			id: P.listboxId,
+			"aria-labelledby": P.labelledBy,
+			"aria-multiselectable": P.multiple || void 0,
+			...n(Ae.value, { class: "p-0" })
 		}));
+		function Q() {
+			M("apply"), N.value = !1;
+		}
+		function $() {
+			M("cancel"), N.value = !1;
+		}
 		return (e, n) => (x(), c(E(te), {
-			modelValue: F.value,
-			"onUpdate:modelValue": n[2] ||= (e) => F.value = e,
+			modelValue: N.value,
+			"onUpdate:modelValue": n[0] ||= (e) => N.value = e,
 			overlay: h.overlay,
-			"custom-props": je.value
+			"custom-props": Pe.value
 		}, {
-			default: O(() => [d("div", { class: y(E(fe)) }, [
-				E(t)(E(N), "beforeOptions") ? w(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : l("", !0),
-				h.loading ? (x(), u(o, { key: 1 }, [m(E(ie), b(g(Me.value)), null, 16), d("div", b(g(E(G))), [E(t)(E(N), "loading") ? w(e.$slots, "loading", {}, void 0, void 0, 0) : (x(), u("span", M, T(z.value), 1))], 16)], 64)) : (x(), u("div", b(v({ key: 2 }, E(H))), [m(E(ne), b(g(Ne.value)), {
-					default: O(() => [Y.value ? w(e.$slots, "default", {}, void 0, void 0, 0) : (x(!0), u(o, { key: 1 }, ae(we.value, (n) => (x(), u(o, { key: n.key }, [n.kind === "section" ? (x(), c(E(a), v({
+			default: O(() => [d("div", { class: y(E(me)) }, [
+				E(t)(E(j), "beforeOptions") ? w(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : l("", !0),
+				h.loading ? (x(), u(o, { key: 1 }, [m(E(ie), b(g(Fe.value)), null, 16), d("div", b(g(E(U))), [E(t)(E(j), "loading") ? w(e.$slots, "loading", {}, void 0, void 0, 0) : (x(), u("span", A, T(L.value), 1))], 16)], 64)) : (x(), u("div", b(v({ key: 2 }, E(B))), [m(E(ne), b(g(Ie.value)), {
+					default: O(() => [q.value ? w(e.$slots, "default", {}, void 0, void 0, 0) : (x(!0), u(o, { key: 1 }, ae(De.value, (n) => (x(), u(o, { key: n.key }, [n.kind === "section" ? (x(), c(E(a), v({
 						key: 0,
 						title: n.title,
 						sticky: n.sticky
-					}, { ref_for: !0 }, Ae.value), null, 16, ["title", "sticky"])) : (x(), c(E(i), v({
+					}, { ref_for: !0 }, Ne.value), null, 16, ["title", "sticky"])) : (x(), c(E(i), v({
 						key: 1,
 						interactive: "",
 						value: n.option.value,
 						disabled: n.option.disabled,
 						secondary: n.option.description,
-						primary: E(t)(E(N), "option") ? void 0 : n.option.label
-					}, { ref_for: !0 }, Oe.value), f({ _: 2 }, [E(t)(E(N), "option") ? {
+						primary: E(t)(E(j), "option") ? void 0 : n.option.label
+					}, { ref_for: !0 }, je.value), f({ _: 2 }, [E(t)(E(j), "option") ? {
 						name: "default",
 						fn: O(() => [w(e.$slots, "option", {
 							option: n.option,
@@ -176,18 +188,21 @@ var M = { key: 1 }, N = /*@__PURE__*/ h({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				X.value && !E(t)(E(N), "empty") ? (x(), u("div", b(v({ key: 3 }, E(G))), T(R.value), 17)) : X.value && E(t)(E(N), "empty") ? w(e.$slots, "empty", {}, void 0, void 0, 4) : l("", !0),
-				E(t)(E(N), "afterOptions") ? w(e.$slots, "afterOptions", {}, void 0, void 0, 5) : l("", !0),
-				E(W) ? (x(), u("div", b(v({ key: 6 }, E(U))), [m(E(r), v({
+				J.value && !E(t)(E(j), "empty") ? (x(), u("div", b(v({ key: 3 }, E(U))), T(I.value), 17)) : J.value && E(t)(E(j), "empty") ? w(e.$slots, "empty", {}, void 0, void 0, 4) : l("", !0),
+				E(t)(E(j), "afterOptions") ? w(e.$slots, "afterOptions", {}, void 0, void 0, 5) : l("", !0),
+				E(H) ? (x(), u("div", b(v({ key: 6 }, E(V))), [w(e.$slots, "footer", {
+					apply: Q,
+					cancel: $
+				}, () => [m(E(r), v({
 					variant: "flat",
 					color: "secondary"
-				}, E(he), { onClick: n[0] ||= (e) => P("cancel") }), {
-					default: O(() => [p(T(E(de)), 1)]),
+				}, E(ve), { onClick: $ }), {
+					default: O(() => [p(T(E(pe)), 1)]),
 					_: 1
-				}, 16), m(E(r), v({ color: "primary" }, E(me), { onClick: n[1] ||= (e) => P("apply") }), {
-					default: O(() => [p(T(E(ue)), 1)]),
+				}, 16), m(E(r), v({ color: "primary" }, E(ge), { onClick: Q }), {
+					default: O(() => [p(T(E(fe)), 1)]),
 					_: 1
-				}, 16)], 16)) : l("", !0)
+				}, 16)])], 16)) : l("", !0)
 			], 2)]),
 			_: 3
 		}, 8, [
@@ -198,4 +213,4 @@ var M = { key: 1 }, N = /*@__PURE__*/ h({
 	}
 });
 //#endregion
-export { N as default };
+export { j as default };

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -1,4 +1,4 @@
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
 export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "showFooter", "customProps", "invalidated", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
@@ -15,17 +15,18 @@ export type ListboxOptions = {
 export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults, options?: ListboxOptions): {
     merged: import('vue').ComputedRef<ListboxMerged>;
     checkClass: import('vue').ComputedRef<string>;
-    scrollBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    scrollBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     applyLabel: import('vue').ComputedRef<string>;
     cancelLabel: import('vue').ComputedRef<string>;
-    messageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    messageBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
     surfaceBind: import('vue').ComputedRef<string>;
-    sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').ListboxSizeItem | undefined>;
+    sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').ListboxSizeOverlayItem | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
-    applyButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
-    cancelButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core/Utils').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
+    optionHoverClass: import('vue').ComputedRef<string | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core/Utils').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
     optionSelectedClass: import('vue').ComputedRef<string | undefined>;
     optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
 };

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

@@ -1,12 +1,13 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { useBreakpoint as t } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
-import { computed as a, useAttrs as o } from "vue";
-import { cn as s, isFieldOverlayDialog as c, mergeBridgeUILayeredClasses as l, resolveFieldOverlay as u, resolveFieldShowFooter as d, splitComponentProps as f } from "@bridge-ui/core";
-import { get as p } from "es-toolkit/compat";
-import { colorProps as m, invalidatedProps as h, sizeProps as g } from "@bridge-ui/core/Tokens/Listbox";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i, useFieldShowFooter as a } from "../../../Utils/index.js";
+import { computed as o, useAttrs as s } from "vue";
+import { get as c } from "es-toolkit/compat";
+import { isFieldOverlayDialog as l, resolveFieldOverlay as u } from "@bridge-ui/core/Domain";
+import { listboxColorProps as d, listboxInvalidatedProps as f, listboxRoundedProps as p, listboxSizeProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/composables/useListbox.ts
-var _ = [
+var v = [
 	"size",
 	"color",
 	"classes",
@@ -16,60 +17,75 @@ var _ = [
 	"invalidated",
 	"disableMaxHeight"
 ];
-function v(v, y, b = {}) {
-	let x = o(), S = t(), C = e(), w = a(() => f({
+function y(y, b, x = {}) {
+	let S = s(), C = t(), w = e(), T = o(() => _({
 		props: {
-			...x,
-			...v
+			...S,
+			...y
 		},
-		bridgeKeys: _
-	})), { merged: T, entry: E } = r({
-		libDefaults: y,
-		componentName: b.componentName,
-		props: () => w.value.componentProps
-	}), D = i({
-		entry: E,
-		props: () => w.value.componentProps
-	}), O = a(() => T.value.customProps), k = a(() => d(T.value.showFooter, S.mobile)), A = a(() => c(u(v.overlay, S.mobile))), j = a(() => p(E.value, ["tokens", "listbox"])), M = a(() => {
-		let e = l(m, j.value?.color);
-		return p(e, T.value.color ?? "primary");
-	}), N = a(() => l(h, j.value?.invalidated)), P = a(() => T.value.invalidated ? N.value : M.value), F = a(() => {
-		let e = l(g, j.value?.size);
-		return p(e, T.value.size ?? "md");
-	}), I = a(() => P.value?.selected), L = a(() => P.value?.highlighted), R = a(() => s(F.value?.check, P.value?.check)), z = a(() => {
-		let e = T.value.maxHeight ?? "max-h-60", t = T.value.disableMaxHeight === !0;
-		return n(T.value.customProps?.scroll, {}, s({
-			"overflow-y-auto overscroll-contain": !t,
+		bridgeKeys: v
+	})), { merged: E, entry: D } = r({
+		libDefaults: b,
+		componentName: x.componentName,
+		props: () => T.value.componentProps
+	}), O = i({
+		entry: D,
+		props: () => T.value.componentProps
+	}), k = o(() => E.value.customProps), A = o(() => u(y.overlay, C.mobile)), j = o(() => l(A.value)), M = o(() => A.value === "drawer"), N = a({
+		overlay: A,
+		componentName: x.componentName,
+		showFooter: () => E.value.showFooter
+	}), P = o(() => c(D.value, ["tokens", "listbox"])), F = o(() => {
+		let e = g(d, P.value?.color);
+		return c(e, E.value.color ?? "primary");
+	}), I = o(() => {
+		let e = g(p, P.value?.rounded);
+		return c(e, y.rounded ?? "md");
+	}), L = o(() => g(f, P.value?.invalidated)), R = o(() => E.value.invalidated ? L.value : F.value), z = o(() => {
+		let e = g(m, P.value?.size), t = c(e, E.value.size ?? "md"), n = j.value ? "panel" : "menu";
+		return c(t, n);
+	}), B = o(() => R.value?.selected), V = o(() => R.value?.highlighted), H = o(() => R.value?.hover), U = o(() => h(z.value?.check, R.value?.check)), W = o(() => {
+		let e = E.value.maxHeight ?? (j.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = E.value.disableMaxHeight === !0;
+		return n(E.value.customProps?.scroll, {}, h({
+			"min-h-0 overflow-y-auto overscroll-contain": !t,
 			[e]: !t,
-			[D.value.scroll ?? ""]: !0
+			[O.value.scroll ?? ""]: !0
 		}));
-	}), B = a(() => n({}, {}, s({
+	}), G = o(() => n({}, {}, h({
 		"text-dark-500": !0,
-		[F.value?.message ?? ""]: !0
-	}))), V = a(() => s({
-		"overflow-hidden ring-1 ring-black/5 outline-hidden dark:ring-white/10": A.value,
-		"w-full rounded-lg bg-white text-dark-900 shadow-lg dark:bg-dark-800 dark:text-dark-100": A.value
+		[z.value?.message ?? ""]: !0
+	}))), K = o(() => {
+		if (!j.value) return;
+		let e = I.value;
+		if (e) return h({
+			[e]: !0,
+			"rounded-b-none": M.value
+		});
+	}), q = o(() => h({
+		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": j.value,
+		[String(K.value ?? "")]: !!K.value
 	}));
 	return {
-		merged: T,
-		checkClass: R,
-		scrollBind: z,
-		footerBind: a(() => n(O.value?.footer, {}, s({
+		merged: E,
+		checkClass: U,
+		scrollBind: W,
+		footerBind: o(() => n(k.value?.footer, {}, h({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[D.value.footer ?? ""]: !0
+			[O.value.footer ?? ""]: !0
 		}))),
-		showFooter: k,
-		applyLabel: a(() => C("Apply")),
-		cancelLabel: a(() => C("Cancel")),
-		messageBind: B,
-		surfaceBind: V,
-		sizeClasses: F,
-		mergedClasses: D,
-		applyButtonProps: a(() => O.value?.applyButton),
-		cancelButtonProps: a(() => O.value?.cancelButton),
-		optionSelectedClass: I,
-		optionHighlightedClass: L
+		showFooter: N,
+		applyLabel: o(() => w("Apply")),
+		cancelLabel: o(() => w("Cancel")),
+		messageBind: G,
+		surfaceBind: q,
+		sizeClasses: z,
+		mergedClasses: O,
+		applyButtonProps: o(() => k.value?.applyButton),
+		optionHoverClass: H,
+		cancelButtonProps: o(() => k.value?.cancelButton),
+		optionSelectedClass: B,
+		optionHighlightedClass: V
 	};
 }
 //#endregion
-export { _ as listboxBridgeKeys, v as useListbox };
+export { v as listboxBridgeKeys, y as useListbox };