@hina-ui/vue 1.1.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, injectTabsRootContext, injectTooltipProviderContext, useBodyScrollLock, 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",
@@ -4296,6 +4342,11 @@ var Avatar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/avatar/utils/children.ts
+function flattenChildren(nodes) {
+	return (nodes ?? []).flatMap((node) => node.type === Fragment ? flattenChildren(node.children) : [node]);
+}
+//#endregion
 //#region src/components/avatar/avatar-group.variants.ts
 var avatarGroupItem = tv({
 	base: "ring-surface first:me-0 ring-2",
@@ -4319,10 +4370,7 @@ var AvatarGroup_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const slots = useSlots();
-		function flatten(nodes) {
-			return (nodes ?? []).flatMap((node) => node.type === Fragment ? flatten(node.children) : [node]);
-		}
-		const children = computed(() => flatten(slots.default?.()));
+		const children = computed(() => flattenChildren(slots.default?.()));
 		const visible = computed(() => props.max && props.max > 0 ? children.value.slice(0, props.max) : children.value);
 		const hidden = computed(() => children.value.length - visible.value.length);
 		const item = computed(() => avatarGroupItem({ size: props.size }));
@@ -4482,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"
@@ -4513,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)]),
@@ -4565,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"
 };
@@ -4594,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);
 		};
 	}
 });
@@ -4636,21 +4684,31 @@ function useCollapseHooks(axis = "y") {
 	onBeforeUpdate(remember);
 	return collapseHooks(axis, () => parent);
 }
+function useCollapseGap() {
+	const content = shallowRef(null);
+	function measure() {
+		const el = content.value?.$el;
+		if (el instanceof Element) writeCollapseGap(el, el.parentElement);
+	}
+	onMounted(measure);
+	onBeforeUpdate(measure);
+	return content;
+}
 //#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"
 };
@@ -4694,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))
 				}, [
@@ -4703,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);
 		};
@@ -4719,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({
@@ -4736,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);
 		};
 	}
 });
@@ -4760,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({
@@ -4796,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, [
@@ -4873,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({
@@ -4904,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"]);
 		};
@@ -4951,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({
@@ -4976,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);
 		};
 	}
 });
@@ -5286,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")
 				]),
@@ -5333,10 +5396,6 @@ function controlOf(node) {
 	const control = node.matches(CONTROL) ? node : node.querySelector(CONTROL);
 	return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement ? control : null;
 }
-/**
-* 点击输入面里非交互的部分（附属格、前后缀、空白）时把焦点交给最近的输入区，返回被聚焦的输入区；点击落在交互元素上或者没有可聚焦的输入区时返回 null。
-* 点击所在的段自己含输入区时只认它、不动光标（段内的处理器已经定过位）；否则先向后找，再向前找；落在点击位置之后的输入区把光标放到开头，之前的放到末尾。
-*/
 function focusFieldFrom(root, target) {
 	if (target.closest(INTERACTIVE)) return null;
 	const segments = Array.from(root.children);
@@ -5361,11 +5420,11 @@ function focusFieldFrom(root, target) {
 //#endregion
 //#region src/components/input/input.variants.ts
 var inputHost = tv({
-	base: ["group/hn-field hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
+	base: ["group/hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
 	variants: {
 		variant: {
-			primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]",
-			secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]"
+			primary: "hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]",
+			secondary: "hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]"
 		},
 		size: {
 			sm: "h-[var(--hn-control-h-sm)] text-sm [--hn-input-h:var(--hn-control-h-sm)] [--hn-input-px:var(--hn-control-px-sm)] [--hn-input-icon:0.875rem]",
@@ -5378,6 +5437,10 @@ var inputHost = tv({
 		size: "md"
 	}
 });
+var textInputHost = tv({
+	extend: inputHost,
+	variants: { variant: { bare: "rounded-none border-0 bg-transparent shadow-none outline-none" } }
+});
 var inputControl = tv({
 	base: ["h-full min-w-0 flex-1 bg-transparent px-[var(--hn-input-px)] text-inherit outline-none [font:inherit]", "placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed"],
 	variants: {
@@ -5475,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",
@@ -5537,7 +5600,7 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 				"data-invalid": unref(invalid) ? "" : void 0,
 				"data-disabled": unref(disabled) ? "" : void 0,
 				"aria-busy": props.loading || void 0,
-				class: normalizeClass(unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
+				class: normalizeClass(unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(textInputHost)({
 					variant: props.variant,
 					size: props.size
 				}), props.class)),
@@ -5567,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",
@@ -5603,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);
 		};
 	}
 });
@@ -5696,10 +5759,6 @@ var MIRRORED = [
 	"border-bottom-width",
 	"border-left-width"
 ];
-/**
-* 量出 textarea 光标所在行的顶边（相对 textarea 自身的边框盒）。
-* 原生没有光标几何 API，只能用同排版的镜像块把光标前的文字排一遍。
-*/
 function caretTop(node, at = node.selectionEnd) {
 	const style = getComputedStyle(node);
 	const mirror = node.ownerDocument.createElement("div");
@@ -5725,13 +5784,63 @@ function caretTop(node, at = node.selectionEnd) {
 	return top;
 }
 //#endregion
+//#region src/components/textarea/composables/useTextareaSizing.ts
+function useTextareaSizing(props, model) {
+	const el = shallowRef(null);
+	const area = shallowRef();
+	const bounds = computed(() => {
+		const options = props.autosize === true ? {} : props.autosize || null;
+		return {
+			min: options?.minRows ?? props.rows,
+			max: options?.maxRows
+		};
+	});
+	function fit() {
+		const node = el.value;
+		if (!node) return;
+		node.style.height = "auto";
+		node.style.height = `${node.scrollHeight}px`;
+		if (document.activeElement === node) reveal(node);
+	}
+	function reveal(node) {
+		const scroller = area.value?.viewport ?? node.closest("[data-overlayscrollbars-initialize]");
+		if (!scroller) return;
+		const box = scroller.getBoundingClientRect();
+		const top = node.getBoundingClientRect().top + caretTop(node);
+		const bottom = top + parseFloat(getComputedStyle(node).lineHeight);
+		if (bottom > box.bottom) scroller.scrollTop += bottom - box.bottom;
+		else if (top < box.top) scroller.scrollTop -= box.top - top;
+	}
+	function focus(event) {
+		const node = el.value;
+		if (!node || node.disabled || event.target === node) return;
+		node.focus();
+		node.setSelectionRange(node.value.length, node.value.length);
+	}
+	onMounted(fit);
+	watch(() => [
+		model.value,
+		props.size,
+		props.variant,
+		bounds.value.min
+	], () => void nextTick(fit));
+	return {
+		el,
+		area,
+		bounds,
+		fit,
+		focus
+	};
+}
+//#endregion
 //#region src/components/textarea/textarea.variants.ts
 var textarea = tv({
-	base: ["hn-field text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
+	base: ["text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
 	variants: {
 		variant: {
-			primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]",
-			secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]"
+			bare: "rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]",
+			primary: "hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]",
+			secondary: "hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]"
 		},
 		size: {
 			sm: "text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]",
@@ -5756,13 +5865,13 @@ var textarea = tv({
 });
 var textareaField = tv({ base: [
 	"block w-full resize-none overflow-hidden bg-transparent text-inherit outline-none [font:inherit]",
-	"px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_1px)]",
+	"px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_var(--hn-textarea-border-w,1px))]",
 	"placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed"
 ] });
 //#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",
@@ -5796,51 +5905,15 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 		});
 		const props = __props;
 		const model = useModel(__props, "modelValue");
-		const el = shallowRef(null);
-		const area = shallowRef();
-		const bounds = computed(() => {
-			const options = props.autosize === true ? {} : props.autosize || null;
-			return {
-				min: options?.minRows ?? props.rows,
-				max: options?.maxRows
-			};
-		});
-		function fit() {
-			const node = el.value;
-			if (!node) return;
-			node.style.height = "auto";
-			node.style.height = `${node.scrollHeight}px`;
-			if (document.activeElement === node) reveal(node);
-		}
-		function reveal(node) {
-			const scroller = area.value?.viewport ?? node.closest("[data-overlayscrollbars-initialize]");
-			if (!scroller) return;
-			const box = scroller.getBoundingClientRect();
-			const top = node.getBoundingClientRect().top + caretTop(node);
-			const bottom = top + parseFloat(getComputedStyle(node).lineHeight);
-			if (bottom > box.bottom) scroller.scrollTop += bottom - box.bottom;
-			else if (top < box.top) scroller.scrollTop -= box.top - top;
-		}
-		function focus(event) {
-			const node = el.value;
-			if (!node || node.disabled || event.target === node) return;
-			node.focus();
-			node.setSelectionRange(node.value.length, node.value.length);
-		}
-		onMounted(fit);
-		watch(() => [
-			model.value,
-			props.size,
-			bounds.value.min
-		], () => void nextTick(fit));
+		const { el, area, bounds, fit, focus } = useTextareaSizing(props, model);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				"data-hn-textarea": "",
 				"data-invalid": unref(invalid) ? "" : void 0,
 				"data-disabled": unref(disabled) ? "" : void 0,
 				style: normalizeStyle({
-					"--hn-textarea-rows": bounds.value.min,
-					"--hn-textarea-max-rows": bounds.value.max
+					"--hn-textarea-rows": unref(bounds).min,
+					"--hn-textarea-max-rows": unref(bounds).max
 				}),
 				class: normalizeClass(unref(cn)(unref(textarea)({
 					variant: props.variant,
@@ -5848,7 +5921,7 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 					autosize: Boolean(props.autosize),
 					resize: props.autosize ? "none" : props.resize
 				}), props.class)),
-				onClick: focus
+				onClick: _cache[2] || (_cache[2] = (...args) => unref(focus) && unref(focus)(...args))
 			}, [createVNode(ScrollArea_default, {
 				ref_key: "area",
 				ref: area,
@@ -5861,28 +5934,34 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 				}, _ctx.$attrs, {
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					id: unref(fieldId),
-					rows: bounds.value.min,
+					rows: unref(bounds).min,
 					disabled: unref(disabled),
 					"aria-invalid": unref(invalid) || void 0,
 					"aria-describedby": unref(describedBy),
 					class: unref(textareaField)(),
-					onInput: fit
-				}), null, 16, _hoisted_2$35), [[vModelText, model.value]])]),
+					onInput: _cache[1] || (_cache[1] = (...args) => unref(fit) && unref(fit)(...args))
+				}), null, 16, _hoisted_2$34), [[vModelText, model.value]])]),
 				_: 1
-			}, 512)], 14, _hoisted_1$74);
+			}, 512)], 14, _hoisted_1$73);
 		};
 	}
 });
 //#endregion
 //#region src/components/number-input/number-input.variants.ts
 var numberInputStepper = tv({
-	base: "border-line flex shrink-0 flex-col border-s",
-	variants: { size: {
-		sm: "[&_svg]:size-3",
-		md: "[&_svg]:size-3",
-		lg: "[&_svg]:size-3.5"
-	} },
-	defaultVariants: { size: "md" }
+	base: "flex shrink-0 flex-col",
+	variants: {
+		divided: { true: "border-line border-s" },
+		size: {
+			sm: "[&_svg]:size-3",
+			md: "[&_svg]:size-3",
+			lg: "[&_svg]:size-3.5"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		divided: true
+	}
 });
 var numberInputStep = tv({
 	base: [
@@ -5927,6 +6006,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 		const emits = __emit;
 		const t = useUiLocale();
 		const group = injectInputGroup();
+		const divided = computed(() => (group ? group.variant?.value : props.variant) !== "bare");
 		const size = computed(() => group ? group.size.value : props.size);
 		const { id: fieldId, invalid, disabled, describedBy } = useFieldControl({
 			invalid: () => props.invalid || !!group?.invalid.value,
@@ -5949,7 +6029,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 				"data-hn-number-input": "",
 				"data-invalid": unref(invalid) ? "" : void 0,
 				"data-disabled": unref(disabled) ? "" : void 0,
-				class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
+				class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(textInputHost)({
 					variant: props.variant,
 					size: props.size
 				}), props.class)
@@ -5966,7 +6046,10 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 					"class"
 				]), props.controls ? (openBlock(), createElementBlock("div", {
 					key: 0,
-					class: normalizeClass(unref(numberInputStepper)({ size: size.value }))
+					class: normalizeClass(unref(numberInputStepper)({
+						size: size.value,
+						divided: divided.value
+					}))
 				}, [createVNode(unref(NumberFieldIncrement), {
 					"aria-label": unref(t).numberInput.increase,
 					class: normalizeClass(unref(numberInputStep)())
@@ -5975,7 +6058,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 					_: 1
 				}, 8, ["aria-label", "class"]), createVNode(unref(NumberFieldDecrement), {
 					"aria-label": unref(t).numberInput.decrease,
-					class: normalizeClass(unref(numberInputStep)({ divided: true }))
+					class: normalizeClass(unref(numberInputStep)({ divided: divided.value }))
 				}, {
 					default: withCtx(() => [createVNode(unref(ChevronDown))]),
 					_: 1
@@ -5993,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({
@@ -6037,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",
@@ -6124,15 +6207,15 @@ var SearchInput_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/input-group/input-group.variants.ts
-var inputGroup = tv({ base: [
-	"[&>*+*]:border-s [&>*+*]:border-s-line",
-	"[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]",
-	"[&>button:focus-visible]:-outline-offset-2"
-] });
+var inputGroup = tv({
+	base: ["[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]", "[&>button:focus-visible]:-outline-offset-2"],
+	variants: { divided: { true: "[&>*+*]:border-s [&>*+*]:border-s-line" } },
+	defaultVariants: { divided: true }
+});
 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({
@@ -6149,6 +6232,7 @@ var InputGroup_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const { disabled } = useFieldControl({ disabled: () => props.disabled });
 		provideInputGroup({
+			variant: computed(() => props.variant),
 			size: computed(() => props.size),
 			disabled,
 			invalid: computed(() => !!props.invalid)
@@ -6158,12 +6242,12 @@ var InputGroup_default = /* @__PURE__ */ defineComponent({
 				"data-hn-input-group": "",
 				"data-invalid": props.invalid ? "" : void 0,
 				"data-disabled": unref(disabled) ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(inputHost)({
+				class: normalizeClass(unref(cn)(unref(textInputHost)({
 					variant: props.variant,
 					size: props.size
-				}), unref(inputGroup)(), props.class)),
+				}), 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);
 		};
 	}
 });
@@ -6302,6 +6386,11 @@ var selectTrigger = tv({ base: [
 	"disabled:cursor-not-allowed disabled:opacity-50",
 	"[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0"
 ] });
+var selectButton = tv({ base: [
+	"group/hn-disclosure flex h-full min-w-0 flex-1 cursor-pointer items-center bg-transparent ps-[var(--hn-input-px)] pe-0 text-start text-inherit outline-none [font:inherit]",
+	"data-placeholder:text-faint data-placeholder:font-normal disabled:cursor-not-allowed",
+	"[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0"
+] });
 var selectContent = tv({ base: ["hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-select-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none", "[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]"] });
 var selectList = tv({ base: "max-h-[min(20rem,var(--reka-select-content-available-height))]" });
 var selectItem = tv({ base: [
@@ -6313,30 +6402,36 @@ var selectItem = tv({ base: [
 var selectLabel = tv({ base: "text-muted px-2.5 py-1.5 text-xs font-medium" });
 var selectEmpty = tv({ base: "text-muted px-2.5 py-2 text-sm" });
 var selectListBody = tv({ base: "flex flex-col p-1" });
+var selectHost = tv({ base: "relative cursor-pointer" });
+var selectValue = tv({
+	base: "min-w-0 flex-1 truncate",
+	variants: { clearing: { true: "pe-[var(--hn-input-h)]" } }
+});
+var selectClearSlot = tv({ base: [inputActionSlot(), "absolute inset-y-0 end-[var(--hn-input-h)]"] });
 //#endregion
 //#region src/components/select/types.ts
 function isOptionGroup(item) {
-	return "options" in item;
+	return !("value" in item) && "options" in item;
 }
 function flattenOptions(items) {
 	return items.flatMap((item) => isOptionGroup(item) ? item.options : [item]);
 }
 //#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$6 = {
+var _hoisted_5$8 = { class: "min-w-0 flex-1" };
+var _hoisted_6$6 = { class: "block truncate" };
+var _hoisted_7$4 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/select/SelectList.vue
 var SelectList_default = /* @__PURE__ */ defineComponent({
@@ -6382,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))]),
@@ -6405,9 +6500,9 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 									class: normalizeClass(unref(selectItem)())
 								}, {
 									default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$6, 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$2, [createVNode(unref(SelectItemIndicator), null, {
+									}, 1024), createElementVNode("span", _hoisted_8$1, [createVNode(unref(SelectItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -6434,8 +6529,38 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/select/composables/useClearTransition.ts
+function useClearTransition(visible) {
+	const leaving = ref(false);
+	const reserved = computed(() => visible() || leaving.value);
+	function beforeEnter(element) {
+		leaving.value = false;
+		element.removeAttribute("inert");
+	}
+	function beforeLeave(element) {
+		leaving.value = true;
+		element.setAttribute("inert", "");
+	}
+	function finishLeave() {
+		leaving.value = false;
+	}
+	return {
+		reserved,
+		hooks: {
+			beforeEnter,
+			beforeLeave,
+			afterLeave: finishLeave,
+			leaveCancelled: finishLeave
+		}
+	};
+}
+//#endregion
 //#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$70 = { class: "min-w-0 flex-1 truncate" };
+var _hoisted_1$69 = [
+	"dir",
+	"data-invalid",
+	"data-disabled"
+];
 //#endregion
 //#region src/components/select/Select.vue
 var Select_default = /* @__PURE__ */ defineComponent({
@@ -6445,6 +6570,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		placeholder: {},
+		clearable: { type: Boolean },
 		name: {},
 		required: { type: Boolean },
 		autocomplete: {},
@@ -6462,19 +6588,31 @@ var Select_default = /* @__PURE__ */ defineComponent({
 		},
 		"openModifiers": {}
 	}),
-	emits: ["update:modelValue", "update:open"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels(["clear"], ["update:modelValue", "update:open"]),
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const t = useUiLocale();
 		const group = injectInputGroup();
+		const direction = useDirection();
 		const keyboard = ref(false);
+		const host = shallowRef(null);
+		const trigger = shallowRef(null);
 		const { id: fieldId, invalid, disabled, describedBy } = useFieldControl({
 			invalid: () => props.invalid || !!group?.invalid.value,
 			disabled: () => props.disabled || !!group?.disabled.value
 		});
 		const selected = computed(() => flattenOptions(props.options).find((option) => option.value === model.value));
+		const clearing = computed(() => !!props.clearable && model.value != null && model.value !== "" && !disabled.value);
+		const { reserved: clearSpace, hooks: clearTransition } = useClearTransition(() => clearing.value);
+		function clear() {
+			if (disabled.value || model.value == null || model.value === "") return;
+			model.value = null;
+			emit("clear");
+			trigger.value?.$el.focus();
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectRoot), {
 				modelValue: model.value,
@@ -6486,30 +6624,57 @@ var Select_default = /* @__PURE__ */ defineComponent({
 				required: props.required,
 				autocomplete: props.autocomplete
 			}, {
-				default: withCtx(() => [createVNode(unref(SelectTrigger), mergeProps(_ctx.$attrs, {
-					id: unref(fieldId),
-					"aria-describedby": unref(describedBy),
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "host",
+					ref: host,
+					dir: unref(direction),
 					"data-hn-select": "",
-					onKeydown: _cache[0] || (_cache[0] = ($event) => keyboard.value = true),
-					onPointerdown: _cache[1] || (_cache[1] = ($event) => keyboard.value = false),
 					"data-invalid": unref(invalid) ? "" : void 0,
 					"data-disabled": unref(disabled) ? "" : void 0,
-					"aria-invalid": unref(invalid) || void 0,
-					class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
+					class: normalizeClass(unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
 						variant: props.variant,
 						size: props.size
-					}), unref(selectTrigger)(), props.class)
+					}), unref(selectHost)(), props.class))
+				}, [createVNode(unref(SelectTrigger), mergeProps({
+					ref_key: "trigger",
+					ref: trigger
+				}, _ctx.$attrs, {
+					reference: host.value ?? void 0,
+					id: unref(fieldId),
+					"aria-describedby": unref(describedBy),
+					"aria-invalid": unref(invalid) || void 0,
+					"data-hn-select-trigger": "",
+					onKeydown: _cache[0] || (_cache[0] = ($event) => keyboard.value = true),
+					onPointerdown: _cache[1] || (_cache[1] = ($event) => keyboard.value = false),
+					class: unref(selectButton)()
 				}), {
-					default: withCtx(() => [createElementVNode("span", _hoisted_1$70, [selected.value ? renderSlot(_ctx.$slots, "value", { option: selected.value }, () => [createTextVNode(toDisplayString(selected.value.label), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder ?? unref(t).select.placeholder), 1)], 64))]), createElementVNode("span", { class: normalizeClass(unref(inputAdornment)()) }, [createVNode(DisclosureIcon_default)], 2)]),
+					default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(selectValue)({ clearing: unref(clearSpace) })) }, [selected.value ? renderSlot(_ctx.$slots, "value", { option: selected.value }, () => [createTextVNode(toDisplayString(selected.value.label), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder ?? unref(t).select.placeholder), 1)], 64))], 2), createElementVNode("span", { class: normalizeClass(unref(inputAdornment)()) }, [createVNode(DisclosureIcon_default)], 2)]),
 					_: 3
 				}, 16, [
+					"reference",
 					"id",
 					"aria-describedby",
-					"data-invalid",
-					"data-disabled",
 					"aria-invalid",
 					"class"
-				]), createVNode(SelectList_default, {
+				]), createVNode(Transition, mergeProps({
+					"enter-active-class": "hn-transition-base",
+					"enter-from-class": "scale-90 opacity-0",
+					"leave-active-class": "hn-transition",
+					"leave-to-class": "scale-90 opacity-0"
+				}, toHandlers(unref(clearTransition))), {
+					default: withCtx(() => [clearing.value ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(selectClearSlot)())
+					}, [createVNode(InputAction_default, {
+						"data-hn-select-clear": "",
+						label: unref(t).common.clear,
+						onClick: clear
+					}, {
+						default: withCtx(() => [createVNode(unref(X))]),
+						_: 1
+					}, 8, ["label"])], 2)) : createCommentVNode("", true)]),
+					_: 1
+				}, 16)], 10, _hoisted_1$69), createVNode(SelectList_default, {
 					options: props.options,
 					keyboard: keyboard.value
 				}, {
@@ -6538,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",
@@ -6653,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",
@@ -6668,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",
@@ -6721,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, {
@@ -6748,20 +6913,20 @@ 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$5 = {
+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"
 };
-var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/combobox/ComboboxList.vue
 var ComboboxList_default = /* @__PURE__ */ defineComponent({
@@ -6806,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
 											})])]),
@@ -6826,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$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$1, [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
 									})])]),
@@ -6854,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({
@@ -6994,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,
@@ -7043,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"
 };
@@ -7088,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)())
@@ -7439,32 +7604,61 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/listbox/ListboxOptionContent.vue?vue&type=script&setup=true&lang.ts
+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"
+};
+var _hoisted_4$9 = {
+	key: 1,
+	class: "flex size-4 shrink-0 items-center justify-center"
+};
+//#endregion
+//#region src/components/listbox/ListboxOptionContent.vue
+var ListboxOptionContent_default = /* @__PURE__ */ defineComponent({
+	name: "HnListboxOptionContent",
+	inheritAttrs: false,
+	__name: "ListboxOptionContent",
+	props: { option: {} },
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const { isSelected: selected } = injectListboxItemContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", _hoisted_1$64, [renderSlot(_ctx.$slots, "option", {
+				option: props.option,
+				selected: unref(selected)
+			}, () => [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, {
+				default: withCtx(() => [createVNode(unref(Check))]),
+				_: 1
+			})]))], 64);
+		};
+	}
+});
+//#endregion
 //#region src/components/listbox/listbox.variants.ts
 var listbox = tv({
 	base: ["flex w-full min-w-0 flex-col overflow-hidden rounded-md data-disabled:opacity-50", "[&:not(:focus-within)_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]"],
 	variants: { variant: {
 		primary: "border-line bg-surface border shadow-sm",
-		secondary: "bg-inset"
+		secondary: "bg-inset",
+		bare: "rounded-none border-0 bg-transparent shadow-none"
 	} },
 	defaultVariants: { variant: "primary" }
 });
-var listboxContent = tv({ base: "flex flex-col p-1 outline-none" });
-//#endregion
-//#region src/components/listbox/Listbox.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 = {
-	key: 0,
-	class: "text-muted block truncate text-xs"
-};
-var _hoisted_4$9 = { class: "flex size-4 shrink-0 items-center justify-center" };
-var _hoisted_5$6 = { class: "min-w-0 flex-1" };
-var _hoisted_6$5 = { class: "block truncate" };
-var _hoisted_7$4 = {
-	key: 0,
-	class: "text-muted block truncate text-xs"
-};
-var _hoisted_8 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var listboxContent = tv({
+	base: "flex flex-col outline-none",
+	variants: { padded: {
+		true: "p-1",
+		false: "p-0"
+	} },
+	defaultVariants: { padded: true }
+});
 //#endregion
 //#region src/components/listbox/Listbox.vue
 var Listbox_default = /* @__PURE__ */ defineComponent({
@@ -7475,6 +7669,10 @@ var Listbox_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		multiple: { type: Boolean },
 		maxHeight: { default: "20rem" },
+		padded: {
+			type: Boolean,
+			default: true
+		},
 		variant: {},
 		disabled: { type: Boolean },
 		class: {}
@@ -7486,6 +7684,7 @@ var Listbox_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const model = useModel(__props, "modelValue");
+		const slots = useSlots();
 		const t = useUiLocale();
 		const { labelledBy, invalid, disabled, describedBy } = useFieldControl({ disabled: () => props.disabled });
 		return (_ctx, _cache) => {
@@ -7503,7 +7702,7 @@ var Listbox_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(unref(cn)(unref(listbox)({ variant: props.variant }), props.class))
 			}, {
 				default: withCtx(() => [createVNode(ScrollArea_default, { style: normalizeStyle({ maxHeight: props.maxHeight }) }, {
-					default: withCtx(() => [createVNode(unref(ListboxContent), mergeProps(_ctx.$attrs, { class: unref(listboxContent)() }), {
+					default: withCtx(() => [createVNode(unref(ListboxContent), mergeProps(_ctx.$attrs, { class: unref(listboxContent)({ padded: props.padded }) }), {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (item) => {
 							return openBlock(), createElementBlock(Fragment, { key: unref(isOptionGroup)(item) ? item.label : item.value }, [unref(isOptionGroup)(item) ? (openBlock(), createBlock(unref(ListboxGroup), { key: 0 }, {
 								default: withCtx(() => [createVNode(unref(ListboxGroupLabel), { class: normalizeClass(unref(selectLabel)()) }, {
@@ -7516,10 +7715,15 @@ var Listbox_default = /* @__PURE__ */ defineComponent({
 										disabled: option.disabled,
 										class: normalizeClass(unref(selectItem)())
 									}, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_1$65, [renderSlot(_ctx.$slots, "option", { option }, () => [createElementVNode("span", _hoisted_2$30, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_3$14, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_4$9, [createVNode(unref(ListboxItemIndicator), null, {
-											default: withCtx(() => [createVNode(unref(Check))]),
-											_: 1
-										})])]),
+										default: withCtx(() => [createVNode(ListboxOptionContent_default, { option }, createSlots({ _: 2 }, [slots.option ? {
+											name: "option",
+											fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, slotProps))]),
+											key: "0"
+										} : void 0, slots.trailing ? {
+											name: "trailing",
+											fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "trailing", mergeProps({ ref_for: true }, slotProps))]),
+											key: "1"
+										} : void 0]), 1032, ["option"])]),
 										_: 2
 									}, 1032, [
 										"value",
@@ -7534,10 +7738,15 @@ var Listbox_default = /* @__PURE__ */ defineComponent({
 								disabled: item.disabled,
 								class: normalizeClass(unref(selectItem)())
 							}, {
-								default: withCtx(() => [createElementVNode("span", _hoisted_5$6, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8, [createVNode(unref(ListboxItemIndicator), null, {
-									default: withCtx(() => [createVNode(unref(Check))]),
-									_: 1
-								})])]),
+								default: withCtx(() => [createVNode(ListboxOptionContent_default, { option: item }, createSlots({ _: 2 }, [slots.option ? {
+									name: "option",
+									fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, slotProps))]),
+									key: "0"
+								} : void 0, slots.trailing ? {
+									name: "trailing",
+									fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "trailing", mergeProps({ ref_for: true }, slotProps))]),
+									key: "1"
+								} : void 0]), 1032, ["option"])]),
 								_: 2
 							}, 1032, [
 								"value",
@@ -7599,9 +7808,9 @@ 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"
 };
@@ -7611,7 +7820,7 @@ 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({
@@ -7687,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",
@@ -7738,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)),
+												}, 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$3, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
+												createElementVNode("span", _hoisted_7$2, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
 										}, 1040, [
@@ -7861,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({
@@ -7958,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);
 		};
 	}
 });
@@ -8081,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({
@@ -8175,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, [
@@ -8216,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({
@@ -8297,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);
 		};
 	}
 });
@@ -8443,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({
@@ -8553,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",
@@ -8698,7 +8907,7 @@ var RangeSlider_default = /* @__PURE__ */ defineComponent({
 				"marks",
 				"min",
 				"max"
-			])) : createCommentVNode("", true)], 16, _hoisted_1$59);
+			])) : createCommentVNode("", true)], 16, _hoisted_1$58);
 		};
 	}
 });
@@ -8715,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"
 };
@@ -8800,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, [
@@ -8859,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({
@@ -8886,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
@@ -8900,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({
@@ -9051,11 +9260,59 @@ var TagsInput_default = /* @__PURE__ */ defineComponent({
 					_: 1
 				}, 8, ["label"])], 2)) : createCommentVNode("", true)]),
 				_: 1
-			})], 10, _hoisted_1$56);
+			})], 10, _hoisted_1$55);
 		};
 	}
 });
 //#endregion
+//#region src/components/multi-combobox/composables/useMultiCombobox.ts
+function useMultiCombobox(options) {
+	const { model, open } = options;
+	const keyboard = ref(false);
+	const input = shallowRef(null);
+	const labels = reactive(/* @__PURE__ */ new Map());
+	watch(options.options, (options) => {
+		for (const option of flattenOptions(options)) labels.set(option.value, option.label);
+	}, {
+		immediate: true,
+		deep: true
+	});
+	const selected = computed(() => model.value.map((value) => ({
+		value,
+		label: labels.get(value) ?? String(value)
+	})));
+	watch(open, (value) => {
+		if (!value) keyboard.value = false;
+	});
+	function remove(value) {
+		if (options.disabled()) return;
+		model.value = model.value.filter((item) => item !== value);
+	}
+	function clear() {
+		if (!model.value.length) return;
+		model.value = [];
+		options.onClear();
+		input.value?.$el.focus();
+	}
+	function onHostClick(event) {
+		if (focusFieldFrom(event.currentTarget, event.target) && !open.value) open.value = true;
+	}
+	function onInputKeydown(event) {
+		keyboard.value = true;
+		if (event.key !== "Backspace" || event.target.value !== "" || !model.value.length) return;
+		model.value = model.value.slice(0, -1);
+	}
+	return {
+		selected,
+		keyboard,
+		input,
+		remove,
+		clear,
+		onHostClick,
+		onInputKeydown
+	};
+}
+//#endregion
 //#region src/components/multi-combobox/multi-combobox.variants.ts
 var multiComboboxHost = tv({
 	base: "",
@@ -9064,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({
@@ -9114,52 +9371,25 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 		const search = useModel(__props, "search");
 		const open = useModel(__props, "open");
 		const t = useUiLocale();
-		const keyboard = ref(false);
-		const input = shallowRef(null);
 		const { id: fieldId, invalid, disabled, describedBy } = useFieldControl({
 			invalid: () => props.invalid,
 			disabled: () => props.disabled
 		});
-		const labels = reactive(/* @__PURE__ */ new Map());
-		watch(() => props.options, (options) => {
-			for (const option of flattenOptions(options)) labels.set(option.value, option.label);
-		}, {
-			immediate: true,
-			deep: true
+		const { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown } = useMultiCombobox({
+			options: () => props.options,
+			model,
+			open,
+			disabled: () => disabled.value,
+			onClear: () => emit("clear")
 		});
-		const selected = computed(() => model.value.map((value) => ({
-			value,
-			label: labels.get(value) ?? String(value)
-		})));
 		const chipSize = computed(() => props.size === "sm" ? "sm" : "md");
 		const clearing = computed(() => props.clearable && selected.value.length > 0 && !disabled.value);
-		watch(open, (value) => {
-			if (!value) keyboard.value = false;
-		});
-		function remove(value) {
-			if (disabled.value) return;
-			model.value = model.value.filter((item) => item !== value);
-		}
-		function clear() {
-			if (!model.value.length) return;
-			model.value = [];
-			emit("clear");
-			input.value?.$el.focus();
-		}
-		function onHostClick(event) {
-			if (focusFieldFrom(event.currentTarget, event.target) && !open.value) open.value = true;
-		}
-		function onInputKeydown(event) {
-			keyboard.value = true;
-			if (event.key !== "Backspace" || event.target.value !== "" || !model.value.length) return;
-			model.value = model.value.slice(0, -1);
-		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxRoot), {
 				modelValue: model.value,
-				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => model.value = $event),
 				open: open.value,
-				"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => open.value = $event),
 				disabled: unref(disabled),
 				"ignore-filter": props.ignoreFilter,
 				name: props.name,
@@ -9179,17 +9409,17 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 							size: props.size,
 							trailing: true
 						}), unref(multiComboboxHost)({ clearing: clearing.value }), props.class)),
-						onClick: onHostClick
-					}, [createElementVNode("div", { class: normalizeClass(unref(tagsInputList)()) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(selected.value, (option) => {
+						onClick: _cache[2] || (_cache[2] = (...args) => unref(onHostClick) && unref(onHostClick)(...args))
+					}, [createElementVNode("div", { class: normalizeClass(unref(tagsInputList)()) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selected), (option) => {
 						return openBlock(), createBlock(Chip_default, {
 							key: option.value,
 							size: chipSize.value,
 							removable: "",
 							disabled: unref(disabled),
 							class: normalizeClass(unref(tagsInputChip)()),
-							onRemove: ($event) => remove(option.value)
+							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",
@@ -9203,13 +9433,13 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 					}, _ctx.$attrs, {
 						modelValue: search.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
-						placeholder: selected.value.length ? void 0 : props.placeholder ?? unref(t).combobox.placeholder,
+						placeholder: unref(selected).length ? void 0 : props.placeholder ?? unref(t).combobox.placeholder,
 						disabled: unref(disabled),
 						id: unref(fieldId),
 						"aria-invalid": unref(invalid) || void 0,
 						"aria-describedby": unref(describedBy),
 						class: unref(tagsInputControl)({ size: props.size }),
-						onKeydown: onInputKeydown
+						onKeydown: unref(onInputKeydown)
 					}), null, 16, [
 						"modelValue",
 						"placeholder",
@@ -9217,7 +9447,8 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 						"id",
 						"aria-invalid",
 						"aria-describedby",
-						"class"
+						"class",
+						"onKeydown"
 					])], 2), createElementVNode("span", { class: normalizeClass(unref(multiComboboxEnd)()) }, [createVNode(Transition, {
 						"enter-active-class": "hn-transition-base",
 						"enter-from-class": "scale-90 opacity-0",
@@ -9230,11 +9461,11 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(inputActionSlot)())
 						}, [createVNode(InputAction_default, {
 							label: unref(t).common.clear,
-							onClick: clear
+							onClick: unref(clear)
 						}, {
 							default: withCtx(() => [createVNode(unref(X))]),
 							_: 1
-						}, 8, ["label"])], 2)) : createCommentVNode("", true)]),
+						}, 8, ["label", "onClick"])], 2)) : createCommentVNode("", true)]),
 						_: 1
 					}), createVNode(unref(ComboboxTrigger), {
 						"aria-label": unref(t).combobox.toggle,
@@ -9255,11 +9486,11 @@ 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,
-					keyboard: keyboard.value
+					keyboard: unref(keyboard)
 				}, {
 					option: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(slotProps)))]),
 					_: 3
@@ -9939,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({
@@ -10096,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);
 		};
 	}
 });
@@ -10127,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({
@@ -10244,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), {
@@ -10309,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({
@@ -10478,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);
 		};
 	}
 });
@@ -10726,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({
@@ -10844,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), {
@@ -10898,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({
@@ -11061,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);
 		};
 	}
 });
@@ -11070,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({
@@ -11203,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), {
@@ -11312,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({
@@ -11356,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,
@@ -11645,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",
@@ -11660,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({
@@ -11740,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": "",
@@ -11764,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,
@@ -11796,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),
@@ -11839,31 +12070,38 @@ var FileUpload_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/dialog/dialog.variants.ts
 var dialogWrapper = tv({
-	base: "",
+	base: "pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid",
 	variants: { placement: {
 		center: "place-items-center p-4",
+		top: "items-start justify-items-center p-4",
 		bottom: "items-end justify-items-center p-4",
 		auto: "place-items-center p-4 max-sm:items-end max-sm:justify-items-stretch"
 	} },
 	defaultVariants: { placement: "auto" }
 });
 var dialogCard = tv({
-	base: "",
+	base: "pointer-events-auto flex w-full flex-col shadow-lg outline-none",
 	variants: {
+		padded: { true: "gap-4 py-(--hn-panel-p)" },
+		fitViewport: { true: "max-h-[calc(100dvh-2rem)]" },
 		placement: {
 			center: "hn-anim-modal",
+			top: "hn-anim-sheet-top",
 			bottom: "hn-anim-sheet-bottom",
 			auto: "hn-anim-modal max-sm:hn-anim-sheet-bottom max-sm:max-w-none"
 		},
 		size: {
 			sm: "max-w-sm",
 			md: "max-w-md",
-			lg: "max-w-xl"
+			lg: "max-w-xl",
+			xl: "max-w-2xl",
+			"2xl": "max-w-4xl"
 		}
 	},
 	defaultVariants: {
 		placement: "auto",
-		size: "md"
+		size: "md",
+		padded: true
 	}
 });
 //#endregion
@@ -11933,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({
@@ -11949,6 +12245,7 @@ var AlertDialog_default = /* @__PURE__ */ defineComponent({
 		title: {},
 		description: {},
 		confirmText: {},
+		confirmDelay: { default: 0 },
 		cancelText: {},
 		tone: { default: "accent" },
 		size: { default: "sm" },
@@ -11959,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,
@@ -11994,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"
@@ -12026,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)]),
@@ -12041,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
@@ -14545,7 +14839,7 @@ var _hoisted_5$3 = {
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
 };
 var _hoisted_6$2 = { class: "hn-collapse-body" };
-var _hoisted_7$2 = ["id"];
+var _hoisted_7$1 = ["id"];
 //#endregion
 //#region src/components/form-field/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
@@ -14666,7 +14960,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 						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);
@@ -14961,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)])
 						]),
@@ -15180,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$2 = { key: 2 };
-var _hoisted_6$1 = { 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({
@@ -15211,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$2, toDisplayString(__props.code), 1))])]),
+				}), 128))])) : (openBlock(), createElementBlock("code", _hoisted_4$4, toDisplayString(__props.code), 1))], 2)]),
 				_: 1
-			}, 8, ["label"]), createElementVNode("div", _hoisted_6$1, [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);
 		};
 	}
 });
@@ -16055,13 +16364,7 @@ var CollapsibleContent_default = /* @__PURE__ */ defineComponent({
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const content = shallowRef(null);
-		function measure() {
-			const el = content.value?.$el;
-			if (el instanceof Element) writeCollapseGap(el, el.parentElement);
-		}
-		onMounted(measure);
-		onBeforeUpdate(measure);
+		const content = useCollapseGap();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(CollapsibleContent), {
 				ref_key: "content",
@@ -16193,13 +16496,7 @@ var AccordionContent_default = /* @__PURE__ */ defineComponent({
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const content = shallowRef(null);
-		function measure() {
-			const el = content.value?.$el;
-			if (el instanceof Element) writeCollapseGap(el, el.parentElement);
-		}
-		onMounted(measure);
-		onBeforeUpdate(measure);
+		const content = useCollapseGap();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AccordionContent), {
 				ref_key: "content",
@@ -16623,11 +16920,11 @@ var _hoisted_3$4 = {
 	class: "hidden h-full shrink-0 lg:block"
 };
 var _hoisted_4$2 = { class: "flex min-h-0 min-w-0 flex-1 flex-col" };
-var _hoisted_5$1 = {
+var _hoisted_5$2 = {
 	key: 0,
 	class: "border-line bg-canvas shrink-0 border-b"
 };
-var _hoisted_6 = { class: "flex h-14 items-center gap-3 px-4 sm:px-6" };
+var _hoisted_6$1 = { class: "flex h-14 items-center gap-3 px-4 sm:px-6" };
 var _hoisted_7 = { class: "min-h-0 min-w-0 flex-1" };
 //#endregion
 //#region src/components/app-shell/AppShell.vue
@@ -16683,7 +16980,7 @@ var AppShell_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createBlock(TooltipProvider_default, null, {
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)("bg-canvas text-fg flex h-screen flex-col overflow-hidden", props.class)) }, [
 					_ctx.$slots.banner ? (openBlock(), createElementBlock("div", _hoisted_1$14, [renderSlot(_ctx.$slots, "banner")])) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_2$10, [_ctx.$slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "sidebar")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_4$2, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_5$1, [createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "header")])])) : createCommentVNode("", true), createElementVNode("main", _hoisted_7, [createVNode(ScrollArea_default, {
+					createElementVNode("div", _hoisted_2$10, [_ctx.$slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "sidebar")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_4$2, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_5$2, [createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "header")])])) : createCommentVNode("", true), createElementVNode("main", _hoisted_7, [createVNode(ScrollArea_default, {
 						ref_key: "main",
 						ref: main,
 						"data-scroll-restore": props.restoreKey,
@@ -16966,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"
@@ -17066,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 },
@@ -17083,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";
@@ -17096,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))
@@ -17121,7 +17581,8 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 							_: 3
 						}, 8, ["padded", "class"])]),
 						_: 3
-					}, 8, [
+					}, 16, [
+						"reference",
 						"side",
 						"align",
 						"side-offset"
@@ -17129,7 +17590,7 @@ var Popover_default = /* @__PURE__ */ defineComponent({
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["open"]);
+			}, 8, ["open", "modal"]);
 		};
 	}
 });
@@ -17137,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 },
@@ -17148,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";
@@ -17161,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))
@@ -17188,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"
+			]);
 		};
 	}
 });
@@ -17464,11 +17950,20 @@ var DropdownMenuRadioItem_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/dialog/Dialog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)" };
+var _hoisted_1$2 = {
+	key: 0,
+	class: "flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)"
+};
 var _hoisted_2$2 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_3$1 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_3$1 = { class: "flex min-w-0 items-center gap-2" };
 var _hoisted_4$1 = {
-	key: 1,
+	key: 0,
+	class: "text-muted flex shrink-0 [&_svg]:size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_5$1 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_6 = {
+	key: 2,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
 };
 //#endregion
@@ -17481,6 +17976,14 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		description: {},
 		size: { default: "md" },
 		placement: {},
+		header: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
 		locked: {
 			type: Boolean,
 			default: false
@@ -17493,11 +17996,11 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:open"],
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
 		function guard(e) {
 			if (props.locked) e.preventDefault();
 		}
 		const open = useModel(__props, "open");
-		useUiLocale();
 		function close() {
 			open.value = false;
 		}
@@ -17513,29 +18016,47 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
 				})) : createCommentVNode("", true), createVNode(unref(DialogPortal), null, {
-					default: withCtx(() => [createVNode(unref(DialogOverlay), { 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(DialogContent), {
+					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "hn-scrim" }), createElementVNode("div", { class: normalizeClass(unref(dialogWrapper)({ placement: props.placement ?? "auto" })) }, [createVNode(unref(DialogContent), {
 						"as-child": "",
 						onEscapeKeyDown: guard,
 						onInteractOutside: guard
 					}, {
-						default: withCtx(() => [createVNode(Card_default, {
+						default: withCtx(() => [createVNode(Card_default, mergeProps(props.description ? {} : { "aria-describedby": void 0 }, {
 							padded: false,
-							class: normalizeClass(unref(cn)("pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none", "max-h-[calc(100dvh-2rem)] py-(--hn-panel-p)", unref(dialogCard)({
+							class: unref(cn)(unref(dialogCard)({
 								placement: props.placement ?? "auto",
-								size: props.size
-							}), props.class))
-						}, {
-							default: withCtx(() => [
-								createElementVNode("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+								size: props.size,
+								padded: !slots.body,
+								fitViewport: true
+							}), props.class)
+						}), {
+							default: withCtx(() => [!props.header || slots.body ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(DialogTitle), { "as-child": "" }, {
+								default: withCtx(() => [createVNode(Heading_default, {
+									level: 2,
+									class: "sr-only"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
+									_: 1
+								})]),
+								_: 1
+							}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+								key: 0,
+								class: "sr-only"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
+								_: 1
+							})) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), slots.body ? renderSlot(_ctx.$slots, "body", { close }, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+								props.header ? (openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [createElementVNode("div", _hoisted_3$1, [slots.icon ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createVNode(unref(DialogTitle), { "as-child": "" }, {
 									default: withCtx(() => [createVNode(Heading_default, {
 										level: 2,
-										size: "lg"
+										size: "lg",
+										class: "min-w-0"
 									}, {
-										default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
-										_: 1
+										default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(props.title), 1)])]),
+										_: 3
 									})]),
-									_: 1
-								}), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+									_: 3
+								})]), props.description ? (openBlock(), createBlock(unref(DialogDescription), {
 									key: 0,
 									"as-child": ""
 								}, {
@@ -17544,24 +18065,27 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 										_: 1
 									})]),
 									_: 1
-								})) : createCommentVNode("", true)]), createVNode(unref(DialogClose), { "as-child": "" }, {
+								})) : createCommentVNode("", true)]), props.closable ? (openBlock(), createBlock(unref(DialogClose), {
+									key: 0,
+									"as-child": ""
+								}, {
 									default: withCtx(() => [createVNode(CloseButton_default, {
 										disabled: props.locked,
 										class: "-mt-1.5 -me-1.5 shrink-0"
 									}, null, 8, ["disabled"])]),
 									_: 1
-								})]),
+								})) : createCommentVNode("", true)])) : createCommentVNode("", true),
 								_ctx.$slots.content ? (openBlock(), createBlock(ScrollArea_default, {
-									key: 0,
+									key: 1,
 									class: "min-h-0"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
 								})) : createCommentVNode("", true),
-								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$1, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
-							]),
+								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
+							], 64))]),
 							_: 3
-						}, 8, ["class"])]),
+						}, 16, ["class"])]),
 						_: 3
 					})], 2)]),
 					_: 3
@@ -18483,6 +19007,39 @@ var Spoiler_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/image/composables/useImageGroupState.ts
+function useImageGroupState() {
+	const registry = reactive(/* @__PURE__ */ new Map());
+	const open = shallowRef(false);
+	const index = shallowRef(0);
+	function byDom(a, b) {
+		const first = a.source?.();
+		const second = b.source?.();
+		if (!first || !second || first === second) return 0;
+		return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+	}
+	const items = computed(() => [...registry.values()].map((read) => read()).sort(byDom));
+	provideImageGroup({
+		register: (id, item) => {
+			registry.set(id, item);
+		},
+		unregister: (id) => {
+			registry.delete(id);
+		},
+		open: (id) => {
+			const at = items.value.findIndex((item) => item.id === id);
+			if (at < 0) return;
+			index.value = at;
+			open.value = true;
+		}
+	});
+	return {
+		items,
+		open,
+		index
+	};
+}
+//#endregion
 //#region src/components/image/ImageGroup.vue
 var ImageGroup_default = /* @__PURE__ */ defineComponent({
 	name: "HnImageGroup",
@@ -18490,37 +19047,14 @@ var ImageGroup_default = /* @__PURE__ */ defineComponent({
 	props: { loop: { type: Boolean } },
 	setup(__props) {
 		const props = __props;
-		const registry = reactive(/* @__PURE__ */ new Map());
-		const open = shallowRef(false);
-		const index = shallowRef(0);
-		function byDom(a, b) {
-			const first = a.source?.();
-			const second = b.source?.();
-			if (!first || !second || first === second) return 0;
-			return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-		}
-		const items = computed(() => [...registry.values()].map((read) => read()).sort(byDom));
-		provideImageGroup({
-			register: (id, item) => {
-				registry.set(id, item);
-			},
-			unregister: (id) => {
-				registry.delete(id);
-			},
-			open: (id) => {
-				const at = items.value.findIndex((item) => item.id === id);
-				if (at < 0) return;
-				index.value = at;
-				open.value = true;
-			}
-		});
+		const { items, open, index } = useImageGroupState();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), createVNode(Lightbox_default, {
-				open: open.value,
-				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-				index: index.value,
-				"onUpdate:index": _cache[1] || (_cache[1] = ($event) => index.value = $event),
-				items: items.value,
+				open: unref(open),
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => isRef(open) ? open.value = $event : null),
+				index: unref(index),
+				"onUpdate:index": _cache[1] || (_cache[1] = ($event) => isRef(index) ? index.value = $event : null),
+				items: unref(items),
 				loop: props.loop
 			}, null, 8, [
 				"open",