@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{DateInput-DT518j5E.js → DateInput-C67HCOU-.js}

@@ -1,30 +1,38 @@
-import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
+import { t as _sfc_main$4 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$5 } from "./ButtonTooltip-CNKOQHYR.js";
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
 import { n as resolveDateSurface, t as resolveDatePresentation } from "./useDatePresentation-C07PnOCw.js";
-import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
-import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { t as _sfc_main$6 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$7 } from "./FieldIcon-BFSHZEs_.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { a as weekdayNames, i as standaloneShortWeekdayNames, r as formatCalendarMonth } from "./locale-D1Z3K290.js";
 import { t as usePendingChange } from "./usePendingChange-ib-h8FZK.js";
-import { t as _sfc_main$5 } from "./BottomSheet-pt7m4CvC.js";
-import { t as _sfc_main$6 } from "./Icon-bteSId7T.js";
-import { n as isCalendarDateDisabled, r as toCalendarDate, t as _sfc_main$7 } from "./Calendar-B7vIowKq.js";
-import { t as _sfc_main$8 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$9 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$10 } from "./Popover-DJf8POzL.js";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
+import { t as _sfc_main$8 } from "./BottomSheet-B4sc3F1S.js";
+import { a as isOutsideCalendarBounds, c as toCalendarDate, i as isCalendarDateDisabled, l as weekStartIndex, n as resolveCalendarKey, o as formatWeekdayDate, r as buildCalendarWeeks, s as sameCalendarDay, t as _sfc_main$9 } from "./Calendar-CjK-JUDM.js";
+import { t as _sfc_main$10 } from "./Spinner-BY8iQz--.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$11 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$12 } from "./Popover-78dFjTb9.js";
 import { t as formatInstant } from "./formatInstant-BDWUIxS7.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
+import { t as _sfc_main$13 } from "./PickerWheel-CSwUYfes.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useTemplateRef, watch, withCtx } from "vue";
+import { CalendarDate } from "@internationalized/date";
+import "../styles/calendar.css";
 import "../styles/date-input.css";
 //#region src/DateInput/NativeDateField.vue
-const _hoisted_1$1 = ["data-status"];
-const _hoisted_2$1 = [
+const _hoisted_1$3 = ["data-status"];
+const _hoisted_2$3 = [
 	"data-disabled",
 	"data-size",
 	"data-status"
 ];
-const _hoisted_3$1 = ["disabled", "aria-label"];
-const _hoisted_4$1 = { class: "astryx-date-input-native" };
-const _hoisted_5$1 = [
+const _hoisted_3$3 = ["disabled", "aria-label"];
+const _hoisted_4$3 = { class: "astryx-date-input-native" };
+const _hoisted_5$3 = [
 	"id",
 	"min",
 	"max",
@@ -38,13 +46,14 @@ const _hoisted_5$1 = [
 	"aria-required",
 	"aria-busy"
 ];
-const _hoisted_6$1 = ["data-placeholder"];
-const _hoisted_7$1 = ["aria-label"];
-const _hoisted_8$1 = {
+const _hoisted_6$2 = ["data-placeholder"];
+const _hoisted_7$2 = ["aria-label"];
+const _hoisted_8$2 = {
 	class: "astryx-date-input-alert",
 	role: "alert"
 };
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "NativeDateField",
 	props: {
 		id: {},
@@ -87,12 +96,42 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		},
 		describedBy: {},
 		width: {},
-		inputId: {}
+		inputId: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const attrs = useAttrs();
+		const ariaRequired = useAriaRequired(props);
 		const messages = useAstryxMessages();
 		const locale = useAstryxLocale();
 		const inputRef = useTemplateRef("input");
@@ -218,7 +257,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				createVNode(_sfc_main$9, {
+				createVNode(_sfc_main$11, {
+					class: normalizeClass(__props.containerClass),
+					style: normalizeStyle(__props.containerStyle),
 					label: __props.label || unref(messages).dateInput.dialogLabel,
 					"input-id": __props.inputId,
 					description: __props.description,
@@ -234,7 +275,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					default: withCtx((field) => [createElementVNode("div", {
 						ref_key: "containerRef",
 						ref: containerRef,
-						class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${__props.size}`]]),
+						class: normalizeClass(["astryx-date-input", [
+							statusType.value ? `status-${statusType.value}` : void 0,
+							`size-${__props.size}`,
+							__props.controlClass
+						]]),
+						style: normalizeStyle(__props.controlStyle),
 						"data-status": statusType.value,
 						"data-presentation": "native",
 						onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
@@ -255,8 +301,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						}, [createVNode(_sfc_main$6, {
 							icon: "calendar",
 							size: "sm"
-						})], 8, _hoisted_3$1),
-						createElementVNode("span", _hoisted_4$1, [createElementVNode("input", {
+						})], 8, _hoisted_3$3),
+						createElementVNode("span", _hoisted_4$3, [createElementVNode("input", mergeProps(unref(attrs), {
 							id: __props.inputId,
 							ref: "input",
 							class: "astryx-date-input-field",
@@ -270,16 +316,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 							"aria-describedby": [__props.describedBy, field.describedBy].filter(Boolean).join(" ") || void 0,
 							"aria-disabled": showsDisabledMessage.value || void 0,
 							"aria-invalid": statusType.value === "error" || rejected.value ? "true" : void 0,
-							"aria-required": __props.isRequired || void 0,
+							"aria-required": unref(ariaRequired),
 							"aria-busy": busy.value || void 0,
 							autocomplete: "off",
 							onFocus: onInputFocus,
 							onBlur: onInputBlur
-						}, null, 40, _hoisted_5$1), createElementVNode("span", {
+						}), null, 16, _hoisted_5$3), createElementVNode("span", {
 							class: "astryx-date-input-overlay",
 							"data-placeholder": __props.modelValue ? void 0 : "true",
 							"aria-hidden": "true"
-						}, toDisplayString(overlay.value), 9, _hoisted_6$1)]),
+						}, toDisplayString(overlay.value), 9, _hoisted_6$2)]),
 						showsClear.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
 							type: "button",
@@ -290,18 +336,20 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						}, [createVNode(_sfc_main$6, {
 							icon: "close",
 							size: "sm"
-						})], 8, _hoisted_7$1)) : createCommentVNode("v-if", true),
-						busy.value ? (openBlock(), createBlock(_sfc_main$8, {
+						})], 8, _hoisted_7$2)) : createCommentVNode("v-if", true),
+						busy.value ? (openBlock(), createBlock(_sfc_main$10, {
 							key: 1,
 							size: "sm",
 							"aria-label": unref(messages).dateInput.loading
-						}, null, 8, ["aria-label"])) : statusType.value && __props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$4, {
+						}, null, 8, ["aria-label"])) : statusType.value && __props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$7, {
 							key: 2,
 							type: statusType.value
 						}, null, 8, ["type"])) : createCommentVNode("v-if", true)
-					], 8, _hoisted_2$1), createElementVNode("div", _hoisted_8$1, toDisplayString(rejected.value ? unref(messages).dateInput.invalidDate : ""), 1)], 42, _hoisted_1$1)]),
+					], 8, _hoisted_2$3), createElementVNode("div", _hoisted_8$2, toDisplayString(rejected.value ? unref(messages).dateInput.invalidDate : ""), 1)], 46, _hoisted_1$3)]),
 					_: 1
 				}, 8, [
+					"class",
+					"style",
 					"label",
 					"input-id",
 					"description",
@@ -314,14 +362,14 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"status",
 					"status-variant"
 				]),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 0,
 					id: disabledMessageId
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
 					_: 1
 				})) : createCommentVNode("v-if", true),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$3, {
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$5, {
 					key: 1,
 					id: `${disabledMessageId}-tooltip`,
 					anchor: containerRef.value,
@@ -342,6 +390,367 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
+//#region src/DateInput/monthRange.ts
+/** 一个月在时间轴上的序号，1 月是 1。 */
+function monthIndex(year, month) {
+	return year * 12 + (month - 1);
+}
+function fromMonthIndex(index) {
+	const year = Math.floor(index / 12);
+	return {
+		year,
+		month: index - year * 12 + 1
+	};
+}
+function clampMonthIndex(index, min, max) {
+	return Math.min(Math.max(index, min), max);
+}
+/** 底部面板能翻到的月份。最小和最大日期会把窗口收进去。 */
+function reachableMonthRange(min, max, today = /* @__PURE__ */ new Date()) {
+	const now = monthIndex(today.getFullYear(), today.getMonth() + 1);
+	let low = now - 600;
+	let high = now + 600;
+	if (min) low = Math.max(low, monthIndex(min.getFullYear(), min.getMonth() + 1));
+	if (max) high = Math.min(high, monthIndex(max.getFullYear(), max.getMonth() + 1));
+	if (low > high) low = high;
+	return {
+		min: low,
+		max: high
+	};
+}
+//#endregion
+//#region src/DateInput/TouchMonthGrid.vue
+const _hoisted_1$2 = ["aria-label"];
+const _hoisted_2$2 = {
+	class: "astryx-calendar-weekdays",
+	role: "row"
+};
+const _hoisted_3$2 = ["aria-label"];
+const _hoisted_4$2 = [
+	"data-date",
+	"tabindex",
+	"aria-disabled",
+	"aria-current",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_5$2 = { class: "astryx-calendar-day" };
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "TouchMonthGrid",
+	props: {
+		year: {},
+		month: {},
+		selected: {},
+		min: {},
+		max: {},
+		isDateDisabled: { type: Function },
+		dateConstraints: {},
+		weekStartsOn: {}
+	},
+	emits: ["pick", "update:view"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const locale = useAstryxLocale();
+		const weekStart = computed(() => weekStartIndex(props.weekStartsOn));
+		const selectedDate = computed(() => props.selected ? toCalendarDate(props.selected) : null);
+		const today = toCalendarDate(/* @__PURE__ */ new Date());
+		const focused = shallowRef(new CalendarDate(props.year, props.month, 1));
+		const headers = computed(() => {
+			const shorts = standaloneShortWeekdayNames(locale.value);
+			const longs = weekdayNames(locale.value, "long");
+			return Array.from({ length: 7 }, (_, index) => {
+				const day = (index + weekStart.value) % 7;
+				return {
+					short: shorts[day] ?? "",
+					long: longs[day] ?? ""
+				};
+			});
+		});
+		const weeks = computed(() => buildCalendarWeeks(props.year, props.month, weekStart.value, false));
+		const label = computed(() => formatCalendarMonth(props.year, props.month, locale.value));
+		function blocked(date) {
+			return isCalendarDateDisabled(date, {
+				min: props.min,
+				max: props.max,
+				isDateDisabled: props.isDateDisabled,
+				dateConstraints: props.dateConstraints
+			});
+		}
+		watch(() => [props.year, props.month], ([year, month]) => {
+			if (focused.value.year === year && focused.value.month === month) return;
+			const last = new CalendarDate(year, month, 1).add({ months: 1 }).subtract({ days: 1 }).day;
+			focused.value = new CalendarDate(year, month, Math.min(focused.value.day, last));
+		}, { immediate: true });
+		function pick(date, outside) {
+			if (outside || blocked(date)) return;
+			focused.value = date;
+			emit("pick", new Date(date.year, date.month - 1, date.day));
+		}
+		function onKeydown(event) {
+			const move = resolveCalendarKey({
+				key: event.key,
+				rtl: typeof document !== "undefined" && document.documentElement.dir === "rtl",
+				focused: focused.value,
+				weekStartsOn: weekStart.value,
+				numberOfMonths: 1,
+				viewYear: props.year,
+				viewMonth: props.month,
+				isOutOfBounds: (date) => isOutsideCalendarBounds(date, props.min, props.max),
+				isDisabled: (date) => blocked(date)
+			});
+			if (!move) return;
+			event.preventDefault();
+			focused.value = move.date;
+			if (move.date.year !== props.year || move.date.month !== props.month) emit("update:view", move.date.year, move.date.month);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-calendar-grid astryx-date-touch-grid",
+				role: "grid",
+				"aria-label": label.value,
+				tabindex: "-1",
+				onKeydown
+			}, [createElementVNode("div", _hoisted_2$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(headers.value, (day) => {
+				return openBlock(), createElementBlock("div", {
+					key: day.long,
+					class: "astryx-calendar-weekday",
+					role: "columnheader",
+					"aria-label": day.long
+				}, toDisplayString(day.short), 9, _hoisted_3$2);
+			}), 128))]), (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, rowIndex) => {
+				return openBlock(), createElementBlock("div", {
+					key: rowIndex,
+					class: "astryx-calendar-row",
+					role: "row"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day) => {
+					return openBlock(), createElementBlock("div", {
+						key: day.iso,
+						class: "astryx-calendar-gridcell",
+						role: "gridcell"
+					}, [createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(["astryx-calendar-cell", {
+							"is-selected": !!selectedDate.value && !day.outside && unref(sameCalendarDay)(day.date, selectedDate.value),
+							"is-today": !day.outside && unref(sameCalendarDay)(day.date, unref(today)),
+							"is-disabled": day.outside || blocked(day.date),
+							"is-other-month": day.outside
+						}]),
+						"data-date": day.iso,
+						tabindex: !day.outside && unref(sameCalendarDay)(day.date, focused.value) ? 0 : -1,
+						"aria-disabled": day.outside || blocked(day.date) || void 0,
+						"aria-current": !day.outside && unref(sameCalendarDay)(day.date, unref(today)) ? "date" : void 0,
+						"aria-label": unref(formatWeekdayDate)(day.date, unref(locale)),
+						onClick: ($event) => pick(day.date, day.outside)
+					}, [createElementVNode("span", _hoisted_5$2, toDisplayString(day.day), 1)], 10, _hoisted_4$2)]);
+				}), 128))]);
+			}), 128))], 40, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/DateInput/TouchDateSheet.vue
+const _hoisted_1$1 = { class: "astryx-date-touch" };
+const _hoisted_2$1 = { class: "astryx-date-touch-header" };
+const _hoisted_3$1 = ["aria-expanded", "aria-label"];
+const _hoisted_4$1 = {
+	key: 0,
+	class: "astryx-date-touch-nav"
+};
+const _hoisted_5$1 = ["aria-label"];
+const _hoisted_6$1 = ["aria-label"];
+const _hoisted_7$1 = {
+	key: 0,
+	class: "astryx-date-touch-wheels"
+};
+const _hoisted_8$1 = ["disabled"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "TouchDateSheet",
+	props: {
+		selected: { default: null },
+		min: {},
+		max: {},
+		isDateDisabled: {},
+		dateConstraints: {},
+		weekStartsOn: {},
+		saveLabel: {},
+		saveDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"pick",
+		"save",
+		"reset"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const wheelsOpen = ref(false);
+		const dragX = ref(null);
+		const range = computed(() => reachableMonthRange(props.min, props.max));
+		const initial = props.selected ?? /* @__PURE__ */ new Date();
+		const view = ref(clampMonthIndex(monthIndex(initial.getFullYear(), initial.getMonth() + 1), range.value.min, range.value.max));
+		const cursor = computed(() => fromMonthIndex(view.value));
+		const monthLabel = computed(() => formatCalendarMonth(cursor.value.year, cursor.value.month, locale.value));
+		const resolvedSaveLabel = computed(() => props.saveLabel ?? messages.value.dateInput.savePicking);
+		const rtl = computed(() => typeof document !== "undefined" && document.documentElement.dir === "rtl");
+		const canPrev = computed(() => view.value > range.value.min);
+		const canNext = computed(() => view.value < range.value.max);
+		const prevIcon = computed(() => rtl.value ? "chevronRight" : "chevronLeft");
+		const nextIcon = computed(() => rtl.value ? "chevronLeft" : "chevronRight");
+		const monthOptions = computed(() => {
+			const formatter = new Intl.DateTimeFormat(locale.value, { month: "long" });
+			return Array.from({ length: 12 }, (_, index) => {
+				const month = index + 1;
+				const target = monthIndex(cursor.value.year, month);
+				return {
+					value: String(month),
+					label: formatter.format(new Date(cursor.value.year, index, 1)),
+					disabled: target < range.value.min || target > range.value.max
+				};
+			});
+		});
+		const yearOptions = computed(() => {
+			const start = fromMonthIndex(range.value.min).year;
+			const end = fromMonthIndex(range.value.max).year;
+			const options = [];
+			for (let year = start; year <= end; year += 1) {
+				const january = monthIndex(year, 1);
+				const december = monthIndex(year, 12);
+				options.push({
+					value: String(year),
+					label: String(year),
+					disabled: december < range.value.min || january > range.value.max
+				});
+			}
+			return options;
+		});
+		function move(amount) {
+			view.value = clampMonthIndex(view.value + amount, range.value.min, range.value.max);
+		}
+		function setMonth(value) {
+			const target = monthIndex(cursor.value.year, Number(value));
+			if (target < range.value.min || target > range.value.max) return;
+			view.value = target;
+		}
+		function setYear(value) {
+			const year = Number(value);
+			const target = clampMonthIndex(monthIndex(year, cursor.value.month), range.value.min, range.value.max);
+			if (fromMonthIndex(target).year !== year) return;
+			view.value = target;
+		}
+		function onReset() {
+			const today = /* @__PURE__ */ new Date();
+			view.value = clampMonthIndex(monthIndex(today.getFullYear(), today.getMonth() + 1), range.value.min, range.value.max);
+			wheelsOpen.value = false;
+			emit("reset");
+		}
+		function onPointerDown(event) {
+			dragX.value = event.clientX;
+		}
+		function onPointerUp(event) {
+			if (dragX.value == null) return;
+			const delta = event.clientX - dragX.value;
+			dragX.value = null;
+			if (Math.abs(delta) < 48) return;
+			move((rtl.value ? delta > 0 : delta < 0) ? 1 : -1);
+		}
+		function onView(year, month) {
+			view.value = clampMonthIndex(monthIndex(year, month), range.value.min, range.value.max);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createElementVNode("div", _hoisted_2$1, [createElementVNode("button", {
+					type: "button",
+					class: "astryx-date-touch-title",
+					"aria-expanded": wheelsOpen.value,
+					"aria-label": wheelsOpen.value ? monthLabel.value : unref(messages).dateInput.chooseMonthYear(monthLabel.value),
+					onClick: _cache[0] || (_cache[0] = ($event) => wheelsOpen.value = !wheelsOpen.value)
+				}, toDisplayString(monthLabel.value), 9, _hoisted_3$1), !wheelsOpen.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+					canPrev.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-date-touch-arrow",
+						"aria-label": unref(messages).calendar.previousMonth,
+						onClick: _cache[1] || (_cache[1] = ($event) => move(-1))
+					}, [createVNode(_sfc_main$6, {
+						icon: prevIcon.value,
+						size: "sm"
+					}, null, 8, ["icon"])], 8, _hoisted_5$1)) : createCommentVNode("v-if", true),
+					canNext.value ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: "astryx-date-touch-arrow",
+						"aria-label": unref(messages).calendar.nextMonth,
+						onClick: _cache[2] || (_cache[2] = ($event) => move(1))
+					}, [createVNode(_sfc_main$6, {
+						icon: nextIcon.value,
+						size: "sm"
+					}, null, 8, ["icon"])], 8, _hoisted_6$1)) : createCommentVNode("v-if", true),
+					createElementVNode("button", {
+						type: "button",
+						class: "astryx-date-touch-reset",
+						onClick: onReset
+					}, toDisplayString(unref(messages).dateInput.resetPicking), 1)
+				])) : createCommentVNode("v-if", true)]),
+				wheelsOpen.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [createVNode(_sfc_main$13, {
+					label: unref(messages).dateInput.monthWheel,
+					options: monthOptions.value,
+					"model-value": String(cursor.value.month),
+					"onUpdate:modelValue": setMonth
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				]), createVNode(_sfc_main$13, {
+					label: unref(messages).dateInput.yearWheel,
+					options: yearOptions.value,
+					"model-value": String(cursor.value.year),
+					"onUpdate:modelValue": setYear
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				])])) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					onPointerdown: onPointerDown,
+					onPointerup: onPointerUp
+				}, [createVNode(_sfc_main$2, {
+					year: cursor.value.year,
+					month: cursor.value.month,
+					selected: __props.selected,
+					min: __props.min,
+					max: __props.max,
+					"is-date-disabled": __props.isDateDisabled,
+					"date-constraints": __props.dateConstraints,
+					"week-starts-on": __props.weekStartsOn,
+					onPick: _cache[3] || (_cache[3] = ($event) => emit("pick", $event)),
+					"onUpdate:view": onView
+				}, null, 8, [
+					"year",
+					"month",
+					"selected",
+					"min",
+					"max",
+					"is-date-disabled",
+					"date-constraints",
+					"week-starts-on"
+				])], 32)),
+				createElementVNode("button", {
+					type: "button",
+					class: "astryx-date-touch-save",
+					disabled: !wheelsOpen.value && __props.saveDisabled,
+					onClick: _cache[4] || (_cache[4] = ($event) => wheelsOpen.value ? wheelsOpen.value = false : emit("save"))
+				}, toDisplayString(wheelsOpen.value ? unref(messages).dateInput.doneChoosingMonth : resolvedSaveLabel.value), 9, _hoisted_8$1)
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/DateInput/DateInput.vue
 const _hoisted_1 = ["data-status", "data-presentation"];
 const _hoisted_2 = [
@@ -382,6 +791,7 @@ const _hoisted_10 = ["name", "value"];
 const TOUCH_POINTER_QUERY = "(pointer: coarse)";
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDateInput",
+	inheritAttrs: false,
 	__name: "DateInput",
 	props: {
 		id: {},
@@ -396,6 +806,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		label: {},
 		description: {},
 		isLabelHidden: { type: Boolean },
+		labelHidden: { type: Boolean },
 		isOptional: { type: Boolean },
 		isRequired: { type: Boolean },
 		labelTooltip: {},
@@ -427,12 +838,68 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		nativePicker: {},
 		numberOfMonths: { default: 1 },
 		weekStartsOn: {},
-		width: {}
+		width: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "DateInput",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"value",
+				"type",
+				"disabled",
+				"readonly",
+				"name",
+				"min",
+				"max",
+				"placeholder",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-busy",
+				"aria-disabled",
+				"aria-invalid",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup"
+			]
+		});
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden);
+		const ariaRequired = useAriaRequired(props);
 		const PassThrough = defineComponent({
 			name: "DateInputPassThrough",
 			setup(_, { slots }) {
@@ -518,16 +985,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		const statusValue = computed(() => resolvedStatus(props.status));
 		const statusType = computed(() => statusValue.value?.type);
-		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$9 : PassThrough);
+		const showsField = computed(() => Boolean(props.label || props.description || statusValue.value?.message));
+		const shell = computed(() => showsField.value ? _sfc_main$11 : PassThrough);
 		const fieldBindings = computed(() => showsField.value ? {
 			label: props.label ?? "",
 			inputId: inputId.value,
 			description: props.description,
-			isLabelHidden: props.isLabelHidden || !props.label,
+			isLabelHidden: hideLabel.value || !props.label,
 			isDisabled: locked.value,
 			isOptional: props.isOptional,
 			isRequired: props.isRequired,
@@ -539,13 +1003,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const toggleLabel = computed(() => isOpen.value ? messages.value.dateInput.closeCalendar : messages.value.dateInput.openCalendar);
 		function describedBy(fieldIds) {
 			return [
+				attrs["aria-describedby"],
 				props.describedBy,
 				fieldIds,
 				showsDisabledMessage.value ? disabledMessageId : void 0
 			].filter(Boolean).join(" ") || void 0;
 		}
+		function inputAttrs() {
+			return parts.forwardedAttrs();
+		}
 		function onInput(event) {
-			if (useSheet.value) return;
+			if (useSheet.value || event instanceof InputEvent && event.isComposing) return;
 			const target = event.target;
 			const value = target.value.trim();
 			inputValue.value = target.value;
@@ -566,7 +1034,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (useSheet.value) openCalendar();
 		}
 		function onInputKeyDown(event) {
-			if (locked.value || isOpen.value) return;
+			if (isImeKeyEvent(event) || locked.value || isOpen.value) return;
 			if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
 				event.preventDefault();
 				openCalendar();
@@ -574,8 +1042,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		function onCalendarChange(date) {
 			modelValueRef.value = date;
+			if (!useSheet.value) {
+				isOpen.value = false;
+				inputRef.value?.blur();
+			}
+		}
+		function onSheetSave() {
 			isOpen.value = false;
-			inputRef.value?.blur();
+		}
+		function onSheetReset() {
+			modelValueRef.value = null;
 		}
 		function onClear(event) {
 			event.stopPropagation();
@@ -597,7 +1073,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		syncDisplayValue();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				surface.value === "native" ? (openBlock(), createBlock(_sfc_main$1, {
+				surface.value === "native" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
 					key: 0,
 					"input-id": inputId.value,
 					"model-value": __props.modelValue,
@@ -609,7 +1085,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"is-date-disabled": __props.isDateDisabled,
 					"date-constraints": __props.dateConstraints,
 					name: __props.name,
-					"is-label-hidden": __props.isLabelHidden,
+					"is-label-hidden": unref(hideLabel),
 					"is-optional": __props.isOptional,
 					"is-required": __props.isRequired,
 					"label-tooltip": __props.labelTooltip,
@@ -622,11 +1098,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					status: __props.status,
 					"status-variant": __props.statusVariant,
 					format: __props.format,
-					"described-by": props.describedBy,
+					"described-by": [unref(attrs)["aria-describedby"], props.describedBy].filter(Boolean).join(" ") || void 0,
 					"disabled-message": disabledMessage.value,
 					width: __props.width,
-					"onUpdate:modelValue": commit
-				}, null, 8, [
+					"container-class": unref(parts).containerClass.value,
+					"container-style": unref(parts).containerStyle.value,
+					"control-class": unref(parts).controlClass(),
+					"control-style": unref(parts).controlStyle()
+				}, inputAttrs(), { "onUpdate:modelValue": commit }), null, 16, [
 					"input-id",
 					"model-value",
 					"label",
@@ -652,18 +1131,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"format",
 					"described-by",
 					"disabled-message",
-					"width"
-				])) : (openBlock(), createBlock(resolveDynamicComponent(shell.value), normalizeProps(mergeProps({ key: 1 }, fieldBindings.value)), {
+					"width",
+					"container-class",
+					"container-style",
+					"control-class",
+					"control-style"
+				])) : (openBlock(), createBlock(resolveDynamicComponent(shell.value), mergeProps({ key: 1 }, fieldBindings.value, {
+					class: unref(parts).containerClass.value,
+					style: unref(parts).containerStyle.value
+				}), {
 					default: withCtx((field) => [createElementVNode("div", {
 						ref_key: "containerRef",
 						ref: containerRef,
-						class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${props.size}`]]),
+						class: normalizeClass(["astryx-date-input", [
+							statusType.value ? `status-${statusType.value}` : void 0,
+							`size-${props.size}`,
+							unref(parts).controlClass()
+						]]),
+						style: normalizeStyle(unref(parts).controlStyle()),
 						"data-status": statusType.value,
 						"data-presentation": useSheet.value ? "bottom-sheet" : "popover",
 						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
 						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
 					}, [
-						createVNode(_sfc_main$10, {
+						createVNode(_sfc_main$12, {
 							"is-open": useSheet.value ? false : isOpen.value,
 							"is-enabled": !useSheet.value && !locked.value,
 							placement: "below",
@@ -680,7 +1171,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							content: withCtx(() => [!useSheet.value ? (openBlock(), createElementBlock("div", {
 								key: 0,
 								id: popupId.value
-							}, [createVNode(_sfc_main$7, {
+							}, [createVNode(_sfc_main$9, {
 								"model-value": props.modelValue,
 								min: props.min,
 								max: props.max,
@@ -716,7 +1207,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									icon: "calendar",
 									size: "sm"
 								})], 40, _hoisted_4),
-								createElementVNode("input", {
+								createElementVNode("input", mergeProps(inputAttrs(), {
 									id: inputId.value,
 									ref_key: "inputRef",
 									ref: inputRef,
@@ -733,7 +1224,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									"aria-labelledby": showsField.value ? field?.labelId : void 0,
 									"aria-describedby": describedBy(field?.describedBy),
 									"aria-invalid": statusType.value === "error" ? "true" : void 0,
-									"aria-required": __props.isRequired || void 0,
+									"aria-required": unref(ariaRequired),
 									"aria-busy": busy.value || void 0,
 									"aria-controls": popupId.value,
 									"aria-expanded": isOpen.value,
@@ -744,7 +1235,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									onFocus: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onFocus && unref(disabledTooltip).onFocus(...args)),
 									onClick: openCalendar,
 									onKeydown: onInputKeyDown
-								}, null, 40, _hoisted_5),
+								}), null, 16, _hoisted_5),
 								showsClear.value ? (openBlock(), createElementBlock("button", {
 									key: 1,
 									type: "button",
@@ -756,12 +1247,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 									icon: "close",
 									size: "sm"
 								})], 8, _hoisted_6)) : _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
-								busy.value ? (openBlock(), createBlock(_sfc_main$8, {
+								busy.value ? (openBlock(), createBlock(_sfc_main$10, {
 									key: 3,
 									class: "astryx-date-input-spinner",
 									size: "sm",
 									"aria-label": unref(messages).dateInput.loading
-								}, null, 8, ["aria-label"])) : statusType.value && props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$4, {
+								}, null, 8, ["aria-label"])) : statusType.value && props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$7, {
 									key: 4,
 									type: statusType.value
 								}, null, 8, ["type"])) : createCommentVNode("v-if", true)
@@ -773,7 +1264,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"width",
 							"label"
 						]),
-						useSheet.value ? (openBlock(), createBlock(_sfc_main$5, {
+						useSheet.value ? (openBlock(), createBlock(_sfc_main$8, {
 							key: 0,
 							"is-open": isOpen.value,
 							"onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => isOpen.value = $event),
@@ -781,22 +1272,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							height: "hug",
 							padding: 0
 						}, {
-							default: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$7, {
-								"model-value": props.modelValue,
+							default: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$1, {
+								selected: props.modelValue,
 								min: props.min,
 								max: props.max,
 								"is-date-disabled": props.isDateDisabled,
 								"date-constraints": props.dateConstraints,
-								"number-of-months": props.numberOfMonths,
 								"week-starts-on": props.weekStartsOn,
-								"onUpdate:modelValue": onCalendarChange
+								onPick: onCalendarChange,
+								onSave: onSheetSave,
+								onReset: onSheetReset
 							}, null, 8, [
-								"model-value",
+								"selected",
 								"min",
 								"max",
 								"is-date-disabled",
 								"date-constraints",
-								"number-of-months",
 								"week-starts-on"
 							])], 8, _hoisted_9)]),
 							_: 1
@@ -807,17 +1298,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							name: props.name,
 							value: props.modelValue ? toIso(props.modelValue) : ""
 						}, null, 8, _hoisted_10)) : createCommentVNode("v-if", true)
-					], 42, _hoisted_1)]),
+					], 46, _hoisted_1)]),
 					_: 3
-				}, 16)),
-				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$2, {
+				}, 16, ["class", "style"])),
+				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$4, {
 					key: 2,
 					id: disabledMessageId
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
 					_: 1
 				})) : createCommentVNode("v-if", true),
-				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$3, {
+				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$5, {
 					key: 3,
 					id: `${disabledMessageId}-tooltip`,
 					anchor: containerRef.value,
@@ -838,4 +1329,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main as t };
+export { _sfc_main$1 as n, _sfc_main as t };