@bridge-ui/vue 0.1.1 → 0.2.0

package/dist/Components/CalendarRange/composables/useCalendarRange.js

@@ -60,53 +60,47 @@ function m(d, m, h) {
 	}), T = a(() => v(b.value.timeZone)), E = a(() => s(d)), D = a(() => !u(E.value.value)), O = a(() => {
 		let e = te()?.vnode.props ?? {}, t = l(e.onViewDateChange) || l(e["onUpdate:viewDate"]);
 		return !u(E.value.viewDate) && t;
-	}), k = a(() => !u(E.value.previewDate)), A = o(b.value.defaultValue ?? null), j = o("date"), M = o(g.value.startOfMonth(u(E.value.viewDate) ? se(E.value.value ?? b.value.defaultValue ?? null, g.value, T.value) : E.value.viewDate, T.value)), N = o(null), P = o(null), F = o("start"), I = a(() => D.value ? E.value.value ?? null : A.value), L = a(() => j.value === "year" && b.value.hideYears || j.value === "month" && b.value.hideMonths ? "date" : j.value), R = a(() => O.value ? E.value.viewDate : M.value), z = a(() => g.value.addMonths(R.value, 1, T.value)), B = a(() => k.value ? E.value.previewDate ?? null : N.value), V = a(() => String(g.value.getYear(R.value, T.value))), H = a(() => g.value.getMonthNames(T.value)[g.value.getMonth(R.value, T.value)] ?? ""), U = a(() => g.value.getMonthNames(T.value)[g.value.getMonth(z.value, T.value)] ?? ""), W = a(() => g.value.getYear(R.value, T.value)), G = a(() => g.value.getMonth(R.value, T.value)), K = a(() => u(P.value) ? Math.max(1, W.value - 7) : P.value), q = a(() => {
+	}), k = a(() => !u(E.value.previewDate)), A = o(b.value.defaultValue ?? null), j = o("date"), M = o(g.value.startOfMonth(u(E.value.viewDate) ? se(E.value.value ?? b.value.defaultValue ?? null, g.value, T.value) : E.value.viewDate, T.value)), N = o(null), P = o(null), F = a(() => D.value ? E.value.value ?? null : A.value), I = a(() => j.value === "year" && b.value.hideYears || j.value === "month" && b.value.hideMonths ? "date" : j.value), L = a(() => O.value ? E.value.viewDate : M.value), R = a(() => g.value.addMonths(L.value, 1, T.value)), z = a(() => k.value ? E.value.previewDate ?? null : N.value), B = a(() => String(g.value.getYear(L.value, T.value))), V = a(() => g.value.getMonthNames(T.value)[g.value.getMonth(L.value, T.value)] ?? ""), H = a(() => g.value.getMonthNames(T.value)[g.value.getMonth(R.value, T.value)] ?? ""), U = a(() => g.value.getYear(L.value, T.value)), W = a(() => g.value.getMonth(L.value, T.value)), G = a(() => u(P.value) ? Math.max(1, U.value - 7) : P.value), K = a(() => {
 		let e = ie(f, x.value?.tokens?.rounded);
 		return ne(e, b.value.rounded);
-	}), J = (e) => {
+	}), q = (e) => {
 		j.value = e;
 	}, ue = () => {
-		P.value = Math.max(1, W.value - 7), J("year");
-	}, Y = (e) => {
+		P.value = Math.max(1, U.value - 7), q("year");
+	}, J = (e) => {
 		let t = g.value.startOfMonth(e, T.value);
 		O.value || (M.value = t), h("viewDateChange", t);
 	}, de = (e) => {
-		Y(e);
+		J(e);
 	}, fe = (e) => {
-		Y(g.value.addMonths(e, -1, T.value));
+		J(g.value.addMonths(e, -1, T.value));
 	}, pe = (e) => {
 		let t = ce(e);
 		D.value || (A.value = t), h("change", t);
 	}, me = (e) => {
 		k.value || (N.value = e), h("previewDateChange", e);
 	}, he = () => {
-		if (L.value === "year") {
-			P.value = Math.max(1, K.value - 15);
+		if (I.value === "year") {
+			P.value = Math.max(1, G.value - 15);
 			return;
 		}
-		Y(g.value.addMonths(R.value, -1, T.value));
+		J(g.value.addMonths(L.value, -1, T.value));
 	}, ge = () => {
-		if (L.value === "year") {
-			P.value = K.value + 15;
+		if (I.value === "year") {
+			P.value = G.value + 15;
 			return;
 		}
-		Y(g.value.addMonths(R.value, 1, T.value));
+		J(g.value.addMonths(L.value, 1, T.value));
 	}, _e = () => {
 		let e = g.value.startOfMonth(g.value.now(T.value), T.value);
-		P.value = null, Y(e), J("date");
+		P.value = null, J(e), q("date");
 	}, ve = (e) => {
-		P.value = null, F.value = "start", Y(g.value.setYear(R.value, e, T.value)), J(b.value.hideMonths ? "date" : "month");
-	}, ye = () => {
-		F.value = "start", J("month");
-	}, be = () => {
-		F.value = "end", J("month");
-	}, xe = (e) => {
-		if (F.value === "end") {
-			let t = g.value.getYear(z.value, T.value), n = g.value.setMonth(g.value.setYear(R.value, t, T.value), e, T.value);
-			Y(g.value.addMonths(n, -1, T.value));
-		} else Y(g.value.setMonth(R.value, e, T.value));
-		J("date");
-	}, Se = a(() => F.value === "end" ? g.value.getYear(z.value, T.value) : W.value), Ce = a(() => F.value === "end" ? g.value.getMonth(z.value, T.value) : G.value), we = a(() => ({
+		P.value = null, J(g.value.setYear(L.value, e, T.value)), q(b.value.hideMonths ? "date" : "month");
+	}, Y = () => {
+		q("month");
+	}, ye = (e) => {
+		J(g.value.setMonth(L.value, e, T.value)), q("date");
+	}, be = U, xe = W, Se = a(() => ({
 		color: b.value.color,
 		error: b.value.error,
 		rounded: b.value.rounded,
@@ -115,63 +109,68 @@ function m(d, m, h) {
 		disabled: b.value.disabled,
 		readOnly: b.value.readOnly,
 		timeZone: b.value.timeZone
-	})), X = a(() => b.value.orientation === "vertical"), Te = a(() => r(S.value?.root, C.value, p({
+	})), X = a(() => b.value.orientation === "vertical"), Ce = a(() => r(S.value?.root, C.value, p({
 		"flex flex-col overflow-hidden": !0,
 		"w-full": b.value.fill,
 		"min-w-max": !0,
 		"w-fit": !b.value.fill && X.value,
 		[w.value.root ?? ""]: !0
-	}))), Ee = a(() => r(S.value?.header, {}, p({
-		"flex w-full items-center p-2.5": !0,
+	}))), we = a(() => r(S.value?.header, {}, p({
+		"relative flex w-full items-center p-2.5": !0,
 		[w.value.header ?? ""]: !0
-	}))), De = a(() => r(S.value?.months, {}, p({
-		"flex min-w-0 flex-1 items-center": !0,
-		"justify-between": !X.value,
-		"justify-start": X.value,
+	}))), Te = a(() => r(S.value?.months, {}, p({
+		"flex min-w-0 flex-1 items-center justify-center": !0,
 		[w.value.months ?? ""]: !0
-	}))), Oe = a(() => r(S.value?.endHeader, {}, p({
-		"flex items-center justify-center px-2.5 pb-1 pt-2": !0,
+	}))), Ee = a(() => r(S.value?.startHeader, {}, p({
+		"flex min-w-0 flex-1 items-center pr-4": !0,
+		[w.value.startHeader ?? ""]: !0
+	}))), De = a(() => r(S.value?.endHeader, {}, p({
+		"items-center": !0,
+		"flex min-w-0 flex-1 items-center pl-4": !X.value || I.value === "month",
+		"flex justify-center": X.value && I.value !== "month",
 		[w.value.endHeader ?? ""]: !0
-	}))), ke = a(() => r(S.value?.body, {}, p({
-		"flex min-h-64 flex-col p-2.5": !0,
+	}))), Oe = a(() => r(S.value?.body, {}, p({
+		"relative flex min-h-64 flex-col": !0,
 		[w.value.body ?? ""]: !0
-	}))), Ae = a(() => r(S.value?.panels, {}, p({
-		"flex w-full gap-4": !0,
+	}))), ke = a(() => r(S.value?.panels, { "aria-hidden": I.value !== "date" }, p({
+		"flex w-full": !0,
 		"flex-row": !X.value,
 		"flex-col": X.value,
+		invisible: I.value !== "date",
 		[w.value.panels ?? ""]: !0
-	}))), je = a(() => r(S.value?.start, {}, p({
-		"flex min-w-72 flex-1 flex-col": !0,
+	}))), Ae = a(() => r(S.value?.start, {}, p({
+		"flex min-w-72 flex-1 flex-col px-2.5": !0,
+		"pb-2.5": !X.value,
 		[w.value.start ?? ""]: !0
-	}))), Me = a(() => r(S.value?.end, {}, p({
-		"flex min-w-72 flex-1 flex-col": !0,
+	}))), je = a(() => r(S.value?.end, {}, p({
+		"flex min-w-72 flex-1 flex-col px-2.5 pb-2.5": !0,
 		[w.value.end ?? ""]: !0
-	}))), Ne = a(() => p({ "flex min-h-64 flex-1 flex-col": !0 })), Z = a(() => r(S.value?.selector, {
+	}))), Me = a(() => p({ "absolute inset-0 z-10 flex flex-col bg-white p-2.5 dark:bg-dark-900": !0 })), Z = a(() => r(S.value?.selector, {
 		type: "button",
 		disabled: b.value.disabled
 	}, p({
 		"inline-flex cursor-pointer items-center gap-x-2 px-1.5 py-1 text-sm font-medium text-dark-600 hover:bg-dark-100 focus:outline-none disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
-		[q.value ?? ""]: !0,
+		[K.value ?? ""]: !0,
 		[w.value.selector ?? ""]: !0
 	}))), Q = a(() => r(S.value?.navButton, {
 		type: "button",
 		disabled: b.value.disabled
 	}, p({
 		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center text-dark-600 hover:bg-dark-100 disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
-		[q.value ?? ""]: !0,
+		[K.value ?? ""]: !0,
 		[w.value.navButton ?? ""]: !0
-	}))), Pe = a(() => L.value === "year" ? _("Previous years") : _("Previous month")), $ = a(() => L.value === "year" ? _("Next years") : _("Next month")), Fe = a(() => r(S.value?.previousButton, {
+	}))), Ne = a(() => I.value === "year" ? _("Previous years") : _("Previous month")), Pe = a(() => I.value === "year" ? _("Next years") : _("Next month")), Fe = a(() => r(S.value?.previousButton, {
 		...Q.value,
 		onClick: he,
 		type: "button",
 		disabled: b.value.disabled,
-		"aria-label": Pe.value
+		"aria-label": Ne.value
 	}, p({ [w.value.navButton ?? ""]: !0 }))), Ie = a(() => r(S.value?.nextButton, {
 		...Q.value,
 		onClick: ge,
 		type: "button",
 		disabled: b.value.disabled,
-		"aria-label": $.value
+		"aria-label": Pe.value
 	}, p({ [w.value.navButton ?? ""]: !0 }))), Le = a(() => r(S.value?.todayButton, {
 		onClick: _e,
 		type: "button",
@@ -179,76 +178,76 @@ function m(d, m, h) {
 		"aria-label": _("Today")
 	}, p({
 		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center hover:bg-dark-100 disabled:cursor-not-allowed dark:hover:bg-dark-800": !0,
-		[q.value ?? ""]: !0,
+		[K.value ?? ""]: !0,
 		[w.value.navButton ?? ""]: !0
-	}))), Re = a(() => r(S.value?.selector, void 0, {
+	}))), $ = a(() => r(S.value?.selector, void 0, {
 		...Z.value,
 		onClick: ue,
 		type: "button",
 		"aria-label": _("Select year"),
 		disabled: b.value.disabled || b.value.hideYears
-	})), ze = a(() => ({
+	})), Re = a(() => ({
 		...r(S.value?.selector, void 0, {
 			...Z.value,
 			type: "button",
 			"aria-label": _("Select month"),
 			disabled: b.value.disabled || b.value.hideMonths
 		}),
-		onClick: ye
-	})), Be = a(() => ({
+		onClick: Y
+	})), ze = a(() => ({
 		...r(S.value?.selector, void 0, {
 			...Z.value,
 			type: "button",
 			"aria-label": _("Select end month"),
 			disabled: b.value.disabled || b.value.hideMonths
 		}),
-		onClick: be
-	})), Ve = a(() => !b.value.hideYears), He = a(() => !b.value.hideMonths);
+		onClick: Y
+	})), Be = a(() => !b.value.hideYears), Ve = a(() => !b.value.hideMonths);
 	return {
-		view: L,
-		value: I,
-		shared: we,
+		view: I,
+		value: F,
+		shared: Se,
 		merged: b,
 		showNav: a(() => !0),
-		endBind: Me,
-		rootBind: Te,
-		bodyBind: ke,
-		viewDate: R,
-		viewYear: W,
-		startBind: je,
-		viewMonth: G,
-		yearLabel: V,
-		monthLabel: H,
-		headerBind: Ee,
-		monthsBind: De,
-		panelsBind: Ae,
+		endBind: je,
+		rootBind: Ce,
+		bodyBind: Oe,
+		viewDate: L,
+		viewYear: U,
+		startBind: Ae,
+		viewMonth: W,
+		yearLabel: B,
+		monthLabel: V,
+		headerBind: we,
+		monthsBind: Te,
+		panelsBind: ke,
 		isVertical: X,
-		endViewDate: z,
-		previewDate: B,
-		setViewDate: Y,
+		endViewDate: R,
+		previewDate: z,
+		setViewDate: J,
 		navIconBind: a(() => S.value?.navIcon),
-		monthTarget: F,
 		handleChange: pe,
 		yearPageSize: 15,
-		endMonthLabel: U,
-		endHeaderBind: Oe,
-		monthYearBind: Ne,
+		endMonthLabel: H,
+		endHeaderBind: De,
+		monthYearBind: Me,
 		nextButtonBind: Ie,
-		monthPanelYear: Se,
+		monthPanelYear: be,
+		startHeaderBind: Ee,
 		todayButtonBind: Le,
-		monthPanelValue: Ce,
-		yearSelectorBind: Re,
+		monthPanelValue: xe,
+		yearSelectorBind: $,
 		handleYearSelect: ve,
-		showYearSelector: Ve,
-		monthSelectorBind: ze,
-		handleMonthSelect: xe,
-		showMonthSelector: He,
+		showYearSelector: Be,
+		monthSelectorBind: Re,
+		handleMonthSelect: ye,
+		showMonthSelector: Ve,
 		previousButtonBind: Fe,
-		endMonthSelectorBind: Be,
+		endMonthSelectorBind: ze,
 		handleEndViewDateChange: fe,
 		handlePreviewDateChange: me,
 		handleStartViewDateChange: de,
-		yearPageStart: K
+		yearPageStart: G
 	};
 }
 //#endregion

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -77,12 +77,7 @@ var b = /*@__PURE__*/ u({
 			"hide-weekdays": v(x).hideWeekdays,
 			"disable-years": v(x).disableYears,
 			"disable-months": v(x).disableMonths,
-			"hide-outside-days": v(x).hideOutsideDays,
-			"custom-props": {
-				end: { class: "pr-2.5" },
-				start: { class: "pr-2.5" },
-				panels: { class: "gap-0" }
-			}
+			"hide-outside-days": v(x).hideOutsideDays
 		}, {
 			day: y((e) => [g(i.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			startAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {

package/dist/Components/Drawer/composables/useDrawer.js

@@ -91,7 +91,7 @@ function h(h, g, _ = {}) {
 			"relative rounded-none": !0,
 			[be.value ?? ""]: !0,
 			[Se.value ?? ""]: !0,
-			"overflow-y-auto": B.value === "paper",
+			"overflow-y-auto bridge-scroll-fade-y bridge-hide-scrollbar": B.value === "paper",
 			[we.value]: z.value,
 			[s(L.value, "panel") ?? ""]: !0
 		})

package/dist/Components/FieldOverlay/FieldOverlay.vue_vue_type_script_setup_true_lang.js

@@ -3,12 +3,12 @@ import t from "../Drawer/Drawer.js";
 import { FIELD_OVERLAY_INJECTION_KEY as n } from "./fieldOverlayInjectionKey.js";
 import r from "../Menu/Menu.js";
 import i from "../Modal/Modal.js";
-import { createBlock as a, defineComponent as o, mergeModels as s, mergeProps as c, openBlock as l, provide as u, renderSlot as d, unref as f, useModel as p, withCtx as m } from "vue";
+import { createBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeModels as l, mergeProps as u, normalizeProps as d, openBlock as f, provide as p, renderSlot as m, unref as h, useModel as g, withCtx as _ } from "vue";
 //#region src/Components/FieldOverlay/FieldOverlay.vue?vue&type=script&setup=true&lang.ts
-var h = /*@__PURE__*/ o({
+var v = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "FieldOverlay",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		customProps: {},
 		overlay: { default: "auto" }
 	}, {
@@ -18,55 +18,55 @@ var h = /*@__PURE__*/ o({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ s(["close", "show-change"], ["update:modelValue"]),
-	setup(o, { emit: s }) {
-		let h = s, g = o, _ = p(o, "modelValue"), { menuBind: v, modalBind: y, drawerBind: b, resolvedOverlay: x } = e(g);
-		u(n, {
+	emits: /*@__PURE__*/ l(["close", "show-change"], ["update:modelValue"]),
+	setup(s, { emit: l }) {
+		let v = l, y = s, b = g(s, "modelValue"), { menuBind: x, modalBind: S, drawerBind: C, resolvedOverlay: w, drawerScrollerBind: T } = e(y);
+		p(n, {
 			apply: () => {
-				_.value = !1;
+				b.value = !1;
 			},
 			cancel: () => {
-				_.value = !1;
+				b.value = !1;
 			}
 		});
-		function S(e) {
-			h("show-change", e);
+		function E(e) {
+			v("show-change", e);
 		}
-		function C() {
-			h("close");
+		function D() {
+			v("close");
 		}
-		return (e, n) => f(x) === "menu" ? (l(), a(f(r), c({
+		return (e, n) => h(w) === "menu" ? (f(), a(h(r), u({
 			key: 0,
-			modelValue: _.value,
-			"onUpdate:modelValue": n[0] ||= (e) => _.value = e
-		}, f(v), {
-			onClose: C,
-			"onUpdate:modelValue": S
+			modelValue: b.value,
+			"onUpdate:modelValue": n[0] ||= (e) => b.value = e
+		}, h(x), {
+			onClose: D,
+			"onUpdate:modelValue": E
 		}), {
-			default: m(() => [d(e.$slots, "default")]),
+			default: _(() => [m(e.$slots, "default")]),
 			_: 3
-		}, 16, ["modelValue"])) : f(x) === "modal" ? (l(), a(f(i), c({
+		}, 16, ["modelValue"])) : h(w) === "modal" ? (f(), a(h(i), u({
 			key: 1,
-			modelValue: _.value,
-			"onUpdate:modelValue": n[1] ||= (e) => _.value = e
-		}, f(y), {
-			onClose: C,
-			onShowChange: S
+			modelValue: b.value,
+			"onUpdate:modelValue": n[1] ||= (e) => b.value = e
+		}, h(S), {
+			onClose: D,
+			onShowChange: E
 		}), {
-			default: m(() => [d(e.$slots, "default")]),
+			default: _(() => [m(e.$slots, "default")]),
 			_: 3
-		}, 16, ["modelValue"])) : (l(), a(f(t), c({
+		}, 16, ["modelValue"])) : (f(), a(h(t), u({
 			key: 2,
-			modelValue: _.value,
-			"onUpdate:modelValue": n[2] ||= (e) => _.value = e
-		}, f(b), {
-			onClose: C,
-			onShowChange: S
+			modelValue: b.value,
+			"onUpdate:modelValue": n[2] ||= (e) => b.value = e
+		}, h(C), {
+			onClose: D,
+			onShowChange: E
 		}), {
-			default: m(() => [d(e.$slots, "default")]),
+			default: _(() => [o("div", d(c(h(T))), [m(e.$slots, "default")], 16)]),
 			_: 3
 		}, 16, ["modelValue"]));
 	}
 });
 //#endregion
-export { h as default };
+export { v as default };

package/dist/Components/FieldOverlay/composables/useFieldOverlay.d.ts

@@ -11,5 +11,6 @@ export declare function useFieldOverlay(props: FieldOverlayOwnProps): {
     modalBind: import('vue').ComputedRef<ModalOwnProps>;
     drawerBind: import('vue').ComputedRef<DrawerOwnProps>;
     resolvedOverlay: import('vue').ComputedRef<ResolvedFieldOverlay>;
+    drawerScrollerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
 };
 export type FieldOverlayOptions = FieldOverlayOwnProps;

package/dist/Components/FieldOverlay/composables/useFieldOverlay.js

@@ -1,49 +1,51 @@
 import { useBreakpoint as e } from "../../../Utils/useBreakpoint.js";
-import { computed as t } from "vue";
-import { resolveFieldOverlay as n } from "@bridge-ui/core/Domain";
-import { cn as r } from "@bridge-ui/core/Utils";
-import { toMerged as i } from "es-toolkit/object";
+import { mergePartBind as t } from "../../../Utils/index.js";
+import { computed as n } from "vue";
+import { resolveFieldOverlay as r } from "@bridge-ui/core/Domain";
+import { cn as i } from "@bridge-ui/core/Utils";
+import { toMerged as a } from "es-toolkit/object";
 //#region src/Components/FieldOverlay/composables/useFieldOverlay.ts
-function a(e, t) {
+function o(e, t) {
 	let n = e.customProps?.panel;
-	return i(e, { customProps: { panel: {
+	return a(e, { customProps: { panel: {
 		...n,
-		class: r(t, n?.class)
+		class: i(t, n?.class)
 	} } });
 }
-function o(i) {
-	let o = e(), s = t(() => n(i.overlay, o.mobile));
+function s(a) {
+	let s = e(), c = n(() => r(a.overlay, s.mobile));
 	return {
-		menuBind: t(() => {
-			let e = i.customProps?.menu;
+		menuBind: n(() => {
+			let e = a.customProps?.menu;
 			return {
 				closeOnClickAway: !0,
 				placement: "bottom-start",
 				...e,
 				classes: {
 					...e?.classes,
-					content: r(e?.classes?.content, "overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent")
+					content: i(e?.classes?.content, "overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent")
 				}
 			};
 		}),
-		modalBind: t(() => a({
+		modalBind: n(() => o({
 			size: "md",
 			scroll: "paper",
 			closeOnOverlay: !0,
 			align: "middle-center",
 			disableRestoreFocus: !0,
-			...i.customProps?.modal
+			...a.customProps?.modal
 		}, "flex w-fit max-w-full sm:max-w-full flex-col items-stretch p-0")),
-		drawerBind: t(() => a({
+		drawerBind: n(() => o({
 			size: "md",
 			scroll: "paper",
 			placement: "bottom",
 			closeOnOverlay: !0,
 			disableRestoreFocus: !0,
-			...i.customProps?.drawer
-		}, "flex h-auto max-h-[90dvh] w-full flex-col items-stretch overflow-x-auto p-0")),
-		resolvedOverlay: s
+			...a.customProps?.drawer
+		}, "flex h-auto max-h-[90dvh] w-full flex-col items-stretch p-0")),
+		resolvedOverlay: c,
+		drawerScrollerBind: n(() => t(a.customProps?.drawerScroller, {}, i({ "flex min-w-0 w-full flex-col overflow-x-auto overflow-y-hidden bridge-scroll-fade-x bridge-hide-scrollbar": !0 })))
 	};
 }
 //#endregion
-export { o as useFieldOverlay };
+export { s as useFieldOverlay };

package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts

@@ -1,4 +1,4 @@
-import { Slot } from 'vue';
+import { HTMLAttributes, Slot } from 'vue';
 import { FieldOverlayMode } from '@bridge-ui/core/Domain';
 import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { MenuOwnProps } from '../Menu/menu.types';
@@ -10,6 +10,12 @@ export interface FieldOverlayCustomProps {
      * @default undefined
      */
     drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the inner horizontal scroller in the `drawer` shell.
+     *
+     * @default undefined
+     */
+    drawerScroller?: HTMLAttributes;
     /**
      * Props forwarded to the nested `Menu` when that shell is active.
      *
@@ -37,14 +43,16 @@ export interface FieldOverlayEmits {
 /**
  * Renders field picker / listbox content in a `Menu`, `Modal`, or `Drawer`.
  * Visibility is controlled with `v-model`. Shell-specific options go through
- * `customProps.menu` / `.modal` / `.drawer`.
+ * `customProps.menu` / `.modal` / `.drawer`. The drawer inner scroller
+ * accepts `customProps.drawerScroller`.
  *
  * Menu chrome (fill, radius, shadow, ring) is stripped so the nested picker
  * or listbox paints the visible surface, matching modal / drawer panels.
  */
 export interface FieldOverlayOwnProps {
     /**
-     * Extra props for the nested shells (`menu`, `modal`, `drawer`).
+     * Extra props for the nested shells (`menu`, `modal`, `drawer`) and the
+     * drawer horizontal scroller (`drawerScroller`).
      *
      * @default undefined
      */

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

@@ -51,7 +51,7 @@ function y(y, b) {
 	}), I = o(() => N.value?.selected), L = o(() => N.value?.highlighted), R = o(() => N.value?.hover), z = o(() => m(F.value?.check, N.value?.check)), B = o(() => {
 		let e = T.value.maxHeight ?? (A.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = T.value.disableMaxHeight === !0;
 		return n(T.value.customProps?.scroll, {}, m({
-			"min-h-0 overflow-y-auto overscroll-contain": !t,
+			"min-h-0 overflow-y-auto overscroll-contain bridge-soft-scrollbar": !t,
 			[e]: !t,
 			[D.value.scroll ?? ""]: !0
 		}));

package/dist/Components/Modal/composables/useModal.js

@@ -86,7 +86,7 @@ function v(v, y, b = {}) {
 		class: d({
 			"relative w-full": !0,
 			[he.value ?? ""]: !0,
-			"max-h-[calc(100dvh-2rem)] overflow-y-auto": U.value === "paper",
+			"max-h-[calc(100dvh-2rem)] overflow-y-auto bridge-scroll-fade-y bridge-hide-scrollbar": U.value === "paper",
 			[_e.value]: H.value,
 			[c(B.value, "panel") ?? ""]: !0
 		})

package/dist/Components/TimePanel/composables/useTimePanel.d.ts

@@ -27,6 +27,7 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     columnBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     getHourBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
@@ -38,12 +39,14 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     showMeridiem: import('vue').ComputedRef<boolean>;
     getMinuteBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
     }>;
     getSecondBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
@@ -51,6 +54,7 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     meridiemItems: import('vue').ComputedRef<TimePanelItem[]>;
     getMeridiemBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;

package/dist/Components/TimePanel/composables/useTimePanel.js

@@ -143,34 +143,35 @@ function E(w, E, D) {
 		"w-fit min-w-fit": !M.value.fill,
 		[I.value.root ?? ""]: !0
 	}))), Q = a(() => n(P.value?.column, {}, y({
-		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-dark-300 dark:[&::-webkit-scrollbar-thumb]:bg-dark-600": !0,
+		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto bridge-scroll-fade-y bridge-hide-scrollbar": !0,
 		[T]: !0,
 		[I.value.column ?? ""]: !0
-	}))), $ = (e, t) => {
-		let r = z.value;
+	}))), $ = (e, t, r) => {
+		let i = z.value;
 		return n(P.value?.item, {
 			type: "button",
+			"aria-label": r,
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
 		}, y({
-			"w-full cursor-pointer px-3 py-2 text-sm transition-all duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
+			"w-full cursor-pointer px-3 py-2 text-sm transition-colors duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
 			[R.value ?? ""]: !0,
-			[r?.base ?? ""]: e.state === "base" || e.state === "hover",
-			[r?.hover ?? ""]: e.state === "base" || e.state === "hover",
-			[r?.selected ?? ""]: e.state === "selected",
-			[r?.disabled ?? ""]: e.state === "disabled",
+			[i?.base ?? ""]: e.state === "base" || e.state === "hover",
+			[i?.hover ?? ""]: e.state === "base" || e.state === "hover",
+			[i?.selected ?? ""]: e.state === "selected",
+			[i?.disabled ?? ""]: e.state === "disabled",
 			[I.value.item ?? ""]: !0
 		}));
 	}, oe = (e) => $(e, (e) => {
 		typeof e == "number" && K(e);
-	}), se = (e) => $(e, (e) => {
+	}, `Hour ${e.label}`), se = (e) => $(e, (e) => {
 		typeof e == "number" && q(e);
-	}), ce = (e) => $(e, (e) => {
+	}, `Minute ${e.label}`), ce = (e) => $(e, (e) => {
 		typeof e == "number" && J(e);
-	}), le = (e) => $(e, (e) => {
+	}, `Second ${e.label}`), le = (e) => $(e, (e) => {
 		(e === "AM" || e === "PM") && Y(e);
-	}), ue = a(() => !!M.value.ampm);
+	}, String(e.label)), ue = a(() => !!M.value.ampm);
 	return {
 		merged: M,
 		rootBind: ae,