@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,9 +1,10 @@
 import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
 //#region src/lib/components/AcContentHeader.vue?vue&type=script&setup=true&lang.ts
-var c = { class: "flex min-w-0 items-center gap-2.5" }, l = {
+var c = { class: "flex min-w-0 items-center gap-3" }, l = {
 	key: 0,
-	class: "inline-flex shrink-0 text-muted"
-}, u = { class: "min-w-0" }, d = { class: "flex items-center gap-2" }, f = { class: "truncate" }, p = {
+	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"
+}, u = { class: "min-w-0" }, d = { class: "flex items-center gap-2" }, f = { class: "truncate font-heading text-lg leading-tight font-semibold tracking-tight text-heading" }, p = {
 	key: 0,
 	class: "mt-0.5 truncate text-xs text-muted"
 }, m = {
@@ -21,7 +22,7 @@ var c = { class: "flex min-w-0 items-center gap-2.5" }, l = {
 	},
 	setup(r) {
 		return (h, g) => (a(), t("div", {
-			class: i(["flex flex-wrap items-center justify-between gap-x-6 gap-y-3 px-5 py-3.5", r.bordered && "border-b border-border-light"]),
+			class: i(["flex flex-wrap items-center justify-between gap-x-6 gap-y-3 px-6 pt-5 pb-3", r.bordered && "border-b border-border"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-content-header"
 		}, [n("div", c, [h.$slots.icon ? (a(), t("span", l, [o(h.$slots, "icon")])) : e("", !0), n("div", u, [n("div", d, [n("h5", f, s(r.title), 1), o(h.$slots, "title-actions")]), r.subtitle ? (a(), t("p", p, s(r.subtitle), 1)) : e("", !0)])]), h.$slots.default ? (a(), t("div", m, [o(h.$slots, "default")])) : e("", !0)], 2));

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

@@ -8,10 +8,10 @@ var o = /*@__PURE__*/ n({
 	} },
 	setup(n) {
 		return (o, s) => (i(), e("section", {
-			class: r(n.surface && "rounded-10 border border-border bg-surface shadow-xs"),
+			class: r(n.surface && "rounded-14 border border-border bg-surface text-body"),
 			"data-ac-ds": "",
 			"data-testid": "ac-content-layout"
-		}, [a(o.$slots, "header"), t("div", { class: r(n.surface && ["overflow-hidden rounded-b-10", !o.$slots.header && "rounded-t-10"]) }, [a(o.$slots, "default")], 2)], 2));
+		}, [a(o.$slots, "header"), t("div", { class: r(n.surface && ["overflow-hidden rounded-b-14", !o.$slots.header && "rounded-t-14"]) }, [a(o.$slots, "default")], 2)], 2));
 	}
 });
 //#endregion

package/dist/lib/components/AcCopyButton.js

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

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

@@ -0,0 +1,43 @@
+export interface Props {
+    /** The text copied to the clipboard, e.g. a cluster ID, IP address or endpoint. */
+    value: string;
+    /** What the value is, in lower case: "cluster ID", "public IP". Read as "Copy cluster ID" and announced as "Copied cluster ID". */
+    label?: string;
+    /** Text shown instead of `value`, e.g. the first 8 characters of a UUID. The tooltip shows the full value. */
+    display?: string;
+    /** Shows the text in JetBrains Mono, for IDs, IPs, versions and resource names. Off by default: the text takes the surrounding font, as in cloud-ui. */
+    mono?: boolean;
+    /** Shows only a copy icon button, for placing after a value you render yourself. */
+    iconOnly?: boolean;
+    /** Text size. Unset, plain text takes the surrounding size and colour, as in cloud-ui. `small` sets 12px for table cells and chips, `normal` 14px in the heading colour. */
+    size?: "small" | "normal";
+    /** `plain` text with a copy icon on hover, or `chip`: a bordered, tinted pill for IDs in page headers. */
+    variant?: "plain" | "chip";
+}
+type __VLS_Slots = {
+    /** Custom content instead of the text, e.g. a styled span. The copy icon still follows it. */
+    default?: () => unknown;
+};
+declare function focus(): void;
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCopy?: ((value: string) => any) | undefined;
+}>, {
+    variant: "plain" | "chip";
+    label: string;
+    display: string;
+    size: "small" | "normal";
+    iconOnly: boolean;
+    mono: boolean;
+}, {}, {}, {}, 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/AcCopyButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,92 @@
+import e from "./AcTooltip.js";
+import { copyText as t } from "../composables/copyText.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, withCtx as x, withModifiers as S } from "vue";
+import { Check as C, Copy as w } from "@lucide/vue";
+//#region src/lib/components/AcCopyButton.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono break-all" }, O = {
+	class: "sr-only",
+	role: "status"
+}, k = 1500, A = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "AcCopyButton",
+	props: {
+		value: {},
+		label: { default: "value" },
+		display: { default: "" },
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: void 0 },
+		variant: { default: "plain" }
+	},
+	emits: ["copy"],
+	setup(u, { expose: A, emit: j }) {
+		let M = u, N = j, P = b(), F = g(null), I = g(null), L = g("idle"), R = g(!1), z, B = r(() => ({
+			class: P.class,
+			style: P.style
+		})), V = r(() => {
+			let { class: e, style: t, ...n } = P;
+			return n;
+		}), H = r(() => M.display || M.value), U = r(() => !M.iconOnly && (R.value || !!M.display && M.display !== M.value)), W = r(() => M.iconOnly ? M.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : M.variant === "chip" ? M.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : M.size === "small" ? "gap-1 rounded-4 text-xs" : M.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), G = r(() => M.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : M.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : M.size ? "text-heading" : ""), K = r(() => M.iconOnly && M.size !== "small" ? "size-4" : "size-3.5"), q = r(() => M.iconOnly ? "" : M.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
+		function J() {
+			let e = I.value;
+			R.value = !!e && e.scrollWidth > e.clientWidth + 1;
+		}
+		async function Y() {
+			clearTimeout(z);
+			try {
+				await t(M.value), L.value = "copied", N("copy", M.value);
+			} catch {
+				L.value = "failed";
+			}
+			z = setTimeout(() => L.value = "idle", k), await f(), X();
+		}
+		function X() {
+			let e = F.value?.closest("[data-testid=\"ac-tooltip\"]");
+			e && F.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
+		}
+		function Z() {
+			F.value?.focus();
+		}
+		return m(() => clearTimeout(z)), A({ focus: Z }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, B.value, {
+			"data-ac-ds": "",
+			"data-testid": "ac-copy-button"
+		}), [l(e, {
+			class: "min-w-0 flex-auto",
+			delay: L.value === "idle" ? 300 : 0
+		}, {
+			content: x(() => [L.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied")], 64)) : L.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy. The browser blocked the clipboard.")], 64)) : U.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), r[0] ||= s("span", { class: "block text-on-tooltip/70" }, "Click to copy", -1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy")], 64))]),
+			default: x(() => [s("button", d({
+				ref_key: "button",
+				ref: F,
+				type: "button",
+				class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [W.value, G.value]],
+				"aria-label": u.iconOnly ? `Copy ${u.label}` : void 0
+			}, V.value, {
+				onClick: S(Y, ["stop"]),
+				onPointerenter: J,
+				onFocus: J
+			}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${u.label}: `), 1), s("span", {
+				ref_key: "text",
+				ref: I,
+				class: p(["min-w-0 truncate", u.mono && "font-mono"])
+			}, [_(t.$slots, "default", {}, () => [c(v(H.value), 1)])], 2)], 64)), L.value === "copied" ? (h(), i(y(C), {
+				key: 1,
+				class: p(["shrink-0 text-primary", K.value]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])) : (h(), i(y(w), {
+				key: 2,
+				class: p(["shrink-0 transition-opacity duration-200", [K.value, q.value]]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"]))], 16, T)]),
+			_: 3
+		}, 8, ["delay"]), s("span", O, v(L.value === "copied" ? `Copied ${u.label}` : L.value === "failed" ? `Couldn't copy ${u.label}` : ""), 1)], 16));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcCostSummary.js

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

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

@@ -0,0 +1,102 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export type CostSummaryDot = Tone | "pending" | "muted" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8";
+export interface CostSummarySpec {
+    /** Short name, e.g. "vCPU" or "SLA". */
+    label: string;
+    /** Its value, e.g. "4" or "99.95%". */
+    value: string;
+}
+export interface CostSummaryItem {
+    /** Unique key for the row. */
+    key: string | number;
+    /** What the cost is for, e.g. "Primary node", "Storage" or a node pool's name. */
+    label: string;
+    /** A line of muted text under the label, e.g. "General purpose / 2 vCPU / 4 GB RAM". */
+    detail?: string;
+    /** The cost. A number is formatted with the card's currency; a string is shown as is, e.g. "Free". */
+    price: string | number;
+    /** Unit after the price. Defaults to the card's `total-period`. */
+    period?: string;
+    /** A Lucide icon in a 32px tile before the label. Rows with an icon get dashed dividers, as on cloud-ui's Create Kubernetes page. */
+    icon?: Component;
+    /** A 10px coloured dot before the label, as on cloud-ui's Create database page. */
+    dot?: CostSummaryDot;
+    /** A small grey tag under the label, e.g. the machine tier "General purpose". */
+    badge?: string;
+    /** Label and value pairs in a two-column grid under the label, e.g. vCPU, RAM, Nodes or SLA. */
+    specs?: CostSummarySpec[];
+    /** Greys the row out, for included or free lines such as the control plane. */
+    muted?: boolean;
+}
+export interface Props {
+    /** Card title. */
+    title?: string;
+    /** Line under the title, e.g. "Review before creation". */
+    subtitle?: string;
+    /** A Lucide icon in a tinted 32px tile before the title, with a primary wash and the icon as a watermark, like the other create-page cards. */
+    icon?: Component;
+    /** The cost lines. */
+    items?: CostSummaryItem[];
+    /** The total. A number is formatted with the currency; a string is shown as is. Defaults to the sum of the rows' number prices. */
+    total?: string | number;
+    /** Unit after the total, and after each row's price unless the row sets `period`, e.g. `/mo` or `/month`. */
+    totalPeriod?: string;
+    /** A line under the total, e.g. "$0.06/hour". */
+    totalDetail?: string;
+    /** Label before the total. */
+    totalLabel?: string;
+    /** ISO 4217 currency code for number prices, e.g. `USD` or `EUR`. */
+    currency?: string;
+    /** Locale for number prices. Defaults to `en-US`, so prices read "$40.00" as in cloud-ui. */
+    locale?: string;
+    /** Formats every number price and the total. Overrides `currency` and `locale`. */
+    formatter?: (value: number) => string;
+    /** A note at the bottom with an info icon, e.g. what the cost leaves out. Or use the `note` slot. */
+    note?: string;
+    /** Text shown when there are no rows. Say what to pick to see a cost. */
+    emptyText?: string;
+    /** Sticks to the top while the page scrolls, and caps the rows at 416px (46% of the window on short screens) so the total and actions stay in view. */
+    sticky?: boolean;
+    /** Distance from the top when sticky, e.g. `"80px"` under an app navbar. */
+    top?: string;
+    /** Shows placeholder rows and a placeholder total while prices load. */
+    loading?: boolean;
+}
+type __VLS_Slots = {
+    /** Under the total, e.g. the full-width Create button. */
+    actions?: () => unknown;
+    /** A note at the bottom, after an info icon. Replaces the `note` prop. */
+    note?: () => unknown;
+    /** Replaces a row's content. Gets the `item` and its formatted `price`, period included. */
+    item?: (props: {
+        item: CostSummaryItem;
+        price: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    icon: Component;
+    loading: boolean;
+    top: string;
+    items: CostSummaryItem[];
+    subtitle: string;
+    emptyText: string;
+    total: string | number;
+    totalPeriod: string;
+    totalDetail: string;
+    totalLabel: string;
+    currency: string;
+    locale: string;
+    formatter: (value: number) => string;
+    note: string;
+    sticky: boolean;
+}, {}, {}, {}, 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/AcCostSummary.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,179 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createStaticVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useId as v, useSlots as y } from "vue";
+import { Info as b } from "@lucide/vue";
+//#region src/lib/components/AcCostSummary.vue?vue&type=script&setup=true&lang.ts
+var ee = ["aria-labelledby", "aria-busy"], x = {
+	key: 0,
+	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
+	"aria-hidden": "true"
+}, te = {
+	key: 1,
+	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary",
+	"aria-hidden": "true"
+}, S = { class: "min-w-0 flex-1" }, C = ["id"], w = {
+	key: 0,
+	class: "mt-0.5 text-xs leading-4 text-muted"
+}, T = {
+	key: 0,
+	role: "list",
+	class: "m-0 list-none divide-y divide-dashed divide-border/70 px-5",
+	"aria-hidden": "true",
+	"data-testid": "ac-cost-summary-loading"
+}, E = {
+	key: 1,
+	class: "px-5 py-6 text-center text-base text-muted",
+	"data-testid": "ac-cost-summary-empty"
+}, D = { class: "min-w-0 flex-1" }, O = { class: "flex min-w-0 items-center gap-2" }, k = {
+	key: 1,
+	class: "mt-1.5 inline-block rounded-8 bg-surface-sunken/50 px-2 py-0.5 text-xs font-medium text-muted"
+}, A = {
+	key: 2,
+	class: "m-0 mt-2 grid grid-cols-2 gap-x-3 gap-y-1.5"
+}, j = { class: "shrink-0 text-base text-muted" }, M = { class: "m-0 truncate text-base font-medium text-heading" }, N = { class: "flex flex-col gap-3 border-t border-border/60 px-5 py-3.5" }, P = {
+	class: "flex items-baseline justify-between gap-2",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	"data-testid": "ac-cost-summary-total"
+}, F = { class: "text-lg font-semibold text-heading" }, I = {
+	key: 0,
+	class: "flex flex-col items-end gap-1.5 self-center",
+	"aria-hidden": "true"
+}, ne = {
+	key: 0,
+	class: "ac-skeleton-bone block h-3 w-16 rounded-4"
+}, L = {
+	key: 1,
+	class: "min-w-0 text-right"
+}, R = { class: "text-3xl leading-tight font-bold break-words text-primary-strong tabular-nums" }, z = { class: "text-base font-medium tracking-normal text-muted" }, B = {
+	key: 0,
+	class: "text-base leading-tight text-muted"
+}, V = {
+	key: 0,
+	class: "sr-only"
+}, H = {
+	key: 1,
+	class: "flex flex-col gap-2 [&>*]:w-full"
+}, U = {
+	key: 2,
+	class: "flex items-start gap-1.5 text-xs leading-snug text-muted"
+}, W = { class: "min-w-0" }, G = 3, K = /*@__PURE__*/ l({
+	__name: "AcCostSummary",
+	props: {
+		title: { default: "Cost summary" },
+		subtitle: { default: "" },
+		icon: { default: void 0 },
+		items: { default: () => [] },
+		total: { default: void 0 },
+		totalPeriod: { default: "/mo" },
+		totalDetail: { default: "" },
+		totalLabel: { default: "Total cost" },
+		currency: { default: "USD" },
+		locale: { default: "en-US" },
+		formatter: {
+			type: Function,
+			default: void 0
+		},
+		note: { default: "" },
+		emptyText: { default: "Pick a plan to see the estimated cost." },
+		sticky: {
+			type: Boolean,
+			default: !1
+		},
+		top: { default: "80px" },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(l) {
+		let K = l, q = y(), J = {
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger",
+			pending: "bg-pending",
+			muted: "bg-muted",
+			"chart-1": "bg-chart-1",
+			"chart-2": "bg-chart-2",
+			"chart-3": "bg-chart-3",
+			"chart-4": "bg-chart-4",
+			"chart-5": "bg-chart-5",
+			"chart-6": "bg-chart-6",
+			"chart-7": "bg-chart-7",
+			"chart-8": "bg-chart-8"
+		}, Y = v(), X = t(() => new Intl.NumberFormat(K.locale, {
+			style: "currency",
+			currency: K.currency
+		})), Z = t(() => K.items.some((e) => e.icon)), re = t(() => K.total === void 0 ? Q(K.items.reduce((e, t) => e + (typeof t.price == "number" ? t.price : 0), 0)) : Q(K.total));
+		function Q(e) {
+			return typeof e == "string" ? e : K.formatter ? K.formatter(e) : X.value.format(e);
+		}
+		function ie() {
+			return !!(K.note || q.note);
+		}
+		function $(e) {
+			return typeof e.price == "number" ? e.period ?? K.totalPeriod : e.period ?? "";
+		}
+		return (t, v) => (f(), i("section", {
+			class: u(["flex flex-col rounded-14 border border-border bg-surface text-body shadow-xs transition-shadow duration-200 hover:shadow-card motion-reduce:transition-none", l.sticky && "sticky"]),
+			style: d(l.sticky ? { top: l.top } : void 0),
+			"aria-labelledby": `${_(Y)}-title`,
+			"aria-busy": l.loading || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-cost-summary"
+		}, [
+			a("header", { class: u(["relative isolate flex items-center gap-3 rounded-t-[calc(var(--radius-14)-1px)] px-5 pt-5 pb-3", l.icon && "border-b border-border/60 bg-linear-to-br from-primary/10 via-primary/3 to-transparent"]) }, [
+				l.icon ? (f(), i("div", x, [(f(), n(h(l.icon), { class: "absolute -top-4 -right-4 size-24 text-primary/5" }))])) : r("", !0),
+				l.icon ? (f(), i("span", te, [(f(), n(h(l.icon), { class: "size-4" }))])) : r("", !0),
+				a("div", S, [a("h3", {
+					id: `${_(Y)}-title`,
+					class: "truncate font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
+				}, g(l.title), 9, C), l.subtitle ? (f(), i("p", w, g(l.subtitle), 1)) : r("", !0)])
+			], 2),
+			l.loading ? (f(), i("ul", T, [(f(), i(e, null, p(G, (e) => a("li", {
+				key: e,
+				class: "flex items-center gap-3 py-3.5"
+			}, [...v[0] ||= [o("<span class=\"ac-skeleton-bone block size-8 shrink-0 rounded-10\"></span><span class=\"min-w-0 flex-1\"><span class=\"ac-skeleton-bone block h-3.5 w-1/2 rounded-4\"></span><span class=\"ac-skeleton-bone mt-2 block h-3 w-1/3 rounded-4\"></span></span><span class=\"ac-skeleton-bone block h-3.5 w-16 shrink-0 rounded-4\"></span>", 3)]])), 64))])) : l.items.length ? (f(), i("ul", {
+				key: 2,
+				role: "list",
+				class: u(["m-0 list-none px-5", [Z.value ? "divide-y divide-dashed divide-border/70" : "flex flex-col gap-2.5 pb-3", l.sticky && "ac-scrollbar max-h-[min(46vh,416px)] overflow-y-auto"]])
+			}, [(f(!0), i(e, null, p(l.items, (o) => (f(), i("li", {
+				key: o.key,
+				class: u(["min-w-0", Z.value && "py-3.5"])
+			}, [m(t.$slots, "item", {
+				item: o,
+				price: `${Q(o.price)}${$(o)}`
+			}, () => [a("div", { class: u(["flex gap-3", Z.value ? "items-start" : "items-center"]) }, [Z.value && o.icon ? (f(), i("span", {
+				key: 0,
+				class: u(["flex size-8 shrink-0 items-center justify-center rounded-10 bg-surface-sunken/40", o.muted && "opacity-60"]),
+				"aria-hidden": "true"
+			}, [(f(), n(h(o.icon), { class: "size-4 text-muted" }))], 2)) : r("", !0), a("div", D, [
+				a("div", { class: u(["flex justify-between gap-2", Z.value ? "items-baseline" : "items-center"]) }, [a("span", O, [o.dot ? (f(), i("span", {
+					key: 0,
+					class: u(["size-2.5 shrink-0 rounded-full", [J[o.dot], o.muted && "opacity-60"]]),
+					"aria-hidden": "true"
+				}, null, 2)) : r("", !0), a("span", { class: u(["truncate", [Z.value ? "text-lg font-semibold" : "text-base", o.muted ? "text-muted" : "text-heading"]]) }, g(o.label), 3)]), a("span", { class: u(["whitespace-nowrap tabular-nums", [Z.value ? "text-lg font-semibold" : "text-base font-medium", o.muted ? "text-muted" : "text-heading"]]) }, [s(g(Q(o.price)), 1), a("span", { class: u(Z.value && "text-base font-normal text-muted") }, g($(o)), 3)], 2)], 2),
+				o.detail ? (f(), i("p", {
+					key: 0,
+					class: u(["text-muted", Z.value ? "mt-0.5 text-base" : ["mt-2.5 text-xs leading-relaxed", o.dot && "ml-[18px]"]])
+				}, g(o.detail), 3)) : r("", !0),
+				o.badge ? (f(), i("span", k, g(o.badge), 1)) : r("", !0),
+				o.specs?.length ? (f(), i("dl", A, [(f(!0), i(e, null, p(o.specs, (e) => (f(), i("div", {
+					key: e.label,
+					class: "flex min-w-0 items-baseline gap-1.5"
+				}, [a("dt", j, g(e.label), 1), a("dd", M, g(e.value), 1)]))), 128))])) : r("", !0)
+			])], 2)])], 2))), 128))], 2)) : (f(), i("p", E, g(l.emptyText), 1)),
+			a("div", N, [
+				a("div", P, [a("span", F, g(l.totalLabel), 1), l.loading ? (f(), i("div", I, [v[1] ||= a("span", { class: "ac-skeleton-bone block h-6 w-24 rounded-6" }, null, -1), l.totalDetail ? (f(), i("span", ne)) : r("", !0)])) : (f(), i("div", L, [a("div", R, [s(g(re.value), 1), a("span", z, g(l.totalPeriod), 1)]), l.totalDetail ? (f(), i("div", B, g(l.totalDetail), 1)) : r("", !0)]))]),
+				l.loading ? (f(), i("span", V, "Loading prices")) : r("", !0),
+				t.$slots.actions ? (f(), i("div", H, [m(t.$slots, "actions")])) : r("", !0),
+				ie() ? (f(), i("p", U, [c(_(b), {
+					class: "mt-px size-4 shrink-0",
+					"aria-hidden": "true"
+				}), a("span", W, [m(t.$slots, "note", {}, () => [s(g(l.note), 1)])])])) : r("", !0)
+			])
+		], 14, ee));
+	}
+});
+//#endregion
+export { K as default };

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

@@ -7,9 +7,9 @@ export interface DatePickerPreset {
     value?: () => string | [string, string];
 }
 export interface Props {
-    /** Floating label. It rests inside the field and rises when a value is chosen or the popover opens. */
+    /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
     label?: string;
-    /** Text shown in the field when there's no label and no value. */
+    /** Text shown in the field while there's no value. Defaults to "Choose date" (or "Choose duration"). */
     placeholder?: string;
     /** `date` for a calendar day (`YYYY-MM-DD`), `datetime` for an instant with hours and minutes (UTC ISO 8601), or `duration` for a Go/Kubernetes duration such as `26h30m`. */
     mode?: "date" | "datetime" | "duration";
@@ -29,7 +29,7 @@ export interface Props {
     locale?: string;
     /** First column of the calendar, 0 = Sunday … 6 = Saturday. Defaults to the locale's. */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Adds a seconds box to the time in `datetime` mode. */
+    /** Adds a seconds column to the Time tab in `datetime` mode. */
     showSeconds?: boolean;
     /** Shows a clear button when there is a value. */
     clearable?: boolean;
@@ -37,11 +37,11 @@ export interface Props {
     disabled?: boolean;
     /** Marks the field required and adds a red asterisk. */
     required?: boolean;
-    /** Error text under the field. */
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while `errorMsg` is set). */
+    /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`. */
     size?: "small" | "normal";
     /** Adds a hidden input with this name so plain form posts include the value. A range posts as `start/end`. */
     name?: string;
@@ -75,12 +75,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     range: boolean;
     clearable: boolean;
     errorMsg: string;
+    presets: DatePickerPreset[];
+    locale: string;
     minDate: string;
     maxDate: string;
     isDateDisabled: (day: string) => boolean;
-    presets: DatePickerPreset[];
     timeZone: string;
-    locale: string;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showSeconds: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;