@ac-design/design-system 1.0.3 → 2.1.0

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

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