@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -0,0 +1,187 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, watch as b, withKeys as x } from "vue";
+import { CircleAlert as S } from "@lucide/vue";
+//#region src/lib/components/AcColorInput.vue?vue&type=script&setup=true&lang.ts
+var C = ["for"], w = {
+	key: 0,
+	class: "font-normal text-muted"
+}, T = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, E = ["id"], D = [
+	"value",
+	"disabled",
+	"aria-label"
+], O = [
+	"id",
+	"value",
+	"name",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], k = ["aria-label"], A = [
+	"disabled",
+	"aria-label",
+	"aria-pressed",
+	"title",
+	"onClick"
+], j = ["id"], M = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "AcColorInput",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		name: { default: "" },
+		presets: { default: () => [] },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
+	setup(s, { expose: c, emit: M }) {
+		let N = s, P = y(s, "modelValue"), F = M, I = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i, L = v(), R = _(), z = t(() => ({
+			class: R.class,
+			style: R.style
+		})), B = t(() => {
+			let { class: e, style: t, ...n } = R;
+			return n;
+		}), V = p(null), H = p(P.value), U = p(""), W = t(() => Y(P.value)), G = t(() => N.disabled || N.readonly), K = t(() => N.errorMsg || U.value), q = t(() => [N.hint && `${L}-hint`, K.value && `${L}-msg`].filter(Boolean).join(" ") || void 0), J = t(() => N.presets.flatMap((e) => {
+			let t = typeof e == "string" ? { value: e } : e, n = Y(t.value);
+			return n ? [{
+				value: n,
+				label: t.label || n
+			}] : [];
+		}));
+		function Y(e) {
+			let t = e ? I.exec(e.trim()) : null;
+			if (!t) return null;
+			let n = t[1].toLowerCase();
+			return `#${n.length === 3 ? [...n].map((e) => e + e).join("") : n}`;
+		}
+		function X(e) {
+			U.value = "", H.value = e, e !== P.value && (P.value = e, F("change", e));
+		}
+		function Z(e) {
+			H.value = e.target.value, U.value = "";
+			let t = H.value.trim().replace(/^#?/, "").length === 6 ? Y(H.value) : null;
+			t && (P.value = t);
+		}
+		function Q() {
+			let e = H.value.trim();
+			if (!e) return X("");
+			let t = Y(e);
+			t ? X(t) : U.value = "Enter a hex colour such as #1c7c54 or #fff";
+		}
+		function $(e) {
+			U.value = "";
+			let t = e.target.value.toLowerCase();
+			H.value = t, P.value = t;
+		}
+		function ee(e) {
+			F("change", e.target.value.toLowerCase());
+		}
+		return b(P, (e) => {
+			Y(H.value) !== Y(e) && (H.value = e ?? "");
+		}), c({ focus: () => V.value?.focus() }), (t, c) => (f(), r("div", l(z.value, {
+			class: ["w-full", s.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-color-input"
+		}), [
+			s.label ? (f(), r("label", {
+				key: 0,
+				for: g(L),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				i("span", null, h(s.label), 1),
+				s.readonly ? (f(), r("span", w, "(read only)")) : n("", !0),
+				s.required ? (f(), r("span", T, "*")) : n("", !0)
+			], 8, C)) : n("", !0),
+			s.hint ? (f(), r("p", {
+				key: 1,
+				id: `${g(L)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, h(s.hint), 9, E)) : n("", !0),
+			i("div", { class: u(["relative flex min-w-0 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
+				s.size === "small" ? "h-9" : "h-10",
+				s.readonly ? "bg-surface-muted" : "bg-background",
+				K.value ? "border-danger/60 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !s.disabled && "hover:border-accent-active"]
+			]]) }, [i("span", {
+				class: u(["relative ml-1 shrink-0 overflow-hidden rounded-8 border border-border has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-1 has-[input:focus-visible]:ring-offset-surface", [s.size === "small" ? "size-7" : "size-8", !W.value && "bg-surface-sunken"]]),
+				style: d(W.value ? { backgroundColor: W.value } : void 0),
+				"data-testid": "ac-color-input-swatch"
+			}, [i("input", {
+				type: "color",
+				value: W.value ?? "#000000",
+				disabled: G.value,
+				"aria-label": s.label ? `${s.label}: open colour picker` : "Open colour picker",
+				class: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+				onInput: $,
+				onChange: ee
+			}, null, 40, D)], 6), i("input", l({
+				id: g(L),
+				ref_key: "input",
+				ref: V
+			}, B.value, {
+				type: "text",
+				autocomplete: "off",
+				spellcheck: "false",
+				maxlength: "7",
+				value: H.value,
+				name: s.name,
+				disabled: s.disabled,
+				readonly: s.readonly,
+				required: s.required,
+				"aria-invalid": !!K.value || void 0,
+				"aria-describedby": q.value,
+				class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent pl-2.5 font-mono text-base font-normal text-heading outline-none placeholder:font-sans placeholder:text-muted/80 disabled:cursor-not-allowed", s.size === "small" ? "pr-3" : "pr-4"],
+				onInput: Z,
+				onBlur: Q,
+				onKeydown: x(Q, ["enter"])
+			}), null, 16, O)], 2),
+			J.value.length ? (f(), r("div", {
+				key: 2,
+				class: "mt-2.5 flex flex-wrap gap-2",
+				role: "group",
+				"aria-label": s.label ? `${s.label} presets` : "Presets"
+			}, [(f(!0), r(e, null, m(J.value, (e) => (f(), r("button", {
+				key: e.value,
+				type: "button",
+				class: u(["size-6 shrink-0 rounded-full border border-border transition-[box-shadow,transform] duration-200 hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:scale-100 motion-reduce:transition-none motion-reduce:hover:scale-100", [e.value === W.value && "ring-2 ring-primary ring-offset-2 ring-offset-surface", !G.value && "cursor-pointer"]]),
+				style: d({ backgroundColor: e.value }),
+				disabled: G.value,
+				"aria-label": e.label,
+				"aria-pressed": e.value === W.value,
+				title: e.label,
+				"data-testid": "ac-color-input-preset",
+				onClick: (t) => X(e.value)
+			}, null, 14, A))), 128))], 8, k)) : n("", !0),
+			K.value ? (f(), r("p", {
+				key: 3,
+				id: `${g(L)}-msg`,
+				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				role: "alert"
+			}, [o(g(S), {
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}), a(" " + h(K.value), 1)], 8, j)) : n("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { M as default };

package/dist/lib/components/AcConfirmModal.js

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

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

@@ -0,0 +1,56 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** Heading that names the action, e.g. "Restart database". */
+    title?: string;
+    /** What happens if the viewer confirms. The default slot replaces it for rich text. */
+    description?: string;
+    /** Label of the confirm button. Name the action: "Restart", "Revoke token". */
+    confirmLabel?: string;
+    /** Same as `confirmLabel`; the name cloud-ui's ConfirmModal and AcDeleteModal use. Wins when both are set. */
+    confirmText?: string;
+    /** Label of the cancel button. */
+    cancelLabel?: string;
+    /** Colour of the confirm button and the icon tile. Use `danger` for destructive actions. cloud-ui's `error` is `danger`. */
+    color?: Tone;
+    /** Shows a spinner on the confirm button, disables Cancel and blocks closing while the request runs. cloud-ui's `is-loading`. */
+    loading?: boolean;
+    /** A Lucide icon shown in a 32px tile tinted with `color`, beside the description. */
+    icon?: Component;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Rich description, e.g. with the resource name in `<strong>`. Replaces `description`. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the dialog is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    icon: Component;
+    color: Tone;
+    loading: boolean;
+    confirmLabel: string;
+    confirmText: string;
+    cancelLabel: string;
+}, {}, {}, {}, 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/AcConfirmModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,92 @@
+import e from "./AcButton.js";
+import t from "./AcModal.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useModel as h, withCtx as g } from "vue";
+//#region src/lib/components/AcConfirmModal.vue?vue&type=script&setup=true&lang.ts
+var _ = {
+	class: "flex items-start gap-4",
+	"data-ac-ds": "",
+	"data-testid": "ac-confirm-modal"
+}, v = /*@__PURE__*/ c({
+	__name: "AcConfirmModal",
+	props: /*@__PURE__*/ l({
+		title: { default: "Confirm action" },
+		description: { default: "" },
+		confirmLabel: { default: "Confirm" },
+		confirmText: { default: "" },
+		cancelLabel: { default: "Cancel" },
+		color: { default: "primary" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: void 0 }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["confirm", "cancel"], ["update:open"]),
+	setup(c, { emit: l }) {
+		let v = c, y = h(c, "open"), b = l, x = {
+			primary: "border-primary/25 bg-primary/10 text-primary-strong",
+			info: "border-info/25 bg-info/10 text-info-strong",
+			success: "border-success/25 bg-success/10 text-success-strong",
+			warning: "border-warning/30 bg-warning/10 text-warning-strong",
+			danger: "border-danger/25 bg-danger/10 text-danger-strong"
+		}, S = n(() => v.confirmText || v.confirmLabel), C = n(() => v.color === "danger");
+		function w() {
+			y.value = !1, b("cancel");
+		}
+		return (n, l) => (d(), r(t, {
+			open: y.value,
+			"onUpdate:open": l[1] ||= (e) => y.value = e,
+			title: c.title,
+			size: "small",
+			closable: !c.loading,
+			"close-on-outside-click": !c.loading,
+			onClose: l[2] ||= (e) => b("cancel")
+		}, {
+			footer: g(() => [s(e, {
+				title: c.cancelLabel,
+				color: "white",
+				disabled: c.loading,
+				autofocus: C.value || void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-confirm-modal-cancel",
+				onClick: w
+			}, null, 8, [
+				"title",
+				"disabled",
+				"autofocus"
+			]), s(e, {
+				title: S.value,
+				color: c.color,
+				loading: c.loading,
+				autofocus: !C.value || void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-confirm-modal-confirm",
+				onClick: l[0] ||= (e) => b("confirm")
+			}, null, 8, [
+				"title",
+				"color",
+				"loading",
+				"autofocus"
+			])]),
+			default: g(() => [o("div", _, [c.icon ? (d(), a("span", {
+				key: 0,
+				class: u(["inline-flex size-8 shrink-0 items-center justify-center rounded-10 border", x[c.color]]),
+				"aria-hidden": "true"
+			}, [(d(), r(p(c.icon), { class: "size-4" }))], 2)) : i("", !0), o("div", { class: u(["min-w-0 flex-1 text-base text-muted [&_strong]:font-semibold [&_strong]:text-heading", c.icon && "pt-1.5"]) }, [f(n.$slots, "default", {}, () => [o("p", null, m(c.description), 1)])], 2)])]),
+			_: 3
+		}, 8, [
+			"open",
+			"title",
+			"closable",
+			"close-on-outside-click"
+		]));
+	}
+});
+//#endregion
+export { v as default };

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

@@ -7,7 +7,7 @@ export interface Props {
     bordered?: boolean;
 }
 type __VLS_Slots = {
-    /** Icon before the title. */
+    /** A 16px Lucide icon before the title, shown in a tinted 32px tile. */
     icon?: () => unknown;
     /** Right after the title, e.g. a count badge or info tooltip. */
     "title-actions"?: () => unknown;

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. Turn off for plain text such as a team name. */
+    mono?: boolean;
+    /** Shows only a copy icon button, for placing after a value you render yourself. */
+    iconOnly?: boolean;
+    /** Text size: `small` 12px for table cells and chips, `normal` 14px for detail pages. */
+    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: !0
+		},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" },
+		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" : "gap-1.5 rounded-6 text-base"), 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" : "text-heading"), K = r(() => M.iconOnly && M.size === "normal" ? "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-success-strong", 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/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";
@@ -37,9 +37,9 @@ 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. */
     size?: "small" | "normal";
@@ -75,10 +75,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     range: boolean;
     clearable: boolean;
     errorMsg: string;
+    presets: DatePickerPreset[];
     minDate: string;
     maxDate: string;
     isDateDisabled: (day: string) => boolean;
-    presets: DatePickerPreset[];
     timeZone: string;
     locale: string;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;