@ac-design/design-system 2.9.1 → 2.10.1

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

@@ -0,0 +1,200 @@
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcButton.js";
+import n from "./AcBadge.js";
+import { Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as ee, createTextVNode as te, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, nextTick as ne, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as re, onMounted as g, onUpdated as ie, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useId as S, useModel as ae, useSlots as C, watch as w, withCtx as T } from "vue";
+import { ChevronDown as oe } from "@lucide/vue";
+//#region src/lib/components/AcPopover.vue?vue&type=script&setup=true&lang.ts
+var se = {
+	key: 1,
+	class: "flex shrink-0 flex-wrap items-center gap-2 border-t border-border px-4 py-3"
+}, ce = { class: "ml-auto flex items-center gap-2" }, E = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", D = /*@__PURE__*/ d({
+	__name: "AcPopover",
+	props: /*@__PURE__*/ f({
+		label: { default: "" },
+		title: { default: "" },
+		count: { default: 0 },
+		align: { default: "start" },
+		placement: { default: "bottom" },
+		width: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["open", "close"], ["update:open"]),
+	setup(d, { expose: f, emit: D }) {
+		let O = d, k = ae(d, "open"), A = D, j = C(), le = {
+			sm: 240,
+			md: 288,
+			lg: 384
+		}, ue = {
+			"top-start": "origin-top-left",
+			"top-end": "origin-top-right",
+			"bottom-start": "origin-bottom-left",
+			"bottom-end": "origin-bottom-right"
+		}, M = S(), N = `${M}-panel`, P = `${M}-title`, F = v(null), I = v(null), L = v(null), R = v({}), z = v(!1), B = v(""), V = null, H = !0, de = a(() => ue[`${z.value ? "top" : "bottom"}-${O.align}`]), fe = a(() => O.title ? { "aria-labelledby": P } : O.label ? { "aria-label": O.label } : { "aria-labelledby": B.value || void 0 });
+		function U() {
+			V = F.value?.querySelector("button, a[href], [tabindex]") ?? null, V && (V.id || (V.id = `${M}-trigger`), B.value = V.id, V.setAttribute("aria-haspopup", "dialog"), V.setAttribute("aria-expanded", String(k.value)), k.value ? V.setAttribute("aria-controls", N) : V.removeAttribute("aria-controls"));
+		}
+		function W() {
+			O.disabled || (k.value = !0);
+		}
+		function G(e = !0) {
+			k.value &&= (H = e, !1);
+		}
+		function K() {
+			k.value ? G() : W();
+		}
+		function q(e) {
+			return [...e.querySelectorAll(E)].filter((e) => e.tabIndex >= 0 && !e.closest("[inert]") && e.getClientRects().length > 0);
+		}
+		function pe() {
+			if (!L.value) return;
+			let e = L.value.querySelector("[autofocus]");
+			((e && (e.matches(E) ? e : e.querySelector(E))) ?? q(L.value)[0] ?? L.value).focus();
+		}
+		function me() {
+			let e = q(document).filter((e) => !I.value?.contains(e));
+			(e[(V ? e.indexOf(V) : -1) + 1] ?? V)?.focus();
+		}
+		function he() {
+			G(!1), V?.focus();
+		}
+		function ge() {
+			G(!1), me();
+		}
+		function J(e) {
+			if (F.value?.contains(e) || I.value?.contains(e)) return !0;
+			let t = e;
+			for (; t && t.parentNode !== document.body;) t = t.parentNode;
+			return !!(t instanceof HTMLElement && t.hasAttribute("data-ac-ds") && I.value && I.value.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING);
+		}
+		function Y(e) {
+			e.key === "Escape" && k.value && !e.defaultPrevented && (e.preventDefault(), G());
+		}
+		function _e(e) {
+			let t = e.relatedTarget;
+			t && !J(t) && G(!1);
+		}
+		function X(e) {
+			J(e.target) || G(!1);
+		}
+		function Z() {
+			if (!V || !I.value) return;
+			let t = V.getBoundingClientRect(), n = e(), r = typeof O.width == "number" ? O.width : le[O.width], i = Math.min(r, n.width - 16);
+			I.value.style.width = `${i}px`;
+			let a = I.value.offsetHeight, o = n.bottom - t.bottom - 8 - 8, s = t.top - n.top - 8 - 8, c = O.placement === "top" ? s >= a || s > o : o < a && s > o, l = (O.align === "end" ? t.right - i : t.left) - n.left;
+			z.value = !c, R.value = {
+				[c ? "bottom" : "top"]: `${c ? n.bottom - t.top + 8 : t.bottom + 8 - n.top}px`,
+				left: `${Math.max(8, Math.min(l, n.width - i - 8))}px`,
+				width: `${i}px`,
+				maxHeight: `${Math.max(c ? s : o, 160)}px`
+			};
+		}
+		function Q(e) {
+			e?.target instanceof Node && I.value?.contains(e.target) || Z();
+		}
+		function $(e) {
+			e ? (document.addEventListener("pointerdown", X, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("pointerdown", X, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
+		}
+		return w(k, async (e) => {
+			if (U(), $(e), !e) {
+				H && I.value?.contains(document.activeElement) && V?.focus(), H = !0, A("close");
+				return;
+			}
+			await ne(), Z(), pe(), A("open");
+		}), w(() => [
+			O.width,
+			O.align,
+			O.placement
+		], () => k.value && Z()), g(U), ie(U), re(() => $(!1)), f({
+			open: W,
+			close: () => G(),
+			toggle: K
+		}), (e, a) => (_(), c("div", {
+			ref_key: "root",
+			ref: F,
+			class: "inline-flex",
+			"data-ac-ds": "",
+			"data-testid": "ac-popover",
+			onKeydown: Y
+		}, [j.trigger ? y(e.$slots, "trigger", {
+			open: k.value,
+			toggle: K
+		}, void 0, void 0, 0) : (_(), o(t, {
+			key: 1,
+			variant: "outlined",
+			color: d.count > 0 ? "primary" : "neutral",
+			disabled: d.disabled,
+			class: "grow",
+			onClick: K
+		}, ee({
+			"icon-right": T(() => [u(x(oe), {
+				class: m(["transition-transform duration-200 motion-reduce:transition-none", k.value && "rotate-180"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])]),
+			default: T(() => [te(" " + b(d.label) + " ", 1), d.count > 0 ? (_(), o(n, {
+				key: 0,
+				color: "primary",
+				label: String(d.count)
+			}, null, 8, ["label"])) : s("", !0)]),
+			_: 2
+		}, [j.icon ? {
+			name: "icon",
+			fn: T(() => [y(e.$slots, "icon")]),
+			key: "0"
+		} : void 0]), 1032, ["color", "disabled"])), (_(), o(r, { to: "body" }, [u(i, {
+			"enter-active-class": "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none",
+			"enter-from-class": "opacity-0 motion-safe:scale-95",
+			"leave-active-class": "pointer-events-none transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
+			"leave-to-class": "opacity-0 motion-safe:scale-95"
+		}, {
+			default: T(() => [k.value ? (_(), c("div", {
+				key: 0,
+				ref_key: "layer",
+				ref: I,
+				class: m(["fixed z-[90] flex flex-col", de.value]),
+				style: h(R.value),
+				"data-ac-ds": "",
+				"data-testid": "ac-popover-panel",
+				onKeydown: Y,
+				onFocusout: _e
+			}, [
+				l("span", {
+					tabindex: "0",
+					class: "sr-only",
+					onFocus: he
+				}, null, 32),
+				l("div", p({
+					id: N,
+					ref_key: "panel",
+					ref: L,
+					role: "dialog",
+					tabindex: "-1"
+				}, fe.value, { class: "flex min-h-0 flex-col overflow-hidden rounded-14 border border-border bg-surface text-base text-body shadow-lg outline-none" }), [
+					d.title ? (_(), c("h2", {
+						key: 0,
+						id: P,
+						class: "m-0 shrink-0 px-4 pt-4 text-base leading-5 font-semibold tracking-normal text-heading"
+					}, b(d.title), 1)) : s("", !0),
+					l("div", { class: m(["ac-scrollbar min-h-0 overflow-y-auto p-4", d.title && "pt-3"]) }, [y(e.$slots, "default")], 2),
+					j.footer || j["footer-left"] ? (_(), c("div", se, [y(e.$slots, "footer-left"), l("div", ce, [y(e.$slots, "footer")])])) : s("", !0)
+				], 16),
+				l("span", {
+					tabindex: "0",
+					class: "sr-only",
+					onFocus: ge
+				}, null, 32)
+			], 38)) : s("", !0)]),
+			_: 3
+		})]))], 544));
+	}
+});
+//#endregion
+export { D as default };

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 import type { Tone } from "./types";
 /** One coloured part of a segmented bar. */
 export interface ProgressSegment {
@@ -7,18 +8,37 @@ export interface ProgressSegment {
     color?: Tone | "pending" | "neutral";
     /** Name in the legend and the accessible summary, e.g. "Healthy". */
     label?: string;
+    /** `soft` fills at half strength, for parts that matter less: skipped, pending or idle time. */
+    variant?: "solid" | "soft";
+}
+/** A point drawn on the track, e.g. a hard limit or an average. */
+export interface ProgressMarker {
+    /** Where the marker sits, in the bar's unit: from 0 to `max`. */
+    value: number;
+    /** Shown on hover and read by screen readers, e.g. "Hard limit 16 cores". */
+    label?: string;
+    /** `tick` is a short upright line, for a limit; `dot` is a round handle, for a single point such as an average. */
+    shape?: "tick" | "dot";
+    /** Marker colour. A tick is `neutral` and a dot `primary` unless you set it. */
+    color?: Tone | "neutral";
 }
 export interface Props {
     /** Current amount, from 0 to `max`. Ignored while `indeterminate` or when `segments` is set. */
     value?: number;
     /** The amount that fills the bar: 100 for a single value. With `segments`, the sum of the segments unless you set it. */
     max?: number;
-    /** Splits the bar into coloured parts, e.g. healthy, warning and hard-limit quotas: `{ value, color?, label? }[]`. Replaces `value`. */
+    /** Splits the bar into coloured parts, e.g. healthy, warning and hard-limit quotas: `{ value, color?, label?, variant? }[]`. Replaces `value`. */
     segments?: ProgressSegment[];
     /** Segments only: where the legend goes. `auto` puts it to the `right` of the bar when any segment has a `label`; `bottom` puts it under; `false` hides it. */
     legend?: boolean | "auto" | "right" | "bottom";
+    /** Segments only: leaves a 2px gap between parts so neighbours with close colours stay apart. */
+    gap?: boolean;
+    /** Points drawn on the track at `value` of `max`, e.g. a hard limit or an average: `{ value, label?, shape?, color? }[]`. */
+    markers?: ProgressMarker[];
     /** Text above the bar, e.g. "Storage". Also the bar's accessible name. */
     label?: string;
+    /** Classes for the label, e.g. `sr-only` to hide it when a card title already names the bar, while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Shows the value to the right of the label: the percentage, or `valueText` when set. */
     showValue?: boolean;
     /** Replaces the percentage, e.g. "7.2 GiB of 10 GiB". Also read by screen readers. */
@@ -37,10 +57,13 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     color: Tone | "auto";
     max: number;
     size: "small" | "normal" | "large";
+    gap: boolean;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     indeterminate: boolean;
     valueText: string;
     showValue: boolean;
     segments: ProgressSegment[];
+    markers: ProgressMarker[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,24 +1,22 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, useId as p } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as ee, defineComponent as a, mergeProps as te, normalizeClass as o, normalizeStyle as s, openBlock as c, renderList as l, toDisplayString as u, unref as d, useAttrs as f, useId as p } from "vue";
 //#region src/lib/components/AcProgress.vue?vue&type=script&setup=true&lang.ts
 var m = {
-	class: "w-full",
-	"data-ac-ds": "",
-	"data-testid": "ac-progress"
-}, h = {
 	key: 0,
-	class: "mb-2 flex items-baseline justify-between gap-3 text-base"
-}, g = ["id"], _ = ["aria-label"], v = {
-	key: 0,
-	class: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1",
-	"aria-hidden": "true"
-}, y = { class: "tabular-nums" }, b = [
+	class: "flex items-baseline justify-between gap-3 text-base"
+}, h = ["id"], g = ["id"], _ = ["aria-label", "aria-describedby"], v = [
 	"aria-labelledby",
 	"aria-label",
+	"aria-describedby",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-busy"
-], x = /*@__PURE__*/ o({
+], y = ["title"], b = {
+	key: 0,
+	class: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1",
+	"aria-hidden": "true"
+}, x = { class: "tabular-nums" }, S = /*@__PURE__*/ a({
+	inheritAttrs: !1,
 	__name: "AcProgress",
 	props: {
 		value: { default: 0 },
@@ -28,7 +26,22 @@ var m = {
 			type: [Boolean, String],
 			default: "auto"
 		},
+		gap: {
+			type: Boolean,
+			default: !1
+		},
+		markers: { default: () => [] },
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		showValue: {
 			type: Boolean,
 			default: !1
@@ -41,18 +54,26 @@ var m = {
 		},
 		size: { default: "normal" }
 	},
-	setup(o) {
-		let x = o, S = {
+	setup(a) {
+		let S = a, C = {
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, C = {
-			...S,
+		}, w = {
+			...C,
 			pending: "bg-pending",
 			neutral: "bg-chart-8"
-		}, w = [
+		}, T = {
+			primary: "bg-primary/50",
+			info: "bg-info/50",
+			success: "bg-success/50",
+			warning: "bg-warning/50",
+			danger: "bg-danger/50",
+			pending: "bg-pending/50",
+			neutral: "bg-muted/40"
+		}, E = [
 			"bg-chart-1",
 			"bg-chart-2",
 			"bg-chart-3",
@@ -61,70 +82,131 @@ var m = {
 			"bg-chart-6",
 			"bg-chart-7",
 			"bg-chart-8"
-		], T = {
+		], D = [
+			"bg-chart-1/50",
+			"bg-chart-2/50",
+			"bg-chart-3/50",
+			"bg-chart-4/50",
+			"bg-chart-5/50",
+			"bg-chart-6/50",
+			"bg-chart-7/50",
+			"bg-muted/40"
+		], O = {
+			...C,
+			neutral: "bg-muted"
+		}, k = {
 			small: "h-1",
 			normal: "h-1.5",
 			large: "h-2.5"
-		}, E = p(), D = t(() => !!x.segments?.length), O = t(() => (x.segments ?? []).reduce((e, t) => e + Math.max(0, t.value), 0)), k = t(() => x.max ?? (D.value ? O.value : 100)), A = t(() => {
-			if (k.value <= 0) return 0;
-			let e = D.value ? O.value : x.value;
-			return Math.min(100, Math.max(0, e / k.value * 100));
-		}), j = t(() => (x.segments ?? []).map((e, t) => ({
-			key: `${t}-${e.label ?? ""}`,
-			label: e.label ?? "",
-			value: e.value,
-			fill: e.color ? C[e.color] : w[t % w.length],
-			width: k.value > 0 ? Math.max(0, e.value) / k.value * 100 : 0
-		}))), M = t(() => !D.value || x.legend === !1 ? null : x.legend === "bottom" ? "bottom" : x.legend === "auto" ? j.value.some((e) => e.label) ? "right" : null : "right"), N = t(() => {
-			let e = j.value.map((e, t) => `${e.label || `Part ${t + 1}`} ${e.value}`).join(", ");
-			return x.label ? `${x.label}: ${e}` : e;
-		}), P = t(() => x.color === "auto" ? A.value >= 95 ? "danger" : A.value >= 80 ? "warning" : "primary" : x.color), F = t(() => x.valueText || `${Math.round(A.value)}%`), I = t(() => x.indeterminate && !D.value), L = t(() => !!x.label || x.showValue && !I.value);
-		return (t, p) => (l(), r("div", m, [L.value ? (l(), r("div", h, [o.label ? (l(), r("span", {
-			key: 0,
-			id: `${f(E)}-label`,
-			class: "min-w-0 truncate font-medium text-heading"
-		}, d(o.label), 9, g)) : n("", !0), o.showValue && !I.value ? (l(), r("span", {
-			key: 1,
-			class: s(["ml-auto shrink-0 text-xs tabular-nums", o.color === "auto" && P.value !== "primary" ? P.value === "danger" ? "font-medium text-danger-strong" : "font-medium text-warning-strong" : "text-muted"]),
-			"aria-hidden": "true"
-		}, d(F.value), 3)) : n("", !0)])) : n("", !0), D.value ? (l(), r("div", {
-			key: 1,
-			class: s(["flex", M.value === "bottom" ? "flex-col gap-2" : "flex-wrap items-center gap-x-4 gap-y-2"])
-		}, [i("div", {
-			role: "img",
-			"aria-label": N.value,
-			class: s(["flex min-w-[120px] flex-1 overflow-hidden rounded-full bg-surface-sunken", T[o.size]])
-		}, [(l(!0), r(e, null, u(j.value, (t) => (l(), r(e, { key: t.key }, [t.width > 0 ? (l(), r("div", {
-			key: 0,
-			class: s(["h-full shrink-0 transition-[width] duration-300 ease-out motion-reduce:transition-none", t.fill]),
-			style: c({ width: `${t.width}%` })
-		}, null, 6)) : n("", !0)], 64))), 128))], 10, _), M.value ? (l(), r("ul", v, [(l(!0), r(e, null, u(j.value, (e) => (l(), r("li", {
-			key: e.key,
-			class: "flex items-center gap-1.5 text-xs leading-4 text-muted"
-		}, [
-			i("span", { class: s(["size-1.5 shrink-0 rounded-full", e.fill]) }, null, 2),
-			a(" " + d(e.label) + " ", 1),
-			i("span", y, d(e.value), 1)
-		]))), 128))])) : n("", !0)], 2)) : (l(), r("div", {
-			key: 2,
-			role: "progressbar",
-			"aria-labelledby": o.label ? `${f(E)}-label` : void 0,
-			"aria-label": o.label ? void 0 : "Progress",
-			"aria-valuemin": "0",
-			"aria-valuemax": o.indeterminate ? void 0 : k.value,
-			"aria-valuenow": o.indeterminate ? void 0 : Math.min(k.value, Math.max(0, o.value)),
-			"aria-valuetext": o.indeterminate ? void 0 : F.value,
-			"aria-busy": o.indeterminate || void 0,
-			class: s(["relative w-full overflow-hidden rounded-full bg-surface-sunken", T[o.size]])
-		}, [o.indeterminate ? (l(), r("div", {
-			key: 0,
-			class: s(["ac-progress-indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:w-full motion-reduce:opacity-40", S[P.value]])
-		}, null, 2)) : (l(), r("div", {
-			key: 1,
-			class: s(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", S[P.value]]),
-			style: c({ width: `${A.value}%` })
-		}, null, 6))], 10, b))]));
+		}, A = {
+			small: "h-2.5",
+			normal: "h-3",
+			large: "h-4"
+		}, j = {
+			small: "size-2.5",
+			normal: "size-3",
+			large: "size-4"
+		}, M = f(), N = p(), P = t(() => {
+			let { "aria-label": e, "aria-labelledby": t, "aria-describedby": n, ...r } = M;
+			return r;
+		}), F = t(() => typeof M["aria-label"] == "string" ? M["aria-label"] : ""), I = t(() => typeof M["aria-labelledby"] == "string" ? M["aria-labelledby"] : ""), L = t(() => !!S.segments?.length), R = t(() => (S.segments ?? []).reduce((e, t) => e + Math.max(0, t.value), 0)), z = t(() => S.max ?? (L.value ? R.value : 100)), B = t(() => z.value <= 0 ? 0 : $(L.value ? R.value : S.value)), V = t(() => (S.segments ?? []).map((e, t) => {
+			let n = e.variant === "soft", r = e.color ? (n ? T : w)[e.color] : (n ? D : E)[t % E.length];
+			return {
+				key: `${t}-${e.label ?? ""}`,
+				label: e.label ?? "",
+				value: e.value,
+				fill: r,
+				grow: Math.max(0, e.value)
+			};
+		})), H = t(() => Math.max(0, z.value - R.value)), U = t(() => !L.value || S.legend === !1 ? null : S.legend === "bottom" ? "bottom" : S.legend === "auto" ? V.value.some((e) => e.label) ? "right" : null : "right"), W = t(() => F.value || S.label), G = t(() => {
+			let e = V.value.map((e, t) => `${e.label || `Part ${t + 1}`} ${e.value}`).join(", ");
+			return W.value ? `${W.value}: ${e}` : e;
+		}), K = t(() => S.color === "auto" ? B.value >= 95 ? "danger" : B.value >= 80 ? "warning" : "primary" : S.color), q = t(() => S.valueText || `${Math.round(B.value)}%`), J = t(() => S.indeterminate && !L.value), ne = t(() => !!S.label || S.showValue && !J.value), Y = t(() => J.value ? [] : S.markers.map((e, t) => {
+			let n = e.shape ?? "tick", r = $(e.value);
+			return {
+				key: `${t}-${e.label ?? ""}`,
+				shape: n,
+				position: r,
+				text: e.label || `Marker at ${Math.round(r)}%`,
+				fill: O[e.color ?? (n === "dot" ? "primary" : "neutral")]
+			};
+		})), X = t(() => Y.value.map((e) => e.text).join(", ")), Z = t(() => {
+			if (!F.value) return I.value ? I.value : S.label ? `${N}-label` : void 0;
+		}), Q = t(() => {
+			let e = [M["aria-describedby"], X.value ? `${N}-markers` : ""].filter(Boolean);
+			return e.length ? e.join(" ") : void 0;
+		});
+		function $(e) {
+			return z.value <= 0 ? 0 : Math.min(100, Math.max(0, e / z.value * 100));
+		}
+		return (t, f) => (c(), r("div", te({
+			class: "w-full",
+			"data-ac-ds": "",
+			"data-testid": "ac-progress"
+		}, P.value), [
+			ne.value ? (c(), r("div", m, [a.label ? (c(), r("span", {
+				key: 0,
+				id: `${d(N)}-label`,
+				class: o(["mb-2 min-w-0 truncate font-medium text-heading", a.labelClass])
+			}, u(a.label), 11, h)) : n("", !0), a.showValue && !J.value ? (c(), r("span", {
+				key: 1,
+				class: o(["mb-2 ml-auto shrink-0 text-xs tabular-nums", a.color === "auto" && K.value !== "primary" ? K.value === "danger" ? "font-medium text-danger-strong" : "font-medium text-warning-strong" : "text-muted"]),
+				"aria-hidden": "true"
+			}, u(q.value), 3)) : n("", !0)])) : n("", !0),
+			X.value ? (c(), r("span", {
+				key: 1,
+				id: `${d(N)}-markers`,
+				hidden: ""
+			}, u(X.value), 9, g)) : n("", !0),
+			i("div", { class: o(L.value && (U.value === "bottom" ? "flex flex-col gap-2" : "flex flex-wrap items-center gap-x-4 gap-y-2")) }, [i("div", { class: o(["relative", [L.value && "min-w-[120px] flex-1", Y.value.length && "py-[3px]"]]) }, [L.value ? (c(), r("div", {
+				key: 0,
+				role: "img",
+				"aria-label": G.value,
+				"aria-describedby": Q.value,
+				class: o(["flex w-full overflow-hidden rounded-full bg-surface-sunken", [k[a.size], a.gap && "gap-0.5"]])
+			}, [(c(!0), r(e, null, l(V.value, (t) => (c(), r(e, { key: t.key }, [t.grow > 0 ? (c(), r("div", {
+				key: 0,
+				class: o(["h-full min-w-1 basis-0 transition-[flex-grow] duration-300 ease-out motion-reduce:transition-none", t.fill]),
+				style: s({ flexGrow: t.grow })
+			}, null, 6)) : n("", !0)], 64))), 128)), H.value > 0 ? (c(), r("div", {
+				key: 0,
+				class: "h-full basis-0",
+				style: s({ flexGrow: H.value })
+			}, null, 4)) : n("", !0)], 10, _)) : (c(), r("div", {
+				key: 1,
+				role: "progressbar",
+				"aria-labelledby": Z.value,
+				"aria-label": F.value || (Z.value ? void 0 : "Progress"),
+				"aria-describedby": Q.value,
+				"aria-valuemin": "0",
+				"aria-valuemax": a.indeterminate ? void 0 : z.value,
+				"aria-valuenow": a.indeterminate ? void 0 : Math.min(z.value, Math.max(0, a.value)),
+				"aria-valuetext": a.indeterminate ? void 0 : q.value,
+				"aria-busy": a.indeterminate || void 0,
+				class: o(["relative w-full overflow-hidden rounded-full bg-surface-sunken", k[a.size]])
+			}, [a.indeterminate ? (c(), r("div", {
+				key: 0,
+				class: o(["ac-progress-indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:w-full motion-reduce:opacity-40", C[K.value]])
+			}, null, 2)) : (c(), r("div", {
+				key: 1,
+				class: o(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", C[K.value]]),
+				style: s({ width: `${B.value}%` })
+			}, null, 6))], 10, v)), (c(!0), r(e, null, l(Y.value, (e) => (c(), r("span", {
+				key: e.key,
+				class: o(["absolute top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center", e.shape === "tick" ? ["w-2", A[a.size]] : j[a.size]]),
+				style: s({ left: `${e.position}%` }),
+				title: e.text,
+				"aria-hidden": "true"
+			}, [i("span", { class: o(["rounded-full", [e.fill, e.shape === "tick" ? "h-full w-0.5" : "size-full border-2 border-surface shadow-sm"]]) }, null, 2)], 14, y))), 128))], 2), U.value ? (c(), r("ul", b, [(c(!0), r(e, null, l(V.value, (e) => (c(), r("li", {
+				key: e.key,
+				class: "flex items-center gap-1.5 text-xs leading-4 text-muted"
+			}, [
+				i("span", { class: o(["size-1.5 shrink-0 rounded-full", e.fill]) }, null, 2),
+				ee(" " + u(e.label) + " ", 1),
+				i("span", x, u(e.value), 1)
+			]))), 128))])) : n("", !0)], 2)
+		], 16));
 	}
 });
 //#endregion
-export { x as default };
+export { S as default };