@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/components/AcDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,16 @@
 import e from "./AcButton.js";
-import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as ee, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as te, nextTick as f, normalizeClass as p, normalizeStyle as ne, onBeforeUnmount as re, onMounted as ie, openBlock as m, reactive as ae, ref as h, renderList as g, resolveDynamicComponent as oe, toDisplayString as _, unref as v, useAttrs as se, useId as ce, useModel as le, watch as ue, withCtx as de } from "vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as ee, mergeProps as te, nextTick as p, normalizeClass as m, onBeforeUnmount as ne, onMounted as re, openBlock as h, reactive as ie, ref as g, renderList as _, renderSlot as ae, resolveDynamicComponent as oe, toDisplayString as v, unref as y, useAttrs as se, useId as ce, useModel as le, watch as ue, withCtx as de } from "vue";
 import { Calendar as fe, CalendarRange as pe, ChevronLeft as me, ChevronRight as he, Clock as ge, Timer as _e, X as ve } from "@lucide/vue";
 //#region src/lib/components/AcDatePicker.vue?vue&type=script&setup=true&lang.ts
-var ye = ["for"], be = {
-	key: 0,
+var ye = ["for"], be = { key: 0 }, xe = {
+	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, xe = { class: "relative" }, Se = [
+}, Se = {
+	key: 2,
+	class: "relative"
+}, Ce = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -14,7 +18,13 @@ var ye = ["for"], be = {
 	"aria-describedby",
 	"aria-invalid",
 	"aria-required"
-], Ce = ["aria-label"], we = ["name", "value"], Te = ["aria-label"], Ee = {
+], we = ["aria-label"], Te = [
+	"role",
+	"aria-modal",
+	"aria-label",
+	"aria-describedby",
+	"inert"
+], Ee = {
 	key: 0,
 	class: "flex shrink-0 flex-wrap gap-1 border-b border-border p-2 sm:w-44 sm:flex-col sm:flex-nowrap sm:border-r sm:border-b-0",
 	role: "group",
@@ -73,9 +83,13 @@ var ye = ["for"], be = {
 	class: "mb-1 text-center text-xs font-medium text-heading"
 }, Xe = { class: "flex h-48 items-stretch justify-center gap-1" }, Ze = {
 	key: 0,
+	class: "mx-2 mt-6 h-32 w-px shrink-0 self-center bg-border",
+	"aria-hidden": "true"
+}, Qe = {
+	key: 1,
 	class: "mt-6 self-center font-bold text-heading/50",
 	"aria-hidden": "true"
-}, Qe = { class: "flex h-full min-w-10 flex-1 flex-col items-center" }, $e = {
+}, $e = {
 	class: "mb-2 text-xm font-bold tracking-wider text-heading/50 uppercase",
 	"aria-hidden": "true"
 }, et = [
@@ -86,17 +100,20 @@ var ye = ["for"], be = {
 	"tabindex",
 	"aria-selected",
 	"onClick"
-], rt = { class: "mt-3 text-center text-xs text-muted" }, it = {
+], rt = {
+	key: 0,
+	class: "mt-3 text-center text-xs text-muted"
+}, it = {
 	key: 2,
 	class: "flex flex-wrap items-center gap-2 border-t border-border px-3 py-3"
 }, at = ["disabled"], ot = {
 	key: 1,
 	class: "basis-full text-xs text-danger-strong",
 	role: "alert"
-}, y = /*@__PURE__*/ u({
+}, st = ["name", "value"], b = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "AcDatePicker",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ ee({
 		label: { default: "" },
 		placeholder: { default: "" },
 		mode: { default: "date" },
@@ -133,7 +150,20 @@ var ye = ["for"], be = {
 		errorMsg: { default: "" },
 		hint: { default: "" },
 		size: { default: "normal" },
-		name: { default: "" }
+		name: { default: "" },
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		autoApply: {
+			type: Boolean,
+			default: !1
+		},
+		hourCycle: { default: 24 },
+		showTimeZone: {
+			type: Boolean,
+			default: !0
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {},
@@ -144,8 +174,8 @@ var ye = ["for"], be = {
 		openModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:open"],
-	setup(u, { expose: d }) {
-		let y = u, st = le(u, "modelValue"), b = le(u, "open"), ct = /^\d{4}-\d{2}-\d{2}$/, lt = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/, ut = {
+	setup(f, { expose: ee }) {
+		let b = f, ct = le(f, "modelValue"), x = le(f, "open"), lt = /^\d{4}-\d{2}-\d{2}$/, ut = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/, dt = {
 			w: 604800,
 			d: 86400,
 			h: 3600,
@@ -155,11 +185,12 @@ var ye = ["for"], be = {
 			us: 1e-6,
 			µs: 1e-6,
 			ns: 1e-9
-		}, dt = Date.UTC(2023, 0, 1), ft = {
+		}, ft = Date.UTC(2023, 0, 1), pt = {
 			h: "Hrs",
 			m: "Min",
-			s: "Sec"
-		}, pt = [{
+			s: "Sec",
+			p: "AM/PM"
+		}, mt = [{
 			key: "date",
 			label: "Date",
 			icon: fe
@@ -167,164 +198,164 @@ var ye = ["for"], be = {
 			key: "time",
 			label: "Time",
 			icon: ge
-		}], x = ce(), mt = se(), ht = i(() => ({
-			class: mt.class,
-			style: mt.style
-		})), gt = i(() => {
-			let { class: e, style: t, ...n } = mt;
+		}], S = ce(), ht = se(), gt = a(() => ({
+			class: ht.class,
+			style: ht.style
+		})), _t = a(() => {
+			let { class: e, style: t, ...n } = ht;
 			return n;
-		}), _t = `${x}-label`, vt = `${x}-value`, yt = `${x}-month`, bt = `${x}-msg`, xt = `${x}-hint`, St = /* @__PURE__ */ new Map(), Ct = h(null), wt = h(null), S = h(null), C = h({
+		}), vt = `${S}-label`, yt = `${S}-value`, bt = `${S}-month`, xt = `${S}-msg`, St = `${S}-hint`, Ct = /* @__PURE__ */ new Map(), wt = g(null), Tt = g(null), C = g(null), w = g({
 			left: 0,
 			maxHeight: 480,
 			minWidth: 0
-		}), w = h("2026-01-01"), T = h("days"), E = h(2020), D = h(0), O = h("date"), k = h("2026-01-01"), A = h(null), j = h(null), M = h(null), N = ae({
+		}), T = g("2026-01-01"), E = g("days"), D = g(2020), O = g(0), k = g("date"), A = g("2026-01-01"), Et = g(null), j = g(null), M = g(null), N = ie({
 			h: 0,
 			m: 0,
 			s: 0
-		}), P = ae({
+		}), Dt = ie({
 			h: 23,
 			m: 59,
 			s: 59
-		}), F = ae({
+		}), P = ie({
 			d: 0,
 			h: 0,
 			m: 0
-		}), I = i(() => y.timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone), L = i(() => y.range && y.mode !== "duration"), R = i(() => y.mode === "datetime"), Tt = i(() => y.weekStartsOn ?? un()), Et = i(() => new Intl.DateTimeFormat(y.locale, {
+		}), F = a(() => b.timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone), I = a(() => b.range && b.mode !== "duration"), L = a(() => b.mode === "datetime"), Ot = a(() => b.weekStartsOn ?? mn()), kt = a(() => new Intl.DateTimeFormat(b.locale, {
 			year: "numeric",
 			month: "short",
 			day: "numeric",
 			timeZone: "UTC"
-		})), Dt = i(() => new Intl.DateTimeFormat(y.locale, {
+		})), At = a(() => new Intl.DateTimeFormat(b.locale, {
 			year: "numeric",
 			month: "short",
 			day: "numeric",
 			hour: "2-digit",
 			minute: "2-digit",
-			second: y.showSeconds ? "2-digit" : void 0,
-			hourCycle: "h23",
-			timeZone: I.value,
-			timeZoneName: "short"
-		})), Ot = i(() => new Intl.DateTimeFormat(y.locale, {
+			second: b.showSeconds ? "2-digit" : void 0,
+			hourCycle: b.hourCycle === 12 ? "h12" : "h23",
+			timeZone: F.value,
+			timeZoneName: b.showTimeZone ? "short" : void 0
+		})), jt = a(() => new Intl.DateTimeFormat(b.locale, {
 			month: "long",
 			year: "numeric",
 			timeZone: "UTC"
-		})), kt = i(() => new Intl.DateTimeFormat(y.locale, {
+		})), Mt = a(() => new Intl.DateTimeFormat(b.locale, {
 			weekday: "long",
 			year: "numeric",
 			month: "long",
 			day: "numeric",
 			timeZone: "UTC"
-		})), At = i(() => new Intl.DateTimeFormat(y.locale, {
+		})), Nt = a(() => new Intl.DateTimeFormat(b.locale, {
 			day: "numeric",
 			timeZone: "UTC"
-		})), jt = i(() => {
-			let e = new Intl.DateTimeFormat(y.locale, {
+		})), Pt = a(() => {
+			let e = new Intl.DateTimeFormat(b.locale, {
 				weekday: "short",
 				timeZone: "UTC"
-			}), t = new Intl.DateTimeFormat(y.locale, {
+			}), t = new Intl.DateTimeFormat(b.locale, {
 				weekday: "long",
 				timeZone: "UTC"
 			});
 			return Array.from({ length: 7 }, (n, r) => {
-				let i = new Date(dt + (Tt.value + r) % 7 * 864e5);
+				let i = new Date(ft + (Ot.value + r) % 7 * 864e5);
 				return {
 					short: e.format(i),
 					long: t.format(i)
 				};
 			});
-		}), Mt = i(() => new Intl.DateTimeFormat(y.locale, {
-			timeZone: I.value,
+		}), Ft = a(() => new Intl.DateTimeFormat(b.locale, {
+			timeZone: F.value,
 			timeZoneName: "short"
-		}).formatToParts(Date.now()).find((e) => e.type === "timeZoneName")?.value ?? I.value), Nt = i(() => X(Date.now()).day), z = i(() => y.minDate ? Q(y.minDate) : null), B = i(() => y.maxDate ? Q(y.maxDate) : null), Pt = i(() => y.minDate ? Z(y.minDate) : null), Ft = i(() => y.maxDate ? ct.test(y.maxDate) ? fn(J(y.maxDate, 1), 0, 0, 0) - 1e3 : Z(y.maxDate) : null), V = i(() => {
-			let e = st.value;
-			return L.value ? Array.isArray(e) ? [e[0] || null, e[1] || null] : [null, null] : [typeof e == "string" && e ? e : null];
-		}), It = i(() => V.value.some(Boolean)), Lt = i(() => {
-			let [e, t] = V.value;
+		}).formatToParts(Date.now()).find((e) => e.type === "timeZoneName")?.value ?? F.value), It = a(() => Y(Date.now()).day), R = a(() => b.minDate ? _n(b.minDate) : null), z = a(() => b.maxDate ? _n(b.maxDate) : null), Lt = a(() => b.minDate ? X(b.minDate) : null), Rt = a(() => b.maxDate ? lt.test(b.maxDate) ? gn(q(b.maxDate, 1), 0, 0, 0) - 1e3 : X(b.maxDate) : null), B = a(() => {
+			let e = ct.value;
+			return I.value ? Array.isArray(e) ? [e[0] || null, e[1] || null] : [null, null] : [typeof e == "string" && e ? e : null];
+		}), zt = a(() => B.value.some(Boolean)), Bt = a(() => {
+			let [e, t] = B.value;
 			if (!e) return "";
-			if (y.mode === "duration") {
-				let t = mn(e);
-				return t === null ? e : gn(t);
+			if (b.mode === "duration") {
+				let t = vn(e);
+				return t === null ? e : bn(t);
 			}
-			if (y.mode === "date") {
-				let n = Q(e), r = t ? Q(t) : null;
-				return n ? L.value ? r ? Et.value.formatRange(q(n), q(r)) : `${Et.value.format(q(n))} –` : Et.value.format(q(n)) : e;
+			if (b.mode === "date") {
+				let n = _n(e), r = t ? _n(t) : null;
+				return n ? I.value ? r ? kt.value.formatRange(K(n), K(r)) : `${kt.value.format(K(n))} –` : kt.value.format(K(n)) : e;
 			}
-			let n = Z(e), r = t ? Z(t) : null;
-			return n === null ? e : L.value ? r === null ? `${Dt.value.format(n)} –` : Dt.value.formatRange(n, r) : Dt.value.format(n);
-		}), Rt = i(() => V.value.filter(Boolean).join("/")), zt = i(() => {
-			let e = (ln(w.value) - Tt.value + 7) % 7, t = J(w.value, -e), n = Math.ceil((e + cn(w.value)) / 7);
-			return Array.from({ length: n }, (e, n) => Array.from({ length: 7 }, (e, r) => J(t, n * 7 + r)));
-		}), H = i(() => K(w.value).y), Bt = i(() => K(w.value).m - 1), Vt = i(() => {
-			let e = new Intl.DateTimeFormat(y.locale, {
+			let n = X(e), r = t ? X(t) : null;
+			return n === null ? e : I.value ? r === null ? `${At.value.format(n)} –` : At.value.formatRange(n, r) : At.value.format(n);
+		}), Vt = a(() => B.value.filter(Boolean).join("/")), Ht = a(() => {
+			let e = (pn(T.value) - Ot.value + 7) % 7, t = q(T.value, -e), n = Math.ceil((e + fn(T.value)) / 7);
+			return Array.from({ length: n }, (e, n) => Array.from({ length: 7 }, (e, r) => q(t, n * 7 + r)));
+		}), V = a(() => G(T.value).y), Ut = a(() => G(T.value).m - 1), Wt = a(() => {
+			let e = new Intl.DateTimeFormat(b.locale, {
 				month: "short",
 				timeZone: "UTC"
-			}), t = new Intl.DateTimeFormat(y.locale, {
+			}), t = new Intl.DateTimeFormat(b.locale, {
 				month: "long",
 				year: "numeric",
 				timeZone: "UTC"
 			});
 			return Array.from({ length: 12 }, (n, r) => {
-				let i = G(H.value, r + 1, 1);
+				let i = W(V.value, r + 1, 1);
 				return {
 					value: r,
-					text: e.format(q(i)),
-					label: t.format(q(i)),
-					disabled: vn(i, G(H.value, r + 2, 0)),
-					selected: r === Bt.value
+					text: e.format(K(i)),
+					label: t.format(K(i)),
+					disabled: Sn(i, W(V.value, r + 2, 0)),
+					selected: r === Ut.value
 				};
 			});
-		}), Ht = i(() => Array.from({ length: 12 }, (e, t) => {
-			let n = E.value + t;
+		}), Gt = a(() => Array.from({ length: 12 }, (e, t) => {
+			let n = D.value + t;
 			return {
 				value: n,
 				text: String(n),
 				label: String(n),
-				disabled: vn(G(n, 1, 1), G(n, 12, 31)),
-				selected: n === H.value
+				disabled: Sn(W(n, 1, 1), W(n, 12, 31)),
+				selected: n === V.value
 			};
-		})), Ut = i(() => T.value === "months" ? Vt.value : Ht.value), Wt = i(() => [
+		})), Kt = a(() => E.value === "months" ? Wt.value : Gt.value), qt = a(() => [
 			0,
 			4,
 			8
-		].map((e) => Ut.value.slice(e, e + 4))), Gt = i(() => Ut.value.some((e) => e.value === D.value) ? D.value : Ut.value[0].value), U = i(() => T.value === "days" ? Ot.value.format(q(w.value)) : T.value === "months" ? String(H.value) : `${E.value}–${E.value + 9}`), Kt = i(() => T.value === "days" ? ["Previous month", "Next month"] : T.value === "months" ? ["Previous year", "Next year"] : ["Previous years", "Next years"]), qt = i(() => !L.value || !j.value ? null : M.value ?? A.value ?? null), W = i(() => j.value ? fn(j.value, N.h, N.m, N.s) : null), Jt = i(() => M.value ? fn(M.value, P.h, P.m, P.s) : null), Yt = i(() => {
-			if (!R.value) return "";
-			let e = L.value ? [W.value, Jt.value] : [W.value];
+		].map((e) => Kt.value.slice(e, e + 4))), Jt = a(() => Kt.value.some((e) => e.value === O.value) ? O.value : Kt.value[0].value), H = a(() => E.value === "days" ? jt.value.format(K(T.value)) : E.value === "months" ? String(V.value) : `${D.value}–${D.value + 9}`), Yt = a(() => E.value === "days" ? ["Previous month", "Next month"] : E.value === "months" ? ["Previous year", "Next year"] : ["Previous years", "Next years"]), Xt = a(() => !I.value || !j.value ? null : M.value ?? Et.value ?? null), U = a(() => j.value ? gn(j.value, N.h, N.m, N.s) : null), Zt = a(() => M.value ? gn(M.value, Dt.h, Dt.m, Dt.s) : null), Qt = a(() => {
+			if (!L.value) return "";
+			let e = I.value ? [U.value, Zt.value] : [U.value];
 			for (let t of e) if (t !== null) {
-				if (Pt.value !== null && t < Pt.value) return `Choose a time from ${Dt.value.format(Pt.value)}`;
-				if (Ft.value !== null && t > Ft.value) return `Choose a time up to ${Dt.value.format(Ft.value)}`;
+				if (Lt.value !== null && t < Lt.value) return `Choose a time from ${At.value.format(Lt.value)}`;
+				if (Rt.value !== null && t > Rt.value) return `Choose a time up to ${At.value.format(Rt.value)}`;
 			}
-			return L.value && W.value !== null && Jt.value !== null && Jt.value < W.value ? "The end must be after the start" : "";
-		}), Xt = i(() => y.mode === "duration" ? !0 : !j.value || L.value && !M.value ? !1 : !Yt.value), Zt = i(() => F.d * 86400 + F.h * 3600 + F.m * 60), Qt = i(() => {
+			return I.value && U.value !== null && Zt.value !== null && Zt.value < U.value ? "The end must be after the start" : "";
+		}), $t = a(() => b.mode === "duration" ? !0 : b.inline && !L.value ? !1 : !I.value || L.value && (!b.autoApply || !!Qt.value)), en = a(() => b.mode === "duration" ? !0 : !j.value || I.value && !M.value ? !1 : !Qt.value), tn = a(() => P.d * 86400 + P.h * 3600 + P.m * 60), nn = a(() => {
 			let e = [{
 				key: "start",
-				label: L.value ? "Start" : "Time",
+				label: I.value ? "Start" : "Time",
 				clock: N
 			}];
-			return L.value && e.push({
+			return I.value && e.push({
 				key: "end",
 				label: "End",
-				clock: P
+				clock: Dt
 			}), e.map((e) => ({
 				...e,
-				spinners: Cn(e.clock, e.label)
+				spinners: En(e.clock, e.label)
 			}));
-		}), $t = i(() => [
-			Sn("d", "Days", 0, 999, !1, !1, () => F.d, (e) => F.d = e),
-			Sn("h", "Hours", 0, 23, !1, !1, () => F.h, (e) => F.h = e),
-			Sn("m", "Minutes", 0, 59, !1, !1, () => F.m, (e) => F.m = e)
-		]), en = h(!1), tn = i(() => b.value || en.value), nn = i(() => [y.hint && xt, y.errorMsg && bt].filter(Boolean).join(" ") || void 0), rn = i(() => {
-			if (y.mode === "duration") return y.label || "Choose duration";
-			let e = L.value ? "date range" : R.value ? "date and time" : "date";
-			return y.label ? `${y.label}: choose ${e}` : `Choose ${e}`;
-		}), an = i(() => y.mode === "duration" ? _e : L.value ? pe : fe);
-		function on(e) {
+		}), rn = a(() => [
+			Q("d", "Days", 0, 999, !1, !1, () => P.d, (e) => P.d = e),
+			Q("h", "Hours", 0, 23, !1, !1, () => P.h, (e) => P.h = e),
+			Q("m", "Minutes", 0, 59, !1, !1, () => P.m, (e) => P.m = e)
+		]), an = g(!1), on = a(() => x.value || an.value), sn = a(() => [b.hint && St, b.errorMsg && xt].filter(Boolean).join(" ") || void 0), cn = a(() => {
+			if (b.mode === "duration") return b.label || "Choose duration";
+			let e = I.value ? "date range" : L.value ? "date and time" : "date";
+			return b.label ? `${b.label}: choose ${e}` : `Choose ${e}`;
+		}), ln = a(() => b.mode === "duration" ? _e : I.value ? pe : fe);
+		function un(e) {
 			return String(e).padStart(2, "0");
 		}
-		function G(e, t, n) {
+		function W(e, t, n) {
 			let r = new Date(Date.UTC(e, t - 1, n));
-			return `${r.getUTCFullYear()}-${on(r.getUTCMonth() + 1)}-${on(r.getUTCDate())}`;
+			return `${r.getUTCFullYear()}-${un(r.getUTCMonth() + 1)}-${un(r.getUTCDate())}`;
 		}
-		function K(e) {
+		function G(e) {
 			let [t, n, r] = e.split("-").map(Number);
 			return {
 				y: t,
@@ -332,39 +363,39 @@ var ye = ["for"], be = {
 				d: r
 			};
 		}
-		function q(e) {
-			let { y: t, m: n, d: r } = K(e);
+		function K(e) {
+			let { y: t, m: n, d: r } = G(e);
 			return new Date(Date.UTC(t, n - 1, r));
 		}
-		function J(e, t) {
-			let { y: n, m: r, d: i } = K(e);
-			return G(n, r, i + t);
+		function q(e, t) {
+			let { y: n, m: r, d: i } = G(e);
+			return W(n, r, i + t);
 		}
-		function sn(e, t) {
-			let { y: n, m: r, d: i } = K(e), a = new Date(Date.UTC(n, r - 1 + t + 1, 0)).getUTCDate();
-			return G(n, r + t, Math.min(i, a));
+		function dn(e, t) {
+			let { y: n, m: r, d: i } = G(e), a = new Date(Date.UTC(n, r - 1 + t + 1, 0)).getUTCDate();
+			return W(n, r + t, Math.min(i, a));
 		}
-		function Y(e) {
+		function J(e) {
 			return `${e.slice(0, 7)}-01`;
 		}
-		function cn(e) {
-			let { y: t, m: n } = K(e);
+		function fn(e) {
+			let { y: t, m: n } = G(e);
 			return new Date(Date.UTC(t, n, 0)).getUTCDate();
 		}
-		function ln(e) {
-			return q(e).getUTCDay();
+		function pn(e) {
+			return K(e).getUTCDay();
 		}
-		function un() {
+		function mn() {
 			try {
-				let e = new Intl.Locale(y.locale ?? navigator.language), t = (e.getWeekInfo?.() ?? e.weekInfo)?.firstDay;
+				let e = new Intl.Locale(b.locale ?? navigator.language), t = (e.getWeekInfo?.() ?? e.weekInfo)?.firstDay;
 				if (t) return t % 7;
 			} catch {}
 			return 0;
 		}
-		function X(e) {
-			let t = St.get(I.value);
+		function Y(e) {
+			let t = Ct.get(F.value);
 			t || (t = new Intl.DateTimeFormat("en-US", {
-				timeZone: I.value,
+				timeZone: F.value,
 				hourCycle: "h23",
 				year: "numeric",
 				month: "2-digit",
@@ -372,53 +403,53 @@ var ye = ["for"], be = {
 				hour: "2-digit",
 				minute: "2-digit",
 				second: "2-digit"
-			}), St.set(I.value, t));
+			}), Ct.set(F.value, t));
 			let n = {};
 			for (let { type: r, value: i } of t.formatToParts(e)) r !== "literal" && (n[r] = Number(i));
 			return {
-				day: G(n.year, n.month, n.day),
+				day: W(n.year, n.month, n.day),
 				h: n.hour % 24,
 				m: n.minute,
 				s: n.second
 			};
 		}
-		function dn(e) {
-			let t = X(e), { y: n, m: r, d: i } = K(t.day);
+		function hn(e) {
+			let t = Y(e), { y: n, m: r, d: i } = G(t.day);
 			return Date.UTC(n, r - 1, i, t.h, t.m, t.s) - Math.floor(e / 1e3) * 1e3;
 		}
-		function fn(e, t, n, r) {
-			let { y: i, m: a, d: o } = K(e), s = Date.UTC(i, a - 1, o, t, n, r), c = dn(s), ee = s - c, l = dn(ee);
-			return l === c ? ee : s - l;
+		function gn(e, t, n, r) {
+			let { y: i, m: a, d: o } = G(e), s = Date.UTC(i, a - 1, o, t, n, r), c = hn(s), l = s - c, u = hn(l);
+			return u === c ? l : s - u;
 		}
-		function Z(e) {
-			let t = lt.exec(e);
-			if (t) return fn(t[1], Number(t[2]), Number(t[3]), Number(t[4] ?? 0));
-			if (ct.test(e)) return fn(e, 0, 0, 0);
+		function X(e) {
+			let t = ut.exec(e);
+			if (t) return gn(t[1], Number(t[2]), Number(t[3]), Number(t[4] ?? 0));
+			if (lt.test(e)) return gn(e, 0, 0, 0);
 			let n = Date.parse(e);
 			return Number.isNaN(n) ? null : n;
 		}
-		function Q(e) {
-			if (ct.test(e)) return e;
-			let t = Z(e);
-			return t === null ? null : X(t).day;
+		function _n(e) {
+			if (lt.test(e)) return e;
+			let t = X(e);
+			return t === null ? null : Y(t).day;
 		}
-		function pn(e) {
+		function Z(e) {
 			return new Date(e).toISOString().replace(/\.000Z$/, "Z");
 		}
-		function mn(e) {
+		function vn(e) {
 			let t = e.replace(/\s+/g, "");
 			if (!t) return null;
 			if (t === "0") return 0;
 			let n = /(\d+(?:\.\d+)?)(ns|us|µs|ms|w|d|h|m|s)/y, r = 0, i = 0, a;
-			for (; a = n.exec(t);) r += Number(a[1]) * ut[a[2]], i = n.lastIndex;
+			for (; a = n.exec(t);) r += Number(a[1]) * dt[a[2]], i = n.lastIndex;
 			return i === t.length ? r : null;
 		}
-		function hn(e) {
+		function yn(e) {
 			if (e <= 0) return null;
 			let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.round(e % 60);
 			return `${t ? `${t}h` : ""}${n ? `${n}m` : ""}${r ? `${r}s` : ""}` || null;
 		}
-		function gn(e) {
+		function bn(e) {
 			let t = Math.floor(e / 86400), n = Math.floor(e % 86400 / 3600), r = Math.floor(e % 3600 / 60), i = Math.round(e % 60);
 			return [
 				t && `${t}d`,
@@ -427,26 +458,26 @@ var ye = ["for"], be = {
 				i && `${i}s`
 			].filter(Boolean).join(" ") || "0m";
 		}
-		function _n(e) {
-			return z.value && e < z.value || B.value && e > B.value ? !0 : y.isDateDisabled?.(e) ?? !1;
+		function xn(e) {
+			return R.value && e < R.value || z.value && e > z.value ? !0 : b.isDateDisabled?.(e) ?? !1;
 		}
-		function vn(e, t) {
-			return !!z.value && t < z.value || !!B.value && e > B.value;
+		function Sn(e, t) {
+			return !!R.value && t < R.value || !!z.value && e > z.value;
 		}
-		function yn(e) {
-			return e === j.value || L.value && e === (M.value ?? qt.value);
+		function Cn(e) {
+			return e === j.value || I.value && e === (M.value ?? Xt.value);
 		}
-		function bn(e) {
-			let t = j.value, n = qt.value;
+		function wn(e) {
+			let t = j.value, n = Xt.value;
 			if (!t || !n) return !1;
 			let [r, i] = t <= n ? [t, n] : [n, t];
 			return e >= r && e <= i;
 		}
-		function xn(e) {
-			let t = j.value, n = qt.value, [r, i] = t <= n ? [t, n] : [n, t];
+		function Tn(e) {
+			let t = j.value, n = Xt.value, [r, i] = t <= n ? [t, n] : [n, t];
 			return [e === r && "rounded-l-8", e === i && "rounded-r-8"];
 		}
-		function Sn(e, t, n, r, i, a, o, s) {
+		function Q(e, t, n, r, i, a, o, s) {
 			return {
 				key: e,
 				label: t,
@@ -458,190 +489,211 @@ var ye = ["for"], be = {
 				set: s
 			};
 		}
-		function Cn(e, t) {
-			let n = [Sn("h", `${t} hours`, 0, 23, !0, !0, () => e.h, (t) => e.h = t), Sn("m", `${t} minutes`, 0, 59, !0, !0, () => e.m, (t) => e.m = t)];
-			return y.showSeconds && n.push(Sn("s", `${t} seconds`, 0, 59, !0, !0, () => e.s, (t) => e.s = t)), n;
-		}
-		function wn(e) {
-			return e.padded ? on(e.get()) : String(e.get());
-		}
-		function Tn(e, t) {
+		function En(e, t) {
+			let n = b.hourCycle === 12, r = [n ? {
+				...Q("h", `${t} hours`, 0, 11, !0, !0, () => e.h % 12, (t) => e.h = t + (e.h >= 12 ? 12 : 0)),
+				text: (e) => un(e || 12)
+			} : Q("h", `${t} hours`, 0, 23, !0, !0, () => e.h, (t) => e.h = t), Q("m", `${t} minutes`, 0, 59, !0, !0, () => e.m, (t) => e.m = t)];
+			return b.showSeconds && r.push(Q("s", `${t} seconds`, 0, 59, !0, !0, () => e.s, (t) => e.s = t)), n && r.push({
+				...Q("p", `${t} AM or PM`, 0, 12, !1, !1, () => e.h >= 12 ? 12 : 0, (t) => e.h = e.h % 12 + t),
+				values: [0, 12],
+				text: (e) => e ? "PM" : "AM"
+			}), r;
+		}
+		function Dn(e) {
+			return e.padded ? un(e.get()) : String(e.get());
+		}
+		function On(e, t) {
 			let n = t.get(), r = t.max - t.min + 1, i = null;
-			e.key === "ArrowUp" ? i = n + 1 : e.key === "ArrowDown" ? i = n - 1 : e.key === "PageUp" ? i = n + 10 : e.key === "PageDown" ? i = n - 10 : e.key === "Home" ? i = t.min : e.key === "End" && (i = t.max), i !== null && (e.preventDefault(), i = t.wrap ? ((i - t.min) % r + r) % r + t.min : Math.min(t.max, Math.max(t.min, i)), t.set(i), e.target.value = wn(t));
+			e.key === "ArrowUp" ? i = n + 1 : e.key === "ArrowDown" ? i = n - 1 : e.key === "PageUp" ? i = n + 10 : e.key === "PageDown" ? i = n - 10 : e.key === "Home" ? i = t.min : e.key === "End" && (i = t.max), i !== null && (e.preventDefault(), i = t.wrap ? ((i - t.min) % r + r) % r + t.min : Math.min(t.max, Math.max(t.min, i)), t.set(i), e.target.value = Dn(t));
 		}
-		function En(e, t) {
+		function kn(e, t) {
 			let n = e.target, r = n.value.replace(/\D/g, "").slice(0, String(t.max).length);
 			if (n.value = r, !r) return;
 			let i = Number(r);
 			i > t.max && (i = Number(r.slice(-1))), t.set(Math.max(t.min, i));
 		}
-		function Dn(e, t) {
-			e.target.value = wn(t);
+		function An(e, t) {
+			e.target.value = Dn(t);
 		}
-		function On() {
-			if (A.value = null, T.value = "days", O.value = "date", y.mode === "duration") {
-				let e = V.value[0] ? mn(V.value[0]) ?? 0 : 0;
-				F.d = Math.floor(e / 86400), F.h = Math.floor(e % 86400 / 3600), F.m = Math.floor(e % 3600 / 60);
+		function jn(e = !0) {
+			if (Et.value = null, e && (E.value = "days", k.value = "date"), b.mode === "duration") {
+				let e = B.value[0] ? vn(B.value[0]) ?? 0 : 0;
+				P.d = Math.floor(e / 86400), P.h = Math.floor(e % 86400 / 3600), P.m = Math.floor(e % 3600 / 60);
 				return;
 			}
-			let [e, t] = V.value;
+			let [t, n] = B.value;
 			if (j.value = null, M.value = null, Object.assign(N, {
 				h: 0,
 				m: 0,
 				s: 0
-			}), Object.assign(P, {
+			}), Object.assign(Dt, {
 				h: 23,
 				m: 59,
-				s: y.showSeconds ? 59 : 0
-			}), R.value) {
-				let n = e ? Z(e) : null, r = t ? Z(t) : null;
-				if (n !== null) {
-					let e = X(n);
-					j.value = e.day, Object.assign(N, {
-						h: e.h,
-						m: e.m,
-						s: e.s
+				s: b.showSeconds ? 59 : 0
+			}), b.autoApply) {
+				let e = Y(Date.now());
+				Object.assign(N, {
+					h: e.h,
+					m: e.m,
+					s: 0
+				});
+			}
+			if (L.value) {
+				let e = t ? X(t) : null, r = n ? X(n) : null;
+				if (e !== null) {
+					let t = Y(e);
+					j.value = t.day, Object.assign(N, {
+						h: t.h,
+						m: t.m,
+						s: t.s
 					});
 				}
 				if (r !== null) {
-					let e = X(r);
-					M.value = e.day, Object.assign(P, {
+					let e = Y(r);
+					M.value = e.day, Object.assign(Dt, {
 						h: e.h,
 						m: e.m,
 						s: e.s
 					});
 				}
-			} else j.value = e ? Q(e) : null, M.value = t ? Q(t) : null;
-			let n = j.value ?? Nt.value;
-			!j.value && z.value && n < z.value && (n = z.value), !j.value && B.value && n > B.value && (n = B.value), k.value = n, w.value = Y(n);
+			} else j.value = t ? _n(t) : null, M.value = n ? _n(n) : null;
+			let r = j.value ?? It.value;
+			!j.value && R.value && r < R.value && (r = R.value), !j.value && z.value && r > z.value && (r = z.value), A.value = r, T.value = J(r);
 		}
-		function kn() {
-			let e = wt.value;
+		function Mn() {
+			let e = Tt.value;
 			if (!e) return;
-			let t = e.getBoundingClientRect(), n = S.value?.offsetWidth ?? 300, r = S.value?.offsetHeight ?? 380, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = Math.max(8, Math.min(t.left, window.innerWidth - n - 8)), c = Math.min(t.width, 448);
-			C.value = o ? {
-				bottom: window.innerHeight - t.top + 6,
-				left: s,
-				maxHeight: Math.max(200, a),
-				minWidth: c
+			let n = e.getBoundingClientRect(), r = t(), i = C.value?.offsetWidth ?? 300, a = C.value?.offsetHeight ?? 380, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = Math.max(8, Math.min(n.left - r.left, r.width - i - 8)), u = Math.min(n.width, 448);
+			w.value = c ? {
+				bottom: r.bottom - n.top + 6,
+				left: l,
+				maxHeight: Math.max(200, s),
+				minWidth: u
 			} : {
-				top: t.bottom + 6,
-				left: s,
-				maxHeight: Math.max(200, i),
-				minWidth: c
+				top: n.bottom + 6 - r.top,
+				left: l,
+				maxHeight: Math.max(200, o),
+				minWidth: u
 			};
 		}
-		function An() {
-			y.disabled || b.value || (b.value = !0);
+		function Nn() {
+			b.disabled || x.value || (x.value = !0);
 		}
-		function jn(e = !0) {
-			b.value && (b.value = !1, e && wt.value?.focus());
+		function Pn(e = !0) {
+			x.value && (x.value = !1, e && Tt.value?.focus());
 		}
-		async function Mn() {
-			On(), kn(), ar(), await f(), kn(), y.mode === "duration" ? S.value?.querySelector("input")?.focus() : Nn();
+		async function Fn() {
+			jn(), Mn(), ur(), await p(), Mn(), b.mode === "duration" ? C.value?.querySelector("input")?.focus() : In();
 		}
-		function Nn() {
-			f(() => S.value?.querySelector(`[data-day="${k.value}"]`)?.focus());
+		function In() {
+			p(() => C.value?.querySelector(`[data-day="${A.value}"]`)?.focus());
+		}
+		function $(e, t = !0) {
+			ct.value = e, t && Pn();
+		}
+		function Ln() {
+			b.autoApply && L.value && (I.value || (j.value ??= A.value), en.value && $(I.value ? [Z(U.value), Z(Zt.value)] : Z(U.value), !1));
 		}
-		function $(e) {
-			st.value = e, jn();
+		function Rn() {
+			b.inline ? jn(!1) : Pn();
 		}
-		function Pn(e) {
-			if (!_n(e)) {
-				if (k.value = e, Y(e) !== w.value && (w.value = Y(e), Nn()), !L.value) {
-					j.value = e, R.value || $(e);
+		function zn(e) {
+			if (!xn(e)) {
+				if (A.value = e, J(e) !== T.value && (T.value = J(e), In()), !I.value) {
+					j.value = e, L.value ? Ln() : $(e);
 					return;
 				}
 				if (!j.value || M.value) {
 					j.value = e, M.value = null;
 					return;
 				}
-				e < j.value ? (M.value = j.value, j.value = e) : M.value = e, A.value = null, R.value || $([j.value, M.value]);
+				e < j.value ? (M.value = j.value, j.value = e) : M.value = e, Et.value = null, L.value ? Ln() : $([j.value, M.value]);
 			}
 		}
-		function Fn() {
-			if (Xt.value) {
-				if (y.mode === "duration") return $(hn(Zt.value));
-				if (!R.value) return $(L.value ? [j.value, M.value] : j.value);
-				$(L.value ? [pn(W.value), pn(Jt.value)] : pn(W.value));
+		function Bn() {
+			if (en.value) {
+				if (b.mode === "duration") return $(yn(tn.value));
+				if (!L.value) return $(I.value ? [j.value, M.value] : j.value);
+				$(I.value ? [Z(U.value), Z(Zt.value)] : Z(U.value));
 			}
 		}
-		function In() {
-			let e = X(Date.now());
+		function Vn() {
+			let e = Y(Date.now());
 			j.value = e.day, Object.assign(N, {
 				h: e.h,
 				m: e.m,
-				s: y.showSeconds ? e.s : 0
-			}), k.value = e.day, w.value = Y(e.day), T.value = "days", O.value === "time" && f(() => Xn("smooth"));
+				s: b.showSeconds ? e.s : 0
+			}), A.value = e.day, T.value = J(e.day), E.value = "days", Ln(), k.value === "time" && p(() => tr("smooth"));
 		}
-		function Ln() {
-			Pn(Nt.value);
+		function Hn() {
+			zn(It.value);
 		}
-		function Rn(e) {
+		function Un(e) {
 			if (e.value) return $(e.value());
 			if (!e.duration) return;
-			if (y.mode === "duration") return $(hn(mn(e.duration) ?? 0));
-			let t = Math.floor(Date.now() / 1e3) * 1e3, n = t - (mn(e.duration) ?? 0) * 1e3;
-			if (y.mode === "date") return $(L.value ? [X(n).day, X(t).day] : X(n).day);
-			$(L.value ? [pn(n), pn(t)] : pn(n));
+			if (b.mode === "duration") return $(yn(vn(e.duration) ?? 0));
+			let t = Math.floor(Date.now() / 1e3) * 1e3, n = t - (vn(e.duration) ?? 0) * 1e3;
+			if (b.mode === "date") return $(I.value ? [Y(n).day, Y(t).day] : Y(n).day);
+			$(I.value ? [Z(n), Z(t)] : Z(n));
 		}
-		function zn() {
-			st.value = null, wt.value?.focus();
+		function Wn() {
+			ct.value = null, Tt.value?.focus();
 		}
-		function Bn(e) {
-			w.value = sn(w.value, e), k.value = sn(k.value, e);
+		function Gn(e) {
+			T.value = dn(T.value, e), A.value = dn(A.value, e);
 		}
-		function Vn(e) {
-			T.value === "days" ? Bn(e) : T.value === "months" ? w.value = sn(w.value, 12 * e) : E.value += 10 * e;
+		function Kn(e) {
+			E.value === "days" ? Gn(e) : E.value === "months" ? T.value = dn(T.value, 12 * e) : D.value += 10 * e;
 		}
-		function Hn() {
-			T.value = "months", D.value = Bt.value, Wn();
+		function qn() {
+			E.value = "months", O.value = Ut.value, Yn();
 		}
-		function Un() {
-			T.value = "years", E.value = Math.floor(H.value / 10) * 10, D.value = H.value, Wn();
+		function Jn() {
+			E.value = "years", D.value = Math.floor(V.value / 10) * 10, O.value = V.value, Yn();
 		}
-		function Wn() {
-			f(() => S.value?.querySelector(`[data-pick="${Gt.value}"]`)?.focus());
+		function Yn() {
+			p(() => C.value?.querySelector(`[data-pick="${Jt.value}"]`)?.focus());
 		}
-		function Gn(e) {
+		function Xn(e) {
 			if (!e.disabled) {
-				if (T.value === "years") {
-					w.value = G(e.value, Bt.value + 1, 1), Hn();
+				if (E.value === "years") {
+					T.value = W(e.value, Ut.value + 1, 1), qn();
 					return;
 				}
-				w.value = G(H.value, e.value + 1, 1), k.value = G(H.value, e.value + 1, Math.min(K(k.value).d, cn(w.value))), T.value = "days", Nn();
+				T.value = W(V.value, e.value + 1, 1), A.value = W(V.value, e.value + 1, Math.min(G(A.value).d, fn(T.value))), E.value = "days", In();
 			}
 		}
-		function Kn(e) {
+		function Zn(e) {
 			if (e.key === "Escape") {
-				e.preventDefault(), e.stopPropagation(), T.value === "years" ? Hn() : (T.value = "days", Nn());
+				e.preventDefault(), e.stopPropagation(), E.value === "years" ? qn() : (E.value = "days", In());
 				return;
 			}
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
-				let t = Ut.value.find((e) => e.value === D.value);
-				t && Gn(t);
+				let t = Kt.value.find((e) => e.value === O.value);
+				t && Xn(t);
 				return;
 			}
-			let t = T.value === "years", n = t ? E.value : 0, r = {
+			let t = E.value === "years", n = t ? D.value : 0, r = {
 				ArrowLeft: -1,
 				ArrowRight: 1,
 				ArrowUp: -4,
 				ArrowDown: 4
 			}, i;
-			if (e.key in r) i = D.value + r[e.key];
+			if (e.key in r) i = O.value + r[e.key];
 			else if (e.key === "Home") i = n;
 			else if (e.key === "End") i = n + 11;
 			else if (e.key === "PageUp" || e.key === "PageDown") {
-				e.preventDefault(), Vn(e.key === "PageUp" ? -1 : 1), t && (D.value += e.key === "PageUp" ? -10 : 10), Wn();
+				e.preventDefault(), Kn(e.key === "PageUp" ? -1 : 1), t && (O.value += e.key === "PageUp" ? -10 : 10), Yn();
 				return;
 			} else return;
-			e.preventDefault(), t ? i < E.value ? E.value -= 10 : i > E.value + 11 && (E.value += 10) : i = Math.max(0, Math.min(11, i)), D.value = i, Wn();
+			e.preventDefault(), t ? i < D.value ? D.value -= 10 : i > D.value + 11 && (D.value += 10) : i = Math.max(0, Math.min(11, i)), O.value = i, Yn();
 		}
-		function qn(e) {
-			O.value = e, e === "time" && f(() => Xn("instant"));
+		function Qn(e) {
+			k.value = e, e === "time" && p(() => tr("instant"));
 		}
-		function Jn(e) {
+		function $n(e) {
 			if (![
 				"ArrowLeft",
 				"ArrowRight",
@@ -649,15 +701,15 @@ var ye = ["for"], be = {
 				"End"
 			].includes(e.key)) return;
 			e.preventDefault();
-			let t = e.key === "Home" ? "date" : e.key === "End" || O.value === "date" ? "time" : "date";
-			qn(t), f(() => S.value?.querySelector(`[data-tab="${t}"]`)?.focus());
+			let t = e.key === "Home" ? "date" : e.key === "End" || k.value === "date" ? "time" : "date";
+			Qn(t), p(() => C.value?.querySelector(`[data-tab="${t}"]`)?.focus());
 		}
-		function Yn(e) {
-			return Array.from({ length: e.max - e.min + 1 }, (t, n) => e.min + n);
+		function er(e) {
+			return e.values ?? Array.from({ length: e.max - e.min + 1 }, (t, n) => e.min + n);
 		}
-		function Xn(e) {
+		function tr(e) {
 			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-			S.value?.querySelectorAll("[data-time-list]").forEach((e) => {
+			C.value?.querySelectorAll("[data-time-list]").forEach((e) => {
 				let n = e.querySelector("[aria-selected=true]");
 				n && e.scrollTo({
 					top: n.offsetTop - (e.clientHeight - n.offsetHeight) / 2,
@@ -665,347 +717,359 @@ var ye = ["for"], be = {
 				});
 			});
 		}
-		function Zn(e) {
-			S.value?.querySelector(`[data-time-list="${e}"] [aria-selected=true]`)?.focus({ preventScroll: !0 });
+		function nr(e) {
+			C.value?.querySelector(`[data-time-list="${e}"] [aria-selected=true]`)?.focus({ preventScroll: !0 });
 		}
-		function Qn(e, t, n) {
-			e.set(t), f(() => {
-				Xn("smooth"), Zn(n);
+		function rr(e, t, n) {
+			e.set(t), Ln(), p(() => {
+				tr("smooth"), nr(n);
 			});
 		}
-		function $n(e, t, n) {
+		function ir(e, t, n) {
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
 				e.preventDefault();
-				let t = [...S.value?.querySelectorAll("[data-time-list]") ?? []].map((e) => e.dataset.timeList), r = t[t.indexOf(n) + (e.key === "ArrowRight" ? 1 : -1)];
-				r && Zn(r);
+				let t = [...C.value?.querySelectorAll("[data-time-list]") ?? []].map((e) => e.dataset.timeList), r = t[t.indexOf(n) + (e.key === "ArrowRight" ? 1 : -1)];
+				r && nr(r);
 				return;
 			}
-			let r = t.get(), i = {
-				ArrowUp: r - 1,
-				ArrowDown: r + 1,
-				PageUp: r - 5,
-				PageDown: r + 5,
-				Home: t.min,
-				End: t.max
+			let r = er(t), i = r.indexOf(t.get()), a = {
+				ArrowUp: i - 1,
+				ArrowDown: i + 1,
+				PageUp: i - 5,
+				PageDown: i + 5,
+				Home: 0,
+				End: r.length - 1
 			};
-			e.key in i && (e.preventDefault(), Qn(t, Math.min(t.max, Math.max(t.min, i[e.key])), n));
-		}
-		function er(e) {
-			let t = k.value, n = (ln(t) - Tt.value + 7) % 7, r = {
-				ArrowLeft: () => J(t, -1),
-				ArrowRight: () => J(t, 1),
-				ArrowUp: () => J(t, -7),
-				ArrowDown: () => J(t, 7),
-				Home: () => J(t, -n),
-				End: () => J(t, 6 - n),
-				PageUp: () => sn(t, e.shiftKey ? -12 : -1),
-				PageDown: () => sn(t, e.shiftKey ? 12 : 1)
+			e.key in a && (e.preventDefault(), rr(t, r[Math.min(r.length - 1, Math.max(0, a[e.key]))], n));
+		}
+		function ar(e) {
+			let t = A.value, n = (pn(t) - Ot.value + 7) % 7, r = {
+				ArrowLeft: () => q(t, -1),
+				ArrowRight: () => q(t, 1),
+				ArrowUp: () => q(t, -7),
+				ArrowDown: () => q(t, 7),
+				Home: () => q(t, -n),
+				End: () => q(t, 6 - n),
+				PageUp: () => dn(t, e.shiftKey ? -12 : -1),
+				PageDown: () => dn(t, e.shiftKey ? 12 : 1)
 			};
 			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), Pn(t);
+				e.preventDefault(), zn(t);
 				return;
 			}
 			let i = r[e.key];
-			i && (e.preventDefault(), k.value = i(), w.value = Y(k.value), L.value && j.value && !M.value && (A.value = k.value), Nn());
+			i && (e.preventDefault(), A.value = i(), T.value = J(A.value), I.value && j.value && !M.value && (Et.value = A.value), In());
 		}
-		function tr(e) {
+		function or(e) {
+			if (b.inline) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), e.stopPropagation(), jn();
+				e.preventDefault(), e.stopPropagation(), Pn();
 				return;
 			}
-			if (e.key !== "Tab" || !S.value) return;
-			let t = [...S.value.querySelectorAll("button:not([disabled]), input:not([disabled])")].filter((e) => e.tabIndex >= 0);
+			if (e.key !== "Tab" || !C.value) return;
+			let t = [...C.value.querySelectorAll("button:not([disabled]), input:not([disabled])")].filter((e) => e.tabIndex >= 0);
 			if (!t.length) return;
 			let n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 		}
-		function nr(e) {
-			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), An());
+		function sr(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Nn());
 		}
-		function rr(e) {
+		function cr(e) {
 			let t = e.target;
-			Ct.value?.contains(t) || S.value?.contains(t) || jn(!1);
+			wt.value?.contains(t) || C.value?.contains(t) || Pn(!1);
 		}
-		function ir(e) {
-			e?.target instanceof Node && S.value?.contains(e.target) || kn();
+		function lr(e) {
+			e?.target instanceof Node && C.value?.contains(e.target) || Mn();
 		}
-		function ar() {
-			document.addEventListener("pointerdown", rr, !0), window.addEventListener("scroll", ir, !0), window.addEventListener("resize", ir);
+		function ur() {
+			document.addEventListener("pointerdown", cr, !0), window.addEventListener("scroll", lr, !0), window.addEventListener("resize", lr);
 		}
-		function or() {
-			document.removeEventListener("pointerdown", rr, !0), window.removeEventListener("scroll", ir, !0), window.removeEventListener("resize", ir);
+		function dr() {
+			document.removeEventListener("pointerdown", cr, !0), window.removeEventListener("scroll", lr, !0), window.removeEventListener("resize", lr);
 		}
-		return ue(b, (e) => e ? Mn() : or()), ie(() => {
-			b.value && Mn();
-		}), re(or), d({ focus: () => wt.value?.focus() }), (i, d) => (m(), s("div", te({
+		return ue(x, (e) => e ? Fn() : dr()), ue(ct, () => b.inline && jn(!1)), re(() => {
+			b.inline ? jn() : x.value && Fn();
+		}), ne(dr), ee({ focus: () => b.inline ? In() : Tt.value?.focus() }), (t, a) => (h(), c("div", te({
 			ref_key: "root",
-			ref: Ct
-		}, ht.value, {
-			class: ["w-full", u.disabled && "opacity-50"],
+			ref: wt
+		}, gt.value, {
+			class: ["w-full", f.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-date-picker"
 		}), [
-			u.label ? (m(), s("label", {
+			f.label || t.$slots["label-icon"] || t.$slots["label-extra"] ? (h(), c("label", {
 				key: 0,
-				id: _t,
-				for: `${v(x)}-trigger`,
+				id: vt,
+				for: f.inline ? void 0 : `${y(S)}-trigger`,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-			}, [c("span", null, _(u.label), 1), u.required ? (m(), s("span", be, "*")) : o("", !0)], 8, ye)) : o("", !0),
-			u.hint ? (m(), s("p", {
+			}, [
+				ae(t.$slots, "label-icon"),
+				f.label ? (h(), c("span", be, v(f.label), 1)) : s("", !0),
+				ae(t.$slots, "label-extra"),
+				f.required ? (h(), c("span", xe, "*")) : s("", !0)
+			], 8, ye)) : s("", !0),
+			f.hint ? (h(), c("p", {
 				key: 1,
-				id: xt,
+				id: St,
 				class: "mb-2 text-base text-muted"
-			}, _(u.hint), 1)) : o("", !0),
-			c("div", xe, [c("button", te({
-				id: `${v(x)}-trigger`,
+			}, v(f.hint), 1)) : s("", !0),
+			f.inline ? s("", !0) : (h(), c("div", Se, [l("button", te({
+				id: `${y(S)}-trigger`,
 				ref_key: "trigger",
-				ref: wt
-			}, gt.value, {
+				ref: Tt
+			}, _t.value, {
 				type: "button",
-				disabled: u.disabled,
+				disabled: f.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": b.value,
-				"aria-labelledby": u.label ? `${_t} ${vt}` : vt,
-				"aria-describedby": nn.value,
-				"aria-invalid": !!u.errorMsg || void 0,
-				"aria-required": u.required || void 0,
+				"aria-expanded": x.value,
+				"aria-labelledby": f.label || t.$slots["label-icon"] || t.$slots["label-extra"] ? `${vt} ${yt}` : yt,
+				"aria-describedby": sn.value,
+				"aria-invalid": !!f.errorMsg || void 0,
+				"aria-required": f.required || void 0,
 				class: ["flex w-full items-center rounded-10 border bg-background text-left text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none disabled:cursor-not-allowed", [
-					u.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
-					u.clearable && It.value && !u.disabled ? "pr-20" : "pr-10",
-					u.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
-					u.errorMsg ? ["border-danger/60", tn.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : tn.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
+					f.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
+					f.clearable && zt.value && !f.disabled ? "pr-20" : "pr-10",
+					f.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
+					f.errorMsg ? ["border-danger/60", on.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : on.value ? "focus-ring" : ["border-border", !f.disabled && "hover:border-accent-active"]
 				]],
-				onClick: d[0] ||= (e) => b.value ? jn() : An(),
-				onKeydown: nr,
-				onFocus: d[1] ||= (e) => en.value = !0,
-				onBlur: d[2] ||= (e) => en.value = !1
-			}), [c("span", {
-				id: vt,
-				class: p(["truncate tabular-nums", !Lt.value && "text-muted/80"])
-			}, _(Lt.value || u.placeholder || (u.mode === "duration" ? "Choose duration" : "Choose date")), 3)], 16, Se), c("span", { class: p(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", u.size === "small" ? "right-3" : "right-4"]) }, [u.clearable && It.value && !u.disabled ? (m(), s("button", {
+				onClick: a[0] ||= (e) => x.value ? Pn() : Nn(),
+				onKeydown: sr,
+				onFocus: a[1] ||= (e) => an.value = !0,
+				onBlur: a[2] ||= (e) => an.value = !1
+			}), [l("span", {
+				id: yt,
+				class: m(["truncate tabular-nums", !Bt.value && "text-muted/80"])
+			}, v(Bt.value || f.placeholder || (f.mode === "duration" ? "Choose duration" : "Choose date")), 3)], 16, Ce), l("span", { class: m(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", f.size === "small" ? "right-3" : "right-4"]) }, [f.clearable && zt.value && !f.disabled ? (h(), c("button", {
 				key: 0,
 				type: "button",
 				class: "pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors duration-200 hover:bg-accent-hover hover:text-primary active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-				"aria-label": u.label ? `Clear ${u.label}` : "Clear",
-				onClick: zn
-			}, [l(v(ve), {
+				"aria-label": f.label ? `Clear ${f.label}` : "Clear",
+				onClick: Wn
+			}, [d(y(ve), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, Ce)) : o("", !0), (m(), a(oe(an.value), {
-				class: p(["size-4", b.value && "text-heading"]),
+			})], 8, we)) : s("", !0), (h(), o(oe(ln.value), {
+				class: m(["size-4", x.value && "text-heading"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"]))], 2)]),
-			u.errorMsg ? (m(), s("p", {
-				key: 2,
-				id: bt,
-				class: "mt-1 text-base text-danger-strong",
-				role: "alert"
-			}, _(u.errorMsg), 1)) : o("", !0),
-			u.name ? (m(), s("input", {
-				key: 3,
-				type: "hidden",
-				name: u.name,
-				value: Rt.value
-			}, null, 8, we)) : o("", !0),
-			(m(), a(n, { to: "body" }, [l(r, {
+			}, null, 8, ["class"]))], 2)])),
+			(h(), o(r, {
+				to: "body",
+				disabled: f.inline
+			}, [d(i, {
 				"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-opacity",
 				"enter-from-class": "opacity-0 scale-95",
 				"leave-active-class": "transition duration-100 ease-in",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: de(() => [b.value ? (m(), s("div", {
+				default: de(() => [x.value || f.inline ? (h(), c("div", te({
 					key: 0,
 					ref_key: "panel",
-					ref: S,
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": rn.value,
-					class: "ac-scrollbar fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col rounded-10 border border-border bg-surface shadow-sm sm:flex-row",
-					style: ne({
-						top: C.value.top === void 0 ? void 0 : `${C.value.top}px`,
-						bottom: C.value.bottom === void 0 ? void 0 : `${C.value.bottom}px`,
-						left: `${C.value.left}px`,
-						maxHeight: `${C.value.maxHeight}px`,
-						minWidth: `${C.value.minWidth}px`
-					}),
+					ref: C,
+					role: f.inline ? "group" : "dialog",
+					"aria-modal": f.inline ? void 0 : "true",
+					"aria-label": cn.value,
+					"aria-describedby": f.inline ? sn.value : void 0,
+					inert: f.inline && f.disabled
+				}, f.inline ? _t.value : void 0, {
+					class: ["flex flex-col sm:flex-row", !f.inline && "ac-scrollbar fixed z-[90] max-w-[calc(100vw-16px)] rounded-10 border border-border bg-surface shadow-sm"],
+					style: f.inline ? void 0 : {
+						top: w.value.top === void 0 ? void 0 : `${w.value.top}px`,
+						bottom: w.value.bottom === void 0 ? void 0 : `${w.value.bottom}px`,
+						left: `${w.value.left}px`,
+						maxHeight: `${w.value.maxHeight}px`,
+						minWidth: `${w.value.minWidth}px`
+					},
 					"data-ac-ds": "",
 					"data-testid": "ac-date-picker-panel",
-					onKeydown: tr
-				}, [u.presets.length ? (m(), s("div", Ee, [(m(!0), s(t, null, g(u.presets, (e) => (m(), s("button", {
+					onKeydown: or
+				}), [f.presets.length ? (h(), c("div", Ee, [(h(!0), c(n, null, _(f.presets, (e) => (h(), c("button", {
 					key: e.label,
 					type: "button",
 					class: "cursor-pointer rounded-8 px-3 py-2 text-left text-base text-heading transition-colors duration-200 hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset max-sm:rounded-full max-sm:border max-sm:border-border max-sm:px-2.5 max-sm:py-1 max-sm:text-xs",
-					onClick: (t) => Rn(e)
-				}, _(e.label), 9, De))), 128))])) : o("", !0), c("div", { class: p(["max-w-full min-w-0 flex-auto max-sm:w-auto", u.mode === "duration" ? "w-72" : "w-[calc(328px*var(--ac-scale))]"]) }, [u.mode === "duration" ? (m(), s("div", Oe, [
-					c("p", ke, _(u.label || "Duration"), 1),
-					c("p", Ae, _(gn(Zt.value)), 1),
-					c("div", je, [(m(!0), s(t, null, g($t.value, (e) => (m(), s("label", {
+					onClick: (t) => Un(e)
+				}, v(e.label), 9, De))), 128))])) : s("", !0), l("div", { class: m(["max-w-full min-w-0 flex-auto max-sm:w-auto", f.inline ? "w-full" : f.mode === "duration" ? "w-72" : "w-[calc(328px*var(--ac-scale))]"]) }, [f.mode === "duration" ? (h(), c("div", Oe, [
+					l("p", ke, v(f.label || "Duration"), 1),
+					l("p", Ae, v(bn(tn.value)), 1),
+					l("div", je, [(h(!0), c(n, null, _(rn.value, (e) => (h(), c("label", {
 						key: e.key,
 						class: "block"
-					}, [c("span", Me, _(e.label), 1), c("input", {
+					}, [l("span", Me, v(e.label), 1), l("input", {
 						type: "text",
 						inputmode: "numeric",
 						role: "spinbutton",
 						autocomplete: "off",
-						value: wn(e),
+						value: Dn(e),
 						"aria-valuenow": e.get(),
 						"aria-valuemin": e.min,
 						"aria-valuemax": e.max,
 						class: "h-10 w-full rounded-10 border border-border bg-background px-2.5 text-center text-base text-heading tabular-nums transition-[border-color,box-shadow] duration-200 outline-none hover:border-accent-active focus:focus-ring",
-						onKeydown: (t) => Tn(t, e),
-						onInput: (t) => En(t, e),
-						onBlur: (t) => Dn(t, e),
-						onFocus: d[3] ||= (e) => e.target.select()
+						onKeydown: (t) => On(t, e),
+						onInput: (t) => kn(t, e),
+						onBlur: (t) => An(t, e),
+						onFocus: a[3] ||= (e) => e.target.select()
 					}, null, 40, Ne)]))), 128))]),
-					d[10] ||= c("p", { class: "mt-2 text-xs text-muted" }, "↑ ↓ to adjust, or type a number.", -1)
-				])) : (m(), s(t, { key: 1 }, [R.value ? (m(), s("div", {
+					a[9] ||= l("p", { class: "mt-2 text-xs text-muted" }, "↑ ↓ to adjust, or type a number.", -1)
+				])) : (h(), c(n, { key: 1 }, [L.value ? (h(), c("div", {
 					key: 0,
 					role: "tablist",
 					"aria-label": "Date or time",
 					class: "flex border-b border-border",
-					onKeydown: Jn
-				}, [(m(), s(t, null, g(pt, (e) => c("button", {
-					id: `${v(x)}-tab-${e.key}`,
+					onKeydown: $n
+				}, [(h(), c(n, null, _(mt, (e) => l("button", {
+					id: `${y(S)}-tab-${e.key}`,
 					key: e.key,
 					type: "button",
 					role: "tab",
 					"data-tab": e.key,
-					"aria-selected": O.value === e.key,
-					"aria-controls": `${v(x)}-tabpanel`,
-					tabindex: O.value === e.key ? 0 : -1,
-					class: p(["flex flex-1 cursor-pointer items-center justify-center gap-2 px-4 py-2 text-base font-medium transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset", O.value === e.key ? "bg-primary text-white focus-visible:ring-white/70" : "text-heading hover:bg-accent-hover focus-visible:ring-ring active:bg-accent-active"]),
-					onClick: (t) => qn(e.key)
-				}, [(m(), a(oe(e.icon), {
+					"aria-selected": k.value === e.key,
+					"aria-controls": `${y(S)}-tabpanel`,
+					tabindex: k.value === e.key ? 0 : -1,
+					class: m(["flex flex-1 cursor-pointer items-center justify-center gap-2 px-4 py-2 text-base font-medium transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset", k.value === e.key ? "bg-primary text-white focus-visible:ring-white/70" : "text-heading hover:bg-accent-hover focus-visible:ring-ring active:bg-accent-active"]),
+					onClick: (t) => Qn(e.key)
+				}, [(h(), o(oe(e.icon), {
 					class: "size-4",
 					"aria-hidden": "true"
-				})), ee(" " + _(e.label), 1)], 10, Pe)), 64))], 32)) : o("", !0), c("div", {
-					id: `${v(x)}-tabpanel`,
+				})), u(" " + v(e.label), 1)], 10, Pe)), 64))], 32)) : s("", !0), l("div", {
+					id: `${y(S)}-tabpanel`,
 					class: "p-3",
-					role: R.value ? "tabpanel" : void 0,
-					"aria-labelledby": R.value ? `${v(x)}-tab-${O.value}` : void 0
-				}, [O.value === "date" ? (m(), s(t, { key: 0 }, [c("div", Ie, [
-					c("button", {
+					role: L.value ? "tabpanel" : void 0,
+					"aria-labelledby": L.value ? `${y(S)}-tab-${k.value}` : void 0
+				}, [k.value === "date" ? (h(), c(n, { key: 0 }, [l("div", Ie, [
+					l("button", {
 						type: "button",
 						class: "inline-flex cursor-pointer items-center justify-center rounded-8 p-2 text-muted transition-colors duration-200 hover:bg-accent-hover hover:text-heading active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-						"aria-label": Kt.value[0],
-						onClick: d[4] ||= (e) => Vn(-1)
-					}, [l(v(me), {
+						"aria-label": Yt.value[0],
+						onClick: a[4] ||= (e) => Kn(-1)
+					}, [d(y(me), {
 						class: "size-4",
 						"aria-hidden": "true"
 					})], 8, Le),
-					c("span", {
-						id: yt,
+					l("span", {
+						id: bt,
 						class: "sr-only",
 						"aria-live": "polite"
-					}, _(U.value), 1),
-					T.value === "years" ? (m(), s("span", ze, _(U.value), 1)) : (m(), s("button", {
+					}, v(H.value), 1),
+					E.value === "years" ? (h(), c("span", ze, v(H.value), 1)) : (h(), c("button", {
 						key: 0,
 						type: "button",
 						class: "cursor-pointer rounded-10 bg-accent px-4 py-2 text-base font-semibold text-heading tabular-nums transition-colors duration-200 hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-						"aria-label": T.value === "days" ? `${U.value}, choose month` : `${U.value}, choose year`,
-						onClick: d[5] ||= (e) => T.value === "days" ? Hn() : Un()
-					}, _(U.value), 9, Re)),
-					c("button", {
+						"aria-label": E.value === "days" ? `${H.value}, choose month` : `${H.value}, choose year`,
+						onClick: a[5] ||= (e) => E.value === "days" ? qn() : Jn()
+					}, v(H.value), 9, Re)),
+					l("button", {
 						type: "button",
 						class: "inline-flex cursor-pointer items-center justify-center rounded-8 p-2 text-muted transition-colors duration-200 hover:bg-accent-hover hover:text-heading active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-						"aria-label": Kt.value[1],
-						onClick: d[6] ||= (e) => Vn(1)
-					}, [l(v(he), {
+						"aria-label": Yt.value[1],
+						onClick: a[6] ||= (e) => Kn(1)
+					}, [d(y(he), {
 						class: "size-4",
 						"aria-hidden": "true"
 					})], 8, Be)
-				]), T.value === "days" ? (m(), s("table", {
+				]), E.value === "days" ? (h(), c("table", {
 					key: 0,
 					role: "grid",
-					"aria-labelledby": yt,
+					"aria-labelledby": bt,
 					class: "w-full table-fixed border-collapse",
-					onKeydown: er
-				}, [c("thead", null, [c("tr", null, [(m(!0), s(t, null, g(jt.value, (e) => (m(), s("th", {
+					onKeydown: ar
+				}, [l("thead", null, [l("tr", null, [(h(!0), c(n, null, _(Pt.value, (e) => (h(), c("th", {
 					key: e.long,
 					scope: "col",
 					abbr: e.long,
 					class: "pt-2 pb-2 text-center text-xs font-medium text-heading"
-				}, _(e.short.slice(0, 2)), 9, Ve))), 128))])]), c("tbody", { onMouseleave: d[7] ||= (e) => A.value = null }, [(m(!0), s(t, null, g(zt.value, (e, n) => (m(), s("tr", { key: n }, [(m(!0), s(t, null, g(e, (e) => (m(), s("td", {
+				}, v(e.short.slice(0, 2)), 9, Ve))), 128))])]), l("tbody", { onMouseleave: a[7] ||= (e) => Et.value = null }, [(h(!0), c(n, null, _(Ht.value, (e, t) => (h(), c("tr", { key: t }, [(h(!0), c(n, null, _(e, (e) => (h(), c("td", {
 					key: e,
 					role: "gridcell",
-					"aria-selected": yn(e) || bn(e),
+					"aria-selected": Cn(e) || wn(e),
 					class: "p-0 py-0.5"
-				}, [c("div", { class: p(["px-0.5", bn(e) && Y(e) === w.value && ["bg-primary/10", ...xn(e)]]) }, [c("button", {
+				}, [l("div", { class: m(["px-0.5", wn(e) && J(e) === T.value && ["bg-primary/10", ...Tn(e)]]) }, [l("button", {
 					type: "button",
 					"data-day": e,
-					tabindex: e === k.value ? 0 : -1,
-					"aria-label": kt.value.format(q(e)),
-					"aria-disabled": _n(e) || void 0,
-					"aria-current": e === Nt.value ? "date" : void 0,
-					class: p(["relative flex aspect-square w-full items-center justify-center rounded-8 text-base tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface motion-reduce:transition-none", [Y(e) !== w.value && "invisible", _n(e) ? "cursor-not-allowed text-muted/50 line-through" : yn(e) ? "cursor-pointer bg-primary font-semibold text-white" : e === Nt.value ? "cursor-pointer bg-accent font-medium text-heading hover:bg-accent-hover active:bg-accent-active" : "cursor-pointer text-heading hover:bg-accent-hover hover:font-semibold active:bg-accent-active"]]),
-					onClick: (t) => Pn(e),
-					onMouseenter: (t) => L.value && j.value && !M.value && (A.value = e)
-				}, _(At.value.format(q(e))), 43, Ue)], 2)], 8, He))), 128))]))), 128))], 32)], 32)) : (m(), s("div", {
+					tabindex: e === A.value ? 0 : -1,
+					"aria-label": Mt.value.format(K(e)),
+					"aria-disabled": xn(e) || void 0,
+					"aria-current": e === It.value ? "date" : void 0,
+					class: m(["relative flex aspect-square w-full items-center justify-center rounded-8 text-base tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface motion-reduce:transition-none", [J(e) !== T.value && "invisible", xn(e) ? "cursor-not-allowed text-muted/50 line-through" : Cn(e) ? "cursor-pointer bg-primary font-semibold text-white" : e === It.value ? "cursor-pointer bg-accent font-medium text-heading hover:bg-accent-hover active:bg-accent-active" : "cursor-pointer text-heading hover:bg-accent-hover hover:font-semibold active:bg-accent-active"]]),
+					onClick: (t) => zn(e),
+					onMouseenter: (t) => I.value && j.value && !M.value && (Et.value = e)
+				}, v(Nt.value.format(K(e))), 43, Ue)], 2)], 8, He))), 128))]))), 128))], 32)], 32)) : (h(), c("div", {
 					key: 1,
 					role: "grid",
-					"aria-label": T.value === "months" ? `Months of ${U.value}` : `Years ${U.value}`,
+					"aria-label": E.value === "months" ? `Months of ${H.value}` : `Years ${H.value}`,
 					class: "grid gap-2",
-					onKeydown: Kn
-				}, [(m(!0), s(t, null, g(Wt.value, (e, n) => (m(), s("div", {
-					key: n,
+					onKeydown: Zn
+				}, [(h(!0), c(n, null, _(qt.value, (e, t) => (h(), c("div", {
+					key: t,
 					role: "row",
 					class: "grid grid-cols-4 gap-2"
-				}, [(m(!0), s(t, null, g(e, (e) => (m(), s("button", {
+				}, [(h(!0), c(n, null, _(e, (e) => (h(), c("button", {
 					key: e.value,
 					type: "button",
 					role: "gridcell",
 					"data-pick": e.value,
-					tabindex: e.value === Gt.value ? 0 : -1,
+					tabindex: e.value === Jt.value ? 0 : -1,
 					"aria-label": e.label,
 					"aria-selected": e.selected,
 					"aria-disabled": e.disabled || void 0,
-					class: p(["rounded-8 px-4 py-3 text-base tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface motion-reduce:transition-none", e.disabled ? "cursor-not-allowed text-muted/50 line-through" : e.selected ? "cursor-pointer bg-primary font-semibold text-white" : "cursor-pointer text-heading hover:bg-accent-hover hover:font-semibold active:bg-accent-active"]),
-					onClick: (t) => Gn(e),
-					onFocus: (t) => D.value = e.value
-				}, _(e.text), 43, Ge))), 128))]))), 128))], 40, We))], 64)) : (m(), s(t, { key: 1 }, [c("div", Ke, [(m(!0), s(t, null, g(Qt.value, (e, n) => (m(), s(t, { key: e.key }, [n > 0 ? (m(), s("span", qe)) : o("", !0), c("div", {
+					class: m(["rounded-8 px-4 py-3 text-base tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface motion-reduce:transition-none", e.disabled ? "cursor-not-allowed text-muted/50 line-through" : e.selected ? "cursor-pointer bg-primary font-semibold text-white" : "cursor-pointer text-heading hover:bg-accent-hover hover:font-semibold active:bg-accent-active"]),
+					onClick: (t) => Xn(e),
+					onFocus: (t) => O.value = e.value
+				}, v(e.text), 43, Ge))), 128))]))), 128))], 40, We))], 64)) : (h(), c(n, { key: 1 }, [l("div", Ke, [(h(!0), c(n, null, _(nn.value, (e, t) => (h(), c(n, { key: e.key }, [t > 0 ? (h(), c("span", qe)) : s("", !0), l("div", {
 					class: "flex min-w-0 flex-1 flex-col",
 					role: "group",
 					"aria-label": `${e.label} time`
-				}, [L.value ? (m(), s("p", Ye, _(e.label), 1)) : o("", !0), c("div", Xe, [(m(!0), s(t, null, g(e.spinners, (n, r) => (m(), s(t, { key: n.key }, [r > 0 ? (m(), s("span", Ze, ":")) : o("", !0), c("div", Qe, [c("span", $e, _(ft[n.key]), 1), c("div", {
+				}, [I.value ? (h(), c("p", Ye, v(e.label), 1)) : s("", !0), l("div", Xe, [(h(!0), c(n, null, _(e.spinners, (t, r) => (h(), c(n, { key: t.key }, [t.key === "p" ? (h(), c("span", Ze)) : r > 0 ? (h(), c("span", Qe, ":")) : s("", !0), l("div", { class: m(["flex h-full flex-1 flex-col items-center", t.key === "p" ? "min-w-12" : "min-w-10"]) }, [l("span", $e, v(pt[t.key]), 1), l("div", {
 					role: "listbox",
-					"aria-label": n.label,
-					"data-time-list": `${e.key}-${n.key}`,
+					"aria-label": t.label,
+					"data-time-list": `${e.key}-${t.key}`,
 					class: "relative min-h-0 w-full flex-1 scroll-smooth overflow-x-hidden overflow-y-auto [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
-					onKeydown: (t) => $n(t, n, `${e.key}-${n.key}`)
-				}, [c("div", tt, [(m(!0), s(t, null, g(Yn(n), (t) => (m(), s("button", {
-					key: t,
+					onKeydown: (n) => ir(n, t, `${e.key}-${t.key}`)
+				}, [l("div", tt, [(h(!0), c(n, null, _(er(t), (n) => (h(), c("button", {
+					key: n,
 					type: "button",
 					role: "option",
-					tabindex: t === n.get() ? 0 : -1,
-					"aria-selected": t === n.get(),
-					class: p(["inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-8 text-base tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset motion-reduce:transition-none", t === n.get() ? "scale-110 bg-primary font-bold text-white" : "text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]),
-					onClick: (r) => Qn(n, t, `${e.key}-${n.key}`)
-				}, _(on(t)), 11, nt))), 128))])], 40, et)])], 64))), 128))])], 8, Je)], 64))), 128))]), c("p", rt, [ee("Times in " + _(Mt.value), 1), Mt.value === I.value ? o("", !0) : (m(), s(t, { key: 0 }, [ee(" (" + _(I.value) + ")", 1)], 64))])], 64))], 8, Fe)], 64)), R.value || u.mode === "duration" || !L.value ? (m(), s("div", it, [
-					u.mode !== "duration" && !L.value ? (m(), s("button", {
+					tabindex: n === t.get() ? 0 : -1,
+					"aria-selected": n === t.get(),
+					class: m(["inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-8 tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset motion-reduce:transition-none", [t.key === "p" ? "w-12 text-xs font-bold" : "w-10 text-base", n === t.get() ? ["bg-primary text-white", t.key !== "p" && "scale-110 font-bold"] : "text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]]),
+					onClick: (r) => rr(t, n, `${e.key}-${t.key}`)
+				}, v(t.text ? t.text(n) : un(n)), 11, nt))), 128))])], 40, et)], 2)], 64))), 128))])], 8, Je)], 64))), 128))]), f.showTimeZone ? (h(), c("p", rt, [u("Times in " + v(Ft.value), 1), Ft.value === F.value ? s("", !0) : (h(), c(n, { key: 0 }, [u(" (" + v(F.value) + ")", 1)], 64))])) : s("", !0)], 64))], 8, Fe)], 64)), $t.value ? (h(), c("div", it, [
+					f.mode !== "duration" && !I.value ? (h(), c("button", {
 						key: 0,
 						type: "button",
 						class: "cursor-pointer rounded-8 bg-accent px-3 py-1.5 text-xs font-medium text-heading transition-colors duration-200 hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-						disabled: _n(Nt.value),
-						onClick: d[8] ||= (e) => R.value ? In() : Ln()
-					}, _(R.value ? "Now" : "Today"), 9, at)) : o("", !0),
-					Yt.value ? (m(), s("p", ot, _(Yt.value), 1)) : o("", !0),
-					d[11] ||= c("span", { class: "flex-1" }, null, -1),
-					R.value || u.mode === "duration" ? (m(), s(t, { key: 2 }, [l(e, {
+						disabled: xn(It.value),
+						onClick: a[8] ||= (e) => L.value ? Vn() : Hn()
+					}, v(L.value ? "Now" : "Today"), 9, at)) : s("", !0),
+					Qt.value ? (h(), c("p", ot, v(Qt.value), 1)) : s("", !0),
+					a[10] ||= l("span", { class: "flex-1" }, null, -1),
+					L.value && !f.autoApply || f.mode === "duration" ? (h(), c(n, { key: 2 }, [d(e, {
 						title: "Cancel",
 						color: "white",
 						size: "small",
-						onClick: d[9] ||= (e) => jn()
-					}), l(e, {
+						onClick: Rn
+					}), d(e, {
 						title: "Apply",
 						size: "small",
-						disabled: !Xt.value,
-						onClick: Fn
-					}, null, 8, ["disabled"])], 64)) : o("", !0)
-				])) : o("", !0)], 2)], 44, Te)) : o("", !0)]),
+						disabled: !en.value,
+						onClick: Bn
+					}, null, 8, ["disabled"])], 64)) : s("", !0)
+				])) : s("", !0)], 2)], 16, Te)) : s("", !0)]),
 				_: 1
-			})]))
+			})], 8, ["disabled"])),
+			f.errorMsg ? (h(), c("p", {
+				key: 3,
+				id: xt,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, v(f.errorMsg), 1)) : s("", !0),
+			f.name ? (h(), c("input", {
+				key: 4,
+				type: "hidden",
+				name: f.name,
+				value: Vt.value
+			}, null, 8, st)) : s("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };