@astryx-vue/core 0.3.0 → 0.4.1

package/dist/Thumbnail/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Thumbnail-C3NnJUFG.js";
+import { t as _sfc_main } from "../Thumbnail-DpJnaNbg.js";
 export { _sfc_main as Thumbnail };

package/dist/{Thumbnail-C3NnJUFG.js → Thumbnail-DpJnaNbg.js}

@@ -1,10 +1,11 @@
-import { t as _sfc_main$1 } from "./IconButton-DDNgNl7B.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$2 } from "./Tooltip-C4Vaqd3G.js";
-import { t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$4 } from "./Spinner-9cYUCnDy.js";
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { t as _sfc_main$1 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$2 } from "./IconButton-DI-XBbtV.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { t as _sfc_main$3 } from "./Tooltip-sAM8i1eO.js";
+import { t as _sfc_main$4 } from "./Spinner-BY8iQz--.js";
 import { t as _sfc_main$5 } from "./Skeleton-CrgWxJgr.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, openBlock, ref, unref, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, unref, watch, withCtx } from "vue";
 import "../styles/thumbnail.css";
 //#region src/Thumbnail/Thumbnail.vue
 const _hoisted_1 = ["data-disabled", "aria-label"];
@@ -64,6 +65,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const failedSrc = ref();
 		const instance = getCurrentInstance();
+		const press = usePressFeedback({ hasOverlay: false });
 		watch(() => props.src, () => {
 			failedSrc.value = void 0;
 		});
@@ -91,7 +93,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("remove", event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$2, {
+			return openBlock(), createBlock(_sfc_main$3, {
 				content: __props.label ?? "",
 				"is-enabled": __props.label != null,
 				"has-hover-indication": false
@@ -103,13 +105,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					role: "group",
 					"aria-label": accessibleName.value
 				}, [createElementVNode("div", _hoisted_2, [
-					hasListener("onClick") && !__props.isDisabled && !__props.isLoading ? (openBlock(), createElementBlock("button", {
+					hasListener("onClick") && !__props.isDisabled && !__props.isLoading ? (openBlock(), createElementBlock("button", mergeProps({
 						key: 0,
-						type: "button",
+						type: "button"
+					}, unref(press).pressableProps, {
 						class: "astryx-thumbnail__open",
 						"aria-label": unref(messages).thumbnail.open(accessibleName.value),
 						onClick: onOpen
-					}, [showImage.value ? (openBlock(), createElementBlock("img", {
+					}), [showImage.value ? (openBlock(), createElementBlock("img", {
 						key: 0,
 						class: "astryx-thumbnail__image",
 						src: __props.src,
@@ -120,7 +123,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					}, null, 40, _hoisted_4)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
 						key: 1,
 						radius: 2
-					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(_sfc_main$3, { icon: "image" })])) : createCommentVNode("v-if", true)], 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [showImage.value ? (openBlock(), createElementBlock("img", {
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(_sfc_main$1, { icon: "image" })])) : createCommentVNode("v-if", true)], 16, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [showImage.value ? (openBlock(), createElementBlock("img", {
 						key: 0,
 						class: "astryx-thumbnail__image",
 						src: __props.src,
@@ -131,7 +134,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					}, null, 40, _hoisted_6)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
 						key: 1,
 						radius: 2
-					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$3, { icon: "image" })])) : createCommentVNode("v-if", true)], 64)),
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$1, { icon: "image" })])) : createCommentVNode("v-if", true)], 64)),
 					showImage.value ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("v-if", true),
 					showUpload.value ? (openBlock(), createElementBlock("span", _hoisted_9, [createVNode(_sfc_main$4, {
 						size: "sm",
@@ -141,13 +144,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						key: 4,
 						class: "astryx-thumbnail__remove",
 						"data-reveal": __props.showRemoveOn
-					}, [createVNode(_sfc_main$1, {
+					}, [createVNode(_sfc_main$2, {
 						variant: "secondary",
 						size: "sm",
 						label: unref(messages).thumbnail.remove(accessibleName.value),
 						onClick: onRemove
 					}, {
-						default: withCtx(() => [createVNode(_sfc_main$3, {
+						default: withCtx(() => [createVNode(_sfc_main$1, {
 							icon: "close",
 							size: "sm"
 						})]),

package/dist/{TimeField-CoHDGmsP.js → TimeField-DefNjDIT.js}

@@ -1,23 +1,178 @@
-import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { c as useCoarsePointer, i as parseDisplayTime, n as formatISOTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-6ufHM15W.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$4 } from "./IconButton-DDNgNl7B.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { t as _sfc_main$4 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$5 } from "./FieldIcon-BFSHZEs_.js";
+import { t as _sfc_main$6 } from "./IconButton-DI-XBbtV.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { a as parseISOTime, i as parseDisplayTime, n as formatISOTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-BJd0xBhG.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$5 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$6 } from "./Spinner-9cYUCnDy.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { t as _sfc_main$7 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$8 } from "./Spinner-BY8iQz--.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$9 } from "./PickerWheel-CSwUYfes.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import "../styles/layer.css";
+import "../styles/date-input.css";
 import "../styles/bordered-control.css";
 import "../styles/time-input.css";
+//#region src/TimeInput/TouchTimeWheels.vue
+const _hoisted_1$1 = { class: "astryx-time-wheels" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "TouchTimeWheels",
+	props: {
+		modelValue: { default: null },
+		hourFormat: { default: "12h" },
+		hasSeconds: {
+			type: Boolean,
+			default: false
+		},
+		min: {},
+		max: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const parsed = computed(() => props.modelValue ? parseISOTime(props.modelValue) : null);
+		const hour24 = computed(() => parsed.value?.hours ?? 0);
+		const minute = computed(() => parsed.value?.minutes ?? 0);
+		const second = computed(() => parsed.value?.seconds ?? 0);
+		const isPm = computed(() => hour24.value >= 12);
+		const hour12 = computed(() => hour24.value % 12 || 12);
+		function inRange(hours, minutes, seconds) {
+			return isTimeInRange(formatISOTime({
+				hours,
+				minutes,
+				seconds
+			}, props.hasSeconds), props.min, props.max);
+		}
+		function hourAllowed(hours) {
+			for (let value = 0; value < 60; value += 1) if (inRange(hours, value, 0)) return true;
+			return false;
+		}
+		function commit(hours, minutes, seconds) {
+			if (inRange(hours, minutes, seconds)) {
+				emit("update:modelValue", formatISOTime({
+					hours,
+					minutes,
+					seconds
+				}, props.hasSeconds));
+				return;
+			}
+			for (let value = 0; value < 60; value += 1) if (inRange(hours, value, 0)) {
+				emit("update:modelValue", formatISOTime({
+					hours,
+					minutes: value,
+					seconds: 0
+				}, props.hasSeconds));
+				return;
+			}
+		}
+		function from12(hour, pm) {
+			if (hour === 12) return pm ? 12 : 0;
+			return pm ? hour + 12 : hour;
+		}
+		const hourOptions = computed(() => {
+			if (props.hourFormat === "24h") return Array.from({ length: 24 }, (_, hour) => ({
+				value: String(hour),
+				label: String(hour).padStart(2, "0"),
+				disabled: !hourAllowed(hour)
+			}));
+			return Array.from({ length: 12 }, (_, index) => {
+				const hour = index + 1;
+				return {
+					value: String(hour),
+					label: String(hour),
+					disabled: !hourAllowed(from12(hour, isPm.value))
+				};
+			});
+		});
+		const minuteOptions = computed(() => Array.from({ length: 60 }, (_, value) => ({
+			value: String(value),
+			label: String(value).padStart(2, "0"),
+			disabled: !inRange(hour24.value, value, second.value)
+		})));
+		const secondOptions = computed(() => Array.from({ length: 60 }, (_, value) => ({
+			value: String(value),
+			label: String(value).padStart(2, "0"),
+			disabled: !inRange(hour24.value, minute.value, value)
+		})));
+		const meridiemOptions = computed(() => [{
+			value: "am",
+			label: messages.value.dateTimeInput.meridiemAM,
+			disabled: !hourAllowed(from12(hour12.value, false))
+		}, {
+			value: "pm",
+			label: messages.value.dateTimeInput.meridiemPM,
+			disabled: !hourAllowed(from12(hour12.value, true))
+		}]);
+		function onHour(value) {
+			commit(props.hourFormat === "24h" ? Number(value) : from12(Number(value), isPm.value), minute.value, second.value);
+		}
+		function onMeridiem(value) {
+			commit(from12(hour12.value, value === "pm"), minute.value, second.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createVNode(_sfc_main$9, {
+					label: unref(messages).dateTimeInput.hourWheel,
+					options: hourOptions.value,
+					"model-value": __props.hourFormat === "24h" ? String(hour24.value) : String(hour12.value),
+					"onUpdate:modelValue": onHour
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				]),
+				createVNode(_sfc_main$9, {
+					label: unref(messages).dateTimeInput.minuteWheel,
+					options: minuteOptions.value,
+					"model-value": String(minute.value),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => commit(hour24.value, Number($event), second.value))
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				]),
+				__props.hasSeconds ? (openBlock(), createBlock(_sfc_main$9, {
+					key: 0,
+					label: unref(messages).dateTimeInput.secondWheel,
+					options: secondOptions.value,
+					"model-value": String(second.value),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => commit(hour24.value, minute.value, Number($event)))
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				])) : createCommentVNode("v-if", true),
+				__props.hourFormat === "12h" ? (openBlock(), createBlock(_sfc_main$9, {
+					key: 1,
+					label: unref(messages).dateTimeInput.meridiemWheel,
+					options: meridiemOptions.value,
+					"model-value": isPm.value ? "pm" : "am",
+					"onUpdate:modelValue": onMeridiem
+				}, null, 8, [
+					"label",
+					"options",
+					"model-value"
+				])) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/TimeInput/TimeField.vue
 const _hoisted_1 = [
 	"data-size",
 	"data-status",
 	"data-disabled",
 	"data-loading",
+	"data-presentation",
 	"data-options-open"
 ];
 const _hoisted_2 = [
@@ -37,6 +192,20 @@ const _hoisted_2 = [
 	"aria-invalid"
 ];
 const _hoisted_3 = [
+	"id",
+	"aria-expanded",
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-disabled",
+	"aria-busy",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-required",
+	"aria-invalid"
+];
+const _hoisted_4 = [
 	"id",
 	"value",
 	"placeholder",
@@ -55,8 +224,8 @@ const _hoisted_3 = [
 	"aria-autocomplete",
 	"aria-activedescendant"
 ];
-const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = [
+const _hoisted_5 = ["aria-label"];
+const _hoisted_6 = [
 	"id",
 	"aria-selected",
 	"data-option-index",
@@ -96,7 +265,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		optionInterval: {},
 		optionsLabel: {},
 		disabledMessage: {},
-		status: {}
+		status: {},
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { default: null },
 		"modelModifiers": {}
@@ -105,8 +288,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const model = useModel(__props, "modelValue");
+		const attrs = useAttrs();
+		const ariaRequired = useAriaRequired(props);
 		const messages = useAstryxMessages();
-		const coarse = useCoarsePointer();
+		const sheetOpen = shallowRef(false);
+		const coarse = useMediaQuery("(pointer: coarse)");
 		const focused = shallowRef(false);
 		const draft = shallowRef("");
 		const container = useTemplateRef("container");
@@ -114,6 +300,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		useScrollbars(optionsRef);
 		const generatedId = `astryx-time-field-${useId()}`;
 		const listboxId = `${props.inputId ?? generatedId}-options`;
+		const sheetId = `${props.inputId ?? generatedId}-sheet`;
 		const disabledMessageId = `${props.inputId ?? generatedId}-disabled`;
 		const busy = computed(() => props.isLoading === true);
 		const locked = computed(() => props.isDisabled || props.isReadOnly || busy.value);
@@ -200,10 +387,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			container: optionsRef,
 			trigger: container,
 			isEnabled: isOptionsOpen,
-			enableEscape: ref(false),
+			dismissOnEscape: "ignore",
 			onDismiss: () => closeOptions()
 		});
+		function openSheet() {
+			if (!locked.value) sheetOpen.value = true;
+		}
+		function onSheetKeydown(event) {
+			if (isImeKeyEvent(event) || locked.value) return;
+			if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
+				event.preventDefault();
+				openSheet();
+			}
+		}
 		function onKeydown(event) {
+			if (isImeKeyEvent(event)) return;
 			if (event.key === "Escape" && isOptionsOpen.value) {
 				event.preventDefault();
 				closeOptions();
@@ -286,6 +484,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			container.value?.querySelector("input")?.focus({ preventScroll: true });
 		}
 		function onControlClick(event) {
+			if (surface.value === "sheet") {
+				openSheet();
+				return;
+			}
 			if (locked.value) return;
 			const target = event.target;
 			if (target instanceof Element && target.closest("button")) return;
@@ -300,23 +502,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				createElementVNode("div", {
 					ref_key: "container",
 					ref: container,
-					class: "astryx-time-input astryx-bordered-control",
+					class: normalizeClass(["astryx-time-input astryx-bordered-control", __props.controlClass]),
+					style: normalizeStyle(__props.controlStyle),
 					"data-size": __props.size,
 					"data-status": __props.status?.type,
 					"data-disabled": __props.isDisabled || void 0,
 					"data-loading": busy.value || void 0,
+					"data-presentation": surface.value === "sheet" ? "bottom-sheet" : surface.value === "native" ? "native" : "text",
 					"data-options-open": isOptionsOpen.value || void 0,
 					onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args)),
 					onClick: onControlClick
 				}, [
-					createVNode(_sfc_main$5, {
+					createVNode(_sfc_main$4, {
 						class: "astryx-time-input-icon",
 						icon: "clock",
 						size: "sm"
 					}),
-					surface.value === "native" ? (openBlock(), createElementBlock("input", {
-						key: 0,
+					surface.value === "native" ? (openBlock(), createElementBlock("input", mergeProps({ key: 0 }, unref(attrs), {
 						id: __props.inputId,
 						class: "astryx-time-input-control",
 						type: "time",
@@ -331,11 +534,34 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-label": __props.labelledBy ? void 0 : __props.label,
 						"aria-labelledby": __props.labelledBy,
 						"aria-describedby": resolvedDescribedBy(),
-						"aria-required": __props.isRequired || void 0,
+						"aria-required": unref(ariaRequired),
 						"aria-invalid": __props.status?.type === "error" || void 0,
 						onInput: onNativeInput
-					}, null, 40, _hoisted_2)) : (openBlock(), createElementBlock("input", {
-						key: 1,
+					}), null, 16, _hoisted_2)) : surface.value === "sheet" ? (openBlock(), createElementBlock("input", mergeProps({ key: 1 }, unref(attrs), {
+						id: __props.inputId,
+						class: "astryx-time-input-control",
+						type: "text",
+						readonly: "",
+						inputmode: "none",
+						autocomplete: "off",
+						role: "combobox",
+						"aria-haspopup": "dialog",
+						"aria-expanded": sheetOpen.value,
+						"aria-controls": sheetId,
+						value: draft.value,
+						placeholder: shownPlaceholder.value,
+						disabled: __props.isDisabled && !showsDisabledMessage.value,
+						"aria-disabled": showsDisabledMessage.value || void 0,
+						"aria-busy": busy.value || void 0,
+						"aria-label": __props.labelledBy ? void 0 : __props.label,
+						"aria-labelledby": __props.labelledBy,
+						"aria-describedby": resolvedDescribedBy(),
+						"aria-required": unref(ariaRequired),
+						"aria-invalid": __props.status?.type === "error" || void 0,
+						onClick: openSheet,
+						onKeydown: onSheetKeydown,
+						onFocus: onInputFocus
+					}), null, 16, _hoisted_3)) : (openBlock(), createElementBlock("input", mergeProps({ key: 2 }, unref(attrs), {
 						id: __props.inputId,
 						class: "astryx-time-input-control",
 						type: "text",
@@ -351,7 +577,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-label": __props.labelledBy ? void 0 : __props.label,
 						"aria-labelledby": __props.labelledBy,
 						"aria-describedby": resolvedDescribedBy(),
-						"aria-required": __props.isRequired || void 0,
+						"aria-required": unref(ariaRequired),
 						"aria-invalid": __props.status?.type === "error" || void 0,
 						"aria-expanded": showsOptions.value ? isOptionsOpen.value : void 0,
 						"aria-controls": showsOptions.value ? listboxId : void 0,
@@ -362,35 +588,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						onBlur,
 						onKeydown,
 						onClick: onInputClick
-					}, null, 40, _hoisted_3)),
-					__props.hasClear && model.value && !locked.value ? (openBlock(), createBlock(_sfc_main$4, {
-						key: 2,
+					}), null, 16, _hoisted_4)),
+					__props.hasClear && model.value && !locked.value ? (openBlock(), createBlock(_sfc_main$6, {
+						key: 3,
 						class: "astryx-input-clear-button",
 						variant: "ghost",
 						size: "sm",
 						label: clearLabel.value,
 						onClick: clear
 					}, {
-						default: withCtx(() => [createVNode(_sfc_main$3, { type: "clear" })]),
+						default: withCtx(() => [createVNode(_sfc_main$5, { type: "clear" })]),
 						_: 1
 					}, 8, ["label"])) : createCommentVNode("v-if", true),
-					busy.value ? (openBlock(), createBlock(_sfc_main$6, {
-						key: 3,
+					busy.value ? (openBlock(), createBlock(_sfc_main$8, {
+						key: 4,
 						size: "sm",
 						"aria-label": __props.loadingLabel ?? unref(messages).timeInput.loading
-					}, null, 8, ["aria-label"])) : __props.status ? (openBlock(), createBlock(_sfc_main$3, {
-						key: 4,
+					}, null, 8, ["aria-label"])) : __props.status ? (openBlock(), createBlock(_sfc_main$5, {
+						key: 5,
 						type: __props.status.type
 					}, null, 8, ["type"])) : createCommentVNode("v-if", true)
-				], 40, _hoisted_1),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+				], 46, _hoisted_1),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
 					id: disabledMessageId
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
 					_: 1
 				})) : createCommentVNode("v-if", true),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$3, {
 					key: 1,
 					id: `${disabledMessageId}-tooltip`,
 					anchor: container.value,
@@ -406,10 +632,41 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"onPointerEnter",
 					"onPointerLeave"
 				])) : createCommentVNode("v-if", true),
+				surface.value === "sheet" ? (openBlock(), createBlock(_sfc_main$7, {
+					key: 2,
+					"is-open": sheetOpen.value,
+					"onUpdate:isOpen": _cache[3] || (_cache[3] = ($event) => sheetOpen.value = $event),
+					label: __props.label || unref(messages).timeInput.placeholder,
+					height: "hug",
+					padding: 0
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						id: sheetId,
+						class: "astryx-time-touch"
+					}, [createVNode(_sfc_main$1, {
+						"model-value": model.value,
+						"hour-format": __props.hourFormat,
+						"has-seconds": __props.hasSeconds,
+						min: __props.min,
+						max: __props.max,
+						"onUpdate:modelValue": commit
+					}, null, 8, [
+						"model-value",
+						"hour-format",
+						"has-seconds",
+						"min",
+						"max"
+					]), createElementVNode("button", {
+						type: "button",
+						class: "astryx-date-touch-save",
+						onClick: _cache[2] || (_cache[2] = ($event) => sheetOpen.value = false)
+					}, toDisplayString(unref(messages).dateInput.savePicking), 1)])]),
+					_: 1
+				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
 					id: listboxId,
 					ref: "options",
-					class: "astryx-time-input-options",
+					class: "astryx-time-input-options astryx-layer",
 					role: "listbox",
 					"aria-label": resolvedOptionsLabel.value,
 					style: normalizeStyle(optionsStyle.value),
@@ -423,13 +680,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-selected": option === model.value ? "true" : "false",
 						"data-option-index": index,
 						tabindex: "-1",
-						onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
 						onClick: ($event) => selectOption(index)
-					}, toDisplayString(unref(formatDisplayTime)(option, __props.hourFormat, __props.hasSeconds)), 43, _hoisted_5);
-				}), 128))], 12, _hoisted_4), [[vShow, isOptionsOpen.value]])]))
+					}, toDisplayString(unref(formatDisplayTime)(option, __props.hourFormat, __props.hasSeconds)), 43, _hoisted_6);
+				}), 128))], 12, _hoisted_5), [[vShow, isOptionsOpen.value]])]))
 			], 64);
 		};
 	}
 });
 //#endregion
-export { _sfc_main as t };
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/TimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { at as TimeInputSize, it as TimeInputProps, nt as _default, rt as TimeInputEmits } from "../index-DUaLJO7l.js";
+import { at as TimeInputSize, it as TimeInputProps, nt as _default, rt as TimeInputEmits } from "../index-UA93Im7H.js";
 export { _default as TimeInput, type TimeInputEmits, type TimeInputProps, type TimeInputSize };

package/dist/TimeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TimeInput-D2k3Ux3p.js";
+import { t as _sfc_main } from "../TimeInput-j5vzN8MG.js";
 export { _sfc_main as TimeInput };