@bridge-ui/vue 0.0.10 → 0.1.0

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: {},
@@ -28,12 +29,12 @@ var M = { key: 1 }, N = /*@__PURE__*/ h({
 		disableMaxHeight: { type: Boolean },
 		emptyMessage: {},
 		entries: {},
+		error: { type: Boolean },
 		hideEmptyMessage: {
 			type: Boolean,
 			default: !1
 		},
 		highlightedIndex: { default: -1 },
-		invalidated: { type: Boolean },
 		isSelected: {},
 		labelledBy: {},
 		listboxId: {},
@@ -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,6 +1,6 @@
-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"];
+export declare const listboxBridgeKeys: readonly ["size", "color", "error", "classes", "maxHeight", "showFooter", "customProps", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
 /**
@@ -15,18 +15,19 @@ 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>;
-    optionSelectedClass: import('vue').ComputedRef<string | undefined>;
-    optionHighlightedClass: import('vue').ComputedRef<string | 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<any>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core/Utils').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
+    optionSelectedClass: import('vue').ComputedRef<any>;
+    optionHighlightedClass: import('vue').ComputedRef<any>;
 };
 export {};

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

@@ -1,75 +1,95 @@
 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, listboxRoundedProps as f, listboxSizeProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, getColorToken as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/composables/useListbox.ts
-var _ = [
+var v = [
 	"size",
 	"color",
+	"error",
 	"classes",
 	"maxHeight",
 	"showFooter",
 	"customProps",
-	"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 h({
+			tokens: e,
+			color: E.value.color,
+			invalid: E.value.error
+		});
+	}), I = o(() => {
+		let e = g(f, P.value?.rounded);
+		return c(e, y.rounded ?? "md");
+	}), L = o(() => {
+		let e = g(p, P.value?.size), t = c(e, E.value.size ?? "md"), n = j.value ? "panel" : "menu";
+		return c(t, n);
+	}), R = o(() => F.value?.selected), z = o(() => F.value?.highlighted), B = o(() => F.value?.hover), V = o(() => m(L.value?.check, F.value?.check)), H = 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, {}, m({
+			"min-h-0 overflow-y-auto overscroll-contain": !t,
 			[e]: !t,
-			[D.value.scroll ?? ""]: !0
+			[O.value.scroll ?? ""]: !0
 		}));
-	}), B = a(() => n({}, {}, s({
+	}), U = o(() => n({}, {}, m({
 		"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
+		[L.value?.message ?? ""]: !0
+	}))), W = o(() => {
+		if (!j.value) return;
+		let e = I.value;
+		if (e) return m({
+			[e]: !0,
+			"rounded-b-none": M.value
+		});
+	}), G = o(() => m({
+		"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(W.value ?? "")]: !!W.value
 	}));
 	return {
-		merged: T,
-		checkClass: R,
-		scrollBind: z,
-		footerBind: a(() => n(O.value?.footer, {}, s({
+		merged: E,
+		checkClass: V,
+		scrollBind: H,
+		footerBind: o(() => n(k.value?.footer, {}, m({
 			"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: U,
+		surfaceBind: G,
+		sizeClasses: L,
+		mergedClasses: O,
+		applyButtonProps: o(() => k.value?.applyButton),
+		optionHoverClass: B,
+		cancelButtonProps: o(() => k.value?.cancelButton),
+		optionSelectedClass: R,
+		optionHighlightedClass: z
 	};
 }
 //#endregion
-export { _ as listboxBridgeKeys, v as useListbox };
+export { v as listboxBridgeKeys, y as useListbox };

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

@@ -1,5 +1,8 @@
 import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
-import { FieldOverlayMode, ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { FieldOverlayFooterSlotProps, FieldOverlayMode, ListboxEntry, ListboxOption, ListboxValue } from '@bridge-ui/core/Domain';
+import { PositionPlacement } from '@bridge-ui/core/Runtime';
+import { ListboxColor, ListboxRounded, ListboxSize } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonOwnProps } from '../Button';
 import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { ListOwnProps } from '../List/list.types';
@@ -32,6 +35,10 @@ export interface ListboxClasses {
      * Classes merged onto keyboard-highlighted options.
      */
     optionHighlighted?: string;
+    /**
+     * Classes merged onto hovered options (pointer).
+     */
+    optionHover?: string;
     /**
      * Classes merged onto selected options.
      */
@@ -111,7 +118,7 @@ export interface ListboxCustomProps {
      */
     scroll?: HTMLAttributes;
 }
-export type { ListboxEntry, ListboxOption, ListboxValue, } from '@bridge-ui/core';
+export type { ListboxEntry, ListboxOption, ListboxValue, } from '@bridge-ui/core/Domain';
 export interface ListboxEmits {
     /**
      * Emitted when Apply is pressed (`showFooter`).
@@ -188,6 +195,12 @@ export interface ListboxOwnProps {
      * `options` map for rendering section headers.
      */
     entries?: ListboxEntry[];
+    /**
+     * When `true`, applies the error color palette to options.
+     *
+     * @default false
+     */
+    error?: boolean;
     /**
      * Hides the empty-state message.
      *
@@ -200,12 +213,6 @@ export interface ListboxOwnProps {
      * @default -1
      */
     highlightedIndex?: number;
-    /**
-     * When `true`, applies invalidated option colors.
-     *
-     * @default false
-     */
-    invalidated?: boolean;
     /**
      * Whether a value is selected (shows checkmark when `showCheckmark` is true).
      */
@@ -233,6 +240,8 @@ export interface ListboxOwnProps {
     loadingMessage?: string;
     /**
      * Tailwind max-height class for the options scroll area (e.g. `max-h-80`).
+     * Dialog overlays (`modal` / `drawer`) default to `max-h-[min(60dvh,28rem)]`
+     * when unset; menus default to `max-h-60`.
      *
      * @default "max-h-60"
      */
@@ -264,13 +273,16 @@ export interface ListboxOwnProps {
      */
     placement?: PositionPlacement;
     /**
-     * Roundedness of the floating panel (`Menu`). When omitted, `Menu` defaults
-     * apply (including `Menu.defaultProps.rounded`).
+     * Roundedness of the panel surface. Applied to `Menu` when the overlay is a
+     * menu, and to the Listbox surface when the overlay is a dialog (`modal`
+     * uses full corners; `drawer` flushes the bottom edge).
+     *
+     * When omitted, defaults to `md`.
      *
      * `Select` always forwards its own `rounded` here so the dropdown matches the
      * field, independent of `Menu.defaultProps`.
      */
-    rounded?: MergeProps<MenuRounded, ListboxRoundedOverrides>;
+    rounded?: MergeProps<ListboxRounded, ListboxRoundedOverrides>;
     /**
      * Shows a check icon on selected options.
      *
@@ -278,14 +290,16 @@ export interface ListboxOwnProps {
      */
     showCheckmark?: boolean;
     /**
-     * Shows Cancel / Apply footer. When unset, defaults to `true` on mobile.
+     * Shows Cancel / Apply footer. When unset, defaults to `true` for dialog shells (`modal` / `drawer`).
      * Parents (e.g. Select) typically keep selection as draft until Apply.
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
     /**
      * Typography and option padding scale, aligned with `FormField` / `Select`.
+     * Dialog overlays (`modal` / `drawer`) use the `panel` part of the size
+     * token (larger padding / type for touch). Menu overlays use `menu`.
      *
      * @default "md"
      */
@@ -309,6 +323,13 @@ export interface ListboxSlots {
      * Custom empty-state content.
      */
     empty?: Slot<undefined>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
     /**
      * Custom loading content. Replaces the default `loadingMessage` when set.
      * The progress bar still renders above this content.

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

@@ -1,5 +1,6 @@
 import { ComputedRef, InjectionKey } from 'vue';
-import { ListboxOption, ListboxSizeItem, ListboxValue } from '@bridge-ui/core';
+import { ListboxOption, ListboxValue } from '@bridge-ui/core/Domain';
+import { ListboxSizeOverlayItem } from '@bridge-ui/core/Tokens';
 /**
  * Shared listbox state for composed `ListItem` children with `value`.
  */
@@ -11,13 +12,15 @@ export type ListboxContextValue = {
     listboxId?: string;
     mergedClasses: {
         optionHighlighted?: string;
+        optionHover?: string;
         optionSelected?: string;
     };
     onSelect: (option: ListboxOption) => void;
     optionHighlightedClass?: string;
+    optionHoverClass?: string;
     optionSelectedClass?: string;
     registerOption: (option: ListboxOption) => () => void;
     showCheckmark: boolean;
-    sizeClasses?: ListboxSizeItem;
+    sizeClasses?: ListboxSizeOverlayItem;
 };
 export declare const LISTBOX_INJECTION_KEY: InjectionKey<ComputedRef<ListboxContextValue>>;

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

@@ -13,8 +13,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     offset: number;
-    rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('./menu.types').MenuRoundedOverrides>;
-    shadow: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('./menu.types').MenuShadowOverrides>;
+    rounded: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuRounded, import('./menu.types').MenuRoundedOverrides>;
+    shadow: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuShadow, import('./menu.types').MenuShadowOverrides>;
     closeOnEscape: boolean;
     disableScrollLock: boolean;
     keepMounted: boolean;
@@ -24,7 +24,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     anchorEl: null | HTMLElement;
     closeOnClickAway: boolean;
     disableAutoFocus: boolean;
-    strategy: import('@bridge-ui/core').PositionStrategy;
+    strategy: import('@bridge-ui/core/Runtime').PositionStrategy;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js

@@ -67,13 +67,11 @@ var v = /*@__PURE__*/ l({
 			onClose: () => y("close"),
 			onShowChange: (e) => b.onShowChange?.(e)
 		}), k = i(() => S.value.teleportTo === !1), A = i(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo);
-		return (t, i) => (p(), s(n, null, [h(e)(h(v), "trigger") ? (p(), s("div", f(d({ key: 0 }, h(w))), [c("div", d({ ref: h(D) }, h(T)), [m(t.$slots, "trigger")], 16)], 16)) : o("", !0), (p(), a(r, {
+		return (t, i) => (p(), s(n, null, [h(e)(h(v), "trigger") ? (p(), s("div", f(d({ key: 0 }, h(w))), [c("div", d({ ref: h(D) }, h(T)), [m(t.$slots, "trigger")], 16)], 16)) : o("", !0), h(C) ? (p(), a(r, {
+			key: 1,
 			to: A.value,
 			disabled: k.value
-		}, [h(C) ? (p(), s("div", d({
-			key: 0,
-			ref: h(O)
-		}, h(E)), [m(t.$slots, "default")], 16)) : o("", !0)], 8, ["to", "disabled"]))], 64));
+		}, [c("div", d({ ref: h(O) }, h(E)), [m(t.$slots, "default")], 16)], 8, ["to", "disabled"])) : o("", !0)], 64));
 	}
 });
 //#endregion