@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/floating/FloatingHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useFloatingContext } from "./FloatingRoot.vue_vue_type_script_setup_true_lang.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/floating/FloatingHeader.vue?vue&type=script&setup=true&lang.ts
+var FloatingHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "FloatingHeader",
+	inheritAttrs: false,
+	__name: "FloatingHeader",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { headerProps, state } = useFloatingContext();
+		const merged = usePartProps(headerProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { FloatingHeader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/floating/FloatingResizer.js

@@ -0,0 +1,5 @@
+import FloatingResizer_vue_vue_type_script_setup_true_lang_default from "./FloatingResizer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/floating/FloatingResizer.vue
+var FloatingResizer_default = FloatingResizer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FloatingResizer_default as default };

package/dist/components/floating/FloatingResizer.vue.d.ts

@@ -0,0 +1,25 @@
+import { type FloatingState, type FloatingHandle } from './FloatingRoot.vue';
+type __VLS_Props = {
+    /** The edge or corner it pulls, from `handles` in the root's slot. */
+    value: FloatingHandle;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The panel's state.
+     * @slotOnly The element carries its own edge or corner as `data-handle="…"`.
+     */
+    default(props: FloatingState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, 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/floating/FloatingResizer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useFloatingContext } from "./FloatingRoot.vue_vue_type_script_setup_true_lang.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/floating/FloatingResizer.vue?vue&type=script&setup=true&lang.ts
+var FloatingResizer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "FloatingResizer",
+	inheritAttrs: false,
+	__name: "FloatingResizer",
+	props: {
+		value: {},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const floating = useFloatingContext();
+		const merged = usePartProps(() => floating.getResizerProps(props.value));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(floating).state.value)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { FloatingResizer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/floating/FloatingRoot.js

@@ -0,0 +1,5 @@
+import FloatingRoot_vue_vue_type_script_setup_true_lang_default, { provideFloatingContext, useFloatingContext } from "./FloatingRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/floating/FloatingRoot.vue
+var FloatingRoot_default = FloatingRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FloatingRoot_default as default, provideFloatingContext, useFloatingContext };

package/dist/components/floating/FloatingRoot.vue.d.ts

@@ -0,0 +1,152 @@
+import { type ComputedRef, type Ref } from 'vue';
+import { type RegisterId } from '../../shared/labeling';
+import { type TransitionStatus } from '../../shared/use-transition-status';
+export type FloatingResize = 'none' | 'x' | 'y' | 'both';
+export type FloatingHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
+export interface FloatingAnchor {
+    side: 'left' | 'right' | 'top' | 'bottom';
+    offset: number;
+}
+export interface FloatingState {
+    /**
+     * Whether the panel is open.
+     * @attribute `data-open` while open, `data-closed` otherwise
+     */
+    open: boolean;
+    /**
+     * Where the panel is in its enter or exit animation.
+     * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+     */
+    transitionStatus: TransitionStatus;
+    /** Which edges may be pulled. */
+    resize: FloatingResize;
+    /** Whether the header is being dragged. */
+    dragging: boolean;
+    /** Whether an edge is being pulled. */
+    resizing: boolean;
+    /**
+     * The edge or corner being pulled, while resizing.
+     * @attribute `data-handle="…"` while resizing
+     */
+    handle: FloatingHandle | null;
+    /** Whether it has been dragged from where it opened; double-clicking the header puts it back. */
+    moved: boolean;
+    /**
+     * Its left edge, in pixels from the viewport's.
+     * @attribute none
+     */
+    left: number;
+    /**
+     * Its top edge, in pixels from the viewport's.
+     * @attribute none
+     */
+    top: number;
+    /**
+     * Its width once an edge has been pulled; `null` while its content decides.
+     * @attribute none
+     */
+    width: number | null;
+    /**
+     * Its height once an edge has been pulled; `null` while its content decides.
+     * @attribute none
+     */
+    height: number | null;
+}
+export interface FloatingContext {
+    state: ComputedRef<FloatingState>;
+    open: Ref<boolean>;
+    handles: ComputedRef<FloatingHandle[]>;
+    headerProps: ComputedRef<Record<string, unknown>>;
+    titleProps: ComputedRef<Record<string, unknown>>;
+    closeProps: ComputedRef<Record<string, unknown>>;
+    getResizerProps: (handle: FloatingHandle) => Record<string, unknown>;
+    registerTitle: RegisterId;
+    reset: () => void;
+}
+export declare const provideFloatingContext: (value: FloatingContext) => FloatingContext, useFloatingContext: () => FloatingContext;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Whether the panel is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Opens at first, when no `v-model:open` owns it. @default false */
+    defaultOpen?: boolean;
+    /** Which edges may be pulled. @default 'none' */
+    resize?: FloatingResize;
+    /** Keep the panel inside the viewport. @default true */
+    bounding?: boolean;
+    /** The narrowest a resize may make it, in pixels. @default 0 */
+    minWidth?: number;
+    /** The shortest a resize may make it, in pixels. @default 30 */
+    minHeight?: number;
+    /** The widest it may be, in pixels. */
+    maxWidth?: number;
+    /** The tallest it may be, in pixels. */
+    maxHeight?: number;
+    /** Its width at first, in pixels. Its content decides when not given. */
+    width?: number;
+    /** Its height at first, in pixels. Its content decides when not given. */
+    height?: number;
+    /** Opens this many pixels from the viewport's left edge, and keeps that distance as the window resizes. */
+    left?: number;
+    /** Opens this many pixels from the viewport's right edge, and keeps it. */
+    right?: number;
+    /** Opens this many pixels from the viewport's top edge, and keeps it. */
+    top?: number;
+    /** Opens this many pixels from the viewport's bottom edge, and keeps it. */
+    bottom?: number;
+}, FloatingContext, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drag: (left: number, top: number) => any;
+    resize: (width: number | null, height: number | null) => any;
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Whether the panel is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Opens at first, when no `v-model:open` owns it. @default false */
+    defaultOpen?: boolean;
+    /** Which edges may be pulled. @default 'none' */
+    resize?: FloatingResize;
+    /** Keep the panel inside the viewport. @default true */
+    bounding?: boolean;
+    /** The narrowest a resize may make it, in pixels. @default 0 */
+    minWidth?: number;
+    /** The shortest a resize may make it, in pixels. @default 30 */
+    minHeight?: number;
+    /** The widest it may be, in pixels. */
+    maxWidth?: number;
+    /** The tallest it may be, in pixels. */
+    maxHeight?: number;
+    /** Its width at first, in pixels. Its content decides when not given. */
+    width?: number;
+    /** Its height at first, in pixels. Its content decides when not given. */
+    height?: number;
+    /** Opens this many pixels from the viewport's left edge, and keeps that distance as the window resizes. */
+    left?: number;
+    /** Opens this many pixels from the viewport's right edge, and keeps it. */
+    right?: number;
+    /** Opens this many pixels from the viewport's top edge, and keeps it. */
+    top?: number;
+    /** Opens this many pixels from the viewport's bottom edge, and keeps it. */
+    bottom?: number;
+}> & Readonly<{
+    onDrag?: ((left: number, top: number) => any) | undefined;
+    onResize?: ((width: number | null, height: number | null) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    bounding: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /**
+     * The panel's state, and the resize handles to render.
+     * @slotOnly The root renders no element of its own: the popup carries these as attributes.
+     */
+    default(props: FloatingState & {
+        /** The edges and corners `resize` allows, one `FloatingResizer` each. */
+        handles: FloatingHandle[];
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/floating/FloatingRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,440 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { popupStateAttrs } from "../../shared/popup-state-attrs.js";
+import { useTransitionStatus } from "../../shared/use-transition-status.js";
+import { useExitAnimation } from "../../shared/use-exit-animation.js";
+import { useLabeling } from "../../shared/labeling.js";
+import { provideSurface } from "../../shared/surface.js";
+import { computed, defineComponent, guardReactiveProps, normalizeProps, onMounted, onScopeDispose, ref, renderSlot, watch } from "vue";
+//#region src/components/floating/FloatingRoot.vue?vue&type=script&setup=true&lang.ts
+var { provideContext: provideFloatingContext, useContext: useFloatingContext } = createContext("Floating");
+var HANDLES = {
+	none: [],
+	x: ["w", "e"],
+	y: ["n", "s"],
+	both: [
+		"nw",
+		"ne",
+		"sw",
+		"se",
+		"n",
+		"s",
+		"e",
+		"w"
+	]
+};
+var INTERACTIVE = "button, a, input, select, textarea, [contenteditable=\"true\"]";
+var DEFAULT_OFFSET = 100;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max ?? Infinity);
+}
+function smallest(limits) {
+	const known = limits.filter((limit) => limit !== void 0);
+	return known.length > 0 ? Math.min(...known) : void 0;
+}
+var FloatingRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "FloatingRoot",
+	__name: "FloatingRoot",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: { type: Boolean },
+		resize: {},
+		bounding: {
+			type: Boolean,
+			default: void 0
+		},
+		minWidth: {},
+		minHeight: {},
+		maxWidth: {},
+		maxHeight: {},
+		width: {},
+		height: {},
+		left: {},
+		right: {},
+		top: {},
+		bottom: {}
+	},
+	emits: [
+		"update:open",
+		"drag",
+		"resize"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const resize = () => props.resize ?? "none";
+		const bounding = () => props.bounding ?? true;
+		const minWidth = () => props.minWidth ?? 0;
+		const minHeight = () => props.minHeight ?? 30;
+		const open = useControlled({
+			value: () => props.open,
+			defaultValue: () => props.defaultOpen ?? false,
+			onChange: (next) => emit("update:open", next),
+			prop: "open",
+			empty: false,
+			name: "FloatingRoot",
+			label: "open"
+		});
+		const element = ref(null);
+		const { titleId, registerTitle } = useLabeling();
+		const left = ref(DEFAULT_OFFSET);
+		const top = ref(DEFAULT_OFFSET);
+		const width = ref(null);
+		const height = ref(null);
+		const anchorX = ref(null);
+		const anchorY = ref(null);
+		const dragging = ref(false);
+		const resizing = ref(false);
+		const handle = ref(null);
+		const moved = ref(false);
+		const handles = computed(() => HANDLES[resize()]);
+		const { mounted, transitionStatus, setMounted } = useTransitionStatus(() => open.value);
+		useExitAnimation({
+			open: () => open.value,
+			mounted,
+			setMounted,
+			element
+		});
+		function viewport() {
+			return typeof window === "undefined" ? {
+				width: 0,
+				height: 0
+			} : {
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+		}
+		function currentRect() {
+			const el = element.value;
+			if (!el) return {
+				left: left.value,
+				top: top.value,
+				width: width.value ?? 0,
+				height: height.value ?? 0
+			};
+			const rect = el.getBoundingClientRect();
+			return {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			};
+		}
+		function readProps() {
+			width.value = props.width ?? null;
+			height.value = props.height ?? null;
+			anchorX.value = props.left !== void 0 ? {
+				side: "left",
+				offset: props.left
+			} : props.right !== void 0 ? {
+				side: "right",
+				offset: props.right
+			} : {
+				side: "left",
+				offset: DEFAULT_OFFSET
+			};
+			anchorY.value = props.top !== void 0 ? {
+				side: "top",
+				offset: props.top
+			} : props.bottom !== void 0 ? {
+				side: "bottom",
+				offset: props.bottom
+			} : {
+				side: "top",
+				offset: DEFAULT_OFFSET
+			};
+		}
+		readProps();
+		if (anchorX.value?.side === "left") left.value = anchorX.value.offset;
+		if (anchorY.value?.side === "top") top.value = anchorY.value.offset;
+		const measured = ref(false);
+		onMounted(() => measured.value = true);
+		function widthLimit(atLeft = left.value) {
+			const limits = [props.maxWidth];
+			if (bounding() && measured.value) limits.push(anchorX.value?.side === "right" ? viewport().width - anchorX.value.offset : viewport().width - atLeft);
+			return smallest(limits);
+		}
+		function heightLimit(atTop = top.value) {
+			const limits = [props.maxHeight];
+			if (bounding() && measured.value) limits.push(anchorY.value?.side === "bottom" ? viewport().height - anchorY.value.offset : viewport().height - atTop);
+			return smallest(limits);
+		}
+		function resolveAnchors(boxWidth, boxHeight) {
+			const view = viewport();
+			return {
+				left: anchorX.value ? anchorX.value.side === "left" ? anchorX.value.offset : view.width - boxWidth - anchorX.value.offset : left.value,
+				top: anchorY.value ? anchorY.value.side === "top" ? anchorY.value.offset : view.height - boxHeight - anchorY.value.offset : top.value
+			};
+		}
+		function applyBounds(nextLeft, nextTop, boxWidth, boxHeight) {
+			let resolvedWidth = clamp(boxWidth, minWidth(), widthLimit(nextLeft));
+			let resolvedHeight = clamp(boxHeight, minHeight(), heightLimit(nextTop));
+			if (!bounding()) return {
+				left: nextLeft,
+				top: nextTop,
+				width: resolvedWidth,
+				height: resolvedHeight
+			};
+			const view = viewport();
+			const resolvedLeft = clamp(nextLeft, 0, Math.max(0, view.width - resolvedWidth));
+			const resolvedTop = clamp(nextTop, 0, Math.max(0, view.height - resolvedHeight));
+			if (resolvedLeft + resolvedWidth > view.width) resolvedWidth = view.width - resolvedLeft;
+			if (resolvedTop + resolvedHeight > view.height) resolvedHeight = view.height - resolvedTop;
+			return {
+				left: resolvedLeft,
+				top: resolvedTop,
+				width: Math.max(resolvedWidth, minWidth()),
+				height: Math.max(resolvedHeight, minHeight())
+			};
+		}
+		function syncBounds() {
+			if (dragging.value || resizing.value) return;
+			const rect = currentRect();
+			const boxWidth = width.value ?? rect.width;
+			const boxHeight = height.value ?? rect.height;
+			const resolved = resolveAnchors(boxWidth, boxHeight);
+			const next = applyBounds(resolved.left, resolved.top, boxWidth, boxHeight);
+			if (anchorX.value || anchorY.value || width.value !== null || height.value !== null) {
+				left.value = next.left;
+				top.value = next.top;
+			} else {
+				const view = viewport();
+				left.value = clamp(rect.left, 0, Math.max(0, view.width - rect.width));
+				top.value = clamp(rect.top, 0, Math.max(0, view.height - rect.height));
+			}
+			if (width.value !== null) width.value = next.width;
+			if (height.value !== null) height.value = next.height;
+		}
+		watch(() => [
+			props.left,
+			props.right,
+			props.top,
+			props.bottom,
+			props.width,
+			props.height
+		], () => {
+			readProps();
+			syncBounds();
+		});
+		function dropAnchors() {
+			anchorX.value = null;
+			anchorY.value = null;
+			moved.value = true;
+		}
+		function moveTo(rect, dx, dy) {
+			let nextLeft = rect.left + dx;
+			let nextTop = rect.top + dy;
+			if (bounding()) {
+				const view = viewport();
+				nextLeft = clamp(nextLeft, 0, Math.max(0, view.width - rect.width));
+				nextTop = clamp(nextTop, 0, Math.max(0, view.height - rect.height));
+			}
+			left.value = nextLeft;
+			top.value = nextTop;
+		}
+		function pull(target, rect, dx, dy) {
+			const horizontal = target.includes("e") || target.includes("w");
+			const vertical = target.includes("n") || target.includes("s");
+			const view = viewport();
+			const rightEdge = rect.left + rect.width;
+			const bottomEdge = rect.top + rect.height;
+			let nextLeft = rect.left;
+			let nextTop = rect.top;
+			let nextWidth = rect.width;
+			let nextHeight = rect.height;
+			if (target.includes("e")) {
+				const room = bounding() ? view.width - rect.left : Infinity;
+				nextWidth = clamp(rect.width + dx, minWidth(), Math.min(props.maxWidth ?? Infinity, room));
+			} else if (target.includes("w")) {
+				const room = bounding() ? rightEdge : Infinity;
+				nextWidth = clamp(rect.width - dx, minWidth(), Math.min(props.maxWidth ?? Infinity, room));
+				nextLeft = rightEdge - nextWidth;
+			}
+			if (target.includes("s")) {
+				const room = bounding() ? view.height - rect.top : Infinity;
+				nextHeight = clamp(rect.height + dy, minHeight(), Math.min(props.maxHeight ?? Infinity, room));
+			} else if (target.includes("n")) {
+				const room = bounding() ? bottomEdge : Infinity;
+				nextHeight = clamp(rect.height - dy, minHeight(), Math.min(props.maxHeight ?? Infinity, room));
+				nextTop = bottomEdge - nextHeight;
+			}
+			left.value = nextLeft;
+			top.value = nextTop;
+			if (horizontal) width.value = nextWidth;
+			if (vertical) height.value = nextHeight;
+		}
+		function pinFor(target, rect) {
+			if (target.includes("e") || target.includes("w")) width.value = rect.width;
+			if (target.includes("n") || target.includes("s")) height.value = rect.height;
+		}
+		function reset() {
+			readProps();
+			moved.value = false;
+			syncBounds();
+			emit("drag", left.value, top.value);
+			emit("resize", width.value, height.value);
+		}
+		function track(event, onMove, onEnd) {
+			const target = event.currentTarget;
+			const { pointerId, clientX, clientY } = event;
+			target.setPointerCapture?.(pointerId);
+			function onPointermove(move) {
+				if (move.pointerId === pointerId) onMove(move.clientX - clientX, move.clientY - clientY);
+			}
+			function finish(end) {
+				if (end.pointerId !== pointerId) return;
+				target.releasePointerCapture?.(pointerId);
+				target.removeEventListener("pointermove", onPointermove);
+				target.removeEventListener("pointerup", finish);
+				target.removeEventListener("pointercancel", finish);
+				onEnd();
+			}
+			target.addEventListener("pointermove", onPointermove);
+			target.addEventListener("pointerup", finish);
+			target.addEventListener("pointercancel", finish);
+		}
+		function onDragStart(event) {
+			if (event.button !== 0) return;
+			const target = event.target;
+			if (target && target !== event.currentTarget && target.closest(INTERACTIVE)) return;
+			event.preventDefault();
+			dropAnchors();
+			const rect = currentRect();
+			dragging.value = true;
+			track(event, (dx, dy) => moveTo(rect, dx, dy), () => {
+				dragging.value = false;
+				emit("drag", left.value, top.value);
+			});
+		}
+		function onResizeStart(event, target) {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			dropAnchors();
+			const rect = currentRect();
+			pinFor(target, rect);
+			resizing.value = true;
+			handle.value = target;
+			track(event, (dx, dy) => pull(target, rect, dx, dy), () => {
+				resizing.value = false;
+				handle.value = null;
+				emit("resize", width.value, height.value);
+			});
+		}
+		let observer = null;
+		if (typeof ResizeObserver !== "undefined") observer = new ResizeObserver(syncBounds);
+		if (typeof window !== "undefined") window.addEventListener("resize", syncBounds);
+		watch(element, (el, _previous, onCleanup) => {
+			if (!el) return;
+			syncBounds();
+			observer?.observe(el);
+			onCleanup(() => observer?.unobserve(el));
+		}, { flush: "post" });
+		onScopeDispose(() => {
+			if (typeof window !== "undefined") window.removeEventListener("resize", syncBounds);
+			observer?.disconnect();
+		});
+		const state = computed(() => ({
+			open: open.value,
+			transitionStatus: transitionStatus.value,
+			resize: resize(),
+			dragging: dragging.value,
+			resizing: resizing.value,
+			handle: handle.value,
+			moved: moved.value,
+			left: left.value,
+			top: top.value,
+			width: width.value,
+			height: height.value
+		}));
+		const STATE_ATTRS = {
+			...popupStateAttrs,
+			left: () => null,
+			top: () => null,
+			width: () => null,
+			height: () => null,
+			handle: (value) => value ? { "data-handle": value } : null
+		};
+		const popupProps = computed(() => {
+			const capWidth = width.value === null ? widthLimit() : void 0;
+			const capHeight = height.value === null ? heightLimit() : void 0;
+			return {
+				"data-part": "floating",
+				...dataAttrs(state.value, STATE_ATTRS),
+				ref: (el) => {
+					element.value = el ?? null;
+				},
+				role: titleId.value ? "dialog" : void 0,
+				"aria-labelledby": titleId.value,
+				style: {
+					position: "fixed",
+					left: "0px",
+					top: "0px",
+					transform: `translate(${left.value}px, ${top.value}px)`,
+					width: width.value === null ? void 0 : `${width.value}px`,
+					height: height.value === null ? void 0 : `${height.value}px`,
+					maxWidth: capWidth === void 0 ? void 0 : `${capWidth}px`,
+					maxHeight: capHeight === void 0 ? void 0 : `${capHeight}px`,
+					...dragging.value || resizing.value ? { transition: "none" } : null
+				}
+			};
+		});
+		const headerProps = computed(() => ({
+			"data-part": "header",
+			style: { touchAction: "none" },
+			onPointerdown: onDragStart,
+			onDblclick: reset
+		}));
+		const titleProps = computed(() => ({ "data-part": "title" }));
+		const closeProps = computed(() => ({
+			"data-part": "close",
+			type: "button",
+			"aria-label": "Close",
+			onClick() {
+				open.value = false;
+			}
+		}));
+		function getResizerProps(target) {
+			return {
+				"data-part": "resizer",
+				"data-handle": target,
+				"aria-hidden": true,
+				style: { touchAction: "none" },
+				onPointerdown(event) {
+					onResizeStart(event, target);
+				}
+			};
+		}
+		const api = {
+			state,
+			open,
+			handles,
+			headerProps,
+			titleProps,
+			closeProps,
+			getResizerProps,
+			registerTitle,
+			reset
+		};
+		provideFloatingContext(api);
+		provideSurface({
+			present: mounted,
+			state,
+			popupProps
+		});
+		__expose(api);
+		const slotProps = computed(() => ({
+			...state.value,
+			handles: handles.value
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+		};
+	}
+});
+//#endregion
+export { FloatingRoot_vue_vue_type_script_setup_true_lang_default as default, provideFloatingContext, useFloatingContext };

package/dist/components/floating/FloatingTitle.js

@@ -0,0 +1,5 @@
+import FloatingTitle_vue_vue_type_script_setup_true_lang_default from "./FloatingTitle.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/floating/FloatingTitle.vue
+var FloatingTitle_default = FloatingTitle_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FloatingTitle_default as default };