@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,38 +1,38 @@
-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, nextTick as u, normalizeClass 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, vModelCheckbox as b, withDirectives as x, withModifiers as S } from "vue";
-import { Check as C, CircleAlert as w, Minus as T } from "@lucide/vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelCheckbox as y, withDirectives as b, withModifiers as x } from "vue";
+import { Check as S, Minus as C } from "@lucide/vue";
 //#region src/lib/components/AcCheckBox.vue?vue&type=script&setup=true&lang.ts
-var E = ["for"], D = [
+var w = { class: "flex flex-col gap-3" }, T = ["for"], E = [
 	"id",
 	"name",
 	"value",
 	"disabled"
-], O = { class: "flex min-w-0 flex-col gap-1" }, k = { class: "font-medium" }, A = {
+], D = { class: "flex min-w-0 flex-col gap-1" }, O = { class: "font-medium" }, k = {
 	key: 0,
 	class: "text-xs text-muted"
-}, j = {
+}, A = {
 	key: 0,
-	class: "flex items-center gap-1.5 text-base text-danger-strong",
+	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, M = [
+}, j = [
 	"name",
 	"checked",
 	"indeterminate",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], N = {
+], M = {
 	key: 0,
 	class: "flex min-w-0 flex-col gap-1"
-}, P = {
+}, N = {
 	key: 0,
 	class: "font-medium"
-}, F = {
+}, P = {
 	key: 1,
 	class: "text-xs text-muted"
-}, I = ["id"], L = /*@__PURE__*/ s({
+}, F = ["id"], I = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcCheckBox",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ s({
 		options: { default: void 0 },
 		name: { default: "checkbox" },
 		errorMsg: { default: "" },
@@ -57,90 +57,76 @@ var E = ["for"], D = [
 		checkedModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:checked"],
-	setup(s) {
-		let c = s, L = y(s, "modelValue"), R = y(s, "checked"), z = v(), B = _(), V = p(null), H = t(() => c.size === "small"), U = t(() => c.indeterminate && !R.value), W = t(() => c.options ? B : {
-			class: B.class,
-			style: B.style
-		}), G = t(() => {
-			let { class: e, style: t, ...n } = B;
-			return c.label || n["aria-label"] || n["aria-labelledby"] ? n : {
+	setup(o) {
+		let s = o, I = v(o, "modelValue"), L = v(o, "checked"), R = _(), z = g(), B = f(null), V = t(() => s.size === "small"), H = t(() => s.indeterminate && !L.value), U = t(() => s.options ? z : {
+			class: z.class,
+			style: z.style
+		}), W = t(() => {
+			let { class: e, style: t, ...n } = z;
+			return s.label || n["aria-label"] || n["aria-labelledby"] ? n : {
 				"aria-label": "Select",
 				...n
 			};
-		}), K = t(() => ["peer cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface transition-colors duration-200 group-hover:border-muted checked:border-primary checked:bg-primary group-hover:checked:border-primary indeterminate:border-primary indeterminate:bg-primary group-hover:indeterminate:border-primary 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:bg-surface-sunken", H.value ? "size-4" : "size-5"]), q = t(() => ["pointer-events-none absolute inset-0 m-auto scale-75 text-white opacity-0 transition duration-150 motion-reduce:transition-none", H.value ? "size-3" : "size-4"]);
-		async function J(e) {
-			R.value = e.target.checked, await u(), V.value && (V.value.checked = R.value, V.value.indeterminate = U.value);
+		}), G = t(() => V.value ? "size-[18px]" : "size-6"), K = t(() => [
+			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary 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:bg-surface-sunken",
+			G.value,
+			V.value ? "bg-background" : "bg-transparent"
+		]), q = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", V.value ? "size-3.5" : "size-5"]), J = t(() => ["cursor-not-allowed", V.value ? "opacity-40" : "opacity-50"]);
+		async function Y(e) {
+			L.value = e.target.checked, await l(), B.value && (B.value.checked = L.value, B.value.indeterminate = H.value);
 		}
-		return (t, c) => s.options ? (f(), r("div", l({
+		return (t, s) => o.options ? (d(), r("div", c({
 			key: 0,
-			class: "flex flex-col gap-3",
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, W.value), [(f(!0), r(e, null, m(s.options, (e, t) => (f(), r("label", {
+		}, U.value), [i("div", w, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
 			key: e.label,
-			for: `${g(z)}-${t}`,
-			class: d(["group inline-flex w-fit cursor-pointer text-base text-heading select-none", [
-				e.description ? "items-start" : "items-center",
-				e.disabled && "cursor-not-allowed opacity-50",
-				H.value ? "gap-2.5" : "gap-3"
-			]])
-		}, [i("span", { class: d(["relative inline-flex shrink-0", [H.value ? "size-4" : "size-5", e.description && (H.value ? "mt-0.5" : "mt-px")]]) }, [x(i("input", {
-			id: `${g(z)}-${t}`,
-			"onUpdate:modelValue": c[0] ||= (e) => L.value = e,
+			for: `${h(R)}-${t}`,
+			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]])
+		}, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [b(i("input", {
+			id: `${h(R)}-${t}`,
+			"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
 			type: "checkbox",
-			name: s.name,
+			name: o.name,
 			value: e.value,
 			disabled: e.disabled,
-			class: d(K.value)
-		}, null, 10, D), [[b, L.value]]), o(g(C), {
-			class: d([q.value, "peer-checked:scale-100 peer-checked:opacity-100"]),
-			"stroke-width": 3,
+			class: u(K.value)
+		}, null, 10, E), [[y, I.value]]), a(h(S), {
+			class: u([q.value, "peer-checked:opacity-100"]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 2), i("span", O, [i("span", k, h(e.label), 1), e.description ? (f(), r("span", A, h(e.description), 1)) : n("", !0)])], 10, E))), 128)), s.errorMsg ? (f(), r("p", j, [o(g(w), {
-			class: "size-4 shrink-0",
-			"aria-hidden": "true"
-		}), a(" " + h(s.errorMsg), 1)])) : n("", !0)], 16)) : (f(), r("div", l({
+		}, null, 8, ["class"])], 2), i("span", D, [i("span", O, m(e.label), 1), e.description ? (d(), r("span", k, m(e.description), 1)) : n("", !0)])], 10, T))), 128))]), o.errorMsg ? (d(), r("p", A, m(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
 			key: 1,
-			class: "inline-flex flex-col gap-1.5",
+			class: "inline-flex flex-col",
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, W.value, { onClick: c[1] ||= S(() => {}, ["stop"]) }), [i("label", { class: d(["group inline-flex w-fit cursor-pointer text-base text-heading select-none", [
-			s.description ? "items-start" : "items-center",
-			s.disabled && "cursor-not-allowed opacity-50",
-			H.value ? "gap-2.5" : "gap-3"
-		]]) }, [i("span", { class: d(["relative inline-flex shrink-0", [H.value ? "size-4" : "size-5", s.description && s.label && (H.value ? "mt-0.5" : "mt-px")]]) }, [
-			i("input", l({
+		}, U.value, { onClick: s[1] ||= x(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [
+			i("input", c({
 				ref_key: "single",
-				ref: V,
+				ref: B,
 				type: "checkbox",
-				name: s.name,
-				checked: R.value,
-				indeterminate: U.value,
-				disabled: s.disabled,
-				"aria-invalid": s.errorMsg ? !0 : void 0,
-				"aria-describedby": s.errorMsg ? `${g(z)}-error` : void 0,
+				name: o.name,
+				checked: L.value,
+				indeterminate: H.value,
+				disabled: o.disabled,
+				"aria-invalid": o.errorMsg ? !0 : void 0,
+				"aria-describedby": o.errorMsg ? `${h(R)}-error` : void 0,
 				class: K.value
-			}, G.value, { onChange: J }), null, 16, M),
-			o(g(C), {
-				class: d([q.value, "peer-checked:scale-100 peer-checked:opacity-100"]),
-				"stroke-width": 3,
+			}, W.value, { onChange: Y }), null, 16, j),
+			a(h(S), {
+				class: u([q.value, "peer-checked:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]),
-			o(g(T), {
-				class: d([q.value, "peer-indeterminate:scale-100 peer-indeterminate:opacity-100"]),
-				"stroke-width": 3,
+			a(h(C), {
+				class: u([q.value, "peer-indeterminate:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])
-		], 2), s.label || s.description ? (f(), r("span", N, [s.label ? (f(), r("span", P, h(s.label), 1)) : n("", !0), s.description ? (f(), r("span", F, h(s.description), 1)) : n("", !0)])) : n("", !0)], 2), s.errorMsg ? (f(), r("p", {
+		], 2), o.label || o.description ? (d(), r("span", M, [o.label ? (d(), r("span", N, m(o.label), 1)) : n("", !0), o.description ? (d(), r("span", P, m(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
 			key: 0,
-			id: `${g(z)}-error`,
-			class: "flex items-center gap-1.5 text-base text-danger-strong",
+			id: `${h(R)}-error`,
+			class: "mt-1 text-base text-danger-strong",
 			role: "alert"
-		}, [o(g(w), {
-			class: "size-4 shrink-0",
-			"aria-hidden": "true"
-		}), a(" " + h(s.errorMsg), 1)], 8, I)) : n("", !0)], 16));
+		}, m(o.errorMsg), 9, F)) : n("", !0)], 16));
 	}
 });
 //#endregion
-export { L as default };
+export { I as default };

package/dist/lib/components/AcCheckList.js

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

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

@@ -0,0 +1,45 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface CheckListItem {
+    /** The benefit or feature, in sentence case. */
+    label: string;
+    /** A line of muted text under the label. */
+    description?: string;
+}
+export interface Props {
+    /** The lines to show. Pass strings, or `{ label, description }` for a line with a muted second line. */
+    items?: (string | CheckListItem)[];
+    /** A Lucide icon before each line. Defaults to `CircleCheck`, as cloud-ui's landing heroes; pass `Check` for the plain tick of the Create database card. */
+    icon?: Component;
+    /** Colour of the icon. `muted` is a grey tick for neutral lists. */
+    color?: Tone | "muted";
+    /** `normal` 14px text with 16px icons and 10px between lines; `small` 12px text with 14px icons and 6px between lines. */
+    size?: "small" | "normal";
+    /** Lays the lines out in two columns from 640px. Below that they stack in one. */
+    columns?: 1 | 2;
+    /** Sets the text in the muted grey, as on cloud-ui's landing heroes. Set `false` for the heading colour, as on the Create database card. */
+    muted?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces the text of each line; the icon stays. Gets `item` (always an object) and `index`. */
+    default?: (props: {
+        item: CheckListItem;
+        index: number;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    icon: Component;
+    color: Tone | "muted";
+    size: "small" | "normal";
+    items: (string | CheckListItem)[];
+    muted: boolean;
+    columns: 1 | 2;
+}, {}, {}, {}, 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/AcCheckList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { Fragment as e, computed 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, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p } from "vue";
+import { CircleCheck as m } from "@lucide/vue";
+//#region src/lib/components/AcCheckList.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "min-w-0" }, g = /*@__PURE__*/ o({
+	__name: "AcCheckList",
+	props: {
+		items: { default: () => [] },
+		icon: { default: void 0 },
+		color: { default: "primary" },
+		size: { default: "normal" },
+		columns: { default: 1 },
+		muted: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(o) {
+		let g = o, _ = {
+			primary: "text-primary",
+			info: "text-info",
+			success: "text-success",
+			warning: "text-warning",
+			danger: "text-danger",
+			muted: "text-muted"
+		}, v = {
+			normal: {
+				list: "gap-y-2.5 text-base",
+				icon: "mt-0.5 size-4",
+				item: "gap-2.5",
+				description: "text-base"
+			},
+			small: {
+				list: "gap-y-1.5 text-xs",
+				icon: "mt-[3px] size-3.5",
+				item: "gap-2",
+				description: "text-xs"
+			}
+		}, y = t(() => g.items.map((e) => typeof e == "string" ? { label: e } : e)), b = t(() => v[g.size]);
+		return (t, g) => (c(), i("ul", {
+			role: "list",
+			class: s(["m-0 grid list-none p-0 leading-relaxed", [
+				b.value.list,
+				o.columns === 2 && "gap-x-6 sm:grid-cols-2",
+				o.muted ? "text-muted" : "text-heading"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-check-list"
+		}, [(c(!0), i(e, null, l(y.value, (e, l) => (c(), i("li", {
+			key: `${l}-${e.label}`,
+			class: s(["flex min-w-0 items-start text-left", b.value.item])
+		}, [(c(), n(d(o.icon ?? p(m)), {
+			class: s(["shrink-0", [b.value.icon, _[o.color]]]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])), a("span", h, [u(t.$slots, "default", {
+			item: e,
+			index: l
+		}, () => [a("span", { class: s(e.description && "font-medium text-heading") }, f(e.label), 3), e.description ? (c(), i("span", {
+			key: 0,
+			class: s(["block text-muted", b.value.description])
+		}, f(e.description), 3)) : r("", !0)])])], 2))), 128))], 2));
+	}
+});
+//#endregion
+export { g as default };

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

@@ -1,13 +1,27 @@
-import type { Option } from "./types";
+import type { Component } from "vue";
+import type { Option, Tone } from "./types";
+/** A radio option with an optional icon or logo tile and a pill next to its label. */
+export interface CheckRadioOption<V = unknown> extends Option<V> {
+    /** Lucide icon shown in a 32px tile before the label. */
+    icon?: Component;
+    /** Image URL shown in a 32px tile before the label, e.g. an engine logo. Used when there's no `icon`. */
+    logo?: string;
+    /** Short pill after the label, e.g. "Recommended" or "Coming soon". */
+    badge?: string;
+    /** Pill colour. `neutral` is grey, for "Coming soon". Defaults to `primary`. */
+    badgeColor?: Tone | "neutral";
+}
 export interface Props<V> {
-    /** The radios to render: `{ value, label, description?, disabled? }`. */
-    options: Option<V>[];
+    /** The radios to render: `{ value, label, description?, disabled?, icon?, logo?, badge?, badgeColor? }`. */
+    options: CheckRadioOption<V>[];
     /** Base `name` for the radio group. */
     name?: string;
     /** Lays the options out horizontally. */
     row?: boolean;
-    /** Shows each option as a card with its description underneath. */
+    /** Shows each option as a card with its description underneath. The selected card gets a primary border and a check badge in its corner. */
     cards?: boolean;
+    /** Cards only: shows an 18px radio before each card's label instead of the check badge. Old cloud-ui RadioCard `is-radio-show`. */
+    showRadio?: boolean;
     /** Error text under the group. */
     errorMsg?: string;
 }
@@ -21,7 +35,18 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        /** Replaces an option's icon, label, badge and description. Clicking it still selects the option. */
+        option?: (props: {
+            option: CheckRadioOption<T>;
+            checked: boolean;
+        }) => unknown;
+        /** Content on the right of an option, e.g. a version select. Clicks and keys inside it don't select the option. Cards with it stack in one column and drop the check badge, so pair it with `show-radio`. */
+        "option-extra"?: (props: {
+            option: CheckRadioOption<T>;
+            checked: boolean;
+        }) => unknown;
+    };
     emit: (event: "update:modelValue", value: T | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;

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

@@ -1,22 +1,39 @@
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, useId as p, useModel as m, vModelRadio as h, withDirectives as g } from "vue";
-import { CircleAlert as _ } from "@lucide/vue";
+import { Fragment as e, Transition as t, 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, renderList as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useId as _, useModel as v, useSlots as y, vModelRadio as b, withCtx as x, withDirectives as S } from "vue";
+import { Check as C } from "@lucide/vue";
 //#region src/lib/components/AcCheckRadio.vue?vue&type=script&setup=true&lang.ts
-var v = {
+var w = {
 	role: "radiogroup",
 	"data-ac-ds": "",
 	"data-testid": "ac-check-radio"
-}, y = ["for"], b = [
+}, T = [
 	"id",
 	"name",
 	"value",
 	"disabled"
-], x = { class: "flex min-w-0 flex-col" }, S = ["title"], C = {
+], E = {
 	key: 0,
-	class: "mt-2 flex items-center gap-1.5 text-base text-danger-strong",
+	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/20 bg-primary/10 text-primary-strong",
+	"aria-hidden": "true"
+}, D = ["src"], O = { class: "flex min-w-0 flex-col" }, k = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-x-2 gap-y-1"
+}, A = {
+	key: 2,
+	class: "mt-0.5 text-xs leading-relaxed text-muted"
+}, j = {
+	key: 0,
+	class: "relative shrink-0 cursor-auto"
+}, M = {
+	key: 0,
+	class: "absolute top-2 right-2 flex size-4 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+	"aria-hidden": "true"
+}, N = {
+	key: 0,
+	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, w = /*@__PURE__*/ o({
+}, P = /*@__PURE__*/ c({
 	__name: "AcCheckRadio",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		options: {},
 		name: { default: "radio" },
 		row: {
@@ -27,42 +44,89 @@ var v = {
 			type: Boolean,
 			default: !1
 		},
+		showRadio: {
+			type: Boolean,
+			default: !1
+		},
 		errorMsg: { default: "" }
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o) {
-		let s = m(o, "modelValue"), w = p();
-		return (p, m) => (l(), n("div", v, [r("div", { class: c(o.cards ? "grid gap-3 sm:grid-cols-2" : o.row ? "flex flex-row flex-wrap gap-x-6 gap-y-3" : "flex flex-col gap-3") }, [(l(!0), n(e, null, u(o.options, (e, i) => (l(), n("label", {
+	setup(c) {
+		let l = v(c, "modelValue"), P = {
+			primary: "bg-primary/10 text-primary-strong",
+			info: "bg-info/10 text-info-strong",
+			success: "bg-success/10 text-success-strong",
+			warning: "bg-warning/10 text-warning-strong",
+			danger: "bg-danger/10 text-danger-strong",
+			neutral: "bg-surface-sunken text-muted"
+		}, F = y(), I = _(), L = n(() => !!F["option-extra"]);
+		return (n, _) => (d(), a("div", w, [o("div", { class: u(c.cards ? ["grid gap-3", !L.value && "sm:grid-cols-2"] : c.row ? "flex flex-row flex-wrap gap-x-6 gap-y-3" : "flex flex-col gap-3") }, [(d(!0), a(e, null, f(c.options, (e, f) => (d(), r(m(L.value ? "div" : "label"), {
 			key: e.label,
-			for: `${f(w)}-${i}`,
-			class: c(["group flex cursor-pointer gap-3 text-base text-heading select-none", [
-				e.disabled && "cursor-not-allowed opacity-50",
-				o.cards ? "items-start rounded-14 border border-border bg-surface p-4 transition-[border-color,background-color,box-shadow] duration-200 has-checked:border-primary has-checked:bg-primary/5 has-checked:ring-1 has-checked:ring-primary/30 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring" : "w-fit items-center",
-				o.cards && !e.disabled && "hover:border-primary/40 hover:bg-accent-hover has-checked:hover:border-primary has-checked:hover:bg-primary/5"
+			for: L.value ? void 0 : `${g(I)}-${f}`,
+			class: u(["group flex cursor-pointer gap-3 text-base text-heading select-none", [
+				c.cards ? "relative items-start rounded-14 border border-border bg-surface p-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
+				e.disabled && ["cursor-not-allowed", c.cards ? "opacity-60" : "opacity-50"],
+				L.value && "flex-wrap",
+				c.cards && !e.disabled && "hover:border-primary/40 hover:bg-accent-hover has-checked:hover:border-primary has-checked:hover:bg-primary/5"
 			]])
-		}, [r("span", { class: c(["relative inline-flex size-5 shrink-0", o.cards && "mt-px"]) }, [g(r("input", {
-			id: `${f(w)}-${i}`,
-			"onUpdate:modelValue": m[0] ||= (e) => s.value = e,
-			type: "radio",
-			name: `${o.name}-${f(w)}`,
-			value: e.value,
-			disabled: e.disabled,
-			class: c(["peer size-5 cursor-pointer appearance-none rounded-full border border-muted/70 bg-surface transition-colors duration-200 group-hover:border-muted checked:border-primary checked:bg-primary group-hover:checked:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-surface-sunken", !o.cards && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"])
-		}, null, 10, b), [[h, s.value]]), m[1] ||= r("span", {
-			class: "pointer-events-none absolute inset-0 m-auto size-2 scale-0 rounded-full bg-white transition-transform duration-200 peer-checked:scale-100 motion-reduce:transition-none",
-			"aria-hidden": "true"
-		}, null, -1)], 2), r("span", x, [r("span", { class: c(o.cards ? "font-semibold" : "font-medium") }, d(e.label), 3), o.cards && e.description ? (l(), n("span", {
-			key: 0,
-			class: "mt-0.5 line-clamp-2 text-xs leading-relaxed text-muted",
-			title: e.description
-		}, d(e.description), 9, S)) : t("", !0)])], 10, y))), 128))], 2), o.errorMsg ? (l(), n("p", C, [a(f(_), {
-			class: "size-4 shrink-0",
-			"aria-hidden": "true"
-		}), i(" " + d(o.errorMsg), 1)])) : t("", !0)]));
+		}, {
+			default: x(() => [
+				(d(), r(m(L.value ? "label" : "span"), {
+					for: L.value ? `${g(I)}-${f}` : void 0,
+					class: u(L.value ? [
+						"flex min-w-0 flex-1 basis-[240px] gap-3 after:absolute after:inset-0",
+						c.cards ? "items-start" : "items-center",
+						e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+					] : "contents")
+				}, {
+					default: x(() => [o("span", { class: u(c.cards && !c.showRadio ? "sr-only" : ["relative inline-flex size-[18px] shrink-0", c.cards && "mt-0.5"]) }, [S(o("input", {
+						id: `${g(I)}-${f}`,
+						"onUpdate:modelValue": _[0] ||= (e) => l.value = e,
+						type: "radio",
+						name: `${c.name}-${g(I)}`,
+						value: e.value,
+						disabled: e.disabled,
+						class: u(["peer size-[18px] cursor-pointer appearance-none rounded-full border border-muted/70 bg-background transition-colors duration-200 group-hover:enabled:not-checked:border-primary/60 checked:border-primary checked:bg-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-surface-sunken motion-reduce:transition-none", !c.cards && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"])
+					}, null, 10, T), [[b, l.value]]), _[1] ||= o("span", {
+						class: "pointer-events-none absolute inset-0 m-auto size-1.5 scale-0 rounded-full bg-white transition-transform duration-200 peer-checked:scale-100 motion-reduce:transition-none",
+						"aria-hidden": "true"
+					}, null, -1)], 2), p(n.$slots, "option", {
+						option: e,
+						checked: l.value === e.value
+					}, () => [e.icon ? (d(), a("span", E, [(d(), r(m(e.icon), { class: "size-5" }))])) : e.logo ? (d(), a("img", {
+						key: 1,
+						src: e.logo,
+						alt: "",
+						class: "size-8 shrink-0 rounded-10 border border-border bg-surface object-contain p-1"
+					}, null, 8, D)) : i("", !0), o("span", O, [e.badge ? (d(), a("span", k, [o("span", { class: u(c.cards ? "font-semibold" : "font-medium") }, h(e.label), 3), o("span", { class: u(["rounded-full px-2 py-0.5 text-xs font-medium", P[e.badgeColor ?? "primary"]]) }, h(e.badge), 3)])) : (d(), a("span", {
+						key: 1,
+						class: u(c.cards ? "font-semibold" : "font-medium")
+					}, h(e.label), 3)), c.cards && e.description ? (d(), a("span", A, h(e.description), 1)) : i("", !0)])])]),
+					_: 2
+				}, 1032, ["for", "class"])),
+				L.value ? (d(), a("div", j, [p(n.$slots, "option-extra", {
+					option: e,
+					checked: l.value === e.value
+				})])) : i("", !0),
+				s(t, {
+					"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
+					"enter-from-class": "scale-50 opacity-0",
+					"leave-active-class": "transition duration-100 ease-in motion-reduce:transition-none",
+					"leave-to-class": "scale-50 opacity-0"
+				}, {
+					default: x(() => [c.cards && !c.showRadio && !L.value && l.value === e.value ? (d(), a("span", M, [s(g(C), {
+						class: "size-2.5",
+						"stroke-width": 3.5
+					})])) : i("", !0)]),
+					_: 2
+				}, 1024)
+			]),
+			_: 2
+		}, 1032, ["for", "class"]))), 128))], 2), c.errorMsg ? (d(), a("p", N, h(c.errorMsg), 1)) : i("", !0)]));
 	}
 });
 //#endregion
-export { w as default };
+export { P as default };

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

@@ -4,7 +4,7 @@ export interface Props {
     value?: number;
     /** The amount that fills the ring. */
     max?: number;
-    /** Diameter: `small` 32px, `normal` 48px, `large` 80px, or a number of pixels (cloud-ui's `size`, e.g. 44). */
+    /** Diameter: `small` 32px, `normal` 44px (cloud-ui's default), `large` 80px, or a number of pixels. */
     size?: "small" | "normal" | "large" | number;
     /** Ring thickness in pixels. Defaults to 3, 4 and 6 for the named sizes, and about a tenth of a numeric size. */
     strokeWidth?: number;
@@ -12,8 +12,8 @@ export interface Props {
     showLabel?: boolean;
     /** Replaces the percentage in the centre and for screen readers, e.g. "3/5". Keep it to 4 characters. */
     valueText?: string;
-    /** Ring colour. `auto` is for quotas: primary, then warning from 80% and danger from 95%, as in AcProgress. */
-    color?: Tone | "auto";
+    /** Ring colour. `progress` follows the value as in cloud-ui: danger below 30%, warning to 59%, info to 99%, success at 100%. `auto` is for quotas: primary, then warning from 80% and danger from 95%, as in AcProgress. */
+    color?: Tone | "auto" | "progress";
     /** The accessible name, e.g. "CPU usage" or "Image sync to nyc1". Without it the ring is read as "Progress". */
     label?: string;
     /** For work of unknown length: a spinning quarter ring with no value. */
@@ -26,7 +26,7 @@ type __VLS_Slots = {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: string;
     value: number;
-    color: Tone | "auto";
+    color: Tone | "auto" | "progress";
     max: number;
     size: "small" | "normal" | "large" | number;
     strokeWidth: number;

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

@@ -29,7 +29,7 @@ var d = [
 			default: !0
 		},
 		valueText: { default: "" },
-		color: { default: "primary" },
+		color: { default: "progress" },
 		label: { default: "" },
 		indeterminate: {
 			type: Boolean,
@@ -45,10 +45,10 @@ var d = [
 				text: "text-[9px]"
 			},
 			normal: {
-				px: 48,
+				px: 44,
 				stroke: 4,
-				box: "size-12",
-				text: "text-xs"
+				box: "size-11",
+				text: "text-xm"
 			},
 			large: {
 				px: 80,
@@ -65,7 +65,10 @@ var d = [
 		}, v = e(() => typeof h.size == "number" ? null : g[h.size]), y = e(() => v.value?.px ?? Math.max(16, h.size)), b = e(() => h.strokeWidth ?? v.value?.stroke ?? Math.max(2, Math.round(y.value / 11))), x = e(() => (y.value - b.value) / 2), S = e(() => v.value ? void 0 : {
 			width: `${y.value}px`,
 			height: `${y.value}px`
-		}), C = e(() => v.value ? void 0 : { fontSize: `${Math.min(24, Math.max(9, Math.round(y.value * .23)))}px` }), w = e(() => h.max <= 0 ? 0 : Math.min(100, Math.max(0, h.value / h.max * 100))), T = e(() => h.color === "auto" ? w.value >= 95 ? "danger" : w.value >= 80 ? "warning" : "primary" : h.color), E = e(() => h.valueText || `${Math.round(w.value)}%`);
+		}), C = e(() => v.value ? void 0 : { fontSize: `${Math.min(24, Math.max(9, Math.round(y.value * .23)))}px` }), w = e(() => h.max <= 0 ? 0 : Math.min(100, Math.max(0, h.value / h.max * 100))), T = e(() => h.color === "progress" ? D() : h.color === "auto" ? w.value >= 95 ? "danger" : w.value >= 80 ? "warning" : "primary" : h.color), E = e(() => h.valueText || `${Math.round(w.value)}%`);
+		function D() {
+			return h.indeterminate ? "primary" : w.value >= 100 ? "success" : w.value >= 60 ? "info" : w.value >= 30 ? "warning" : "danger";
+		}
 		return (e, h) => (c(), n("div", {
 			role: "progressbar",
 			"aria-label": a.label || "Progress",
@@ -87,21 +90,21 @@ var d = [
 			cx: y.value / 2,
 			cy: y.value / 2,
 			r: x.value,
-			class: "stroke-muted/15",
+			class: "stroke-border",
 			"stroke-width": b.value
 		}, null, 8, p), r("circle", {
 			cx: y.value / 2,
 			cy: y.value / 2,
 			r: x.value,
-			class: o(["stroke-current transition-[stroke-dashoffset,color,opacity] duration-700 ease-out motion-reduce:transition-none", !a.indeterminate && w.value === 0 && "opacity-0"]),
-			"stroke-width": b.value,
+			class: o(["stroke-current transition-[stroke-dashoffset,color,opacity] duration-[800ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none", !a.indeterminate && w.value === 0 && "opacity-0"]),
+			"stroke-width": b.value + .5,
 			"stroke-linecap": "round",
 			pathLength: "100",
 			"stroke-dasharray": "100",
 			"stroke-dashoffset": a.indeterminate ? 75 : 100 - w.value
 		}, null, 10, m)], 10, f)), e.$slots.default || a.showLabel && !a.indeterminate ? (c(), n("span", {
 			key: 0,
-			class: o(["pointer-events-none absolute inset-0 flex items-center justify-center leading-none font-semibold tracking-tight text-heading tabular-nums select-none", v.value?.text]),
+			class: o(["pointer-events-none absolute inset-0 flex items-center justify-center leading-none font-bold tracking-[-0.03em] text-heading tabular-nums select-none", v.value?.text]),
 			style: s(C.value),
 			"aria-hidden": "true"
 		}, [l(e.$slots, "default", {}, () => [i(u(E.value), 1)])], 6)) : t("", !0)], 14, d));