@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -17,13 +17,13 @@ import { EditorView as S, drawSelection as He, dropCursor as Ue, highlightActive
 //#region src/lib/components/AcCodeEditor.vue?vue&type=script&setup=true&lang.ts
 var qe = {
 	key: 0,
-	class: "flex min-h-11 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border-light px-3 py-2"
+	class: "flex min-h-12 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-surface-muted px-4 py-2"
 }, Je = {
 	key: 0,
 	class: "min-w-0 truncate font-mono text-xs font-medium text-heading"
 }, Ye = {
 	key: 1,
-	class: "rounded-4 bg-surface-sunken px-1.5 text-sm leading-5 font-medium text-muted"
+	class: "rounded-6 border border-border bg-surface px-1.5 text-xs leading-5 font-medium text-muted"
 }, Xe = {
 	key: 2,
 	class: "text-xs text-muted"
@@ -305,7 +305,7 @@ var qe = {
 			focus: St,
 			editor: P
 		}), (t, r) => (m(), l("div", {
-			class: p(["flex min-w-0 flex-col overflow-hidden bg-surface", d.bordered && "rounded-10 border border-border shadow-xs transition-[border-color,box-shadow] has-[.cm-editor.cm-focused]:focus-ring"]),
+			class: p(["flex min-w-0 flex-col overflow-hidden bg-background", d.bordered && "rounded-10 border border-border transition-[border-color,box-shadow] duration-200 has-[.cm-editor.cm-focused]:focus-ring"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-code-editor"
 		}, [
@@ -329,16 +329,16 @@ var qe = {
 					}, {
 						default: pe(() => [u("button", {
 							type: "button",
-							class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+							class: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 							"aria-label": R.value ? "Copied" : "Copy to clipboard",
 							onClick: wt
 						}, [R.value ? (m(), s(_(he), {
 							key: 0,
-							class: "size-3.5 text-success",
+							class: "size-4 text-success-strong",
 							"aria-hidden": "true"
 						})) : (m(), s(_(_e), {
 							key: 1,
-							class: "size-3.5",
+							class: "size-4",
 							"aria-hidden": "true"
 						}))], 8, Qe)]),
 						_: 1
@@ -361,14 +361,14 @@ var qe = {
 			I.value.length && !V.value ? (m(), l("div", {
 				key: 2,
 				id: _(ut),
-				class: "border-t border-border-light bg-surface-muted"
+				class: "border-t border-border bg-surface-muted"
 			}, [u("p", et, g(I.value.length) + " " + g(I.value.length === 1 ? "problem" : "problems"), 1), u("ul", tt, [(m(!0), l(ee, null, ae(I.value, (e, t) => (m(), l("li", { key: t }, [u("button", {
 				type: "button",
-				class: "flex w-full cursor-pointer items-start gap-2 px-3 py-1 text-left text-xs leading-5 text-body hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:outline-none",
+				class: "flex w-full cursor-pointer items-start gap-2 px-4 py-1 text-left text-xs leading-5 text-body transition-colors duration-200 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
 				onClick: (t) => Ct(e)
 			}, [
 				(m(), s(se(e.severity === "error" ? _(ge) : _(ve)), {
-					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-red-50" : "text-yellow-50"]),
+					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-danger" : "text-warning"]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])),
 				u("span", rt, "Ln " + g(e.line) + ", Col " + g(e.column), 1),

package/dist/lib/components/AcColorInput.js

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

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

@@ -0,0 +1,57 @@
+export interface ColorPreset {
+    /** Hex colour, `#rgb` or `#rrggbb`. */
+    value: string;
+    /** Name read out for the swatch, e.g. "Brand green". Defaults to the hex value. */
+    label?: string;
+}
+export interface Props {
+    /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
+    label?: string;
+    /** Native `name` attribute of the hex field. */
+    name?: string;
+    /** Quick-pick swatches under the field: hex strings or `{ value, label }`. */
+    presets?: (string | ColorPreset)[];
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field, the swatch and the presets. */
+    disabled?: boolean;
+    /** Read-only field: a muted fill, "(read only)" after the label, and no picker. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 42px tall. With `swatch-only`, a 40px or 48px swatch. */
+    size?: "small" | "normal";
+    /** Shows only the native colour swatch, with no hex field: cloud-ui's AcColorInput look. */
+    swatchOnly?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** Lowercase `#rrggbb`, or `""` when empty. Typed `#rgb` is expanded on blur. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the hex field, or to the swatch with `swatch-only`. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    name: string;
+    size: "small" | "normal";
+    readonly: boolean;
+    hint: string;
+    errorMsg: string;
+    presets: (string | ColorPreset)[];
+    swatchOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,217 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, watch as v, withKeys as y } from "vue";
+//#region src/lib/components/AcColorInput.vue?vue&type=script&setup=true&lang.ts
+var b = ["for"], x = {
+	key: 0,
+	class: "font-normal text-muted"
+}, S = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, C = ["id"], w = [
+	"id",
+	"value",
+	"name",
+	"disabled",
+	"required",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], T = [
+	"value",
+	"disabled",
+	"aria-label"
+], E = [
+	"id",
+	"value",
+	"name",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], D = ["aria-label"], O = [
+	"disabled",
+	"aria-label",
+	"aria-pressed",
+	"title",
+	"onClick"
+], k = ["id"], A = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "AcColorInput",
+	props: /*@__PURE__*/ o({
+		label: { default: "" },
+		name: { default: "" },
+		presets: { default: () => [] },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" },
+		swatchOnly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: A }) {
+		let j = a, M = _(a, "modelValue"), N = A, P = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i, F = g(), I = h(), L = t(() => ({
+			class: I.class,
+			style: I.style
+		})), R = t(() => {
+			let { class: e, style: t, ...n } = I;
+			return n;
+		}), z = d(null), B = d(null), V = d(M.value), H = d(""), U = t(() => J(M.value)), W = t(() => j.disabled || j.readonly), G = t(() => j.errorMsg || H.value), K = t(() => [j.hint && `${F}-hint`, G.value && `${F}-msg`].filter(Boolean).join(" ") || void 0), q = t(() => j.presets.flatMap((e) => {
+			let t = typeof e == "string" ? { value: e } : e, n = J(t.value);
+			return n ? [{
+				value: n,
+				label: t.label || n
+			}] : [];
+		}));
+		function J(e) {
+			let t = e ? P.exec(e.trim()) : null;
+			if (!t) return null;
+			let n = t[1].toLowerCase();
+			return `#${n.length === 3 ? [...n].map((e) => e + e).join("") : n}`;
+		}
+		function Y(e) {
+			H.value = "", V.value = e, e !== M.value && (M.value = e, N("change", e));
+		}
+		function X(e) {
+			V.value = e.target.value, H.value = "";
+			let t = V.value.trim().replace(/^#?/, "").length === 6 ? J(V.value) : null;
+			t && (M.value = t);
+		}
+		function Z() {
+			let e = V.value.trim();
+			if (!e) return Y("");
+			let t = J(e);
+			t ? Y(t) : H.value = "Enter a hex colour such as #1c7c54 or #fff";
+		}
+		function Q(e) {
+			H.value = "";
+			let t = e.target.value.toLowerCase();
+			V.value = t, M.value = t;
+		}
+		function $(e) {
+			N("change", e.target.value.toLowerCase());
+		}
+		return v(M, (e) => {
+			J(V.value) !== J(e) && (V.value = e ?? "");
+		}), o({ focus: () => (j.swatchOnly ? B.value : z.value)?.focus() }), (t, o) => (u(), r("div", s(L.value, {
+			class: [a.swatchOnly ? "w-fit" : "w-full", a.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-color-input"
+		}), [
+			a.label ? (u(), r("label", {
+				key: 0,
+				for: a.swatchOnly ? `${m(F)}-picker` : m(F),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				i("span", null, p(a.label), 1),
+				a.readonly ? (u(), r("span", x, "(read only)")) : n("", !0),
+				a.required ? (u(), r("span", S, "*")) : n("", !0)
+			], 8, b)) : n("", !0),
+			a.hint ? (u(), r("p", {
+				key: 1,
+				id: `${m(F)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, p(a.hint), 9, C)) : n("", !0),
+			a.swatchOnly ? (u(), r("input", s({
+				key: 2,
+				id: `${m(F)}-picker`,
+				ref_key: "picker",
+				ref: B
+			}, R.value, {
+				type: "color",
+				value: U.value ?? "#000000",
+				name: a.name,
+				disabled: W.value,
+				required: a.required,
+				"aria-label": a.label ? void 0 : R.value["aria-label"] ?? "Colour",
+				"aria-invalid": !!G.value || void 0,
+				"aria-describedby": K.value,
+				class: ["block cursor-pointer rounded-6 border-2 bg-background text-heading transition-all duration-200 focus:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed motion-reduce:transition-none", [a.size === "small" ? "size-10" : "size-12", G.value ? "border-danger/50" : "border-border"]],
+				"data-testid": "ac-color-input-swatch",
+				onInput: Q,
+				onChange: $
+			}), null, 16, w)) : (u(), r("div", {
+				key: 3,
+				class: c(["relative flex min-w-0 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
+					a.size === "small" ? "h-9" : "h-10.5",
+					a.readonly ? "bg-surface-muted" : "bg-background",
+					G.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+				]])
+			}, [i("span", {
+				class: c(["relative ml-1 shrink-0 overflow-hidden rounded-8 border-2 border-border has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-1 has-[input:focus-visible]:ring-offset-surface", [a.size === "small" ? "size-7" : "size-8", !U.value && "bg-surface-sunken"]]),
+				style: l(U.value ? { backgroundColor: U.value } : void 0),
+				"data-testid": "ac-color-input-swatch"
+			}, [i("input", {
+				type: "color",
+				value: U.value ?? "#000000",
+				disabled: W.value,
+				"aria-label": a.label ? `${a.label}: open colour picker` : "Open colour picker",
+				class: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+				onInput: Q,
+				onChange: $
+			}, null, 40, T)], 6), i("input", s({
+				id: m(F),
+				ref_key: "input",
+				ref: z
+			}, R.value, {
+				type: "text",
+				autocomplete: "off",
+				spellcheck: "false",
+				maxlength: "7",
+				value: V.value,
+				name: a.name,
+				disabled: a.disabled,
+				readonly: a.readonly,
+				required: a.required,
+				"aria-invalid": !!G.value || void 0,
+				"aria-describedby": K.value,
+				class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent pl-2.5 font-mono text-base font-normal text-heading outline-none placeholder:font-sans placeholder:text-muted/80 disabled:cursor-not-allowed", a.size === "small" ? "pr-3" : "pr-4"],
+				onInput: X,
+				onBlur: Z,
+				onKeydown: y(Z, ["enter"])
+			}), null, 16, E)], 2)),
+			q.value.length ? (u(), r("div", {
+				key: 4,
+				class: "mt-2.5 flex flex-wrap gap-2",
+				role: "group",
+				"aria-label": a.label ? `${a.label} presets` : "Presets"
+			}, [(u(!0), r(e, null, f(q.value, (e) => (u(), r("button", {
+				key: e.value,
+				type: "button",
+				class: c(["size-6 shrink-0 rounded-full border border-border transition-[box-shadow,transform] duration-200 hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:scale-100 motion-reduce:transition-none motion-reduce:hover:scale-100", [e.value === U.value && "ring-2 ring-primary ring-offset-2 ring-offset-surface", !W.value && "cursor-pointer"]]),
+				style: l({ backgroundColor: e.value }),
+				disabled: W.value,
+				"aria-label": e.label,
+				"aria-pressed": e.value === U.value,
+				title: e.label,
+				"data-testid": "ac-color-input-preset",
+				onClick: (t) => Y(e.value)
+			}, null, 14, O))), 128))], 8, D)) : n("", !0),
+			G.value ? (u(), r("p", {
+				key: 5,
+				id: `${m(F)}-msg`,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, p(G.value), 9, k)) : n("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcCommandBlock.js

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

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

@@ -0,0 +1,34 @@
+export interface Props {
+    /** The commands or text to show and copy. An array is joined with line breaks. */
+    commands: string | string[];
+    /** A line above the block saying where to run it, e.g. "On the machine that runs the tunnel:". */
+    caption?: string;
+    /** What the block holds, read by screen readers in "Copy commands" and "Copied commands". */
+    label?: string;
+    /** Masks the text with dots until the viewer clicks the eye button, for passwords and tokens. Copy still copies the real value. */
+    secret?: boolean;
+    /** Tallest the block grows before it scrolls, as a CSS length, e.g. `"240px"`. Leave empty to show everything. */
+    maxHeight?: string;
+}
+type __VLS_Slots = {
+    /** Extra buttons next to Copy, e.g. a "Download script" link. Use small, quiet buttons. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: (text: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCopy?: ((text: string) => any) | undefined;
+}>, {
+    caption: string;
+    label: string;
+    maxHeight: string;
+    secret: boolean;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,88 @@
+import { copyText as e } from "../composables/copyText.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeStyle as c, onBeforeUnmount as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g } from "vue";
+import { Check as _, Copy as v, Eye as y, EyeOff as b } from "@lucide/vue";
+//#region src/lib/components/AcCommandBlock.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	"data-ac-ds": "",
+	"data-testid": "ac-command-block"
+}, S = ["id"], C = { class: "relative" }, w = ["aria-describedby", "aria-label"], T = { class: "absolute top-2 right-2 flex items-center gap-1 rounded-8 bg-background" }, E = ["aria-label", "aria-pressed"], D = { class: "sr-only" }, O = {
+	class: "sr-only",
+	role: "status"
+}, k = /*@__PURE__*/ s({
+	__name: "AcCommandBlock",
+	props: {
+		commands: {},
+		caption: { default: "" },
+		label: { default: "commands" },
+		secret: {
+			type: Boolean,
+			default: !1
+		},
+		maxHeight: { default: "" }
+	},
+	emits: ["copy"],
+	setup(s, { emit: k }) {
+		let A = s, j = k, M = g(), N = d(!1), P = d(!1), F = d(!1), I, L = t(() => Array.isArray(A.commands) ? A.commands.join("\n") : A.commands), R = t(() => A.secret && !F.value ? L.value.replace(/[^\n]/g, "•") : L.value), z = t(() => N.value ? `Copied ${A.label}` : P.value ? "Copy failed. Select the text and copy it by hand." : "");
+		async function B() {
+			clearTimeout(I);
+			try {
+				await e(L.value), N.value = !0, P.value = !1, j("copy", L.value);
+			} catch {
+				P.value = !0;
+			}
+			I = setTimeout(() => {
+				N.value = !1, P.value = !1;
+			}, 2e3);
+		}
+		return l(() => clearTimeout(I)), (e, t) => (u(), i("div", x, [s.caption ? (u(), i("p", {
+			key: 0,
+			id: `${h(M)}-caption`,
+			class: "mb-1.5 text-xs text-muted"
+		}, m(s.caption), 9, S)) : r("", !0), a("div", C, [
+			a("pre", {
+				class: "ac-scrollbar overflow-auto rounded-10 border border-border bg-background/60 p-3 pr-28 font-mono text-xs leading-relaxed whitespace-pre text-heading",
+				style: c(s.maxHeight ? { maxHeight: s.maxHeight } : void 0),
+				"aria-describedby": s.caption ? `${h(M)}-caption` : void 0,
+				"aria-label": s.secret && !F.value ? `${s.label} (hidden)` : void 0,
+				tabindex: "0",
+				"data-testid": "ac-command-block-text"
+			}, m(R.value), 13, w),
+			a("div", T, [
+				f(e.$slots, "actions"),
+				s.secret ? (u(), i("button", {
+					key: 0,
+					type: "button",
+					class: "inline-flex size-6 cursor-pointer items-center justify-center rounded-8 border border-border bg-surface text-muted transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+					"aria-label": F.value ? `Hide ${s.label}` : `Show ${s.label}`,
+					"aria-pressed": F.value,
+					"data-testid": "ac-command-block-reveal",
+					onClick: t[0] ||= (e) => F.value = !F.value
+				}, [(u(), n(p(F.value ? h(b) : h(y)), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				}))], 8, E)) : r("", !0),
+				a("button", {
+					type: "button",
+					class: "group inline-flex h-6 cursor-pointer items-center gap-1 rounded-8 border border-border bg-surface px-1.5 text-xs text-muted transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+					"data-testid": "ac-command-block-copy",
+					onClick: B
+				}, [
+					N.value ? (u(), n(h(_), {
+						key: 0,
+						class: "size-3.5 text-primary",
+						"aria-hidden": "true"
+					})) : (u(), n(h(v), {
+						key: 1,
+						class: "size-3.5",
+						"aria-hidden": "true"
+					})),
+					o(" " + m(N.value ? "Copied" : "Copy"), 1),
+					a("span", D, m(s.label), 1)
+				])
+			]),
+			a("span", O, m(z.value), 1)
+		])]));
+	}
+});
+//#endregion
+export { k as default };

package/dist/lib/components/AcConfirmModal.js

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

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

@@ -0,0 +1,56 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** Heading that names the action, e.g. "Restart database". */
+    title?: string;
+    /** What happens if the viewer confirms. The default slot replaces it for rich text. */
+    description?: string;
+    /** Label of the confirm button. Name the action: "Restart", "Revoke token". */
+    confirmLabel?: string;
+    /** Same as `confirmLabel`; the name cloud-ui's ConfirmModal and AcDeleteModal use. Wins when both are set. */
+    confirmText?: string;
+    /** Label of the cancel button. */
+    cancelLabel?: string;
+    /** Colour of the soft confirm button and the icon tile. Defaults to `danger`, as cloud-ui's ConfirmModal (its `error`); pass `primary` for safe actions. */
+    color?: Tone;
+    /** Shows a spinner on the confirm button, disables Cancel and blocks closing while the request runs. cloud-ui's `is-loading`. */
+    loading?: boolean;
+    /** A Lucide icon shown in a 32px tile tinted with `color`, beside the description. */
+    icon?: Component;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Rich description, e.g. with the resource name in `<strong>`. Replaces `description`. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the dialog is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    icon: Component;
+    color: Tone;
+    loading: boolean;
+    confirmLabel: string;
+    confirmText: string;
+    cancelLabel: string;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,96 @@
+import e from "./AcButton.js";
+import t from "./AcModal.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useModel as h, withCtx as g } from "vue";
+//#region src/lib/components/AcConfirmModal.vue?vue&type=script&setup=true&lang.ts
+var _ = {
+	class: "flex items-start gap-4",
+	"data-ac-ds": "",
+	"data-testid": "ac-confirm-modal"
+}, v = /*@__PURE__*/ c({
+	__name: "AcConfirmModal",
+	props: /*@__PURE__*/ l({
+		title: { default: "Confirm action" },
+		description: { default: "" },
+		confirmLabel: { default: "Confirm" },
+		confirmText: { default: "" },
+		cancelLabel: { default: "Cancel" },
+		color: { default: "danger" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: void 0 }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["confirm", "cancel"], ["update:open"]),
+	setup(c, { emit: l }) {
+		let v = c, y = h(c, "open"), b = l, x = {
+			primary: "border-primary/25 bg-primary/10 text-primary-strong",
+			info: "border-info/25 bg-info/10 text-info-strong",
+			success: "border-success/25 bg-success/10 text-success-strong",
+			warning: "border-warning/30 bg-warning/10 text-warning-strong",
+			danger: "border-danger/25 bg-danger/10 text-danger-strong"
+		}, S = n(() => v.confirmText || v.confirmLabel), C = n(() => v.color === "danger");
+		function w() {
+			y.value = !1, b("cancel");
+		}
+		return (n, l) => (d(), r(t, {
+			open: y.value,
+			"onUpdate:open": l[1] ||= (e) => y.value = e,
+			title: c.title,
+			size: "small",
+			variant: "plain",
+			closable: !c.loading,
+			"close-on-outside-click": !c.loading,
+			onClose: l[2] ||= (e) => b("cancel")
+		}, {
+			footer: g(() => [s(e, {
+				title: c.cancelLabel,
+				variant: "light",
+				size: "medium",
+				disabled: c.loading,
+				autofocus: C.value || void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-confirm-modal-cancel",
+				onClick: w
+			}, null, 8, [
+				"title",
+				"disabled",
+				"autofocus"
+			]), s(e, {
+				title: S.value,
+				color: c.color,
+				variant: "light",
+				size: "medium",
+				loading: c.loading,
+				autofocus: !C.value || void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-confirm-modal-confirm",
+				onClick: l[0] ||= (e) => b("confirm")
+			}, null, 8, [
+				"title",
+				"color",
+				"loading",
+				"autofocus"
+			])]),
+			default: g(() => [o("div", _, [c.icon ? (d(), a("span", {
+				key: 0,
+				class: u(["inline-flex size-8 shrink-0 items-center justify-center rounded-10 border", x[c.color]]),
+				"aria-hidden": "true"
+			}, [(d(), r(p(c.icon), { class: "size-4" }))], 2)) : i("", !0), o("div", { class: u(["min-w-0 flex-1 text-lg text-muted [&_strong]:font-semibold [&_strong]:text-heading", c.icon && "pt-1"]) }, [f(n.$slots, "default", {}, () => [o("p", null, m(c.description), 1)])], 2)])]),
+			_: 3
+		}, 8, [
+			"open",
+			"title",
+			"closable",
+			"close-on-outside-click"
+		]));
+	}
+});
+//#endregion
+export { v as default };

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

@@ -7,7 +7,7 @@ export interface Props {
     bordered?: boolean;
 }
 type __VLS_Slots = {
-    /** Icon before the title. */
+    /** A 16px Lucide icon before the title, shown in a tinted 32px tile. */
     icon?: () => unknown;
     /** Right after the title, e.g. a count badge or info tooltip. */
     "title-actions"?: () => unknown;