@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,5 +1,5 @@
 export interface Props {
-    /** The hint text. Keep it to a few words; use the `content` slot for richer text. */
+    /** The hint text, in a dark bubble up to 280px wide. Keep it to a few words; use the `content` slot for richer text. */
     content?: string;
     /** Preferred side of the trigger. It flips to the opposite side when there isn't room. */
     placement?: "top" | "bottom" | "left" | "right";

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

@@ -1,6 +1,6 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, onUpdated as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, useId as v, useSlots as y, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, useId as y, useSlots as b, vShow as x, watch as S, withCtx as C, withDirectives as w } from "vue";
 //#region src/lib/components/AcTooltip.vue?vue&type=script&setup=true&lang.ts
-var w = ["data-side"], T = 6, E = 8, D = /*@__PURE__*/ c({
+var T = ["data-side"], E = 8, D = 8, O = /*@__PURE__*/ c({
 	__name: "AcTooltip",
 	props: {
 		content: { default: "" },
@@ -12,106 +12,116 @@ var w = ["data-side"], T = 6, E = 8, D = /*@__PURE__*/ c({
 		}
 	},
 	setup(c) {
-		let D = c, O = y(), k = {
+		let O = c, k = b(), A = {
 			top: "bottom",
 			bottom: "top",
 			left: "right",
 			right: "left"
-		}, A = `${v()}-tip`, j = h(null), M = h(null), N = h(!1), P = h(D.placement), F = h({
+		}, j = {
+			top: "translate-y-1",
+			bottom: "-translate-y-1",
+			left: "translate-x-1",
+			right: "-translate-x-1"
+		}, M = {
+			top: "origin-bottom",
+			bottom: "origin-top",
+			left: "origin-right",
+			right: "origin-left"
+		}, N = `${y()}-tip`, P = g(null), F = g(null), I = g(!1), L = g(O.placement), R = g({
 			top: 0,
 			left: 0
-		}), I, L, R = null, z = n(() => !D.disabled && !!(D.content || O.content));
-		function B() {
-			let e = j.value;
+		}), z, B, V = null, H = n(() => !O.disabled && !!(O.content || k.content));
+		function U() {
+			let e = P.value;
 			return e?.querySelector("button, a[href], input, select, textarea, [tabindex]") ?? e?.firstElementChild ?? null;
 		}
-		function V() {
-			let e = B();
-			if (R && R !== e && H(R), R = e, !e) return;
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
-			z.value && t.push(A), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
+		function W() {
+			let e = U();
+			if (V && V !== e && G(V), V = e, !e) return;
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== N);
+			H.value && t.push(N), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
-		function H(e) {
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
+		function G(e) {
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== N);
 			t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
-		function U(e) {
-			clearTimeout(L), z.value && !N.value && (clearTimeout(I), I = setTimeout(async () => {
-				N.value = !0, await l(), K();
+		function K(e) {
+			clearTimeout(B), H.value && !I.value && (clearTimeout(z), z = setTimeout(async () => {
+				I.value = !0, await l(), Y();
 			}, e));
 		}
-		function W(e = 0) {
-			clearTimeout(I), clearTimeout(L), e ? L = setTimeout(() => N.value = !1, e) : N.value = !1;
+		function q(e = 0) {
+			clearTimeout(z), clearTimeout(B), e ? B = setTimeout(() => I.value = !1, e) : I.value = !1;
 		}
-		function G(e, t, n, r) {
-			return e === "top" ? t.top - T - r >= E : e === "bottom" ? t.bottom + T + r <= window.innerHeight - E : e === "left" ? t.left - T - n >= E : t.right + T + n <= window.innerWidth - E;
+		function J(e, t, n, r) {
+			return e === "top" ? t.top - E - r >= D : e === "bottom" ? t.bottom + E + r <= window.innerHeight - D : e === "left" ? t.left - E - n >= D : t.right + E + n <= window.innerWidth - D;
 		}
-		function K() {
-			let e = B() ?? j.value;
-			if (!e || !M.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = M.value, i = D.placement, a = G(i, t, n, r) || !G(k[i], t, n, r) ? i : k[i], o = (e, t) => Math.max(E, Math.min(e, t - E));
-			P.value = a, F.value = a === "top" || a === "bottom" ? {
-				top: a === "top" ? t.top - T - r : t.bottom + T,
+		function Y() {
+			let e = U() ?? P.value;
+			if (!e || !F.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = F.value, i = O.placement, a = J(i, t, n, r) || !J(A[i], t, n, r) ? i : A[i], o = (e, t) => Math.max(D, Math.min(e, t - D));
+			L.value = a, R.value = a === "top" || a === "bottom" ? {
+				top: a === "top" ? t.top - E - r : t.bottom + E,
 				left: o(t.left + t.width / 2 - n / 2, window.innerWidth - n)
 			} : {
 				top: o(t.top + t.height / 2 - r / 2, window.innerHeight - r),
-				left: a === "left" ? t.left - T - n : t.right + T
+				left: a === "left" ? t.left - E - n : t.right + E
 			};
 		}
-		function q(e) {
-			e.pointerType !== "touch" && U(D.delay);
+		function X(e) {
+			e.pointerType !== "touch" && K(O.delay);
 		}
-		function J(e) {
-			e.target.matches(":focus-visible") && U(0);
+		function Z(e) {
+			e.target.matches(":focus-visible") && K(0);
 		}
-		function Y() {
-			W();
+		function Q() {
+			q();
 		}
-		function X(e) {
-			e.key === "Escape" && N.value && W();
+		function $(e) {
+			e.key === "Escape" && I.value && q();
 		}
-		return x(N, (e) => {
-			e ? (document.addEventListener("keydown", X), window.addEventListener("scroll", Y, !0)) : (document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0));
-		}), x(z, (e) => {
-			V(), e || W();
-		}), f(V), p(V), d(() => {
-			W(), document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0), R && H(R);
-		}), (n, l) => (m(), i("span", {
+		return S(I, (e) => {
+			e ? (document.addEventListener("keydown", $), window.addEventListener("scroll", Q, !0)) : (document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0));
+		}), S(H, (e) => {
+			W(), e || q();
+		}), p(W), m(W), f(() => {
+			q(), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), V && G(V);
+		}), (n, l) => (h(), i("span", {
 			ref_key: "root",
-			ref: j,
+			ref: P,
 			class: "inline-flex max-w-full",
 			"data-ac-ds": "",
 			"data-testid": "ac-tooltip",
-			onPointerenter: q,
-			onPointerleave: l[2] ||= (e) => W(100),
-			onPointerdown: l[3] ||= (e) => W(),
-			onFocusin: J,
-			onFocusout: l[4] ||= (e) => W()
-		}, [g(n.$slots, "default"), (m(), r(e, { to: "body" }, [s(t, {
-			"enter-active-class": "transition-opacity duration-100 ease-out",
-			"enter-from-class": "opacity-0",
-			"leave-active-class": "transition-opacity duration-75 ease-in",
-			"leave-to-class": "opacity-0"
+			onPointerenter: X,
+			onPointerleave: l[2] ||= (e) => q(100),
+			onPointerdown: l[3] ||= (e) => q(),
+			onFocusin: Z,
+			onFocusout: l[4] ||= (e) => q()
+		}, [_(n.$slots, "default"), (h(), r(e, { to: "body" }, [s(t, {
+			"enter-active-class": "transition-[opacity,scale,translate] duration-150 ease-out motion-reduce:transition-none",
+			"enter-from-class": `opacity-0 scale-95 ${j[L.value ?? "top"]}`,
+			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
+			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: S(() => [C(a("div", {
-				id: A,
+			default: C(() => [w(a("div", {
+				id: N,
 				ref_key: "tip",
-				ref: M,
+				ref: F,
 				role: "tooltip",
-				class: "fixed z-[100] w-max max-w-64 rounded-6 bg-slate-10 px-2 py-1 text-xs font-medium text-slate-95 shadow-md dark:bg-slate-80 dark:text-slate-10 dark:ring-1 dark:ring-slate-70",
-				"data-side": P.value,
-				style: u({
-					top: `${F.value.top}px`,
-					left: `${F.value.left}px`
+				class: u(["fixed z-[100] w-max max-w-[280px] rounded-10 border border-white/10 bg-tooltip px-2.5 py-1.5 text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", M[L.value ?? "top"]]),
+				"data-side": L.value,
+				style: d({
+					top: `${R.value.top}px`,
+					left: `${R.value.left}px`
 				}),
 				"data-ac-ds": "",
 				"data-testid": "ac-tooltip-panel",
-				onPointerenter: l[0] ||= (e) => U(0),
-				onPointerleave: l[1] ||= (e) => W(100)
-			}, [g(n.$slots, "content", {}, () => [o(_(c.content), 1)])], 44, w), [[b, N.value]])]),
+				onPointerenter: l[0] ||= (e) => K(0),
+				onPointerleave: l[1] ||= (e) => q(100)
+			}, [_(n.$slots, "content", {}, () => [o(v(c.content), 1)])], 46, T), [[x, I.value]])]),
 			_: 3
-		})]))], 544));
+		}, 8, ["enter-from-class"])]))], 544));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -1,20 +1,20 @@
 import e from "./AcBadge.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, getCurrentInstance as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useSlots as te, withCtx as ne } from "vue";
 //#region src/lib/components/AcUsageCard.vue?vue&type=script&setup=true&lang.ts
-var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col gap-4 p-4" }, ae = { class: "flex min-w-0 items-start gap-3" }, oe = {
+var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col gap-5 p-5" }, ae = { class: "flex min-w-0 items-start gap-3" }, oe = {
 	key: 0,
-	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-8 bg-primary-95 text-primary-30 [&_svg]:size-4",
+	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-4",
 	"aria-hidden": "true"
 }, se = { class: "min-w-0 flex-1" }, ce = ["id"], y = ["title"], b = {
 	key: 1,
 	class: "relative z-10 flex shrink-0 flex-wrap items-center justify-end gap-2"
 }, x = {
 	key: 0,
-	class: "text-xs text-muted"
+	class: "text-xs font-medium text-muted"
 }, S = {
 	key: 0,
 	class: "flex min-w-0 flex-col gap-2"
-}, C = { class: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1" }, w = { class: "flex min-w-0 flex-wrap items-baseline gap-x-1.5" }, le = { class: "text-3xl font-semibold text-heading" }, ue = {
+}, C = { class: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1" }, w = { class: "flex min-w-0 flex-wrap items-baseline gap-x-1.5" }, le = { class: "text-3xl font-bold tracking-tight text-heading tabular-nums" }, ue = {
 	key: 0,
 	class: "text-base text-muted"
 }, T = {
@@ -30,19 +30,19 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 	class: "text-base text-body"
 }, O = {
 	key: 0,
-	class: "ac-scrollbar border-t border-border-light"
+	class: "ac-scrollbar border-t border-border"
 }, k = { class: "w-full text-left text-base" }, A = {
 	key: 0,
-	class: "text-xs text-muted"
+	class: "bg-surface-sunken/50 text-xs text-muted"
 }, j = {
 	scope: "row",
-	class: "px-4 py-2.5 font-normal text-body"
+	class: "px-5 py-2.5 text-left font-normal text-body"
 }, M = { class: "flex min-w-0 items-center gap-2" }, N = { class: "truncate" }, P = {
 	key: 0,
-	class: "ac-skeleton-bone ml-auto block h-3 w-14 rounded-4"
+	class: "ac-skeleton-bone ml-auto block h-3 w-14 rounded-full"
 }, F = {
 	key: 1,
-	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border-light px-4 py-3 text-xs text-muted"
+	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border px-5 py-3 text-base text-muted"
 }, I = /*@__PURE__*/ c({
 	__name: "AcUsageCard",
 	props: {
@@ -78,26 +78,26 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 		let L = c, R = I, z = te(), de = {
 			ok: {
 				fill: "bg-primary",
-				track: "bg-primary-93",
+				track: "bg-surface-sunken",
 				text: "text-muted",
 				badge: ""
 			},
 			warning: {
 				fill: "bg-warning",
-				track: "bg-yellow-93",
-				text: "text-yellow-20",
+				track: "bg-warning/15",
+				text: "text-warning-strong",
 				badge: "Near limit"
 			},
 			danger: {
 				fill: "bg-danger",
-				track: "bg-red-93",
-				text: "text-red-30",
+				track: "bg-danger/15",
+				text: "text-danger-strong",
 				badge: "At limit"
 			},
 			over: {
 				fill: "bg-danger",
-				track: "bg-red-93",
-				text: "text-red-30",
+				track: "bg-danger/15",
+				text: "text-danger-strong",
 				badge: "Over limit"
 			}
 		}, B = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), V = l(), H = V?.appContext.components.RouterLink, U = ee(), W = n(() => typeof L.used == "number" && Number.isFinite(L.used)), G = n(() => W.value && typeof L.limit == "number" && L.limit > 0), K = n(() => G.value ? L.used / L.limit * 100 : 0), q = n(() => G.value ? L.used > L.limit ? "over" : K.value >= L.dangerAt ? "danger" : K.value >= L.warningAt ? "warning" : "ok" : "ok"), J = n(() => de[q.value]), fe = n(() => L.showThresholds ? [L.warningAt, L.dangerAt].filter((e) => e > 0 && e < 100) : []), Y = n(() => {
@@ -133,7 +133,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 			R("click", e);
 		}
 		return (n, l) => (p(), a("section", {
-			class: d(["relative flex min-w-0 flex-col rounded-10 border border-border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", (X.value || $()) && "hover:border-border-dark hover:shadow-sm"]),
+			class: d(["relative flex min-w-0 flex-col rounded-14 border border-border bg-surface transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", (X.value || $()) && "hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0"]),
 			"aria-labelledby": `${v(U)}-title`,
 			"aria-busy": c.loading || void 0,
 			"data-ac-ds": "",
@@ -144,20 +144,20 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 					z.icon || c.icon ? (p(), a("span", oe, [h(n.$slots, "icon", {}, () => [(p(), r(g(c.icon)))])])) : i("", !0),
 					o("div", se, [o("h3", {
 						id: `${v(U)}-title`,
-						class: "truncate text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+						class: "truncate font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
 					}, [X.value || $() ? (p(), r(g(X.value ? X.value.is : "button"), u({ key: 0 }, X.value ? {
 						...X.value,
 						is: void 0
 					} : { type: "button" }, {
 						"data-ac-card-link": "",
-						class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-10",
+						class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
 						onClick: me
 					}), {
 						default: ne(() => [s(_(c.title), 1)]),
 						_: 1
 					}, 16)) : (p(), a(t, { key: 1 }, [s(_(c.title), 1)], 64))], 8, ce), c.description ? (p(), a("p", {
 						key: 0,
-						class: "truncate text-xs text-muted",
+						class: "mt-0.5 truncate text-xs text-muted",
 						title: c.description
 					}, _(c.description), 9, y)) : i("", !0)]),
 					c.period || J.value.badge || z.actions ? (p(), a("div", b, [
@@ -173,14 +173,14 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 						h(n.$slots, "actions")
 					])) : i("", !0)
 				]),
-				W.value || c.loading && c.breakdown.length === 0 ? (p(), a("div", S, [c.loading ? (p(), a(t, { key: 0 }, [l[0] ||= o("span", { class: "ac-skeleton-bone block h-6 w-2/5 rounded-4" }, null, -1), l[1] ||= o("span", { class: "ac-skeleton-bone block h-2 w-full rounded-full" }, null, -1)], 64)) : (p(), a(t, { key: 1 }, [
+				W.value || c.loading && c.breakdown.length === 0 ? (p(), a("div", S, [c.loading ? (p(), a(t, { key: 0 }, [l[0] ||= o("span", { class: "ac-skeleton-bone block h-7 w-2/5 rounded-6" }, null, -1), l[1] ||= o("span", { class: "ac-skeleton-bone block h-2 w-full rounded-full" }, null, -1)], 64)) : (p(), a(t, { key: 1 }, [
 					o("div", C, [o("p", w, [o("span", le, _(Z(c.used)), 1), G.value ? (p(), a("span", ue, "of " + _(Q(c.limit)), 1)) : (p(), a("span", T, [
 						s(_(c.unit), 1),
 						c.unit ? (p(), a(t, { key: 0 }, [s(" · ")], 64)) : i("", !0),
 						l[2] ||= s("No limit", -1)
 					]))]), G.value ? (p(), a("span", {
 						key: 0,
-						class: d(["text-base font-medium tabular-nums", q.value === "ok" ? "text-heading" : J.value.text])
+						class: d(["text-base font-semibold tabular-nums", q.value === "ok" ? "text-heading" : J.value.text])
 					}, _(Math.round(K.value)) + "% ", 3)) : i("", !0)]),
 					G.value ? (p(), a("div", {
 						key: 0,
@@ -192,7 +192,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 						"aria-valuetext": pe.value,
 						class: d(["relative h-2 w-full overflow-hidden rounded-full", J.value.track])
 					}, [o("div", {
-						class: d(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", J.value.fill]),
+						class: d(["h-full rounded-full transition-[width,background-color] duration-700 ease-out motion-reduce:transition-none", J.value.fill]),
 						style: f({ width: `${Math.min(100, K.value)}%` })
 					}, null, 6), (p(!0), a(t, null, m(fe.value, (e) => (p(), a("span", {
 						key: e,
@@ -202,7 +202,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 					}, null, 4))), 128))], 10, E)) : i("", !0),
 					Y.value ? (p(), a("p", {
 						key: 1,
-						class: d(["text-xs", J.value.text])
+						class: d(["text-xs font-medium", J.value.text])
 					}, _(Y.value), 3)) : i("", !0)
 				], 64))])) : i("", !0),
 				z.default ? (p(), a("div", D, [h(n.$slots, "default")])) : i("", !0)
@@ -210,17 +210,17 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 			c.breakdown.length ? (p(), a("div", O, [o("table", k, [c.breakdownHeaders.length ? (p(), a("thead", A, [o("tr", null, [(p(!0), a(t, null, m(c.breakdownHeaders, (e, t) => (p(), a("th", {
 				key: t,
 				scope: "col",
-				class: d(["h-9 px-4 font-medium whitespace-nowrap", t > 0 ? "text-right" : "text-left"])
+				class: d(["h-10 px-5 font-semibold whitespace-nowrap", t > 0 ? "text-right" : "text-left"])
 			}, _(e), 3))), 128))])])) : i("", !0), o("tbody", null, [(p(!0), a(t, null, m(c.breakdown, (e, n) => (p(), a("tr", {
 				key: `${e.label}${n}`,
-				class: d(["border-t border-border-light", !c.breakdownHeaders.length && n === 0 && "border-t-0"])
+				class: d(["border-t border-border", !c.breakdownHeaders.length && n === 0 && "border-t-0"])
 			}, [o("th", j, [o("span", M, [e.icon ? (p(), r(g(e.icon), {
 				key: 0,
 				class: "size-4 shrink-0 text-muted",
 				"aria-hidden": "true"
 			})) : i("", !0), o("span", N, _(e.label), 1)])]), (p(!0), a(t, null, m(e.values, (e, n) => (p(), a("td", {
 				key: n,
-				class: "px-4 py-2.5 text-right font-medium whitespace-nowrap text-heading tabular-nums"
+				class: "px-5 py-2.5 text-right font-medium whitespace-nowrap text-heading tabular-nums"
 			}, [c.loading ? (p(), a("span", P)) : (p(), a(t, { key: 1 }, [s(_(Z(e)), 1)], 64))]))), 128))], 2))), 128))])])])) : i("", !0),
 			z.footer ? (p(), a("div", F, [h(n.$slots, "footer")])) : i("", !0)
 		], 10, re));