@ac-design/design-system 2.7.0 → 2.8.0

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

@@ -42,6 +42,16 @@ var le = ["for"], ue = { key: 0 }, de = {
 	__name: "AcTimePicker",
 	props: /*@__PURE__*/ d({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		placeholder: { default: "Choose time" },
 		hourCycle: { default: 24 },
 		minuteStep: { default: 1 },
@@ -391,13 +401,13 @@ var le = ["for"], ue = { key: 0 }, de = {
 				key: 0,
 				id: k,
 				for: u.inline ? void 0 : `${b(E)}-trigger`,
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: m(["mb-2 flex items-center gap-1 text-base font-medium text-heading", u.labelClass])
 			}, [
 				v(e.$slots, "label-icon"),
 				u.label ? (h(), s("span", ue, y(u.label), 1)) : o("", !0),
 				v(e.$slots, "label-extra"),
 				u.required ? (h(), s("span", de, "*")) : o("", !0)
-			], 8, le)) : o("", !0),
+			], 10, le)) : o("", !0),
 			u.hint ? (h(), s("p", {
 				key: 1,
 				id: M,

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

@@ -1,6 +1,8 @@
 export interface Props {
     /** 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";
+    /** Distance from the top (or bottom) edge, e.g. `"136px"` to clear a page header's buttons. Defaults to 80px at the top and 20px at the bottom; the `--ac-toaster-offset` CSS variable sets it app-wide. */
+    offset?: string;
     /** 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. */
@@ -12,6 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     label: string;
     progress: boolean;
     max: number;
+    offset: string;
     position: "top-right" | "top-center" | "bottom-right" | "bottom-center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,6 @@
 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 { 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, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S, withCtx as ee } from "vue";
 import { CircleCheck as C, CircleX 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 = {
@@ -8,7 +8,7 @@ var O = ["aria-label"], k = {
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, ee = {
+}, A = {
 	class: "sr-only",
 	role: "alert",
 	"aria-live": "assertive",
@@ -16,10 +16,11 @@ var O = ["aria-label"], k = {
 }, te = ["data-tone"], ne = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, re = { class: "text-base leading-[1.35] font-semibold break-words text-heading" }, ie = {
 	key: 0,
 	class: "text-[13px] leading-[1.45] break-words text-muted"
-}, ae = ["aria-label", "onClick"], A = ["data-toast-bar"], j = 3, M = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", N = /*@__PURE__*/ d({
+}, j = ["aria-label", "onClick"], M = ["data-toast-bar"], N = 3, P = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", F = /*@__PURE__*/ d({
 	__name: "AcToaster",
 	props: {
 		position: { default: "top-right" },
+		offset: { default: "" },
 		max: { default: 5 },
 		progress: {
 			type: Boolean,
@@ -28,7 +29,7 @@ var O = ["aria-label"], k = {
 		label: { default: "Notifications" }
 	},
 	setup(d) {
-		let N = d, P = {
+		let F = d, I = {
 			neutral: {
 				iconClass: "",
 				box: "border-border bg-surface",
@@ -58,137 +59,139 @@ var O = ["aria-label"], k = {
 				box: "border-border bg-surface",
 				bar: "bg-info"
 			}
-		}, F = {
-			"top-right": "top-20 sm:right-5",
-			"top-center": "top-20 sm:left-1/2 sm:-translate-x-1/2",
-			"bottom-right": "bottom-5 sm:right-5",
-			"bottom-center": "bottom-5 sm:left-1/2 sm:-translate-x-1/2"
-		}, { toasts: I, dismiss: L } = t(), R = g(null), z = g(""), B = g(""), V = /* @__PURE__ */ new Map(), H = !1, U = /* @__PURE__ */ new Set(), W = a(() => N.position.startsWith("top")), G = a(() => I.value.slice(-N.max)), K = a(() => N.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : W.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
-		function q(e) {
-			return e.duration > 0 && (e.progress ?? N.progress);
-		}
-		function J(e) {
-			let t = V.get(e);
-			t && !H && (t.started = Date.now(), t.handle = setTimeout(() => L(e), t.remaining), oe(e));
+		}, L = {
+			"top-right": "top-[var(--ac-toaster-offset,80px)] sm:right-5",
+			"top-center": "top-[var(--ac-toaster-offset,80px)] sm:left-1/2 sm:-translate-x-1/2",
+			"bottom-right": "bottom-[var(--ac-toaster-offset,20px)] sm:right-5",
+			"bottom-center": "bottom-[var(--ac-toaster-offset,20px)] sm:left-1/2 sm:-translate-x-1/2"
+		}, { toasts: R, dismiss: z } = t(), B = _(null), V = _(""), H = _(""), U = /* @__PURE__ */ new Map(), W = !1, G = /* @__PURE__ */ new Set(), K = a(() => F.position.startsWith("top")), q = a(() => R.value.slice(-F.max)), J = a(() => F.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : K.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
+		function ae(e) {
+			return e.duration > 0 && (e.progress ?? F.progress);
 		}
 		function Y(e) {
-			let t = V.get(e);
+			let t = U.get(e);
+			t && !W && (t.started = Date.now(), t.handle = setTimeout(() => z(e), t.remaining), oe(e));
+		}
+		function X(e) {
+			let t = U.get(e);
 			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started, t.bar?.pause());
 		}
 		async function oe(e) {
 			await f();
-			let t = V.get(e);
+			let t = U.get(e);
 			if (t?.handle) {
 				if (t.bar) return t.bar.play();
-				t.bar = (R.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+				t.bar = (B.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
 					duration: t.duration,
 					fill: "forwards"
 				});
 			}
 		}
-		function X(e, t = !1) {
-			Y(e), t && V.get(e)?.bar?.cancel(), V.delete(e);
-		}
-		function Z() {
-			H = !0, V.forEach((e, t) => Y(t));
+		function Z(e, t = !1) {
+			X(e), t && U.get(e)?.bar?.cancel(), U.delete(e);
 		}
 		function Q() {
-			H = !1, V.forEach((e, t) => J(t));
+			W = !0, U.forEach((e, t) => X(t));
 		}
-		function $(e) {
-			e.currentTarget.contains(e.relatedTarget) || Q();
+		function $() {
+			W = !1, U.forEach((e, t) => Y(t));
 		}
 		function se(e) {
+			e.currentTarget.contains(e.relatedTarget) || $();
+		}
+		function ce(e) {
 			let t = new Set(e.map((e) => e.id));
-			for (let [e] of V) t.has(e) || X(e);
-			for (let t of e) V.get(t.id)?.version !== t.version && (X(t.id, !0), t.duration > 0 && (V.set(t.id, {
+			for (let [e] of U) t.has(e) || Z(e);
+			for (let t of e) U.get(t.id)?.version !== t.version && (Z(t.id, !0), t.duration > 0 && (U.set(t.id, {
 				version: t.version,
 				duration: t.duration,
 				remaining: t.duration,
 				started: 0
-			}), J(t.id)));
+			}), Y(t.id)));
 		}
-		async function ce(e) {
-			let t = e.filter((e) => !U.has(`${e.id}:${e.version}`));
-			if (U = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
+		async function le(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");
-			z.value = "", B.value = "", await f(), a.length && (z.value = r(a)), i.length && (B.value = r(i));
+			V.value = "", H.value = "", await f(), a.length && (V.value = r(a)), i.length && (H.value = r(i));
 		}
-		function le(e) {
-			e.action?.onClick(), L(e.id);
+		function ue(e) {
+			e.action?.onClick(), z(e.id);
 		}
-		return x(G, (e) => {
-			se(e), ce(e);
-		}, { immediate: !0 }), m(() => V.forEach((e) => {
+		return S(q, (e) => {
+			ce(e), le(e);
+		}, { immediate: !0 }), h(() => U.forEach((e) => {
 			clearTimeout(e.handle), e.bar?.cancel();
-		})), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+		})), (t, a) => (g(), o(r, { to: "body" }, [l("section", {
 			ref_key: "root",
-			ref: R,
+			ref: B,
 			"aria-label": d.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-toaster"
 		}, [
-			l("div", k, y(z.value), 1),
-			l("div", ee, y(B.value), 1),
+			l("div", k, b(V.value), 1),
+			l("div", A, b(H.value), 1),
 			u(i, {
 				tag: "ol",
-				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", F[d.position]]),
-				"enter-active-class": M,
-				"enter-from-class": K.value,
-				"leave-active-class": M,
-				"leave-to-class": K.value,
+				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", L[d.position]]),
+				style: m(d.offset ? { "--ac-toaster-offset": d.offset } : void 0),
+				"enter-active-class": P,
+				"enter-from-class": J.value,
+				"leave-active-class": P,
+				"leave-to-class": J.value,
 				"move-class": "motion-safe:transition-transform motion-safe:duration-200",
-				onPointerenter: Z,
-				onPointerleave: Q,
-				onFocusin: Z,
-				onFocusout: $
+				onPointerenter: Q,
+				onPointerleave: $,
+				onFocusin: Q,
+				onFocusout: se
 			}, {
-				default: S(() => [(h(!0), c(n, null, _(G.value, (t, n) => (h(), c("li", {
+				default: ee(() => [(g(!0), c(n, null, v(q.value, (t, n) => (g(), c("li", {
 					key: t.id,
 					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-md", [
-						P[t.tone].box,
+						I[t.tone].box,
 						t.dismissible ? "pr-10" : "pr-4",
-						G.value.length - 1 - n >= j && "max-sm:hidden"
+						q.value.length - 1 - n >= N && "max-sm:hidden"
 					]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-toast",
 					"data-tone": t.tone
 				}, [
-					P[t.tone].icon ? (h(), o(v(P[t.tone].icon), {
+					I[t.tone].icon ? (g(), o(y(I[t.tone].icon), {
 						key: 0,
-						class: p(["mt-px size-5 shrink-0", P[t.tone].iconClass]),
+						class: p(["mt-px size-5 shrink-0", I[t.tone].iconClass]),
 						"stroke-width": 2.25,
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
-					l("div", ne, [l("p", re, y(t.title), 1), t.description ? (h(), c("p", ie, y(t.description), 1)) : s("", !0)]),
-					t.action ? (h(), o(e, {
+					l("div", ne, [l("p", re, b(t.title), 1), t.description ? (g(), c("p", ie, b(t.description), 1)) : s("", !0)]),
+					t.action ? (g(), o(e, {
 						key: 1,
 						title: t.action.label,
 						size: "small",
 						color: "white",
 						class: "-my-1 shrink-0",
-						onClick: (e) => le(t)
+						onClick: (e) => ue(t)
 					}, null, 8, ["title", "onClick"])) : s("", !0),
-					t.dismissible ? (h(), c("button", {
+					t.dismissible ? (g(), c("button", {
 						key: 2,
 						type: "button",
 						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-6 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(L)(t.id)
-					}, [u(b(D), {
+						onClick: (e) => x(z)(t.id)
+					}, [u(x(D), {
 						class: "size-3.5",
 						"aria-hidden": "true"
-					})], 8, ae)) : s("", !0),
-					q(t) ? (h(), c("span", {
+					})], 8, j)) : s("", !0),
+					ae(t) ? (g(), c("span", {
 						key: 3,
 						"data-toast-bar": t.id,
-						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", P[t.tone].bar]),
+						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", I[t.tone].bar]),
 						"aria-hidden": "true"
-					}, null, 10, A)) : s("", !0)
+					}, null, 10, M)) : s("", !0)
 				], 10, te))), 128))]),
 				_: 1
 			}, 8, [
 				"class",
+				"style",
 				"enter-from-class",
 				"leave-to-class"
 			])
@@ -196,4 +199,4 @@ var O = ["aria-label"], k = {
 	}
 });
 //#endregion
-export { N as default };
+export { F as default };

package/dist/lib/theme.css

@@ -598,6 +598,17 @@
   color: var(--color-heading);
 }
 
+/* Author HTML (v-html notes, descriptions, labels): links in primary, medium and underlined, so they never rely on colour alone. */
+@utility ac-rich-text {
+  & a {
+    font-weight: 500;
+    color: var(--color-primary);
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-primary);
+    text-underline-offset: 2px;
+  }
+}
+
 /* The standard focus treatment for form controls: a solid primary border plus a 2px primary/20 halo. */
 @utility focus-ring {
   outline: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",