@hina-ui/vue 1.1.0 → 1.2.0

package/dist/index.js

@@ -2,7 +2,7 @@ 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 { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarRoot, CheckboxGroupRoot, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DateRangeFieldInput, DateRangeFieldRoot, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerNext, MonthPickerPrev, MonthPickerRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, RatingItem, RatingItemIndicator, RatingRoot, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, Separator, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot, TimeFieldInput, TimeFieldRoot, ToastClose, ToastDescription, ToastPortal, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, VisuallyHidden, YearPickerCell, YearPickerCellTrigger, YearPickerGrid, YearPickerGridBody, YearPickerGridRow, YearPickerNext, YearPickerPrev, YearPickerRoot, injectListboxItemContext, injectTabsRootContext, injectTooltipProviderContext, useBodyScrollLock, useDirection, useForwardPropsEmits } from "reka-ui";
 import { 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";
@@ -4296,6 +4296,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 +4324,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 }));
@@ -4636,6 +4638,16 @@ 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 = {
@@ -5333,10 +5345,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 +5369,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 +5386,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: {
@@ -5537,7 +5549,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)),
@@ -5696,10 +5708,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 +5733,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,7 +5814,7 @@ 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
@@ -5796,51 +5854,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 +5870,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,12 +5883,12 @@ 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
+					onInput: _cache[1] || (_cache[1] = (...args) => unref(fit) && unref(fit)(...args))
 				}), null, 16, _hoisted_2$35), [[vModelText, model.value]])]),
 				_: 1
 			}, 512)], 14, _hoisted_1$74);
@@ -5876,13 +5898,19 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 //#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 +5955,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 +5978,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 +5995,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 +6007,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
@@ -6124,11 +6156,11 @@ 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
@@ -6149,6 +6181,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,10 +6191,10 @@ 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);
 		};
@@ -6302,6 +6335,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,10 +6351,16 @@ 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]);
@@ -6332,11 +6376,11 @@ var _hoisted_3$18 = {
 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_7$5 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/select/SelectList.vue
 var SelectList_default = /* @__PURE__ */ defineComponent({
@@ -6405,9 +6449,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$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
 										_: 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 +6478,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$70 = [
+	"dir",
+	"data-invalid",
+	"data-disabled"
+];
 //#endregion
 //#region src/components/select/Select.vue
 var Select_default = /* @__PURE__ */ defineComponent({
@@ -6445,6 +6519,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		placeholder: {},
+		clearable: { type: Boolean },
 		name: {},
 		required: { type: Boolean },
 		autocomplete: {},
@@ -6462,19 +6537,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 +6573,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$70), createVNode(SelectList_default, {
 					options: props.options,
 					keyboard: keyboard.value
 				}, {
@@ -6757,11 +6871,11 @@ var _hoisted_3$16 = {
 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_7$4 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
-var _hoisted_8$1 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_8 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/combobox/ComboboxList.vue
 var ComboboxList_default = /* @__PURE__ */ defineComponent({
@@ -6826,7 +6940,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$8, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$6, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8, [createVNode(unref(ComboboxItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -7439,32 +7553,61 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/listbox/ListboxOptionContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$65 = { class: "min-w-0 flex-1" };
+var _hoisted_2$30 = { class: "block truncate" };
+var _hoisted_3$14 = {
+	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$65, [renderSlot(_ctx.$slots, "option", {
+				option: props.option,
+				selected: unref(selected)
+			}, () => [createElementVNode("span", _hoisted_2$30, toDisplayString(props.option.label), 1), props.option.description ? (openBlock(), createElementBlock("span", _hoisted_3$14, toDisplayString(props.option.description), 1)) : createCommentVNode("", true)])]), slots.trailing ? renderSlot(_ctx.$slots, "trailing", {
+				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 +7618,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 +7633,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 +7651,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 +7664,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 +7687,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",
@@ -7606,8 +7764,8 @@ var _hoisted_3$13 = {
 	class: "size-5 shrink-0"
 };
 var _hoisted_4$8 = { class: "min-w-0 flex-1" };
-var _hoisted_5$5 = { class: "block truncate" };
-var _hoisted_6$4 = {
+var _hoisted_5$6 = { class: "block truncate" };
+var _hoisted_6$5 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
@@ -7739,7 +7897,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 													direction: "end",
 													open: isExpanded
 												}, null, 8, ["open"])], 10, _hoisted_2$29)) : (openBlock(), createElementBlock("span", _hoisted_3$13)),
-												createElementVNode("span", _hoisted_4$8, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_5$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_4$8, [renderSlot(_ctx.$slots, "node", { node: item.value }, () => [createElementVNode("span", _hoisted_5$6, toDisplayString(item.value.label), 1), item.value.description ? (openBlock(), createElementBlock("span", _hoisted_6$5, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)])]),
 												createElementVNode("span", _hoisted_7$3, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
@@ -9056,6 +9214,54 @@ var TagsInput_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#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: "",
@@ -9114,52 +9320,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,15 +9358,15 @@ 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)]),
 							_: 2
@@ -9203,13 +9382,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 +9396,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 +9410,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,
@@ -9259,7 +9439,7 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 					_: 1
 				}), createVNode(ComboboxList_default, {
 					options: props.options,
-					keyboard: keyboard.value
+					keyboard: unref(keyboard)
 				}, {
 					option: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(slotProps)))]),
 					_: 3
@@ -11839,31 +12019,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
@@ -12662,8 +12849,8 @@ var _hoisted_1$40 = ["data-dragging"];
 var _hoisted_2$21 = ["data-disabled"];
 var _hoisted_3$9 = { class: "flex items-start justify-between gap-4 px-(--hn-panel-p)" };
 var _hoisted_4$7 = { class: "flex min-w-0 flex-col gap-1.5" };
-var _hoisted_5$4 = { class: "px-(--hn-panel-p) py-1" };
-var _hoisted_6$3 = {
+var _hoisted_5$5 = { class: "px-(--hn-panel-p) py-1" };
+var _hoisted_6$4 = {
 	key: 1,
 	class: "flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
 };
@@ -12778,10 +12965,10 @@ var Sheet_default = /* @__PURE__ */ defineComponent({
 									key: 0,
 									class: "min-h-0 grow"
 								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "content", { close })])]),
+									default: withCtx(() => [createElementVNode("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "content", { close })])]),
 									_: 3
 								})) : createCommentVNode("", true),
-								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
+								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$4, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true)
 							]),
 							_: 3
 						}, 8, [
@@ -14539,12 +14726,12 @@ var _hoisted_1$26 = [
 var _hoisted_2$15 = ["id", "for"];
 var _hoisted_3$7 = ["id"];
 var _hoisted_4$5 = ["id"];
-var _hoisted_5$3 = {
+var _hoisted_5$4 = {
 	key: 0,
 	"data-hn-form-field-message": "",
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
 };
-var _hoisted_6$2 = { class: "hn-collapse-body" };
+var _hoisted_6$3 = { class: "hn-collapse-body" };
 var _hoisted_7$2 = ["id"];
 //#endregion
 //#region src/components/form-field/FormField.vue
@@ -14662,7 +14849,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 					"leave-from-class": "hn-collapse-open",
 					"leave-to-class": "hn-collapse-closed"
 				}, toHandlers(unref(hooks))), {
-					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$3, [createElementVNode("div", _hoisted_6$2, [createElementVNode("p", {
+					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [createElementVNode("div", _hoisted_6$3, [createElementVNode("p", {
 						id: unref(messageId),
 						class: normalizeClass(unref(formFieldMessage)()),
 						"aria-live": "polite"
@@ -15185,8 +15372,8 @@ 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_5$3 = { key: 2 };
+var _hoisted_6$2 = { class: "absolute top-2 end-2 flex items-center gap-2" };
 var _hoisted_7$1 = {
 	key: 0,
 	class: "text-faint font-mono text-xs select-none"
@@ -15251,9 +15438,9 @@ var CodeBlock_default = /* @__PURE__ */ defineComponent({
 							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_5$3, toDisplayString(__props.code), 1))])]),
 				_: 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"]), createElementVNode("div", _hoisted_6$2, [tag.value ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(tag.value), 1)) : createCommentVNode("", true), __props.copyable ? (openBlock(), createBlock(CopyButton_default, {
 				key: 1,
 				text: props.code,
 				label: unref(t).codeblock.copy
@@ -16055,13 +16242,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 +16374,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 +16798,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 +16858,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,
@@ -17464,11 +17639,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 +17665,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 +17685,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 +17705,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 +17754,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 +18696,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 +18736,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",