@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,38 +1,48 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, inject as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d, useId as f } from "vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, useId as m } from "vue";
 //#region src/lib/components/AcFormSection.vue?vue&type=script&setup=true&lang.ts
-var p = ["aria-labelledby", "aria-describedby"], m = { class: "min-w-0 flex-1" }, h = ["id"], g = ["id"], _ = {
+var h = ["aria-labelledby", "aria-describedby"], g = {
 	key: 0,
+	class: "flex size-7 shrink-0 items-center justify-center rounded-8 border border-primary/20 bg-primary/8 text-primary",
+	"aria-hidden": "true"
+}, _ = { class: "min-w-0 flex-1" }, v = ["id"], y = ["id"], b = {
+	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, v = /*@__PURE__*/ a({
+}, x = /*@__PURE__*/ o({
 	__name: "AcFormSection",
 	props: {
 		title: { default: "" },
 		description: { default: "" },
+		icon: { default: void 0 },
 		layout: { default: void 0 },
+		variant: { default: void 0 },
 		columns: { default: 1 }
 	},
-	setup(a) {
-		let v = a, y = o("ac-form", null), b = f(), x = e(() => v.layout ?? y?.layout.value ?? "stacked");
-		return (e, o) => (c(), n("div", {
+	setup(o) {
+		let x = o, S = s("ac-form", null), C = m(), w = e(() => x.layout ?? S?.layout.value ?? "stacked"), T = e(() => x.variant ?? S?.variant?.value ?? "card");
+		return (e, s) => (l(), r("div", {
 			role: "group",
-			"aria-labelledby": a.title ? `${d(b)}-title` : void 0,
-			"aria-describedby": a.description || e.$slots.description ? `${d(b)}-desc` : void 0,
-			class: s(["border-t border-border-light py-7 first:border-t-0 first:pt-0", x.value === "aside" && "md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-10"]),
+			"aria-labelledby": o.title ? `${p(C)}-title` : void 0,
+			"aria-describedby": o.description || e.$slots.description ? `${p(C)}-desc` : void 0,
+			class: c([T.value === "card" ? "rounded-14 border border-border bg-surface p-5" : "border-t border-border py-7 first:border-t-0 first:pt-0", w.value === "aside" && "md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-10"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-form-section"
-		}, [a.title || a.description || e.$slots.description || e.$slots.actions ? (c(), n("div", {
+		}, [o.title || o.description || o.icon || e.$slots.description || e.$slots.actions ? (l(), r("div", {
 			key: 0,
-			class: s(["mb-5 flex items-start gap-4", x.value === "aside" && "md:mb-0"])
-		}, [r("div", m, [a.title ? (c(), n("h3", {
-			key: 0,
-			id: `${d(b)}-title`,
-			class: "text-xl leading-6 font-semibold tracking-[-0.01em] text-heading"
-		}, u(a.title), 9, h)) : t("", !0), a.description || e.$slots.description ? (c(), n("div", {
-			key: 1,
-			id: `${d(b)}-desc`,
-			class: "mt-1 text-base text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2"
-		}, [l(e.$slots, "description", {}, () => [i(u(a.description), 1)])], 8, g)) : t("", !0)]), e.$slots.actions && x.value === "stacked" ? (c(), n("div", _, [l(e.$slots, "actions")])) : t("", !0)], 2)) : t("", !0), r("div", { class: s(["grid min-w-0 gap-5", [a.columns === 2 && "sm:grid-cols-2", x.value === "aside" && "md:col-start-2"]]) }, [l(e.$slots, "default")], 2)], 10, p));
+			class: c(["mb-5 flex items-start gap-3", w.value === "aside" && "md:mb-0"])
+		}, [
+			o.icon ? (l(), r("span", g, [(l(), t(d(o.icon), { class: "size-3.5" }))])) : n("", !0),
+			i("div", _, [o.title ? (l(), r("h3", {
+				key: 0,
+				id: `${p(C)}-title`,
+				class: c(["font-heading font-semibold tracking-tight text-heading", T.value === "card" ? "text-base" : "text-lg"])
+			}, f(o.title), 11, v)) : n("", !0), o.description || e.$slots.description ? (l(), r("div", {
+				key: 1,
+				id: `${p(C)}-desc`,
+				class: c([T.value === "card" ? "mt-0.5 text-xs leading-relaxed" : "mt-1 text-base", "text-muted [&_a]:font-medium [&_a]:text-primary-strong [&_a]:underline [&_a]:underline-offset-2"])
+			}, [u(e.$slots, "description", {}, () => [a(f(o.description), 1)])], 10, y)) : n("", !0)]),
+			e.$slots.actions && w.value === "stacked" ? (l(), r("div", b, [u(e.$slots, "actions")])) : n("", !0)
+		], 2)) : n("", !0), i("div", { class: c(["grid min-w-0 gap-5", [o.columns === 2 && "sm:grid-cols-2", w.value === "aside" && "md:col-start-2"]]) }, [u(e.$slots, "default")], 2)], 10, h));
 	}
 });
 //#endregion
-export { v as default };
+export { x as default };

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

@@ -7,13 +7,13 @@ export interface Props {
     backButton?: boolean;
     /** Sticks to the top while the page scrolls. */
     sticky?: boolean;
-    /** Distance from the top when sticky, e.g. `"56px"` under an app navbar. */
+    /** Distance from the top when sticky, e.g. `"72px"` under an app navbar. */
     top?: string;
-    /** `normal` suits a page's main header. `compact` has a 14px title and less padding, for dense pages and forms. */
+    /** `normal` suits a page's main header: a 20px title, 24px from 768px. `compact` has a 16px title and less padding, for dense pages and forms. */
     size?: "normal" | "compact";
 }
 type __VLS_Slots = {
-    /** A logo or icon before the title, e.g. the database engine's logo on a resource page. Shown in a 40px tile. */
+    /** A logo or icon before the title, shown in a 44px tile: a Lucide icon gets a solid primary tile, an `<img>` (e.g. the database engine's logo) a bordered white one. */
     icon?: () => unknown;
     /** Breadcrumb above the title. */
     breadcrumb?: () => unknown;

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

@@ -1,20 +1,16 @@
 import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
 import { ArrowLeft as f } from "@lucide/vue";
 //#region src/lib/components/AcHeader.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "flex min-w-0 items-center gap-3.5" }, m = {
-	key: 1,
-	class: "inline-flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-10 border border-border-light bg-surface p-2 text-label shadow-xs ring-1 ring-black/[0.02] [&_img]:size-full [&_img]:object-contain [&_svg]:size-5",
-	"aria-hidden": "true"
-}, h = { class: "min-w-0" }, g = {
+var p = { class: "flex min-w-0 items-center gap-3.5" }, m = { class: "min-w-0" }, h = {
 	key: 0,
-	class: "mb-1 text-xs text-muted"
-}, _ = { class: "flex min-w-0 items-center gap-2.5" }, v = {
+	class: "mb-2"
+}, g = { class: "flex min-w-0 flex-wrap items-center gap-2.5" }, _ = {
 	key: 0,
-	class: "mt-px truncate text-sm leading-5 text-muted"
-}, y = {
+	class: "mt-1 max-w-prose truncate text-base text-muted"
+}, v = {
 	key: 0,
-	class: "flex flex-wrap items-center gap-2"
-}, b = /*@__PURE__*/ a({
+	class: "flex shrink-0 flex-wrap items-center gap-2"
+}, y = /*@__PURE__*/ a({
 	__name: "AcHeader",
 	props: {
 		title: { default: "" },
@@ -31,30 +27,34 @@ var p = { class: "flex min-w-0 items-center gap-3.5" }, m = {
 		size: { default: "normal" }
 	},
 	emits: ["back"],
-	setup(a, { emit: b }) {
-		let x = a, S = e(() => x.size === "compact"), C = b;
-		return (e, b) => (c(), n("header", {
-			class: o(["z-20 border-b border-border-light bg-surface/85 shadow-[0_1px_2px_0_rgb(15_23_42/0.03)] backdrop-blur-md backdrop-saturate-150", a.sticky && "sticky"]),
+	setup(a, { emit: y }) {
+		let b = a, x = e(() => b.size === "compact"), S = y;
+		return (e, y) => (c(), n("header", {
+			class: o(["z-20 border-b border-border/80 bg-surface/90 backdrop-blur-sm", a.sticky && "sticky"]),
 			style: s(a.sticky ? { top: a.top } : void 0),
 			"data-ac-ds": "",
 			"data-testid": "ac-header"
-		}, [r("div", { class: o(["flex flex-wrap items-center justify-between gap-x-6 gap-y-3", S.value ? "px-5 py-2.5" : "px-6 py-3.5"]) }, [r("div", p, [
+		}, [r("div", { class: o(["flex flex-wrap items-center justify-between gap-x-6 gap-y-4", x.value ? "px-4 py-3 sm:px-6" : "px-4 py-5 sm:px-6"]) }, [r("div", p, [
 			a.backButton ? (c(), n("button", {
 				key: 0,
 				type: "button",
-				class: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-8 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading active:scale-95 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-surface text-heading transition-[color,background-color,border-color,box-shadow,transform] duration-200 hover:bg-surface-sunken/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none active:translate-y-px motion-reduce:active:translate-y-0",
 				"aria-label": "Back",
 				"data-ac-ds": "",
 				"data-testid": "ac-header-back",
-				onClick: b[0] ||= (e) => C("back")
+				onClick: y[0] ||= (e) => S("back")
 			}, [i(d(f), {
 				class: "size-4",
 				"aria-hidden": "true"
 			})])) : t("", !0),
-			e.$slots.icon ? (c(), n("span", m, [l(e.$slots, "icon")])) : t("", !0),
-			r("div", h, [e.$slots.breadcrumb ? (c(), n("div", g, [l(e.$slots, "breadcrumb")])) : t("", !0), l(e.$slots, "title", {}, () => [r("div", _, [r("h4", { class: o(["truncate font-semibold text-heading", S.value ? "text-lg leading-6 tracking-[-0.01em]" : "text-xl leading-7 tracking-tight"]) }, u(a.title), 3), l(e.$slots, "title-extra")]), a.subtitle ? (c(), n("p", v, u(a.subtitle), 1)) : t("", !0)])])
-		]), e.$slots.default ? (c(), n("div", y, [l(e.$slots, "default")])) : t("", !0)], 2)], 6));
+			e.$slots.icon ? (c(), n("span", {
+				key: 1,
+				class: o(["inline-flex shrink-0 items-center justify-center overflow-hidden bg-primary text-white has-[img]:border has-[img]:border-border has-[img]:bg-surface has-[img]:p-2 [&_img]:size-full [&_img]:object-contain", x.value ? "size-9 rounded-10 [&_svg]:size-5" : "size-11 rounded-14 [&_svg]:size-6"]),
+				"aria-hidden": "true"
+			}, [l(e.$slots, "icon")], 2)) : t("", !0),
+			r("div", m, [e.$slots.breadcrumb ? (c(), n("div", h, [l(e.$slots, "breadcrumb")])) : t("", !0), l(e.$slots, "title", {}, () => [r("div", g, [r("h4", { class: o(["truncate font-heading font-semibold tracking-tight text-heading", x.value ? "text-lg" : "text-2xl md:text-3xl"]) }, u(a.title), 3), l(e.$slots, "title-extra")]), a.subtitle ? (c(), n("p", _, u(a.subtitle), 1)) : t("", !0)])])
+		]), e.$slots.default ? (c(), n("div", v, [l(e.$slots, "default")])) : t("", !0)], 2)], 6));
 	}
 });
 //#endregion
-export { b as default };
+export { y as default };

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

@@ -5,7 +5,7 @@ import { Check as b, Copy as x, Eye as S, EyeOff as C } from "@lucide/vue";
 //#region src/lib/components/AcInfoTable.vue?vue&type=script&setup=true&lang.ts
 var w = {
 	key: 0,
-	class: "text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+	class: "font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
 }, T = {
 	key: 1,
 	class: "ml-auto flex shrink-0 items-center gap-2"
@@ -48,10 +48,14 @@ var w = {
 			item: e,
 			key: e.key ?? e.label
 		}))), z = r(() => [
-			"min-w-0 border-t border-border-light py-2.5 first:border-t-0",
+			"min-w-0 border-t border-border py-3.5 first:border-t-0",
 			N.columns === 2 && "md:[&:nth-child(2)]:border-t-0",
-			N.layout === "horizontal" ? "flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
-		]), B = r(() => ["flex items-center gap-1.5 text-base text-muted", N.layout === "horizontal" && (N.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")]);
+			N.layout === "horizontal" ? "flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
+		]), B = r(() => [
+			"flex items-center gap-2 text-muted",
+			N.layout === "stacked" ? "text-xs font-medium" : "text-base",
+			N.layout === "horizontal" && (N.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")
+		]);
 		function V(e) {
 			return e == null || e === "";
 		}
@@ -65,34 +69,34 @@ var w = {
 			} catch {}
 		}
 		return d(() => clearTimeout(L)), (t, r) => (f(), o("div", {
-			class: u(l.bordered && "rounded-10 border border-border bg-surface shadow-xs"),
+			class: u(l.bordered && "rounded-14 border border-border bg-surface"),
 			"data-ac-ds": "",
 			"data-testid": "ac-info-table"
 		}, [l.title || t.$slots.actions ? (f(), o("div", {
 			key: 0,
-			class: u(["flex items-center justify-between gap-4", l.bordered ? "border-b border-border-light px-5 py-3.5" : "mb-2"])
+			class: u(["flex items-center justify-between gap-4", l.bordered ? "border-b border-border px-6 pt-5 pb-3" : "mb-2"])
 		}, [l.title ? (f(), o("h3", w, _(l.title), 1)) : a("", !0), t.$slots.actions ? (f(), o("div", T, [h(t.$slots, "actions")])) : a("", !0)], 2)) : a("", !0), !l.loading && !l.items.length ? (f(), o("p", {
 			key: 1,
-			class: u(["py-6 text-center text-base text-muted", l.bordered && "px-5"])
+			class: u(["py-10 text-center text-base text-muted", l.bordered && "px-6"])
 		}, _(l.emptyText), 3)) : (f(), o("dl", {
 			key: 2,
-			class: u(["grid", [l.columns === 2 && "md:grid-cols-2 md:gap-x-10", l.bordered ? "px-5 py-2" : ""]]),
+			class: u(["grid", [l.columns === 2 && "md:grid-cols-2 md:gap-x-10", l.bordered ? "px-6 py-1" : ""]]),
 			"aria-busy": l.loading || void 0
 		}, [l.loading && !l.items.length ? (f(), o(n, { key: 0 }, m(P, (e, t) => s("div", {
 			key: t,
 			class: u(z.value)
-		}, [s("dt", { class: u(B.value) }, [...r[0] ||= [s("span", { class: "h-3 w-20 animate-pulse rounded-4 bg-surface-sunken" }, null, -1)]], 2), s("dd", D, [s("span", { class: u(["h-3 animate-pulse rounded-4 bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : a("", !0), (f(!0), o(n, null, m(R.value, ({ item: n, key: r }, d) => (f(), o("div", {
+		}, [s("dt", { class: u(B.value) }, [...r[0] ||= [s("span", { class: "h-3 w-20 animate-pulse rounded-full bg-surface-sunken" }, null, -1)]], 2), s("dd", D, [s("span", { class: u(["h-3 animate-pulse rounded-full bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : a("", !0), (f(!0), o(n, null, m(R.value, ({ item: n, key: r }, d) => (f(), o("div", {
 			key: r,
 			class: u(z.value)
 		}, [s("dt", { class: u(B.value) }, [h(t.$slots, `label-${r}`, { item: n }, () => [c(_(n.label), 1)])], 2), s("dd", O, [l.loading ? (f(), o("span", {
 			key: 0,
-			class: u(["h-3 animate-pulse rounded-4 bg-surface-sunken", P[d % P.length]])
+			class: u(["h-3 animate-pulse rounded-full bg-surface-sunken", P[d % P.length]])
 		}, null, 2)) : h(t.$slots, `value-${r}`, { item: n }, () => [V(n.value) ? (f(), o("span", k, "—")) : (f(), o("span", A, [
 			s("span", { class: u(["min-w-0 [overflow-wrap:anywhere]", (n.mono || n.secret) && "font-mono text-xs leading-5"]) }, _(n.secret && !I.value.has(r) ? "••••••••••••" : n.value), 3),
 			n.secret ? (f(), o("button", {
 				key: 0,
 				type: "button",
-				class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 				"aria-label": I.value.has(r) ? `Hide ${n.label}` : `Show ${n.label}`,
 				"aria-pressed": I.value.has(r),
 				onClick: (e) => H(r)
@@ -106,12 +110,12 @@ var w = {
 			}, {
 				default: y(() => [s("button", {
 					type: "button",
-					class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 					"aria-label": F.value === r ? `${n.label} copied` : `Copy ${n.label}`,
 					onClick: (e) => U(r, n.value)
 				}, [F.value === r ? (f(), i(v(b), {
 					key: 0,
-					class: "size-3.5 text-success",
+					class: "size-3.5 text-success-strong",
 					"aria-hidden": "true"
 				})) : (f(), i(v(x), {
 					key: 1,

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

@@ -1,6 +1,6 @@
 import type { Component } from "vue";
 export interface Props {
-    /** Floating label. It rests inside the field and rises on focus or when filled. With a `prefix`, it always sits on the top edge. */
+    /** Label above the field. Pass `placeholder` for an example value inside it. */
     label: string;
     /** Native `name` attribute. */
     name?: string;
@@ -10,11 +10,11 @@ export interface Props {
     required?: boolean;
     /** Disables the field. */
     disabled?: boolean;
-    /** Read-only field with a gray background. */
+    /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
     /** Error text under the field. Turns the border and label 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";

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

@@ -1,10 +1,17 @@
 import { computed as e, createBlock 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, openBlock as d, ref as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, useSlots as b, vModelDynamic as x, withDirectives as S } from "vue";
 import { CircleAlert as C, Eye as w, EyeOff as T } from "@lucide/vue";
 //#region src/lib/components/AcInput.vue?vue&type=script&setup=true&lang.ts
-var E = { class: "flex" }, D = {
+var E = ["for"], D = {
 	key: 0,
-	class: "flex h-full shrink-0 items-center pl-3 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4"
-}, O = [
+	class: "font-normal text-muted"
+}, O = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, k = ["id"], A = { class: "flex" }, j = {
+	key: 0,
+	class: "flex h-full shrink-0 items-center pl-3.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4"
+}, M = [
 	"id",
 	"name",
 	"type",
@@ -13,15 +20,11 @@ var E = { class: "flex" }, D = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], k = ["for"], A = {
-	key: 0,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, j = ["aria-label"], M = [
+], N = ["aria-label", "aria-pressed"], P = [
 	"disabled",
 	"aria-label",
 	"title"
-], N = { key: 1 }, P = ["id"], F = ["id"], I = /*@__PURE__*/ s({
+], F = { key: 1 }, I = ["id"], L = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "AcInput",
 	props: /*@__PURE__*/ c({
@@ -42,7 +45,7 @@ var E = { class: "flex" }, D = {
 		},
 		errorMsg: { default: "" },
 		hint: { default: "" },
-		size: { default: "small" },
+		size: { default: "normal" },
 		addonLabel: { default: "" },
 		addonIcon: { default: void 0 },
 		addonIconOnly: {
@@ -54,90 +57,98 @@ var E = { class: "flex" }, D = {
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ c(["addon"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: I }) {
-		let L = s, R = y(s, "modelValue"), z = I, B = v(), V = _(), H = b(), U = e(() => ({
-			class: V.class,
-			style: V.style
-		})), W = e(() => {
-			let { class: e, style: t, ...n } = V;
+	setup(s, { expose: c, emit: L }) {
+		let R = s, z = y(s, "modelValue"), B = L, V = v(), H = _(), U = b(), W = e(() => ({
+			class: H.class,
+			style: H.style
+		})), G = e(() => {
+			let { class: e, style: t, ...n } = H;
 			return n;
-		}), G = f(null), K = f(!1), q = e(() => L.type === "password" && K.value ? "text" : L.type), J = e(() => L.errorMsg || L.hint ? `${B}-msg` : void 0), Y = e(() => !!L.addonLabel || !!L.addonIcon), X = e(() => !!H.suffix || L.type === "password");
-		function Z(e) {
-			L.disabled || z("addon", e);
+		}), K = f(null), q = f(!1), J = e(() => R.type === "password" && q.value ? "text" : R.type), Y = e(() => [R.hint && `${V}-hint`, R.errorMsg && `${V}-msg`].filter(Boolean).join(" ") || void 0), X = e(() => !!R.addonLabel || !!R.addonIcon), Z = e(() => !!U.suffix || R.type === "password");
+		function Q(e) {
+			R.disabled || B("addon", e);
 		}
-		return c({ focus: () => G.value?.focus() }), (e, c) => (d(), r("div", l(U.value, {
-			class: ["w-full", s.disabled && "opacity-60"],
+		return c({ focus: () => K.value?.focus() }), (e, c) => (d(), r("div", l(W.value, {
+			class: ["w-full", s.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-input"
-		}), [i("div", E, [i("div", { class: u(["relative flex min-w-0 flex-1 items-center border shadow-xs transition-[border-color,box-shadow] duration-150", [
-			s.size === "small" ? "h-9" : "h-10",
-			Y.value ? "rounded-l-6" : "rounded-6",
-			s.disabled || s.readonly ? "bg-surface-muted" : "bg-surface",
-			s.readonly && "shadow-none",
-			s.errorMsg ? "border-red-60 focus-within:border-danger focus-within:shadow-[0_0_0_3px_var(--color-red-90)]" : "border-border hover:border-border-dark focus-within:focus-ring"
-		]]) }, [
-			e.$slots.prefix ? (d(), r("span", D, [p(e.$slots, "prefix")])) : n("", !0),
-			S(i("input", l({
-				id: g(B),
-				ref_key: "input",
-				ref: G
-			}, W.value, {
-				"onUpdate:modelValue": c[0] ||= (e) => R.value = e,
-				name: s.name,
-				type: q.value,
-				disabled: s.disabled,
-				readonly: s.readonly,
-				required: s.required,
-				"aria-invalid": !!s.errorMsg || void 0,
-				"aria-describedby": J.value,
-				placeholder: " ",
-				class: ["peer block h-full w-full min-w-0 flex-1 rounded-6 bg-transparent text-base text-heading outline-none placeholder:text-transparent disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-1" : "pl-3", X.value ? "pr-1.5" : "pr-3"]]
-			}), null, 16, O), [[x, R.value]]),
+		}), [
 			i("label", {
-				for: g(B),
-				class: u(["pointer-events-none absolute -top-px left-2.25 max-w-[calc(100%-20px)] -translate-y-1/2 truncate rounded-2 bg-surface px-1 text-xs font-medium whitespace-nowrap text-label transition-all duration-150 ease-out peer-focus:text-primary-20 peer-read-only:bg-linear-to-b peer-read-only:from-surface peer-read-only:from-50% peer-read-only:to-surface-muted peer-read-only:to-50% peer-disabled:bg-linear-to-b peer-disabled:from-surface peer-disabled:from-50% peer-disabled:to-surface-muted peer-disabled:to-50%", [!e.$slots.prefix && "peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-muted peer-focus:-top-px peer-focus:text-xs peer-focus:font-medium", s.errorMsg && "text-red-30! peer-focus:text-red-30!"]])
-			}, [a(h(s.label), 1), s.required ? (d(), r("span", A, " *")) : n("", !0)], 10, k),
-			e.$slots.suffix ? (d(), r("span", {
-				key: 1,
-				class: u(["relative flex h-full shrink-0 items-center bg-inherit text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.type === "password" ? "pr-1" : "pr-3"])
-			}, [p(e.$slots, "suffix")], 2)) : n("", !0),
-			s.type === "password" ? (d(), r("button", {
-				key: 2,
+				for: g(V),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				i("span", null, h(s.label), 1),
+				s.readonly ? (d(), r("span", D, "(read only)")) : n("", !0),
+				s.required ? (d(), r("span", O, "*")) : n("", !0)
+			], 8, E),
+			s.hint ? (d(), r("p", {
+				key: 0,
+				id: `${g(V)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, h(s.hint), 9, k)) : n("", !0),
+			i("div", A, [i("div", { class: u(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
+				s.size === "small" ? "h-9" : "h-10",
+				X.value ? "rounded-l-10" : "rounded-10",
+				s.readonly ? "bg-surface-muted" : "bg-background",
+				s.errorMsg ? "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"]
+			]]) }, [
+				e.$slots.prefix ? (d(), r("span", j, [p(e.$slots, "prefix")])) : n("", !0),
+				S(i("input", l({
+					id: g(V),
+					ref_key: "input",
+					ref: K
+				}, G.value, {
+					"onUpdate:modelValue": c[0] ||= (e) => z.value = e,
+					name: s.name,
+					type: J.value,
+					disabled: s.disabled,
+					readonly: s.readonly,
+					required: s.required,
+					"aria-invalid": !!s.errorMsg || void 0,
+					"aria-describedby": Y.value,
+					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-2" : s.size === "small" ? "pl-3" : "pl-4", Z.value ? "pr-2" : s.size === "small" ? "pr-3" : "pr-4"]]
+				}), null, 16, M), [[x, z.value]]),
+				e.$slots.suffix ? (d(), r("span", {
+					key: 1,
+					class: u(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.type === "password" ? "pr-1" : "pr-3.5"])
+				}, [p(e.$slots, "suffix")], 2)) : n("", !0),
+				s.type === "password" ? (d(), r("button", {
+					key: 2,
+					type: "button",
+					class: "relative mr-1.5 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+					"aria-label": q.value ? "Hide value" : "Show value",
+					"aria-pressed": q.value,
+					onClick: c[1] ||= (e) => q.value = !q.value
+				}, [(d(), t(m(q.value ? g(T) : g(w)), {
+					class: "size-4",
+					"aria-hidden": "true"
+				}))], 8, N)) : n("", !0)
+			], 2), X.value ? (d(), r("button", {
+				key: 0,
 				type: "button",
-				class: "relative mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading",
-				"aria-label": K.value ? "Hide value" : "Show value",
-				onClick: c[1] ||= (e) => K.value = !K.value
-			}, [(d(), t(m(K.value ? g(T) : g(w)), {
-				class: "size-4",
+				class: u(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [s.size === "small" ? "h-9" : "h-10", s.addonIconOnly ? s.size === "small" ? "w-9" : "w-10" : "px-4"]]),
+				disabled: s.disabled,
+				"aria-label": s.addonIconOnly ? s.addonLabel : void 0,
+				title: s.addonIconOnly ? s.addonLabel : void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-input-addon",
+				onClick: Q
+			}, [s.addonIcon ? (d(), t(m(s.addonIcon), {
+				key: 0,
+				class: "size-4 text-muted",
 				"aria-hidden": "true"
-			}))], 8, j)) : n("", !0)
-		], 2), Y.value ? (d(), r("button", {
-			key: 0,
-			type: "button",
-			class: u(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-6 border border-border bg-surface-muted text-base font-medium whitespace-nowrap text-heading shadow-xs transition-[background-color,border-color,box-shadow] duration-150 hover:bg-surface-sunken focus-visible:z-10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:hover:bg-surface-muted", [s.size === "small" ? "h-9" : "h-10", s.addonIconOnly ? "w-9" : "px-3"]]),
-			disabled: s.disabled,
-			"aria-label": s.addonIconOnly ? s.addonLabel : void 0,
-			title: s.addonIconOnly ? s.addonLabel : void 0,
-			"data-ac-ds": "",
-			"data-testid": "ac-input-addon",
-			onClick: Z
-		}, [s.addonIcon ? (d(), t(m(s.addonIcon), {
-			key: 0,
-			class: "size-4 text-label",
-			"aria-hidden": "true"
-		})) : n("", !0), s.addonIconOnly ? n("", !0) : (d(), r("span", N, h(s.addonLabel), 1))], 10, M)) : n("", !0)]), s.errorMsg ? (d(), r("p", {
-			key: 0,
-			id: `${g(B)}-msg`,
-			class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
-		}, [o(g(C), {
-			class: "size-3.5 shrink-0",
-			"aria-hidden": "true"
-		}), a(" " + h(s.errorMsg), 1)], 8, P)) : s.hint ? (d(), r("p", {
-			key: 1,
-			id: `${g(B)}-msg`,
-			class: "mt-1.5 text-xs text-muted"
-		}, h(s.hint), 9, F)) : n("", !0)], 16));
+			})) : n("", !0), s.addonIconOnly ? n("", !0) : (d(), r("span", F, h(s.addonLabel), 1))], 10, P)) : n("", !0)]),
+			s.errorMsg ? (d(), r("p", {
+				key: 1,
+				id: `${g(V)}-msg`,
+				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				role: "alert"
+			}, [o(g(C), {
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}), a(" " + h(s.errorMsg), 1)], 8, I)) : n("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { I as default };
+export { L as default };

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

@@ -8,7 +8,7 @@ var f = {
 }, p = {
 	key: 0,
 	class: "px-px text-xs text-muted"
-}, m = { "aria-hidden": "true" }, h = { class: "sr-only" }, g = "inline-flex items-center justify-center border border-border border-b-border-dark bg-surface-muted font-sans font-medium text-label shadow-[inset_0_-1px_0_0_var(--color-border)] select-none", _ = /*@__PURE__*/ o({
+}, m = { "aria-hidden": "true" }, h = { class: "sr-only" }, g = "inline-flex items-center justify-center border border-border bg-surface-muted font-mono font-medium text-muted select-none", _ = /*@__PURE__*/ o({
 	__name: "AcKbd",
 	props: {
 		keys: { default: () => [] },

package/dist/lib/components/AcKeyValueInput.js

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