@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,88 +1,104 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createTextVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+import { statusMeta as e } from "./status.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
 //#region src/lib/components/AcBadge.vue?vue&type=script&setup=true&lang.ts
-var l = /*@__PURE__*/ i({
+var d = {
+	key: 0,
+	class: "relative flex size-1.5 shrink-0",
+	"aria-hidden": "true"
+}, f = /*@__PURE__*/ o({
 	__name: "AcBadge",
 	props: {
-		label: { default: "Default" },
-		color: { default: "default" },
-		variant: { default: "solid" },
+		label: { default: void 0 },
+		color: { default: void 0 },
+		variant: { default: void 0 },
 		rounded: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		dot: {
 			type: Boolean,
-			default: !1
+			default: void 0
+		},
+		status: { default: void 0 },
+		prefix: { default: "" },
+		pulse: {
+			type: Boolean,
+			default: void 0
 		}
 	},
-	setup(i) {
-		let l = i, u = {
+	setup(o) {
+		let f = o, p = {
 			primary: [
 				"bg-primary text-white",
-				"bg-primary-95 text-primary-10 ring-primary-40/20",
-				"ring-primary-70 text-primary-20",
-				"bg-primary-40"
+				"bg-primary/10 text-primary-strong ring-primary/25",
+				"ring-primary/40 text-primary-strong",
+				"bg-primary"
 			],
 			secondary: [
 				"bg-secondary text-white",
-				"bg-secondary-95 text-secondary-10 ring-secondary-40/20",
+				"bg-secondary-95 text-secondary-20 ring-secondary-40/25",
 				"ring-secondary-70 text-secondary",
 				"bg-secondary-40"
 			],
 			info: [
 				"bg-info text-white",
-				"bg-blue-95 text-blue-10 ring-blue-50/20",
-				"ring-blue-80 text-blue-30",
-				"bg-blue-50"
+				"bg-info/10 text-info-strong ring-info/25",
+				"ring-info/40 text-info-strong",
+				"bg-info"
 			],
 			success: [
 				"bg-success text-white",
-				"bg-green-95 text-green-10 ring-green-40/25",
-				"ring-green-70 text-green-20",
-				"bg-green-40"
+				"bg-success/10 text-success-strong ring-success/25",
+				"ring-success/40 text-success-strong",
+				"bg-success"
 			],
 			warning: [
 				"bg-warning text-on-warning",
-				"bg-yellow-95 text-yellow-10 ring-yellow-50/30",
-				"ring-yellow-70 text-yellow-20",
-				"bg-yellow-50"
+				"bg-warning/10 text-warning-strong ring-warning/30",
+				"ring-warning/45 text-warning-strong",
+				"bg-warning"
 			],
 			danger: [
 				"bg-danger text-white",
-				"bg-red-95 text-red-10 ring-red-40/20",
-				"ring-red-80 text-red-30",
-				"bg-red-40"
+				"bg-danger/10 text-danger-strong ring-danger/25",
+				"ring-danger/40 text-danger-strong",
+				"bg-danger"
+			],
+			pending: [
+				"bg-pending text-white",
+				"bg-pending/10 text-pending-strong ring-pending/25",
+				"ring-pending/40 text-pending-strong",
+				"bg-pending"
 			],
 			dark: [
-				"bg-gray-20 text-surface",
-				"bg-gray-95 text-gray-10 ring-gray-40/20",
-				"ring-gray-70 text-gray-20",
-				"bg-gray-50"
+				"bg-slate-20 text-surface",
+				"bg-slate-20/10 text-heading ring-slate-20/20",
+				"ring-slate-20/40 text-heading",
+				"bg-slate-20"
 			],
 			default: [
 				"bg-surface-sunken text-heading",
-				"bg-surface-muted text-heading ring-slate-50/20",
-				"ring-border-dark text-heading",
-				"bg-slate-50"
+				"bg-surface-sunken text-muted ring-border",
+				"ring-border text-muted",
+				"bg-muted"
 			]
-		}, d = e(() => {
-			let [e, t, n] = u[l.color];
+		}, m = t(() => f.status === void 0 ? null : e(f.status, { prefix: f.prefix })), h = t(() => f.color ?? m.value?.tone ?? "default"), g = t(() => f.variant ?? (m.value ? "light" : "solid")), _ = t(() => f.label || m.value?.label || "Default"), v = t(() => f.pulse ?? m.value?.transient ?? !1), y = t(() => f.dot ?? (!!m.value || v.value)), b = t(() => {
+			let [e, t, n] = p[h.value];
 			return {
 				solid: e,
 				light: `ring-1 ring-inset ${t}`,
 				outlined: `bg-surface ring-1 ring-inset ${n}`
-			}[l.variant];
-		}), f = e(() => l.variant === "solid" && l.color !== "default" ? "bg-surface" : u[l.color][3]);
-		return (e, l) => (o(), n("span", {
-			class: a(["inline-flex h-5.5 items-center gap-1.5 px-2 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [d.value, i.rounded ? "rounded-50" : "rounded-6"]]),
+			}[g.value];
+		}), x = t(() => g.value === "solid" && h.value !== "default" ? "bg-surface" : p[h.value][3]);
+		return (e, t) => (c(), r("span", {
+			class: s(["inline-flex h-5.5 items-center gap-1.5 px-2 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [b.value, o.rounded ? "rounded-full" : "rounded-6"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-badge"
-		}, [i.dot ? (o(), n("span", {
+		}, [y.value ? (c(), r("span", d, [v.value ? (c(), r("span", {
 			key: 0,
-			class: a(["size-1.5 shrink-0 rounded-full", f.value]),
-			"aria-hidden": "true"
-		}, null, 2)) : t("", !0), s(e.$slots, "default", {}, () => [r(c(i.label), 1)])], 2));
+			class: s(["absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping", x.value])
+		}, null, 2)) : n("", !0), i("span", { class: s(["relative size-1.5 rounded-full", x.value]) }, null, 2)])) : n("", !0), l(e.$slots, "default", {}, () => [a(u(_.value), 1)])], 2));
 	}
 });
 //#endregion
-export { l as default };
+export { f as default };

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

@@ -2,7 +2,7 @@ import type { Component } from "vue";
 export interface Props {
     /** Colour of the strip. `danger` and `warning` are announced to screen readers as alerts. */
     color?: "info" | "warning" | "danger" | "primary" | "neutral";
-    /** `subtle` tinted strip with a hairline, or `solid` full-colour fill for app-wide announcements. */
+    /** `subtle` 10% tint with a hairline and AA-contrast text, or `solid` full-colour fill for app-wide announcements. */
     variant?: "subtle" | "solid";
     /** Bold lead-in before the message, e.g. "Scheduled maintenance". */
     title?: string;

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

@@ -2,9 +2,12 @@ import { computed as e, createBlock as t, createCommentVNode as n, createElement
 import { ArrowRight as g, CircleAlert as _, Info as v, Megaphone as y, TriangleAlert as b, X as x } from "@lucide/vue";
 //#region src/lib/components/AcBanner.vue?vue&type=script&setup=true&lang.ts
 var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 sm:flex-row sm:flex-wrap sm:items-center" }, w = { class: "min-w-0" }, T = {
+	key: 0,
+	class: "font-semibold"
+}, E = {
 	key: 1,
 	"aria-hidden": "true"
-}, E = ["href"], D = /*@__PURE__*/ s({
+}, D = ["href"], O = /*@__PURE__*/ s({
 	__name: "AcBanner",
 	props: /*@__PURE__*/ c({
 		color: { default: "info" },
@@ -30,79 +33,76 @@ var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 s
 	}),
 	emits: /*@__PURE__*/ c(["action", "close"], ["update:open"]),
 	setup(s, { emit: c }) {
-		let D = s, O = h(s, "open"), k = c, A = {
+		let O = s, k = h(s, "open"), A = c, j = {
 			info: {
-				subtle: "border-blue-90 bg-blue-97 text-blue-20",
+				subtle: "border-info/25 bg-info/10 text-info-strong",
 				solid: "border-black/15 bg-info text-white",
-				icon: "text-blue-50",
+				icon: "text-info-strong",
 				glyph: v
 			},
 			warning: {
-				subtle: "border-yellow-80 bg-yellow-97 text-yellow-20",
+				subtle: "border-warning/30 bg-warning/10 text-warning-strong",
 				solid: "border-black/15 bg-warning text-on-warning",
-				icon: "text-yellow-50",
+				icon: "text-warning-strong",
 				glyph: b
 			},
 			danger: {
-				subtle: "border-red-90 bg-red-97 text-red-20",
+				subtle: "border-danger/25 bg-danger/10 text-danger-strong",
 				solid: "border-black/15 bg-danger text-white",
-				icon: "text-red-40",
+				icon: "text-danger-strong",
 				glyph: _
 			},
 			primary: {
-				subtle: "border-primary-90 bg-primary-97 text-primary-20",
+				subtle: "border-primary/25 bg-primary/10 text-primary-strong",
 				solid: "border-black/15 bg-primary text-white",
-				icon: "text-primary",
+				icon: "text-primary-strong",
 				glyph: y
 			},
 			neutral: {
-				subtle: "border-border bg-surface-muted text-body",
+				subtle: "border-border bg-surface-sunken text-muted",
 				solid: "border-black/15 bg-heading text-surface",
 				icon: "text-muted",
 				glyph: v
 			}
-		}, j = e(() => A[D.color]), M = e(() => D.icon ?? j.value.glyph);
-		function N() {
-			O.value = !1, k("close");
+		}, M = e(() => j[O.color]), N = e(() => O.icon ?? M.value.glyph);
+		function P() {
+			k.value = !1, A("close");
 		}
-		return (e, c) => O.value ? (u(), r("div", {
+		return (e, c) => k.value ? (u(), r("div", {
 			key: 0,
-			class: l(["flex w-full items-start gap-3 border-b px-4 py-2.5 text-base sm:items-center sm:px-6", [j.value[s.variant], s.variant === "solid" ? "[&_a]:text-inherit [&_strong]:text-inherit" : "[&_strong]:text-heading"]]),
+			class: l(["flex w-full items-start gap-3 border-b px-4 py-2.5 text-base sm:items-center sm:px-6 [&_strong]:text-inherit", [M.value[s.variant], s.variant === "solid" && "[&_a]:text-inherit"]]),
 			role: s.color === "danger" || s.color === "warning" ? "alert" : "status",
 			"data-ac-ds": "",
 			"data-testid": "ac-banner"
 		}, [
-			s.hideIcon ? n("", !0) : (u(), t(f(M.value), {
+			s.hideIcon ? n("", !0) : (u(), t(f(N.value), {
 				key: 0,
-				class: l(["mt-0.5 size-4 shrink-0 sm:mt-0", s.variant === "subtle" ? j.value.icon : "opacity-90"]),
+				class: l(["mt-0.5 size-4 shrink-0 sm:mt-0", s.variant === "subtle" ? M.value.icon : "opacity-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])),
 			i("div", C, [i("p", w, [
-				s.title ? (u(), r("strong", {
-					key: 0,
-					class: l(["font-semibold", s.variant === "subtle" && "text-heading"])
-				}, p(s.title), 3)) : n("", !0),
-				s.title && e.$slots.default ? (u(), r("span", T, " · ")) : n("", !0),
+				s.title ? (u(), r("strong", T, p(s.title), 1)) : n("", !0),
+				s.title && e.$slots.default ? (u(), r("span", E, " · ")) : n("", !0),
 				d(e.$slots, "default")
 			]), d(e.$slots, "action", {}, () => [s.actionLabel && s.actionHref ? (u(), r("a", {
 				key: 0,
 				href: s.actionHref,
-				class: "inline-flex shrink-0 items-center gap-1 font-medium whitespace-nowrap underline decoration-current/40 underline-offset-2 transition hover:decoration-current focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+				class: "inline-flex shrink-0 items-center gap-1 font-medium whitespace-nowrap underline decoration-current/40 underline-offset-2 transition-colors duration-200 hover:decoration-current focus-visible:rounded-4 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
 			}, [a(p(s.actionLabel), 1), o(m(g), {
 				class: "size-3.5",
 				"aria-hidden": "true"
-			})], 8, E)) : s.actionLabel ? (u(), r("button", {
+			})], 8, D)) : s.actionLabel ? (u(), r("button", {
 				key: 1,
 				type: "button",
-				class: l(["inline-flex h-7 shrink-0 cursor-pointer items-center self-start rounded-6 border px-2.5 text-xs font-medium whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring sm:self-auto", s.variant === "solid" ? "border-current/30 bg-current/10 hover:bg-current/20" : "border-current/25 bg-surface text-heading shadow-xs hover:bg-surface-muted"]),
-				onClick: c[0] ||= (e) => k("action")
+				class: l(["inline-flex h-8 shrink-0 cursor-pointer items-center self-start rounded-10 border px-3 text-base font-medium whitespace-nowrap transition-[color,background-color,border-color,transform] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:translate-y-px motion-reduce:active:translate-y-0 sm:-my-1.5 sm:self-auto", s.variant === "solid" ? "border-current/30 bg-current/10 hover:bg-current/20" : "border-border bg-surface text-heading hover:bg-surface-sunken"]),
+				onClick: c[0] ||= (e) => A("action")
 			}, p(s.actionLabel), 3)) : n("", !0)])]),
 			s.dismissible ? (u(), r("button", {
 				key: 1,
 				type: "button",
-				class: "-my-1 -mr-1.5 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-75 transition hover:bg-current/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "-my-1.5 -mr-2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 opacity-75 transition-[background-color,opacity] duration-200 hover:bg-current/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": "Dismiss",
-				onClick: N
+				onClick: P
 			}, [o(m(x), {
 				class: "size-4",
 				"aria-hidden": "true"
@@ -111,4 +111,4 @@ var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 s
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

package/dist/lib/components/AcBarChart.js

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

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

@@ -0,0 +1,43 @@
+import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { XYChartProps } from "../charts/xy";
+export interface Props extends XYChartProps {
+    /** Stacks the series in one bar per row, so its length shows the total. Otherwise the series sit side by side. */
+    stacked?: boolean;
+    /** `vertical` columns, or `horizontal` bars for long category names and rankings. */
+    orientation?: "vertical" | "horizontal";
+    /** Corner radius of each bar's end, in px. */
+    radius?: number;
+    /** Widest a bar (or a group of bars) may get, in px, so a few rows don't make slabs. */
+    barMaxWidth?: number;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered row. */
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    legend: import("../charts/shared").ChartLegendPosition;
+    title: string;
+    description: string;
+    height: number;
+    orientation: "vertical" | "horizontal";
+    radius: number;
+    loading: boolean;
+    tooltip: boolean;
+    emptyText: string;
+    stacked: boolean;
+    gridLines: boolean;
+    xFormatter: (value: Date | number | string) => string;
+    yFormatter: (value: number) => string;
+    xLabel: string;
+    yLabel: string;
+    yDomain: [number | undefined, number | undefined];
+    barMaxWidth: number;
+}, {}, {}, {}, 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/AcBarChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,217 @@
+import e from "../charts/ChartFrame.js";
+import { chartDuration as t } from "../charts/shared.js";
+import { useXYChart as n } from "../charts/xy.js";
+import { computed as r, createBlock as i, createSlots as a, createVNode as o, defineComponent as s, guardReactiveProps as c, isRef as l, normalizeProps as u, openBlock as d, ref as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+import { ChartColumn as g } from "@lucide/vue";
+import { VisAxis as _, VisGroupedBar as v, VisStackedBar as y, VisXYContainer as b } from "@unovis/vue";
+import { GroupedBar as x, StackedBar as S } from "@unovis/ts";
+//#region src/lib/components/AcBarChart.vue?vue&type=script&setup=true&lang.ts
+var C = /*@__PURE__*/ s({
+	__name: "AcBarChart",
+	props: {
+		stacked: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: { default: "vertical" },
+		radius: { default: 4 },
+		barMaxWidth: { default: 48 },
+		data: {},
+		index: {},
+		categories: {},
+		height: { default: 280 },
+		xFormatter: {
+			type: Function,
+			default: void 0
+		},
+		yFormatter: {
+			type: Function,
+			default: void 0
+		},
+		xLabel: { default: "" },
+		yLabel: { default: "" },
+		legend: { default: "top" },
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		gridLines: {
+			type: Boolean,
+			default: !0
+		},
+		yDomain: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No data to show yet" },
+		title: { default: "" },
+		description: { default: "" }
+	},
+	setup(s) {
+		let C = s, w = t(), { hidden: T, width: E, visibleKeys: D, colors: O, legendItems: k, x: A, yAccessors: j, xTickValues: M, yTicks: N, xTickFormat: P, formatY: F, rowLabel: I, yDomain: L, tooltipItems: R, tooltipTotal: z, table: B, ariaLabel: V } = n(C, {
+			stacked: () => C.stacked,
+			positions: !0,
+			horizontal: () => C.orientation === "horizontal"
+		}), H = f(null), U = r(() => C.orientation === "horizontal"), W = r(() => U.value ? "y" : "x"), G = r(() => U.value ? "x" : "y"), K = r(() => U.value ? Math.max(2, Math.floor((E.value || 640) / 90)) : N.value), q = Symbol("row"), J = r(() => C.data.map((e, t) => ({
+			...e,
+			[q]: t
+		})));
+		function Y(e, t) {
+			let n = e[q], r = n === void 0 ? void 0 : C.data[n];
+			r && n !== void 0 && (H.value = {
+				clientX: t.clientX,
+				clientY: t.clientY,
+				title: I(n),
+				items: R(r),
+				total: C.stacked && D.value.length > 1 ? z(r) : void 0,
+				datum: r,
+				index: n
+			});
+		}
+		function X() {
+			H.value = null;
+		}
+		let Z = r(() => ({ [C.stacked ? S.selectors.barGroup : x.selectors.barGroup]: {
+			mousemove: Y,
+			mouseleave: X
+		} }));
+		return (t, n) => (d(), i(e, {
+			hidden: m(T),
+			"onUpdate:hidden": n[0] ||= (e) => l(T) ? T.value = e : null,
+			width: m(E),
+			"onUpdate:width": n[1] ||= (e) => l(E) ? E.value = e : null,
+			testid: "ac-bar-chart",
+			height: s.height,
+			loading: s.loading,
+			empty: !s.data.length,
+			"empty-text": s.emptyText,
+			"empty-icon": m(g),
+			legend: s.legend,
+			"legend-items": m(k),
+			summary: m(V),
+			title: s.title,
+			description: s.description,
+			table: m(B),
+			tip: H.value,
+			tooltip: s.tooltip
+		}, a({
+			default: h(() => [o(m(b), {
+				data: J.value,
+				height: s.height,
+				duration: m(w),
+				"y-domain": U.value ? void 0 : m(L),
+				"x-domain": U.value ? m(L) : void 0,
+				"y-direction": U.value ? "south" : void 0,
+				padding: {
+					top: 8,
+					right: 8
+				}
+			}, {
+				default: h(() => [
+					s.stacked ? (d(), i(m(y), {
+						key: 0,
+						x: m(A),
+						y: m(j),
+						color: m(O),
+						orientation: s.orientation,
+						"rounded-corners": s.radius,
+						"bar-max-width": s.barMaxWidth,
+						"bar-padding": .3,
+						events: s.tooltip ? Z.value : void 0
+					}, null, 8, [
+						"x",
+						"y",
+						"color",
+						"orientation",
+						"rounded-corners",
+						"bar-max-width",
+						"events"
+					])) : (d(), i(m(v), {
+						key: 1,
+						x: m(A),
+						y: m(j),
+						color: m(O),
+						orientation: s.orientation,
+						"rounded-corners": s.radius,
+						"group-max-width": s.barMaxWidth * Math.max(1, m(D).length),
+						"group-padding": .3,
+						"bar-padding": .1,
+						events: s.tooltip ? Z.value : void 0
+					}, null, 8, [
+						"x",
+						"y",
+						"color",
+						"orientation",
+						"rounded-corners",
+						"group-max-width",
+						"events"
+					])),
+					o(m(_), {
+						type: W.value,
+						label: s.xLabel || void 0,
+						"tick-format": m(P),
+						"tick-values": m(M),
+						"min-max-ticks-only-when-width-is-less": 160,
+						"grid-line": !1,
+						"tick-line": !1,
+						"domain-line": !U.value,
+						"tick-text-hide-overlapping": !0
+					}, null, 8, [
+						"type",
+						"label",
+						"tick-format",
+						"tick-values",
+						"domain-line"
+					]),
+					o(m(_), {
+						type: G.value,
+						label: s.yLabel || void 0,
+						"tick-format": m(F),
+						"num-ticks": K.value,
+						"grid-line": s.gridLines,
+						"tick-line": !1,
+						"domain-line": !1
+					}, null, 8, [
+						"type",
+						"label",
+						"tick-format",
+						"num-ticks",
+						"grid-line"
+					])
+				]),
+				_: 1
+			}, 8, [
+				"data",
+				"height",
+				"duration",
+				"y-domain",
+				"x-domain",
+				"y-direction"
+			])]),
+			_: 2
+		}, [t.$slots.tooltip ? {
+			name: "tooltip",
+			fn: h((e) => [p(t.$slots, "tooltip", u(c(e)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { C as default };

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

@@ -5,9 +5,9 @@ var b = {
 	"aria-label": "Breadcrumb",
 	"data-ac-ds": "",
 	"data-testid": "ac-breadcrumb"
-}, x = { class: "flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted" }, S = {
+}, x = { class: "flex min-w-0 flex-wrap items-center gap-0.5 text-base text-muted" }, S = {
 	key: 0,
-	class: "flex items-center text-slate-60",
+	class: "flex items-center text-muted/50",
 	"aria-hidden": "true"
 }, C = {
 	key: 1,
@@ -15,7 +15,11 @@ var b = {
 }, w = {
 	key: 2,
 	class: "flex min-w-0 items-center"
-}, T = ["aria-current"], E = { class: "truncate" }, D = { class: "truncate" }, O = /*@__PURE__*/ s({
+}, T = ["aria-current"], E = { class: "max-w-64 truncate" }, D = {
+	key: 0,
+	class: "flex size-5 shrink-0 items-center justify-center rounded-8 bg-primary/10 text-primary",
+	"aria-hidden": "true"
+}, O = { class: "max-w-48 truncate" }, k = /*@__PURE__*/ s({
 	__name: "AcBreadcrumb",
 	props: {
 		items: {},
@@ -26,20 +30,20 @@ var b = {
 		maxItems: { default: 4 }
 	},
 	setup(s) {
-		let O = s, k = c()?.appContext.components.RouterLink, A = f(!1), j = t(() => {
-			let e = O.items.map((e, t) => ({
+		let k = s, A = c()?.appContext.components.RouterLink, j = f(!1), M = t(() => {
+			let e = k.items.map((e, t) => ({
 				item: e,
 				index: t
 			}));
-			return A.value || e.length <= O.maxItems ? e : [
+			return j.value || e.length <= k.maxItems ? e : [
 				e[0],
 				null,
-				...e.slice(e.length - (O.maxItems - 2))
+				...e.slice(e.length - (k.maxItems - 2))
 			];
 		});
-		function M(e) {
-			if (e.to !== void 0 && k) return {
-				is: k,
+		function N(e) {
+			if (e.to !== void 0 && A) return {
+				is: A,
 				to: e.to
 			};
 			let t = e.href ?? (typeof e.to == "string" ? e.to : void 0);
@@ -48,41 +52,38 @@ var b = {
 				href: t
 			} : null;
 		}
-		return (t, c) => (d(), i("nav", b, [a("ol", x, [(d(!0), i(e, null, p(j.value, (t, f) => (d(), i(e, { key: t ? t.index : "ellipsis" }, [f > 0 ? (d(), i("li", S, [o(g(v), { class: "size-3" })])) : r("", !0), t ? (d(), i("li", w, [t.index === s.items.length - 1 || !M(t.item) ? (d(), i("span", {
+		return (t, c) => (d(), i("nav", b, [a("ol", x, [(d(!0), i(e, null, p(M.value, (t, f) => (d(), i(e, { key: t ? t.index : "ellipsis" }, [f > 0 ? (d(), i("li", S, [o(g(v), { class: "size-3.5 shrink-0" })])) : r("", !0), t ? (d(), i("li", w, [t.index === s.items.length - 1 || !N(t.item) ? (d(), i("span", {
 			key: 0,
-			class: u(["flex min-w-0 items-center gap-1", t.index === s.items.length - 1 && "font-medium text-heading"]),
+			class: u(["flex min-w-0 items-center gap-1.5 px-1.5 py-0.5", t.index === s.items.length - 1 && "font-medium text-heading"]),
 			"aria-current": t.index === s.items.length - 1 ? "page" : void 0
 		}, [t.item.icon ? (d(), n(m(t.item.icon), {
 			key: 0,
-			class: "size-3.5 shrink-0",
+			class: "size-4 shrink-0 text-primary",
 			"aria-hidden": "true"
-		})) : r("", !0), a("span", E, h(t.item.label), 1)], 10, T)) : (d(), n(m(M(t.item).is), l({
+		})) : r("", !0), a("span", E, h(t.item.label), 1)], 10, T)) : (d(), n(m(N(t.item).is), l({
 			key: 1,
 			ref_for: !0
 		}, {
-			...M(t.item),
+			...N(t.item),
 			is: void 0
 		}, {
-			class: "flex min-w-0 items-center gap-1 rounded-4 transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "flex min-w-0 items-center gap-1.5 rounded-8 px-1.5 py-0.5 text-muted no-underline transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+			title: t.item.label,
 			"aria-label": s.homeIcon && t.index === 0 ? t.item.label : void 0
 		}), {
 			default: _(() => [s.homeIcon && t.index === 0 ? (d(), n(g(y), {
 				key: 0,
-				class: "size-3.5 shrink-0",
-				"aria-hidden": "true"
-			})) : (d(), i(e, { key: 1 }, [t.item.icon ? (d(), n(m(t.item.icon), {
-				key: 0,
-				class: "size-3.5 shrink-0",
+				class: "size-4 shrink-0",
 				"aria-hidden": "true"
-			})) : r("", !0), a("span", D, h(t.item.label), 1)], 64))]),
+			})) : (d(), i(e, { key: 1 }, [t.item.icon ? (d(), i("span", D, [(d(), n(m(t.item.icon), { class: "size-3.5" }))])) : r("", !0), a("span", O, h(t.item.label), 1)], 64))]),
 			_: 2
-		}, 1040, ["aria-label"]))])) : (d(), i("li", C, [a("button", {
+		}, 1040, ["title", "aria-label"]))])) : (d(), i("li", C, [a("button", {
 			type: "button",
-			class: "cursor-pointer rounded-4 px-1 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "cursor-pointer rounded-8 px-1.5 py-0.5 transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 			"aria-label": "Show full path",
-			onClick: c[0] ||= (e) => A.value = !0
+			onClick: c[0] ||= (e) => j.value = !0
 		}, " … ")]))], 64))), 128))])]));
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };