@bridge-ui/vue 0.0.8 → 0.0.9

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

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

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

@@ -1,6 +1,6 @@
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
-export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "customProps", "invalidated", "disableMaxHeight"];
+export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "showFooter", "customProps", "invalidated", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
 /**
@@ -16,9 +16,16 @@ export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxL
     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, {}>>;
+    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", {}, {}>>;
+    surfaceBind: import('vue').ComputedRef<string>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').ListboxSizeItem | 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>;
 };

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

@@ -1,53 +1,75 @@
-import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, useAttrs as i } from "vue";
-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";
+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";
 //#region src/Components/Listbox/composables/useListbox.ts
-var f = [
+var _ = [
 	"size",
 	"color",
 	"classes",
 	"maxHeight",
+	"showFooter",
 	"customProps",
 	"invalidated",
 	"disableMaxHeight"
 ];
-function p(p, m, h = {}) {
-	let g = i(), _ = r(() => s({
+function v(v, y, b = {}) {
+	let x = o(), S = t(), C = e(), w = a(() => f({
 		props: {
-			...g,
-			...p
+			...x,
+			...v
 		},
-		bridgeKeys: f
-	})), { merged: v, entry: y } = t({
-		libDefaults: m,
-		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);
+		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,
+			[e]: !t,
+			[D.value.scroll ?? ""]: !0
+		}));
+	}), B = a(() => n({}, {}, s({
+		"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
+	}));
 	return {
-		merged: v,
-		checkClass: r(() => a(T.value?.check, w.value?.check)),
-		scrollBind: r(() => {
-			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,
-				[b.value.scroll ?? ""]: !0
-			}));
-		}),
-		messageBind: r(() => e({}, {}, a({
-			"text-gray-500": !0,
-			[T.value?.message ?? ""]: !0
+		merged: T,
+		checkClass: R,
+		scrollBind: z,
+		footerBind: a(() => n(O.value?.footer, {}, s({
+			"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
 		}))),
-		sizeClasses: T,
-		mergedClasses: b,
-		optionSelectedClass: E,
-		optionHighlightedClass: D
+		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
 	};
 }
 //#endregion
-export { p as useListbox };
+export { _ as listboxBridgeKeys, v as useListbox };

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

@@ -1,18 +1,29 @@
-import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { FieldOverlayMode, ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ButtonOwnProps } from '../Button';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { ListOwnProps } from '../List/list.types';
 import { ListItemOwnProps } from '../ListItem/listItem.types';
 import { ListSectionOwnProps } from '../ListSection/listSection.types';
 import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
 import { ProgressOwnProps } from '../Progress/progress.types';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
 export interface ListboxRoundedOverrides {}
+/**
+ * Props accepted by the footer buttons, pinned to the native `button` element.
+ */
+type ListboxFooterButtonProps = Partial<MergeHtmlProps<Omit<ButtonOwnProps, "as">, ButtonHTMLAttributes>>;
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
      */
     check?: string;
+    /**
+     * Classes merged onto the Cancel / Apply footer.
+     */
+    footer?: string;
     /**
      * Classes forwarded to the loading `Progress` bar.
      */
@@ -31,6 +42,30 @@ export interface ListboxClasses {
     scroll?: string;
 }
 export interface ListboxCustomProps {
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: ListboxFooterButtonProps;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: ListboxFooterButtonProps;
+    /**
+     * Props forwarded to the nested `Drawer` when `overlay` resolves to `drawer`.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the Cancel / Apply footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
     /**
      * Props forwarded to the internal `List`.
      *
@@ -51,12 +86,18 @@ export interface ListboxCustomProps {
      */
     listSection?: Partial<Omit<ListSectionOwnProps, "title">>;
     /**
-     * Props forwarded to the floating `Menu`.
+     * Props forwarded to the floating `Menu` when `overlay` resolves to `menu`.
      * Merged last so they override Listbox defaults.
      *
      * @default undefined
      */
     menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when `overlay` resolves to `modal`.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
     /**
      * Props forwarded to the loading `Progress`.
      *
@@ -72,6 +113,14 @@ export interface ListboxCustomProps {
 }
 export type { ListboxEntry, ListboxOption, ListboxValue, } from '@bridge-ui/core';
 export interface ListboxEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when composed `ListItem` options register or unregister.
      */
@@ -109,7 +158,8 @@ export interface ListboxOwnProps {
     componentName?: "Select" | "Autocomplete";
     /**
      * Extra props for internal parts (`list`, `listItem`, `listSection`, `menu`,
-     * `progress`, `scroll`).
+     * `modal`, `drawer`, `progress`, `scroll`, `footer`, `applyButton`,
+     * `cancelButton`).
      *
      * @default undefined
      */
@@ -200,6 +250,13 @@ export interface ListboxOwnProps {
      * @default []
      */
     options?: ListboxOption[];
+    /**
+     * Which overlay shell opens the options panel. `auto` uses `menu` on desktop
+     * and `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
     /**
      * Preferred placement of the panel relative to the anchor.
      *
@@ -220,6 +277,13 @@ export interface ListboxOwnProps {
      * @default true
      */
     showCheckmark?: boolean;
+    /**
+     * Shows Cancel / Apply footer. When unset, defaults to `true` on mobile.
+     * Parents (e.g. Select) typically keep selection as draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
     /**
      * Typography and option padding scale, aligned with `FormField` / `Select`.
      *

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

@@ -15,16 +15,16 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     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>;
-    anchorEl: null | HTMLElement;
-    closeOnClickAway: boolean;
     closeOnEscape: boolean;
-    disableAutoFocus: boolean;
     disableScrollLock: boolean;
     keepMounted: boolean;
     persistent: boolean;
     placement: import('@floating-ui/utils').Placement;
-    strategy: import('@bridge-ui/core').PositionStrategy;
     teleportTo: false | string;
+    anchorEl: null | HTMLElement;
+    closeOnClickAway: boolean;
+    disableAutoFocus: boolean;
+    strategy: import('@bridge-ui/core').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

@@ -2,10 +2,10 @@ import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp
 import { useMenu as n } from "./composables/useMenu.js";
 import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, resolveDynamicComponent as h, unref as g, useModel as _, useSlots as v } from "vue";
 //#region src/Components/Menu/Menu.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ u({
+var y = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Menu",
-	props: /* @__PURE__ */ d({
+	props: /*@__PURE__*/ d({
 		anchorEl: { default: null },
 		classes: {},
 		closeOnClickAway: {
@@ -50,9 +50,9 @@ var y = /* @__PURE__ */ u({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ d(["close"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ d(["close"], ["update:modelValue"]),
 	setup(u, { emit: d }) {
-		let y = v(), b = d, x = u, { merged: S, mounted: C, rootBind: w, triggerBind: T, contentBind: E, setTriggerRef: D, setContentRef: O } = n(x, {
+		let y = v(), b = d, x = u, S = _(u, "modelValue"), { merged: C, mounted: w, rootBind: T, triggerBind: E, contentBind: D, setTriggerRef: O, setContentRef: k } = n(x, {
 			offset: 4,
 			shadow: "md",
 			rounded: "md",
@@ -63,17 +63,17 @@ var y = /* @__PURE__ */ u({
 			disableScrollLock: !0,
 			placement: "bottom-start"
 		}, {
-			show: _(u, "modelValue"),
+			show: S,
 			onClose: () => b("close"),
 			onShowChange: (e) => x.onShowChange?.(e)
-		}), k = a(() => e(y, "trigger")), A = a(() => S.value.teleportTo === !1), j = a(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo);
-		return (e, n) => (m(), c(r, null, [k.value ? (m(), c("div", p(f({ key: 0 }, g(w))), [l("div", f({ ref: g(D) }, g(T)), [(m(), o(h(g(t)(g(y), "trigger"))))], 16)], 16)) : s("", !0), (m(), o(i, {
-			to: j.value,
-			disabled: A.value
-		}, [g(C) ? (m(), c("div", f({
+		}), A = a(() => e(y, "trigger")), j = a(() => C.value.teleportTo === !1), M = a(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo);
+		return (e, n) => (m(), c(r, null, [A.value ? (m(), c("div", p(f({ key: 0 }, g(T))), [l("div", f({ ref: g(O) }, g(E)), [(m(), o(h(g(t)(g(y), "trigger"))))], 16)], 16)) : s("", !0), (m(), o(i, {
+			to: M.value,
+			disabled: j.value
+		}, [g(w) ? (m(), c("div", f({
 			key: 0,
-			ref: g(O)
-		}, g(E)), [(m(), o(h(g(t)(g(y), "default"))))], 16)) : s("", !0)], 8, ["to", "disabled"]))], 64));
+			ref: g(k)
+		}, g(D)), [(m(), o(h(g(t)(g(y), "default"))))], 16)) : s("", !0)], 8, ["to", "disabled"]))], 64));
 	}
 });
 //#endregion

package/dist/Components/Menu/composables/useMenu.d.ts

@@ -24,7 +24,7 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
     merged: import('vue').ComputedRef<MenuMerged>;
     menuId: string;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnClickAway" | "closeOnEscape" | "disableAutoFocus" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "strategy">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
     triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         tabindex: number;

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

@@ -38,7 +38,13 @@ 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(() => 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"]));
+	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => {
+		let e = h(v, R.value?.tokens?.rounded);
+		return g(e, L.value.rounded);
+	}), fe = r(() => {
+		let e = h(se, R.value?.tokens?.shadow);
+		return g(e, L.value.shadow);
+	}), U = r(() => !L.value.persistent), W = r(() => _(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
 	function G() {
 		return y.anchorEl ?? w.value;
 	}
@@ -58,7 +64,7 @@ function y(y, le, b = {}) {
 		L.value.persistent && P.value || F(!P.value);
 	}
 	function he(e) {
-		e.key !== "ArrowDown" && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), P.value || F(!0));
+		(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), P.value || F(!0));
 	}
 	function ge(e) {
 		let t = T.value;
@@ -77,9 +83,7 @@ function y(y, le, b = {}) {
 			case "Home":
 				e.preventDefault(), n.focusFirst();
 				break;
-			case "End":
-				e.preventDefault(), n.focusLast();
-				break;
+			case "End": e.preventDefault(), n.focusLast();
 		}
 	}
 	function Y() {