@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -0,0 +1,463 @@
+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";
+//#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
+var de = ["for"], fe = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, pe = { class: "relative" }, me = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-labelledby",
+	"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 = {
+	key: 0,
+	class: "mx-1.5 mt-6 h-32 w-px shrink-0 self-center bg-border",
+	"aria-hidden": "true"
+}, xe = {
+	key: 1,
+	class: "mt-6 self-center font-semibold text-muted",
+	"aria-hidden": "true"
+}, Se = ["data-col"], Ce = {
+	class: "mb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase",
+	"aria-hidden": "true"
+}, we = ["aria-label", "onKeydown"], Te = { class: "flex flex-col items-center gap-0.5 py-[76px]" }, Ee = [
+	"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({
+	inheritAttrs: !1,
+	__name: "AcTimePicker",
+	props: /*@__PURE__*/ d({
+		label: { default: "" },
+		placeholder: { default: "Choose time" },
+		hourCycle: { default: 24 },
+		minuteStep: { default: 1 },
+		showSeconds: {
+			type: Boolean,
+			default: !1
+		},
+		min: { default: "" },
+		max: { default: "" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" },
+		name: { default: "" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		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;
+			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({
+			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 ? [
+				0,
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11
+			].map((e) => e + r) : W(0, 23, 1);
+			i.push({
+				unit: "h",
+				heading: "Hrs",
+				name: "Hours",
+				selected: t,
+				cells: a.map((e) => ({
+					value: e,
+					text: U(V.value ? e % 12 || 12 : e),
+					disabled: !J(e * 3600, e * 3600 + 3599)
+				}))
+			});
+			let o = t ?? Re();
+			if (i.push({
+				unit: "m",
+				heading: "Min",
+				name: "Minutes",
+				selected: n,
+				cells: W(0, 59, Math.max(1, S.minuteStep)).map((e) => {
+					let t = o * 3600 + e * 60;
+					return {
+						value: e,
+						text: U(e),
+						disabled: !J(t, S.showSeconds ? t + 59 : t)
+					};
+				})
+			}), S.showSeconds) {
+				let t = n ?? 0;
+				i.push({
+					unit: "s",
+					heading: "Sec",
+					name: "Seconds",
+					selected: e?.s ?? null,
+					cells: W(0, 59, 1).map((e) => ({
+						value: e,
+						text: U(e),
+						disabled: !q(o * 3600 + t * 60 + e)
+					}))
+				});
+			}
+			return V.value && i.push({
+				unit: "p",
+				heading: "AM/PM",
+				name: "AM or PM",
+				selected: t === null ? null : r,
+				cells: [{
+					value: 0,
+					text: "AM",
+					disabled: !J(0, 43199)
+				}, {
+					value: 12,
+					text: "PM",
+					disabled: !J(43200, x)
+				}]
+			}), i;
+		});
+		function U(e) {
+			return String(e).padStart(2, "0");
+		}
+		function W(e, t, n) {
+			let r = [];
+			for (let i = e; i <= t; i += n) r.push(i);
+			return r;
+		}
+		function G(e) {
+			let t = e ? ke.exec(e.trim()) : null;
+			if (!t) return null;
+			let [n, r, i] = [
+				Number(t[1]),
+				Number(t[2]),
+				Number(t[3] ?? 0)
+			];
+			return n > 23 || r > 59 || i > 59 ? null : n * 3600 + r * 60 + i;
+		}
+		function K(e) {
+			return {
+				h: Math.floor(e / 3600),
+				m: Math.floor(e % 3600 / 60),
+				s: e % 60
+			};
+		}
+		function Ie(e) {
+			let { h: t, m: n, s: r } = K(e);
+			return S.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 q(e) {
+			return e >= R.value && e <= z.value;
+		}
+		function J(e, t) {
+			return t >= R.value && e <= z.value;
+		}
+		function Re() {
+			return Math.floor(R.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 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);
+			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) {
+			let { m: t, s: n } = K(e);
+			return t % Math.max(1, S.minuteStep) === 0 && (S.showSeconds || n === 0);
+		}
+		function He(e, t) {
+			let { h: n, m: r, s: i } = B.value ?? K(Be(R.value) ?? R.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));
+		}
+		function Ue() {
+			C.value = Ie(ze()), p(() => Z("smooth"));
+		}
+		function We() {
+			C.value = null, M.value?.focus();
+		}
+		function Y() {
+			let e = M.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 ? {
+				bottom: window.innerHeight - t.top + 6,
+				left: s,
+				maxHeight: Math.max(200, a)
+			} : {
+				top: t.bottom + 6,
+				left: s,
+				maxHeight: Math.max(200, i)
+			};
+		}
+		function Ge() {
+			S.disabled || w.value || (w.value = !0);
+		}
+		function X(e = !0) {
+			w.value && (w.value = !1, e && M.value?.focus());
+		}
+		async function Ke() {
+			Y(), tt(), await p(), Y(), Z("instant"), Je(0);
+		}
+		function Z(e) {
+			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			N.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,
+					behavior: t ? "smooth" : "instant"
+				});
+			});
+		}
+		function qe(e) {
+			return [...N.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		}
+		function Je(e) {
+			let t = qe(e);
+			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
+		}
+		function Ye(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 Ze(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 = {
+				ArrowDown: i + 1,
+				ArrowUp: i < 0 ? r.length - 1 : i - 1,
+				PageDown: i + 5,
+				PageUp: i < 0 ? 0 : i - 5,
+				Home: 0,
+				End: r.length - 1
+			};
+			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);
+				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();
+				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);
+		}
+		function Qe(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 (!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 et(e) {
+			let t = e.target;
+			j.value?.contains(t) || N.value?.contains(t) || X(!1);
+		}
+		function Q(e) {
+			e?.target instanceof Node && N.value?.contains(e.target) || Y();
+		}
+		function tt() {
+			document.addEventListener("pointerdown", et, !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);
+		}
+		return oe(w, (e) => e ? Ke() : $()), re(() => {
+			w.value && Ke();
+		}), ne($), d({ focus: () => M.value?.focus() }), (i, d) => (h(), s("div", f({
+			ref_key: "root",
+			ref: j
+		}, Ae.value, {
+			class: ["w-full", u.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-time-picker"
+		}), [
+			u.label ? (h(), s("label", {
+				key: 0,
+				id: D,
+				for: `${y(T)}-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", {
+				key: 1,
+				id: A,
+				class: "mb-2 text-base text-muted"
+			}, v(u.hint), 1)) : o("", !0),
+			c("div", pe, [c("button", f({
+				id: `${y(T)}-trigger`,
+				ref_key: "trigger",
+				ref: M
+			}, je.value, {
+				type: "button",
+				disabled: u.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,
+				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"]
+				]],
+				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", {
+				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: "size-4",
+				"aria-hidden": "true"
+			})], 8, ge)) : o("", !0), l(y(le), {
+				class: m(["mx-1.5 size-4", w.value && "text-heading"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])])]),
+			u.errorMsg ? (h(), s("p", {
+				key: 2,
+				id: k,
+				class: "mt-1.5 flex items-center gap-1.5 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", {
+				key: 3,
+				type: "hidden",
+				name: u.name,
+				value: C.value ?? ""
+			}, null, 8, _e)) : o("", !0),
+			(h(), a(n, { to: "body" }, [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: se(() => [w.value ? (h(), s("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: N,
+					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`
+					}),
+					"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",
+					"data-col": n
+				}, [c("span", Ce, v(e.heading), 1), c("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,
+					type: "button",
+					"data-value": t.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)]),
+				_: 1
+			})]))
+		], 16));
+	}
+});
+//#endregion
+export { S as default };

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

@@ -13,7 +13,10 @@ var O = ["aria-label"], k = {
 	role: "alert",
 	"aria-live": "assertive",
 	"aria-atomic": "true"
-}, j = ["data-tone"], M = { class: "min-w-0 flex-1 py-px" }, N = ["aria-label", "onClick"], P = 3, F = /*@__PURE__*/ d({
+}, j = ["data-tone"], M = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, N = { class: "text-base font-medium break-words text-heading" }, P = {
+	key: 0,
+	class: "text-base break-words text-muted"
+}, F = ["aria-label", "onClick"], I = 3, L = /*@__PURE__*/ d({
 	__name: "AcToaster",
 	props: {
 		position: { default: "bottom-right" },
@@ -21,141 +24,132 @@ var O = ["aria-label"], k = {
 		label: { default: "Notifications" }
 	},
 	setup(d) {
-		let F = d, I = (e) => `bg-surface bg-[image:linear-gradient(var(--color-${e}),var(--color-${e}))]`, L = {
+		let L = d, R = {
 			neutral: {
-				icon_class: "",
-				box: "border-border bg-surface",
-				title: "text-heading",
-				text: "text-muted"
+				iconClass: "",
+				box: "border-border bg-surface"
 			},
 			success: {
 				icon: w,
-				icon_class: "text-green-40",
-				box: `border-green-80 ${I("green-95")}`,
-				title: "text-green-10",
-				text: "text-green-20"
+				iconClass: "text-success",
+				box: "border-border bg-surface"
 			},
 			error: {
 				icon: C,
-				icon_class: "text-red-40",
-				box: `border-red-80 ${I("red-95")}`,
-				title: "text-red-10",
-				text: "text-red-20"
+				iconClass: "text-danger",
+				box: "border-danger/25 bg-[color-mix(in_srgb,var(--color-danger)_8%,var(--color-surface))]"
 			},
 			warning: {
 				icon: E,
-				icon_class: "text-yellow-50",
-				box: `border-yellow-70 ${I("yellow-95")}`,
-				title: "text-yellow-10",
-				text: "text-yellow-20"
+				iconClass: "text-warning",
+				box: "border-border bg-surface"
 			},
 			info: {
 				icon: T,
-				icon_class: "text-blue-50",
-				box: `border-blue-80 ${I("blue-95")}`,
-				title: "text-blue-10",
-				text: "text-blue-20"
+				iconClass: "text-info",
+				box: "border-border bg-surface"
 			}
-		}, R = {
+		}, z = {
 			"bottom-right": "bottom-3 sm:bottom-6 sm:right-6",
 			"bottom-center": "bottom-3 sm:bottom-6 sm:left-1/2 sm:-translate-x-1/2",
 			"top-right": "top-3 sm:top-6 sm:right-6",
 			"top-center": "top-3 sm:top-6 sm:left-1/2 sm:-translate-x-1/2"
-		}, { toasts: z, dismiss: B } = t(), V = g(""), H = g(""), U = /* @__PURE__ */ new Map(), W = !1, G = /* @__PURE__ */ new Set(), K = a(() => F.position.startsWith("top")), q = a(() => {
-			let e = z.value.slice(-F.max);
-			return K.value ? [...e].reverse() : e;
+		}, { toasts: B, dismiss: V } = t(), H = g(""), U = g(""), W = /* @__PURE__ */ new Map(), G = !1, K = /* @__PURE__ */ new Set(), q = a(() => L.position.startsWith("top")), J = a(() => {
+			let e = B.value.slice(-L.max);
+			return q.value ? [...e].reverse() : e;
 		});
-		function J(e) {
-			let t = U.get(e);
-			t && !W && (t.started = Date.now(), t.handle = setTimeout(() => B(e), t.remaining));
-		}
 		function Y(e) {
-			let t = U.get(e);
-			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started);
+			let t = W.get(e);
+			t && !G && (t.started = Date.now(), t.handle = setTimeout(() => V(e), t.remaining));
 		}
-		function X() {
-			W = !0, U.forEach((e, t) => Y(t));
+		function X(e) {
+			let t = W.get(e);
+			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started);
 		}
 		function Z() {
-			W = !1, U.forEach((e, t) => J(t));
+			G = !0, W.forEach((e, t) => X(t));
 		}
-		function Q(e) {
-			e.currentTarget.contains(e.relatedTarget) || Z();
+		function Q() {
+			G = !1, W.forEach((e, t) => Y(t));
 		}
 		function $(e) {
+			e.currentTarget.contains(e.relatedTarget) || Q();
+		}
+		function ee(e) {
 			let t = new Set(e.map((e) => e.id));
-			for (let [e] of U) t.has(e) || (Y(e), U.delete(e));
-			for (let t of e) U.get(t.id)?.version !== t.version && (Y(t.id), U.delete(t.id), t.duration > 0 && (U.set(t.id, {
+			for (let [e] of W) t.has(e) || (X(e), W.delete(e));
+			for (let t of e) W.get(t.id)?.version !== t.version && (X(t.id), W.delete(t.id), t.duration > 0 && (W.set(t.id, {
 				version: t.version,
 				remaining: t.duration,
 				started: 0
-			}), J(t.id)));
+			}), Y(t.id)));
 		}
-		async function ee(e) {
-			let t = e.filter((e) => !G.has(`${e.id}:${e.version}`));
-			if (G = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
+		async function te(e) {
+			let t = e.filter((e) => !K.has(`${e.id}:${e.version}`));
+			if (K = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
 			let n = (e) => /[.!?…]$/.test(e.trim()) ? e.trim() : `${e.trim()}.`, r = (e) => e.flatMap((e) => [e.title, e.description ?? ""].filter(Boolean).map(n)).join(" "), i = t.filter((e) => e.tone === "error"), a = t.filter((e) => e.tone !== "error");
-			V.value = "", H.value = "", await f(), a.length && (V.value = r(a)), i.length && (H.value = r(i));
+			H.value = "", U.value = "", await f(), a.length && (H.value = r(a)), i.length && (U.value = r(i));
 		}
-		function te(e) {
-			e.action?.onClick(), B(e.id);
+		function ne(e) {
+			e.action?.onClick(), V(e.id);
 		}
-		return x(q, (e) => {
-			$(e), ee(e);
-		}, { immediate: !0 }), m(() => U.forEach((e) => clearTimeout(e.handle))), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+		return x(J, (e) => {
+			ee(e), te(e);
+		}, { immediate: !0 }), m(() => W.forEach((e) => clearTimeout(e.handle))), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
 			"aria-label": d.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-toaster"
 		}, [
-			l("div", k, y(V.value), 1),
-			l("div", A, y(H.value), 1),
+			l("div", k, y(H.value), 1),
+			l("div", A, y(U.value), 1),
 			u(i, {
 				tag: "ol",
-				class: p(["pointer-events-none fixed inset-x-3 z-[100] flex flex-col gap-2 sm:inset-x-auto sm:w-89", R[d.position]]),
+				class: p(["pointer-events-none fixed inset-x-3 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-89", z[d.position]]),
 				"enter-active-class": "transition duration-200 ease-out",
-				"enter-from-class": `opacity-0 ${K.value ? "motion-safe:-translate-y-2" : "motion-safe:translate-y-2"}`,
+				"enter-from-class": `opacity-0 ${q.value ? "motion-safe:-translate-y-2" : "motion-safe:translate-y-2"}`,
 				"leave-active-class": "transition duration-150 ease-in",
 				"leave-to-class": "opacity-0 motion-safe:scale-95",
 				"move-class": "motion-safe:transition-transform motion-safe:duration-200",
-				onPointerenter: X,
-				onPointerleave: Z,
-				onFocusin: X,
-				onFocusout: Q
+				onPointerenter: Z,
+				onPointerleave: Q,
+				onFocusin: Z,
+				onFocusout: $
 			}, {
-				default: S(() => [(h(!0), c(n, null, _(q.value, (t, n) => (h(), c("li", {
+				default: S(() => [(h(!0), c(n, null, _(J.value, (t, n) => (h(), c("li", {
 					key: t.id,
-					class: p(["pointer-events-auto flex items-start gap-3 rounded-10 border py-3 pr-2.5 pl-3.5 shadow-lg", [L[t.tone].box, (K.value ? n : q.value.length - 1 - n) >= P && "max-sm:hidden"]]),
+					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-lg", [
+						R[t.tone].box,
+						t.dismissible ? "pr-10" : "pr-4",
+						(q.value ? n : J.value.length - 1 - n) >= I && "max-sm:hidden"
+					]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-toast",
 					"data-tone": t.tone
 				}, [
-					L[t.tone].icon ? (h(), o(v(L[t.tone].icon), {
+					R[t.tone].icon ? (h(), o(v(R[t.tone].icon), {
 						key: 0,
-						class: p(["mt-0.5 size-4 shrink-0", L[t.tone].icon_class]),
+						class: p(["mt-px size-5 shrink-0", R[t.tone].iconClass]),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
-					l("div", M, [l("p", { class: p(["text-base font-medium", L[t.tone].title]) }, y(t.title), 3), t.description ? (h(), c("p", {
-						key: 0,
-						class: p(["mt-0.5 text-base", L[t.tone].text])
-					}, y(t.description), 3)) : s("", !0)]),
+					l("div", M, [l("p", N, y(t.title), 1), t.description ? (h(), c("p", P, y(t.description), 1)) : s("", !0)]),
 					t.action ? (h(), o(e, {
 						key: 1,
 						title: t.action.label,
 						size: "small",
 						color: "white",
-						class: "shrink-0",
-						onClick: (e) => te(t)
+						class: "-my-1 shrink-0",
+						onClick: (e) => ne(t)
 					}, null, 8, ["title", "onClick"])) : s("", !0),
 					t.dismissible ? (h(), c("button", {
 						key: 2,
 						type: "button",
-						class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-70 transition hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 						"aria-label": `Dismiss: ${t.title}`,
-						onClick: (e) => b(B)(t.id)
+						onClick: (e) => b(V)(t.id)
 					}, [u(b(D), {
 						class: "size-3.5",
 						"aria-hidden": "true"
-					})], 8, N)) : s("", !0)
+					})], 8, F)) : s("", !0)
 				], 10, j))), 128))]),
 				_: 1
 			}, 8, ["class", "enter-from-class"])
@@ -163,4 +157,4 @@ var O = ["aria-label"], k = {
 	}
 });
 //#endregion
-export { F as default };
+export { L as default };