@ac-design/design-system 2.7.0 → 2.9.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

@@ -314,6 +314,8 @@
   --radius-14: calc(14px * var(--ac-scale));
   --radius-16: calc(16px * var(--ac-scale));
   --radius-50: calc(50px * var(--ac-scale));
+  /* a band inside a 14px card (a header, footer or steps strip): the card's corner less its 1px border */
+  --radius-14-inner: calc(var(--radius-14) - 1px);
 
   /* elevation: cloud-ui's neutral scale. Cards rest on a border, not a shadow. */
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -598,6 +600,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;
@@ -633,6 +646,29 @@
   &.ac-scrollbar::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
 }
 
+/* Composite classes: one name for a set of utilities the components and apps keep repeating. They work with
+   variants like any utility (`hover:ac-transition-colors`, `max-sm:…`). */
+
+/* A small uppercase label over a group: menu sections, panel headings, sidebar groups (11px, 600, 0.08em). */
+@utility ac-overline {
+  @apply text-sm font-semibold tracking-[0.08em] text-muted uppercase;
+}
+
+/* Hover and selection colour changes at the standard 200ms, and none when the user asks for less motion. */
+@utility ac-transition-colors {
+  @apply transition-colors duration-200 motion-reduce:transition-none;
+}
+
+/* Turning and sliding (a chevron opening, an arrow nudging) at 200ms, and none with reduced motion. */
+@utility ac-transition-transform {
+  @apply transition-transform duration-200 motion-reduce:transition-none;
+}
+
+/* Keyboard focus drawn inside the element: full-width rows and headers, where an outer ring would be clipped. */
+@utility ac-focus-inset {
+  @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none;
+}
+
 /* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
 @keyframes ac-skeleton-shimmer {
   from { background-position: 150% 0; }

package/package.json

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