@ac-design/design-system 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,99 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f } from "vue";
+import { X as p } from "@lucide/vue";
+//#region src/lib/components/AcTag.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	class: "inline-flex shrink-0 [&_svg]:size-3.5",
+	"aria-hidden": "true"
+}, h = { class: "truncate" }, g = { class: "truncate" }, _ = {
+	key: 0,
+	class: "inline-flex shrink-0 [&_svg]:size-3.5",
+	"aria-hidden": "true"
+}, v = { class: "truncate" }, y = ["aria-label"], b = /*@__PURE__*/ s({
+	__name: "AcTag",
+	props: {
+		label: { default: "" },
+		color: { default: "neutral" },
+		rounded: {
+			type: Boolean,
+			default: !1
+		},
+		removable: {
+			type: Boolean,
+			default: !1
+		},
+		keyLabel: { default: "" },
+		valueLabel: { default: "" }
+	},
+	emits: ["remove"],
+	setup(s, { emit: b }) {
+		let x = s, S = b, C = {
+			neutral: {
+				box: "bg-surface text-body border-border",
+				value: "bg-surface text-heading",
+				divider: "border-border"
+			},
+			primary: {
+				box: "bg-primary-97 text-primary-20 border-primary-80",
+				value: "bg-primary-95 text-primary-10",
+				divider: "border-primary-80"
+			},
+			info: {
+				box: "bg-blue-97 text-blue-20 border-blue-80",
+				value: "bg-blue-95 text-blue-10",
+				divider: "border-blue-80"
+			},
+			success: {
+				box: "bg-green-97 text-green-20 border-green-80",
+				value: "bg-green-95 text-green-10",
+				divider: "border-green-80"
+			},
+			warning: {
+				box: "bg-yellow-97 text-yellow-20 border-yellow-80",
+				value: "bg-yellow-95 text-yellow-10",
+				divider: "border-yellow-80"
+			},
+			danger: {
+				box: "bg-red-97 text-red-20 border-red-80",
+				value: "bg-red-95 text-red-10",
+				divider: "border-red-80"
+			}
+		}, w = t(() => !!x.keyLabel), T = t(() => C[x.color]), E = t(() => w.value ? `${x.keyLabel}=${x.valueLabel}` : x.label), D = t(() => w.value ? ["bg-surface text-label", x.color === "neutral" ? "border-border" : T.value.divider] : T.value.box);
+		function O() {
+			S("remove");
+		}
+		return (t, b) => (l(), r("span", {
+			class: c(["inline-flex h-6 max-w-full items-stretch overflow-hidden border text-xs leading-none whitespace-nowrap", [
+				D.value,
+				s.rounded ? "rounded-50" : "rounded-6",
+				w.value && "font-mono text-[length:calc(11.5px*var(--ac-scale))]"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-tag"
+		}, [w.value ? (l(), r(e, { key: 0 }, [
+			i("span", { class: c(["inline-flex min-w-0 items-center gap-1.5 bg-surface-muted pr-1.5 text-label", s.rounded ? "pl-2.5" : "pl-2"]) }, [t.$slots.icon ? (l(), r("span", m, [u(t.$slots, "icon")])) : n("", !0), i("span", h, d(s.keyLabel), 1)], 2),
+			b[0] ||= i("span", { class: "sr-only" }, "=", -1),
+			i("span", { class: c(["inline-flex min-w-0 shrink-[0.25] items-center border-l pl-1.5", [
+				T.value.value,
+				T.value.divider,
+				!s.removable && (s.rounded ? "pr-2.5" : "pr-2")
+			]]) }, [i("span", g, [u(t.$slots, "default", {}, () => [a(d(s.valueLabel), 1)])])], 2)
+		], 64)) : (l(), r("span", {
+			key: 1,
+			class: c(["inline-flex min-w-0 items-center gap-1.5", [s.rounded ? "pl-2.5" : "pl-2", !s.removable && (s.rounded ? "pr-2.5" : "pr-2")]])
+		}, [t.$slots.icon ? (l(), r("span", _, [u(t.$slots, "icon")])) : n("", !0), i("span", v, [u(t.$slots, "default", {}, () => [a(d(s.label), 1)])])], 2)), s.removable ? (l(), r("span", {
+			key: 2,
+			class: c(["inline-flex shrink-0 items-center px-0.5", w.value && T.value.value])
+		}, [i("button", {
+			type: "button",
+			class: c(["inline-flex size-4.5 cursor-pointer items-center justify-center opacity-60 transition hover:bg-current/10 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", s.rounded ? "rounded-full" : "rounded-4"]),
+			"aria-label": E.value ? `Remove ${E.value}` : "Remove",
+			onClick: O
+		}, [o(f(p), {
+			class: "size-3",
+			"aria-hidden": "true"
+		})], 10, y)], 2)) : n("", !0)], 2));
+	}
+});
+//#endregion
+export { b as default };

package/dist/lib/components/AcTextarea.js

@@ -0,0 +1,5 @@
+import e from "./AcTextarea.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcTextarea.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,53 @@
+export interface Props {
+    /** Floating label. It rests on the first line and rises on focus or when filled. */
+    label: string;
+    /** Native `name` attribute. */
+    name?: string;
+    /** Visible height in lines. With `autoResize` it's the starting (minimum) height. */
+    rows?: number;
+    /** Grows the field with its content instead of showing a scrollbar. */
+    autoResize?: boolean;
+    /** With `autoResize`, the height in lines after which the field scrolls. `0` means no limit. */
+    maxRows?: number;
+    /** Maximum number of characters. Shows a live `12 / 500` count under the field. */
+    maxlength?: number;
+    /** Monospace text, for certificates, keys, YAML and other pasted config. */
+    mono?: boolean;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Read-only field with a gray background. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Helper text under the field (hidden while `errorMsg` is set). */
+    hint?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the textarea. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    rows: number;
+    hint: string;
+    readonly: boolean;
+    errorMsg: string;
+    mono: boolean;
+    maxlength: number;
+    autoResize: boolean;
+    maxRows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,120 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, onMounted as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useId as h, useModel as g, vModelText as _, watch as v, withDirectives as y } from "vue";
+import { CircleAlert as b } from "@lucide/vue";
+//#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "relative" }, S = [
+	"id",
+	"name",
+	"rows",
+	"maxlength",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], C = ["for"], w = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, T = {
+	key: 0,
+	class: "mt-1.5 flex items-start gap-3"
+}, E = ["id"], D = ["id"], O = {
+	key: 2,
+	class: "flex-1"
+}, k = ["id"], A = /*@__PURE__*/ o({
+	__name: "AcTextarea",
+	props: /*@__PURE__*/ s({
+		label: {},
+		name: { default: "" },
+		rows: { default: 4 },
+		autoResize: {
+			type: Boolean,
+			default: !1
+		},
+		maxRows: { default: 0 },
+		maxlength: { default: void 0 },
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o, { expose: s }) {
+		let A = o, j = g(o, "modelValue"), M = h(), N = f(null), P = f(!1), F = e(() => (j.value ?? "").length), I = e(() => A.maxlength !== void 0 && F.value >= A.maxlength), L = e(() => [A.errorMsg || A.hint ? `${M}-msg` : "", A.maxlength === void 0 ? "" : `${M}-count`].filter(Boolean).join(" ") || void 0);
+		function R() {
+			let e = N.value;
+			if (!e || !A.autoResize) return;
+			let t = getComputedStyle(e), n = parseFloat(t.lineHeight) || 20, r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom) + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i = A.rows * n + r, a = A.maxRows > 0 ? A.maxRows * n + r : Infinity;
+			e.style.height = "auto";
+			let o = e.scrollHeight + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth);
+			e.style.height = `${Math.min(Math.max(o, i), a)}px`, P.value = o > a;
+		}
+		return v(j, () => c(R)), v(() => [
+			A.autoResize,
+			A.rows,
+			A.maxRows
+		], () => {
+			!A.autoResize && N.value && (N.value.style.height = ""), c(R);
+		}), u(R), s({ focus: () => N.value?.focus() }), (e, s) => (d(), n("div", {
+			class: l(["w-full", o.disabled && "opacity-60"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-textarea"
+		}, [r("div", x, [y(r("textarea", {
+			id: m(M),
+			ref_key: "field",
+			ref: N,
+			"onUpdate:modelValue": s[0] ||= (e) => j.value = e,
+			name: o.name,
+			rows: o.rows,
+			maxlength: o.maxlength,
+			disabled: o.disabled,
+			readonly: o.readonly,
+			required: o.required,
+			"aria-invalid": !!o.errorMsg || void 0,
+			"aria-describedby": L.value,
+			placeholder: " ",
+			class: l(["peer block w-full rounded-6 border bg-surface px-3 py-2 text-base text-heading shadow-xs transition-[border-color,box-shadow] duration-150 outline-none placeholder:text-transparent disabled:cursor-not-allowed disabled:bg-surface-muted read-only:bg-surface-muted read-only:shadow-none", [
+				o.mono && "font-mono text-xs leading-5",
+				o.autoResize ? P.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
+				o.errorMsg ? "border-red-60 focus:border-danger focus:shadow-[0_0_0_3px_var(--color-red-90)]" : "border-border hover:border-border-dark focus:focus-ring"
+			]])
+		}, null, 10, S), [[_, j.value]]), r("label", {
+			for: m(M),
+			class: l(["pointer-events-none absolute top-0 left-2.5 -translate-y-1/2 rounded-2 bg-surface px-1 text-xs font-medium text-label transition-all duration-150 ease-out peer-placeholder-shown:top-4.5 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-muted peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium peer-focus:text-primary-20 peer-read-only:bg-linear-to-b peer-read-only:from-surface peer-read-only:from-50% peer-read-only:to-surface-muted peer-read-only:to-50% peer-disabled:bg-linear-to-b peer-disabled:from-surface peer-disabled:from-50% peer-disabled:to-surface-muted peer-disabled:to-50%", o.errorMsg && "text-red-30! peer-focus:text-red-30!"])
+		}, [i(p(o.label), 1), o.required ? (d(), n("span", w, " *")) : t("", !0)], 10, C)]), o.errorMsg || o.hint || o.maxlength !== void 0 ? (d(), n("div", T, [o.errorMsg ? (d(), n("p", {
+			key: 0,
+			id: `${m(M)}-msg`,
+			class: "flex min-w-0 flex-1 items-center gap-1 text-xs text-red-30"
+		}, [a(m(b), {
+			class: "size-3.5 shrink-0",
+			"aria-hidden": "true"
+		}), i(" " + p(o.errorMsg), 1)], 8, E)) : o.hint ? (d(), n("p", {
+			key: 1,
+			id: `${m(M)}-msg`,
+			class: "min-w-0 flex-1 text-xs text-muted"
+		}, p(o.hint), 9, D)) : (d(), n("span", O)), o.maxlength === void 0 ? t("", !0) : (d(), n("p", {
+			key: 3,
+			id: `${m(M)}-count`,
+			class: l(["shrink-0 text-xs tabular-nums", I.value ? "font-medium text-red-30" : "text-muted"])
+		}, [s[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(p(F.value) + " / " + p(o.maxlength), 1)], 10, k))])) : t("", !0)], 2));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcThemeMode.js

@@ -0,0 +1,5 @@
+import e from "./AcThemeMode.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcThemeMode.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,17 @@
+import type { ColorMode } from "../composables/useColorMode";
+export interface Props {
+    /** Used until the viewer picks a mode. */
+    defaultMode?: ColorMode;
+    /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages. */
+    display?: "icons" | "labels";
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "set:theme": (theme: "light" | "dark") => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
+}>, {
+    display: "icons" | "labels";
+    defaultMode: ColorMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+import { useColorMode as e } from "../composables/useColorMode.js";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
+import { Monitor as p, Moon as m, Sun as h } from "@lucide/vue";
+//#region src/lib/components/AcThemeMode.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	role: "radiogroup",
+	"aria-label": "Theme",
+	class: "inline-flex items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5",
+	"data-ac-ds": "",
+	"data-testid": "ac-theme-mode"
+}, _ = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"onClick"
+], v = { key: 0 }, y = /*@__PURE__*/ o({
+	__name: "AcThemeMode",
+	props: {
+		defaultMode: { default: "light" },
+		display: { default: "icons" }
+	},
+	emits: ["set:theme"],
+	setup(o, { emit: y }) {
+		let b = o, x = y, S = [
+			{
+				value: "light",
+				label: "Light",
+				icon: h
+			},
+			{
+				value: "dark",
+				label: "Dark",
+				icon: m
+			},
+			{
+				value: "system",
+				label: "System",
+				icon: p
+			}
+		], { mode: C, isDark: w, setMode: T } = e({ defaultMode: b.defaultMode });
+		function E(e) {
+			T(e), x("set:theme", w.value ? "dark" : "light");
+		}
+		return (e, p) => (c(), i("div", g, [(c(), i(t, null, l(S, (e) => a("button", {
+			key: e.value,
+			type: "button",
+			role: "radio",
+			"aria-checked": f(C) === e.value,
+			"aria-label": o.display === "icons" ? `${e.label} theme` : void 0,
+			title: o.display === "icons" ? `${e.label} theme` : void 0,
+			class: s(["inline-flex h-6.5 cursor-pointer items-center justify-center gap-1.5 rounded-6 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [o.display === "icons" ? "w-7" : "px-2.5", f(C) === e.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted hover:text-heading"]]),
+			onClick: (t) => E(e.value)
+		}, [(c(), n(u(e.icon), {
+			class: "size-3.5",
+			"aria-hidden": "true"
+		})), o.display === "labels" ? (c(), i("span", v, d(e.label), 1)) : r("", !0)], 10, _)), 64))]));
+	}
+});
+//#endregion
+export { y as default };

package/dist/lib/components/AcToaster.js

@@ -0,0 +1,5 @@
+import e from "./AcToaster.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcToaster.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,15 @@
+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";
+    /** 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;
+    /** 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;
+    max: number;
+    position: "bottom-right" | "bottom-center" | "top-right" | "top-center";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,166 @@
+import e from "./AcButton.js";
+import { useToast as t } from "../composables/useToast.js";
+import { Fragment as n, Teleport as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { CircleAlert as C, CircleCheck as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
+//#region src/lib/components/AcToaster.vue?vue&type=script&setup=true&lang.ts
+var O = ["aria-label"], k = {
+	class: "sr-only",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, A = {
+	class: "sr-only",
+	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({
+	__name: "AcToaster",
+	props: {
+		position: { default: "bottom-right" },
+		max: { default: 5 },
+		label: { default: "Notifications" }
+	},
+	setup(d) {
+		let F = d, I = (e) => `bg-surface bg-[image:linear-gradient(var(--color-${e}),var(--color-${e}))]`, L = {
+			neutral: {
+				icon_class: "",
+				box: "border-border bg-surface",
+				title: "text-heading",
+				text: "text-muted"
+			},
+			success: {
+				icon: w,
+				icon_class: "text-green-40",
+				box: `border-green-80 ${I("green-95")}`,
+				title: "text-green-10",
+				text: "text-green-20"
+			},
+			error: {
+				icon: C,
+				icon_class: "text-red-40",
+				box: `border-red-80 ${I("red-95")}`,
+				title: "text-red-10",
+				text: "text-red-20"
+			},
+			warning: {
+				icon: E,
+				icon_class: "text-yellow-50",
+				box: `border-yellow-70 ${I("yellow-95")}`,
+				title: "text-yellow-10",
+				text: "text-yellow-20"
+			},
+			info: {
+				icon: T,
+				icon_class: "text-blue-50",
+				box: `border-blue-80 ${I("blue-95")}`,
+				title: "text-blue-10",
+				text: "text-blue-20"
+			}
+		}, R = {
+			"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;
+		});
+		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);
+		}
+		function X() {
+			W = !0, U.forEach((e, t) => Y(t));
+		}
+		function Z() {
+			W = !1, U.forEach((e, t) => J(t));
+		}
+		function Q(e) {
+			e.currentTarget.contains(e.relatedTarget) || Z();
+		}
+		function $(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, {
+				version: t.version,
+				remaining: t.duration,
+				started: 0
+			}), J(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;
+			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));
+		}
+		function te(e) {
+			e.action?.onClick(), B(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", {
+			"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),
+			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]]),
+				"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"}`,
+				"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
+			}, {
+				default: S(() => [(h(!0), c(n, null, _(q.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"]]),
+					"data-ac-ds": "",
+					"data-testid": "ac-toast",
+					"data-tone": t.tone
+				}, [
+					L[t.tone].icon ? (h(), o(v(L[t.tone].icon), {
+						key: 0,
+						class: p(["mt-0.5 size-4 shrink-0", L[t.tone].icon_class]),
+						"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)]),
+					t.action ? (h(), o(e, {
+						key: 1,
+						title: t.action.label,
+						size: "small",
+						color: "white",
+						class: "shrink-0",
+						onClick: (e) => te(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",
+						"aria-label": `Dismiss: ${t.title}`,
+						onClick: (e) => b(B)(t.id)
+					}, [u(b(D), {
+						class: "size-3.5",
+						"aria-hidden": "true"
+					})], 8, N)) : s("", !0)
+				], 10, j))), 128))]),
+				_: 1
+			}, 8, ["class", "enter-from-class"])
+		], 8, O)]));
+	}
+});
+//#endregion
+export { F as default };

package/dist/lib/components/AcTooltip.js

@@ -0,0 +1,5 @@
+import e from "./AcTooltip.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcTooltip.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,30 @@
+export interface Props {
+    /** The hint text. Keep it to a few words; use the `content` slot for richer text. */
+    content?: string;
+    /** Preferred side of the trigger. It flips to the opposite side when there isn't room. */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Milliseconds to wait on hover before showing. Keyboard focus shows it immediately. */
+    delay?: number;
+    /** Turns the tooltip off, e.g. while a menu from the same button is open. */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** The trigger: a button, icon button, link or any focusable element. It gets `aria-describedby`. */
+    default?: () => unknown;
+    /** Tooltip content instead of the `content` prop. Text only; no links or buttons, since it can't be reached by Tab. */
+    content?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    content: string;
+    placement: "top" | "bottom" | "left" | "right";
+    delay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};