@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -21,8 +21,10 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `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 = {
@@ -31,7 +33,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** Moves focus to the hex field. */
+    /** 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;
@@ -49,6 +51,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     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

@@ -1,18 +1,26 @@
-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, mergeModels as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, watch as b, withKeys as x } from "vue";
-import { CircleAlert as S } from "@lucide/vue";
+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 C = ["for"], w = {
+var b = ["for"], x = {
 	key: 0,
 	class: "font-normal text-muted"
-}, T = {
+}, S = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, E = ["id"], D = [
+}, C = ["id"], w = [
+	"id",
+	"value",
+	"name",
+	"disabled",
+	"required",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], T = [
 	"value",
 	"disabled",
 	"aria-label"
-], O = [
+], E = [
 	"id",
 	"value",
 	"name",
@@ -21,16 +29,16 @@ var C = ["for"], w = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], k = ["aria-label"], A = [
+], D = ["aria-label"], O = [
 	"disabled",
 	"aria-label",
 	"aria-pressed",
 	"title",
 	"onClick"
-], j = ["id"], M = /*@__PURE__*/ s({
+], k = ["id"], A = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcColorInput",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ o({
 		label: { default: "" },
 		name: { default: "" },
 		presets: { default: () => [] },
@@ -48,140 +56,162 @@ var C = ["for"], w = {
 		},
 		errorMsg: { default: "" },
 		hint: { default: "" },
-		size: { default: "normal" }
+		size: { default: "normal" },
+		swatchOnly: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: M }) {
-		let N = s, P = y(s, "modelValue"), F = M, I = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i, L = v(), R = _(), z = t(() => ({
-			class: R.class,
-			style: R.style
-		})), B = t(() => {
-			let { class: e, style: t, ...n } = R;
+	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;
-		}), V = p(null), H = p(P.value), U = p(""), W = t(() => Y(P.value)), G = t(() => N.disabled || N.readonly), K = t(() => N.errorMsg || U.value), q = t(() => [N.hint && `${L}-hint`, K.value && `${L}-msg`].filter(Boolean).join(" ") || void 0), J = t(() => N.presets.flatMap((e) => {
-			let t = typeof e == "string" ? { value: e } : e, n = Y(t.value);
+		}), 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 Y(e) {
-			let t = e ? I.exec(e.trim()) : null;
+		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 X(e) {
-			U.value = "", H.value = e, e !== P.value && (P.value = e, F("change", e));
+		function Y(e) {
+			H.value = "", V.value = e, e !== M.value && (M.value = e, N("change", e));
 		}
-		function Z(e) {
-			H.value = e.target.value, U.value = "";
-			let t = H.value.trim().replace(/^#?/, "").length === 6 ? Y(H.value) : null;
-			t && (P.value = t);
+		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 Q() {
-			let e = H.value.trim();
-			if (!e) return X("");
-			let t = Y(e);
-			t ? X(t) : U.value = "Enter a hex colour such as #1c7c54 or #fff";
+		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 $(e) {
-			U.value = "";
+		function Q(e) {
+			H.value = "";
 			let t = e.target.value.toLowerCase();
-			H.value = t, P.value = t;
+			V.value = t, M.value = t;
 		}
-		function ee(e) {
-			F("change", e.target.value.toLowerCase());
+		function $(e) {
+			N("change", e.target.value.toLowerCase());
 		}
-		return b(P, (e) => {
-			Y(H.value) !== Y(e) && (H.value = e ?? "");
-		}), c({ focus: () => V.value?.focus() }), (t, c) => (f(), r("div", l(z.value, {
-			class: ["w-full", s.disabled && "opacity-50"],
+		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"
 		}), [
-			s.label ? (f(), r("label", {
+			a.label ? (u(), r("label", {
 				key: 0,
-				for: g(L),
+				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, h(s.label), 1),
-				s.readonly ? (f(), r("span", w, "(read only)")) : n("", !0),
-				s.required ? (f(), r("span", T, "*")) : n("", !0)
-			], 8, C)) : n("", !0),
-			s.hint ? (f(), r("p", {
+				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: `${g(L)}-hint`,
+				id: `${m(F)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, h(s.hint), 9, E)) : n("", !0),
-			i("div", { class: u(["relative flex min-w-0 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
-				s.size === "small" ? "h-9" : "h-10",
-				s.readonly ? "bg-surface-muted" : "bg-background",
-				K.value ? "border-danger/60 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", !s.disabled && "hover:border-accent-active"]
-			]]) }, [i("span", {
-				class: u(["relative ml-1 shrink-0 overflow-hidden rounded-8 border 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", [s.size === "small" ? "size-7" : "size-8", !W.value && "bg-surface-sunken"]]),
-				style: d(W.value ? { backgroundColor: W.value } : void 0),
+			}, 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: W.value ?? "#000000",
-				disabled: G.value,
-				"aria-label": s.label ? `${s.label}: open colour picker` : "Open colour picker",
+				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: $,
-				onChange: ee
-			}, null, 40, D)], 6), i("input", l({
-				id: g(L),
+				onInput: Q,
+				onChange: $
+			}, null, 40, T)], 6), i("input", s({
+				id: m(F),
 				ref_key: "input",
-				ref: V
-			}, B.value, {
+				ref: z
+			}, R.value, {
 				type: "text",
 				autocomplete: "off",
 				spellcheck: "false",
 				maxlength: "7",
-				value: H.value,
-				name: s.name,
-				disabled: s.disabled,
-				readonly: s.readonly,
-				required: s.required,
-				"aria-invalid": !!K.value || void 0,
-				"aria-describedby": q.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", s.size === "small" ? "pr-3" : "pr-4"],
-				onInput: Z,
-				onBlur: Q,
-				onKeydown: x(Q, ["enter"])
-			}), null, 16, O)], 2),
-			J.value.length ? (f(), r("div", {
-				key: 2,
+				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": s.label ? `${s.label} presets` : "Presets"
-			}, [(f(!0), r(e, null, m(J.value, (e) => (f(), r("button", {
+				"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: u(["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 === W.value && "ring-2 ring-primary ring-offset-2 ring-offset-surface", !G.value && "cursor-pointer"]]),
-				style: d({ backgroundColor: e.value }),
-				disabled: G.value,
+				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 === W.value,
+				"aria-pressed": e.value === U.value,
 				title: e.label,
 				"data-testid": "ac-color-input-preset",
-				onClick: (t) => X(e.value)
-			}, null, 14, A))), 128))], 8, k)) : n("", !0),
-			K.value ? (f(), r("p", {
-				key: 3,
-				id: `${g(L)}-msg`,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				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"
-			}, [o(g(S), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), a(" " + h(K.value), 1)], 8, j)) : n("", !0)
+			}, p(G.value), 9, k)) : n("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { M as default };
+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.vue.d.ts

@@ -11,7 +11,7 @@ export interface Props {
     confirmText?: string;
     /** Label of the cancel button. */
     cancelLabel?: string;
-    /** Colour of the confirm button and the icon tile. Use `danger` for destructive actions. cloud-ui's `error` is `danger`. */
+    /** 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;

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

@@ -14,7 +14,7 @@ var _ = {
 		confirmLabel: { default: "Confirm" },
 		confirmText: { default: "" },
 		cancelLabel: { default: "Cancel" },
-		color: { default: "primary" },
+		color: { default: "danger" },
 		loading: {
 			type: Boolean,
 			default: !1
@@ -44,13 +44,15 @@ var _ = {
 			"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,
-				color: "white",
+				variant: "light",
+				size: "medium",
 				disabled: c.loading,
 				autofocus: C.value || void 0,
 				"data-ac-ds": "",
@@ -63,6 +65,8 @@ var _ = {
 			]), s(e, {
 				title: S.value,
 				color: c.color,
+				variant: "light",
+				size: "medium",
 				loading: c.loading,
 				autofocus: !C.value || void 0,
 				"data-ac-ds": "",
@@ -78,7 +82,7 @@ var _ = {
 				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-base text-muted [&_strong]:font-semibold [&_strong]:text-heading", c.icon && "pt-1.5"]) }, [f(n.$slots, "default", {}, () => [o("p", null, m(c.description), 1)])], 2)])]),
+			}, [(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",

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

@@ -5,11 +5,11 @@ export interface Props {
     label?: string;
     /** Text shown instead of `value`, e.g. the first 8 characters of a UUID. The tooltip shows the full value. */
     display?: string;
-    /** Shows the text in JetBrains Mono, for IDs, IPs, versions and resource names. Turn off for plain text such as a team name. */
+    /** Shows the text in JetBrains Mono, for IDs, IPs, versions and resource names. Off by default: the text takes the surrounding font, as in cloud-ui. */
     mono?: boolean;
     /** Shows only a copy icon button, for placing after a value you render yourself. */
     iconOnly?: boolean;
-    /** Text size: `small` 12px for table cells and chips, `normal` 14px for detail pages. */
+    /** Text size. Unset, plain text takes the surrounding size and colour, as in cloud-ui. `small` sets 12px for table cells and chips, `normal` 14px in the heading colour. */
     size?: "small" | "normal";
     /** `plain` text with a copy icon on hover, or `chip`: a bordered, tinted pill for IDs in page headers. */
     variant?: "plain" | "chip";

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

@@ -15,13 +15,13 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
 		display: { default: "" },
 		mono: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		iconOnly: {
 			type: Boolean,
 			default: !1
 		},
-		size: { default: "normal" },
+		size: { default: void 0 },
 		variant: { default: "plain" }
 	},
 	emits: ["copy"],
@@ -32,7 +32,7 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
 		})), V = r(() => {
 			let { class: e, style: t, ...n } = P;
 			return n;
-		}), H = r(() => M.display || M.value), U = r(() => !M.iconOnly && (R.value || !!M.display && M.display !== M.value)), W = r(() => M.iconOnly ? M.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : M.variant === "chip" ? M.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : M.size === "small" ? "gap-1 rounded-4 text-xs" : "gap-1.5 rounded-6 text-base"), G = r(() => M.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : M.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : "text-heading"), K = r(() => M.iconOnly && M.size === "normal" ? "size-4" : "size-3.5"), q = r(() => M.iconOnly ? "" : M.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
+		}), H = r(() => M.display || M.value), U = r(() => !M.iconOnly && (R.value || !!M.display && M.display !== M.value)), W = r(() => M.iconOnly ? M.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : M.variant === "chip" ? M.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : M.size === "small" ? "gap-1 rounded-4 text-xs" : M.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), G = r(() => M.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : M.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : M.size ? "text-heading" : ""), K = r(() => M.iconOnly && M.size !== "small" ? "size-4" : "size-3.5"), q = r(() => M.iconOnly ? "" : M.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
 		function J() {
 			let e = I.value;
 			R.value = !!e && e.scrollWidth > e.clientWidth + 1;
@@ -77,7 +77,7 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
 				class: p(["min-w-0 truncate", u.mono && "font-mono"])
 			}, [_(t.$slots, "default", {}, () => [c(v(H.value), 1)])], 2)], 64)), L.value === "copied" ? (h(), i(y(C), {
 				key: 1,
-				class: p(["shrink-0 text-success-strong", K.value]),
+				class: p(["shrink-0 text-primary", K.value]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])) : (h(), i(y(w), {
 				key: 2,

package/dist/lib/components/AcCostSummary.js

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