@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,241 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, watch as ee } from "vue";
+import { Minus as te, Plus as ne } from "@lucide/vue";
+//#region src/lib/components/AcNumberInput.vue?vue&type=script&setup=true&lang.ts
+var re = ["for"], v = {
+	key: 0,
+	class: "text-muted"
+}, ie = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, y = ["id"], b = { class: "flex items-center gap-3" }, ae = [
+	"id",
+	"inputmode",
+	"value",
+	"name",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-invalid",
+	"aria-describedby"
+], oe = { key: 0 }, se = ["id"], x = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "AcNumberInput",
+	props: /*@__PURE__*/ o({
+		label: { default: "" },
+		name: { default: "" },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		step: { default: 1 },
+		precision: { default: void 0 },
+		unit: { default: "" },
+		stepButtons: {
+			type: Boolean,
+			default: !1
+		},
+		holdDelay: { default: 300 },
+		holdIntervalDelay: { default: 100 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: x }) {
+		let S = a, C = _(a, "modelValue"), w = x, T = g(), E = h(), D = e(() => ({
+			class: E.class,
+			style: E.style
+		})), O = e(() => {
+			let { class: e, style: t, ...n } = E;
+			return n;
+		}), k = d(null), A = d(G(C.value)), j = d(!1), M, N, P = e(() => S.precision ?? W(S.step)), F = e(() => S.min === void 0 || S.min < 0), I = e(() => S.disabled || S.readonly), L = e(() => S.min !== void 0 && C.value !== null && C.value <= S.min), R = e(() => S.max !== void 0 && C.value !== null && C.value >= S.max), z = e(() => {
+			let e = C.value;
+			if (!j.value || e === null) return "";
+			let { min: t, max: n } = S;
+			return (t === void 0 || e >= t) && (n === void 0 || e <= n) ? "" : t !== void 0 && n !== void 0 ? `Enter a value from ${t} to ${n}` : t === void 0 ? `Enter ${n} or less` : `Enter ${t} or more`;
+		}), B = e(() => S.errorMsg || z.value), V = e(() => [S.hint && `${T}-hint`, B.value && `${T}-msg`].filter(Boolean).join(" ") || void 0), H = e(() => ["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-accent text-heading transition-colors duration-200 select-none hover:bg-accent-hover active:bg-accent-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-accent", S.size === "small" ? "h-9 px-3" : "h-10.5 px-5"]), U = e(() => C.value === null ? void 0 : [A.value, S.unit].filter(Boolean).join(" "));
+		function W(e) {
+			let t = String(e);
+			return t.includes("e-") ? Number(t.split("e-")[1]) : t.split(".")[1]?.length ?? 0;
+		}
+		function G(e) {
+			return e === null ? "" : String(e);
+		}
+		function K(e) {
+			return Number(e.toFixed(P.value));
+		}
+		function q(e) {
+			return S.min !== void 0 && e < S.min ? S.min : S.max !== void 0 && e > S.max ? S.max : e;
+		}
+		function J(e) {
+			if (e === "" || e === "-" || e === "." || e === "-.") return null;
+			let t = Number(e);
+			return Number.isNaN(t) ? null : t;
+		}
+		function Y(e) {
+			let t = e !== C.value;
+			C.value = e, A.value = G(e), t && w("change", e);
+		}
+		function X(e, t = 1) {
+			I.value || Y(q(K((C.value ?? 0) + e * S.step * t)));
+		}
+		function ce(e) {
+			let t = e.target;
+			if (!RegExp(`^${F.value ? "-?" : ""}\\d*${P.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
+				t.value = A.value;
+				return;
+			}
+			A.value = t.value;
+			let n = J(t.value);
+			(n !== null || t.value === "") && (C.value = n);
+		}
+		function Z() {
+			let e = J(A.value);
+			Y(e === null ? null : q(K(e)));
+		}
+		function le() {
+			j.value = !1, Z();
+		}
+		function ue(e) {
+			let t = {
+				ArrowUp: () => X(1),
+				ArrowDown: () => X(-1),
+				PageUp: () => X(1, 10),
+				PageDown: () => X(-1, 10)
+			};
+			if (S.min !== void 0 && (t.Home = () => !I.value && Y(S.min)), S.max !== void 0 && (t.End = () => !I.value && Y(S.max)), e.key === "Enter") return Z();
+			let n = t[e.key];
+			n && (e.preventDefault(), n());
+		}
+		function Q() {
+			clearTimeout(M), clearInterval(N);
+		}
+		function de(e, t) {
+			e.button !== 0 || I.value || (Q(), X(t), M = setTimeout(() => {
+				N = setInterval(() => {
+					X(t), (t > 0 && R.value || t < 0 && L.value) && Q();
+				}, S.holdIntervalDelay);
+			}, S.holdDelay));
+		}
+		function fe(e, t) {
+			e.detail === 0 && X(t);
+		}
+		function $(e) {
+			let t = e < 0 ? "Decrease" : "Increase";
+			return {
+				"aria-label": t,
+				"aria-controls": T,
+				"data-testid": `ac-number-input-${t.toLowerCase()}`,
+				disabled: I.value || (e < 0 ? L.value : R.value),
+				onMousedown: (e) => e.preventDefault(),
+				onPointerdown: (t) => de(t, e),
+				onPointerup: Q,
+				onPointerleave: Q,
+				onPointercancel: Q,
+				onClick: (t) => fe(t, e)
+			};
+		}
+		return ee(C, (e) => {
+			J(A.value) !== e && (A.value = G(e));
+		}), l(Q), o({ focus: () => k.value?.focus() }), (e, o) => (u(), n("div", s(D.value, {
+			class: ["w-full", a.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-number-input"
+		}), [
+			a.label ? (u(), n("label", {
+				key: 0,
+				for: m(T),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				r("span", null, p(a.label), 1),
+				a.readonly ? (u(), n("span", v, "(read only)")) : t("", !0),
+				a.required ? (u(), n("span", ie, "*")) : t("", !0)
+			], 8, re)) : t("", !0),
+			a.hint ? (u(), n("p", {
+				key: 1,
+				id: `${m(T)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, p(a.hint), 9, y)) : t("", !0),
+			r("div", b, [
+				a.stepButtons ? (u(), n("button", s({
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					class: H.value
+				}, $(-1)), [i(m(te), {
+					class: c(a.size === "small" ? "size-4" : "size-6"),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])], 16)) : t("", !0),
+				r("div", { class: c(["relative flex min-w-0 flex-1 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
+					a.size === "small" ? "h-9" : "h-10.5",
+					a.readonly ? "bg-surface-muted" : "bg-background",
+					B.value ? "border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+				]]) }, [r("input", s({
+					id: m(T),
+					ref_key: "input",
+					ref: k
+				}, O.value, {
+					type: "text",
+					role: "spinbutton",
+					autocomplete: "off",
+					inputmode: P.value > 0 || F.value ? "decimal" : "numeric",
+					value: A.value,
+					name: a.name,
+					disabled: a.disabled,
+					readonly: a.readonly,
+					required: a.required,
+					"aria-valuenow": C.value ?? void 0,
+					"aria-valuemin": a.min,
+					"aria-valuemax": a.max,
+					"aria-valuetext": U.value,
+					"aria-invalid": !!B.value || void 0,
+					"aria-describedby": V.value,
+					class: "block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent px-2 text-center text-base font-normal text-heading tabular-nums outline-none placeholder:text-muted/80 disabled:cursor-not-allowed",
+					onInput: ce,
+					onKeydown: ue,
+					onFocus: o[0] ||= (e) => j.value = !0,
+					onBlur: le
+				}), null, 16, ae), a.unit || e.$slots.suffix ? (u(), n("span", {
+					key: 0,
+					class: c(["flex h-full shrink-0 items-center gap-1.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.size === "small" ? "pr-3" : "pr-4"]),
+					"aria-hidden": "true"
+				}, [f(e.$slots, "suffix"), a.unit ? (u(), n("span", oe, p(a.unit), 1)) : t("", !0)], 2)) : t("", !0)], 2),
+				a.stepButtons ? (u(), n("button", s({
+					key: 1,
+					type: "button",
+					tabindex: "-1",
+					class: H.value
+				}, $(1)), [i(m(ne), {
+					class: c(a.size === "small" ? "size-4" : "size-6"),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])], 16)) : t("", !0)
+			]),
+			B.value ? (u(), n("p", {
+				key: 2,
+				id: `${m(T)}-msg`,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, p(B.value), 9, se)) : t("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { x as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Pads the page on all sides (20px). Turn off when a parent already pads it. */
+    /** Pads the page like cloud-ui's page container: 16px on the sides, 32px top and bottom. Turn off when a parent already pads it. */
     padded?: boolean;
     /** Space between the page's direct children: `small` 12px, `normal` 20px, `large` 32px. */
     gap?: "small" | "normal" | "large";
-    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1280px, `full` fills the area. */
+    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1200px (cloud-ui's page column, the same as its `custom-container` and our `page-container` utility), `full` fills the area. Use `wide` for new cloud-ui-style pages. */
     width?: "full" | "wide" | "normal" | "narrow";
 }
 type __VLS_Slots = {

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

@@ -17,7 +17,7 @@ var a = /*@__PURE__*/ t({
 			large: "gap-8"
 		}, o = {
 			full: "",
-			wide: "mx-auto max-w-7xl",
+			wide: "mx-auto max-w-page",
 			normal: "mx-auto max-w-5xl",
 			narrow: "mx-auto max-w-3xl"
 		};
@@ -25,7 +25,7 @@ var a = /*@__PURE__*/ t({
 			class: n(["flex w-full min-w-0 flex-col", [
 				a[t.gap],
 				o[t.width],
-				t.padded && "p-5"
+				t.padded && "px-4 py-8"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-page"

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

@@ -1,19 +1,27 @@
 export interface Props {
-    /** Total number of items across all pages. */
-    total: number;
+    /** Total number of items across all pages. Leave it out when the API returns only a next-page token: the summary becomes "Page 3" (or "Showing 41 to 60" with `items-on-page`) and Next follows `has-next`. */
+    total?: number;
+    /** Whether a page after the current one exists, e.g. the response had a next-page token. Overrides the count worked out from `total`. */
+    hasNext?: boolean;
+    /** Whether a page before the current one exists. Defaults to any page after 1. */
+    hasPrev?: boolean;
+    /** Pages the viewer can jump to, e.g. those whose tokens you've cached. Other page numbers are disabled, and a page-size change goes back to page 1. Leave it out when every page is reachable. */
+    knownPages?: number[];
+    /** Rows on the current page, for "Showing 41 to 60" when `total` is unknown. Cloud-ui's `pagination.count`. */
+    itemsOnPage?: number;
     /** Choices in the page-size select. */
     pageSizes?: number[];
-    /** Hides the "Rows per page" select. */
+    /** Hides the "Items per page" select. */
     hidePageSize?: boolean;
     /** How many page numbers to show on each side of the current one before an ellipsis. */
     siblings?: number;
     /** Always use the compact "‹ 3 / 6 ›" control. It's used automatically below 640px. */
     compact?: boolean;
-    /** Noun after the count: "Showing 1–10 of 57 databases". */
+    /** Noun after the count: "Showing 1 to 10 of 57 databases". Defaults to "results". */
     itemLabel?: string;
     /** Disables every control, e.g. while a page loads. */
     disabled?: boolean;
-    /** `small` makes the page buttons 28px (default `normal` is 32px). Use it inside cards and dense tables. */
+    /** `small` makes the buttons 28px high with 14px text (default `normal` is 34px with 16px text, as cloud-ui's table pager). Use it inside cards and dense tables. */
     size?: "normal" | "small";
 }
 type __VLS_Props = Props;
@@ -25,23 +33,32 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: (page: number) => any;
     range: (range: {
         start: number;
         end: number;
     }) => any;
+    prev: (page: number) => any;
     "update:page": (value: number) => any;
     "update:pageSize": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNext?: ((page: number) => any) | undefined;
     onRange?: ((range: {
         start: number;
         end: number;
     }) => any) | undefined;
+    onPrev?: ((page: number) => any) | undefined;
     "onUpdate:page"?: ((value: number) => any) | undefined;
     "onUpdate:pageSize"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
     size: "normal" | "small";
     compact: boolean;
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    knownPages: number[];
+    itemsOnPage: number;
     pageSizes: number[];
     hidePageSize: boolean;
     siblings: number;

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

@@ -3,27 +3,40 @@ import { Fragment as t, computed as n, createCommentVNode as r, createElementBlo
 import { ChevronLeft as _, ChevronRight as v } from "@lucide/vue";
 //#region src/lib/components/AcPagination.vue?vue&type=script&setup=true&lang.ts
 var y = {
-	class: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 text-base",
+	class: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 text-base text-muted",
 	"data-ac-ds": "",
 	"data-testid": "ac-pagination"
-}, b = { class: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2" }, x = {
+}, b = { class: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2" }, x = {
 	key: 0,
 	class: "flex items-center gap-2"
 }, S = { class: "w-18" }, C = {
-	class: "text-xs whitespace-nowrap text-muted tabular-nums",
+	class: "whitespace-nowrap tabular-nums",
 	"aria-live": "polite"
 }, w = {
 	"aria-label": "Pagination",
 	class: "ml-auto"
-}, T = { class: "flex items-center gap-1" }, E = ["disabled"], D = { class: "px-2 text-xs whitespace-nowrap text-body tabular-nums" }, O = { class: "font-medium text-heading" }, k = [
+}, T = { class: "flex items-center gap-2" }, E = ["disabled"], D = { class: "px-2 whitespace-nowrap tabular-nums" }, O = { class: "font-medium text-heading" }, k = { class: "font-medium text-heading" }, A = {
+	key: 0,
+	class: "hidden sm:flex"
+}, ee = { class: "flex items-center gap-1" }, j = [
 	"aria-label",
 	"aria-current",
 	"disabled",
 	"onClick"
-], A = ["disabled"], j = /*@__PURE__*/ c({
+], M = ["disabled"], N = /*@__PURE__*/ c({
 	__name: "AcPagination",
 	props: /*@__PURE__*/ l({
-		total: {},
+		total: { default: void 0 },
+		hasNext: {
+			type: Boolean,
+			default: void 0
+		},
+		hasPrev: {
+			type: Boolean,
+			default: void 0
+		},
+		knownPages: { default: void 0 },
+		itemsOnPage: { default: void 0 },
 		pageSizes: { default: () => [
 			10,
 			20,
@@ -51,19 +64,29 @@ var y = {
 		pageSize: { default: 10 },
 		pageSizeModifiers: {}
 	}),
-	emits: /*@__PURE__*/ l(["range"], ["update:page", "update:pageSize"]),
+	emits: /*@__PURE__*/ l([
+		"range",
+		"next",
+		"prev"
+	], ["update:page", "update:pageSize"]),
 	setup(c, { emit: l }) {
-		let j = c, M = h(c, "page"), N = h(c, "pageSize"), P = l, F = n(() => j.size === "small" ? "size-7" : "size-8"), I = n(() => j.size === "small" ? "h-7 min-w-7 text-sm" : "h-8 min-w-8 text-base"), L = n(() => Math.max(1, Math.ceil(j.total / Math.max(1, N.value)))), R = n(() => Math.min(Math.max(1, M.value), L.value)), z = n(() => ({
-			start: Math.min((R.value - 1) * N.value, j.total),
-			end: Math.min(R.value * N.value, j.total)
-		})), B = n(() => {
-			let e = j.itemLabel ? ` ${j.itemLabel}` : "";
-			return j.total ? `Showing ${z.value.start + 1}–${z.value.end} of ${j.total}${e}` : `0${e || " items"}`;
-		}), V = n(() => (j.pageSizes.includes(N.value) ? j.pageSizes : [...j.pageSizes, N.value].sort((e, t) => e - t)).map((e) => ({
+		let N = c, P = h(c, "page"), F = h(c, "pageSize"), I = l, L = n(() => [N.size === "small" ? "h-7 min-w-7 px-1.5 text-base" : "h-8.5 min-w-8.5 px-2 text-lg", !N.compact && (N.size === "small" ? "sm:px-2.5" : "sm:px-3")]), R = n(() => N.size === "small" ? "h-7 min-w-7 px-2.5 text-base" : "h-8.5 min-w-8.5 px-3 text-lg"), z = n(() => typeof N.total == "number"), B = n(() => Math.max(0, N.total ?? 0)), V = n(() => Math.max(1, F.value)), H = n(() => !z.value || N.knownPages !== void 0), U = n(() => z.value ? Math.max(1, Math.ceil(B.value / V.value)) : Math.max(1, P.value, ...N.knownPages ?? [])), W = n(() => Math.min(Math.max(1, P.value), U.value)), G = n(() => N.hasPrev ?? W.value > 1), K = n(() => N.hasNext ?? W.value < U.value), q = n(() => {
+			let e = (W.value - 1) * V.value;
+			return z.value ? {
+				start: Math.min(e, B.value),
+				end: Math.min(W.value * V.value, B.value)
+			} : {
+				start: e,
+				end: e + Math.max(0, N.itemsOnPage ?? V.value)
+			};
+		}), J = n(() => {
+			let e = ` ${N.itemLabel || "results"}`;
+			return z.value ? B.value ? `Showing ${q.value.start + 1} to ${q.value.end} of ${B.value}${e}` : `0${e}` : N.itemsOnPage === void 0 ? `Page ${W.value}` : N.itemsOnPage ? `Showing ${q.value.start + 1} to ${q.value.end}${N.itemLabel ? e : ""}` : W.value === 1 ? `0${e}` : `Page ${W.value}`;
+		}), Y = n(() => (N.pageSizes.includes(F.value) ? N.pageSizes : [...N.pageSizes, F.value].sort((e, t) => e - t)).map((e) => ({
 			value: e,
 			label: String(e)
-		}))), H = n(() => {
-			let e = L.value, t = R.value, n = Math.max(0, j.siblings);
+		}))), X = n(() => {
+			let e = U.value, t = W.value, n = Math.max(0, N.siblings);
 			if (e <= 5 + 2 * n) return Array.from({ length: e }, (e, t) => t + 1);
 			let r = Math.max(t - n, 1), i = Math.min(t + n, e), a = r > 3, o = i < e - 2, s = (e, t) => Array.from({ length: t - e + 1 }, (t, n) => e + n);
 			return a ? o ? [
@@ -82,79 +105,87 @@ var y = {
 				e
 			];
 		});
-		function U(e) {
-			j.disabled || (M.value = Math.min(Math.max(1, e), L.value));
+		function Z(e) {
+			return e === W.value || !N.knownPages || N.knownPages.includes(e);
+		}
+		function Q(e) {
+			if (N.disabled) return;
+			let t = z.value ? U.value : Infinity;
+			P.value = Math.min(Math.max(1, e), t);
+		}
+		function $(e) {
+			!N.disabled && (e > 0 ? K.value : G.value) && (Q(W.value + e), I(e > 0 ? "next" : "prev", P.value));
 		}
-		function W(e) {
+		function te(e) {
 			let t = Number(e);
-			if (!t || t === N.value) return;
-			let n = z.value.start;
-			N.value = t, M.value = Math.floor(n / t) + 1;
+			if (!t || t === F.value) return;
+			let n = q.value.start;
+			F.value = t, P.value = H.value ? 1 : Math.floor(n / t) + 1;
 		}
-		return g(L, (e) => {
-			M.value > e && (M.value = e);
-		}), g(z, (e) => P("range", { ...e }), { immediate: !0 }), (n, l) => (d(), i("div", y, [a("div", b, [c.hidePageSize ? r("", !0) : (d(), i("div", x, [l[2] ||= a("span", {
-			class: "text-xs whitespace-nowrap text-muted",
+		return g(U, (e) => {
+			z.value && P.value > e && (P.value = e);
+		}), g(q, (e) => I("range", { ...e }), { immediate: !0 }), (n, l) => (d(), i("div", y, [a("div", b, [c.hidePageSize ? r("", !0) : (d(), i("div", x, [l[2] ||= a("span", {
+			class: "whitespace-nowrap",
 			"aria-hidden": "true"
-		}, "Rows per page", -1), a("div", S, [s(e, {
-			"model-value": N.value,
-			options: V.value,
+		}, "Items per page", -1), a("div", S, [s(e, {
+			"model-value": F.value,
+			options: Y.value,
 			size: "compact",
-			placeholder: "Rows per page",
+			placeholder: "Items per page",
 			disabled: c.disabled,
-			"onUpdate:modelValue": W
+			"onUpdate:modelValue": te
 		}, null, 8, [
 			"model-value",
 			"options",
 			"disabled"
-		])])])), a("p", C, p(B.value), 1)]), a("nav", w, [a("ul", T, [
+		])])])), a("p", C, p(J.value), 1)]), a("nav", w, [a("ul", T, [
 			a("li", null, [a("button", {
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border border-border bg-transparent font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent", L.value]),
 				"aria-label": "Previous page",
-				disabled: c.disabled || R.value <= 1,
+				disabled: c.disabled || !G.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-prev",
-				onClick: l[0] ||= (e) => U(R.value - 1)
+				onClick: l[0] ||= (e) => $(-1)
 			}, [s(m(_), {
-				class: "size-4",
+				class: u(["size-4 shrink-0", !c.compact && "sm:hidden"]),
 				"aria-hidden": "true"
-			})], 10, E)]),
-			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [
+			}, null, 8, ["class"]), a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Previous", 2)], 10, E)]),
+			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [z.value ? (d(), i(t, { key: 0 }, [
 				l[3] ||= a("span", { class: "sr-only" }, "Page ", -1),
-				a("span", O, p(R.value), 1),
-				o(" / " + p(L.value), 1)
-			])], 2),
-			c.compact ? r("", !0) : (d(!0), i(t, { key: 0 }, f(H.value, (e) => (d(), i("li", {
+				a("span", O, p(W.value), 1),
+				o(" / " + p(U.value), 1)
+			], 64)) : (d(), i(t, { key: 1 }, [l[4] ||= o("Page ", -1), a("span", k, p(W.value), 1)], 64))])], 2),
+			c.compact ? r("", !0) : (d(), i("li", A, [a("ul", ee, [(d(!0), i(t, null, f(X.value, (e) => (d(), i("li", {
 				key: e,
-				class: "hidden sm:flex"
+				class: "flex"
 			}, [typeof e == "string" ? (d(), i("span", {
 				key: 0,
-				class: u(["inline-flex w-6 items-end justify-center text-xs text-muted", c.size === "small" ? "h-7 pb-1.5" : "h-8 pb-2"]),
+				class: u(["inline-flex items-center justify-center px-2 text-muted", c.size === "small" ? "h-7" : "h-8.5"]),
 				"aria-hidden": "true"
 			}, "…", 2)) : (d(), i("button", {
 				key: 1,
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border px-2 font-medium tabular-nums transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40", [I.value, e === R.value ? "border-primary bg-primary-95 text-primary-20" : "border-transparent text-body hover:bg-surface-sunken hover:text-heading"]]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border font-medium tabular-nums transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40", [R.value, e === W.value ? "border-primary bg-primary text-white" : "border-border bg-transparent text-heading hover:bg-accent-hover disabled:hover:bg-transparent"]]),
 				"aria-label": `Page ${e}`,
-				"aria-current": e === R.value ? "page" : void 0,
-				disabled: c.disabled,
-				onClick: (t) => U(e)
-			}, p(e), 11, k))]))), 128)),
+				"aria-current": e === W.value ? "page" : void 0,
+				disabled: c.disabled || !Z(e),
+				onClick: (t) => Q(e)
+			}, p(e), 11, j))]))), 128))])])),
 			a("li", null, [a("button", {
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border border-border bg-transparent font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent", L.value]),
 				"aria-label": "Next page",
-				disabled: c.disabled || R.value >= L.value,
+				disabled: c.disabled || !K.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-next",
-				onClick: l[1] ||= (e) => U(R.value + 1)
-			}, [s(m(v), {
-				class: "size-4",
+				onClick: l[1] ||= (e) => $(1)
+			}, [a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Next", 2), s(m(v), {
+				class: u(["size-4 shrink-0", !c.compact && "sm:hidden"]),
 				"aria-hidden": "true"
-			})], 10, A)])
+			}, null, 8, ["class"])], 10, M)])
 		])])]));
 	}
 });
 //#endregion
-export { j as default };
+export { N as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Text under the spinner, e.g. "Fetching resource layout". Also announced to screen readers. */
+    /** Text under the loader, e.g. "Fetching resource layout". Also announced to screen readers. */
     message?: string;
-    /** Shows the spinner. Turn off to show the message alone. */
+    /** Shows the loader: cloud-ui's ring and dots. Turn off to show the message alone. */
     showSpinner?: boolean;
-    /** Covers the whole viewport on a plain surface, for app start-up and sign-in checks. */
+    /** Covers the whole viewport on the page background with a 60px loader, for app start-up and sign-in checks. Inline, the ring is 40px. */
     fullPage?: boolean;
     /** CSS minimum height when not `fullPage`. The preloader also grows to fill its container. */
     minHeight?: string;

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

@@ -1,7 +1,7 @@
-import e from "./AcSpinner.js";
-import { Teleport as t, createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+import e from "./AcLoader.js";
+import { Teleport as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderSlot as d, toDisplayString as f } from "vue";
 //#region src/lib/components/AcPreloader.vue?vue&type=script&setup=true&lang.ts
-var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
+var p = { key: 0 }, m = { class: "max-w-80 text-base text-muted" }, h = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "AcPreloader",
 	props: {
@@ -16,24 +16,23 @@ var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
 		},
 		minHeight: { default: "240px" }
 	},
-	setup(o) {
-		return (f, p) => (c(), n(t, {
+	setup(c) {
+		return (h, g) => (u(), n(t, {
 			to: "body",
-			disabled: !o.fullPage
-		}, [i("div", s(f.$attrs, {
+			disabled: !c.fullPage
+		}, [a("div", l(h.$attrs, {
 			role: "status",
 			"aria-live": "polite",
-			class: ["flex flex-col items-center justify-center gap-3 px-4 text-center", o.fullPage ? "fixed inset-0 z-[80] bg-surface" : "size-full"],
-			style: o.fullPage ? void 0 : { minHeight: o.minHeight },
+			class: ["flex flex-col items-center justify-center gap-4 px-4 text-center", c.fullPage ? "fixed inset-0 z-[80] bg-background" : "size-full"],
+			style: c.fullPage ? void 0 : { minHeight: c.minHeight },
 			"data-ac-ds": "",
 			"data-testid": "ac-preloader"
-		}), [o.showSpinner ? (c(), n(e, {
-			key: 0,
-			size: "normal",
-			class: "text-primary",
-			label: ""
-		})) : r("", !0), i("div", d, [l(f.$slots, "default", {}, () => [a(u(o.message), 1)])])], 16)], 8, ["disabled"]));
+		}), [c.showSpinner ? (u(), i("div", p, [s(e, {
+			size: c.fullPage ? "large" : "normal",
+			label: "",
+			"aria-hidden": "true"
+		}, null, 8, ["size"])])) : r("", !0), a("div", m, [d(h.$slots, "default", {}, () => [o(f(c.message), 1)])])], 16)], 8, ["disabled"]));
 	}
 });
 //#endregion
-export { f as default };
+export { h as default };

package/dist/lib/components/AcProductHero.js

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