@bridge-ui/vue 0.0.6 → 0.0.8

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

@@ -9,22 +9,22 @@ 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;
     "update:modelValue": (value: boolean) => any;
-    "show-change": (show: boolean) => any;
     "registered-options-change": (options: ListboxOption[]) => any;
+    "show-change": (show: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    "onShow-change"?: ((show: boolean) => any) | undefined;
     "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
+    "onShow-change"?: ((show: boolean) => 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>;
-    loading: boolean;
     multiple: boolean;
     disableAutoFocus: boolean;
     placement: import('@floating-ui/utils').Placement;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
+    loading: boolean;
     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,16 +1,16 @@
-import { useI18nAdapter as e } from "../../Adapters/I18n/useI18nAdapter.js";
+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 ee from "../List/List.js";
-import { useListbox as te } from "./composables/useListbox.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 { isNil as ae } from "es-toolkit/compat";
-import { cn as oe, entriesFromListboxOptions as se, flattenListboxOptions as j, mapListboxEntriesToRows as M, resolveMessage as N } from "@bridge-ui/core";
+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__ */ g({
 	__name: "Listbox",
@@ -18,6 +18,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
+		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -70,61 +71,61 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 		k(L, (e) => {
 			I("show-change", e);
 		});
-		let R = g, z = e(), B = l(() => R.emptyMessage ?? N("No options", z.value)), V = l(() => R.loadingMessage ?? N("Loading...", z.value)), { merged: H, checkClass: U, scrollBind: W, messageBind: G, sizeClasses: K, mergedClasses: q, optionSelectedClass: ce, optionHighlightedClass: le } = te(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"
-		}), ue = l(() => R.options ?? []), J = l(() => R.entries ? R.entries : se(ue.value)), Y = l(() => j(J.value)), X = l(() => t(F, "default")), Z = l(() => !R.loading && !X.value && Y.value.length === 0 && R.hideEmptyMessage !== !0), de = l(() => oe(U.value, q.value.check)), Q = C([]);
+		}, { componentName: R.componentName }), 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 fe(e) {
+		function de(e) {
 			e.disabled || I("select", e);
 		}
-		function pe(e) {
+		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 me(e) {
+		function pe(e) {
 			return (X.value ? Q.value : Y.value).findIndex((t) => String(t.value) === String(e));
 		}
 		k(Q, (e) => {
 			X.value && I("registered-options-change", e);
 		}, { deep: !0 }), S(i, l(() => ({
-			getOptionIndex: me,
-			registerOption: pe,
-			onSelect: fe,
+			getOptionIndex: pe,
+			registerOption: fe,
+			onSelect: de,
 			listboxId: R.listboxId,
 			isSelected: $,
 			sizeClasses: K.value,
 			showCheckmark: R.showCheckmark,
-			checkClass: de.value,
+			checkClass: ue.value,
 			highlightedIndex: R.highlightedIndex,
-			optionSelectedClass: ce.value,
-			optionHighlightedClass: le.value,
+			optionSelectedClass: se.value,
+			optionHighlightedClass: ce.value,
 			mergedClasses: {
 				optionSelected: q.value.optionSelected,
 				optionHighlighted: q.value.optionHighlighted
 			}
 		})));
-		let he = l(() => M(J.value, $)), ge = l(() => H.value.customProps?.menu), _e = l(() => H.value.customProps?.list), ve = l(() => H.value.customProps?.listItem), ye = l(() => H.value.customProps?.progress), be = l(() => H.value.customProps?.listSection), xe = l(() => ({
-			...ae(R.rounded) ? {} : { rounded: R.rounded },
-			...ge.value
-		})), Se = l(() => ({
+		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: H.value.color,
-			...r(ye.value, {
+			...r(ve.value, {
 				class: "shrink-0",
 				classes: { bar: q.value.loading }
 			})
-		})), Ce = l(() => ({
+		})), Se = l(() => ({
 			dense: !0,
 			role: "listbox",
 			id: R.listboxId,
 			"aria-labelledby": R.labelledBy,
 			"aria-multiselectable": R.multiple || void 0,
-			...r(_e.value, { class: "p-0" })
+			...r(ge.value, { class: "p-0" })
 		}));
 		return (e, r) => (x(), u(O(s), y({
 			modelValue: L.value,
@@ -133,22 +134,22 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 			placement: g.placement,
 			"close-on-click-away": !0,
 			"disable-auto-focus": g.disableAutoFocus
-		}, xe.value), {
+		}, 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(_(Se.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(ee), b(_(Ce.value)), {
-					default: A(() => [X.value ? T(e.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, w(he.value, (n) => (x(), f(c, { key: n.key }, [n.kind === "section" ? (x(), u(O(o), y({
+				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: n.title,
 						sticky: n.sticky
-					}, { ref_for: !0 }, be.value), null, 16, ["title", "sticky"])) : (x(), u(O(a), y({
+					}, { ref_for: !0 }, ye.value), null, 16, ["title", "sticky"])) : (x(), u(O(a), y({
 						key: 1,
 						interactive: "",
 						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 }, ve.value), m({ _: 2 }, [O(t)(O(F), "option") ? {
+					}, { ref_for: !0 }, _e.value), m({ _: 2 }, [O(t)(O(F), "option") ? {
 						name: "default",
 						fn: A(() => [T(e.$slots, "option", {
 							option: n.option,

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

@@ -3,7 +3,16 @@ import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
 export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "customProps", "invalidated", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
-export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
+/**
+ * Options for {@link useListbox}.
+ */
+export type ListboxOptions = {
+    /**
+     * Public registry key that owns nested `tokens.listbox` defaults.
+     */
+    componentName?: "Select" | "Autocomplete";
+};
+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, {}>>;

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 = [
@@ -13,40 +13,40 @@ var f = [
 	"invalidated",
 	"disableMaxHeight"
 ];
-function p(p, m) {
-	let h = i(), g = r(() => c({
+function p(p, m, h = {}) {
+	let g = i(), _ = r(() => s({
 		props: {
-			...h,
+			...g,
 			...p
 		},
 		bridgeKeys: f
-	})), { merged: _, entry: v } = t({
+	})), { merged: v, entry: y } = t({
 		libDefaults: m,
-		componentName: "Listbox",
-		props: () => g.value.componentProps
-	}), 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);
+		componentName: h.componentName,
+		props: () => _.value.componentProps
+	}), b = n({
+		entry: y,
+		props: () => _.value.componentProps
+	}), x = r(() => c(y.value, ["tokens", "listbox"])), S = r(() => c(o(l, x.value?.color), v.value.color ?? "primary")), C = r(() => o(u, x.value?.invalidated)), w = r(() => v.value.invalidated ? C.value : S.value), T = r(() => c(o(d, x.value?.size), v.value.size ?? "md")), E = r(() => w.value?.selected), D = r(() => w.value?.highlighted);
 	return {
-		merged: _,
-		checkClass: r(() => o(C.value?.check, S.value?.check)),
+		merged: v,
+		checkClass: r(() => a(T.value?.check, w.value?.check)),
 		scrollBind: r(() => {
-			let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
-			return e(_.value.customProps?.scroll, {}, o({
+			let t = v.value.maxHeight ?? "max-h-60", n = v.value.disableMaxHeight === !0;
+			return e(v.value.customProps?.scroll, {}, a({
 				"overflow-y-auto overscroll-contain": !n,
 				[t]: !n,
-				[y.value.scroll ?? ""]: !0
+				[b.value.scroll ?? ""]: !0
 			}));
 		}),
-		messageBind: r(() => e({}, {}, o({
+		messageBind: r(() => e({}, {}, a({
 			"text-gray-500": !0,
-			[C.value?.message ?? ""]: !0
+			[T.value?.message ?? ""]: !0
 		}))),
-		sizeClasses: C,
-		mergedClasses: y,
-		optionSelectedClass: w,
-		optionHighlightedClass: T
+		sizeClasses: T,
+		mergedClasses: b,
+		optionSelectedClass: E,
+		optionHighlightedClass: D
 	};
 }
 //#endregion

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

@@ -1,4 +1,5 @@
 export { useListbox } from './composables/useListbox';
+export type { ListboxOptions } from './composables/useListbox';
 export { findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListboxNavigation, } from './composables/useListboxNavigation';
 export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxEntry, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './listbox.types';
 export { default as Listbox } from './Listbox.vue';

package/dist/Components/Listbox/index.js

@@ -1,5 +1,5 @@
-import { useListbox as e } from "./composables/useListbox.js";
-import { findFirstEnabledOptionIndex as t, findLastEnabledOptionIndex as n, getListboxActiveDescendantId as r, getListboxOptionId as i, moveListboxHighlight as a, useListboxNavigation as o } from "./composables/useListboxNavigation.js";
+import { findFirstEnabledOptionIndex as e, findLastEnabledOptionIndex as t, getListboxActiveDescendantId as n, getListboxOptionId as r, moveListboxHighlight as i, useListboxNavigation as a } from "./composables/useListboxNavigation.js";
+import { useListbox as o } from "./composables/useListbox.js";
 import { LISTBOX_INJECTION_KEY as s } from "./listboxInjectionKey.js";
 import c from "./Listbox.js";
-export { s as LISTBOX_INJECTION_KEY, c as Listbox, t as findFirstEnabledOptionIndex, n as findLastEnabledOptionIndex, r as getListboxActiveDescendantId, i as getListboxOptionId, a as moveListboxHighlight, e as useListbox, o as useListboxNavigation };
+export { s as LISTBOX_INJECTION_KEY, c as Listbox, e as findFirstEnabledOptionIndex, t as findLastEnabledOptionIndex, n as getListboxActiveDescendantId, r as getListboxOptionId, i as moveListboxHighlight, o as useListbox, a as useListboxNavigation };

package/dist/Components/Listbox/listbox.types.d.ts

@@ -101,6 +101,12 @@ export interface ListboxOwnProps {
      * @default "primary"
      */
     color?: MergeProps<ListboxColor, ListboxColorOverrides>;
+    /**
+     * Public parent registry key for nested `tokens.listbox`.
+     *
+     * @internal
+     */
+    componentName?: "Select" | "Autocomplete";
     /**
      * Extra props for internal parts (`list`, `listItem`, `listSection`, `menu`,
      * `progress`, `scroll`).

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

@@ -6,11 +6,11 @@ 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, {
-    "update:modelValue": (value: boolean) => any;
     close: () => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     offset: number;
     rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('./menu.types').MenuRoundedOverrides>;

package/dist/Components/Menu/composables/useMenu.js

@@ -1,8 +1,8 @@
 import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
-import { computed as r, nextTick as i, onBeforeUnmount as te, ref as a, toValue as o, useAttrs as ne, useId as re, watch as s } from "vue";
-import { get as c, omit as l } from "es-toolkit/compat";
-import { LAYER_STACK_BASE_Z_INDEX as u, acquireLayerStackOrder as ie, claimOpenMenu as d, cn as f, createFocusable as p, createPositionable as m, getLayerStackEntry as ae, mergeBridgeUILayeredClasses as h, pushLayerStack as g, splitComponentProps as _, subscribeLayerStack as v } from "@bridge-ui/core";
-import { roundedProps as oe, shadowProps as se } from "@bridge-ui/core/Tokens/Menu";
+import { computed as r, nextTick as i, onBeforeUnmount as a, ref as o, toValue as te, useAttrs as s, useId as ne, watch as c } from "vue";
+import { LAYER_STACK_BASE_Z_INDEX as l, acquireLayerStackOrder as u, claimOpenMenu as re, cn as d, createFocusable as f, createPositionable as p, getLayerStackEntry as m, mergeBridgeUILayeredClasses as h, pushLayerStack as ie, splitComponentProps as ae, subscribeLayerStack as oe } from "@bridge-ui/core";
+import { get as g, omit as _ } from "es-toolkit/compat";
+import { roundedProps as v, shadowProps as se } from "@bridge-ui/core/Tokens/Menu";
 //#region src/Components/Menu/composables/useMenu.ts
 var ce = [
 	"offset",
@@ -21,11 +21,11 @@ var ce = [
 	"disableScrollLock"
 ];
 function y(y, le, b = {}) {
-	let ue = ne(), x = re(), S = a(!1), C = a(""), w = a(null), T = a(null), E = null, D = null, O = null, k = null, A = null, j = null, M = !1, N = a(u), P = r(() => o(b.show ?? !1));
+	let ue = s(), x = ne(), S = o(!1), C = o(""), w = o(null), T = o(null), E = null, D = null, O = null, k = null, A = null, j = null, M = !1, N = o(l), P = r(() => te(b.show ?? !1));
 	function F(e) {
 		e || b.onClose?.(), b.show && (b.show.value = e), b.onShowChange?.(e);
 	}
-	let I = r(() => _({
+	let I = r(() => ae({
 		bridgeKeys: ce,
 		props: {
 			...ue,
@@ -38,35 +38,35 @@ function y(y, le, b = {}) {
 	}), z = r(() => L.value.customProps), B = ee({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => c(h(oe, R.value?.tokens?.rounded), L.value.rounded)), fe = r(() => c(h(se, R.value?.tokens?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), pe = r(() => l(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
-	function W() {
+	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => g(h(v, R.value?.tokens?.rounded), L.value.rounded)), fe = r(() => g(h(se, R.value?.tokens?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), W = r(() => _(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	function G() {
 		return y.anchorEl ?? w.value;
 	}
-	function G() {
-		W()?.focus({ preventScroll: !0 });
+	function K() {
+		G()?.focus({ preventScroll: !0 });
 	}
-	function K(e) {
-		return W()?.contains(e) ?? !1;
+	function q(e) {
+		return G()?.contains(e) ?? !1;
 	}
-	function me(e) {
-		return !(e instanceof Element) || K(e) || T.value?.contains(e) ? !1 : !!e.closest("[aria-haspopup=\"menu\"], button, [role=\"button\"]");
+	function pe(e) {
+		return !(e instanceof Element) || q(e) || T.value?.contains(e) ? !1 : !!e.closest("[aria-haspopup=\"menu\"], button, [role=\"button\"]");
 	}
-	function q() {
+	function J() {
 		!U.value || !P.value || F(!1);
 	}
-	function he() {
+	function me() {
 		L.value.persistent && P.value || F(!P.value);
 	}
-	function J(e) {
+	function he(e) {
 		e.key !== "ArrowDown" && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), P.value || F(!0));
 	}
 	function ge(e) {
 		let t = T.value;
 		if (!t) return;
-		let n = p(t);
+		let n = f(t);
 		switch (e.key) {
 			case "Escape":
-				e.preventDefault(), q(), G();
+				e.preventDefault(), J(), K();
 				break;
 			case "ArrowDown":
 				e.preventDefault(), n.next()?.focus({ preventScroll: !0 });
@@ -87,22 +87,22 @@ function y(y, le, b = {}) {
 	}
 	function X() {
 		Y();
-		let e = W(), t = T.value;
-		!P.value || !e || !t || (k = m({
+		let e = G(), t = T.value;
+		!P.value || !e || !t || (k = p({
 			floating: t,
 			reference: e,
 			offset: L.value.offset,
 			strategy: L.value.strategy,
 			placement: L.value.placement,
 			onReferenceHidden: () => {
-				!M || !U.value || !P.value || q();
+				!M || !U.value || !P.value || J();
 			}
 		}), k.start(), i(() => {
 			M = !0;
 		}));
 	}
 	function Z() {
-		!P.value || L.value.disableAutoFocus || !T.value || p(T.value).focusFirst();
+		!P.value || L.value.disableAutoFocus || !T.value || f(T.value).focusFirst();
 	}
 	function _e() {
 		if (A?.(), !P.value) {
@@ -111,7 +111,7 @@ function y(y, le, b = {}) {
 		}
 		function e(e) {
 			let t = e.target;
-			K(t) || T.value?.contains(t) || L.value.closeOnClickAway === !1 || !U.value || me(t) || q();
+			q(t) || T.value?.contains(t) || L.value.closeOnClickAway === !1 || !U.value || pe(t) || J();
 		}
 		document.addEventListener("pointerdown", e, !0), A = () => {
 			document.removeEventListener("pointerdown", e, !0);
@@ -130,29 +130,29 @@ function y(y, le, b = {}) {
 		}));
 	}
 	function be() {
-		!P.value || L.value.closeOnEscape === !1 || !U.value || (q(), G());
+		!P.value || L.value.closeOnEscape === !1 || !U.value || (J(), K());
 	}
 	function Q() {
-		let e = ae(C.value);
+		let e = m(C.value);
 		e && (N.value = e.zIndex);
 	}
 	function $() {
-		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = u, Y();
+		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = l, Y();
 	}
-	let xe = r(() => e(z.value?.root, pe.value, f({
+	let xe = r(() => e(z.value?.root, W.value, d({
 		"relative inline-block text-left": !0,
-		[c(B.value, "root") ?? ""]: !0
+		[g(B.value, "root") ?? ""]: !0
 	}))), Se = r(() => e(z.value?.trigger, {}, {
 		tabindex: 0,
 		role: "button",
 		"aria-expanded": P.value,
-		onKeydown: J,
+		onKeydown: he,
 		"aria-haspopup": "menu",
-		onClickCapture: he,
+		onClickCapture: me,
 		"aria-controls": P.value ? x : void 0,
-		class: f({
+		class: d({
 			"inline-block w-fit max-w-full cursor-pointer outline-hidden": !0,
-			[c(B.value, "trigger") ?? ""]: !0
+			[g(B.value, "trigger") ?? ""]: !0
 		})
 	})), Ce = r(() => e(z.value?.content, {}, {
 		id: x,
@@ -160,32 +160,32 @@ function y(y, le, b = {}) {
 		onKeydown: ge,
 		style: { zIndex: N.value },
 		"aria-hidden": V.value ? !0 : void 0,
-		class: f({
+		class: d({
 			"bg-white text-dark-900 dark:bg-dark-800 dark:text-dark-100 ring-1 ring-black/5 dark:ring-white/10 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
 			"invisible pointer-events-none": V.value,
 			[de.value ?? ""]: !0,
 			[fe.value ?? ""]: !0,
-			[c(B.value, "content") ?? ""]: !0
+			[g(B.value, "content") ?? ""]: !0
 		})
 	}));
-	return s(P, (e) => {
+	return c(P, (e) => {
 		if (e) {
 			S.value = !0, i(() => {
-				P.value && (j = d({
+				P.value && (j = re({
 					id: x,
-					requestClose: q
+					requestClose: J
 				}));
-			}), E = ie(), D = g({
+			}), E = u(), D = ie({
 				order: E,
 				onEscape: be,
 				lockScroll: L.value.disableScrollLock !== !0
-			}), C.value = D.id, N.value = D.zIndex, Q(), O = v(Q), i(() => {
+			}), C.value = D.id, N.value = D.zIndex, Q(), O = oe(Q), i(() => {
 				X(), Z(), _e();
 			});
 			return;
 		}
 		$(), L.value.keepMounted || (S.value = !1);
-	}, { immediate: !0 }), s([
+	}, { immediate: !0 }), c([
 		P,
 		() => y.anchorEl,
 		() => L.value.offset,
@@ -195,11 +195,11 @@ function y(y, le, b = {}) {
 		i(() => {
 			X();
 		});
-	}), s([P, () => L.value.disableAutoFocus], () => {
+	}), c([P, () => L.value.disableAutoFocus], () => {
 		i(() => {
 			Z();
 		});
-	}), te(() => {
+	}), a(() => {
 		$();
 	}), {
 		merged: L,

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

@@ -8,12 +8,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     stackId: import('vue').ComputedRef<string>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     close: () => any;
+    "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
 }>, {
     closeOnEscape: boolean;

package/dist/Components/Modal/composables/useModal.d.ts

@@ -34,7 +34,7 @@ export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefa
         };
         "aria-hidden": boolean | undefined;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "blur" | "scroll" | "align" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "scroll" | "blur" | "align" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
     panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";