@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js

@@ -1,112 +1,126 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { computed as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
-import { cn as d, combineDateAndTime as f, splitComponentProps as p } from "@bridge-ui/core";
-import { isNil as m, omit as h } from "es-toolkit/compat";
+import { FIELD_OVERLAY_INJECTION_KEY as o } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as s, inject as c, ref as l, toValue as u, useAttrs as d, watch as f } from "vue";
+import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
+import { combineDateAndTime as g } from "@bridge-ui/core/Domain";
+import { menuRoundedProps as _ } from "@bridge-ui/core/Tokens";
+import { cn as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.ts
-var g = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
-function _(e, t, n) {
+var b = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function x(e, t, n) {
 	let [r, i] = e;
 	return t.isAfter(r, i, n) ? [i, r] : e;
 }
-function v(v, y, b) {
-	let x = l(), S = e(), C = n(), w = t(), T = o(() => p({
+function S(S, C, w) {
+	let T = d(), E = c(o, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), D = e(), O = n(), k = t(), A = s(() => y({
 		props: {
-			...x,
-			...c(v)
+			...T,
+			...u(S)
 		},
-		bridgeKeys: g
-	})), { merged: E, entry: D } = i({
-		libDefaults: y,
+		bridgeKeys: b
+	})), { merged: j, entry: M } = i({
+		libDefaults: C,
 		componentName: "DateTimeRangePicker",
-		props: () => T.value.componentProps
-	}), O = o(() => E.value.customProps), k = o(() => h(T.value.inheritedAttrs, ["onChange", "onCancel"])), A = a({
-		entry: D,
-		props: () => T.value.componentProps
-	}), j = o(() => c(v)), M = o(() => w(E.value.timeZone)), N = o(() => !m(j.value.value)), P = s(E.value.defaultValue ?? null), F = o(() => N.value ? j.value.value ?? null : P.value), I = s(F.value);
-	u(() => [F.value, E.value.showFooter], ([e, t]) => {
-		t && (I.value = e);
+		props: () => A.value.componentProps
+	}), N = s(() => j.value.customProps), P = s(() => h(A.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), F = a({
+		entry: M,
+		props: () => A.value.componentProps
+	}), I = s(() => u(S)), L = s(() => k(j.value.timeZone)), R = s(() => !m(I.value.value)), z = l(j.value.defaultValue ?? null), B = s(() => R.value ? I.value.value ?? null : z.value), V = l(B.value);
+	f(() => [B.value, j.value.showFooter], ([e, t]) => {
+		t && (V.value = e);
 	});
-	let L = o(() => E.value.showFooter ? I.value : F.value), R = o(() => ({
-		day: E.value.tokens?.calendar?.day ?? E.value.tokens?.day,
-		color: E.value.tokens?.calendar?.color ?? E.value.tokens?.color,
-		rounded: E.value.tokens?.calendar?.rounded ?? E.value.tokens?.rounded
-	})), z = o(() => ({
-		color: E.value.tokens?.time?.color ?? E.value.tokens?.color,
-		rounded: E.value.tokens?.time?.rounded ?? E.value.tokens?.rounded
-	})), B = o(() => L.value?.[0] ?? null), V = o(() => L.value?.[1] ?? null), H = (e) => {
-		N.value || (P.value = e), b("change", e);
-	}, U = (e) => {
-		if (E.value.showFooter) {
-			I.value = e;
+	let H = s(() => j.value.showFooter ? V.value : B.value), U = s(() => ({
+		day: j.value.tokens?.calendar?.day ?? j.value.tokens?.day,
+		color: j.value.tokens?.calendar?.color ?? j.value.tokens?.color,
+		rounded: j.value.tokens?.calendar?.rounded ?? j.value.tokens?.rounded
+	})), W = s(() => ({
+		color: j.value.tokens?.time?.color ?? j.value.tokens?.color,
+		rounded: j.value.tokens?.time?.rounded ?? j.value.tokens?.rounded
+	})), G = s(() => H.value?.[0] ?? null), K = s(() => H.value?.[1] ?? null), q = (e) => {
+		R.value || (z.value = e), w("change", e);
+	}, J = (e) => {
+		if (j.value.showFooter) {
+			V.value = e;
 			return;
 		}
-		H(e);
-	}, W = (e) => {
+		q(e);
+	}, Y = (e) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = f(e[0], L.value?.[0] ?? t, S.value, M.value), r = f(e[1], L.value?.[1] ?? t, S.value, M.value);
-		U(_([n, r], S.value, M.value));
-	}, G = (e) => {
+		let t = D.value.now(L.value), n = g(e[0], H.value?.[0] ?? t, D.value, L.value), r = g(e[1], H.value?.[1] ?? t, D.value, L.value);
+		J(x([n, r], D.value, L.value));
+	}, X = (e) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = f(L.value?.[0] ?? t, e, S.value, M.value), r = L.value?.[1] ?? t;
-		U(_([n, r], S.value, M.value));
-	}, K = (e) => {
+		let t = D.value.now(L.value), n = g(H.value?.[0] ?? t, e, D.value, L.value), r = H.value?.[1] ?? t;
+		J(x([n, r], D.value, L.value));
+	}, Z = (e) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = L.value?.[0] ?? t, r = f(L.value?.[1] ?? t, e, S.value, M.value);
-		U(_([n, r], S.value, M.value));
-	}, q = () => {
-		H(I.value);
-	}, J = () => {
-		I.value = F.value, b("cancel");
-	}, Y = o(() => r(O.value?.root, k.value, d({
-		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-		[A.value.root ?? ""]: !0
-	}))), X = o(() => d({ "flex min-w-0 flex-col": !0 })), Z = o(() => d({
+		let t = D.value.now(L.value), n = H.value?.[0] ?? t, r = g(H.value?.[1] ?? t, e, D.value, L.value);
+		J(x([n, r], D.value, L.value));
+	}, Q = () => {
+		q(V.value), w("apply"), E.apply();
+	}, $ = () => {
+		V.value = B.value, w("cancel"), E.cancel();
+	}, ee = s(() => {
+		let e = p(_, j.value.rounded ?? "md");
+		return r(N.value?.root, P.value, v({
+			"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			[e]: !0,
+			[F.value.root ?? ""]: !0
+		}));
+	}), te = s(() => v({ "flex min-w-0 flex-col": !0 })), ne = s(() => v({
 		"min-w-0": !0,
-		[A.value.calendar ?? ""]: !0
-	})), Q = o(() => d({
+		[F.value.calendar ?? ""]: !0
+	})), re = s(() => v({
 		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
-		[A.value.time ?? ""]: !0
-	})), $ = o(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ee = o(() => d({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), te = o(() => d({ "absolute inset-0 flex w-full px-2.5": !0 }));
+		[F.value.time ?? ""]: !0
+	})), ie = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ae = s(() => v({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), oe = s(() => v({ "absolute inset-0 flex w-full px-2.5": !0 }));
 	return {
-		merged: E,
-		rootBind: Y,
-		timeBind: Q,
-		footerBind: o(() => r(O.value?.footer, {}, d({
+		merged: j,
+		rootBind: ee,
+		timeBind: re,
+		footerBind: s(() => r(N.value?.footer, {}, v({
 			"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,
-			[A.value.footer ?? ""]: !0
+			[F.value.footer ?? ""]: !0
 		}))),
-		showFooter: o(() => !!E.value.showFooter),
-		timeTokens: z,
-		handleApply: q,
-		contentBind: X,
-		displayValue: L,
-		handleCancel: J,
-		calendarBind: Z,
-		timeFillBind: te,
-		endTimeValue: V,
-		timeSizerBind: ee,
-		calendarTokens: R,
-		startTimeValue: B,
-		handleCalendarChange: W,
-		handleEndPanelChange: K,
-		timePanelCustomProps: $,
-		handleStartPanelChange: G,
-		applyLabel: o(() => C("Apply")),
-		cancelLabel: o(() => C("Cancel")),
-		applyButtonProps: o(() => O.value?.applyButton),
-		cancelButtonProps: o(() => O.value?.cancelButton)
+		showFooter: s(() => !!j.value.showFooter),
+		timeTokens: W,
+		handleApply: Q,
+		contentBind: te,
+		displayValue: H,
+		handleCancel: $,
+		calendarBind: ne,
+		timeFillBind: oe,
+		endTimeValue: K,
+		timeSizerBind: ae,
+		calendarTokens: U,
+		startTimeValue: G,
+		handleCalendarChange: Y,
+		handleEndPanelChange: Z,
+		timePanelCustomProps: ie,
+		handleStartPanelChange: X,
+		applyLabel: s(() => O("Apply")),
+		cancelLabel: s(() => O("Cancel")),
+		applyButtonProps: s(() => N.value?.applyButton),
+		cancelButtonProps: s(() => N.value?.cancelButton)
 	};
 }
 //#endregion
-export { v as useDateTimeRangePicker };
+export { S as useDateTimeRangePicker };

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

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, DisableTimesInput, MergeHtmlProps, MergeProps, StartOfWeek, TimeColorItem } from '@bridge-ui/core';
+import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } 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';
 import { CalendarRangeOrientation } from '../CalendarRange';
@@ -50,6 +52,10 @@ export interface DateTimeRangePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface DateTimeRangePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -59,43 +65,6 @@ export interface DateTimeRangePickerEmits {
      */
     change: [value: null | DateRangeValue];
 }
-export interface DateTimeRangePickerSlots {
-    /**
-     * Custom content inside each day button on the nested calendar.
-     *
-     * @default undefined
-     */
-    day?: Slot<CalendarDateDayCell>;
-}
-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 interface DateTimeRangePickerOwnProps {
     /**
      * Uses a 12-hour clock with an AM/PM column.
@@ -224,7 +193,10 @@ export interface DateTimeRangePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of calendar / time tiles and chrome.
+     * Border radius of the picker shell, calendar / time tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Tiles keep a true pill when `rounded` is `full`.
      *
      * `DateTimeRangeField` always forwards its own `rounded` here so the picker
      * matches the field, independent of `DateTimeRangePicker.defaultProps`.
@@ -234,6 +206,7 @@ export interface DateTimeRangePickerOwnProps {
     rounded?: MergeProps<CalendarRounded, DateTimeRangePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -269,4 +242,48 @@ export interface DateTimeRangePickerOwnProps {
      */
     value?: null | DateRangeValue;
 }
+export interface DateTimeRangePickerSlots {
+    /**
+     * Custom content inside each day button on the nested calendar.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    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/Divider/composables/useDivider.d.ts

@@ -1,12 +1,12 @@
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DividerOwnProps, DividerProps } from '../divider.types';
 type DividerLibDefaults = LibDefaultsShape<DividerOwnProps, "color" | "orientation">;
 type DividerMerged = MergeLibDefaults<DividerOwnProps, DividerLibDefaults>;
 export declare function useDivider(props: DividerOwnProps, libDefaults: DividerLibDefaults): {
     merged: import('vue').ComputedRef<DividerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         role: string;
-        "aria-orientation": NonNullable<keyof import('@bridge-ui/core').DividerOrientation | undefined>;
+        "aria-orientation": NonNullable<keyof import('@bridge-ui/core/Tokens').DividerOrientation | undefined>;
         class: string;
     }, "class", {}, Omit<DividerProps, "color" | "orientation" | "classes">>>;
 };

package/dist/Components/Divider/composables/useDivider.js

@@ -1,8 +1,8 @@
 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, orientationProps as u } from "@bridge-ui/core/Tokens/Divider";
+import { get as a } from "es-toolkit/compat";
+import { dividerColorProps as o, dividerOrientationProps as s } from "@bridge-ui/core/Tokens";
+import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core/Utils";
 //#region src/Components/Divider/composables/useDivider.ts
 var d = [
 	"color",
@@ -10,7 +10,7 @@ var d = [
 	"orientation"
 ];
 function f(f, p) {
-	let m = i(), h = r(() => s({
+	let m = i(), h = r(() => u({
 		props: {
 			...m,
 			...f
@@ -24,18 +24,18 @@ function f(f, p) {
 		entry: _,
 		props: () => h.value.componentProps
 	}), y = r(() => {
-		let e = o(l, _.value?.tokens?.color);
-		return c(e, g.value.color);
+		let e = l(o, _.value?.tokens?.color);
+		return a(e, g.value.color);
 	}), b = r(() => {
-		let e = o(u, _.value?.tokens?.orientation);
-		return c(e, g.value.orientation);
+		let e = l(s, _.value?.tokens?.orientation);
+		return a(e, g.value.orientation);
 	});
 	return {
 		merged: g,
 		rootBind: r(() => e({}, h.value.inheritedAttrs, {
 			role: "separator",
 			"aria-orientation": g.value.orientation,
-			class: a({
+			class: c({
 				"m-0 shrink-0 border-0": !0,
 				[y.value ?? ""]: !0,
 				[b.value ?? ""]: !0,

package/dist/Components/Divider/divider.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'vue';
-import { DividerColor, DividerOrientation, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { DividerColor, DividerOrientation } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface DividerColorOverrides {}
 export interface DividerOrientationOverrides {}
 export interface DividerClasses {

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

@@ -25,8 +25,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     hideBackdrop: boolean;
     keepMounted: boolean;
     persistent: boolean;
-    placement: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerPlacement, import('./drawer.types').DrawerPlacementOverrides>;
-    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerScroll, import('./drawer.types').DrawerScrollOverrides>;
+    placement: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').DrawerPlacement, import('./drawer.types').DrawerPlacementOverrides>;
+    scroll: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').DrawerScroll, import('./drawer.types').DrawerScrollOverrides>;
     teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,10 @@
-import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
-import { useDrawer as t } from "./composables/useDrawer.js";
-import { Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, unref as h, useModel as g, useSlots as _ } from "vue";
+import { useDrawer as e } from "./composables/useDrawer.js";
+import { Teleport as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeModels as l, mergeProps as u, normalizeProps as d, openBlock as f, renderSlot as p, unref as m, useModel as h } from "vue";
 //#region src/Components/Drawer/Drawer.vue?vue&type=script&setup=true&lang.ts
-var v = /*@__PURE__*/ c({
+var g = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "Drawer",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ l({
 		ariaLabel: {},
 		ariaLabelledBy: {},
 		autoFocus: {
@@ -63,9 +62,9 @@ var v = /*@__PURE__*/ c({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["close", "show-change"], ["update:modelValue"]),
-	setup(c, { expose: u, emit: v }) {
-		let y = _(), b = v, x = c, S = g(c, "modelValue"), { merged: C, mounted: w, rootBind: T, panelBind: E, overlayBind: D, wrapperBind: O, setPanelRef: k, layerStackId: A } = t(x, {
+	emits: /*@__PURE__*/ l(["close", "show-change"], ["update:modelValue"]),
+	setup(s, { expose: l, emit: g }) {
+		let _ = g, v = s, y = h(s, "modelValue"), { merged: b, mounted: x, rootBind: S, panelBind: C, overlayBind: w, wrapperBind: T, setPanelRef: E, layerStackId: D } = e(v, {
 			size: "md",
 			blur: "none",
 			scroll: "paper",
@@ -76,21 +75,21 @@ var v = /*@__PURE__*/ c({
 			closeOnEscape: !0,
 			closeOnOverlay: !0
 		}, {
-			show: S,
-			stackId: x.stackId,
-			onClose: () => b("close"),
-			onShowChange: (e) => b("show-change", e)
+			show: y,
+			stackId: v.stackId,
+			onClose: () => _("close"),
+			onShowChange: (e) => _("show-change", e)
 		});
-		u({ stackId: r(() => x.stackId ?? A.value) });
-		let j = r(() => C.value.teleportTo === !1), M = r(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo), N = r(() => x.hideBackdrop !== !0 && C.value.hideBackdrop !== !0);
-		return (t, r) => (p(), i(n, {
-			to: M.value,
-			disabled: j.value
-		}, [h(w) ? (p(), o("div", f(d({ key: 0 }, h(T))), [N.value ? (p(), o("div", d({
+		l({ stackId: n(() => v.stackId ?? D.value) });
+		let O = n(() => b.value.teleportTo === !1), k = n(() => b.value.teleportTo === !1 ? "body" : b.value.teleportTo), A = n(() => v.hideBackdrop !== !0 && b.value.hideBackdrop !== !0);
+		return (e, n) => (f(), r(t, {
+			to: k.value,
+			disabled: O.value
+		}, [m(x) ? (f(), a("div", d(u({ key: 0 }, m(S))), [A.value ? (f(), a("div", u({
 			key: 0,
 			"aria-hidden": "true"
-		}, h(D)), null, 16)) : a("", !0), s("div", f(l(h(O))), [s("div", d({ ref: h(k) }, h(E)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
+		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { v as default };
+export { g as default };

package/dist/Components/Drawer/composables/useDrawer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, Ref } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DrawerOwnProps, DrawerProps } from '../drawer.types';
 type DrawerLibDefaults = LibDefaultsShape<DrawerOwnProps, "blur" | "size" | "scroll" | "autoFocus" | "placement" | "teleportTo" | "transition" | "closeOnEscape" | "closeOnOverlay">;
 type DrawerMerged = MergeLibDefaults<DrawerOwnProps, DrawerLibDefaults>;
@@ -27,7 +27,7 @@ export type DrawerOptions = {
 export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibDefaults, options?: DrawerOptions): {
     merged: import('vue').ComputedRef<DrawerMerged>;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onTransitionend: (event: TransitionEvent) => void;
         style: {
             zIndex: number;
@@ -35,7 +35,7 @@ export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibD
         "aria-hidden": boolean | undefined;
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, Omit<DrawerProps, "size" | "classes" | "customProps" | "ariaLabel" | "ariaLabelledBy" | "autoFocus" | "blur" | "closeOnEscape" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "persistent" | "placement" | "scroll" | "stackId" | "teleportTo" | "transition">>>;
-    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-drawer-part": string;
         "data-state": "open" | "closed";
         class: string;
@@ -45,14 +45,14 @@ export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibD
         "aria-label": string | undefined;
         "aria-labelledby": string | undefined;
     }>>;
-    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-drawer-part": string;
         "data-state": "open" | "closed";
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {
         onClick: () => void;
     }>>;
-    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         onClick: (event: MouseEvent) => void;
     }>>;
     setPanelRef: (element: null | Element | ComponentPublicInstance) => void;