@astryx-vue/core 0.1.1 → 0.2.0

package/dist/ComplexSelector-D9iXd5cH.js

@@ -0,0 +1,293 @@
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { t as _sfc_main$1 } from "./Icon-Dfr4k6-S.js";
+import { t as _sfc_main$2 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$4 } from "./Popover-Crhk9PNP.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, useId, useModel, useSlots, watch, withCtx } from "vue";
+import "../styles/complex-selector.css";
+//#region src/ComplexSelector/ComplexSelector.vue
+const _hoisted_1 = [
+	"data-placeholder",
+	"data-size",
+	"data-status",
+	"data-variant",
+	"aria-busy",
+	"aria-expanded",
+	"aria-invalid",
+	"aria-required",
+	"disabled"
+];
+const _hoisted_2 = { class: "astryx-complex-selector-value" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxComplexSelector",
+	__name: "ComplexSelector",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		modelValue: {},
+		triggerLabel: {},
+		placeholder: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		status: {},
+		statusVariant: { default: "attached" },
+		labelTooltip: {},
+		size: { default: "md" },
+		width: {},
+		placement: { default: "below" },
+		alignment: { default: "start" },
+		startIcon: {},
+		variant: { default: "input" },
+		renderTrigger: {},
+		handleRef: {},
+		changeAction: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const model = useModel(__props, "modelValue");
+		const messages = useAstryxMessages();
+		const isOpen = ref(false);
+		const isPending = ref(false);
+		const optimistic = ref(void 0);
+		const triggerId = `astryx-complex-selector-${useId()}`;
+		const labelId = `${triggerId}-label`;
+		const contentId = `${triggerId}-content`;
+		const placeholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
+		const isBusy = computed(() => props.isLoading || isPending.value);
+		const displayValue = computed(() => isPending.value && optimistic.value !== void 0 ? optimistic.value : model.value);
+		const hasTriggerLabel = computed(() => props.triggerLabel != null && props.triggerLabel !== "");
+		const state = computed(() => ({
+			isOpen: isOpen.value,
+			isBusy: isBusy.value,
+			triggerId,
+			contentId
+		}));
+		function setOpen(next) {
+			if (props.isDisabled) return;
+			isOpen.value = next;
+		}
+		async function commit(next) {
+			model.value = next;
+			emit("change", next);
+			if (props.changeAction == null) return;
+			optimistic.value = next;
+			isPending.value = true;
+			try {
+				await props.changeAction(next);
+			} finally {
+				isPending.value = false;
+			}
+		}
+		function close() {
+			isOpen.value = false;
+		}
+		function open() {
+			if (props.isDisabled) return;
+			isOpen.value = true;
+		}
+		function toggle() {
+			if (isOpen.value) close();
+			else open();
+		}
+		function onTriggerKeyDown(event) {
+			if (event.key === "ArrowDown" && !isOpen.value && !props.isDisabled) {
+				event.preventDefault();
+				isOpen.value = true;
+			}
+		}
+		function onCustomClick(event) {
+			event.stopImmediatePropagation();
+			toggle();
+		}
+		const hasCustomTrigger = computed(() => props.renderTrigger != null || slots.trigger != null);
+		const triggerProps = computed(() => ({
+			"id": triggerId,
+			"onClick": onCustomClick,
+			"onKeydown": onTriggerKeyDown,
+			"aria-haspopup": "dialog",
+			"aria-expanded": isOpen.value,
+			"aria-controls": isOpen.value ? contentId : void 0,
+			"aria-busy": isBusy.value ? true : void 0,
+			"aria-label": props.label
+		}));
+		const triggerView = () => props.renderTrigger?.(triggerProps.value) ?? null;
+		const handle = {
+			open,
+			close,
+			toggle,
+			isOpen: () => isOpen.value
+		};
+		function publishHandle(value) {
+			const target = props.handleRef;
+			if (target == null) return;
+			if (typeof target === "function") target(value);
+			else target.value = value;
+		}
+		watch(() => props.handleRef, (_next, previous) => {
+			if (previous != null && previous !== props.handleRef) {
+				if (typeof previous === "function") previous(null);
+				else previous.value = null;
+			}
+			publishHandle(handle);
+		}, { immediate: true });
+		onBeforeUnmount(() => publishHandle(null));
+		__expose(handle);
+		return (_ctx, _cache) => {
+			return hasCustomTrigger.value ? (openBlock(), createBlock(_sfc_main$4, {
+				key: 0,
+				alignment: __props.alignment,
+				"has-auto-focus": true,
+				"has-close-button": false,
+				"is-enabled": !__props.isDisabled,
+				"is-open": isOpen.value,
+				label: __props.label,
+				padding: 3,
+				placement: __props.placement,
+				role: "dialog",
+				onOpenChange: setOpen
+			}, {
+				content: withCtx(() => [createElementVNode("div", {
+					id: contentId,
+					class: "astryx-complex-selector-content"
+				}, [renderSlot(_ctx.$slots, "default", {
+					close,
+					commit,
+					state: state.value,
+					value: displayValue.value
+				})])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), () => [(openBlock(), createBlock(resolveDynamicComponent(triggerView)))])]),
+				_: 3
+			}, 8, [
+				"alignment",
+				"is-enabled",
+				"is-open",
+				"label",
+				"placement"
+			])) : (openBlock(), createBlock(_sfc_main$3, {
+				key: 1,
+				class: "astryx-complex-selector-field",
+				"data-variant": __props.variant,
+				description: __props.description,
+				"input-id": triggerId,
+				"is-disabled": __props.isDisabled,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				label: __props.label,
+				"label-id": labelId,
+				"label-tooltip": __props.labelTooltip,
+				status: __props.status,
+				"status-variant": __props.statusVariant,
+				width: __props.width
+			}, {
+				default: withCtx(() => [createVNode(_sfc_main$4, {
+					alignment: __props.alignment,
+					"has-auto-focus": true,
+					"has-close-button": false,
+					"is-enabled": !__props.isDisabled,
+					"is-open": isOpen.value,
+					label: __props.label,
+					padding: 3,
+					placement: __props.placement,
+					role: "dialog",
+					onOpenChange: setOpen
+				}, {
+					content: withCtx(() => [createElementVNode("div", {
+						id: contentId,
+						class: "astryx-complex-selector-content"
+					}, [renderSlot(_ctx.$slots, "default", {
+						close,
+						commit,
+						state: state.value,
+						value: displayValue.value
+					})])]),
+					default: withCtx(() => [createElementVNode("button", {
+						id: triggerId,
+						class: "astryx-complex-selector",
+						"data-placeholder": hasTriggerLabel.value ? void 0 : "",
+						"data-size": __props.size,
+						"data-status": __props.status?.type,
+						"data-variant": __props.variant,
+						"aria-busy": isBusy.value || void 0,
+						"aria-expanded": isOpen.value,
+						"aria-invalid": __props.status?.type === "error" || void 0,
+						"aria-labelledby": labelId,
+						"aria-required": __props.isRequired || void 0,
+						disabled: __props.isDisabled,
+						type: "button",
+						onKeydown: onTriggerKeyDown
+					}, [
+						__props.startIcon ? (openBlock(), createBlock(_sfc_main$1, {
+							key: 0,
+							class: "astryx-complex-selector-start",
+							color: "secondary",
+							icon: __props.startIcon,
+							size: "sm"
+						}, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+						createElementVNode("span", _hoisted_2, toDisplayString(hasTriggerLabel.value ? __props.triggerLabel : placeholder.value), 1),
+						isBusy.value ? (openBlock(), createBlock(_sfc_main$2, {
+							key: 1,
+							size: "sm"
+						})) : createCommentVNode("v-if", true),
+						createVNode(_sfc_main$1, {
+							class: "astryx-complex-selector-chevron",
+							"data-state": isOpen.value ? "expanded" : "collapsed",
+							color: "secondary",
+							icon: "chevronDown",
+							size: "sm"
+						}, null, 8, ["data-state"])
+					], 40, _hoisted_1)]),
+					_: 3
+				}, 8, [
+					"alignment",
+					"is-enabled",
+					"is-open",
+					"label",
+					"placement"
+				])]),
+				_: 3
+			}, 8, [
+				"data-variant",
+				"description",
+				"is-disabled",
+				"is-label-hidden",
+				"is-optional",
+				"is-required",
+				"label",
+				"label-tooltip",
+				"status",
+				"status-variant",
+				"width"
+			]));
+		};
+	}
+});
+//#endregion
+//#region src/ComplexSelector/index.ts
+var ComplexSelector_default = _sfc_main;
+//#endregion
+export { _sfc_main as n, ComplexSelector_default as t };

package/dist/ContextMenu/index.d.ts

@@ -1,2 +1,2 @@
-import { C as ContextMenuSlots, D as ContextMenuTriggerElement, E as ContextMenuSubMenuSlots, O as ContextMenuVariant, S as ContextMenuSize, T as ContextMenuSubMenuProps, _ as ContextMenuItemSlots, a as _default, b as ContextMenuProps, c as ContextMenuDividerData, d as ContextMenuGroupProps, f as ContextMenuGroupSlots, g as ContextMenuItemProps, h as ContextMenuItemIcon, i as _default$1, k as ContextMenuWidth, l as ContextMenuDividerProps, m as ContextMenuItemEmits, n as _default$3, o as useContextMenu, p as ContextMenuItemData, r as _default$2, s as useContextMenuSize, t as _default$4, u as ContextMenuEmits, v as ContextMenuItemTarget, w as ContextMenuSubMenuEmits, x as ContextMenuSection, y as ContextMenuOption } from "../index-Bc0dgVM5.js";
+import { C as ContextMenuSlots, D as ContextMenuTriggerElement, E as ContextMenuSubMenuSlots, O as ContextMenuVariant, S as ContextMenuSize, T as ContextMenuSubMenuProps, _ as ContextMenuItemSlots, a as _default, b as ContextMenuProps, c as ContextMenuDividerData, d as ContextMenuGroupProps, f as ContextMenuGroupSlots, g as ContextMenuItemProps, h as ContextMenuItemIcon, i as _default$1, k as ContextMenuWidth, l as ContextMenuDividerProps, m as ContextMenuItemEmits, n as _default$3, o as useContextMenu, p as ContextMenuItemData, r as _default$2, s as useContextMenuSize, t as _default$4, u as ContextMenuEmits, v as ContextMenuItemTarget, w as ContextMenuSubMenuEmits, x as ContextMenuSection, y as ContextMenuOption } from "../index-CTolyeii.js";
 export { _default as ContextMenu, _default$1 as ContextMenuDivider, type ContextMenuDividerData, type ContextMenuDividerProps, type ContextMenuEmits, _default$2 as ContextMenuGroup, type ContextMenuGroupProps, type ContextMenuGroupSlots, _default$3 as ContextMenuItem, type ContextMenuItemData, type ContextMenuItemEmits, type ContextMenuItemIcon, type ContextMenuItemProps, type ContextMenuItemSlots, type ContextMenuItemTarget, type ContextMenuOption, type ContextMenuProps, type ContextMenuSection, type ContextMenuSize, type ContextMenuSlots, _default$4 as ContextMenuSubMenu, type ContextMenuSubMenuEmits, type ContextMenuSubMenuProps, type ContextMenuSubMenuSlots, type ContextMenuTriggerElement, type ContextMenuVariant, type ContextMenuWidth, useContextMenu, useContextMenuSize };

package/dist/ContextMenu/index.js

@@ -1,2 +1,2 @@
-import { a as _sfc_main$1, i as _sfc_main$2, n as _sfc_main$4, o as useContextMenu, r as _sfc_main$3, s as useContextMenuSize, t as _sfc_main } from "../ContextMenu-dA-ppaRQ.js";
+import { a as _sfc_main$1, i as _sfc_main$2, n as _sfc_main$4, o as useContextMenu, r as _sfc_main$3, s as useContextMenuSize, t as _sfc_main } from "../ContextMenu-HS_WqYIg.js";
 export { _sfc_main as ContextMenu, _sfc_main$1 as ContextMenuDivider, _sfc_main$2 as ContextMenuGroup, _sfc_main$3 as ContextMenuItem, _sfc_main$4 as ContextMenuSubMenu, useContextMenu, useContextMenuSize };

package/dist/{ContextMenu-dA-ppaRQ.js → ContextMenu-HS_WqYIg.js}

@@ -2,7 +2,7 @@ import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
 import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
 import { t as useLongPress } from "./useLongPress-Cyxwa73s.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$6 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$6 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$7 } from "./Divider-BtwnL18I.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";

package/dist/DateInput/index.d.ts

@@ -1,2 +1,2 @@
-import { i as DateInputSlots, n as DateInputEmits, r as DateInputProps, t as _default } from "../index-12ObcW99.js";
+import { i as DateInputSlots, n as DateInputEmits, r as DateInputProps, t as _default } from "../index-DtjAdYEc.js";
 export { _default as DateInput, type DateInputEmits, type DateInputProps, type DateInputSlots };

package/dist/DateInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateInput-BOIb0zAp.js";
+import { t as _sfc_main } from "../DateInput-DE2TN1Rq.js";
 export { _sfc_main as DateInput };

package/dist/{DateInput-BOIb0zAp.js → DateInput-DE2TN1Rq.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main$1 } from "./Calendar-BEyrkUtr.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { t as _sfc_main$1 } from "./Calendar-BG7wEsro.js";
 import { t as _sfc_main$2 } from "./Popover-Crhk9PNP.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, useId, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/date-input.css";

package/dist/DateRangeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Gn as DateRange, Jn as DateRangePreset, Kn as DateRangeInputEmits, Wn as _default, qn as DateRangeInputProps } from "../index-CQ9F1f_F.js";
+import { $n as DateRangeInputEmits, Qn as DateRange, Zn as _default, er as DateRangeInputProps, tr as DateRangePreset } from "../index-C6iJwTL0.js";
 export { type DateRange, _default as DateRangeInput, type DateRangeInputEmits, type DateRangeInputProps, type DateRangePreset };

package/dist/DateRangeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateRangeInput-DLcbgUBi.js";
+import { t as _sfc_main } from "../DateRangeInput-1bhPGG2s.js";
 export { _sfc_main as DateRangeInput };

package/dist/{DateRangeInput-DLcbgUBi.js → DateRangeInput-1bhPGG2s.js}

@@ -1,10 +1,10 @@
 import { a as todayISODate, c as formatDateRange, f as orderRange, l as isDayOutsideSpan, n as buildMonthGrid, o as applyRangeClick, p as resolveWeekStart, t as addMonths, u as isRangeWithinSpan } from "./useMonthGrid-CmJsZTcB.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-Dbo22sck.js";
+import { n as weekdayNames, t as formatCalendarMonth } from "./locale-Cpk_nrLA.js";
 import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
-import { n as weekdayNames, t as formatCalendarMonth } from "./locale-Cpk_nrLA.js";
-import { a as useAstryxMessages, i as useAstryxLocale } from "./context-BshXcNYX.js";
-import { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
-import { t as _sfc_main$5 } from "./Field-VlTBsIEo.js";
+import { t as _sfc_main$4 } from "./Icon-Dfr4k6-S.js";
+import { t as _sfc_main$5 } from "./Field-8zRxzDHE.js";
 import { t as _sfc_main$6 } from "./Popover-Crhk9PNP.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useId, useModel, withCtx } from "vue";
 import "../styles/calendar.css";

package/dist/DateTimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Bn as _default, Hn as DateTimeInputProps, Un as DateTimeInputSize, Vn as DateTimeInputEmits } from "../index-CQ9F1f_F.js";
+import { Jn as DateTimeInputEmits, Xn as DateTimeInputSize, Yn as DateTimeInputProps, qn as _default } from "../index-C6iJwTL0.js";
 export { _default as DateTimeInput, type DateTimeInputEmits, type DateTimeInputProps, type DateTimeInputSize };

package/dist/DateTimeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateTimeInput-RitYX_Yx.js";
+import { t as _sfc_main } from "../DateTimeInput-SnPdgk6P.js";
 export { _sfc_main as DateTimeInput };

package/dist/{DateTimeInput-RitYX_Yx.js → DateTimeInput-SnPdgk6P.js}

@@ -1,9 +1,9 @@
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
-import { t as _sfc_main$3 } from "./Field-VlTBsIEo.js";
-import { t as _sfc_main$4 } from "./DateInput-BOIb0zAp.js";
-import { t as _sfc_main$5 } from "./TimeField-DeQ1ukHl.js";
+import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$4 } from "./DateInput-DE2TN1Rq.js";
+import { t as _sfc_main$5 } from "./TimeField-C7t9Knq9.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, ref, unref, useId, useModel, watch, withCtx } from "vue";
 import "../styles/date-time-input.css";
 //#region src/DateTimeInput/DateTimeInput.vue

package/dist/Divider/index.d.ts

@@ -1,2 +1,2 @@
-import { i as DividerVariant, n as DividerOrientation, r as DividerProps, t as _default } from "../index-Byar3h1e.js";
+import { i as DividerVariant, n as DividerOrientation, r as DividerProps, t as _default } from "../index-HV6W3xCx.js";
 export { _default as Divider, type DividerOrientation, type DividerProps, type DividerVariant };

package/dist/DropdownMenu/index.js

@@ -1,2 +1,2 @@
-import { a as useDropdownMenuContext, i as _sfc_main$1, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main } from "../DropdownMenu-B0gogrvG.js";
+import { a as useDropdownMenuContext, i as _sfc_main$1, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main } from "../DropdownMenu-UJGych6v.js";
 export { _sfc_main as DropdownMenu, _sfc_main$1 as DropdownMenuDivider, _sfc_main$2 as DropdownMenuGroup, _sfc_main$3 as DropdownMenuItem, useDropdownMenuContext };

package/dist/{DropdownMenu-B0gogrvG.js → DropdownMenu-UJGych6v.js}

@@ -1,7 +1,7 @@
 import { t as _sfc_main$5 } from "./Button-DrqeomlE.js";
 import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
 import { t as useTypeahead } from "./useTypeahead-PAK8lMYz.js";
-import { t as _sfc_main$6 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$6 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$7 } from "./Divider-BtwnL18I.js";
 import { t as _sfc_main$8 } from "./Item-C1z6gXn8.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";

package/dist/EmptyState/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../EmptyState-Bhlqgsg4.js";
+import { t as _sfc_main } from "../EmptyState-CUJdTYKV.js";
 export { _sfc_main as EmptyState };

package/dist/{EmptyState-Bhlqgsg4.js → EmptyState-CUJdTYKV.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$1 } from "./Heading-Dugosn6j.js";
-import { t as _sfc_main$2 } from "./Text-CKd7e3gK.js";
+import { t as _sfc_main$2 } from "./Text-BHVghsWo.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
 import "../styles/empty-state.css";
 //#region src/EmptyState/EmptyState.vue

package/dist/Field/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main$1 } from "../FieldLabel-B1NRyQlS.js";
-import { t as _sfc_main } from "../Field-VlTBsIEo.js";
+import { t as _sfc_main$1 } from "../FieldLabel-DmmJyX7w.js";
+import { t as _sfc_main } from "../Field-8zRxzDHE.js";
 export { _sfc_main as Field, _sfc_main$1 as FieldLabel };

package/dist/{Field-VlTBsIEo.js → Field-8zRxzDHE.js}

@@ -1,9 +1,14 @@
-import { t as _sfc_main$1 } from "./FieldLabel-B1NRyQlS.js";
+import { a as useFormLayout } from "./context-Cfjh8te1.js";
+import { t as _sfc_main$1 } from "./FieldLabel-DmmJyX7w.js";
 import { t as _sfc_main$2 } from "./FieldStatus-MjY19ERl.js";
 import { computed, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeProps, normalizeStyle, openBlock, renderSlot, useTemplateRef, withCtx } from "vue";
 import "../styles/field.css";
 //#region src/Field/Field.vue
-const _hoisted_1 = ["data-status-variant", "data-group-label"];
+const _hoisted_1 = [
+	"data-status-variant",
+	"data-group-label",
+	"data-layout"
+];
 const _hoisted_2 = { class: "astryx-field-control" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxField",
@@ -42,13 +47,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			};
 		});
 		const style = computed(() => ({ "--astryx-field-width": typeof props.width === "number" ? `${props.width}px` : props.width }));
+		const formLayout = useFormLayout();
+		const horizontalLabels = computed(() => formLayout.value?.direction === "horizontal-labels");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "field",
 				class: "astryx-field",
 				style: normalizeStyle(style.value),
 				"data-status-variant": __props.statusVariant,
-				"data-group-label": __props.isGroupLabel || void 0
+				"data-group-label": __props.isGroupLabel || void 0,
+				"data-layout": horizontalLabels.value ? "horizontal-labels" : void 0
 			}, [createVNode(_sfc_main$1, {
 				label: __props.label,
 				"input-id": __props.inputId,

package/dist/{FieldLabel-B1NRyQlS.js → FieldLabel-DmmJyX7w.js}

@@ -2,6 +2,7 @@ import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
 import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
 import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$4 } from "./IconButton-BNQuz9W_.js";
+import { a as useFormLayout, n as showsOptionalIndicator, r as showsRequiredIndicator } from "./context-Cfjh8te1.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, onScopeDispose, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useId, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/field.css";
 //#region src/Field/FieldInfoTip.vue
@@ -136,6 +137,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const labelId = computed(() => props.labelId ?? `${props.inputId}-label`);
 		const descriptionId = computed(() => props.descriptionId ?? `${props.inputId}-description`);
 		const icon = computed(() => props.labelIcon ? toRaw(props.labelIcon) : void 0);
+		const formLayout = useFormLayout();
+		const optionality = computed(() => formLayout.value?.defaultOptionality);
+		const showOptional = computed(() => showsOptionalIndicator(props.isOptional, props.isRequired, optionality.value));
+		const showRequired = computed(() => showsRequiredIndicator(props.isRequired, props.isOptional, optionality.value));
 		function focusFromDescription(event) {
 			if (props.isGroupLabel || props.isDisabled) return;
 			const target = event.target;
@@ -160,7 +165,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					default: withCtx(() => [_ctx.$slots.labelIcon || icon.value ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "labelIcon", {}, () => [icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(__props.label), 1)]),
 					_: 3
 				}, 8, ["id", "for"])),
-				__props.isOptional || __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.isOptional ? __props.optionalLabel : __props.requiredLabel), 1)) : createCommentVNode("v-if", true),
+				showOptional.value || showRequired.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(showOptional.value ? __props.optionalLabel : __props.requiredLabel), 1)) : createCommentVNode("v-if", true),
 				__props.labelTooltip ? (openBlock(), createBlock(_sfc_main$1, {
 					key: 1,
 					text: __props.labelTooltip

package/dist/FileInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Fn as FileInputMode, In as FileInputProps, Ln as FileInputSize, Nn as _default, Pn as FileInputEmits, Rn as FileInputStatus, zn as FileInputValue } from "../index-CQ9F1f_F.js";
+import { Bn as _default, Gn as FileInputStatus, Hn as FileInputMode, Kn as FileInputValue, Un as FileInputProps, Vn as FileInputEmits, Wn as FileInputSize } from "../index-C6iJwTL0.js";
 export { _default as FileInput, type FileInputEmits, type FileInputMode, type FileInputProps, type FileInputSize, type FileInputStatus, type FileInputValue };

package/dist/FileInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../FileInput-CYvEV503.js";
+import { t as _sfc_main } from "../FileInput-BQiwE-GB.js";
 export { _sfc_main as FileInput };

package/dist/{FileInput-CYvEV503.js → FileInput-BQiwE-GB.js}

@@ -1,12 +1,12 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
 import { t as useAnnounce } from "./announce-Cnio10Wk.js";
 import { n as selectFiles, t as formatFileSize } from "./useFileSelection-BPtaegqK.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
-import { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$4 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$5 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$6 } from "./Field-VlTBsIEo.js";
+import { t as _sfc_main$6 } from "./Field-8zRxzDHE.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/bordered-control.css";
 import "../styles/file-input.css";

package/dist/FormLayout/index.d.ts

@@ -0,0 +1,2 @@
+import { a as FormOptionality, i as FormLayoutDirection, n as FormLayoutProps, r as FormLayoutSlots, t as _default } from "../index-BrJzFA5X.js";
+export { _default as FormLayout, type FormLayoutDirection, type FormLayoutProps, type FormLayoutSlots, type FormOptionality };

package/dist/FormLayout/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../FormLayout-D47FjiOq.js";
+export { _sfc_main as FormLayout };

package/dist/FormLayout-D47FjiOq.js

@@ -0,0 +1,40 @@
+import { t as formLayoutKey } from "./context-Cfjh8te1.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, provide, renderSlot, useAttrs, useTemplateRef } from "vue";
+import "../styles/form-layout.css";
+//#region src/FormLayout/FormLayout.vue
+const _hoisted_1 = ["data-direction"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxFormLayout",
+	inheritAttrs: false,
+	__name: "FormLayout",
+	props: {
+		direction: { default: "vertical" },
+		defaultOptionality: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		__expose({ element: root });
+		const context = computed(() => ({
+			direction: props.direction,
+			defaultOptionality: props.defaultOptionality
+		}));
+		provide(formLayoutKey, context);
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-form-layout", attrs.class]);
+		const rootStyle = computed(() => attrs.style);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				"data-direction": __props.direction,
+				style: rootStyle.value
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/HoverCard/index.d.ts

@@ -1,2 +1,2 @@
-import { a as HoverCardHoverIndication, c as HoverCardSlots, i as HoverCardFocusTrigger, l as HoverCardTouchTrigger, n as HoverCardAlignment, o as HoverCardPlacement, r as HoverCardEmits, s as HoverCardProps, t as _default } from "../index-BhYFxnjV.js";
+import { a as HoverCardHoverIndication, c as HoverCardSlots, i as HoverCardFocusTrigger, l as HoverCardTouchTrigger, n as HoverCardAlignment, o as HoverCardPlacement, r as HoverCardEmits, s as HoverCardProps, t as _default } from "../index-kaKBOZSU.js";
 export { _default as HoverCard, type HoverCardAlignment, type HoverCardEmits, type HoverCardFocusTrigger, type HoverCardHoverIndication, type HoverCardPlacement, type HoverCardProps, type HoverCardSlots, type HoverCardTouchTrigger };

package/dist/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import { a as IconSize, i as IconProps, n as IconColor, o as IconSlots, r as IconName } from "../types-DZoEm_DG.js";
+import { a as isIconGlyph, i as iconGlyphSlug, n as ICON_GLYPHS, r as IconGlyphName, t as _default } from "../index-Bainr_3n.js";
+export { ICON_GLYPHS, _default as Icon, type IconColor, type IconGlyphName, type IconName, type IconProps, type IconSize, type IconSlots, iconGlyphSlug, isIconGlyph };

package/dist/Icon/index.js

@@ -0,0 +1,2 @@
+import { i as isIconGlyph, n as ICON_GLYPHS, r as iconGlyphSlug, t as _sfc_main } from "../Icon-Dfr4k6-S.js";
+export { ICON_GLYPHS, _sfc_main as Icon, iconGlyphSlug, isIconGlyph };

package/dist/{Icon-5MdZQ18k.js → Icon-Dfr4k6-S.js}

@@ -83,4 +83,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { isIconGlyph as n, _sfc_main as t };
+export { isIconGlyph as i, ICON_GLYPHS as n, iconGlyphSlug as r, _sfc_main as t };

package/dist/Layout/index.d.ts

@@ -0,0 +1,2 @@
+import { _ as LayoutHeight, a as _default, c as LayoutFooterProps, d as LayoutHeaderSlots, f as LayoutPanelProps, g as LayoutArea, h as LayoutSlots, i as _default$1, l as LayoutFooterSlots, m as LayoutProps, n as _default$3, o as LayoutContentProps, p as LayoutPanelSlots, r as _default$2, s as LayoutContentSlots, t as _default$4, u as LayoutHeaderProps } from "../index-CDdRQQF3.js";
+export { _default as Layout, type LayoutArea, _default$1 as LayoutContent, type LayoutContentProps, type LayoutContentSlots, _default$2 as LayoutFooter, type LayoutFooterProps, type LayoutFooterSlots, _default$3 as LayoutHeader, type LayoutHeaderProps, type LayoutHeaderSlots, type LayoutHeight, _default$4 as LayoutPanel, type LayoutPanelProps, type LayoutPanelSlots, type LayoutProps, type LayoutSlots };

package/dist/Layout/index.js

@@ -0,0 +1,3 @@
+import { a as _sfc_main, n as _sfc_main$3, r as _sfc_main$1, t as _sfc_main$4 } from "../LayoutPanel-C34uOq3e.js";
+import { t as _sfc_main$2 } from "../Layout-Bed3kP0M.js";
+export { _sfc_main as Layout, _sfc_main$1 as LayoutContent, _sfc_main$2 as LayoutFooter, _sfc_main$3 as LayoutHeader, _sfc_main$4 as LayoutPanel };