@astryx-vue/core 0.1.3 → 0.2.1

package/dist/DateInput/index.js

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

package/dist/DateInput-Crcg-CCj.js

@@ -0,0 +1,376 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-DzcK4T_C.js";
+import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$2 } from "./BottomSheet-Dg95HB1s.js";
+import { t as _sfc_main$3 } from "./Calendar-DqC3EDN1.js";
+import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$5 } from "./Popover-Crhk9PNP.js";
+import { t as formatInstant } from "./formatInstant-BDWUIxS7.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, resolveDynamicComponent, useId, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/date-input.css";
+//#region src/DateInput/DateInput.vue
+const _hoisted_1 = ["data-status", "data-presentation"];
+const _hoisted_2 = [
+	"data-disabled",
+	"data-size",
+	"data-status"
+];
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-date-input-prefix"
+};
+const _hoisted_4 = ["disabled", "aria-label"];
+const _hoisted_5 = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"inputmode",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-controls",
+	"aria-expanded",
+	"title"
+];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = {
+	key: 2,
+	class: "astryx-date-input-suffix"
+};
+const _hoisted_8 = ["id"];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = ["name", "value"];
+const TOUCH_POINTER_QUERY = "(pointer: coarse)";
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDateInput",
+	__name: "DateInput",
+	props: {
+		id: {},
+		describedBy: {},
+		modelValue: { default: null },
+		placeholder: {},
+		min: {},
+		max: {},
+		isDateDisabled: {},
+		name: {},
+		label: {},
+		description: {},
+		isLabelHidden: { type: Boolean },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledReason: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		status: {},
+		statusVariant: { default: "attached" },
+		format: {
+			type: [String, Function],
+			default: "date_long"
+		},
+		presentation: { default: "popover" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const PassThrough = defineComponent({
+			name: "DateInputPassThrough",
+			setup(_, { slots }) {
+				return () => slots.default?.({});
+			}
+		});
+		const generatedId = `astryx-date-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const popupId = computed(() => `${inputId.value}-popup`);
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const isCoarsePointer = useMediaQuery(TOUCH_POINTER_QUERY);
+		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.dateInput.placeholder);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.dateInput.clear(props.label));
+		const dialogLabel = computed(() => props.label || messages.value.dateInput.dialogLabel);
+		const inputRef = useTemplateRef("inputRef");
+		const isOpen = ref(false);
+		const inputValue = ref("");
+		const modelValueRef = computed({
+			get: () => props.modelValue,
+			set: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		function toIso(date) {
+			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+		}
+		function formatCommitted(date) {
+			if (!date) return "";
+			const iso = toIso(date);
+			const format = props.format;
+			if (typeof format === "function") return format(iso);
+			if (format === "system_date") return iso;
+			return formatInstant(date, format, locale.value);
+		}
+		function parseDate(str) {
+			if (!str.trim()) return null;
+			const match = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+			if (match) {
+				const [, year, month, day] = match;
+				const date = new Date(Number(year), Number(month) - 1, Number(day));
+				if (!Number.isNaN(date.getTime()) && date.getFullYear() === Number(year) && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day)) return date;
+			}
+			return null;
+		}
+		function syncDisplayValue() {
+			inputValue.value = formatCommitted(props.modelValue);
+		}
+		watch(() => [
+			props.modelValue,
+			props.format,
+			locale.value
+		], syncDisplayValue, { immediate: true });
+		function resolvedStatus(status) {
+			if (status == null || status === "default") return void 0;
+			if (typeof status === "string") return { type: status };
+			return status;
+		}
+		const statusValue = computed(() => resolvedStatus(props.status));
+		const statusType = computed(() => statusValue.value?.type);
+		const useSheet = computed(() => {
+			if (props.presentation === "bottom-sheet") return true;
+			if (props.presentation === "adaptive-bottom-sheet") return isCoarsePointer.value;
+			return false;
+		});
+		const showsField = computed(() => {
+			if (props.isLabelHidden && !props.description && !statusValue.value?.message) return false;
+			return Boolean(props.label || props.description || statusValue.value?.message);
+		});
+		const shell = computed(() => showsField.value ? _sfc_main$4 : PassThrough);
+		const fieldBindings = computed(() => showsField.value ? {
+			label: props.label ?? "",
+			inputId: inputId.value,
+			description: props.description,
+			isLabelHidden: props.isLabelHidden || !props.label,
+			isDisabled: props.disabled,
+			status: statusValue.value,
+			statusVariant: props.statusVariant
+		} : {});
+		const toggleLabel = computed(() => isOpen.value ? messages.value.dateInput.closeCalendar : messages.value.dateInput.openCalendar);
+		function describedBy(fieldIds) {
+			return [props.describedBy, fieldIds].filter(Boolean).join(" ") || void 0;
+		}
+		function onInput(event) {
+			if (useSheet.value) return;
+			const target = event.target;
+			const value = target.value.trim();
+			inputValue.value = target.value;
+			const parsed = parseDate(value);
+			if (parsed) modelValueRef.value = parsed;
+		}
+		function onBlur() {
+			if (!parseDate(inputValue.value.trim())) syncDisplayValue();
+		}
+		function onOpenChange(open) {
+			if (!useSheet.value) isOpen.value = open;
+		}
+		function openCalendar() {
+			if (!props.disabled) isOpen.value = true;
+		}
+		function onToggleClick() {
+			if (useSheet.value) openCalendar();
+		}
+		function onInputKeyDown(event) {
+			if (props.disabled || isOpen.value) return;
+			if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
+				event.preventDefault();
+				openCalendar();
+			}
+		}
+		function onCalendarChange(date) {
+			modelValueRef.value = date;
+			isOpen.value = false;
+			inputRef.value?.blur();
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			modelValueRef.value = null;
+			inputValue.value = "";
+			isOpen.value = false;
+		}
+		syncDisplayValue();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(shell.value), normalizeProps(guardReactiveProps(fieldBindings.value)), {
+				default: withCtx((field) => [createElementVNode("div", {
+					class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${props.size}`]]),
+					"data-status": statusType.value,
+					"data-presentation": useSheet.value ? "bottom-sheet" : "popover"
+				}, [
+					createVNode(_sfc_main$5, {
+						"is-open": useSheet.value ? false : isOpen.value,
+						"is-enabled": !useSheet.value && !props.disabled,
+						placement: "below",
+						alignment: "start",
+						padding: 0,
+						width: 248,
+						"has-close-button": false,
+						"is-modal": false,
+						"has-auto-focus": true,
+						role: "dialog",
+						label: dialogLabel.value,
+						onOpenChange
+					}, {
+						content: withCtx(() => [!useSheet.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							id: popupId.value
+						}, [createVNode(_sfc_main$3, {
+							"model-value": props.modelValue,
+							min: props.min,
+							max: props.max,
+							"is-date-disabled": props.isDateDisabled,
+							"onUpdate:modelValue": onCalendarChange
+						}, null, 8, [
+							"model-value",
+							"min",
+							"max",
+							"is-date-disabled"
+						])], 8, _hoisted_8)) : createCommentVNode("v-if", true)]),
+						default: withCtx(() => [createElementVNode("div", {
+							class: "astryx-date-input-wrapper",
+							"data-disabled": props.disabled ? "true" : void 0,
+							"data-size": props.size,
+							"data-status": statusType.value
+						}, [
+							_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("v-if", true),
+							createElementVNode("button", {
+								type: "button",
+								class: "astryx-date-input-toggle",
+								disabled: props.disabled,
+								"aria-label": toggleLabel.value,
+								onClick: onToggleClick
+							}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
+								width: "16",
+								height: "16",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								"aria-hidden": "true"
+							}, [
+								createElementVNode("rect", {
+									x: "3",
+									y: "4",
+									width: "10",
+									height: "9",
+									rx: "1",
+									stroke: "currentColor",
+									"stroke-width": "1.5"
+								}),
+								createElementVNode("path", {
+									d: "M3 6H13",
+									stroke: "currentColor",
+									"stroke-width": "1.5"
+								}),
+								createElementVNode("path", {
+									d: "M5 3V5M11 3V5",
+									stroke: "currentColor",
+									"stroke-width": "1.5",
+									"stroke-linecap": "round"
+								})
+							], -1)])], 8, _hoisted_4),
+							createElementVNode("input", {
+								id: inputId.value,
+								ref_key: "inputRef",
+								ref: inputRef,
+								type: "text",
+								class: "astryx-date-input-field",
+								role: "combobox",
+								value: inputValue.value,
+								placeholder: resolvedPlaceholder.value,
+								disabled: props.disabled,
+								readonly: useSheet.value,
+								inputmode: useSheet.value ? "none" : void 0,
+								"aria-label": showsField.value ? void 0 : props.label,
+								"aria-labelledby": showsField.value ? field?.labelId : void 0,
+								"aria-describedby": describedBy(field?.describedBy),
+								"aria-invalid": statusType.value === "error" ? "true" : void 0,
+								"aria-controls": popupId.value,
+								"aria-expanded": isOpen.value,
+								"aria-haspopup": "dialog",
+								title: props.disabledReason,
+								autocomplete: "off",
+								onInput,
+								onBlur,
+								onClick: openCalendar,
+								onKeydown: onInputKeyDown
+							}, null, 40, _hoisted_5),
+							props.clearable && props.modelValue ? (openBlock(), createElementBlock("button", {
+								key: 1,
+								type: "button",
+								class: "astryx-date-input-clear",
+								"aria-label": resolvedClearLabel.value,
+								tabindex: "-1",
+								onClick: onClear
+							}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
+								width: "16",
+								height: "16",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								"aria-hidden": "true"
+							}, [createElementVNode("path", {
+								d: "M12 4L4 12M4 4L12 12",
+								stroke: "currentColor",
+								"stroke-width": "1.5",
+								"stroke-linecap": "round"
+							})], -1)])], 8, _hoisted_6)) : _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
+							statusType.value && props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$1, {
+								key: 3,
+								type: statusType.value
+							}, null, 8, ["type"])) : createCommentVNode("v-if", true)
+						], 8, _hoisted_2)]),
+						_: 2
+					}, 1032, [
+						"is-open",
+						"is-enabled",
+						"label"
+					]),
+					useSheet.value ? (openBlock(), createBlock(_sfc_main$2, {
+						key: 0,
+						"is-open": isOpen.value,
+						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event),
+						label: dialogLabel.value,
+						height: "hug",
+						padding: 0
+					}, {
+						default: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$3, {
+							"model-value": props.modelValue,
+							min: props.min,
+							max: props.max,
+							"is-date-disabled": props.isDateDisabled,
+							"onUpdate:modelValue": onCalendarChange
+						}, null, 8, [
+							"model-value",
+							"min",
+							"max",
+							"is-date-disabled"
+						])], 8, _hoisted_9)]),
+						_: 1
+					}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
+					props.name ? (openBlock(), createElementBlock("input", {
+						key: 1,
+						type: "hidden",
+						name: props.name,
+						value: props.modelValue ? toIso(props.modelValue) : ""
+					}, null, 8, _hoisted_10)) : createCommentVNode("v-if", true)
+				], 10, _hoisted_1)]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/DateRangeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { $n as DateRangeInputEmits, Qn as DateRange, Zn as _default, er as DateRangeInputProps, tr as DateRangePreset } from "../index-Df2YvC8o.js";
+import { $n as DateRangeInputEmits, Qn as DateRange, Zn as _default, er as DateRangeInputProps, tr as DateRangePreset } from "../index-DeOftUMq.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-fmQlr_A7.js";
+import { t as _sfc_main } from "../DateRangeInput-e9KSxBBK.js";
 export { _sfc_main as DateRangeInput };

package/dist/{DateRangeInput-fmQlr_A7.js → DateRangeInput-e9KSxBBK.js}

@@ -1,9 +1,9 @@
 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-D6ECRdc5.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-DzcK4T_C.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 { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$4 } from "./Icon-Bku25g_K.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";

package/dist/DateTimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Jn as DateTimeInputEmits, Xn as DateTimeInputSize, Yn as DateTimeInputProps, qn as _default } from "../index-Df2YvC8o.js";
+import { Jn as DateTimeInputEmits, Xn as DateTimeInputSize, Yn as DateTimeInputProps, qn as _default } from "../index-DeOftUMq.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-Bs1JmcIp.js";
+import { t as _sfc_main } from "../DateTimeInput-fSOfuLex.js";
 export { _sfc_main as DateTimeInput };

package/dist/{DateTimeInput-Bs1JmcIp.js → DateTimeInput-fSOfuLex.js}

@@ -1,9 +1,9 @@
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.js";
 import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
 import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
-import { t as _sfc_main$4 } from "./DateInput-D2ErjXYO.js";
-import { t as _sfc_main$5 } from "./TimeField-l3QzU6vC.js";
+import { t as _sfc_main$4 } from "./DateInput-Crcg-CCj.js";
+import { t as _sfc_main$5 } from "./TimeField-BGbxCoKU.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
@@ -127,6 +127,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					id: generatedId,
 					"model-value": dateValue.value,
 					label: unref(messages).dateTimeInput.dateLabel,
+					format: "system_date",
+					"is-label-hidden": "",
 					placeholder: __props.placeholder,
 					disabled: __props.isDisabled,
 					size: __props.size,

package/dist/DropdownMenu/index.d.ts

@@ -1,2 +1,3 @@
-import { S as DropdownMenuTriggerProps, _ as DropdownMenuOption, a as DropdownMenuContextValue, b as DropdownMenuSize, c as DropdownMenuDividerData, d as DropdownMenuGroupSlots, f as DropdownMenuItemData, g as DropdownMenuItemVariant, h as DropdownMenuItemSlots, i as _default, l as DropdownMenuEmits, m as DropdownMenuItemProps, n as _default$2, o as useDropdownMenuContext, p as DropdownMenuItemEmits, r as _default$1, s as DropdownMenuButtonProps, t as _default$3, u as DropdownMenuGroupProps, v as DropdownMenuProps, x as DropdownMenuSlots, y as DropdownMenuSection } from "../index-B8MbfMwV.js";
-export { _default as DropdownMenu, type DropdownMenuButtonProps, type DropdownMenuContextValue, _default$1 as DropdownMenuDivider, type DropdownMenuDividerData, type DropdownMenuEmits, _default$2 as DropdownMenuGroup, type DropdownMenuGroupProps, type DropdownMenuGroupSlots, _default$3 as DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuItemEmits, type DropdownMenuItemProps, type DropdownMenuItemSlots, type DropdownMenuItemVariant, type DropdownMenuOption, type DropdownMenuProps, type DropdownMenuSection, type DropdownMenuSize, type DropdownMenuSlots, type DropdownMenuTriggerProps, useDropdownMenuContext };
+import { _ as DropdownMenuSubMenuProps, a as DropdownMenuGroupSlots, c as DropdownMenuItemProps, d as DropdownMenuOption, f as DropdownMenuPresentation, g as DropdownMenuSlots, h as DropdownMenuSize, i as DropdownMenuGroupProps, l as DropdownMenuItemSlots, m as DropdownMenuSection, n as DropdownMenuDividerData, o as DropdownMenuItemData, p as DropdownMenuProps, r as DropdownMenuEmits, s as DropdownMenuItemEmits, t as DropdownMenuButtonProps, u as DropdownMenuItemVariant, v as DropdownMenuSubMenuSlots, y as DropdownMenuTriggerProps } from "../types-DDAAT1Xd.js";
+import { a as _default, i as _default$1, n as _default$3, o as DropdownMenuContextValue, r as _default$2, s as useDropdownMenuContext, t as _default$4 } from "../index-CJlBAXwj.js";
+export { _default as DropdownMenu, type DropdownMenuButtonProps, type DropdownMenuContextValue, _default$1 as DropdownMenuDivider, type DropdownMenuDividerData, type DropdownMenuEmits, _default$2 as DropdownMenuGroup, type DropdownMenuGroupProps, type DropdownMenuGroupSlots, _default$3 as DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuItemEmits, type DropdownMenuItemProps, type DropdownMenuItemSlots, type DropdownMenuItemVariant, type DropdownMenuOption, type DropdownMenuPresentation, type DropdownMenuProps, type DropdownMenuSection, type DropdownMenuSize, type DropdownMenuSlots, _default$4 as DropdownMenuSubMenu, type DropdownMenuSubMenuProps, type DropdownMenuSubMenuSlots, type DropdownMenuTriggerProps, useDropdownMenuContext };

package/dist/DropdownMenu/index.js

@@ -1,2 +1,3 @@
-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";
-export { _sfc_main as DropdownMenu, _sfc_main$1 as DropdownMenuDivider, _sfc_main$2 as DropdownMenuGroup, _sfc_main$3 as DropdownMenuItem, useDropdownMenuContext };
+import { a as _sfc_main$1, c as useDropdownMenuContext, i as _sfc_main$2, r as _sfc_main$3, t as _sfc_main } from "../DropdownMenu-8G0B1UND.js";
+import { t as _sfc_main$4 } from "../DropdownMenu-XvW4BJob.js";
+export { _sfc_main as DropdownMenu, _sfc_main$1 as DropdownMenuDivider, _sfc_main$2 as DropdownMenuGroup, _sfc_main$3 as DropdownMenuItem, _sfc_main$4 as DropdownMenuSubMenu, useDropdownMenuContext };

package/dist/{DropdownMenu-B0gogrvG.js → DropdownMenu-8G0B1UND.js}

@@ -1,10 +1,12 @@
 import { t as _sfc_main$5 } from "./Button-DrqeomlE.js";
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.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$7 } from "./Divider-BtwnL18I.js";
-import { t as _sfc_main$8 } from "./Item-C1z6gXn8.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { t as _sfc_main$6 } from "./BottomSheet-Dg95HB1s.js";
+import { t as _sfc_main$7 } from "./Icon-Bku25g_K.js";
+import { t as _sfc_main$8 } from "./Divider-BtwnL18I.js";
+import { t as _sfc_main$9 } from "./Item-C1z6gXn8.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, mergeModels, mergeProps, nextTick, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
 import "../styles/dropdown-menu.css";
 //#region src/DropdownMenu/context.ts
@@ -57,7 +59,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	__name: "DropdownMenuDivider",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$7, { class: "astryx-dropdown-menu-divider" });
+			return openBlock(), createBlock(_sfc_main$8, { class: "astryx-dropdown-menu-divider" });
 		};
 	}
 });
@@ -116,7 +118,7 @@ const _hoisted_2$1 = {
 	key: 0,
 	class: "astryx-item__start"
 };
-const _hoisted_3 = { class: "astryx-item__content" };
+const _hoisted_3$1 = { class: "astryx-item__content" };
 const _hoisted_4 = {
 	key: 0,
 	class: "astryx-item__label"
@@ -220,14 +222,14 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				onClick: handleClick,
 				onPointermove: handlePointerMove
 			}), [
-				hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$6, {
+				hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
 					color: iconColor.value,
 					icon: __props.icon,
 					size: "sm"
 				}, null, 8, ["color", "icon"])])])) : createCommentVNode("v-if", true),
-				createElementVNode("span", _hoisted_3, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+				createElementVNode("span", _hoisted_3$1, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
 				hasEnd.value ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
-			], 16, _hoisted_1$1)) : (openBlock(), createBlock(_sfc_main$8, mergeProps({ key: 1 }, unref(attrs), {
+			], 16, _hoisted_1$1)) : (openBlock(), createBlock(_sfc_main$9, mergeProps({ key: 1 }, unref(attrs), {
 				class: "astryx-dropdown-menu-item",
 				role: "menuitem",
 				"data-menu-size": menuSize.value,
@@ -243,7 +245,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}), createSlots({ _: 2 }, [
 				hasStart.value ? {
 					name: "startContent",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$6, {
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
 						color: iconColor.value,
 						icon: __props.icon,
 						size: "sm"
@@ -451,6 +453,11 @@ function useMenuFocus(options) {
 //#region src/DropdownMenu/DropdownMenu.vue
 const _hoisted_1 = ["data-open"];
 const _hoisted_2 = [
+	"id",
+	"aria-labelledby",
+	"aria-label"
+];
+const _hoisted_3 = [
 	"id",
 	"aria-labelledby",
 	"aria-label",
@@ -459,6 +466,7 @@ const _hoisted_2 = [
 const GAP = 4;
 const DEFAULT_MAX_WIDTH = 320;
 const DEFAULT_MAX_HEIGHT = "300px";
+const COMPACT_TOUCH_QUERY = "(max-width: 639px) and (pointer: coarse) and (hover: none)";
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenu",
 	inheritAttrs: false,
@@ -470,6 +478,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		menuWidth: {},
 		menuMaxHeight: {},
 		placement: { default: "below" },
+		presentation: { default: "popover" },
 		alignment: { default: "start" },
 		hasChevron: {
 			type: Boolean,
@@ -506,7 +515,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const focusLastOnOpen = shallowRef(false);
 		let openModality = "keyboard";
 		let armedTriggerClickGuard = false;
+		const isCompactTouch = useMediaQuery(COMPACT_TOUCH_QUERY);
+		const isSheet = computed(() => props.presentation === "bottom-sheet" || props.presentation === "adaptive" && isCompactTouch.value);
+		const sheetOpen = computed({
+			get: () => isSheet.value && isOpen.value,
+			set: (open) => {
+				if (!open) closeMenu();
+			}
+		});
 		const buttonProps = computed(() => props.button ?? {});
+		const sheetLabel = computed(() => typeof buttonProps.value.label === "string" ? buttonProps.value.label : "Menu");
 		const menuSize = computed(() => buttonProps.value.size ?? "md");
 		const isIconOnly = computed(() => buttonProps.value.isIconOnly === true);
 		const hasChevron = computed(() => props.hasChevron && !isIconOnly.value);
@@ -548,9 +566,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			gap: GAP
 		});
 		watch(isOpen, (nowOpen) => {
-			layerIsOpen.value = nowOpen;
+			layerIsOpen.value = nowOpen && !isSheet.value;
 		});
 		const surfaceStyle = computed(() => {
+			if (isSheet.value) return {};
 			const style = {
 				"top": `${position.value.top}px`,
 				"left": `${position.value.left}px`,
@@ -580,7 +599,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		useDismiss({
 			container: surfaceRef,
 			trigger: anchorRef,
-			isEnabled: computed(() => isOpen.value),
+			isEnabled: computed(() => isOpen.value && !isSheet.value),
 			onDismiss: closeMenu
 		});
 		function emitOpenChange(next) {
@@ -608,7 +627,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return anchor.querySelector("button, a[href], [role=\"button\"], [tabindex]");
 		}
 		watch(isOpen, async (nowOpen) => {
-			layerIsOpen.value = nowOpen;
+			layerIsOpen.value = nowOpen && !isSheet.value;
 			if (nowOpen) {
 				anchorWidth.value = anchorRef.value?.getBoundingClientRect().width ?? 0;
 				await nextTick();
@@ -686,6 +705,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}));
 		provide(dropdownMenuContextKey, {
 			closeMenu,
+			isOpen,
 			menuSize
 		});
 		onMounted(() => {
@@ -712,7 +732,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				onKeydown: onTriggerKeydown
 			}), createSlots({ _: 2 }, [hasChevron.value ? {
 				name: "end",
-				fn: withCtx(() => [createVNode(_sfc_main$6, {
+				fn: withCtx(() => [createVNode(_sfc_main$7, {
 					color: "inherit",
 					icon: "chevronDown",
 					size: "sm"
@@ -722,7 +742,34 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"aria-controls",
 				"aria-expanded",
 				"tooltip"
-			]))], 8, _hoisted_1), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+			]))], 8, _hoisted_1), isSheet.value ? (openBlock(), createBlock(_sfc_main$6, {
+				key: 0,
+				"is-open": sheetOpen.value,
+				"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => sheetOpen.value = $event),
+				height: "hug",
+				label: sheetLabel.value,
+				padding: 2
+			}, {
+				default: withCtx(() => [createElementVNode("div", mergeProps({
+					id: surfaceId.value,
+					ref_key: "surfaceRef",
+					ref: surfaceRef
+				}, forwardedAttrs.value, {
+					"aria-labelledby": menuAriaLabelledBy.value,
+					"aria-label": menuAriaLabel.value,
+					class: ["astryx-dropdown-menu is-sheet", unref(attrs).class],
+					role: "menu",
+					tabindex: "-1",
+					onKeydown: onSurfaceKeydown
+				}), [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+					key: 0,
+					items: __props.items
+				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16, _hoisted_2)]),
+				_: 3
+			}, 8, ["is-open", "label"])) : (openBlock(), createBlock(Teleport, {
+				key: 1,
+				to: "body"
+			}, [createVNode(Transition, {
 				name: "astryx-dropdown-menu",
 				persisted: ""
 			}, {
@@ -742,11 +789,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}), [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
 					key: 0,
 					items: __props.items
-				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16, _hoisted_2), [[vShow, isOpen.value]])]),
+				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16, _hoisted_3), [[vShow, isOpen.value]])]),
 				_: 3
 			})]))], 64);
 		};
 	}
 });
 //#endregion
-export { useDropdownMenuContext as a, _sfc_main$4 as i, _sfc_main$1 as n, _sfc_main$2 as r, _sfc_main as t };
+export { _sfc_main$4 as a, useDropdownMenuContext as c, _sfc_main$2 as i, useMenuFocus as n, MENU_ITEM_ROLES as o, _sfc_main$1 as r, activateMenuItem as s, _sfc_main as t };