@hina-ui/vue 1.0.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: ["hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium", "has-disabled:cursor-not-allowed has-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: {
@@ -5393,7 +5405,11 @@ var inputAction = tv({ base: [
 ] });
 var inputIndicator = tv({ base: "cursor-pointer outline-none" });
 var inputActionSlot = tv({ base: "flex shrink-0 items-stretch self-stretch" });
-var inputEmbedded = tv({ base: "flex min-w-0 flex-1 items-stretch" });
+var inputEmbedded = tv({ base: [
+	"group/hn-field flex min-w-0 flex-1 items-stretch",
+	"data-disabled:cursor-not-allowed data-disabled:opacity-50",
+	"group-data-disabled/hn-field:data-disabled:opacity-100"
+] });
 //#endregion
 //#region src/components/input/InputAction.vue
 var InputAction_default = /* @__PURE__ */ defineComponent({
@@ -5471,7 +5487,11 @@ function injectInputGroup() {
 }
 //#endregion
 //#region src/components/input/InputBase.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$75 = ["data-invalid", "aria-busy"];
+var _hoisted_1$75 = [
+	"data-invalid",
+	"data-disabled",
+	"aria-busy"
+];
 var _hoisted_2$36 = [
 	"id",
 	"disabled",
@@ -5527,8 +5547,9 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				"data-hn-input": "",
 				"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)),
@@ -5687,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");
@@ -5716,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", "has-disabled:cursor-not-allowed has-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)]",
@@ -5747,12 +5814,12 @@ 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"];
+var _hoisted_1$74 = ["data-invalid", "data-disabled"];
 var _hoisted_2$35 = [
 	"id",
 	"rows",
@@ -5787,50 +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,
@@ -5838,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,
@@ -5851,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);
@@ -5866,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: [
@@ -5917,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,
@@ -5938,7 +5977,8 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 				disabled: unref(disabled),
 				"data-hn-number-input": "",
 				"data-invalid": unref(invalid) ? "" : void 0,
-				class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
+				"data-disabled": unref(disabled) ? "" : void 0,
+				class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(textInputHost)({
 					variant: props.variant,
 					size: props.size
 				}), props.class)
@@ -5955,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)())
@@ -5964,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
@@ -5974,6 +6017,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 				"locale",
 				"disabled",
 				"data-invalid",
+				"data-disabled",
 				"class"
 			]);
 		};
@@ -6112,15 +6156,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"];
+var _hoisted_1$72 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/input-group/InputGroup.vue
 var InputGroup_default = /* @__PURE__ */ defineComponent({
@@ -6135,19 +6179,22 @@ var InputGroup_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const { disabled } = useFieldControl({ disabled: () => props.disabled });
 		provideInputGroup({
+			variant: computed(() => props.variant),
 			size: computed(() => props.size),
-			disabled: computed(() => !!props.disabled),
+			disabled,
 			invalid: computed(() => !!props.invalid)
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				"data-hn-input-group": "",
 				"data-invalid": props.invalid ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(inputHost)({
+				"data-disabled": unref(disabled) ? "" : void 0,
+				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);
 		};
@@ -6288,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: [
@@ -6299,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]);
@@ -6322,7 +6380,7 @@ 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({
@@ -6393,7 +6451,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 									default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
 										default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
 										_: 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
 									})])]),
@@ -6420,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({
@@ -6431,6 +6519,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		placeholder: {},
+		clearable: { type: Boolean },
 		name: {},
 		required: { type: Boolean },
 		autocomplete: {},
@@ -6448,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,
@@ -6472,28 +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,
-					"aria-invalid": unref(invalid) || void 0,
-					class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
+					"data-disabled": unref(disabled) ? "" : void 0,
+					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",
 					"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
 				}, {
@@ -6618,6 +6748,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 						tabindex: unref(disabled) ? -1 : 0,
 						"aria-disabled": unref(disabled) || void 0,
 						"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)({
 							variant: props.variant,
@@ -6681,6 +6812,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 						"tabindex",
 						"aria-disabled",
 						"data-invalid",
+						"data-disabled",
 						"aria-invalid",
 						"class"
 					]),
@@ -6743,7 +6875,7 @@ 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({
@@ -6808,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$4, 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
 									})])]),
@@ -6836,7 +6968,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"];
+var _hoisted_1$67 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/combobox/Combobox.vue
 var Combobox_default = /* @__PURE__ */ defineComponent({
@@ -6914,6 +7046,7 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createElementVNode("div", {
 						"data-hn-combobox": "",
 						"data-invalid": unref(invalid) ? "" : void 0,
+						"data-disabled": unref(disabled) ? "" : void 0,
 						class: normalizeClass(unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
 							variant: props.variant,
 							size: props.size
@@ -7420,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$3 = {
-	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({
@@ -7456,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: {}
@@ -7467,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) => {
@@ -7484,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)()) }, {
@@ -7497,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",
@@ -7515,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$3, 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",
@@ -7587,12 +7764,12 @@ 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"
 };
-var _hoisted_7$2 = { class: "flex size-4 shrink-0 items-center justify-center" };
+var _hoisted_7$3 = { class: "flex size-4 shrink-0 items-center justify-center" };
 //#endregion
 //#region src/components/tree-select/TreeSelect.vue
 var TreeSelect_default = /* @__PURE__ */ defineComponent({
@@ -7661,6 +7838,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 					disabled: unref(disabled),
 					"data-placeholder": selected.value ? void 0 : "",
 					"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)({
 						variant: props.variant,
@@ -7676,6 +7854,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 					"disabled",
 					"data-placeholder",
 					"data-invalid",
+					"data-disabled",
 					"aria-invalid",
 					"class"
 				]), createVNode(unref(PopoverPortal), null, {
@@ -7718,8 +7897,8 @@ 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_7$2, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : 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
 										}, 1040, [
@@ -7756,13 +7935,33 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/checkbox/checkbox.variants.ts
 var checkbox = tv({
-	base: ["text-fg grid w-fit max-w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-x-[var(--hn-field-gap)] select-none", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
-	variants: { size: {
-		sm: "text-sm",
-		md: "text-base",
-		lg: "text-md"
+	base: ["text-fg grid w-fit max-w-full cursor-pointer items-center gap-x-[var(--hn-field-gap)] select-none", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
+	variants: {
+		controlPlacement: {
+			start: "grid-cols-[auto_minmax(0,1fr)]",
+			end: "grid-cols-[minmax(0,1fr)_auto]"
+		},
+		block: { true: "w-full" },
+		bare: { true: "gap-x-0" },
+		size: {
+			sm: "text-sm",
+			md: "text-base",
+			lg: "text-md"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		controlPlacement: "start",
+		block: false
+	}
+});
+var checkboxControl = tv({
+	base: "row-start-1",
+	variants: { controlPlacement: {
+		start: "col-start-1 justify-self-start",
+		end: "col-start-2 justify-self-end"
 	} },
-	defaultVariants: { size: "md" }
+	defaultVariants: { controlPlacement: "start" }
 });
 var checkboxBox = tv({
 	base: [
@@ -7791,16 +7990,32 @@ var checkboxBox = tv({
 		size: "md"
 	}
 });
-var checkboxTitle = tv({ base: "flex min-h-[1lh] min-w-0 items-center" });
+var checkboxTitle = tv({
+	base: "row-start-1 flex min-h-[1lh] min-w-0 items-center",
+	variants: { controlPlacement: {
+		start: "col-start-2",
+		end: "col-start-1"
+	} },
+	defaultVariants: { controlPlacement: "start" }
+});
 var checkboxTitleText = tv({ base: "block [text-box:trim-both_cap_alphabetic]" });
 var checkboxDescription = tv({
-	base: "text-muted col-start-2 block",
-	variants: { size: {
-		sm: "text-xs",
-		md: "text-sm",
-		lg: "text-base"
-	} },
-	defaultVariants: { size: "md" }
+	base: "text-muted row-start-2 block",
+	variants: {
+		controlPlacement: {
+			start: "col-start-2",
+			end: "col-start-1"
+		},
+		size: {
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		controlPlacement: "start"
+	}
 });
 //#endregion
 //#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
@@ -7814,6 +8029,8 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		size: {},
 		description: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -7838,7 +8055,12 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 				"data-hn-checkbox": "",
 				"data-hn-state-group": "",
 				"data-disabled": unref(disabled) ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(checkbox)({ size: props.size }), props.class))
+				class: normalizeClass(unref(cn)(unref(checkbox)({
+					size: props.size,
+					controlPlacement: props.controlPlacement,
+					block: props.block,
+					bare: !unref(slots).default && !props.description
+				}), props.class))
 			}, [
 				createVNode(unref(CheckboxRoot), mergeProps(_ctx.$attrs, {
 					modelValue: model.value,
@@ -7848,7 +8070,7 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 					"aria-invalid": unref(invalid) || void 0,
 					"aria-describedby": unref(describedBy),
 					"data-invalid": unref(invalid) ? "" : void 0,
-					class: unref(checkboxBox)({ size: props.size })
+					class: unref(cn)(unref(checkboxBox)({ size: props.size }), unref(checkboxControl)({ controlPlacement: props.controlPlacement }))
 				}), {
 					default: withCtx(({ state }) => [createVNode(Transition, {
 						"enter-active-class": "hn-transition-press",
@@ -7885,11 +8107,14 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 				]),
 				unref(slots).default ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(checkboxTitle)())
+					class: normalizeClass(unref(checkboxTitle)({ controlPlacement: props.controlPlacement }))
 				}, [createElementVNode("span", { class: normalizeClass(unref(checkboxTitleText)()) }, [renderSlot(_ctx.$slots, "default")], 2)], 2)) : createCommentVNode("", true),
 				props.description ? (openBlock(), createElementBlock("span", {
 					key: 1,
-					class: normalizeClass(unref(checkboxDescription)({ size: props.size }))
+					class: normalizeClass(unref(checkboxDescription)({
+						size: props.size,
+						controlPlacement: props.controlPlacement
+					}))
 				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
 			], 10, _hoisted_1$63);
 		};
@@ -7899,12 +8124,29 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 //#region src/components/checkbox-group/checkbox-group.variants.ts
 var checkboxGroup = tv({
 	base: "flex min-w-0",
-	variants: { orientation: {
-		vertical: "flex-col gap-2",
-		horizontal: "flex-row flex-wrap gap-x-[var(--hn-inline-gap)] gap-y-2"
-	} },
+	variants: {
+		block: { true: "w-full" },
+		orientation: {
+			vertical: "flex-col gap-2",
+			horizontal: "flex-row flex-wrap gap-x-[var(--hn-inline-gap)] gap-y-2"
+		}
+	},
 	defaultVariants: { orientation: "vertical" }
 });
+var checkboxGroupItem = tv({
+	variants: {
+		orientation: {
+			vertical: "",
+			horizontal: ""
+		},
+		block: { true: "" }
+	},
+	compoundVariants: [{
+		orientation: "horizontal",
+		block: true,
+		class: "flex-1"
+	}]
+});
 //#endregion
 //#region src/components/checkbox-group/CheckboxGroup.vue
 var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
@@ -7914,6 +8156,8 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		orientation: {},
 		size: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -7943,13 +8187,22 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 				"data-hn-checkbox-group": "",
 				"data-orientation": props.orientation ?? "vertical",
 				"data-disabled": unref(disabled) ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(checkboxGroup)({ orientation: props.orientation }), props.class))
+				class: normalizeClass(unref(cn)(unref(checkboxGroup)({
+					orientation: props.orientation,
+					block: props.block
+				}), props.class))
 			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (option) => {
 					return openBlock(), createBlock(Checkbox_default, {
 						key: option.value,
 						value: option.value,
 						size: props.size,
+						"control-placement": props.controlPlacement,
+						block: props.block,
+						class: normalizeClass(unref(checkboxGroupItem)({
+							orientation: props.orientation,
+							block: props.block
+						})),
 						disabled: unref(disabled) || option.disabled,
 						invalid: unref(invalid),
 						description: option.description
@@ -7959,6 +8212,9 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 					}, 1032, [
 						"value",
 						"size",
+						"control-placement",
+						"block",
+						"class",
 						"disabled",
 						"invalid",
 						"description"
@@ -7993,6 +8249,8 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		orientation: {},
 		size: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -8017,7 +8275,10 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 				"aria-describedby": unref(describedBy),
 				"aria-invalid": unref(invalid) || void 0,
 				"data-hn-radio-group": "",
-				class: normalizeClass(unref(cn)(unref(checkboxGroup)({ orientation: props.orientation }), props.class))
+				class: normalizeClass(unref(cn)(unref(checkboxGroup)({
+					orientation: props.orientation,
+					block: props.block
+				}), props.class))
 			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (option) => {
 					return openBlock(), createElementBlock("label", {
@@ -8025,17 +8286,24 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 						"data-hn-radio": "",
 						"data-hn-state-group": "",
 						"data-disabled": unref(disabled) || option.disabled ? "" : void 0,
-						class: normalizeClass(unref(checkbox)({ size: props.size }))
+						class: normalizeClass(unref(cn)(unref(checkbox)({
+							size: props.size,
+							controlPlacement: props.controlPlacement,
+							block: props.block
+						}), unref(checkboxGroupItem)({
+							orientation: props.orientation,
+							block: props.block
+						})))
 					}, [
 						createVNode(unref(RadioGroupItem), {
 							value: option.value,
 							disabled: option.disabled,
 							"aria-invalid": unref(invalid) || void 0,
 							"data-invalid": unref(invalid) ? "" : void 0,
-							class: normalizeClass(unref(checkboxBox)({
+							class: normalizeClass(unref(cn)(unref(checkboxBox)({
 								shape: "round",
 								size: props.size
-							}))
+							}), unref(checkboxControl)({ controlPlacement: props.controlPlacement })))
 						}, {
 							default: withCtx(({ checked }) => [createVNode(Transition, {
 								"enter-active-class": "hn-transition-press",
@@ -8057,10 +8325,13 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 							"data-invalid",
 							"class"
 						]),
-						createElementVNode("span", { class: normalizeClass(unref(checkboxTitle)()) }, [createElementVNode("span", { class: normalizeClass(unref(checkboxTitleText)()) }, [renderSlot(_ctx.$slots, "option", { option }, () => [createTextVNode(toDisplayString(option.label), 1)])], 2)], 2),
+						createElementVNode("span", { class: normalizeClass(unref(checkboxTitle)({ controlPlacement: props.controlPlacement })) }, [createElementVNode("span", { class: normalizeClass(unref(checkboxTitleText)()) }, [renderSlot(_ctx.$slots, "option", { option }, () => [createTextVNode(toDisplayString(option.label), 1)])], 2)], 2),
 						option.description ? (openBlock(), createElementBlock("span", {
 							key: 0,
-							class: normalizeClass(unref(checkboxDescription)({ size: props.size }))
+							class: normalizeClass(unref(checkboxDescription)({
+								size: props.size,
+								controlPlacement: props.controlPlacement
+							}))
 						}, toDisplayString(option.description), 3)) : createCommentVNode("", true)
 					], 10, _hoisted_1$62);
 				}), 128))]),
@@ -8113,6 +8384,8 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		size: {},
 		description: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -8137,7 +8410,12 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 				"data-hn-switch": "",
 				"data-hn-state-group": "",
 				"data-disabled": unref(disabled) ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(checkbox)({ size: props.size }), props.class))
+				class: normalizeClass(unref(cn)(unref(checkbox)({
+					size: props.size,
+					controlPlacement: props.controlPlacement,
+					block: props.block,
+					bare: !unref(slots).default && !props.description
+				}), props.class))
 			}, [
 				createVNode(unref(SwitchRoot), mergeProps(_ctx.$attrs, {
 					modelValue: model.value,
@@ -8148,7 +8426,7 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 					"aria-describedby": unref(describedBy),
 					"data-invalid": unref(invalid) ? "" : void 0,
 					"data-hn-on": model.value ? "" : void 0,
-					class: unref(switchTrack)({ size: props.size })
+					class: unref(cn)(unref(switchTrack)({ size: props.size }), unref(checkboxControl)({ controlPlacement: props.controlPlacement }))
 				}), {
 					default: withCtx(() => [createElementVNode("span", {
 						"data-hn-thumb": "",
@@ -8168,11 +8446,14 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 				]),
 				unref(slots).default ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(checkboxTitle)())
+					class: normalizeClass(unref(checkboxTitle)({ controlPlacement: props.controlPlacement }))
 				}, [createElementVNode("span", { class: normalizeClass(unref(checkboxTitleText)()) }, [renderSlot(_ctx.$slots, "default")], 2)], 2)) : createCommentVNode("", true),
 				props.description ? (openBlock(), createElementBlock("span", {
 					key: 1,
-					class: normalizeClass(unref(checkboxDescription)({ size: props.size }))
+					class: normalizeClass(unref(checkboxDescription)({
+						size: props.size,
+						controlPlacement: props.controlPlacement
+					}))
 				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
 			], 10, _hoisted_1$61);
 		};
@@ -8777,7 +9058,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"];
+var _hoisted_1$56 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/tags-input/TagsInput.vue
 var TagsInput_default = /* @__PURE__ */ defineComponent({
@@ -8844,6 +9125,7 @@ var TagsInput_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				"data-hn-tags-input": "",
 				"data-invalid": unref(invalid) ? "" : void 0,
+				"data-disabled": unref(disabled) ? "" : void 0,
 				onClick: _cache[2] || (_cache[2] = ($event) => unref(focusFieldFrom)($event.currentTarget, $event.target)),
 				class: normalizeClass(unref(cn)(unref(inputHost)({
 					variant: props.variant,
@@ -8932,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: "",
@@ -8940,7 +9270,11 @@ 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 = ["data-invalid", "aria-busy"];
+var _hoisted_1$55 = [
+	"data-invalid",
+	"data-disabled",
+	"aria-busy"
+];
 var _hoisted_2$27 = { class: "min-w-0 truncate" };
 //#endregion
 //#region src/components/multi-combobox/MultiCombobox.vue
@@ -8986,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,
@@ -9042,6 +9349,7 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createElementVNode("div", {
 						"data-hn-multi-combobox": "",
 						"data-invalid": unref(invalid) ? "" : void 0,
+						"data-disabled": unref(disabled) ? "" : void 0,
 						"aria-busy": props.loading || void 0,
 						class: normalizeClass(unref(cn)(unref(inputHost)({
 							variant: props.variant,
@@ -9050,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
@@ -9074,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",
@@ -9088,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",
@@ -9101,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,
@@ -9130,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
@@ -9998,7 +10307,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"];
+var _hoisted_1$53 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-picker/DatePicker.vue
 var DatePicker_default = /* @__PURE__ */ defineComponent({
@@ -10068,6 +10377,7 @@ var DatePicker_default = /* @__PURE__ */ defineComponent({
 						ref: host,
 						"data-hn-date-picker": "",
 						"data-invalid": unref(invalid) ? "" : void 0,
+						"data-disabled": unref(disabled) ? "" : void 0,
 						class: normalizeClass(unref(cn)(unref(outer) ? unref(inputEmbedded)() : unref(inputHost)({
 							variant: props.variant,
 							size: props.size
@@ -10596,7 +10906,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"];
+var _hoisted_1$51 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-range-picker/DateRangePicker.vue
 var DateRangePicker_default = /* @__PURE__ */ defineComponent({
@@ -10667,6 +10977,7 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 						ref: host,
 						"data-hn-date-range-picker": "",
 						"data-invalid": unref(invalid) ? "" : void 0,
+						"data-disabled": unref(disabled) ? "" : void 0,
 						class: normalizeClass(unref(cn)(unref(outer) ? unref(inputEmbedded)() : unref(inputHost)({
 							variant: props.variant,
 							size: props.size
@@ -10939,7 +11250,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"];
+var _hoisted_1$49 = ["data-invalid", "data-disabled"];
 //#endregion
 //#region src/components/date-time-picker/DateTimePicker.vue
 var DateTimePicker_default = /* @__PURE__ */ defineComponent({
@@ -11021,6 +11332,7 @@ var DateTimePicker_default = /* @__PURE__ */ defineComponent({
 						ref: host,
 						"data-hn-date-time-picker": "",
 						"data-invalid": unref(invalid) ? "" : void 0,
+						"data-disabled": unref(disabled) ? "" : void 0,
 						class: normalizeClass(unref(cn)(unref(outer) ? unref(inputEmbedded)() : unref(inputHost)({
 							variant: props.variant,
 							size: props.size
@@ -11707,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
@@ -12530,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)"
 };
@@ -12646,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, [
@@ -14343,33 +14662,86 @@ var Form_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/form-layout/context.ts
+var FORM_LAYOUT_KEY = Symbol("hn-form-layout");
+function useFormFieldLayout(props) {
+	const parent = inject(FORM_LAYOUT_KEY, null);
+	return computed(() => ({
+		orientation: props.orientation ?? parent?.value.orientation ?? "vertical",
+		descriptionPlacement: props.descriptionPlacement ?? parent?.value.descriptionPlacement ?? "control",
+		labelWidth: props.labelWidth ?? parent?.value.labelWidth ?? "10rem"
+	}));
+}
+function provideFormLayout(layout) {
+	provide(FORM_LAYOUT_KEY, layout);
+}
+//#endregion
 //#region src/components/form-field/form-field.variants.ts
-var formFieldRoot = tv({ base: "flex min-w-0 flex-col gap-1.5" });
+var formFieldRoot = tv({
+	base: "min-w-0",
+	variants: { orientation: {
+		vertical: "",
+		horizontal: "",
+		responsive: "@container/hn-form-field"
+	} }
+});
+var formFieldLayout = tv({
+	base: "grid min-w-0 grid-cols-1 items-start gap-x-6 gap-y-1.5",
+	variants: { orientation: {
+		vertical: "",
+		horizontal: "grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]",
+		responsive: "@min-[32rem]/hn-form-field:grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]"
+	} }
+});
+var formFieldContent = tv({ base: "flex min-w-0 flex-col gap-1.5" });
+var formFieldControl = tv({
+	base: "min-w-0",
+	variants: { orientation: {
+		vertical: "",
+		horizontal: "grid min-h-[var(--hn-control-h-md)] items-center",
+		responsive: "@min-[32rem]/hn-form-field:grid @min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)] @min-[32rem]/hn-form-field:items-center"
+	} }
+});
 var formFieldLabel = tv({
 	base: "text-fg inline-flex items-center gap-1 text-sm font-medium",
-	variants: { disabled: { true: "text-disabled" } }
+	variants: {
+		orientation: {
+			vertical: "",
+			horizontal: "min-h-[var(--hn-control-h-md)]",
+			responsive: "@min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)]"
+		},
+		disabled: { true: "text-disabled" }
+	}
 });
 var formFieldMark = tv({ base: "text-danger-text" });
 var formFieldDescription = tv({ base: "text-muted text-sm" });
 var formFieldMessage = tv({ base: "text-danger-text text-sm" });
 //#endregion
 //#region src/components/form-field/FormField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = ["data-invalid", "data-disabled"];
+var _hoisted_1$26 = [
+	"data-invalid",
+	"data-disabled",
+	"data-orientation"
+];
 var _hoisted_2$15 = ["id", "for"];
 var _hoisted_3$7 = ["id"];
-var _hoisted_4$5 = {
+var _hoisted_4$5 = ["id"];
+var _hoisted_5$4 = {
 	key: 0,
 	"data-hn-form-field-message": "",
 	class: "hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
 };
-var _hoisted_5$3 = { class: "hn-collapse-body" };
-var _hoisted_6$2 = ["id"];
+var _hoisted_6$3 = { class: "hn-collapse-body" };
+var _hoisted_7$2 = ["id"];
 //#endregion
 //#region src/components/form-field/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
 	name: "HnFormField",
 	__name: "FormField",
 	props: {
+		orientation: {},
+		descriptionPlacement: {},
+		labelWidth: {},
 		name: {},
 		label: {},
 		description: {},
@@ -14380,6 +14752,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const layout = useFormFieldLayout(props);
 		const slots = useSlots();
 		const t = useUiLocale();
 		const form = injectForm();
@@ -14394,6 +14767,10 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 		const invalid = computed(() => !!message.value);
 		const disabled = computed(() => !!props.disabled || !!form?.disabled.value);
 		const described = computed(() => !!props.description || !!slots.description);
+		const headed = computed(() => !!props.label || !!slots.label);
+		const descriptionWithLabel = computed(() => described.value && layout.value.descriptionPlacement === "label");
+		const contentOrientation = computed(() => headed.value || descriptionWithLabel.value ? layout.value.orientation : "vertical");
+		const layoutStyle = computed(() => ({ "--hn-form-label-width": typeof layout.value.labelWidth === "number" ? `${layout.value.labelWidth}px` : layout.value.labelWidth }));
 		const describedBy = computed(() => {
 			const ids = [];
 			if (described.value) ids.push(descriptionId);
@@ -14419,46 +14796,67 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 				"data-hn-form-field": "",
 				"data-invalid": invalid.value ? "" : void 0,
 				"data-disabled": disabled.value ? "" : void 0,
-				class: normalizeClass(unref(cn)(unref(formFieldRoot)(), props.class)),
+				"data-orientation": unref(layout).orientation,
+				class: normalizeClass(unref(cn)(unref(formFieldRoot)({ orientation: unref(layout).orientation }), props.class)),
+				style: normalizeStyle(layoutStyle.value),
 				onFocusout: onFocusOut
+			}, [createElementVNode("div", {
+				"data-hn-form-field-layout": "",
+				class: normalizeClass(unref(formFieldLayout)({ orientation: contentOrientation.value }))
+			}, [headed.value || descriptionWithLabel.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-hn-form-field-header": "",
+				class: normalizeClass(unref(formFieldContent)())
+			}, [headed.value ? (openBlock(), createElementBlock("label", {
+				key: 0,
+				id: unref(labelId),
+				for: controlId.value,
+				class: normalizeClass(unref(formFieldLabel)({
+					disabled: disabled.value,
+					orientation: contentOrientation.value
+				}))
 			}, [
-				props.label || unref(slots).label ? (openBlock(), createElementBlock("label", {
+				renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(props.label), 1)]),
+				props.required ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(formFieldMark)()),
+					"aria-hidden": "true"
+				}, "*", 2)) : createCommentVNode("", true),
+				props.required ? (openBlock(), createBlock(VisuallyHidden_default, { key: 1 }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(t).form.required), 1)]),
+					_: 1
+				})) : createCommentVNode("", true)
+			], 10, _hoisted_2$15)) : createCommentVNode("", true), descriptionWithLabel.value ? (openBlock(), createElementBlock("p", {
+				key: 1,
+				id: unref(descriptionId),
+				class: normalizeClass(unref(formFieldDescription)())
+			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_3$7)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("div", {
+				"data-hn-form-field-body": "",
+				class: normalizeClass(unref(formFieldContent)())
+			}, [
+				createElementVNode("div", {
+					"data-hn-form-field-control": "",
+					class: normalizeClass(unref(formFieldControl)({ orientation: contentOrientation.value }))
+				}, [renderSlot(_ctx.$slots, "default")], 2),
+				described.value && !descriptionWithLabel.value ? (openBlock(), createElementBlock("p", {
 					key: 0,
-					id: unref(labelId),
-					for: controlId.value,
-					class: normalizeClass(unref(formFieldLabel)({ disabled: disabled.value }))
-				}, [
-					renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(props.label), 1)]),
-					props.required ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(formFieldMark)()),
-						"aria-hidden": "true"
-					}, "*", 2)) : createCommentVNode("", true),
-					props.required ? (openBlock(), createBlock(VisuallyHidden_default, { key: 1 }, {
-						default: withCtx(() => [createTextVNode(toDisplayString(unref(t).form.required), 1)]),
-						_: 1
-					})) : createCommentVNode("", true)
-				], 10, _hoisted_2$15)) : createCommentVNode("", true),
-				renderSlot(_ctx.$slots, "default"),
-				described.value ? (openBlock(), createElementBlock("p", {
-					key: 1,
 					id: unref(descriptionId),
 					class: normalizeClass(unref(formFieldDescription)())
-				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_3$7)) : createCommentVNode("", true),
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_4$5)) : createCommentVNode("", true),
 				createVNode(Transition, mergeProps({
 					"enter-from-class": "hn-collapse-closed",
 					"enter-to-class": "hn-collapse-open",
 					"leave-from-class": "hn-collapse-open",
 					"leave-to-class": "hn-collapse-closed"
 				}, toHandlers(unref(hooks))), {
-					default: withCtx(() => [message.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("div", _hoisted_5$3, [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"
-					}, toDisplayString(message.value), 11, _hoisted_6$2)])])) : createCommentVNode("", true)]),
+					}, toDisplayString(message.value), 11, _hoisted_7$2)])])) : createCommentVNode("", true)]),
 					_: 1
 				}, 16)
-			], 42, _hoisted_1$26);
+			], 2)], 2)], 46, _hoisted_1$26);
 		};
 	}
 });
@@ -14490,6 +14888,9 @@ var FormLayout_default = /* @__PURE__ */ defineComponent({
 	name: "HnFormLayout",
 	__name: "FormLayout",
 	props: {
+		orientation: {},
+		descriptionPlacement: {},
+		labelWidth: {},
 		legend: {},
 		description: {},
 		columns: { default: 1 },
@@ -14498,6 +14899,7 @@ var FormLayout_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		provideFormLayout(useFormFieldLayout(props));
 		const slots = useSlots();
 		const form = injectForm();
 		const descriptionId = useId();
@@ -14970,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"
@@ -15036,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
@@ -15840,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",
@@ -15978,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",
@@ -16408,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
@@ -16468,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,
@@ -17249,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
@@ -17266,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
@@ -17278,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;
 		}
@@ -17298,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": ""
 								}, {
@@ -17329,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
@@ -18268,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",
@@ -18275,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",