@hina-ui/vue 1.2.0 → 1.3.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { createTV } from "tailwind-variants";
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toHandlers, toRef, toValue, unref, useAttrs, useId, useModel, useSlots, vModelDynamic, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarRoot, CheckboxGroupRoot, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DateRangeFieldInput, DateRangeFieldRoot, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerNext, MonthPickerPrev, MonthPickerRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, RatingItem, RatingItemIndicator, RatingRoot, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, Separator, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot, TimeFieldInput, TimeFieldRoot, ToastClose, ToastDescription, ToastPortal, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, VisuallyHidden, YearPickerCell, YearPickerCellTrigger, YearPickerGrid, YearPickerGridBody, YearPickerGridRow, YearPickerNext, YearPickerPrev, YearPickerRoot, injectListboxItemContext, injectTabsRootContext, injectTooltipProviderContext, useBodyScrollLock, useDirection, useForwardPropsEmits } from "reka-ui";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toHandlers, toRef, toValue, unref, useAttrs, useId, useModel, useSlots, vModelDynamic, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarRoot, CheckboxGroupRoot, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DateRangeFieldInput, DateRangeFieldRoot, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerNext, MonthPickerPrev, MonthPickerRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, RatingItem, RatingItemIndicator, RatingRoot, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, Separator, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot, TimeFieldInput, TimeFieldRoot, ToastClose, ToastDescription, ToastPortal, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, VisuallyHidden, YearPickerCell, YearPickerCellTrigger, YearPickerGrid, YearPickerGridBody, YearPickerGridRow, YearPickerNext, YearPickerPrev, YearPickerRoot, injectListboxItemContext, injectPopoverRootContext, injectTabsRootContext, injectTooltipProviderContext, useBodyScrollLock, useDirection, useForwardPropsEmits } from "reka-ui";
 import { ArrowLeft, ArrowRight, CalendarClock, CalendarDays, CalendarRange, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleCheck, CircleX, Copy, Download, Eye, EyeOff, File, Inbox, Info, Lightbulb, Megaphone, Minus, PanelLeft, RotateCw, Search, Shrink, Star, TrendingDown, TrendingUp, TriangleAlert, Upload, User, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { Motion, animate, useMotionValue, useTransform } from "motion-v";
 import { createSharedComposable, useDocumentVisibility, useEventListener, useIntersectionObserver, useIntervalFn, useMediaQuery, useMutationObserver } from "@vueuse/core";
@@ -674,7 +674,7 @@ var spinner = tv({
 });
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$95 = ["aria-label"];
+var _hoisted_1$94 = ["aria-label"];
 //#endregion
 //#region src/components/spinner/Spinner.vue
 var Spinner_default = /* @__PURE__ */ defineComponent({
@@ -694,13 +694,13 @@ var Spinner_default = /* @__PURE__ */ defineComponent({
 				"aria-label": props.label ?? unref(t).common.loading,
 				class: unref(cn)(unref(spinner)({ size: props.size })),
 				style: { animation: "hn-spin var(--hn-spin-duration) var(--hn-ease-linear) infinite" }
-			}), null, 16, _hoisted_1$95);
+			}), null, 16, _hoisted_1$94);
 		};
 	}
 });
 //#endregion
 //#region src/components/button/IconSlot.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$94 = {
+var _hoisted_1$93 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "absolute inset-0 inline-flex items-center justify-center"
@@ -724,7 +724,7 @@ var IconSlot_default$1 = /* @__PURE__ */ defineComponent({
 				"leave-active-class": "hn-transition",
 				"leave-to-class": "scale-90 opacity-0"
 			}, {
-				default: withCtx(() => [props.swapped ? (openBlock(), createElementBlock("span", _hoisted_1$94, [createVNode(Spinner_default, { size: props.spinnerSize }, null, 8, ["size"])])) : createCommentVNode("", true)]),
+				default: withCtx(() => [props.swapped ? (openBlock(), createElementBlock("span", _hoisted_1$93, [createVNode(Spinner_default, { size: props.spinnerSize }, null, 8, ["size"])])) : createCommentVNode("", true)]),
 				_: 1
 			})], 2);
 		};
@@ -920,7 +920,7 @@ function useRipple(container, surface, isDisabled) {
 }
 //#endregion
 //#region src/components/ripple/Ripple.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$93 = ["data-pressed"];
+var _hoisted_1$92 = ["data-pressed"];
 //#endregion
 //#region src/components/ripple/Ripple.vue
 var Ripple_default = /* @__PURE__ */ defineComponent({
@@ -943,13 +943,13 @@ var Ripple_default = /* @__PURE__ */ defineComponent({
 				ref: surface,
 				class: "hn-ripple-surface",
 				"data-pressed": unref(pressed) ? "" : void 0
-			}, null, 8, _hoisted_1$93)], 512);
+			}, null, 8, _hoisted_1$92)], 512);
 		};
 	}
 });
 //#endregion
 //#region src/components/button/Button.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$92 = {
+var _hoisted_1$91 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "absolute inset-0 flex items-center justify-center"
@@ -1060,7 +1060,7 @@ var Button_default = /* @__PURE__ */ defineComponent({
 						"leave-active-class": "hn-transition",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [props.loading && spinnerAt.value === "center" ? (openBlock(), createElementBlock("span", _hoisted_1$92, [createVNode(Spinner_default, { size: spinnerSize.value }, null, 8, ["size"])])) : createCommentVNode("", true)]),
+						default: withCtx(() => [props.loading && spinnerAt.value === "center" ? (openBlock(), createElementBlock("span", _hoisted_1$91, [createVNode(Spinner_default, { size: spinnerSize.value }, null, 8, ["size"])])) : createCommentVNode("", true)]),
 						_: 1
 					})
 				], 64))]),
@@ -1284,7 +1284,7 @@ function useCopy(text, onCopied, resetAfter = () => COPIED_RESET_MS) {
 }
 //#endregion
 //#region src/components/copy-button/CopyButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$91 = { class: "relative inline-flex size-[1em]" };
+var _hoisted_1$90 = { class: "relative inline-flex size-[1em]" };
 //#endregion
 //#region src/components/copy-button/CopyButton.vue
 var CopyButton_default = /* @__PURE__ */ defineComponent({
@@ -1316,7 +1316,7 @@ var CopyButton_default = /* @__PURE__ */ defineComponent({
 				class: props.class,
 				onClick: unref(copy)
 			}), {
-				default: withCtx(() => [createElementVNode("span", _hoisted_1$91, [createVNode(Transition, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$90, [createVNode(Transition, {
 					"enter-active-class": "hn-transition-base",
 					"enter-from-class": "scale-90 opacity-0",
 					"leave-active-class": "hn-transition",
@@ -1391,7 +1391,7 @@ var buttonGroup = tv({
 });
 //#endregion
 //#region src/components/button-group/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$90 = ["aria-label", "aria-orientation"];
+var _hoisted_1$89 = ["aria-label", "aria-orientation"];
 //#endregion
 //#region src/components/button-group/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ defineComponent({
@@ -1422,7 +1422,7 @@ var ButtonGroup_default = /* @__PURE__ */ defineComponent({
 					block: props.block,
 					divider: props.divider
 				}), props.class))
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$90);
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$89);
 		};
 	}
 });
@@ -1656,8 +1656,8 @@ var chipRemove = tv({
 });
 //#endregion
 //#region src/components/chip/IconSlot.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$89 = { class: "hn-collapse-body" };
-var _hoisted_2$45 = {
+var _hoisted_1$88 = { class: "hn-collapse-body" };
+var _hoisted_2$44 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "absolute inset-0 inline-flex items-center justify-center"
@@ -1678,7 +1678,7 @@ var IconSlot_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("span", {
 				"data-hn-icon": "",
 				class: normalizeClass(["hn-collapse-x", props.icon || props.checked ? "hn-collapse-open" : "hn-collapse-closed"])
-			}, [createElementVNode("span", _hoisted_1$89, [createElementVNode("span", { class: normalizeClass(unref(chipIcon)({ size: props.size })) }, [props.icon ? (openBlock(), createElementBlock("span", {
+			}, [createElementVNode("span", _hoisted_1$88, [createElementVNode("span", { class: normalizeClass(unref(chipIcon)({ size: props.size })) }, [props.icon ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(["hn-transition inline-flex items-center justify-center", props.checked ? "scale-90 opacity-0" : "scale-100 opacity-100"])
 			}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true), createVNode(Transition, {
@@ -1687,7 +1687,7 @@ var IconSlot_default = /* @__PURE__ */ defineComponent({
 				"leave-active-class": "hn-transition",
 				"leave-to-class": "scale-90 opacity-0"
 			}, {
-				default: withCtx(() => [props.checked ? (openBlock(), createElementBlock("span", _hoisted_2$45, [createVNode(unref(Check))])) : createCommentVNode("", true)]),
+				default: withCtx(() => [props.checked ? (openBlock(), createElementBlock("span", _hoisted_2$44, [createVNode(unref(Check))])) : createCommentVNode("", true)]),
 				_: 1
 			})], 2)])], 2);
 		};
@@ -1874,13 +1874,13 @@ var VisuallyHidden_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxStrip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$88 = [
+var _hoisted_1$87 = [
 	"src",
 	"alt",
 	"onLoad"
 ];
-var _hoisted_2$44 = ["src"];
-var _hoisted_3$22 = [
+var _hoisted_2$43 = ["src"];
+var _hoisted_3$21 = [
 	"src",
 	"alt",
 	"onLoad"
@@ -1941,7 +1941,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 							draggable: "false",
 							class: "block size-full object-contain",
 							onLoad: ($event) => emit("learn", slide.item.id, $event.target)
-						}, null, 40, _hoisted_1$88), createVNode(Transition, {
+						}, null, 40, _hoisted_1$87), createVNode(Transition, {
 							"enter-active-class": "hn-transition-base",
 							"enter-from-class": "opacity-0",
 							"leave-active-class": "hn-transition",
@@ -1954,7 +1954,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 								"aria-hidden": "true",
 								draggable: "false",
 								class: "absolute inset-0 size-full object-contain"
-							}, null, 8, _hoisted_2$44)) : createCommentVNode("", true)]),
+							}, null, 8, _hoisted_2$43)) : createCommentVNode("", true)]),
 							_: 1
 						})]),
 						_: 2
@@ -1976,7 +1976,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 							draggable: "false",
 							class: "block size-full object-contain",
 							onLoad: ($event) => emit("learn", slide.item.id, $event.target)
-						}, null, 40, _hoisted_3$22)]),
+						}, null, 40, _hoisted_3$21)]),
 						_: 2
 					}, 1032, [
 						"style",
@@ -2172,16 +2172,37 @@ function useLayerLock(viewport) {
 	onBeforeUnmount(() => release?.());
 }
 //#endregion
+//#region src/components/scroll-area/composables/useScrollFocus.ts
+function useScrollFocus(host, viewport, options) {
+	function attributes(enabled) {
+		const { focusable, label } = options();
+		return {
+			tabindex: enabled && focusable ? 0 : void 0,
+			role: enabled && focusable ? "region" : void 0,
+			"aria-label": enabled && focusable ? label : void 0
+		};
+	}
+	const hostFocus = computed(() => attributes(!viewport.value));
+	const viewportFocus = computed(() => attributes(!!viewport.value));
+	watch(viewport, async (element) => {
+		const target = host.value;
+		if (!element || !target || !options().focusable) return;
+		if (target.ownerDocument.activeElement !== target) return;
+		await nextTick();
+		const active = target.ownerDocument.activeElement;
+		if (options().focusable && element.isConnected && (active === target || active === target.ownerDocument.body)) element.focus({ preventScroll: true });
+	}, { flush: "sync" });
+	return {
+		hostFocus,
+		viewportFocus
+	};
+}
+//#endregion
 //#region src/components/scroll-area/ScrollArea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$87 = [
-	"tabindex",
-	"role",
-	"aria-label"
-];
-var _hoisted_2$43 = ["data-visible"];
-var _hoisted_3$21 = ["data-visible"];
+var _hoisted_1$86 = ["data-visible"];
+var _hoisted_2$42 = ["data-visible"];
+var _hoisted_3$20 = ["data-visible"];
 var _hoisted_4$15 = ["data-visible"];
-var _hoisted_5$11 = ["data-visible"];
 //#endregion
 //#region src/components/scroll-area/ScrollArea.vue
 var ScrollArea_default = /* @__PURE__ */ defineComponent({
@@ -2242,6 +2263,10 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 			};
 		}
 		const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options);
+		const { hostFocus, viewportFocus } = useScrollFocus(host, viewport, () => ({
+			focusable: props.focusable,
+			label: props.label ?? t.value.scroll.regionLabel
+		}));
 		const { showXStart, showXEnd, showYStart, showYEnd, updateEdges } = useEdgeShadow(viewport, () => ({
 			direction: props.direction,
 			shadow: props.shadow
@@ -2264,62 +2289,80 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("hn-scroll-area relative flex flex-col overflow-hidden", props.class)) }, [createElementVNode("div", mergeProps({
 				ref_key: "host",
 				ref: host
-			}, _ctx.$attrs, {
+			}, {
+				..._ctx.$attrs,
+				...unref(hostFocus)
+			}, {
 				"data-overlayscrollbars-initialize": "",
-				tabindex: props.focusable ? 0 : void 0,
-				role: props.focusable ? "region" : void 0,
-				"aria-label": props.focusable ? props.label ?? unref(t).scroll.regionLabel : void 0,
 				class: "w-full min-h-0 grow"
-			}), [createElementVNode("div", {
+			}), [createElementVNode("div", mergeProps({
 				ref_key: "content",
-				ref: content,
-				"data-overlayscrollbars-contents": ""
-			}, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$87), props.shadow ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				ref: content
+			}, unref(viewportFocus), { "data-overlayscrollbars-contents": "" }), [renderSlot(_ctx.$slots, "default")], 16)], 16), props.shadow ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				props.direction !== "vertical" ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: "hn-scroll-shadow",
 					"data-side": "x-start",
 					"data-visible": unref(showXStart) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_2$43)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_1$86)) : createCommentVNode("", true),
 				props.direction !== "vertical" ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: "hn-scroll-shadow",
 					"data-side": "x-end",
 					"data-visible": unref(showXEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_3$21)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_2$42)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					class: "hn-scroll-shadow",
 					"data-side": "y-start",
 					"data-visible": unref(showYStart) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_4$15)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_3$20)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 3,
 					class: "hn-scroll-shadow",
 					"data-side": "y-end",
 					"data-visible": unref(showYEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_5$11)) : createCommentVNode("", true)
+				}, null, 8, _hoisted_4$15)) : createCommentVNode("", true)
 			], 64)) : createCommentVNode("", true)], 2);
 		};
 	}
 });
 //#endregion
+//#region src/components/highlight/composables/useHighlightMotion.ts
+function useHighlightMotion(axis) {
+	return {
+		transition: computed(() => prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout),
+		transformTemplate: computed(() => {
+			const direction = axis();
+			if (direction === "both") return void 0;
+			return (_, generated) => {
+				if (!generated || generated === "none" || typeof DOMMatrix === "undefined") return generated;
+				const matrix = new DOMMatrix(generated);
+				if (direction === "x") matrix.m42 = 0;
+				else matrix.m41 = 0;
+				return matrix.toString();
+			};
+		})
+	};
+}
+//#endregion
 //#region src/components/highlight/Highlight.vue
 var Highlight_default = /* @__PURE__ */ defineComponent({
 	name: "HnHighlight",
 	__name: "Highlight",
 	props: {
 		id: { default: void 0 },
+		axis: { default: "both" },
 		as: { default: "div" },
 		class: {}
 	},
 	setup(__props) {
 		const props = __props;
-		const transition = computed(() => prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout);
+		const { transition, transformTemplate } = useHighlightMotion(() => props.axis);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Motion), {
 				as: props.as,
@@ -2327,12 +2370,14 @@ var Highlight_default = /* @__PURE__ */ defineComponent({
 				"layout-id": props.id,
 				"aria-hidden": "true",
 				"data-hn-highlight": "",
-				transition: transition.value,
+				transition: unref(transition),
+				"transform-template": unref(transformTemplate),
 				class: normalizeClass(unref(cn)("pointer-events-none", props.class))
 			}, null, 8, [
 				"as",
 				"layout-id",
 				"transition",
+				"transform-template",
 				"class"
 			]);
 		};
@@ -2340,16 +2385,16 @@ var Highlight_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxThumbs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$86 = {
+var _hoisted_1$85 = {
 	"data-hn-thumbs": "",
 	class: "relative isolate flex w-max gap-2 px-4 py-3"
 };
-var _hoisted_2$42 = [
+var _hoisted_2$41 = [
 	"aria-label",
 	"aria-current",
 	"onClick"
 ];
-var _hoisted_3$20 = ["src"];
+var _hoisted_3$19 = ["src"];
 //#endregion
 //#region src/components/lightbox/LightboxThumbs.vue
 var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
@@ -2385,7 +2430,7 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 				scrollbar: false,
 				class: "max-w-full"
 			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1$86, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item, at) => {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1$85, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item, at) => {
 					return openBlock(), createElementBlock("button", {
 						key: item.id,
 						ref_for: true,
@@ -2402,13 +2447,14 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 							alt: "",
 							draggable: "false",
 							class: "relative -z-10 size-full object-cover"
-						}, null, 8, _hoisted_3$20),
+						}, null, 8, _hoisted_3$19),
 						at === props.index ? (openBlock(), createBlock(Highlight_default, {
 							key: 0,
 							id: unref(highlightId),
+							axis: "x",
 							class: "ring-accent absolute inset-0 rounded-md ring-2 ring-inset"
 						}, null, 8, ["id"])) : createCommentVNode("", true)
-					], 10, _hoisted_2$42);
+					], 10, _hoisted_2$41);
 				}), 128))])]),
 				_: 1
 			});
@@ -2417,8 +2463,8 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/lightbox/LightboxToolbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$85 = { class: "flex flex-col items-center gap-1 pb-3" };
-var _hoisted_2$41 = { class: "flex items-center gap-1" };
+var _hoisted_1$84 = { class: "flex flex-col items-center gap-1 pb-3" };
+var _hoisted_2$40 = { class: "flex items-center gap-1" };
 //#endregion
 //#region src/components/lightbox/LightboxToolbar.vue
 var LightboxToolbar_default = /* @__PURE__ */ defineComponent({
@@ -2442,12 +2488,12 @@ var LightboxToolbar_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const t = useUiLocale();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$85, [props.items.length > 1 ? (openBlock(), createBlock(LightboxThumbs_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$84, [props.items.length > 1 ? (openBlock(), createBlock(LightboxThumbs_default, {
 				key: 0,
 				items: props.items,
 				index: props.index,
 				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
-			}, null, 8, ["items", "index"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$41, [
+			}, null, 8, ["items", "index"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$40, [
 				createVNode(IconButton_default, {
 					label: unref(t).lightbox.zoomOut,
 					variant: "soft",
@@ -3725,8 +3771,8 @@ async function saveImage(url) {
 }
 //#endregion
 //#region src/components/lightbox/Lightbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$84 = ["data-hn-phase"];
-var _hoisted_2$40 = {
+var _hoisted_1$83 = ["data-hn-phase"];
+var _hoisted_2$39 = {
 	"aria-hidden": "true",
 	class: "pointer-events-none absolute inset-0 isolate"
 };
@@ -3887,7 +3933,7 @@ var Lightbox_default = /* @__PURE__ */ defineComponent({
 							onWheel: _cache[9] || (_cache[9] = (...args) => unref(gesture).onWheel && unref(gesture).onWheel(...args)),
 							onKeydown
 						}, [
-							createElementVNode("div", _hoisted_2$40, [createVNode(unref(Motion), {
+							createElementVNode("div", _hoisted_2$39, [createVNode(unref(Motion), {
 								class: "hn-scrim",
 								style: normalizeStyle({ opacity: unref(motion).presence })
 							}, null, 8, ["style"])]),
@@ -3952,7 +3998,7 @@ var Lightbox_default = /* @__PURE__ */ defineComponent({
 								"hint",
 								"presence"
 							])
-						], 42, _hoisted_1$84)]),
+						], 42, _hoisted_1$83)]),
 						_: 1
 					})]),
 					_: 1
@@ -4113,7 +4159,7 @@ function useImageGroup() {
 }
 //#endregion
 //#region src/components/image/Image.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$83 = [
+var _hoisted_1$82 = [
 	"src",
 	"alt",
 	"decoding",
@@ -4203,7 +4249,7 @@ var Image_default = /* @__PURE__ */ defineComponent({
 						fetchpriority: props.eager ? "high" : void 0,
 						draggable: props.draggable,
 						class: unref(cn)(unref(image)({ fit: props.fit }), props.lazy ? !unref(revealed) && "opacity-0" : "relative z-10", props.imageClass)
-					}), null, 16, _hoisted_1$83)) : unref(failed) ? renderSlot(_ctx.$slots, "error", {}, void 0, void 0, 1) : renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 2),
+					}), null, 16, _hoisted_1$82)) : unref(failed) ? renderSlot(_ctx.$slots, "error", {}, void 0, void 0, 1) : renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 2),
 					unref(showSkeleton) ? (openBlock(), createElementBlock("span", {
 						key: 3,
 						ref_key: "skeletonEl",
@@ -4484,7 +4530,7 @@ var indicator = tv({
 });
 //#endregion
 //#region src/components/indicator/Indicator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$82 = {
+var _hoisted_1$81 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "hn-ping absolute inset-0 rounded-full bg-inherit"
@@ -4515,7 +4561,7 @@ var Indicator_default = /* @__PURE__ */ defineComponent({
 					size: props.size
 				}), props.class))
 			}, {
-				default: withCtx(() => [props.pulse ? (openBlock(), createElementBlock("span", _hoisted_1$82)) : createCommentVNode("", true), props.label ? (openBlock(), createBlock(VisuallyHidden_default, { key: 1 }, {
+				default: withCtx(() => [props.pulse ? (openBlock(), createElementBlock("span", _hoisted_1$81)) : createCommentVNode("", true), props.label ? (openBlock(), createBlock(VisuallyHidden_default, { key: 1 }, {
 					default: withCtx(() => [createTextVNode(toDisplayString(props.label), 1)]),
 					_: 1
 				})) : createCommentVNode("", true)]),
@@ -4567,8 +4613,8 @@ var calloutIcons = {
 };
 //#endregion
 //#region src/components/callout/Callout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$81 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_2$39 = {
+var _hoisted_1$80 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+var _hoisted_2$38 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
@@ -4596,7 +4642,7 @@ var Callout_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_1$81, [props.title ? (openBlock(), createElementBlock("p", _hoisted_2$39, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")])], 2);
+			}, null, 8, ["class"])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_1$80, [props.title ? (openBlock(), createElementBlock("p", _hoisted_2$38, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")])], 2);
 		};
 	}
 });
@@ -4650,19 +4696,19 @@ function useCollapseGap() {
 }
 //#endregion
 //#region src/components/alert/Alert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$80 = {
+var _hoisted_1$79 = {
 	key: 0,
 	"data-hn-alert": "",
 	class: "hn-collapse"
 };
-var _hoisted_2$38 = { class: "hn-collapse-body" };
-var _hoisted_3$19 = ["role"];
+var _hoisted_2$37 = { class: "hn-collapse-body" };
+var _hoisted_3$18 = ["role"];
 var _hoisted_4$14 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_5$10 = {
+var _hoisted_5$9 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
-var _hoisted_6$8 = {
+var _hoisted_6$7 = {
 	key: 0,
 	class: "flex shrink-0 items-center gap-2 self-center"
 };
@@ -4706,7 +4752,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 				"leave-from-class": "hn-collapse-open",
 				"leave-to-class": "hn-collapse-closed"
 			}, toHandlers(unref(hooks))), {
-				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$80, [createElementVNode("div", _hoisted_2$38, [createElementVNode("div", {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$79, [createElementVNode("div", _hoisted_2$37, [createElementVNode("div", {
 					role: role.value,
 					class: normalizeClass(unref(cn)(unref(callout)({ tone: props.tone }), props.class))
 				}, [
@@ -4715,15 +4761,15 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_4$14, [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$8, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_4$14, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$9, 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),
 					props.closable ? (openBlock(), createBlock(CloseButton_default, {
 						key: 1,
 						size: "sm",
 						class: "-my-0.5 -me-1",
 						onClick: close
 					})) : createCommentVNode("", true)
-				], 10, _hoisted_3$19)])])) : createCommentVNode("", true)]),
+				], 10, _hoisted_3$18)])])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);
 		};
@@ -4731,7 +4777,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/prev-next/PrevNext.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$79 = ["aria-label"];
+var _hoisted_1$78 = ["aria-label"];
 //#endregion
 //#region src/components/prev-next/PrevNext.vue
 var PrevNext_default = /* @__PURE__ */ defineComponent({
@@ -4748,7 +4794,7 @@ var PrevNext_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("nav", {
 				"aria-label": props.label ?? unref(t).pagination.navLabel,
 				class: normalizeClass(unref(cn)("grid gap-4 sm:grid-cols-2", props.class))
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$79);
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$78);
 		};
 	}
 });
@@ -4772,7 +4818,7 @@ var prevNextEyebrow = tv({
 });
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$78 = { class: "text-fg font-medium" };
+var _hoisted_1$77 = { class: "text-fg font-medium" };
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue
 var PrevNextLink_default = /* @__PURE__ */ defineComponent({
@@ -4808,7 +4854,7 @@ var PrevNextLink_default = /* @__PURE__ */ defineComponent({
 						class: "size-4",
 						"aria-hidden": "true"
 					})), createTextVNode(" " + toDisplayString(props.label ?? (props.direction === "prev" ? unref(t).pagination.prev : unref(t).pagination.next)), 1)], 2),
-					createElementVNode("span", _hoisted_1$78, [renderSlot(_ctx.$slots, "default")])
+					createElementVNode("span", _hoisted_1$77, [renderSlot(_ctx.$slots, "default")])
 				]),
 				_: 3
 			}, 16, [
@@ -4885,8 +4931,8 @@ var tableCell = tv({
 });
 //#endregion
 //#region src/components/table/Table.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$77 = { class: "hn-table" };
-var _hoisted_2$37 = { key: 0 };
+var _hoisted_1$76 = { class: "hn-table" };
+var _hoisted_2$36 = { key: 0 };
 //#endregion
 //#region src/components/table/Table.vue
 var Table_default = /* @__PURE__ */ defineComponent({
@@ -4916,7 +4962,7 @@ var Table_default = /* @__PURE__ */ defineComponent({
 					stickyHeader: props.stickyHeader
 				}), props.class))
 			}, {
-				default: withCtx(() => [createElementVNode("table", _hoisted_1$77, [props.caption ? (openBlock(), createElementBlock("caption", _hoisted_2$37, [createElementVNode("span", null, toDisplayString(props.caption), 1)])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")])]),
+				default: withCtx(() => [createElementVNode("table", _hoisted_1$76, [props.caption ? (openBlock(), createElementBlock("caption", _hoisted_2$36, [createElementVNode("span", null, toDisplayString(props.caption), 1)])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")])]),
 				_: 3
 			}, 8, ["direction", "class"]);
 		};
@@ -4963,7 +5009,7 @@ var TableRow_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/table/TableHead.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$76 = ["scope"];
+var _hoisted_1$75 = ["scope"];
 //#endregion
 //#region src/components/table/TableHead.vue
 var TableHead_default = /* @__PURE__ */ defineComponent({
@@ -4988,7 +5034,7 @@ var TableHead_default = /* @__PURE__ */ defineComponent({
 					sticky: props.sticky,
 					head: true
 				}), props.class))
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$76);
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$75);
 		};
 	}
 });
@@ -5298,11 +5344,16 @@ var TabsTrigger_default = /* @__PURE__ */ defineComponent({
 					active.value ? (openBlock(), createBlock(Highlight_default, {
 						key: 0,
 						id: unref(highlightId),
+						axis: unref(orientation) === "vertical" ? "y" : "x",
 						class: normalizeClass(unref(tabsHighlight)({
 							variant: unref(variant),
 							orientation: unref(orientation)
 						}))
-					}, null, 8, ["id", "class"])) : createCommentVNode("", true),
+					}, null, 8, [
+						"id",
+						"axis",
+						"class"
+					])) : createCommentVNode("", true),
 					createVNode(Ripple_default),
 					renderSlot(_ctx.$slots, "default")
 				]),
@@ -5487,12 +5538,12 @@ function injectInputGroup() {
 }
 //#endregion
 //#region src/components/input/InputBase.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$75 = [
+var _hoisted_1$74 = [
 	"data-invalid",
 	"data-disabled",
 	"aria-busy"
 ];
-var _hoisted_2$36 = [
+var _hoisted_2$35 = [
 	"id",
 	"disabled",
 	"aria-invalid",
@@ -5579,7 +5630,7 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 						leading: !!unref(slots).leading,
 						trailing: clearing.value || trailingSpinner.value || !!unref(slots).trailing
 					})
-				}), null, 16, _hoisted_2$36), [[vModelDynamic, model.value]]),
+				}), null, 16, _hoisted_2$35), [[vModelDynamic, model.value]]),
 				createVNode(Transition, {
 					"enter-active-class": "hn-transition-base",
 					"enter-from-class": "scale-90 opacity-0",
@@ -5615,7 +5666,7 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 					key: 1,
 					class: normalizeClass(unref(inputAdornment)())
 				}, [renderSlot(_ctx.$slots, "trailing")], 2)) : createCommentVNode("", true)
-			], 10, _hoisted_1$75);
+			], 10, _hoisted_1$74);
 		};
 	}
 });
@@ -5819,8 +5870,8 @@ var textareaField = tv({ base: [
 ] });
 //#endregion
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$74 = ["data-invalid", "data-disabled"];
-var _hoisted_2$35 = [
+var _hoisted_1$73 = ["data-invalid", "data-disabled"];
+var _hoisted_2$34 = [
 	"id",
 	"rows",
 	"disabled",
@@ -5889,9 +5940,9 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 					"aria-describedby": unref(describedBy),
 					class: unref(textareaField)(),
 					onInput: _cache[1] || (_cache[1] = (...args) => unref(fit) && unref(fit)(...args))
-				}), null, 16, _hoisted_2$35), [[vModelText, model.value]])]),
+				}), null, 16, _hoisted_2$34), [[vModelText, model.value]])]),
 				_: 1
-			}, 512)], 14, _hoisted_1$74);
+			}, 512)], 14, _hoisted_1$73);
 		};
 	}
 });
@@ -6025,7 +6076,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/password-input/PasswordInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$73 = { class: "relative inline-flex" };
+var _hoisted_1$72 = { class: "relative inline-flex" };
 //#endregion
 //#region src/components/password-input/PasswordInput.vue
 var PasswordInput_default = /* @__PURE__ */ defineComponent({
@@ -6069,7 +6120,7 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 					disabled: props.disabled,
 					onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value)
 				}, {
-					default: withCtx(() => [createElementVNode("span", _hoisted_1$73, [createVNode(Transition, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_1$72, [createVNode(Transition, {
 						"enter-active-class": "hn-transition-base",
 						"enter-from-class": "scale-90 opacity-0",
 						"leave-active-class": "hn-transition absolute",
@@ -6164,7 +6215,7 @@ var inputGroup = tv({
 var inputGroupAddon = tv({ base: "text-muted flex shrink-0 items-center gap-2 px-[var(--hn-input-px)] whitespace-nowrap [&>svg]:size-[var(--hn-input-icon)]" });
 //#endregion
 //#region src/components/input-group/InputGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$72 = ["data-invalid", "data-disabled"];
+var _hoisted_1$71 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/input-group/InputGroup.vue
 var InputGroup_default = /* @__PURE__ */ defineComponent({
@@ -6196,7 +6247,7 @@ var InputGroup_default = /* @__PURE__ */ defineComponent({
 					size: props.size
 				}), unref(inputGroup)({ divided: props.variant !== "bare" }), props.class)),
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(focusFieldFrom)($event.currentTarget, $event.target))
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$72);
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$71);
 		};
 	}
 });
@@ -6367,16 +6418,16 @@ function flattenOptions(items) {
 }
 //#endregion
 //#region src/components/select/SelectList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$71 = { class: "min-w-0 flex-1" };
-var _hoisted_2$34 = { class: "block truncate" };
-var _hoisted_3$18 = {
+var _hoisted_1$70 = { class: "min-w-0 flex-1" };
+var _hoisted_2$33 = { class: "block truncate" };
+var _hoisted_3$17 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
 var _hoisted_4$13 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$9 = { class: "min-w-0 flex-1" };
-var _hoisted_6$7 = { class: "block truncate" };
-var _hoisted_7$5 = {
+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"
 };
@@ -6426,7 +6477,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 											class: normalizeClass(unref(selectItem)())
 										}, {
 											default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
-												default: withCtx(() => [createElementVNode("span", _hoisted_1$71, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$34, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$18, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])]),
+												default: withCtx(() => [createElementVNode("span", _hoisted_1$70, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$33, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$17, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])]),
 												_: 2
 											}, 1024), createElementVNode("span", _hoisted_4$13, [createVNode(unref(SelectItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
@@ -6449,7 +6500,7 @@ 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$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
+										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)])])]),
 										_: 2
 									}, 1024), createElementVNode("span", _hoisted_8$1, [createVNode(unref(SelectItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
@@ -6505,7 +6556,7 @@ function useClearTransition(visible) {
 }
 //#endregion
 //#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$70 = [
+var _hoisted_1$69 = [
 	"dir",
 	"data-invalid",
 	"data-disabled"
@@ -6623,7 +6674,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					}, 8, ["label"])], 2)) : createCommentVNode("", true)]),
 					_: 1
-				}, 16)], 10, _hoisted_1$70), createVNode(SelectList_default, {
+				}, 16)], 10, _hoisted_1$69), createVNode(SelectList_default, {
 					options: props.options,
 					keyboard: keyboard.value
 				}, {
@@ -6652,12 +6703,12 @@ var multiSelectTrigger = tv({ base: [
 var multiSelectChips = tv({ base: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden" });
 //#endregion
 //#region src/components/multi-select/MultiSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$69 = { class: "min-w-0 truncate" };
-var _hoisted_2$33 = {
+var _hoisted_1$68 = { class: "min-w-0 truncate" };
+var _hoisted_2$32 = {
 	key: 1,
 	class: "min-w-0 truncate"
 };
-var _hoisted_3$17 = [
+var _hoisted_3$16 = [
 	"name",
 	"required",
 	"autocomplete",
@@ -6767,7 +6818,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 									onClick: isolate,
 									onRemove: ($event) => remove(option.value)
 								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_1$69, toDisplayString(option.label), 1)]),
+									default: withCtx(() => [createElementVNode("span", _hoisted_1$68, toDisplayString(option.label), 1)]),
 									_: 2
 								}, 1032, [
 									"size",
@@ -6782,7 +6833,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 							}, {
 								default: withCtx(() => [createTextVNode(" +" + toDisplayString(overflow.value), 1)]),
 								_: 1
-							}, 8, ["size", "disabled"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_2$33, toDisplayString(props.placeholder ?? unref(t).select.placeholder), 1))], 2),
+							}, 8, ["size", "disabled"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_2$32, toDisplayString(props.placeholder ?? unref(t).select.placeholder), 1))], 2),
 							createVNode(Transition, {
 								"enter-active-class": "hn-transition-base",
 								"enter-from-class": "scale-90 opacity-0",
@@ -6835,7 +6886,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 								value: option.value,
 								disabled: option.disabled
 							}, toDisplayString(option.label), 9, _hoisted_4$12);
-						}), 128))], 8, _hoisted_3$17), [[vModelSelect, model.value]])]),
+						}), 128))], 8, _hoisted_3$16), [[vModelSelect, model.value]])]),
 						_: 1
 					})) : createCommentVNode("", true),
 					createVNode(SelectList_default, {
@@ -6862,16 +6913,16 @@ var comboboxContent = tv({ base: ["hn-anim-pop z-(--hn-z-overlay) flex w-[var(--
 var comboboxList = tv({ base: "max-h-[min(20rem,var(--reka-combobox-content-available-height))]" });
 //#endregion
 //#region src/components/combobox/ComboboxList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$68 = { class: "min-w-0 flex-1" };
-var _hoisted_2$32 = { class: "block truncate" };
-var _hoisted_3$16 = {
+var _hoisted_1$67 = { class: "min-w-0 flex-1" };
+var _hoisted_2$31 = { class: "block truncate" };
+var _hoisted_3$15 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
 var _hoisted_4$11 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$8 = { class: "min-w-0 flex-1" };
-var _hoisted_6$6 = { class: "block truncate" };
-var _hoisted_7$4 = {
+var _hoisted_5$7 = { 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"
 };
@@ -6920,7 +6971,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 											disabled: option.disabled,
 											class: normalizeClass(unref(selectItem)())
 										}, {
-											default: withCtx(() => [createElementVNode("span", _hoisted_1$68, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$32, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$16, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_4$11, [createVNode(unref(ComboboxItemIndicator), null, {
+											default: withCtx(() => [createElementVNode("span", _hoisted_1$67, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$31, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$15, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_4$11, [createVNode(unref(ComboboxItemIndicator), null, {
 												default: withCtx(() => [createVNode(unref(Check))]),
 												_: 1
 											})])]),
@@ -6940,7 +6991,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 									disabled: item.disabled,
 									class: normalizeClass(unref(selectItem)())
 								}, {
-									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, [createVNode(unref(ComboboxItemIndicator), null, {
+									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, [createVNode(unref(ComboboxItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -6968,7 +7019,7 @@ var ComboboxList_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/combobox/Combobox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$67 = ["data-invalid", "data-disabled"];
+var _hoisted_1$66 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/combobox/Combobox.vue
 var Combobox_default = /* @__PURE__ */ defineComponent({
@@ -7108,7 +7159,7 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 							"disabled",
 							"class"
 						])
-					], 42, _hoisted_1$67)]),
+					], 42, _hoisted_1$66)]),
 					_: 1
 				}), createVNode(ComboboxList_default, {
 					options: props.options,
@@ -7157,11 +7208,11 @@ var commandItemHint = tv({ base: "ms-auto flex shrink-0 items-center gap-1" });
 var commandEmpty = tv({ base: "text-muted px-4 py-8 text-center text-sm" });
 //#endregion
 //#region src/components/command-palette/CommandPaletteItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$66 = { class: "truncate" };
-var _hoisted_2$31 = ["textContent"];
-var _hoisted_3$15 = ["textContent"];
+var _hoisted_1$65 = { class: "truncate" };
+var _hoisted_2$30 = ["textContent"];
+var _hoisted_3$14 = ["textContent"];
 var _hoisted_4$10 = ["textContent"];
-var _hoisted_5$7 = {
+var _hoisted_5$6 = {
 	key: 0,
 	class: "text-muted truncate text-xs"
 };
@@ -7202,18 +7253,18 @@ var CommandPaletteItem_default = /* @__PURE__ */ defineComponent({
 						"aria-hidden": "true",
 						class: "text-muted"
 					})) : createCommentVNode("", true),
-					createElementVNode("span", { class: normalizeClass(unref(commandItemBody)()) }, [createElementVNode("span", _hoisted_1$66, [
-						createElementVNode("span", { textContent: toDisplayString(parts.value[0]) }, null, 8, _hoisted_2$31),
+					createElementVNode("span", { class: normalizeClass(unref(commandItemBody)()) }, [createElementVNode("span", _hoisted_1$65, [
+						createElementVNode("span", { textContent: toDisplayString(parts.value[0]) }, null, 8, _hoisted_2$30),
 						parts.value[1] ? (openBlock(), createElementBlock("span", {
 							key: 0,
 							class: normalizeClass(unref(commandItemMatch)()),
 							textContent: toDisplayString(parts.value[1])
-						}, null, 10, _hoisted_3$15)) : createCommentVNode("", true),
+						}, null, 10, _hoisted_3$14)) : createCommentVNode("", true),
 						parts.value[2] ? (openBlock(), createElementBlock("span", {
 							key: 1,
 							textContent: toDisplayString(parts.value[2])
 						}, null, 8, _hoisted_4$10)) : createCommentVNode("", true)
-					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$7, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
+					]), props.match.item.description ? (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString(props.match.item.description), 1)) : createCommentVNode("", true)], 2),
 					props.match.item.kbd?.length ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						class: normalizeClass(unref(commandItemHint)())
@@ -7554,9 +7605,9 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/listbox/ListboxOptionContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$65 = { class: "min-w-0 flex-1" };
-var _hoisted_2$30 = { class: "block truncate" };
-var _hoisted_3$14 = {
+var _hoisted_1$64 = { class: "min-w-0 flex-1" };
+var _hoisted_2$29 = { class: "block truncate" };
+var _hoisted_3$13 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
@@ -7576,10 +7627,10 @@ var ListboxOptionContent_default = /* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const { isSelected: selected } = injectListboxItemContext();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", _hoisted_1$65, [renderSlot(_ctx.$slots, "option", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", _hoisted_1$64, [renderSlot(_ctx.$slots, "option", {
 				option: props.option,
 				selected: unref(selected)
-			}, () => [createElementVNode("span", _hoisted_2$30, toDisplayString(props.option.label), 1), props.option.description ? (openBlock(), createElementBlock("span", _hoisted_3$14, toDisplayString(props.option.description), 1)) : createCommentVNode("", true)])]), slots.trailing ? renderSlot(_ctx.$slots, "trailing", {
+			}, () => [createElementVNode("span", _hoisted_2$29, toDisplayString(props.option.label), 1), props.option.description ? (openBlock(), createElementBlock("span", _hoisted_3$13, toDisplayString(props.option.description), 1)) : createCommentVNode("", true)])]), slots.trailing ? renderSlot(_ctx.$slots, "trailing", {
 				option: props.option,
 				selected: unref(selected)
 			}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", _hoisted_4$9, [createVNode(unref(ListboxItemIndicator), null, {
@@ -7757,19 +7808,19 @@ function pathTo(nodes, value, trail = []) {
 }
 //#endregion
 //#region src/components/tree-select/TreeSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$64 = { class: "min-w-0 flex-1 truncate" };
-var _hoisted_2$29 = ["onClick"];
-var _hoisted_3$13 = {
+var _hoisted_1$63 = { class: "min-w-0 flex-1 truncate" };
+var _hoisted_2$28 = ["onClick"];
+var _hoisted_3$12 = {
 	key: 1,
 	class: "size-5 shrink-0"
 };
 var _hoisted_4$8 = { class: "min-w-0 flex-1" };
-var _hoisted_5$6 = { class: "block truncate" };
-var _hoisted_6$5 = {
+var _hoisted_5$5 = { class: "block truncate" };
+var _hoisted_6$4 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_7$3 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_7$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/tree-select/TreeSelect.vue
 var TreeSelect_default = /* @__PURE__ */ defineComponent({
@@ -7845,7 +7896,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 						size: props.size
 					}), unref(selectTrigger)(), props.class)
 				}), {
-					default: withCtx(() => [createElementVNode("span", _hoisted_1$64, toDisplayString(selected.value ? selected.value.label : props.placeholder ?? unref(t).select.placeholder), 1), createElementVNode("span", { class: normalizeClass(unref(inputAdornment)()) }, [createVNode(DisclosureIcon_default)], 2)]),
+					default: withCtx(() => [createElementVNode("span", _hoisted_1$63, toDisplayString(selected.value ? selected.value.label : props.placeholder ?? unref(t).select.placeholder), 1), createElementVNode("span", { class: normalizeClass(unref(inputAdornment)()) }, [createVNode(DisclosureIcon_default)], 2)]),
 					_: 1
 				}, 16, [
 					"id",
@@ -7896,9 +7947,9 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 												}, [createVNode(DisclosureIcon_default, {
 													direction: "end",
 													open: isExpanded
-												}, null, 8, ["open"])], 10, _hoisted_2$29)) : (openBlock(), createElementBlock("span", _hoisted_3$13)),
-												createElementVNode("span", _hoisted_4$8, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_5$6, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_6$5, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
-												createElementVNode("span", _hoisted_7$3, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
+												}, null, 8, ["open"])], 10, _hoisted_2$28)) : (openBlock(), createElementBlock("span", _hoisted_3$12)),
+												createElementVNode("span", _hoisted_4$8, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_5$5, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_6$4, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
+												createElementVNode("span", _hoisted_7$2, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
 										}, 1040, [
@@ -8019,7 +8070,7 @@ var checkboxDescription = tv({
 });
 //#endregion
 //#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$63 = ["data-disabled"];
+var _hoisted_1$62 = ["data-disabled"];
 //#endregion
 //#region src/components/checkbox/Checkbox.vue
 var Checkbox_default = /* @__PURE__ */ defineComponent({
@@ -8116,7 +8167,7 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 						controlPlacement: props.controlPlacement
 					}))
 				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
-			], 10, _hoisted_1$63);
+			], 10, _hoisted_1$62);
 		};
 	}
 });
@@ -8239,7 +8290,7 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 var radioDot = tv({ base: "block size-[calc(var(--hn-checkbox-size)/2)] bg-surface rounded-full" });
 //#endregion
 //#region src/components/radio-group/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$62 = ["data-disabled"];
+var _hoisted_1$61 = ["data-disabled"];
 //#endregion
 //#region src/components/radio-group/RadioGroup.vue
 var RadioGroup_default = /* @__PURE__ */ defineComponent({
@@ -8333,7 +8384,7 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 								controlPlacement: props.controlPlacement
 							}))
 						}, toDisplayString(option.description), 3)) : createCommentVNode("", true)
-					], 10, _hoisted_1$62);
+					], 10, _hoisted_1$61);
 				}), 128))]),
 				_: 3
 			}, 8, [
@@ -8374,7 +8425,7 @@ var switchThumb = tv({ base: [
 ] });
 //#endregion
 //#region src/components/switch/Switch.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$61 = ["data-disabled"];
+var _hoisted_1$60 = ["data-disabled"];
 //#endregion
 //#region src/components/switch/Switch.vue
 var Switch_default = /* @__PURE__ */ defineComponent({
@@ -8455,7 +8506,7 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 						controlPlacement: props.controlPlacement
 					}))
 				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
-			], 10, _hoisted_1$61);
+			], 10, _hoisted_1$60);
 		};
 	}
 });
@@ -8601,7 +8652,7 @@ var SliderMarks_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$60 = ["data-disabled", "data-dragging"];
+var _hoisted_1$59 = ["data-disabled", "data-dragging"];
 //#endregion
 //#region src/components/slider/Slider.vue
 var Slider_default = /* @__PURE__ */ defineComponent({
@@ -8711,13 +8762,13 @@ var Slider_default = /* @__PURE__ */ defineComponent({
 				"marks",
 				"min",
 				"max"
-			])) : createCommentVNode("", true)], 16, _hoisted_1$60);
+			])) : createCommentVNode("", true)], 16, _hoisted_1$59);
 		};
 	}
 });
 //#endregion
 //#region src/components/range-slider/RangeSlider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$59 = [
+var _hoisted_1$58 = [
 	"aria-labelledby",
 	"aria-describedby",
 	"aria-invalid",
@@ -8856,7 +8907,7 @@ var RangeSlider_default = /* @__PURE__ */ defineComponent({
 				"marks",
 				"min",
 				"max"
-			])) : createCommentVNode("", true)], 16, _hoisted_1$59);
+			])) : createCommentVNode("", true)], 16, _hoisted_1$58);
 		};
 	}
 });
@@ -8873,15 +8924,15 @@ var toggle = tv({
 });
 //#endregion
 //#region src/components/toggle/Toggle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$58 = {
+var _hoisted_1$57 = {
 	key: "on",
 	class: "inline-flex items-center justify-center"
 };
-var _hoisted_2$28 = {
+var _hoisted_2$27 = {
 	key: "off",
 	class: "inline-flex items-center justify-center"
 };
-var _hoisted_3$12 = {
+var _hoisted_3$11 = {
 	key: 2,
 	class: "inline-flex items-center"
 };
@@ -8958,10 +9009,10 @@ var Toggle_default = /* @__PURE__ */ defineComponent({
 							"leave-active-class": "hn-transition absolute",
 							"leave-to-class": "scale-90 opacity-0"
 						}, {
-							default: withCtx(() => [swapped.value ? (openBlock(), createElementBlock("span", _hoisted_1$58, [renderSlot(_ctx.$slots, "pressed-icon")])) : (openBlock(), createElementBlock("span", _hoisted_2$28, [renderSlot(_ctx.$slots, "icon", { pressed: pressed.value })]))]),
+							default: withCtx(() => [swapped.value ? (openBlock(), createElementBlock("span", _hoisted_1$57, [renderSlot(_ctx.$slots, "pressed-icon")])) : (openBlock(), createElementBlock("span", _hoisted_2$27, [renderSlot(_ctx.$slots, "icon", { pressed: pressed.value })]))]),
 							_: 3
 						})], 2)) : createCommentVNode("", true),
-						unref(slots).default ? (openBlock(), createElementBlock("span", _hoisted_3$12, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+						unref(slots).default ? (openBlock(), createElementBlock("span", _hoisted_3$11, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
 					]),
 					_: 3
 				}, 16, [
@@ -9017,7 +9068,7 @@ var tagsInputControl = tv({
 var tagsInputChip = tv({ base: "max-w-full min-w-0 shrink data-disabled:opacity-100" });
 //#endregion
 //#region src/components/tags-input/TagsInputChip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$57 = { class: "min-w-0 truncate" };
+var _hoisted_1$56 = { class: "min-w-0 truncate" };
 //#endregion
 //#region src/components/tags-input/TagsInputChip.vue
 var TagsInputChip_default = /* @__PURE__ */ defineComponent({
@@ -9044,7 +9095,7 @@ var TagsInputChip_default = /* @__PURE__ */ defineComponent({
 				onRemove: _cache[0] || (_cache[0] = ($event) => emit("remove"))
 			}), {
 				default: withCtx(() => [createVNode(unref(TagsInputItemText), { "as-child": "" }, {
-					default: withCtx(() => [createElementVNode("span", _hoisted_1$57, toDisplayString(props.tag), 1)]),
+					default: withCtx(() => [createElementVNode("span", _hoisted_1$56, toDisplayString(props.tag), 1)]),
 					_: 1
 				})]),
 				_: 1
@@ -9058,7 +9109,7 @@ var TagsInputChip_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/tags-input/TagsInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$56 = ["data-invalid", "data-disabled"];
+var _hoisted_1$55 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/tags-input/TagsInput.vue
 var TagsInput_default = /* @__PURE__ */ defineComponent({
@@ -9209,7 +9260,7 @@ var TagsInput_default = /* @__PURE__ */ defineComponent({
 					_: 1
 				}, 8, ["label"])], 2)) : createCommentVNode("", true)]),
 				_: 1
-			})], 10, _hoisted_1$56);
+			})], 10, _hoisted_1$55);
 		};
 	}
 });
@@ -9270,12 +9321,12 @@ var multiComboboxHost = tv({
 var multiComboboxEnd = tv({ base: "absolute inset-y-0 end-0 flex items-stretch" });
 //#endregion
 //#region src/components/multi-combobox/MultiCombobox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$55 = [
+var _hoisted_1$54 = [
 	"data-invalid",
 	"data-disabled",
 	"aria-busy"
 ];
-var _hoisted_2$27 = { class: "min-w-0 truncate" };
+var _hoisted_2$26 = { class: "min-w-0 truncate" };
 //#endregion
 //#region src/components/multi-combobox/MultiCombobox.vue
 var MultiCombobox_default = /* @__PURE__ */ defineComponent({
@@ -9368,7 +9419,7 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(tagsInputChip)()),
 							onRemove: ($event) => unref(remove)(option.value)
 						}, {
-							default: withCtx(() => [createElementVNode("span", _hoisted_2$27, toDisplayString(option.label), 1)]),
+							default: withCtx(() => [createElementVNode("span", _hoisted_2$26, toDisplayString(option.label), 1)]),
 							_: 2
 						}, 1032, [
 							"size",
@@ -9435,7 +9486,7 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 						"aria-label",
 						"disabled",
 						"class"
-					])], 2)], 10, _hoisted_1$55)]),
+					])], 2)], 10, _hoisted_1$54)]),
 					_: 1
 				}), createVNode(ComboboxList_default, {
 					options: props.options,
@@ -10119,7 +10170,7 @@ var dateFieldSegment = tv({
 });
 //#endregion
 //#region src/components/date-field/DateField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = ["data-invalid", "data-disabled"];
+var _hoisted_1$53 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-field/DateField.vue
 var DateField_default = /* @__PURE__ */ defineComponent({
@@ -10276,7 +10327,7 @@ var DateField_default = /* @__PURE__ */ defineComponent({
 					key: 1,
 					class: normalizeClass(unref(inputAdornment)())
 				}, [renderSlot(_ctx.$slots, "trailing")], 2)) : createCommentVNode("", true)
-			], 10, _hoisted_1$54);
+			], 10, _hoisted_1$53);
 		};
 	}
 });
@@ -10307,7 +10358,7 @@ var InputGroupScope_default = /* @__PURE__ */ defineComponent({
 var datePickerContent = tv({ base: "hn-anim-pop z-(--hn-z-overlay) p-2 shadow-md outline-none" });
 //#endregion
 //#region src/components/date-picker/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$53 = ["data-invalid", "data-disabled"];
+var _hoisted_1$52 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-picker/DatePicker.vue
 var DatePicker_default = /* @__PURE__ */ defineComponent({
@@ -10424,7 +10475,7 @@ var DatePicker_default = /* @__PURE__ */ defineComponent({
 							_: 1
 						}, 8, ["label", "disabled"])]),
 						_: 1
-					})], 10, _hoisted_1$53)]),
+					})], 10, _hoisted_1$52)]),
 					_: 3
 				}), createVNode(unref(PopoverPortal), null, {
 					default: withCtx(() => [createVNode(unref(PopoverContent), {
@@ -10489,7 +10540,7 @@ function isRangeInvalid({ start, end }, bounds) {
 }
 //#endregion
 //#region src/components/date-range-field/DateRangeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["data-invalid", "data-disabled"];
+var _hoisted_1$51 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-range-field/DateRangeField.vue
 var DateRangeField_default = /* @__PURE__ */ defineComponent({
@@ -10658,7 +10709,7 @@ var DateRangeField_default = /* @__PURE__ */ defineComponent({
 					key: 1,
 					class: normalizeClass(unref(inputAdornment)())
 				}, [renderSlot(_ctx.$slots, "trailing")], 2)) : createCommentVNode("", true)
-			], 10, _hoisted_1$52);
+			], 10, _hoisted_1$51);
 		};
 	}
 });
@@ -10906,7 +10957,7 @@ var RangeCalendar_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/date-range-picker/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$51 = ["data-invalid", "data-disabled"];
+var _hoisted_1$50 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-range-picker/DateRangePicker.vue
 var DateRangePicker_default = /* @__PURE__ */ defineComponent({
@@ -11024,7 +11075,7 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 							_: 1
 						}, 8, ["label", "disabled"])]),
 						_: 1
-					})], 10, _hoisted_1$51)]),
+					})], 10, _hoisted_1$50)]),
 					_: 3
 				}), createVNode(unref(PopoverPortal), null, {
 					default: withCtx(() => [createVNode(unref(PopoverContent), {
@@ -11078,7 +11129,7 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/time-field/TimeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$50 = ["data-invalid", "data-disabled"];
+var _hoisted_1$49 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/time-field/TimeField.vue
 var TimeField_default = /* @__PURE__ */ defineComponent({
@@ -11241,7 +11292,7 @@ var TimeField_default = /* @__PURE__ */ defineComponent({
 					key: 1,
 					class: normalizeClass(unref(inputAdornment)())
 				}, [renderSlot(_ctx.$slots, "trailing")], 2)) : createCommentVNode("", true)
-			], 10, _hoisted_1$50);
+			], 10, _hoisted_1$49);
 		};
 	}
 });
@@ -11250,7 +11301,7 @@ var TimeField_default = /* @__PURE__ */ defineComponent({
 var dateTimePickerFooter = tv({ base: "mt-2 flex items-center justify-between gap-2" });
 //#endregion
 //#region src/components/date-time-picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$49 = ["data-invalid", "data-disabled"];
+var _hoisted_1$48 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-time-picker/DateTimePicker.vue
 var DateTimePicker_default = /* @__PURE__ */ defineComponent({
@@ -11383,7 +11434,7 @@ var DateTimePicker_default = /* @__PURE__ */ defineComponent({
 							_: 1
 						}, 8, ["label", "disabled"])]),
 						_: 1
-					})], 10, _hoisted_1$49)]),
+					})], 10, _hoisted_1$48)]),
 					_: 3
 				}), createVNode(unref(PopoverPortal), null, {
 					default: withCtx(() => [createVNode(unref(PopoverContent), {
@@ -11492,7 +11543,7 @@ function starFill(value, index) {
 }
 //#endregion
 //#region src/components/rating/Rating.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = ["aria-label"];
+var _hoisted_1$47 = ["aria-label"];
 //#endregion
 //#region src/components/rating/Rating.vue
 var Rating_default = /* @__PURE__ */ defineComponent({
@@ -11536,7 +11587,7 @@ var Rating_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(ratingFill)()),
 					style: normalizeStyle({ width: unref(starFill)(model.value, index) })
 				}, [createVNode(unref(Star), { class: normalizeClass(unref(ratingStar)({ active: true })) }, null, 8, ["class"])], 6)], 2);
-			}), 128))], 16, _hoisted_1$48)) : (openBlock(), createBlock(unref(RatingRoot), mergeProps({ key: 1 }, _ctx.$attrs, {
+			}), 128))], 16, _hoisted_1$47)) : (openBlock(), createBlock(unref(RatingRoot), mergeProps({ key: 1 }, _ctx.$attrs, {
 				"data-hn-rating": "",
 				"data-disabled": unref(disabled) ? "" : void 0,
 				"data-invalid": unref(invalid) ? "" : void 0,
@@ -11825,13 +11876,13 @@ function formatSize(tag, bytes) {
 }
 //#endregion
 //#region src/components/file-upload/FileUpload.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = [
+var _hoisted_1$46 = [
 	"name",
 	"accept",
 	"multiple",
 	"disabled"
 ];
-var _hoisted_2$26 = [
+var _hoisted_2$25 = [
 	"id",
 	"aria-describedby",
 	"aria-invalid",
@@ -11840,7 +11891,7 @@ var _hoisted_2$26 = [
 	"aria-busy",
 	"disabled"
 ];
-var _hoisted_3$11 = ["src"];
+var _hoisted_3$10 = ["src"];
 //#endregion
 //#region src/components/file-upload/FileUpload.vue
 var FileUpload_default = /* @__PURE__ */ defineComponent({
@@ -11920,7 +11971,7 @@ var FileUpload_default = /* @__PURE__ */ defineComponent({
 					multiple: props.multiple,
 					disabled: unref(disabled),
 					onChange: _cache[0] || (_cache[0] = (...args) => unref(onChange) && unref(onChange)(...args))
-				}, null, 40, _hoisted_1$47),
+				}, null, 40, _hoisted_1$46),
 				props.variant === "area" ? (openBlock(), createElementBlock("button", mergeProps({ key: 0 }, _ctx.$attrs, {
 					type: "button",
 					"data-hn-file-upload-area": "",
@@ -11944,7 +11995,7 @@ var FileUpload_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(Upload), { "aria-hidden": "true" })])]),
 					_: 3
-				}, 8, ["swapped"]), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(unref(t).upload.dropHint), 1)])], 16, _hoisted_2$26)) : (openBlock(), createBlock(Button_default, mergeProps({ key: 1 }, _ctx.$attrs, {
+				}, 8, ["swapped"]), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(unref(t).upload.dropHint), 1)])], 16, _hoisted_2$25)) : (openBlock(), createBlock(Button_default, mergeProps({ key: 1 }, _ctx.$attrs, {
 					id: unref(fieldId),
 					"aria-describedby": unref(describedBy),
 					"aria-invalid": unref(invalid) || void 0,
@@ -11976,7 +12027,7 @@ var FileUpload_default = /* @__PURE__ */ defineComponent({
 							key: 0,
 							src: unref(urls).get(file),
 							alt: ""
-						}, null, 8, _hoisted_3$11)) : (openBlock(), createBlock(unref(File), {
+						}, null, 8, _hoisted_3$10)) : (openBlock(), createBlock(unref(File), {
 							key: 1,
 							"aria-hidden": "true"
 						}))], 2),
@@ -12120,13 +12171,71 @@ var Heading_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/alert-dialog/AlertDialog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = { class: "flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)" };
-var _hoisted_2$25 = {
-	key: 0,
-	class: "px-(--hn-panel-p)"
-};
-var _hoisted_3$10 = { class: "flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)" };
+//#region src/components/alert-dialog/composables/useAlertDialogConfirm.ts
+function useAlertDialogConfirm(props, open, onError, blocked = () => false) {
+	const busy = ref(false);
+	function guard(event) {
+		if (busy.value) event.preventDefault();
+	}
+	async function confirm() {
+		if (!open.value || busy.value || blocked()) return;
+		busy.value = true;
+		try {
+			await props.onConfirm?.();
+			open.value = false;
+		} catch (error) {
+			onError(error);
+		} finally {
+			busy.value = false;
+		}
+	}
+	return {
+		busy,
+		guard,
+		confirm
+	};
+}
+//#endregion
+//#region src/components/alert-dialog/composables/useConfirmDelay.ts
+function useConfirmDelay(open, delay) {
+	const remaining = ref(0);
+	let mounted = false;
+	let timer;
+	function stop() {
+		clearTimeout(timer);
+		timer = void 0;
+	}
+	function restart() {
+		stop();
+		if (!open.value) return;
+		const seconds = Math.ceil(delay());
+		remaining.value = Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
+		if (!mounted || !remaining.value) return;
+		const deadline = performance.now() + remaining.value * 1e3;
+		function tick() {
+			const milliseconds = deadline - performance.now();
+			remaining.value = Math.max(0, Math.ceil(milliseconds / 1e3));
+			timer = remaining.value > 0 ? setTimeout(tick, Math.min(1e3, milliseconds)) : void 0;
+		}
+		tick();
+	}
+	watch([open, delay], restart, {
+		immediate: true,
+		flush: "sync"
+	});
+	onMounted(() => {
+		mounted = true;
+		restart();
+	});
+	onScopeDispose(stop);
+	return remaining;
+}
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.variants.ts
+var alertDialogHeader = tv({ base: "flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)" });
+var alertDialogContent = tv({ base: "px-(--hn-panel-p)" });
+var alertDialogActions = tv({ base: "flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)" });
+var alertDialogCountdown = tv({ base: "tabular-nums" });
 //#endregion
 //#region src/components/alert-dialog/AlertDialog.vue
 var AlertDialog_default = /* @__PURE__ */ defineComponent({
@@ -12136,6 +12245,7 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 		title: {},
 		description: {},
 		confirmText: {},
+		confirmDelay: { default: 0 },
 		cancelText: {},
 		tone: { default: "accent" },
 		size: { default: "sm" },
@@ -12146,29 +12256,14 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["cancel"], ["update:open"]),
+	emits: /*@__PURE__*/ mergeModels(["cancel", "error"], ["update:open"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const open = useModel(__props, "open");
-		const busy = ref(false);
 		const t = useUiLocale();
-		function guard(event) {
-			if (busy.value) event.preventDefault();
-		}
-		async function confirm() {
-			if (busy.value) return;
-			const result = props.onConfirm?.();
-			if (result instanceof Promise) {
-				busy.value = true;
-				try {
-					await result;
-				} finally {
-					busy.value = false;
-				}
-			}
-			open.value = false;
-		}
+		const remaining = useConfirmDelay(open, () => props.confirmDelay);
+		const { busy, guard, confirm } = useAlertDialogConfirm(props, open, (error) => emit("error", error), () => remaining.value > 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AlertDialogRoot), {
 				open: open.value,
@@ -12181,21 +12276,21 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
 				})) : createCommentVNode("", true), createVNode(unref(AlertDialogPortal), null, {
-					default: withCtx(() => [createVNode(unref(AlertDialogOverlay), { class: "hn-scrim" }), createElementVNode("div", { class: normalizeClass(unref(cn)("pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid", unref(dialogWrapper)({ placement: props.placement ?? "auto" }))) }, [createVNode(unref(AlertDialogContent), {
+					default: withCtx(() => [createVNode(unref(AlertDialogOverlay), { class: "hn-scrim" }), createElementVNode("div", { class: normalizeClass(unref(dialogWrapper)({ placement: props.placement ?? "auto" })) }, [createVNode(unref(AlertDialogContent), {
 						"as-child": "",
-						onEscapeKeyDown: guard
+						onEscapeKeyDown: unref(guard)
 					}, {
 						default: withCtx(() => [createVNode(Card_default, {
 							padded: false,
 							"data-hn-alert-dialog": "",
-							"aria-busy": busy.value || void 0,
-							class: normalizeClass(unref(cn)("pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none", "py-(--hn-panel-p)", unref(dialogCard)({
+							"aria-busy": unref(busy) || void 0,
+							class: normalizeClass(unref(cn)(unref(dialogCard)({
 								placement: props.placement ?? "auto",
 								size: props.size
 							}), props.class))
 						}, {
 							default: withCtx(() => [
-								createElementVNode("div", _hoisted_1$46, [createVNode(unref(AlertDialogTitle), { "as-child": "" }, {
+								createElementVNode("div", { class: normalizeClass(unref(alertDialogHeader)()) }, [createVNode(unref(AlertDialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
 										size: "lg"
@@ -12213,13 +12308,16 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 										_: 1
 									})]),
 									_: 1
-								})) : createCommentVNode("", true)]),
-								_ctx.$slots.content ? (openBlock(), createElementBlock("div", _hoisted_2$25, [renderSlot(_ctx.$slots, "content")])) : createCommentVNode("", true),
-								createElementVNode("div", _hoisted_3$10, [createVNode(unref(AlertDialogCancel), { "as-child": "" }, {
+								})) : createCommentVNode("", true)], 2),
+								_ctx.$slots.content ? (openBlock(), createElementBlock("div", {
+									key: 0,
+									class: normalizeClass(unref(alertDialogContent)())
+								}, [renderSlot(_ctx.$slots, "content")], 2)) : createCommentVNode("", true),
+								createElementVNode("div", { class: normalizeClass(unref(alertDialogActions)()) }, [createVNode(unref(AlertDialogCancel), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Button_default, {
 										variant: "soft",
 										tone: "neutral",
-										disabled: busy.value,
+										disabled: unref(busy),
 										onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
 									}, {
 										default: withCtx(() => [createTextVNode(toDisplayString(props.cancelText ?? unref(t).common.cancel), 1)]),
@@ -12228,17 +12326,26 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 									_: 1
 								}), createVNode(Button_default, {
 									tone: props.tone,
-									loading: busy.value,
-									onClick: confirm
+									loading: unref(busy),
+									disabled: unref(remaining) > 0,
+									onClick: unref(confirm)
 								}, {
-									default: withCtx(() => [createTextVNode(toDisplayString(props.confirmText ?? unref(t).common.confirm), 1)]),
+									default: withCtx(() => [createTextVNode(toDisplayString(props.confirmText ?? unref(t).common.confirm) + " ", 1), unref(remaining) > 0 ? (openBlock(), createElementBlock("span", {
+										key: 0,
+										class: normalizeClass(unref(alertDialogCountdown)())
+									}, "(" + toDisplayString(unref(remaining)) + ")", 3)) : createCommentVNode("", true)]),
 									_: 1
-								}, 8, ["tone", "loading"])])
+								}, 8, [
+									"tone",
+									"loading",
+									"disabled",
+									"onClick"
+								])], 2)
 							]),
 							_: 3
 						}, 8, ["aria-busy", "class"])]),
 						_: 3
-					})], 2)]),
+					}, 8, ["onEscapeKeyDown"])], 2)]),
 					_: 3
 				})]),
 				_: 3
@@ -12849,8 +12956,8 @@ 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_4$7 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_5$5 = { class: "px-(--hn-panel-p) py-1" };
-var _hoisted_6$4 = {
+var _hoisted_5$4 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_6$3 = {
 	key: 1,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
 };
@@ -12965,10 +13072,10 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 									key: 0,
 									class: "min-h-0 grow"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
 								})) : createCommentVNode("", true),
-								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$4, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
+								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
 							]),
 							_: 3
 						}, 8, [
@@ -14726,13 +14833,13 @@ var _hoisted_1$26 = [
 var _hoisted_2$15 = ["id", "for"];
 var _hoisted_3$7 = ["id"];
 var _hoisted_4$5 = ["id"];
-var _hoisted_5$4 = {
+var _hoisted_5$3 = {
 	key: 0,
 	"data-hn-form-field-message": "",
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
 };
-var _hoisted_6$3 = { class: "hn-collapse-body" };
-var _hoisted_7$2 = ["id"];
+var _hoisted_6$2 = { class: "hn-collapse-body" };
+var _hoisted_7$1 = ["id"];
 //#endregion
 //#region src/components/form-field/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
@@ -14849,11 +14956,11 @@ 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$4, [createElementVNode("div", _hoisted_6$3, [createElementVNode("p", {
+					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, [createElementVNode("div", _hoisted_6$2, [createElementVNode("p", {
 						id: unref(messageId),
 						class: normalizeClass(unref(formFieldMessage)()),
 						"aria-live": "polite"
-					}, toDisplayString(message.value), 11, _hoisted_7$2)])])) : createCommentVNode("", true)]),
+					}, toDisplayString(message.value), 11, _hoisted_7$1)])])) : createCommentVNode("", true)]),
 					_: 1
 				}, 16)
 			], 2)], 2)], 46, _hoisted_1$26);
@@ -15148,8 +15255,13 @@ var SegmentedControl_default = /* @__PURE__ */ defineComponent({
 							option.value === current.value ? (openBlock(), createBlock(Highlight_default, {
 								key: 0,
 								id: unref(highlightId),
+								axis: props.orientation === "vertical" ? "y" : "x",
 								class: normalizeClass(unref(segmentedThumb)())
-							}, null, 8, ["id", "class"])) : createCommentVNode("", true),
+							}, null, 8, [
+								"id",
+								"axis",
+								"class"
+							])) : createCommentVNode("", true),
 							createVNode(Ripple_default),
 							renderSlot(_ctx.$slots, "option", { option }, () => [createTextVNode(toDisplayString(option.label), 1)])
 						]),
@@ -15367,17 +15479,43 @@ async function tokenize(code, lang) {
 	}).tokens;
 }
 //#endregion
+//#region src/components/code-block/composables/useCodeHighlight.ts
+function useCodeHighlight(props) {
+	const tokens = shallowRef(null);
+	onMounted(() => {
+		watch(() => [
+			props.code,
+			props.lang,
+			props.html
+		], async ([code, lang, html]) => {
+			if (html || !lang) {
+				tokens.value = null;
+				return;
+			}
+			try {
+				const result = await tokenize(code, lang);
+				if (code === props.code && lang === props.lang) tokens.value = result;
+			} catch (error) {
+				tokens.value = null;
+				`${lang}${String(error)}`;
+			}
+		}, { immediate: true });
+	});
+	return tokens;
+}
+//#endregion
+//#region src/components/code-block/code-block.variants.ts
+var codeBlock = tv({ base: "relative flex min-h-0 min-w-0 flex-col" });
+var codeBlockArea = tv({ base: "hn-pre min-h-0 grow p-0" });
+var codeBlockContent = tv({ base: "hn-pre-content m-0 w-max min-w-full" });
+var codeBlockActions = tv({ base: "absolute top-2 end-2 flex items-center gap-2" });
+var codeBlockLabel = tv({ base: "text-faint font-mono text-xs select-none" });
+//#endregion
 //#region src/components/code-block/CodeBlock.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$23 = ["data-lang"];
-var _hoisted_2$13 = { class: "m-0" };
-var _hoisted_3$6 = ["innerHTML"];
-var _hoisted_4$4 = { key: 1 };
-var _hoisted_5$3 = { key: 2 };
-var _hoisted_6$2 = { class: "absolute top-2 end-2 flex items-center gap-2" };
-var _hoisted_7$1 = {
-	key: 0,
-	class: "text-faint font-mono text-xs select-none"
-};
+var _hoisted_2$13 = ["innerHTML"];
+var _hoisted_3$6 = { key: 1 };
+var _hoisted_4$4 = { key: 2 };
 //#endregion
 //#region src/components/code-block/CodeBlock.vue
 var CodeBlock_default = /* @__PURE__ */ defineComponent({
@@ -15398,53 +15536,37 @@ var CodeBlock_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const t = useUiLocale();
 		const tag = computed(() => props.label ?? props.lang);
-		const tokens = shallowRef(null);
-		onMounted(() => {
-			watch(() => [
-				props.code,
-				props.lang,
-				props.html
-			], async ([code, lang, html]) => {
-				if (html || !lang) {
-					tokens.value = null;
-					return;
-				}
-				try {
-					const result = await tokenize(code, lang);
-					if (code === props.code && lang === props.lang) tokens.value = result;
-				} catch (error) {
-					tokens.value = null;
-					`${lang}${String(error)}`;
-				}
-			}, { immediate: true });
-		});
+		const tokens = useCodeHighlight(props);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				"data-lang": props.lang,
-				class: normalizeClass(unref(cn)("relative", props.class))
+				class: normalizeClass(unref(cn)(unref(codeBlock)(), props.class))
 			}, [createVNode(ScrollArea_default, {
-				direction: "horizontal",
+				direction: "both",
 				focusable: "",
 				label: tag.value,
-				class: "hn-pre"
+				class: normalizeClass(unref(codeBlockArea)())
 			}, {
-				default: withCtx(() => [createElementVNode("pre", _hoisted_2$13, [props.html ? (openBlock(), createElementBlock("code", {
+				default: withCtx(() => [createElementVNode("pre", { class: normalizeClass(unref(codeBlockContent)()) }, [props.html ? (openBlock(), createElementBlock("code", {
 					key: 0,
 					innerHTML: props.html
-				}, null, 8, _hoisted_3$6)) : tokens.value ? (openBlock(), createElementBlock("code", _hoisted_4$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(tokens.value, (line, i) => {
+				}, null, 8, _hoisted_2$13)) : unref(tokens) ? (openBlock(), createElementBlock("code", _hoisted_3$6, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(tokens), (line, i) => {
 					return openBlock(), createElementBlock(Fragment, { key: i }, [createTextVNode(toDisplayString(i ? "\n" : ""), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(line, (tk, j) => {
 						return openBlock(), createElementBlock("span", {
 							key: j,
 							style: normalizeStyle(tk.htmlStyle)
 						}, toDisplayString(tk.content), 5);
 					}), 128))], 64);
-				}), 128))])) : (openBlock(), createElementBlock("code", _hoisted_5$3, toDisplayString(__props.code), 1))])]),
+				}), 128))])) : (openBlock(), createElementBlock("code", _hoisted_4$4, toDisplayString(__props.code), 1))], 2)]),
 				_: 1
-			}, 8, ["label"]), createElementVNode("div", _hoisted_6$2, [tag.value ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(tag.value), 1)) : createCommentVNode("", true), __props.copyable ? (openBlock(), createBlock(CopyButton_default, {
+			}, 8, ["label", "class"]), createElementVNode("div", { class: normalizeClass(unref(codeBlockActions)()) }, [tag.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(codeBlockLabel)())
+			}, toDisplayString(tag.value), 3)) : createCommentVNode("", true), __props.copyable ? (openBlock(), createBlock(CopyButton_default, {
 				key: 1,
 				text: props.code,
 				label: unref(t).codeblock.copy
-			}, null, 8, ["text", "label"])) : createCommentVNode("", true)])], 10, _hoisted_1$23);
+			}, null, 8, ["text", "label"])) : createCommentVNode("", true)], 2)], 10, _hoisted_1$23);
 		};
 	}
 });
@@ -17141,6 +17263,7 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 				default: withCtx(() => [unref(span) ? (openBlock(), createBlock(Highlight_default, {
 					key: 0,
 					as: "li",
+					axis: "y",
 					role: "presentation",
 					style: normalizeStyle({ gridRow: unref(span) }),
 					class: "bg-accent col-start-1 -ms-px w-0.5 self-stretch justify-self-start rounded-full"
@@ -17241,11 +17364,157 @@ var BreadcrumbSeparator_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/popover/composables/usePopoverCloseFocus.ts
+function usePopoverCloseFocus(emit) {
+	const root = injectPopoverRootContext();
+	return (event) => {
+		emit("closeAutoFocus", event);
+		if (!event.defaultPrevented || !root.triggerElement.value) return;
+		const trigger = root.triggerElement.value;
+		root.triggerElement.value = void 0;
+		nextTick(() => {
+			root.triggerElement.value ??= trigger;
+		});
+	};
+}
+//#endregion
+//#region src/components/popover/PopoverContent.vue
+var PopoverContent_default = /* @__PURE__ */ defineComponent({
+	name: "HnPopoverContent",
+	__name: "PopoverContent",
+	props: {
+		forceMount: { type: Boolean },
+		memoDependencies: {},
+		side: {},
+		sideOffset: {},
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		dir: {},
+		asChild: { type: Boolean },
+		as: {},
+		disableOutsidePointerEvents: { type: Boolean }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const forwarded = useForwardPropsEmits(props, emit);
+		const closeAutoFocus = usePopoverCloseFocus(emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverContent), mergeProps({
+				...unref(forwarded),
+				onCloseAutoFocus: unref(closeAutoFocus)
+			}, { reference: props.reference }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["reference"]);
+		};
+	}
+});
+//#endregion
+//#region src/lib/anchored-overlay.ts
+function useAnchoredOverlay(props, open, emit, openAutoFocus) {
+	const trigger = shallowRef(null);
+	const triggerElement = computed(() => trigger.value?.$el?.nodeType === 1 ? trigger.value.$el : void 0);
+	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"
+	});
+	let previousFocus = null;
+	let interactedOutside = false;
+	function once(handler) {
+		const handled = /* @__PURE__ */ new WeakSet();
+		return (event) => {
+			if (handled.has(event)) return;
+			handled.add(event);
+			handler(event);
+		};
+	}
+	watch(visible, (active) => {
+		if (!active) return;
+		previousFocus = (props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument)?.activeElement;
+		interactedOutside = false;
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const onCloseAutoFocus = once((event) => {
+		emit("closeAutoFocus", event);
+		const cancelled = event.defaultPrevented;
+		event.preventDefault();
+		const panel = event.target;
+		const target = triggerElement.value ?? previousFocus;
+		const restore = !cancelled && !interactedOutside;
+		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();
+		emit("interactOutside", event);
+		const original = event.detail.originalEvent;
+		const rightClick = "button" in original && (original.button === 2 || original.button === 0 && original.ctrlKey);
+		if (!event.defaultPrevented && (!props.modal || rightClick)) interactedOutside = true;
+	});
+	return {
+		trigger,
+		reference,
+		visible,
+		events: {
+			...openAutoFocus ? { onOpenAutoFocus: once(openAutoFocus) } : {},
+			onCloseAutoFocus,
+			onInteractOutside,
+			onPointerDownOutside: once((event) => emit("pointerDownOutside", event)),
+			onFocusOutside: once((event) => emit("focusOutside", event)),
+			onEscapeKeyDown: once((event) => emit("escapeKeyDown", event))
+		}
+	};
+}
+//#endregion
 //#region src/components/popover/Popover.vue
 var Popover_default = /* @__PURE__ */ defineComponent({
 	name: "HnPopover",
+	inheritAttrs: false,
 	__name: "Popover",
 	props: /*@__PURE__*/ mergeModels({
+		anchor: {},
+		modal: {
+			type: Boolean,
+			default: true
+		},
 		side: { default: "bottom" },
 		align: { default: "center" },
 		sideOffset: { default: 8 },
@@ -17258,10 +17527,19 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: ["update:open"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels([
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	], ["update:open"]),
+	setup(__props, { emit: __emit }) {
 		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 pressOrigin = computed(() => {
 			if (props.side === "left") return "right";
 			if (props.side === "right") return "left";
@@ -17271,23 +17549,30 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(PopoverRoot), {
-				open: open.value,
-				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-				modal: ""
+				open: unref(visible),
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => isRef(visible) ? visible.value = $event : null),
+				modal: props.modal
 			}, {
-				default: withCtx(() => [createVNode(unref(PopoverTrigger), {
+				default: withCtx(() => [_ctx.$slots.default ? (openBlock(), createBlock(unref(PopoverTrigger), {
+					key: 0,
+					ref_key: "trigger",
+					ref: trigger,
 					"as-child": "",
 					style: normalizeStyle({ transformOrigin: pressOrigin.value })
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["style"]), createVNode(unref(PopoverPortal), null, {
-					default: withCtx(() => [createVNode(unref(PopoverContent), {
+				}, 8, ["style"])) : createCommentVNode("", true), createVNode(unref(PopoverPortal), null, {
+					default: withCtx(() => [createVNode(PopoverContent_default, mergeProps({
+						..._ctx.$attrs,
+						...unref(events)
+					}, {
+						reference: unref(reference),
 						"as-child": "",
 						side: props.side,
 						align: props.align,
 						"side-offset": props.sideOffset
-					}, {
+					}), {
 						default: withCtx(() => [createVNode(Card_default, {
 							padded: props.padded,
 							class: normalizeClass(unref(cn)("hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none", props.class))
@@ -17296,7 +17581,8 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 							_: 3
 						}, 8, ["padded", "class"])]),
 						_: 3
-					}, 8, [
+					}, 16, [
+						"reference",
 						"side",
 						"align",
 						"side-offset"
@@ -17304,7 +17590,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["open"]);
+			}, 8, ["open", "modal"]);
 		};
 	}
 });
@@ -17312,9 +17598,16 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 //#region src/components/dropdown-menu/DropdownMenu.vue
 var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 	name: "HnDropdownMenu",
+	inheritAttrs: false,
 	__name: "DropdownMenu",
 	props: /*@__PURE__*/ mergeModels({
 		label: {},
+		anchor: {},
+		modal: {
+			type: Boolean,
+			default: true
+		},
+		dir: {},
 		side: { default: "bottom" },
 		align: { default: "center" },
 		sideOffset: { default: 8 },
@@ -17323,10 +17616,16 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
-	emits: ["update:open"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels([
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"closeAutoFocus"
+	], ["update:open"]),
+	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const open = useModel(__props, "open");
+		const { trigger, reference, visible, events } = useAnchoredOverlay(props, useModel(__props, "open"), __emit);
 		const pressOrigin = computed(() => {
 			if (props.side === "left") return "right";
 			if (props.side === "right") return "left";
@@ -17336,25 +17635,33 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenuRoot), {
-				open: open.value,
-				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-				modal: ""
+				open: unref(visible),
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => isRef(visible) ? visible.value = $event : null),
+				modal: props.modal,
+				dir: props.dir
 			}, {
-				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), {
+				default: withCtx(() => [_ctx.$slots.default ? (openBlock(), createBlock(unref(DropdownMenuTrigger), {
+					key: 0,
+					ref_key: "trigger",
+					ref: trigger,
 					"as-child": "",
 					class: "group/hn-disclosure",
 					style: normalizeStyle({ transformOrigin: pressOrigin.value })
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
-				}, 8, ["style"]), createVNode(unref(DropdownMenuPortal), null, {
-					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
-						"as-child": "",
+				}, 8, ["style"])) : createCommentVNode("", true), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [unref(reference) ? (openBlock(), createBlock(unref(DropdownMenuContent), mergeProps({ key: 0 }, {
 						"aria-label": props.label,
+						..._ctx.$attrs,
+						...unref(events)
+					}, {
+						reference: unref(reference),
+						"as-child": "",
 						side: props.side,
 						align: props.align,
 						"side-offset": props.sideOffset
-					}, {
+					}), {
 						default: withCtx(() => [createVNode(Card_default, {
 							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))
@@ -17363,16 +17670,20 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent({
 							_: 3
 						}, 8, ["class"])]),
 						_: 3
-					}, 8, [
-						"aria-label",
+					}, 16, [
+						"reference",
 						"side",
 						"align",
 						"side-offset"
-					])]),
+					])) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["open"]);
+			}, 8, [
+				"open",
+				"modal",
+				"dir"
+			]);
 		};
 	}
 });