@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -1,12 +1,11 @@
-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 f, nextTick as p, normalizeClass as m, normalizeStyle as te, onBeforeUnmount as ne, onMounted as re, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useAttrs as ie, useId as ae, useModel as b, watch as oe, withCtx as se } from "vue";
-import { CircleAlert as ce, Clock as le, X as ue } from "@lucide/vue";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useAttrs as re, useId as ie, useModel as y, watch as ae, withCtx as oe } from "vue";
+import { Clock as se, X as ce } from "@lucide/vue";
 //#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
-var de = ["for"], fe = {
+var le = ["for"], ue = {
 	key: 0,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, pe = { class: "relative" }, me = [
+}, de = { class: "relative" }, fe = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -14,27 +13,27 @@ var de = ["for"], fe = {
 	"aria-describedby",
 	"aria-invalid",
 	"aria-required"
-], he = { class: "pointer-events-none absolute inset-y-0 right-1.5 flex items-center gap-0.5 text-muted" }, ge = ["aria-label"], _e = ["name", "value"], ve = ["aria-label"], ye = { class: "flex min-h-0 items-stretch justify-center gap-1 p-3" }, be = {
+], pe = ["aria-label"], me = ["name", "value"], he = ["aria-label"], ge = { class: "flex h-48 min-h-0 shrink-0 items-stretch justify-center gap-1" }, _e = {
 	key: 0,
-	class: "mx-1.5 mt-6 h-32 w-px shrink-0 self-center bg-border",
+	class: "mx-2 mt-6 h-32 w-px shrink-0 self-center bg-border",
 	"aria-hidden": "true"
-}, xe = {
+}, ve = {
 	key: 1,
-	class: "mt-6 self-center font-semibold text-muted",
+	class: "mt-6 self-center font-bold text-heading/50",
 	"aria-hidden": "true"
-}, Se = ["data-col"], Ce = {
-	class: "mb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase",
+}, ye = ["data-col"], be = {
+	class: "mb-2 text-xm font-bold tracking-wider text-heading/50 uppercase",
 	"aria-hidden": "true"
-}, we = ["aria-label", "onKeydown"], Te = { class: "flex flex-col items-center gap-0.5 py-[76px]" }, Ee = [
+}, xe = ["aria-label", "onKeydown"], Se = { class: "flex w-full flex-col items-center py-20" }, Ce = [
 	"data-value",
 	"tabindex",
 	"aria-selected",
 	"aria-disabled",
 	"onClick"
-], De = { class: "flex items-center gap-2 border-t border-border px-3 py-3" }, Oe = ["disabled"], x = 86399, S = /*@__PURE__*/ u({
+], we = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, Te = ["disabled"], b = 86399, x = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "AcTimePicker",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ u({
 		label: { default: "" },
 		placeholder: { default: "Choose time" },
 		hourCycle: { default: 24 },
@@ -71,18 +70,19 @@ var de = ["for"], fe = {
 		openModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:open"],
-	setup(u, { expose: d }) {
-		let S = u, C = b(u, "modelValue"), w = b(u, "open"), ke = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, T = ae(), E = ie(), Ae = i(() => ({
-			class: E.class,
-			style: E.style
-		})), je = i(() => {
-			let { class: e, style: t, ...n } = E;
+	setup(l, { expose: u }) {
+		let x = l, S = y(l, "modelValue"), C = y(l, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, w = ie(), T = re(), De = r(() => ({
+			class: T.class,
+			style: T.style
+		})), Oe = r(() => {
+			let { class: e, style: t, ...n } = T;
 			return n;
-		}), D = `${T}-label`, O = `${T}-value`, k = `${T}-msg`, A = `${T}-hint`, j = g(null), M = g(null), N = g(null), P = g({
+		}), E = `${w}-label`, D = `${w}-value`, O = `${w}-msg`, k = `${w}-hint`, A = h(null), j = h(null), M = h(null), N = h({
 			left: 0,
-			maxHeight: 400
-		}), F = g(!1), I = i(() => w.value || F.value), L = i(() => G(C.value)), R = i(() => G(S.min) ?? 0), z = i(() => G(S.max) ?? x), B = i(() => L.value === null ? null : K(L.value)), V = i(() => S.hourCycle === 12), H = i(() => L.value === null ? "" : Le(L.value)), Me = i(() => [S.hint && A, S.errorMsg && k].filter(Boolean).join(" ") || void 0), Ne = i(() => S.label ? `${S.label}: choose time` : "Choose time"), Pe = i(() => q(ze())), Fe = i(() => {
-			let e = B.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = V.value ? [
+			maxHeight: 400,
+			minWidth: 0
+		}), P = h(!1), F = r(() => C.value || P.value), I = r(() => G(S.value)), L = r(() => G(x.min) ?? 0), R = r(() => G(x.max) ?? b), z = r(() => I.value === null ? null : K(I.value)), B = r(() => x.hourCycle === 12), V = r(() => I.value === null ? "" : Ne(I.value)), ke = r(() => [x.hint && k, x.errorMsg && O].filter(Boolean).join(" ") || void 0), Ae = r(() => x.label ? `${x.label}: choose time` : "Choose time"), je = r(() => q(Fe())), H = r(() => {
+			let e = z.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = B.value ? [
 				0,
 				1,
 				2,
@@ -103,25 +103,25 @@ var de = ["for"], fe = {
 				selected: t,
 				cells: a.map((e) => ({
 					value: e,
-					text: U(V.value ? e % 12 || 12 : e),
+					text: U(B.value ? e % 12 || 12 : e),
 					disabled: !J(e * 3600, e * 3600 + 3599)
 				}))
 			});
-			let o = t ?? Re();
+			let o = t ?? Pe();
 			if (i.push({
 				unit: "m",
 				heading: "Min",
 				name: "Minutes",
 				selected: n,
-				cells: W(0, 59, Math.max(1, S.minuteStep)).map((e) => {
+				cells: W(0, 59, Math.max(1, x.minuteStep)).map((e) => {
 					let t = o * 3600 + e * 60;
 					return {
 						value: e,
 						text: U(e),
-						disabled: !J(t, S.showSeconds ? t + 59 : t)
+						disabled: !J(t, x.showSeconds ? t + 59 : t)
 					};
 				})
-			}), S.showSeconds) {
+			}), x.showSeconds) {
 				let t = n ?? 0;
 				i.push({
 					unit: "s",
@@ -135,7 +135,7 @@ var de = ["for"], fe = {
 					}))
 				});
 			}
-			return V.value && i.push({
+			return B.value && i.push({
 				unit: "p",
 				heading: "AM/PM",
 				name: "AM or PM",
@@ -147,7 +147,7 @@ var de = ["for"], fe = {
 				}, {
 					value: 12,
 					text: "PM",
-					disabled: !J(43200, x)
+					disabled: !J(43200, b)
 				}]
 			}), i;
 		});
@@ -160,7 +160,7 @@ var de = ["for"], fe = {
 			return r;
 		}
 		function G(e) {
-			let t = e ? ke.exec(e.trim()) : null;
+			let t = e ? Ee.exec(e.trim()) : null;
 			if (!t) return null;
 			let [n, r, i] = [
 				Number(t[1]),
@@ -176,77 +176,79 @@ var de = ["for"], fe = {
 				s: e % 60
 			};
 		}
-		function Ie(e) {
+		function Me(e) {
 			let { h: t, m: n, s: r } = K(e);
-			return S.showSeconds ? `${U(t)}:${U(n)}:${U(r)}` : `${U(t)}:${U(n)}`;
+			return x.showSeconds ? `${U(t)}:${U(n)}:${U(r)}` : `${U(t)}:${U(n)}`;
 		}
-		function Le(e) {
-			let { h: t, m: n, s: r } = K(e), i = S.showSeconds ? `${U(n)}:${U(r)}` : U(n);
-			return V.value ? `${U(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${U(t)}:${i}`;
+		function Ne(e) {
+			let { h: t, m: n, s: r } = K(e), i = x.showSeconds ? `${U(n)}:${U(r)}` : U(n);
+			return B.value ? `${U(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${U(t)}:${i}`;
 		}
 		function q(e) {
-			return e >= R.value && e <= z.value;
+			return e >= L.value && e <= R.value;
 		}
 		function J(e, t) {
-			return t >= R.value && e <= z.value;
+			return t >= L.value && e <= R.value;
 		}
-		function Re() {
-			return Math.floor(R.value / 3600);
+		function Pe() {
+			return Math.floor(L.value / 3600);
 		}
-		function ze() {
-			let e = /* @__PURE__ */ new Date(), t = Math.max(1, S.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
-			return e.getHours() * 3600 + n * 60 + (S.showSeconds ? e.getSeconds() : 0);
+		function Fe() {
+			let e = /* @__PURE__ */ new Date(), t = Math.max(1, x.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
+			return e.getHours() * 3600 + n * 60 + (x.showSeconds ? e.getSeconds() : 0);
 		}
-		function Be(e) {
-			if (q(e) && Ve(e)) return e;
-			let { h: t } = K(e), n = Math.max(1, S.minuteStep) * 60, r = [];
-			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (S.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
+		function Ie(e) {
+			if (q(e) && Le(e)) return e;
+			let { h: t } = K(e), n = Math.max(1, x.minuteStep) * 60, r = [];
+			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (x.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
 			else r.push(e);
 			let i = r.filter(q);
 			return i.length ? i.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t) : null;
 		}
-		function Ve(e) {
+		function Le(e) {
 			let { m: t, s: n } = K(e);
-			return t % Math.max(1, S.minuteStep) === 0 && (S.showSeconds || n === 0);
+			return t % Math.max(1, x.minuteStep) === 0 && (x.showSeconds || n === 0);
 		}
-		function He(e, t) {
-			let { h: n, m: r, s: i } = B.value ?? K(Be(R.value) ?? R.value);
+		function Re(e, t) {
+			let { h: n, m: r, s: i } = z.value ?? K(Ie(L.value) ?? L.value);
 			e === "h" ? n = t : e === "m" ? r = t : e === "s" ? i = t : n = n % 12 + t;
-			let a = Be(n * 3600 + r * 60 + (S.showSeconds ? i : 0));
-			a !== null && (C.value = Ie(a));
+			let a = Ie(n * 3600 + r * 60 + (x.showSeconds ? i : 0));
+			a !== null && (S.value = Me(a));
 		}
-		function Ue() {
-			C.value = Ie(ze()), p(() => Z("smooth"));
+		function ze() {
+			S.value = Me(Fe()), f(() => Z("smooth"));
 		}
-		function We() {
-			C.value = null, M.value?.focus();
+		function Be() {
+			S.value = null, j.value?.focus();
 		}
 		function Y() {
-			let e = M.value;
+			let e = j.value;
 			if (!e) return;
-			let t = e.getBoundingClientRect(), n = N.value?.offsetWidth ?? 240, r = N.value?.offsetHeight ?? 320, 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));
-			P.value = o ? {
+			let t = e.getBoundingClientRect(), n = M.value?.offsetWidth ?? 240, r = M.value?.offsetHeight ?? 320, 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);
+			N.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 Ge() {
-			S.disabled || w.value || (w.value = !0);
+		function Ve() {
+			x.disabled || C.value || (C.value = !0);
 		}
 		function X(e = !0) {
-			w.value && (w.value = !1, e && M.value?.focus());
+			C.value && (C.value = !1, e && j.value?.focus());
 		}
-		async function Ke() {
-			Y(), tt(), await p(), Y(), Z("instant"), Je(0);
+		async function He() {
+			Y(), Ze(), await f(), Y(), Z("instant"), We(0);
 		}
 		function Z(e) {
 			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-			N.value?.querySelectorAll("[role=listbox]").forEach((e) => {
+			M.value?.querySelectorAll("[role=listbox]").forEach((e) => {
 				let n = e.querySelector("[aria-selected=true]") ?? e.querySelector("[aria-disabled=false]");
 				n && e.scrollTo({
 					top: n.offsetTop - (e.clientHeight - n.offsetHeight) / 2,
@@ -254,22 +256,22 @@ var de = ["for"], fe = {
 				});
 			});
 		}
-		function qe(e) {
-			return [...N.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		function Ue(e) {
+			return [...M.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
 		}
-		function Je(e) {
-			let t = qe(e);
+		function We(e) {
+			let t = Ue(e);
 			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
 		}
-		function Ye(e, t) {
+		function Ge(e, t) {
 			return (e.cells.find((t) => t.value === e.selected) ?? e.cells.find((e) => !e.disabled)) === t ? 0 : -1;
 		}
-		function Xe(e, t, n) {
-			n.disabled || (He(t.unit, n.value), p(() => {
-				Z("smooth"), qe(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
+		function Ke(e, t, n) {
+			n.disabled || (Re(t.unit, n.value), f(() => {
+				Z("smooth"), Ue(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
 			}));
 		}
-		function Ze(e, t, n) {
+		function qe(e, t, n) {
 			let r = n.cells.filter((e) => !e.disabled);
 			if (!r.length) return;
 			let i = r.findIndex((e) => e.value === n.selected), a = {
@@ -283,181 +285,171 @@ var de = ["for"], fe = {
 			if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
 				e.preventDefault();
 				let n = t + (e.key === "ArrowRight" ? 1 : -1);
-				n >= 0 && n < Fe.value.length && Je(n);
+				n >= 0 && n < H.value.length && We(n);
 				return;
 			}
 			if (e.key === "Enter") {
 				e.preventDefault();
 				let t = n.cells.find((t) => String(t.value) === e.target.dataset.value);
-				t && !t.disabled && He(n.unit, t.value), X();
+				t && !t.disabled && Re(n.unit, t.value), X();
 				return;
 			}
 			if (!(e.key in a)) return;
 			e.preventDefault();
 			let o = r[Math.max(0, Math.min(r.length - 1, a[e.key]))];
-			Xe(t, n, o);
+			Ke(t, n, o);
 		}
-		function Qe(e) {
+		function Je(e) {
 			if (e.key === "Escape") {
 				e.preventDefault(), e.stopPropagation(), X();
 				return;
 			}
-			if (e.key !== "Tab" || !N.value) return;
-			let t = [...N.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
+			if (e.key !== "Tab" || !M.value) return;
+			let t = [...M.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 $e(e) {
-			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ge());
+		function Ye(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ve());
 		}
-		function et(e) {
+		function Xe(e) {
 			let t = e.target;
-			j.value?.contains(t) || N.value?.contains(t) || X(!1);
+			A.value?.contains(t) || M.value?.contains(t) || X(!1);
 		}
 		function Q(e) {
-			e?.target instanceof Node && N.value?.contains(e.target) || Y();
+			e?.target instanceof Node && M.value?.contains(e.target) || Y();
 		}
-		function tt() {
-			document.addEventListener("pointerdown", et, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
+		function Ze() {
+			document.addEventListener("pointerdown", Xe, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
 		}
 		function $() {
-			document.removeEventListener("pointerdown", et, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+			document.removeEventListener("pointerdown", Xe, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
-		return oe(w, (e) => e ? Ke() : $()), re(() => {
-			w.value && Ke();
-		}), ne($), d({ focus: () => M.value?.focus() }), (i, d) => (h(), s("div", f({
+		return ae(C, (e) => e ? He() : $()), ne(() => {
+			C.value && He();
+		}), te($), u({ focus: () => j.value?.focus() }), (r, u) => (m(), o("div", d({
 			ref_key: "root",
-			ref: j
-		}, Ae.value, {
-			class: ["w-full", u.disabled && "opacity-50"],
+			ref: A
+		}, De.value, {
+			class: ["w-full", l.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-time-picker"
 		}), [
-			u.label ? (h(), s("label", {
+			l.label ? (m(), o("label", {
 				key: 0,
-				id: D,
-				for: `${y(T)}-trigger`,
+				id: E,
+				for: `${v(w)}-trigger`,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-			}, [c("span", null, v(u.label), 1), u.required ? (h(), s("span", fe, "*")) : o("", !0)], 8, de)) : o("", !0),
-			u.hint ? (h(), s("p", {
+			}, [s("span", null, _(l.label), 1), l.required ? (m(), o("span", ue, "*")) : a("", !0)], 8, le)) : a("", !0),
+			l.hint ? (m(), o("p", {
 				key: 1,
-				id: A,
+				id: k,
 				class: "mb-2 text-base text-muted"
-			}, v(u.hint), 1)) : o("", !0),
-			c("div", pe, [c("button", f({
-				id: `${y(T)}-trigger`,
+			}, _(l.hint), 1)) : a("", !0),
+			s("div", de, [s("button", d({
+				id: `${v(w)}-trigger`,
 				ref_key: "trigger",
-				ref: M
-			}, je.value, {
+				ref: j
+			}, Oe.value, {
 				type: "button",
-				disabled: u.disabled,
+				disabled: l.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": w.value,
-				"aria-labelledby": u.label ? `${D} ${O}` : O,
-				"aria-describedby": Me.value,
-				"aria-invalid": !!u.errorMsg || void 0,
-				"aria-required": u.required || void 0,
+				"aria-expanded": C.value,
+				"aria-labelledby": l.label ? `${E} ${D}` : D,
+				"aria-describedby": ke.value,
+				"aria-invalid": !!l.errorMsg || void 0,
+				"aria-required": l.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 pl-4",
-					u.clearable && C.value ? "pr-16" : "pr-10",
-					u.disabled ? "" : "cursor-pointer",
-					u.errorMsg ? ["border-danger/60", I.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : I.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
+					l.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
+					l.clearable && S.value ? "pr-20" : "pr-10",
+					l.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
+					l.errorMsg ? ["border-danger/60", F.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : F.value ? "focus-ring" : ["border-border", !l.disabled && "hover:border-accent-active"]
 				]],
-				onClick: d[0] ||= (e) => w.value ? X() : Ge(),
-				onKeydown: $e,
-				onFocus: d[1] ||= (e) => F.value = !0,
-				onBlur: d[2] ||= (e) => F.value = !1
-			}), [c("span", {
-				id: O,
-				class: m(["truncate tabular-nums", !H.value && "text-muted/80"])
-			}, v(H.value || C.value || u.placeholder), 3)], 16, me), c("span", he, [u.clearable && C.value && !u.disabled ? (h(), s("button", {
+				onClick: u[0] ||= (e) => C.value ? X() : Ve(),
+				onKeydown: Ye,
+				onFocus: u[1] ||= (e) => P.value = !0,
+				onBlur: u[2] ||= (e) => P.value = !1
+			}), [s("span", {
+				id: D,
+				class: p(["truncate tabular-nums", !V.value && "text-muted/80"])
+			}, _(V.value || S.value || l.placeholder), 3)], 16, fe), s("span", { class: p(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", l.size === "small" ? "right-3" : "right-4"]) }, [l.clearable && S.value && !l.disabled ? (m(), o("button", {
 				key: 0,
 				type: "button",
-				class: "pointer-events-auto inline-flex size-7 cursor-pointer items-center justify-center rounded-8 transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-				"aria-label": u.label ? `Clear ${u.label}` : "Clear",
-				onClick: We
-			}, [l(y(ue), {
+				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": l.label ? `Clear ${l.label}` : "Clear",
+				onClick: Be
+			}, [c(v(ce), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, ge)) : o("", !0), l(y(le), {
-				class: m(["mx-1.5 size-4", w.value && "text-heading"]),
+			})], 8, pe)) : a("", !0), c(v(se), {
+				class: p(["size-4", C.value && "text-heading"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])])]),
-			u.errorMsg ? (h(), s("p", {
+			}, null, 8, ["class"])], 2)]),
+			l.errorMsg ? (m(), o("p", {
 				key: 2,
-				id: k,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				id: O,
+				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, [l(y(ce), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), ee(" " + v(u.errorMsg), 1)])) : o("", !0),
-			u.name ? (h(), s("input", {
+			}, _(l.errorMsg), 1)) : a("", !0),
+			l.name ? (m(), o("input", {
 				key: 3,
 				type: "hidden",
-				name: u.name,
-				value: C.value ?? ""
-			}, null, 8, _e)) : o("", !0),
-			(h(), a(n, { to: "body" }, [l(r, {
+				name: l.name,
+				value: S.value ?? ""
+			}, null, 8, me)) : a("", !0),
+			(m(), i(t, { to: "body" }, [c(n, {
 				"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: se(() => [w.value ? (h(), s("div", {
+				default: oe(() => [C.value ? (m(), o("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: N,
+					ref: M,
 					role: "dialog",
 					"aria-modal": "true",
-					"aria-label": Ne.value,
-					class: "fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border bg-surface shadow-lg",
-					style: te({
-						top: P.value.top === void 0 ? void 0 : `${P.value.top}px`,
-						bottom: P.value.bottom === void 0 ? void 0 : `${P.value.bottom}px`,
-						left: `${P.value.left}px`,
-						maxHeight: `${P.value.maxHeight}px`
+					"aria-label": Ae.value,
+					class: "fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface p-3 shadow-sm",
+					style: ee({
+						top: N.value.top === void 0 ? void 0 : `${N.value.top}px`,
+						bottom: N.value.bottom === void 0 ? void 0 : `${N.value.bottom}px`,
+						left: `${N.value.left}px`,
+						maxHeight: `${N.value.maxHeight}px`,
+						minWidth: `${N.value.minWidth}px`
 					}),
 					"data-ac-ds": "",
 					"data-testid": "ac-time-picker-panel",
-					onKeydown: Qe
-				}, [c("div", ye, [(h(!0), s(t, null, _(Fe.value, (e, n) => (h(), s(t, { key: e.unit }, [e.unit === "p" ? (h(), s("span", be)) : n > 0 ? (h(), s("span", xe, ":")) : o("", !0), c("div", {
-					class: "flex w-14 shrink-0 flex-col items-center",
+					onKeydown: Je
+				}, [s("div", ge, [(m(!0), o(e, null, g(H.value, (t, n) => (m(), o(e, { key: t.unit }, [t.unit === "p" ? (m(), o("span", _e)) : n > 0 ? (m(), o("span", ve, ":")) : a("", !0), s("div", {
+					class: "flex h-full min-w-14 flex-1 flex-col items-center",
 					"data-col": n
-				}, [c("span", Ce, v(e.heading), 1), c("div", {
+				}, [s("span", be, _(t.heading), 1), s("div", {
 					role: "listbox",
-					"aria-label": e.name,
-					class: "relative h-48 w-full overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-					onKeydown: (t) => Ze(t, n, e)
-				}, [c("div", Te, [(h(!0), s(t, null, _(e.cells, (t) => (h(), s("button", {
-					key: t.value,
+					"aria-label": t.name,
+					class: "relative min-h-0 w-full flex-1 scroll-smooth overflow-y-auto [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+					onKeydown: (e) => qe(e, n, t)
+				}, [s("div", Se, [(m(!0), o(e, null, g(t.cells, (e) => (m(), o("button", {
+					key: e.value,
 					type: "button",
-					"data-value": t.value,
+					"data-value": e.value,
 					role: "option",
-					tabindex: Ye(e, t),
-					"aria-selected": t.value === e.selected,
-					"aria-disabled": t.disabled,
-					class: m(["inline-flex size-10 shrink-0 items-center justify-center rounded-8 text-base tabular-nums transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface", [e.unit === "p" && "w-12 text-xs font-semibold", t.disabled ? "cursor-not-allowed text-muted/50 line-through" : t.value === e.selected ? "cursor-pointer bg-primary font-semibold text-white shadow-button" : "cursor-pointer text-heading hover:bg-accent-hover active:bg-accent-active"]]),
-					onClick: (r) => Xe(n, e, t)
-				}, v(t.text), 11, Ee))), 128))])], 40, we)], 8, Se)], 64))), 128))]), c("div", De, [
-					c("button", {
-						type: "button",
-						class: "inline-flex h-8 cursor-pointer items-center rounded-8 px-2.5 text-base font-medium text-primary-strong transition-colors duration-200 hover:bg-primary/10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-						disabled: !Pe.value,
-						onClick: Ue
-					}, " Now ", 8, Oe),
-					d[4] ||= c("span", { class: "flex-1" }, null, -1),
-					l(e, {
-						title: "Done",
-						size: "small",
-						onClick: d[3] ||= (e) => X()
-					})
-				])], 44, ve)) : o("", !0)]),
+					tabindex: Ge(t, e),
+					"aria-selected": e.value === t.selected,
+					"aria-disabled": e.disabled,
+					class: p(["inline-flex h-10 shrink-0 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.unit === "p" ? "w-12 text-xs font-bold" : "w-10 text-base", e.disabled ? "cursor-not-allowed text-muted/50 line-through" : e.value === t.selected ? ["cursor-pointer bg-primary text-white", t.unit !== "p" && "scale-110 font-bold"] : "cursor-pointer text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]]),
+					onClick: (r) => Ke(n, t, e)
+				}, _(e.text), 11, Ce))), 128))])], 40, xe)], 8, ye)], 64))), 128))]), s("div", we, [s("button", {
+					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: !je.value,
+					onClick: ze
+				}, " Current time ", 8, Te)])], 44, he)) : a("", !0)]),
 				_: 1
 			})]))
 		], 16));
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };

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

@@ -1,15 +1,18 @@
 export interface Props {
-    /** Corner of the screen. On phones (under 640px) toasts span the width at the same top or bottom edge. */
-    position?: "bottom-right" | "bottom-center" | "top-right" | "top-center";
+    /** Corner of the screen. `top-right` sits 80px from the top, under an app navbar, as cloud-ui. On phones (under 640px) toasts span the width at the same edge. */
+    position?: "top-right" | "top-center" | "bottom-right" | "bottom-center";
     /** How many toasts show at once (phones show at most 3). Newer ones queue behind and their timers wait until they're shown. */
     max?: number;
+    /** Shows the shrinking 2px time bar on every toast. A toast's own `progress` option wins. */
+    progress?: boolean;
     /** Accessible name of the notification region. */
     label?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: string;
+    progress: boolean;
     max: number;
-    position: "bottom-right" | "bottom-center" | "top-right" | "top-center";
+    position: "top-right" | "top-center" | "bottom-right" | "bottom-center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;