@hina-ui/vue 1.4.0 → 1.5.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, Accord
 import { ArrowLeft, ArrowRight, CalendarClock, CalendarDays, CalendarRange, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, CircleCheck, CircleX, Copy, Download, Eye, EyeOff, File, Inbox, Info, Lightbulb, Megaphone, Minus, MoreHorizontal, PanelLeft, RotateCw, Scan, Search, Shrink, Star, TrendingDown, TrendingUp, TriangleAlert, Upload, User, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { Motion, animate, useMotionValue, useTransform } from "motion-v";
 import { OverlayScrollbars } from "overlayscrollbars";
-import { createSharedComposable, useDocumentVisibility, useEventListener, useIntersectionObserver, useIntervalFn, useMediaQuery, useMutationObserver, useRafFn, useResizeObserver } from "@vueuse/core";
+import { createSharedComposable, defaultDocument, useDocumentVisibility, useEventListener, useIntersectionObserver, useIntervalFn, useMediaQuery, useMutationObserver, useRafFn, useResizeObserver } from "@vueuse/core";
 import { CalendarDate, CalendarDateTime, Time, getLocalTimeZone, parseDate, parseDateTime, parseTime, today } from "@internationalized/date";
 //#region src/lib/tw-merge.ts
 var TW_MERGE_CONFIG = { extend: {
@@ -5136,11 +5136,11 @@ var _hoisted_1$83 = {
 var _hoisted_2$40 = { class: "hn-collapse-body" };
 var _hoisted_3$19 = ["role"];
 var _hoisted_4$15 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_5$10 = {
+var _hoisted_5$11 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
-var _hoisted_6$7 = {
+var _hoisted_6$8 = {
 	key: 0,
 	class: "flex shrink-0 items-center gap-2 self-center"
 };
@@ -5193,8 +5193,8 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_4$15, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$10, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
-					unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_6$7, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_4$15, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$11, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+					unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_6$8, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
 					props.closable ? (openBlock(), createBlock(CloseButton_default, {
 						key: 1,
 						size: "sm",
@@ -6739,13 +6739,13 @@ var _hoisted_3$18 = {
 	class: "text-muted block truncate text-xs"
 };
 var _hoisted_4$14 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$9 = { class: "min-w-0 flex-1" };
-var _hoisted_6$6 = { class: "block truncate" };
-var _hoisted_7$4 = {
+var _hoisted_5$10 = { class: "min-w-0 flex-1" };
+var _hoisted_6$7 = { class: "block truncate" };
+var _hoisted_7$5 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$3 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/select/SelectList.vue
 var SelectList_default = /* @__PURE__ */ defineComponent({
@@ -6814,9 +6814,9 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 									class: normalizeClass(unref(selectItem)())
 								}, {
 									default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$6, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
+										default: withCtx(() => [createElementVNode("span", _hoisted_5$10, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
 										_: 2
-									}, 1024), createElementVNode("span", _hoisted_8$2, [createVNode(unref(SelectItemIndicator), null, {
+									}, 1024), createElementVNode("span", _hoisted_8$3, [createVNode(unref(SelectItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -7420,7 +7420,7 @@ var _hoisted_4$13 = [
 	"inert",
 	"data-disabled"
 ];
-var _hoisted_5$8 = {
+var _hoisted_5$9 = {
 	key: 1,
 	class: "flex max-w-full flex-wrap items-center gap-3"
 };
@@ -7515,7 +7515,7 @@ var Pagination_default = /* @__PURE__ */ defineComponent({
 						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "ellipsis", normalizeProps(guardReactiveProps(slotProps)))]),
 						key: "1"
 					} : void 0]), 1024),
-					props.pageSizeOptions?.length || props.showJump ? (openBlock(), createElementBlock("div", _hoisted_5$8, [props.pageSizeOptions?.length ? (openBlock(), createBlock(PaginationSize_default, { key: 0 })) : createCommentVNode("", true), props.showJump ? (openBlock(), createBlock(PaginationJump_default, { key: 1 })) : createCommentVNode("", true)])) : createCommentVNode("", true)
+					props.pageSizeOptions?.length || props.showJump ? (openBlock(), createElementBlock("div", _hoisted_5$9, [props.pageSizeOptions?.length ? (openBlock(), createBlock(PaginationSize_default, { key: 0 })) : createCommentVNode("", true), props.showJump ? (openBlock(), createBlock(PaginationJump_default, { key: 1 })) : createCommentVNode("", true)])) : createCommentVNode("", true)
 				])], 10, _hoisted_4$13)]),
 				_: 3
 			}, 8, [
@@ -8903,13 +8903,13 @@ var _hoisted_3$15 = {
 	class: "text-muted block truncate text-xs"
 };
 var _hoisted_4$11 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$7 = { class: "min-w-0 flex-1" };
-var _hoisted_6$5 = { class: "block truncate" };
-var _hoisted_7$3 = {
+var _hoisted_5$8 = { class: "min-w-0 flex-1" };
+var _hoisted_6$6 = { class: "block truncate" };
+var _hoisted_7$4 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/combobox/ComboboxList.vue
 var ComboboxList_default = /* @__PURE__ */ defineComponent({
@@ -8974,7 +8974,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 									disabled: item.disabled,
 									class: normalizeClass(unref(selectItem)())
 								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_5$7, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$3, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$1, [createVNode(unref(ComboboxItemIndicator), null, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_5$8, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$6, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$2, [createVNode(unref(ComboboxItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -9195,7 +9195,7 @@ var _hoisted_1$66 = { class: "truncate" };
 var _hoisted_2$31 = ["textContent"];
 var _hoisted_3$14 = ["textContent"];
 var _hoisted_4$10 = ["textContent"];
-var _hoisted_5$6 = {
+var _hoisted_5$7 = {
 	key: 0,
 	class: "text-muted truncate text-xs"
 };
@@ -9247,7 +9247,7 @@ var CommandPaletteItem_default = /* @__PURE__ */ defineComponent({
 							key: 1,
 							textContent: toDisplayString(parts.value[2])
 						}, null, 8, _hoisted_4$10)) : createCommentVNode("", true)
-					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
+					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$7, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
 					props.match.item.kbd?.length ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						class: normalizeClass(unref(commandItemHint)())
@@ -9990,13 +9990,13 @@ var _hoisted_4$8 = {
 	key: 1,
 	class: "size-5 shrink-0"
 };
-var _hoisted_5$5 = { class: "min-w-0 flex-1" };
-var _hoisted_6$4 = { class: "block truncate" };
-var _hoisted_7$2 = {
+var _hoisted_5$6 = { class: "min-w-0 flex-1" };
+var _hoisted_6$5 = { class: "block truncate" };
+var _hoisted_7$3 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_9 = { role: "status" };
 //#endregion
 //#region src/components/tree-select/TreeSelect.vue
@@ -10135,8 +10135,8 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 													direction: "end",
 													open: isExpanded
 												}, null, 8, ["open"])], 10, _hoisted_3$12)) : (openBlock(), createElementBlock("span", _hoisted_4$8)),
-												createElementVNode("span", _hoisted_5$5, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_6$4, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
-												createElementVNode("span", _hoisted_8, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
+												createElementVNode("span", _hoisted_5$6, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_7$3, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
+												createElementVNode("span", _hoisted_8$1, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
 										}, 1040, [
@@ -14677,6 +14677,59 @@ var Popconfirm_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/lib/overlay-anchor.ts
+function overlayAnchorElement(anchor) {
+	return anchor && "nodeType" in anchor ? anchor : void 0;
+}
+function overlayAnchorContext(anchor) {
+	return overlayAnchorElement(anchor) ?? (anchor && "contextElement" in anchor ? anchor.contextElement : void 0);
+}
+function useOverlayAnchor(source, open, present, strategy) {
+	const reference = shallowRef();
+	let current;
+	watch([
+		source,
+		open,
+		present,
+		strategy
+	], ([anchor, active, mounted]) => {
+		if (!mounted) {
+			current = void 0;
+			reference.value = void 0;
+			return;
+		}
+		if (!anchor || !active && reference.value && anchor !== current) return;
+		const contextElement = overlayAnchorContext(anchor);
+		if (contextElement && !contextElement.isConnected) return;
+		current = anchor;
+		const measure = () => {
+			const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect();
+			return {
+				x,
+				y,
+				width,
+				height,
+				top,
+				right,
+				bottom,
+				left
+			};
+		};
+		let rect = measure();
+		reference.value = {
+			contextElement,
+			getBoundingClientRect: () => {
+				if (source() === anchor && (!contextElement || contextElement.isConnected)) rect = measure();
+				return rect;
+			}
+		};
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return reference;
+}
+//#endregion
 //#region src/lib/overlay-positioner.ts
 function useOverlayPositionerClass(content, className) {
 	watchEffect((onCleanup) => {
@@ -14698,12 +14751,12 @@ function useHoverCardAnchor(props) {
 		onDismiss: root.onDismiss
 	};
 	const anchor = computed(() => props.external ? props.anchor ?? void 0 : void 0);
+	const element = computed(() => overlayAnchorElement(anchor.value));
+	const virtual = computed(() => !!anchor.value && !element.value);
 	const { content, present } = useOverlayPortal(root.open);
 	useOverlayPositionerClass(content, () => props.positionerClass);
 	const panel = computed(() => props.external ? content.value?.$el : void 0);
-	const liveAnchor = shallowRef();
-	const retained = shallowRef();
-	const reference = computed(() => props.external ? liveAnchor.value ?? retained.value : void 0);
+	const reference = useOverlayAnchor(() => props.external ? anchor.value : root.triggerElement.value, root.open, present, () => props.updatePositionStrategy);
 	let timer;
 	let tracking = false;
 	function cancel() {
@@ -14716,7 +14769,7 @@ function useHoverCardAnchor(props) {
 		root.onOpenChange(false);
 	}
 	function close() {
-		if (timer !== void 0 || !root.open.value || root.hasSelectionRef.value || root.isPointerDownOnContentRef.value) return;
+		if (virtual.value || timer !== void 0 || !root.open.value || root.hasSelectionRef.value || root.isPointerDownOnContentRef.value) return;
 		timer = setTimeout(dismiss, props.closeDelay);
 	}
 	function keep() {
@@ -14727,8 +14780,8 @@ function useHoverCardAnchor(props) {
 		const pointer = event;
 		if (!root.open.value || !tracking || pointer.pointerType === "touch") return;
 		const target = pointer.target;
-		if (target && (anchor.value?.contains(target) || panel.value?.contains(target))) return keep();
-		const a = anchor.value?.getBoundingClientRect();
+		if (target && (element.value?.contains(target) || panel.value?.contains(target))) return keep();
+		const a = element.value?.getBoundingClientRect();
 		const b = panel.value?.getBoundingClientRect();
 		if (a && b && inPointerCorridor({
 			x: pointer.clientX,
@@ -14738,9 +14791,9 @@ function useHoverCardAnchor(props) {
 	}
 	function leave(event) {
 		const pointer = event;
-		if (pointer.pointerType === "touch" || !root.open.value) return;
+		if (virtual.value || pointer.pointerType === "touch" || !root.open.value) return;
 		tracking = true;
-		const a = anchor.value?.getBoundingClientRect();
+		const a = element.value?.getBoundingClientRect();
 		const b = panel.value?.getBoundingClientRect();
 		if (a && b && inPointerCorridor({
 			x: pointer.clientX,
@@ -14749,19 +14802,11 @@ function useHoverCardAnchor(props) {
 		else close();
 	}
 	function measure() {
-		const element = anchor.value;
-		if (!element?.isConnected) {
-			liveAnchor.value = void 0;
+		if (!anchor.value || element.value && !element.value.isConnected) {
 			if (root.open.value) dismiss();
 			return;
 		}
-		liveAnchor.value = element;
-		const rect = element.getBoundingClientRect();
-		const previous = retained.value?.getBoundingClientRect();
-		if (!previous || retained.value?.contextElement !== element || rect.x !== previous.x || rect.y !== previous.y || rect.width !== previous.width || rect.height !== previous.height) retained.value = {
-			getBoundingClientRect: () => rect,
-			contextElement: element
-		};
+		reference.value?.getBoundingClientRect();
 	}
 	const { pause, resume } = useRafFn(measure, { immediate: false });
 	root.onOpen = () => props.external ? keep() : original.onOpen();
@@ -14775,32 +14820,29 @@ function useHoverCardAnchor(props) {
 		cancel();
 		tracking = false;
 		pause();
-		if (!props.external || !mounted) {
-			liveAnchor.value = void 0;
-			return;
-		}
+		if (!props.external || !mounted) return;
 		if (element !== previous?.[0]) {
 			root.hasSelectionRef.value = false;
 			root.isPointerDownOnContentRef.value = false;
 		}
 		measure();
-		resume();
+		if (!virtual.value) resume();
 	}, {
 		immediate: true,
 		flush: "post"
 	});
-	useEventListener(anchor, "pointerenter", keep);
-	useEventListener(anchor, "pointerleave", leave);
-	useEventListener(anchor, "focusin", keep);
-	useEventListener(anchor, "focusout", (event) => {
+	useEventListener(element, "pointerenter", keep);
+	useEventListener(element, "pointerleave", leave);
+	useEventListener(element, "focusin", keep);
+	useEventListener(element, "focusout", (event) => {
 		const target = event.relatedTarget;
-		if (!target || !anchor.value?.contains(target) && !panel.value?.contains(target)) close();
+		if (!target || !element.value?.contains(target) && !panel.value?.contains(target)) close();
 	});
 	useEventListener(panel, "pointerenter", keep);
 	useEventListener(panel, "pointerleave", leave);
-	useEventListener(() => anchor.value?.ownerDocument, "pointermove", track);
-	useEventListener(() => anchor.value?.ownerDocument, "scroll", (event) => {
-		if (root.open.value && event.target?.contains(anchor.value ?? null)) dismiss();
+	useEventListener(() => element.value?.ownerDocument, "pointermove", track);
+	useEventListener(() => element.value?.ownerDocument, "scroll", (event) => {
+		if (root.open.value && event.target?.contains(element.value ?? null)) dismiss();
 	}, {
 		capture: true,
 		passive: true
@@ -14811,7 +14853,6 @@ function useHoverCardAnchor(props) {
 	});
 	function contentRef(value) {
 		content.value = value;
-		if (!value && !root.open.value) retained.value = void 0;
 	}
 	return {
 		reference,
@@ -14826,6 +14867,7 @@ var HoverCardAnchor_default = /* @__PURE__ */ defineComponent({
 	__name: "HoverCardAnchor",
 	props: {
 		anchor: {},
+		updatePositionStrategy: {},
 		external: { type: Boolean },
 		closeDelay: {},
 		positionerClass: {}
@@ -14848,6 +14890,7 @@ var HoverCard_default = /* @__PURE__ */ defineComponent({
 	__name: "HoverCard",
 	props: /*@__PURE__*/ mergeModels({
 		anchor: {},
+		updatePositionStrategy: { default: "optimized" },
 		side: { default: "bottom" },
 		align: { default: "center" },
 		sideOffset: { default: 8 },
@@ -14882,6 +14925,7 @@ var HoverCard_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				})) : createCommentVNode("", true), createVNode(HoverCardAnchor_default, {
 					anchor: props.anchor,
+					"update-position-strategy": props.updatePositionStrategy,
 					external: !_ctx.$slots.default,
 					"close-delay": props.closeDelay,
 					"positioner-class": props.positionerClass
@@ -14889,6 +14933,7 @@ var HoverCard_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(({ reference, contentRef, present }) => [present ? (openBlock(), createBlock(unref(HoverCardPortal), { key: 0 }, {
 						default: withCtx(() => [createVNode(unref(HoverCardContent), {
 							reference,
+							"update-position-strategy": props.updatePositionStrategy,
 							"as-child": "",
 							side: props.side,
 							align: props.align,
@@ -14911,6 +14956,7 @@ var HoverCard_default = /* @__PURE__ */ defineComponent({
 							_: 2
 						}, 1032, [
 							"reference",
+							"update-position-strategy",
 							"side",
 							"align",
 							"side-offset"
@@ -14920,6 +14966,7 @@ var HoverCard_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				}, 8, [
 					"anchor",
+					"update-position-strategy",
 					"external",
 					"close-delay",
 					"positioner-class"
@@ -15260,6 +15307,15 @@ var ContextMenuRadioItem_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/lib/scroll-viewport.ts
+function useScrollViewport() {
+	const scrollArea = shallowRef(null);
+	return {
+		scrollArea,
+		viewport: computed(() => scrollArea.value?.viewport)
+	};
+}
+//#endregion
 //#region src/components/sheet/composables/useDragToDismiss.ts
 var DISTANCE_RATIO = .3;
 var FLICK_VELOCITY = .6;
@@ -15315,23 +15371,63 @@ function useDragToDismiss(panel, options) {
 }
 //#endregion
 //#region src/components/sheet/sheet.variants.ts
-var sheetPanel = tv({ base: [
-	"hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)",
-	"mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col gap-4 sm:max-w-xl",
-	"rounded-t-xl rounded-b-none border-b-0 pt-2 shadow-lg outline-none",
-	"pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]",
-	"data-dragging:transition-none"
-] });
-var sheetGrip = tv({ base: "flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing" });
-var sheetHandle = tv({ base: "bg-line-strong hn-transition-base mx-auto mb-3 h-1.5 w-10 rounded-full data-disabled:opacity-50" });
+var sheetPanel = tv({
+	base: [
+		"hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)",
+		"mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col sm:max-w-xl",
+		"rounded-t-xl rounded-b-none border-b-0 shadow-lg outline-none",
+		"data-dragging:transition-none"
+	],
+	variants: {
+		padded: { true: "gap-4 pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]" },
+		grip: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		padded: true,
+		grip: true,
+		class: "pt-2"
+	}, {
+		padded: true,
+		grip: false,
+		class: "pt-(--hn-panel-p)"
+	}],
+	defaultVariants: {
+		grip: true,
+		padded: true
+	}
+});
+var sheetGrip = tv({
+	base: "flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing",
+	variants: { standalone: { true: "py-2" } }
+});
+var sheetHandle = tv({
+	base: "bg-line-strong hn-transition-base mx-auto h-1.5 w-10 rounded-full data-disabled:opacity-50",
+	variants: { header: {
+		true: "mb-3",
+		false: ""
+	} },
+	defaultVariants: { header: true }
+});
 //#endregion
 //#region src/components/sheet/Sheet.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$40 = ["data-dragging"];
 var _hoisted_2$21 = ["data-disabled"];
-var _hoisted_3$9 = { class: "flex items-start justify-between gap-4 px-(--hn-panel-p)" };
+var _hoisted_3$9 = {
+	key: 1,
+	class: "flex items-start justify-between gap-4 px-(--hn-panel-p)"
+};
 var _hoisted_4$7 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_5$4 = { class: "px-(--hn-panel-p) py-1" };
-var _hoisted_6$3 = {
+var _hoisted_5$5 = { class: "flex min-w-0 items-center gap-2" };
+var _hoisted_6$4 = {
+	key: 0,
+	class: "text-muted flex shrink-0 [&_svg]:size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_7$2 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_8 = {
 	key: 1,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
 };
@@ -15343,6 +15439,14 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		title: {},
 		description: {},
+		header: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
 		handle: {
 			type: Boolean,
 			default: true
@@ -15357,11 +15461,13 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 		"openModifiers": {}
 	}),
 	emits: ["update:open"],
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
+		const slots = useSlots();
+		const { scrollArea, viewport } = useScrollViewport();
+		__expose({ viewport });
 		const open = useModel(__props, "open");
-		useUiLocale();
-		const panel = shallowRef(null);
+		const { content: panel, present } = useOverlayPortal(open);
 		const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
 			enabled: () => !props.locked,
 			open,
@@ -15388,42 +15494,64 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				})) : createCommentVNode("", true), createVNode(unref(DialogPortal), null, {
+				})) : createCommentVNode("", true), unref(present) ? (openBlock(), createBlock(unref(DialogPortal), { key: 1 }, {
 					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createVNode(unref(DialogContent), {
 						"as-child": "",
 						onEscapeKeyDown: guard,
 						onInteractOutside: guard
 					}, {
-						default: withCtx(() => [createVNode(Card_default, {
+						default: withCtx(() => [createVNode(Card_default, mergeProps({
 							ref_key: "panel",
-							ref: panel,
+							ref: panel
+						}, props.description ? {} : { "aria-describedby": void 0 }, {
 							"data-hn-sheet": "",
 							"data-dragging": unref(dragging) ? "" : void 0,
 							padded: false,
-							style: normalizeStyle(style.value),
-							class: normalizeClass(unref(cn)(unref(sheetPanel)(), props.class))
-						}, {
+							style: style.value,
+							class: unref(cn)(unref(sheetPanel)({
+								grip: props.header || props.handle,
+								padded: !slots.body
+							}), props.class)
+						}), {
 							default: withCtx(() => [
-								createElementVNode("div", {
+								!props.header || slots.body ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+									default: withCtx(() => [createVNode(Heading_default, {
+										level: 2,
+										class: "sr-only"
+									}, {
+										default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
+										_: 1
+									})]),
+									_: 1
+								}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+									key: 0,
+									class: "sr-only"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
+									_: 1
+								})) : createCommentVNode("", true)], 64)) : createCommentVNode("", true),
+								props.handle || props.header && !slots.body ? (openBlock(), createElementBlock("div", {
+									key: 1,
 									"data-hn-sheet-grip": "",
 									"data-dragging": unref(dragging) ? "" : void 0,
-									class: normalizeClass(unref(sheetGrip)()),
+									class: normalizeClass(unref(sheetGrip)({ standalone: !!slots.body })),
 									onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
 								}, [props.handle ? (openBlock(), createElementBlock("div", {
 									key: 0,
 									"aria-hidden": "true",
 									"data-disabled": props.locked ? "" : void 0,
-									class: normalizeClass(unref(sheetHandle)())
-								}, null, 10, _hoisted_2$21)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$9, [createElementVNode("div", _hoisted_4$7, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+									class: normalizeClass(unref(sheetHandle)({ header: props.header && !slots.body }))
+								}, null, 10, _hoisted_2$21)) : createCommentVNode("", true), props.header && !slots.body ? (openBlock(), createElementBlock("div", _hoisted_3$9, [createElementVNode("div", _hoisted_4$7, [createElementVNode("div", _hoisted_5$5, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_6$4, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
-										size: "lg"
+										size: "lg",
+										class: "min-w-0"
 									}, {
-										default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
-										_: 1
+										default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(props.title), 1)])]),
+										_: 3
 									})]),
-									_: 1
-								}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+									_: 3
+								})]), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
 									key: 0,
 									"as-child": ""
 								}, {
@@ -15432,7 +15560,7 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 										_: 1
 									})]),
 									_: 1
-								})) : createCommentVNode("", true)]), !props.handle ? (openBlock(), createBlock(unref(DialogClose), {
+								})) : createCommentVNode("", true)]), !props.handle && props.closable ? (openBlock(), createBlock(unref(DialogClose), {
 									key: 0,
 									"as-child": ""
 								}, {
@@ -15441,18 +15569,19 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 										class: "-mt-1.5 -me-1.5 shrink-0"
 									}, null, 8, ["disabled"])]),
 									_: 1
-								})) : createCommentVNode("", true)])], 42, _hoisted_1$40),
-								_ctx.$slots.content ? (openBlock(), createBlock(ScrollArea_default, {
+								})) : createCommentVNode("", true)])) : createCommentVNode("", true)], 42, _hoisted_1$40)) : createCommentVNode("", true),
+								slots.body ? renderSlot(_ctx.$slots, "body", { close }, void 0, void 0, 2) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [_ctx.$slots.content ? (openBlock(), createBlock(ScrollArea_default, {
 									key: 0,
+									ref_key: "scrollArea",
+									ref: scrollArea,
 									class: "min-h-0 grow"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_7$2, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
-								})) : createCommentVNode("", true),
-								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
+								}, 512)) : createCommentVNode("", true), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)], 64))
 							]),
 							_: 3
-						}, 8, [
+						}, 16, [
 							"data-dragging",
 							"style",
 							"class"
@@ -15460,7 +15589,7 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 						_: 3
 					})]),
 					_: 3
-				})]),
+				})) : createCommentVNode("", true)]),
 				_: 3
 			}, 8, ["open"]);
 		};
@@ -17094,12 +17223,12 @@ var _hoisted_1$26 = [
 var _hoisted_2$15 = ["id", "for"];
 var _hoisted_3$7 = ["id"];
 var _hoisted_4$5 = ["id"];
-var _hoisted_5$3 = {
+var _hoisted_5$4 = {
 	key: 0,
 	"data-hn-form-field-message": "",
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
 };
-var _hoisted_6$2 = { class: "hn-collapse-body" };
+var _hoisted_6$3 = { class: "hn-collapse-body" };
 var _hoisted_7$1 = ["id"];
 //#endregion
 //#region src/components/form-field/FormField.vue
@@ -17217,7 +17346,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 					"leave-from-class": "hn-collapse-open",
 					"leave-to-class": "hn-collapse-closed"
 				}, toHandlers(unref(hooks))), {
-					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, [createElementVNode("div", _hoisted_6$2, [createElementVNode("p", {
+					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [createElementVNode("div", _hoisted_6$3, [createElementVNode("p", {
 						id: unref(messageId),
 						class: normalizeClass(unref(formFieldMessage)()),
 						"aria-live": "polite"
@@ -19012,8 +19141,9 @@ var TooltipProvider_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/drawer/drawer.variants.ts
 var drawerCard = tv({
-	base: "",
+	base: ["hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col", "max-w-[calc(100vw-3rem)] rounded-none shadow-lg outline-none"],
 	variants: {
+		padded: { true: "gap-4 py-(--hn-panel-p)" },
 		side: {
 			start: "start-0",
 			end: "end-0"
@@ -19026,16 +19156,26 @@ var drawerCard = tv({
 	},
 	defaultVariants: {
 		side: "end",
-		size: "md"
+		size: "md",
+		padded: true
 	}
 });
 //#endregion
 //#region src/components/drawer/Drawer.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = { class: "flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)" };
+var _hoisted_1$15 = {
+	key: 0,
+	class: "flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)"
+};
 var _hoisted_2$11 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_3$5 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_3$5 = { class: "flex min-w-0 items-center gap-2" };
 var _hoisted_4$3 = {
-	key: 1,
+	key: 0,
+	class: "text-muted flex shrink-0 [&_svg]:size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_5$3 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_6$2 = {
+	key: 2,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
 };
 //#endregion
@@ -19048,6 +19188,14 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		description: {},
 		side: { default: "end" },
 		size: { default: "md" },
+		header: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
 		locked: {
 			type: Boolean,
 			default: false
@@ -19058,13 +19206,16 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		"openModifiers": {}
 	}),
 	emits: ["update:open"],
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
+		const slots = useSlots();
 		function guard(e) {
 			if (props.locked) e.preventDefault();
 		}
+		const { scrollArea, viewport } = useScrollViewport();
+		__expose({ viewport });
 		const open = useModel(__props, "open");
-		useUiLocale();
+		const { content, present } = useOverlayPortal(open);
 		function close() {
 			open.value = false;
 		}
@@ -19079,31 +19230,51 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				})) : createCommentVNode("", true), createVNode(unref(DialogPortal), null, {
+				})) : createCommentVNode("", true), unref(present) ? (openBlock(), createBlock(unref(DialogPortal), { key: 1 }, {
 					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createVNode(unref(DialogContent), {
 						"as-child": "",
 						onEscapeKeyDown: guard,
 						onInteractOutside: guard
 					}, {
-						default: withCtx(() => [createVNode(Card_default, {
+						default: withCtx(() => [createVNode(Card_default, mergeProps({
+							ref_key: "content",
+							ref: content
+						}, props.description ? {} : { "aria-describedby": void 0 }, {
 							"data-hn-side": props.side,
 							padded: false,
-							class: normalizeClass(unref(cn)("hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col gap-4", "max-w-[calc(100vw-3rem)] rounded-none py-(--hn-panel-p) shadow-lg outline-none", unref(drawerCard)({
+							class: unref(cn)(unref(drawerCard)({
 								side: props.side,
-								size: props.size
-							}), props.class))
-						}, {
-							default: withCtx(() => [
-								createElementVNode("div", _hoisted_1$15, [createElementVNode("div", _hoisted_2$11, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+								size: props.size,
+								padded: !slots.body
+							}), props.class)
+						}), {
+							default: withCtx(() => [!props.header || slots.body ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+								default: withCtx(() => [createVNode(Heading_default, {
+									level: 2,
+									class: "sr-only"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
+									_: 1
+								})]),
+								_: 1
+							}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+								key: 0,
+								class: "sr-only"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
+								_: 1
+							})) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), slots.body ? renderSlot(_ctx.$slots, "body", { close }, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+								props.header ? (openBlock(), createElementBlock("div", _hoisted_1$15, [createElementVNode("div", _hoisted_2$11, [createElementVNode("div", _hoisted_3$5, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_4$3, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
-										size: "lg"
+										size: "lg",
+										class: "min-w-0"
 									}, {
-										default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
-										_: 1
+										default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(props.title), 1)])]),
+										_: 3
 									})]),
-									_: 1
-								}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+									_: 3
+								})]), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
 									key: 0,
 									"as-child": ""
 								}, {
@@ -19112,28 +19283,33 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 										_: 1
 									})]),
 									_: 1
-								})) : createCommentVNode("", true)]), createVNode(unref(DialogClose), { "as-child": "" }, {
+								})) : createCommentVNode("", true)]), props.closable ? (openBlock(), createBlock(unref(DialogClose), {
+									key: 0,
+									"as-child": ""
+								}, {
 									default: withCtx(() => [createVNode(CloseButton_default, {
 										disabled: props.locked,
 										class: "-mt-1.5 -me-1.5 shrink-0"
 									}, null, 8, ["disabled"])]),
 									_: 1
-								})]),
+								})) : createCommentVNode("", true)])) : createCommentVNode("", true),
 								_ctx.$slots.content ? (openBlock(), createBlock(ScrollArea_default, {
-									key: 0,
+									key: 1,
+									ref_key: "scrollArea",
+									ref: scrollArea,
 									class: "min-h-0 grow"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_3$5, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
-								})) : createCommentVNode("", true),
-								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
-							]),
+								}, 512)) : createCommentVNode("", true),
+								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
+							], 64))]),
 							_: 3
-						}, 8, ["data-hn-side", "class"])]),
+						}, 16, ["data-hn-side", "class"])]),
 						_: 3
 					})]),
 					_: 3
-				})]),
+				})) : createCommentVNode("", true)]),
 				_: 3
 			}, 8, ["open"]);
 		};
@@ -19628,20 +19804,14 @@ var BreadcrumbSeparator_default = /* @__PURE__ */ defineComponent({
 //#region src/lib/anchored-overlay.ts
 function useAnchoredOverlay(props, open, emit, openAutoFocus) {
 	const { forwardRef: trigger, currentElement: triggerElement } = useForwardExpose();
-	const retainedAnchor = shallowRef();
-	const reference = computed(() => props.anchor ?? (open.value ? triggerElement.value ?? retainedAnchor.value : retainedAnchor.value ?? triggerElement.value));
 	const visible = computed({
 		get: () => !!open.value && !!(props.anchor || triggerElement.value),
 		set: (value) => {
 			open.value = value;
 		}
 	});
-	watch(() => props.anchor, (anchor) => {
-		if (anchor) retainedAnchor.value = anchor;
-	}, {
-		immediate: true,
-		flush: "sync"
-	});
+	const { content, present } = useOverlayPortal(visible);
+	const reference = useOverlayAnchor(() => props.anchor ?? triggerElement.value, visible, present, () => props.updatePositionStrategy);
 	let previousFocus = null;
 	let interactedOutside = false;
 	function once(handler) {
@@ -19654,7 +19824,7 @@ function useAnchoredOverlay(props, open, emit, openAutoFocus) {
 	}
 	watch(visible, (active) => {
 		if (!active) return;
-		previousFocus = (props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument)?.activeElement;
+		previousFocus = (overlayAnchorContext(props.anchor)?.ownerDocument ?? triggerElement.value?.ownerDocument ?? defaultDocument)?.activeElement;
 		interactedOutside = false;
 	}, {
 		immediate: true,
@@ -19670,11 +19840,10 @@ function useAnchoredOverlay(props, open, emit, openAutoFocus) {
 		nextTick(() => {
 			const active = panel.ownerDocument.activeElement;
 			if (restore && !visible.value && target?.isConnected && (active === panel.ownerDocument.body || panel.contains(active))) target.focus({ preventScroll: true });
-			if (!visible.value) retainedAnchor.value = void 0;
 		});
 	});
 	const onInteractOutside = once((event) => {
-		if (!triggerElement.value && props.anchor?.contains(event.target)) event.preventDefault();
+		if (!triggerElement.value && overlayAnchorElement(props.anchor)?.contains(event.target)) event.preventDefault();
 		emit("interactOutside", event);
 		const original = event.detail.originalEvent;
 		const rightClick = "button" in original && (original.button === 2 || original.button === 0 && original.ctrlKey);
@@ -19682,6 +19851,8 @@ function useAnchoredOverlay(props, open, emit, openAutoFocus) {
 	});
 	return {
 		trigger,
+		content,
+		present,
 		reference,
 		visible,
 		events: {
@@ -19702,6 +19873,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 	__name: "Popover",
 	props: /*@__PURE__*/ mergeModels({
 		anchor: {},
+		updatePositionStrategy: { default: "optimized" },
 		modal: {
 			type: Boolean,
 			default: true
@@ -19730,8 +19902,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const open = useModel(__props, "open");
 		const emit = __emit;
-		const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit, (event) => emit("openAutoFocus", event));
-		const { content, present } = useOverlayPortal(visible);
+		const { trigger, content, present, reference, visible, events } = useAnchoredOverlay(props, open, emit, (event) => emit("openAutoFocus", event));
 		const pressOrigin = computed(() => {
 			if (props.side === "left") return "right";
 			if (props.side === "right") return "left";
@@ -19759,6 +19930,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 						...unref(events)
 					}, {
 						reference: unref(reference),
+						"update-position-strategy": props.updatePositionStrategy,
 						"as-child": "",
 						side: props.side,
 						align: props.align,
@@ -19776,6 +19948,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 						_: 3
 					}, 16, [
 						"reference",
+						"update-position-strategy",
 						"side",
 						"align",
 						"side-offset"
@@ -19796,6 +19969,7 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		label: {},
 		anchor: {},
+		updatePositionStrategy: { default: "optimized" },
 		modal: {
 			type: Boolean,
 			default: true
@@ -19818,7 +19992,7 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 	], ["update:open"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const { trigger, reference, visible, events } = useAnchoredOverlay(props, useModel(__props, "open"), __emit);
+		const { trigger, content, present, reference, visible, events } = useAnchoredOverlay(props, useModel(__props, "open"), __emit);
 		const pressOrigin = computed(() => {
 			if (props.side === "left") return "right";
 			if (props.side === "right") return "left";
@@ -19842,19 +20016,22 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["style"])) : createCommentVNode("", true), createVNode(unref(DropdownMenuPortal), null, {
-					default: withCtx(() => [unref(reference) ? (openBlock(), createBlock(unref(DropdownMenuContent), mergeProps({ key: 0 }, {
+				}, 8, ["style"])) : createCommentVNode("", true), unref(present) ? (openBlock(), createBlock(unref(DropdownMenuPortal), { key: 1 }, {
+					default: withCtx(() => [createVNode(unref(DropdownMenuContent), mergeProps({
 						"aria-label": props.label,
 						..._ctx.$attrs,
 						...unref(events)
 					}, {
 						reference: unref(reference),
+						"update-position-strategy": props.updatePositionStrategy,
 						"as-child": "",
 						side: props.side,
 						align: props.align,
 						"side-offset": props.sideOffset
 					}), {
 						default: withCtx(() => [createVNode(Card_default, {
+							ref_key: "content",
+							ref: content,
 							padded: false,
 							class: normalizeClass(unref(cn)("hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none", props.class))
 						}, {
@@ -19864,12 +20041,13 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 						_: 3
 					}, 16, [
 						"reference",
+						"update-position-strategy",
 						"side",
 						"align",
 						"side-offset"
-					])) : createCommentVNode("", true)]),
+					])]),
 					_: 3
-				})]),
+				})) : createCommentVNode("", true)]),
 				_: 3
 			}, 8, [
 				"open",
@@ -20186,12 +20364,14 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		"openModifiers": {}
 	}),
 	emits: ["update:open"],
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const slots = useSlots();
 		function guard(e) {
 			if (props.locked) e.preventDefault();
 		}
+		const { scrollArea, viewport } = useScrollViewport();
+		__expose({ viewport });
 		const open = useModel(__props, "open");
 		const { content, present } = useOverlayPortal(open);
 		function close() {
@@ -20273,11 +20453,13 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 								})) : createCommentVNode("", true)])) : createCommentVNode("", true),
 								_ctx.$slots.content ? (openBlock(), createBlock(ScrollArea_default, {
 									key: 1,
+									ref_key: "scrollArea",
+									ref: scrollArea,
 									class: "min-h-0"
 								}, {
 									default: withCtx(() => [createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
-								})) : createCommentVNode("", true),
+								}, 512)) : createCommentVNode("", true),
 								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
 							], 64))]),
 							_: 3