@hina-ui/vue 1.0.0 → 1.1.0

package/dist/index.js

@@ -5361,7 +5361,7 @@ 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 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)]",
@@ -5393,7 +5393,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 +5475,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,6 +5535,7 @@ 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)({
 					variant: props.variant,
@@ -5718,7 +5727,7 @@ function caretTop(node, at = node.selectionEnd) {
 //#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: ["hn-field text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium", "data-disabled:cursor-not-allowed data-disabled:opacity-50"],
 	variants: {
 		variant: {
 			primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]",
@@ -5752,7 +5761,7 @@ var textareaField = tv({ base: [
 ] });
 //#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",
@@ -5828,6 +5837,7 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 			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
@@ -5938,6 +5948,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 				disabled: unref(disabled),
 				"data-hn-number-input": "",
 				"data-invalid": unref(invalid) ? "" : void 0,
+				"data-disabled": unref(disabled) ? "" : void 0,
 				class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
 					variant: props.variant,
 					size: props.size
@@ -5974,6 +5985,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 				"locale",
 				"disabled",
 				"data-invalid",
+				"data-disabled",
 				"class"
 			]);
 		};
@@ -6120,7 +6132,7 @@ var inputGroup = tv({ base: [
 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,15 +6147,17 @@ var InputGroup_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const { disabled } = useFieldControl({ disabled: () => props.disabled });
 		provideInputGroup({
 			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,
+				"data-disabled": unref(disabled) ? "" : void 0,
 				class: normalizeClass(unref(cn)(unref(inputHost)({
 					variant: props.variant,
 					size: props.size
@@ -6318,7 +6332,7 @@ var _hoisted_3$18 = {
 var _hoisted_4$13 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_5$9 = { class: "min-w-0 flex-1" };
 var _hoisted_6$7 = { class: "block truncate" };
-var _hoisted_7$5 = {
+var _hoisted_7$6 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
@@ -6391,7 +6405,7 @@ var SelectList_default = /* @__PURE__ */ defineComponent({
 									class: normalizeClass(unref(selectItem)())
 								}, {
 									default: withCtx(() => [createVNode(unref(SelectItemText), { "as-child": "" }, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
+										default: withCtx(() => [createElementVNode("span", _hoisted_5$9, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$7, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$6, toDisplayString(item.description), 1)) : createCommentVNode("", true)])])]),
 										_: 2
 									}, 1024), createElementVNode("span", _hoisted_8$2, [createVNode(unref(SelectItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
@@ -6479,6 +6493,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 					onKeydown: _cache[0] || (_cache[0] = ($event) => keyboard.value = true),
 					onPointerdown: _cache[1] || (_cache[1] = ($event) => keyboard.value = false),
 					"data-invalid": unref(invalid) ? "" : void 0,
+					"data-disabled": unref(disabled) ? "" : void 0,
 					"aria-invalid": unref(invalid) || void 0,
 					class: unref(cn)(unref(group) ? unref(inputEmbedded)() : unref(inputHost)({
 						variant: props.variant,
@@ -6491,6 +6506,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 					"id",
 					"aria-describedby",
 					"data-invalid",
+					"data-disabled",
 					"aria-invalid",
 					"class"
 				]), createVNode(SelectList_default, {
@@ -6618,6 +6634,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 +6698,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 						"tabindex",
 						"aria-disabled",
 						"data-invalid",
+						"data-disabled",
 						"aria-invalid",
 						"class"
 					]),
@@ -6739,7 +6757,7 @@ var _hoisted_3$16 = {
 var _hoisted_4$11 = { class: "flex size-4 shrink-0 items-center justify-center" };
 var _hoisted_5$8 = { class: "min-w-0 flex-1" };
 var _hoisted_6$6 = { class: "block truncate" };
-var _hoisted_7$4 = {
+var _hoisted_7$5 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
@@ -6808,7 +6826,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$5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8$1, [createVNode(unref(ComboboxItemIndicator), null, {
 										default: withCtx(() => [createVNode(unref(Check))]),
 										_: 1
 									})])]),
@@ -6836,7 +6854,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 +6932,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
@@ -7441,7 +7460,7 @@ var _hoisted_3$14 = {
 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 = {
+var _hoisted_7$4 = {
 	key: 0,
 	class: "text-muted block truncate text-xs"
 };
@@ -7515,7 +7534,7 @@ 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(() => [createElementVNode("span", _hoisted_5$6, [renderSlot(_ctx.$slots, "option", { option: item }, () => [createElementVNode("span", _hoisted_6$5, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(item.description), 1)) : createCommentVNode("", true)])]), createElementVNode("span", _hoisted_8, [createVNode(unref(ListboxItemIndicator), null, {
 									default: withCtx(() => [createVNode(unref(Check))]),
 									_: 1
 								})])]),
@@ -7592,7 +7611,7 @@ var _hoisted_6$4 = {
 	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 +7680,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 +7696,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 					"disabled",
 					"data-placeholder",
 					"data-invalid",
+					"data-disabled",
 					"aria-invalid",
 					"class"
 				]), createVNode(unref(PopoverPortal), null, {
@@ -7719,7 +7740,7 @@ var TreeSelect_default = /* @__PURE__ */ defineComponent({
 													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_7$3, [isSelected ? (openBlock(), createBlock(unref(Check), { key: 0 })) : createCommentVNode("", true)])
 											]),
 											_: 2
 										}, 1040, [
@@ -7756,13 +7777,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 +7832,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 +7871,8 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		size: {},
 		description: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -7838,7 +7897,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 +7912,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 +7949,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 +7966,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 +7998,8 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		orientation: {},
 		size: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -7943,13 +8029,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 +8054,9 @@ var CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 					}, 1032, [
 						"value",
 						"size",
+						"control-placement",
+						"block",
+						"class",
 						"disabled",
 						"invalid",
 						"description"
@@ -7993,6 +8091,8 @@ var RadioGroup_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		orientation: {},
 		size: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -8017,7 +8117,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 +8128,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 +8167,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 +8226,8 @@ var Switch_default = /* @__PURE__ */ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		size: {},
 		description: {},
+		controlPlacement: {},
+		block: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
 		class: {}
@@ -8137,7 +8252,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 +8268,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 +8288,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 +8900,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 +8967,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,
@@ -8940,7 +9064,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
@@ -9042,6 +9170,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,
@@ -9998,7 +10127,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 +10197,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 +10726,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 +10797,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 +11070,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 +11152,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
@@ -14343,33 +14475,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$3 = {
 	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$2 = { 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 +14565,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 +14580,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 +14609,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$3, [createElementVNode("div", _hoisted_6$2, [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 +14701,9 @@ var FormLayout_default = /* @__PURE__ */ defineComponent({
 	name: "HnFormLayout",
 	__name: "FormLayout",
 	props: {
+		orientation: {},
+		descriptionPlacement: {},
+		labelWidth: {},
 		legend: {},
 		description: {},
 		columns: { default: 1 },
@@ -14498,6 +14712,7 @@ var FormLayout_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		provideFormLayout(useFormFieldLayout(props));
 		const slots = useSlots();
 		const form = injectForm();
 		const descriptionId = useId();