@ac-design/design-system 2.6.1 → 2.7.0

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

@@ -0,0 +1,595 @@
+import { fixedFrame as e } from "./fixedFrame.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, createVNode as l, defineComponent as u, mergeModels as ee, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as te, onMounted as ne, openBlock as m, ref as h, renderList as g, renderSlot as re, resolveDynamicComponent as ie, toDisplayString as _, unref as v, useAttrs as ae, useId as oe, useModel as se, watch as ce, withCtx as le } from "vue";
+import { Calendar as ue, CalendarRange as de, ChevronLeft as fe, ChevronRight as pe, X as me } from "@lucide/vue";
+//#region src/lib/components/AcMonthPicker.vue?vue&type=script&setup=true&lang.ts
+var he = ["for"], ge = { key: 0 }, _e = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, ve = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required"
+], ye = ["aria-label"], be = [
+	"role",
+	"aria-modal",
+	"aria-label",
+	"aria-describedby",
+	"inert"
+], xe = {
+	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",
+	"aria-label": "Presets"
+}, Se = ["onClick"], Ce = { class: "p-3" }, we = { class: "mb-2 flex items-center justify-between gap-2" }, Te = ["aria-label", "aria-disabled"], Ee = ["aria-label"], De = {
+	key: 1,
+	class: "rounded-10 bg-accent px-4 py-2 text-base font-semibold text-heading tabular-nums",
+	"aria-hidden": "true"
+}, Oe = ["aria-label", "aria-disabled"], ke = ["aria-label"], Ae = ["aria-selected"], je = [
+	"data-month",
+	"tabindex",
+	"aria-label",
+	"aria-disabled",
+	"aria-current",
+	"onClick",
+	"onFocus",
+	"onMouseenter"
+], Me = ["aria-label"], Ne = ["aria-selected"], Pe = [
+	"data-year",
+	"tabindex",
+	"aria-label",
+	"aria-disabled",
+	"aria-current",
+	"onClick",
+	"onFocus"
+], Fe = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-2 border-t border-border px-3 py-3"
+}, Ie = ["disabled"], Le = ["name", "value"], y = 12, b = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "AcMonthPicker",
+	props: /*@__PURE__*/ ee({
+		label: { default: "" },
+		placeholder: { default: "" },
+		range: {
+			type: Boolean,
+			default: !1
+		},
+		minMonth: { default: "" },
+		maxMonth: { default: "" },
+		minDate: { default: "" },
+		maxDate: { default: "" },
+		isMonthDisabled: {
+			type: Function,
+			default: void 0
+		},
+		presets: { default: () => [] },
+		locale: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" },
+		name: { default: "" },
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		valueType: { default: "string" },
+		fieldClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(u, { expose: ee }) {
+		let b = u, x = se(u, "modelValue"), S = se(u, "open"), Re = /^(\d{4})-(\d{2})/, C = oe(), w = ae(), ze = i(() => ({
+			class: w.class,
+			style: w.style
+		})), Be = i(() => {
+			let { class: e, style: t, ...n } = w;
+			return n;
+		}), Ve = `${C}-label`, T = `${C}-value`, He = `${C}-title`, Ue = `${C}-msg`, We = `${C}-hint`, Ge = h(null), E = h(null), D = h(null), O = h({
+			left: 0,
+			maxHeight: 480,
+			minWidth: 0
+		}), k = h("months"), A = h(2026), j = h(2020), M = h("2026-01"), N = h(2026), P = h(null), F = h(null), I = h(null), L = h(!1), Ke = i(() => new Intl.DateTimeFormat(b.locale, {
+			month: "short",
+			timeZone: "UTC"
+		})), qe = i(() => new Intl.DateTimeFormat(b.locale, {
+			month: "long",
+			year: "numeric",
+			timeZone: "UTC"
+		})), Je = i(() => new Intl.DateTimeFormat(b.locale, {
+			month: "short",
+			year: "numeric",
+			timeZone: "UTC"
+		})), R = i(() => ft(/* @__PURE__ */ new Date())), z = i(() => K(b.minMonth) ?? K(b.minDate)), B = i(() => K(b.maxMonth) ?? K(b.maxDate)), V = i({
+			get() {
+				let e = x.value;
+				return e instanceof Date ? Number.isNaN(e.getTime()) ? null : ft(e) : e || null;
+			},
+			set(e) {
+				if (b.range || Array.isArray(e) || b.valueType !== "date" && !(x.value instanceof Date)) {
+					x.value = e;
+					return;
+				}
+				x.value = e ? pt(K(e) ?? e) : null;
+			}
+		}), H = i(() => {
+			let e = V.value;
+			return b.range ? Array.isArray(e) ? [K(e[0]), K(e[1])] : [null, null] : [typeof e == "string" ? K(e) : null];
+		}), U = i(() => H.value.some(Boolean)), Ye = i(() => {
+			let [e, t] = H.value;
+			if (!e) return typeof V.value == "string" ? V.value : "";
+			if (!b.range) return qe.value.format(Y(e));
+			let n = Je.value.format(Y(e));
+			return t ? e === t ? n : `${n} – ${Je.value.format(Y(t))}` : `${n} –`;
+		}), Xe = i(() => H.value.filter(Boolean).join("/")), Ze = i(() => Array.from({ length: 12 }, (e, t) => {
+			let n = `${A.value}-${G(t + 1)}`;
+			return {
+				key: n,
+				text: Ke.value.format(Y(n)),
+				label: qe.value.format(Y(n)),
+				disabled: mt(n)
+			};
+		})), Qe = i(() => [
+			0,
+			3,
+			6,
+			9
+		].map((e) => Ze.value.slice(e, e + 3))), $e = i(() => q(M.value) === A.value ? M.value : Ze.value[0].key), et = i(() => Array.from({ length: y }, (e, t) => {
+			let n = j.value + t;
+			return {
+				year: n,
+				disabled: ht(n),
+				selected: n === A.value
+			};
+		})), tt = i(() => [
+			0,
+			3,
+			6,
+			9
+		].map((e) => et.value.slice(e, e + 3))), nt = i(() => et.value.some((e) => e.year === N.value) ? N.value : j.value), W = i(() => k.value === "months" ? String(A.value) : `${j.value}–${j.value + y - 1}`), rt = i(() => k.value === "months" ? ["Previous year", "Next year"] : ["Previous years", "Next years"]), it = i(() => z.value ? k.value === "months" ? `${A.value - 1}-12` < z.value : q(z.value) >= j.value : !1), at = i(() => B.value ? k.value === "months" ? `${A.value + 1}-01` > B.value : q(B.value) <= j.value + y - 1 : !1), ot = i(() => !b.range || !F.value ? null : I.value ?? P.value ?? null), st = i(() => b.clearable && U.value || !b.range && !b.inline), ct = i(() => S.value || L.value), lt = i(() => [b.hint && We, b.errorMsg && Ue].filter(Boolean).join(" ") || void 0), ut = i(() => {
+			let e = b.range ? "month range" : "month";
+			return b.label ? `${b.label}: choose ${e}` : `Choose ${e}`;
+		});
+		function G(e) {
+			return String(e).padStart(2, "0");
+		}
+		function K(e) {
+			let t = e ? Re.exec(e) : null;
+			if (!t) return null;
+			let n = Number(t[2]);
+			return n >= 1 && n <= 12 ? `${t[1]}-${t[2]}` : null;
+		}
+		function q(e) {
+			return Number(e.slice(0, 4));
+		}
+		function J(e) {
+			return Number(e.slice(5, 7)) - 1;
+		}
+		function dt(e, t) {
+			let n = q(e) * 12 + J(e) + t;
+			return `${Math.floor(n / 12)}-${G(n % 12 + 1)}`;
+		}
+		function Y(e) {
+			return new Date(Date.UTC(q(e), J(e), 1));
+		}
+		function ft(e) {
+			return `${e.getFullYear()}-${G(e.getMonth() + 1)}`;
+		}
+		function pt(e) {
+			return new Date(q(e), J(e), 1);
+		}
+		function mt(e) {
+			return z.value && e < z.value || B.value && e > B.value ? !0 : b.isMonthDisabled?.(e) ?? !1;
+		}
+		function ht(e) {
+			return !!z.value && `${e}-12` < z.value || !!B.value && `${e}-01` > B.value;
+		}
+		function gt(e) {
+			return e === F.value || b.range && e === (I.value ?? ot.value);
+		}
+		function _t(e) {
+			let t = F.value, n = ot.value;
+			if (!t || !n) return !1;
+			let [r, i] = t <= n ? [t, n] : [n, t];
+			return e >= r && e <= i;
+		}
+		function vt(e) {
+			let t = F.value, n = ot.value, [r, i] = t <= n ? [t, n] : [n, t];
+			return [e === r && "rounded-l-8", e === i && "rounded-r-8"];
+		}
+		function yt(e = !0) {
+			P.value = null, e && (k.value = "months");
+			let [t, n] = H.value;
+			F.value = t ?? null, I.value = b.range ? n ?? null : null;
+			let r = t ?? R.value;
+			!t && z.value && r < z.value && (r = z.value), !t && B.value && r > B.value && (r = B.value), M.value = r, A.value = q(r);
+		}
+		function bt() {
+			let t = E.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = e(), i = D.value?.offsetWidth ?? 300, a = D.value?.offsetHeight ?? 320, 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);
+			O.value = c ? {
+				bottom: r.bottom - n.top + 6,
+				left: l,
+				maxHeight: Math.max(200, s),
+				minWidth: u
+			} : {
+				top: n.bottom + 6 - r.top,
+				left: l,
+				maxHeight: Math.max(200, o),
+				minWidth: u
+			};
+		}
+		function xt() {
+			b.disabled || S.value || (S.value = !0);
+		}
+		function X(e = !0) {
+			S.value && (S.value = !1, e && E.value?.focus());
+		}
+		async function St() {
+			yt(), bt(), Lt(), await f(), bt(), Z();
+		}
+		function Z() {
+			f(() => D.value?.querySelector(`[data-month="${$e.value}"]`)?.focus());
+		}
+		function Ct() {
+			f(() => D.value?.querySelector(`[data-year="${nt.value}"]`)?.focus());
+		}
+		function Q(e) {
+			V.value = e, X();
+		}
+		function wt(e) {
+			if (!mt(e)) {
+				if (M.value = e, A.value = q(e), !b.range) {
+					F.value = e, Q(e);
+					return;
+				}
+				if (!F.value || I.value) {
+					F.value = e, I.value = null;
+					return;
+				}
+				e < F.value ? (I.value = F.value, F.value = e) : I.value = e, P.value = null, Q([F.value, I.value]);
+			}
+		}
+		function Tt(e) {
+			let t = e.value();
+			if (!Array.isArray(t)) return Q(K(t) ?? t);
+			let n = K(t[0]) ?? t[0], r = K(t[1]) ?? t[1];
+			Q(n <= r ? [n, r] : [r, n]);
+		}
+		function Et() {
+			if (V.value = null, b.inline) return Z();
+			X(!1), E.value?.focus();
+		}
+		function Dt(e) {
+			(e < 0 ? it.value : at.value) || (k.value === "months" ? (A.value += e, M.value = dt(M.value, 12 * e)) : (j.value += y * e, N.value += y * e));
+		}
+		function Ot() {
+			k.value = "months", Z();
+		}
+		function kt() {
+			k.value = "years", j.value = Math.floor(A.value / 10) * 10, N.value = A.value, Ct();
+		}
+		function At(e) {
+			e.disabled || (A.value = e.year, M.value = `${e.year}-${G(J(M.value) + 1)}`, Ot());
+		}
+		function jt(e, t) {
+			return {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -3,
+				ArrowDown: 3,
+				PageUp: -12,
+				PageDown: 12,
+				Home: -t,
+				End: 2 - t
+			}[e] ?? null;
+		}
+		function Mt(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), wt(M.value);
+				return;
+			}
+			let t = jt(e.key, J(M.value) % 3);
+			t !== null && (e.preventDefault(), M.value = dt(M.value, t), A.value = q(M.value), b.range && F.value && !I.value && (P.value = M.value), Z());
+		}
+		function Nt(e) {
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), Ot();
+				return;
+			}
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				let t = et.value.find((e) => e.year === N.value);
+				t && At(t);
+				return;
+			}
+			let t = jt(e.key, (N.value - j.value) % 3);
+			if (t === null) return;
+			e.preventDefault();
+			let n = N.value + t;
+			j.value += Math.floor((n - j.value) / y) * y, N.value = n, Ct();
+		}
+		function Pt(e) {
+			if (b.inline) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), X();
+				return;
+			}
+			if (e.key !== "Tab" || !D.value) return;
+			let t = [...D.value.querySelectorAll("button: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 Ft(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), xt());
+		}
+		function It(e) {
+			let t = e.target;
+			Ge.value?.contains(t) || D.value?.contains(t) || X(!1);
+		}
+		function $(e) {
+			e?.target instanceof Node && D.value?.contains(e.target) || bt();
+		}
+		function Lt() {
+			document.addEventListener("pointerdown", It, !0), window.addEventListener("scroll", $, !0), window.addEventListener("resize", $);
+		}
+		function Rt() {
+			document.removeEventListener("pointerdown", It, !0), window.removeEventListener("scroll", $, !0), window.removeEventListener("resize", $);
+		}
+		return ce(S, (e) => e ? St() : Rt()), ce(V, () => b.inline && yt(!1)), ne(() => {
+			b.inline ? yt() : S.value && St();
+		}), te(Rt), ee({ focus: () => b.inline ? Z() : E.value?.focus() }), (e, i) => (m(), s("div", d({
+			ref_key: "root",
+			ref: Ge
+		}, ze.value, {
+			class: ["w-full", u.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-month-picker"
+		}), [
+			u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? (m(), s("label", {
+				key: 0,
+				id: Ve,
+				for: u.inline ? void 0 : `${v(C)}-trigger`,
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				re(e.$slots, "label-icon"),
+				u.label ? (m(), s("span", ge, _(u.label), 1)) : o("", !0),
+				re(e.$slots, "label-extra"),
+				u.required ? (m(), s("span", _e, "*")) : o("", !0)
+			], 8, he)) : o("", !0),
+			u.hint ? (m(), s("p", {
+				key: 1,
+				id: We,
+				class: "mb-2 text-base text-muted"
+			}, _(u.hint), 1)) : o("", !0),
+			u.inline ? o("", !0) : (m(), s("div", {
+				key: 2,
+				class: p(["relative", u.fieldClass])
+			}, [c("button", d({
+				id: `${v(C)}-trigger`,
+				ref_key: "trigger",
+				ref: E
+			}, Be.value, {
+				type: "button",
+				disabled: u.disabled,
+				"aria-haspopup": "dialog",
+				"aria-expanded": S.value,
+				"aria-labelledby": u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? `${Ve} ${T}` : T,
+				"aria-describedby": lt.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-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none disabled:cursor-not-allowed", [
+					u.size === "small" ? "h-9 pl-3 text-base font-normal" : u.size === "large" ? "h-[50px] pl-4 text-lg font-medium" : "h-10.5 pl-4 text-base font-normal",
+					u.clearable && U.value && !u.disabled ? "pr-20" : "pr-10",
+					u.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
+					u.errorMsg ? ["border-danger/60", ct.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : ct.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
+				]],
+				onClick: i[0] ||= (e) => S.value ? X() : xt(),
+				onKeydown: Ft,
+				onFocus: i[1] ||= (e) => L.value = !0,
+				onBlur: i[2] ||= (e) => L.value = !1
+			}), [c("span", {
+				id: T,
+				class: p(["truncate tabular-nums", !Ye.value && "text-muted/80"])
+			}, _(Ye.value || u.placeholder || (u.range ? "Choose months" : "Choose month")), 3)], 16, ve), 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 && U.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: Et
+			}, [l(v(me), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 8, ye)) : o("", !0), (m(), a(ie(u.range ? v(de) : v(ue)), {
+				class: p(["size-4", S.value && "text-heading"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"]))], 2)], 2)),
+			(m(), a(n, {
+				to: "body",
+				disabled: u.inline
+			}, [l(r, {
+				"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: le(() => [S.value || u.inline ? (m(), s("div", d({
+					key: 0,
+					ref_key: "panel",
+					ref: D,
+					role: u.inline ? "group" : "dialog",
+					"aria-modal": u.inline ? void 0 : "true",
+					"aria-label": ut.value,
+					"aria-describedby": u.inline ? lt.value : void 0,
+					inert: u.inline && u.disabled
+				}, u.inline ? Be.value : void 0, {
+					class: ["flex flex-col sm:flex-row", !u.inline && "ac-scrollbar fixed z-[90] max-w-[calc(100vw-16px)] rounded-10 border border-border bg-surface shadow-sm"],
+					style: u.inline ? void 0 : {
+						top: O.value.top === void 0 ? void 0 : `${O.value.top}px`,
+						bottom: O.value.bottom === void 0 ? void 0 : `${O.value.bottom}px`,
+						left: `${O.value.left}px`,
+						maxHeight: `${O.value.maxHeight}px`,
+						minWidth: `${O.value.minWidth}px`
+					},
+					"data-ac-ds": "",
+					"data-testid": "ac-month-picker-panel",
+					onKeydown: Pt
+				}), [u.presets.length ? (m(), s("div", xe, [(m(!0), s(t, null, g(u.presets, (e) => (m(), s("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) => Tt(e)
+				}, _(e.label), 9, Se))), 128))])) : o("", !0), c("div", { class: p(["max-w-full min-w-0 flex-auto max-sm:w-auto", u.inline ? "w-full" : "w-[calc(296px*var(--ac-scale))]"]) }, [c("div", Ce, [c("div", we, [
+					c("button", {
+						type: "button",
+						class: p(["inline-flex items-center justify-center rounded-8 p-2 text-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", it.value ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-accent-hover hover:text-heading active:bg-accent-active"]),
+						"aria-label": rt.value[0],
+						"aria-disabled": it.value || void 0,
+						onClick: i[3] ||= (e) => Dt(-1)
+					}, [l(v(fe), {
+						class: "size-4",
+						"aria-hidden": "true"
+					})], 10, Te),
+					c("span", {
+						id: He,
+						class: "sr-only",
+						"aria-live": "polite"
+					}, _(W.value), 1),
+					k.value === "months" ? (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": `${W.value}, choose year`,
+						onClick: kt
+					}, _(W.value), 9, Ee)) : (m(), s("span", De, _(W.value), 1)),
+					c("button", {
+						type: "button",
+						class: p(["inline-flex items-center justify-center rounded-8 p-2 text-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", at.value ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-accent-hover hover:text-heading active:bg-accent-active"]),
+						"aria-label": rt.value[1],
+						"aria-disabled": at.value || void 0,
+						onClick: i[4] ||= (e) => Dt(1)
+					}, [l(v(pe), {
+						class: "size-4",
+						"aria-hidden": "true"
+					})], 10, Oe)
+				]), k.value === "months" ? (m(), s("div", {
+					key: 0,
+					role: "grid",
+					"aria-label": `Months of ${A.value}`,
+					class: "grid gap-1",
+					onKeydown: Mt,
+					onMouseleave: i[5] ||= (e) => P.value = null
+				}, [(m(!0), s(t, null, g(Qe.value, (e, n) => (m(), s("div", {
+					key: n,
+					role: "row",
+					class: "grid grid-cols-3"
+				}, [(m(!0), s(t, null, g(e, (e) => (m(), s("div", {
+					key: e.key,
+					role: "gridcell",
+					"aria-selected": gt(e.key) || _t(e.key),
+					class: p(["px-1", _t(e.key) && ["bg-primary/10", ...vt(e.key)]])
+				}, [c("button", {
+					type: "button",
+					"data-month": e.key,
+					tabindex: e.key === $e.value ? 0 : -1,
+					"aria-label": e.label,
+					"aria-disabled": e.disabled || void 0,
+					"aria-current": e.key === R.value ? "date" : void 0,
+					class: p(["w-full rounded-8 px-2 py-3 text-base 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" : gt(e.key) ? "cursor-pointer bg-primary font-semibold text-white" : e.key === R.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) => wt(e.key),
+					onFocus: (t) => M.value = e.key,
+					onMouseenter: (t) => u.range && F.value && !I.value && (P.value = e.key)
+				}, _(e.text), 43, je)], 10, Ae))), 128))]))), 128))], 40, ke)) : (m(), s("div", {
+					key: 1,
+					role: "grid",
+					"aria-label": `Years ${W.value}`,
+					class: "grid gap-1",
+					onKeydown: Nt
+				}, [(m(!0), s(t, null, g(tt.value, (e, n) => (m(), s("div", {
+					key: n,
+					role: "row",
+					class: "grid grid-cols-3"
+				}, [(m(!0), s(t, null, g(e, (e) => (m(), s("div", {
+					key: e.year,
+					role: "gridcell",
+					"aria-selected": e.selected,
+					class: "px-1"
+				}, [c("button", {
+					type: "button",
+					"data-year": e.year,
+					tabindex: e.year === nt.value ? 0 : -1,
+					"aria-label": String(e.year),
+					"aria-disabled": e.disabled || void 0,
+					"aria-current": e.year === q(R.value) ? "date" : void 0,
+					class: p(["w-full rounded-8 px-2 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" : e.year === q(R.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) => At(e),
+					onFocus: (t) => N.value = e.year
+				}, _(e.year), 43, Pe)], 8, Ne))), 128))]))), 128))], 40, Me))]), st.value ? (m(), s("div", Fe, [
+					!u.range && !u.inline ? (m(), s("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: mt(R.value),
+						onClick: i[6] ||= (e) => wt(R.value)
+					}, " This month ", 8, Ie)) : o("", !0),
+					i[7] ||= c("span", { class: "flex-1" }, null, -1),
+					u.clearable && U.value ? (m(), s("button", {
+						key: 1,
+						type: "button",
+						class: "cursor-pointer rounded-8 px-3 py-1.5 text-xs font-medium 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",
+						onClick: Et
+					}, " Clear ")) : o("", !0)
+				])) : o("", !0)], 2)], 16, be)) : o("", !0)]),
+				_: 1
+			})], 8, ["disabled"])),
+			u.errorMsg ? (m(), s("p", {
+				key: 3,
+				id: Ue,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, _(u.errorMsg), 1)) : o("", !0),
+			u.name ? (m(), s("input", {
+				key: 4,
+				type: "hidden",
+				name: u.name,
+				value: Xe.value
+			}, null, 8, Le)) : o("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { b as default };

package/dist/lib/components/AcNavbarItem.vue.d.ts

@@ -27,9 +27,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;
-    icon: Component;
     href: string;
     to: string | object;
+    icon: Component;
     iconOnly: boolean;
     active: boolean;
     badge: string | number;

package/dist/lib/components/AcResourceCard.vue.d.ts

@@ -81,10 +81,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     details: ResourceDetail[];
     disabled: boolean;
-    icon: Component;
     target: string;
     href: string;
     to: string | Record<string, unknown>;
+    icon: Component;
     status: string;
     loading: boolean;
     subtitle: string;

package/dist/lib/components/AcSideTabs.vue.d.ts

@@ -5,6 +5,8 @@ export interface SideTabItem {
     key: string;
     /** Text of the item. */
     label: string;
+    /** A muted second line under the label, e.g. "Sort, search, select". Truncated to one line; hidden in the collapsed rail and the phone row of tabs. */
+    description?: string;
     /** A Lucide icon component, e.g. `:icon="Database"`. The collapsed rail shows only the icon. */
     icon?: Component;
     /** Route for `RouterLink` (needs vue-router in the app). The item for the current route becomes active by itself. */
@@ -25,7 +27,7 @@ export interface SideTabItem {
     children?: SideTabItem[];
 }
 export interface Props {
-    /** The sections: `{ key, label, icon?, to?, href?, badge?, tone?, disabled?, group?, children? }`. */
+    /** The sections: `{ key, label, description?, icon?, to?, href?, badge?, tone?, disabled?, group?, children? }`. */
     items: SideTabItem[];
     /** Accessible name of the navigation, and the label of the select on phones. */
     label?: string;