@bridge-ui/vue 0.1.0 → 0.2.0

package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } from '@bridge-ui/core/Tokens';
+import { CalendarColor, CalendarRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
@@ -242,12 +242,6 @@ export interface DateTimeRangePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateTimeRangePickerTokens;
     /**
      * Controlled value.
      *
@@ -270,33 +264,4 @@ export interface DateTimeRangePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateTimeRangePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export type DateTimeRangePickerProps = MergeHtmlProps<DateTimeRangePickerOwnProps, HTMLAttributes>;

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

@@ -1,3 +1,3 @@
 export { useDateTimeRangePicker } from './composables/useDateTimeRangePicker';
-export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, DateTimeRangePickerTokens, } from './dateTimeRangePicker.types';
+export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, } from './dateTimeRangePicker.types';
 export { default as DateTimeRangePicker } from './DateTimeRangePicker.vue';

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,42 +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(r) {
-	let i = e(), o = t(() => n(r.overlay, i.mobile));
+function s(a) {
+	let s = e(), c = n(() => r(a.overlay, s.mobile));
 	return {
-		menuBind: t(() => ({
-			closeOnClickAway: !0,
-			placement: "bottom-start",
-			...r.customProps?.menu
-		})),
-		modalBind: t(() => a({
+		menuBind: n(() => {
+			let e = a.customProps?.menu;
+			return {
+				closeOnClickAway: !0,
+				placement: "bottom-start",
+				...e,
+				classes: {
+					...e?.classes,
+					content: i(e?.classes?.content, "overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent")
+				}
+			};
+		}),
+		modalBind: n(() => o({
 			size: "md",
 			scroll: "paper",
 			closeOnOverlay: !0,
 			align: "middle-center",
 			disableRestoreFocus: !0,
-			...r.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,
-			...r.customProps?.drawer
-		}, "flex h-auto max-h-[90dvh] w-full flex-col items-stretch overflow-x-auto p-0")),
-		resolvedOverlay: o
+			...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,11 +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/FormField/composables/useFormField.d.ts

@@ -7,7 +7,7 @@ export type FormFieldOptions = {
     /**
      * Public registry key that owns FormField chrome defaults/tokens.
      */
-    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
+    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "ColorField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *

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

@@ -20,7 +20,6 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
-		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -83,7 +82,7 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		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: 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([]);
+		}), 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;
 		}

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

@@ -3,16 +3,7 @@ import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
 export declare const listboxBridgeKeys: readonly ["size", "color", "error", "classes", "maxHeight", "showFooter", "customProps", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, 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): {
+export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
     merged: import('vue').ComputedRef<ListboxMerged>;
     checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;

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

@@ -17,78 +17,77 @@ var v = [
 	"customProps",
 	"disableMaxHeight"
 ];
-function y(y, b, x = {}) {
-	let S = s(), C = t(), w = e(), T = o(() => _({
+function y(y, b) {
+	let x = s(), S = t(), C = e(), w = o(() => _({
 		props: {
-			...S,
+			...x,
 			...y
 		},
 		bridgeKeys: v
-	})), { merged: E, entry: D } = r({
+	})), { merged: T, entry: E } = 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);
+		componentName: "Listbox",
+		props: () => w.value.componentProps
+	}), D = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), O = o(() => T.value.customProps), k = o(() => u(y.overlay, S.mobile)), A = o(() => l(k.value)), j = o(() => k.value === "drawer"), M = a({
+		overlay: k,
+		componentName: "Listbox",
+		showFooter: () => T.value.showFooter
+	}), N = o(() => {
+		let e = g(d, E.value?.tokens?.color);
 		return h({
 			tokens: e,
-			color: E.value.color,
-			invalid: E.value.error
+			color: T.value.color,
+			invalid: T.value.error
 		});
-	}), I = o(() => {
-		let e = g(f, P.value?.rounded);
+	}), P = o(() => {
+		let e = g(f, E.value?.tokens?.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";
+	}), F = o(() => {
+		let e = g(p, E.value?.tokens?.size), t = c(e, T.value.size ?? "md"), n = A.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,
+	}), 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 bridge-soft-scrollbar": !t,
 			[e]: !t,
-			[O.value.scroll ?? ""]: !0
+			[D.value.scroll ?? ""]: !0
 		}));
-	}), U = o(() => n({}, {}, m({
+	}), V = o(() => n({}, {}, m({
 		"text-dark-500": !0,
-		[L.value?.message ?? ""]: !0
-	}))), W = o(() => {
-		if (!j.value) return;
-		let e = I.value;
+		[F.value?.message ?? ""]: !0
+	}))), H = o(() => {
+		let e = P.value;
 		if (e) return m({
 			[e]: !0,
-			"rounded-b-none": M.value
+			"rounded-b-none": j.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
+	}), U = 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": !0,
+		[String(H.value ?? "")]: !!H.value
 	}));
 	return {
-		merged: E,
-		checkClass: V,
-		scrollBind: H,
-		footerBind: o(() => n(k.value?.footer, {}, m({
+		merged: T,
+		checkClass: z,
+		scrollBind: B,
+		footerBind: o(() => n(O.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,
-			[O.value.footer ?? ""]: !0
+			[D.value.footer ?? ""]: !0
 		}))),
-		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
+		showFooter: M,
+		applyLabel: o(() => C("Apply")),
+		cancelLabel: o(() => C("Cancel")),
+		messageBind: V,
+		surfaceBind: U,
+		sizeClasses: F,
+		mergedClasses: D,
+		applyButtonProps: o(() => O.value?.applyButton),
+		optionHoverClass: R,
+		cancelButtonProps: o(() => O.value?.cancelButton),
+		optionSelectedClass: I,
+		optionHighlightedClass: L
 	};
 }
 //#endregion

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

@@ -1,5 +1,4 @@
 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/listbox.types.d.ts

@@ -157,12 +157,6 @@ 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`,
      * `modal`, `drawer`, `progress`, `scroll`, `footer`, `applyButton`,

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/Select/composables/useSelect.d.ts

@@ -729,7 +729,6 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
         color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
-        componentName: "Select" | "Autocomplete";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;

package/dist/Components/Select/composables/useSelect.js

@@ -343,7 +343,6 @@ function p(p, m, h, g, Oe) {
 		showFooter: z.value,
 		entries: He.value,
 		options: G.value,
-		componentName: "Select",
 		size: q.merged.value.size,
 		error: q.invalidated.value,
 		color: q.merged.value.color,

package/dist/Components/Step/Step.js

@@ -0,0 +1,5 @@
+import e from "./Step.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Step/Step.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,11 @@
+import { StepOwnProps, StepSlots } from './step.types';
+type __VLS_Slots = StepSlots;
+declare const __VLS_base: import('vue').DefineComponent<StepOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StepOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Step/Step.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { useStep as i } from "./composables/useStep.js";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v } from "vue";
+//#region src/Components/Step/Step.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "Step",
+	props: {
+		classes: {},
+		completed: { type: Boolean },
+		customProps: {},
+		description: {},
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		icon: {},
+		label: {}
+	},
+	setup(d) {
+		let { slots: y, merged: b, rootBind: x, textBind: S, iconBind: C, labelBind: w, stepNumber: T, showContent: E, contentBind: D, triggerBind: O, resolvedIcon: k, indicatorBind: A, connectorBind: j, descriptionBind: M } = i(d);
+		return (i, d) => (h(), c("li", m(f(v(x))), [
+			l("div", m(f(v(j))), null, 16),
+			l("button", m(f(v(O))), [l("span", m(f(v(A))), [v(e)(v(y), "icon") ? g(i.$slots, "icon", {}, void 0, void 0, 0) : v(k) ? (h(), o(v(r), p({
+				key: 1,
+				icon: v(k)
+			}, v(C)), null, 16, ["icon"])) : (h(), c(a, { key: 2 }, [u(_(v(T)), 1)], 64))], 16), v(t)(v(y), "label", v(b).label) || v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 0 }, v(S))), [v(t)(v(y), "label", v(b).label) ? (h(), c("span", m(p({ key: 0 }, v(w))), [v(e)(v(y), "label") ? g(i.$slots, "label", {}, void 0, void 0, 0) : v(n)(v(b).label) ? (h(), c(a, { key: 1 }, [u(_(v(b).label), 1)], 64)) : s("", !0)], 16)) : s("", !0), v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 1 }, v(M))), [v(e)(v(y), "description") ? g(i.$slots, "description", {}, void 0, void 0, 0) : v(n)(v(b).description) ? (h(), c(a, { key: 1 }, [u(_(v(b).description), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16)) : s("", !0)], 16),
+			v(E) ? (h(), c("div", m(p({ key: 0 }, v(D))), [g(i.$slots, "default")], 16)) : s("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { y as default };

package/dist/Components/Step/composables/useStep.d.ts

@@ -0,0 +1,56 @@
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { StepOwnProps, StepProps } from '../step.types';
+export declare function useStep(props: StepOwnProps): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    index: import('vue').ComputedRef<number>;
+    status: import('vue').ComputedRef<import('@bridge-ui/core/Domain').StepperStepStatus>;
+    merged: import('vue').ComputedRef<StepOwnProps>;
+    isError: import('vue').ComputedRef<boolean>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<StepProps, "error" | "icon" | "classes" | "customProps" | "label" | "disabled" | "description" | "completed">>>;
+    textBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    clickable: import('vue').ComputedRef<boolean>;
+    labelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    stepNumber: import('vue').ComputedRef<string>;
+    isVertical: import('vue').ComputedRef<boolean>;
+    showContent: import('vue').ComputedRef<boolean>;
+    isCompleted: import('vue').ComputedRef<boolean>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        role: string;
+        id: string;
+        "aria-labelledby": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        id: string;
+        type: "button";
+        disabled: true | undefined;
+        tabindex: number | undefined;
+        "aria-invalid": boolean | undefined;
+        onClick: ((event: MouseEvent) => void) | undefined;
+        onKeydown: ((event: KeyboardEvent) => void) | undefined;
+        "aria-current": "step" | undefined;
+        "aria-controls": string | undefined;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    resolvedIcon: import('vue').ComputedRef<import('../../..').IconSource | undefined>;
+    indicatorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    connectorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        "data-part": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};