@ac-design/design-system 1.0.0 → 1.0.2

package/dist/lib/compat.css

@@ -61,7 +61,6 @@ code:is([data-ac-ds], [data-ac-ds] *), kbd:is([data-ac-ds], [data-ac-ds] *), sam
     --color-primary-20: hsl(var(--primary-hue) var(--primary-saturation) 20%);
     --color-primary-30: hsl(var(--primary-hue) var(--primary-saturation) 30%);
     --color-primary-40: hsl(var(--primary-hue) var(--primary-saturation) 40%);
-    --color-primary-60: hsl(var(--primary-hue) var(--primary-saturation) 60%);
     --color-primary-70: hsl(var(--primary-hue) var(--primary-saturation) 70%);
     --color-primary-80: hsl(var(--primary-hue) var(--primary-saturation) 80%);
     --color-primary-90: hsl(var(--primary-hue) var(--primary-saturation) 90%);
@@ -1476,6 +1475,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     border-color: var(--color-primary) !important;
     box-shadow: 0 0 0 3px var(--color-ring) !important;
   }
+  .border-\[color-mix\(in_srgb\,var\(--color-primary\)_38\%\,var\(--color-border\)\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    border-color: color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 38%,#e2e8f0) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--color-primary) 38%,var(--color-border)) !important;
+    }
+  }
   .border-black\/10:where([data-ac-ds], [data-ac-ds] *) {
     border-color: color-mix(in srgb, hsl(0 0% 0%) 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1530,9 +1535,6 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .border-primary:where([data-ac-ds], [data-ac-ds] *) {
     border-color: var(--color-primary) !important;
   }
-  .border-primary-70:where([data-ac-ds], [data-ac-ds] *) {
-    border-color: var(--color-primary-70) !important;
-  }
   .border-primary-80:where([data-ac-ds], [data-ac-ds] *) {
     border-color: var(--color-primary-80) !important;
   }
@@ -2934,12 +2936,17 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
   @media (hover: hover) {
+    .hover\:border-\[color-mix\(in_srgb\,var\(--color-primary\)_60\%\,var\(--color-border\)\)\]:hover:where([data-ac-ds], [data-ac-ds] *) {
+      border-color: color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 60%,#e2e8f0) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-\[color-mix\(in_srgb\,var\(--color-primary\)_60\%\,var\(--color-border\)\)\]:hover:where([data-ac-ds], [data-ac-ds] *) {
+        border-color: color-mix(in srgb,var(--color-primary) 60%,var(--color-border)) !important;
+      }
+    }
     .hover\:border-border-dark:hover:where([data-ac-ds], [data-ac-ds] *) {
       border-color: var(--color-border-dark) !important;
     }
-    .hover\:border-primary-60:hover:where([data-ac-ds], [data-ac-ds] *) {
-      border-color: var(--color-primary-60) !important;
-    }
     .hover\:border-slate-60:hover:where([data-ac-ds], [data-ac-ds] *) {
       border-color: var(--color-slate-60) !important;
     }

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

@@ -33,7 +33,7 @@ var f = {
 			primary: {
 				solid: "bg-primary text-white border-black/15 shadow-button hover:bg-primary-hover",
 				light: "bg-primary-95 text-primary-20 border-transparent hover:bg-primary-93",
-				outlined: "bg-surface text-primary-20 border-primary-70 shadow-xs hover:bg-primary-97 hover:border-primary-60"
+				outlined: "bg-surface text-primary-20 border-[color-mix(in_srgb,var(--color-primary)_38%,var(--color-border))] shadow-xs hover:bg-primary-97 hover:border-[color-mix(in_srgb,var(--color-primary)_60%,var(--color-border))]"
 			},
 			info: {
 				solid: "bg-info text-white border-black/15 shadow-button hover:bg-info-hover",

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

@@ -67,11 +67,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     title: string;
     height: string;
     maxHeight: string;
+    readonly: boolean;
     wrap: boolean;
     schema: object;
     language: EditorLanguage;
     original: string;
-    readonly: boolean;
     validate: boolean;
     lineNumbers: boolean;
     placeholder: string;

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

@@ -1,36 +1,38 @@
-import e from "./AcSegmentedControl.js";
-import { editorHighlight as t, editorPhrases as n, editorTheme as r } from "../editor/theme.js";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, nextTick as ee, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as te, onMounted as ne, openBlock as m, ref as h, renderList as re, renderSlot as ie, resolveDynamicComponent as ae, shallowRef as oe, toDisplayString as g, unref as _, useId as se, useModel as ce, useSlots as le, vShow as ue, watch as v, withDirectives as de } from "vue";
-import { Check as fe, CircleAlert as pe, Copy as me, TriangleAlert as he } from "@lucide/vue";
-import { closeBrackets as ge, closeBracketsKeymap as _e } from "@codemirror/autocomplete";
-import { defaultKeymap as ve, history as ye, historyKeymap as be, indentWithTab as xe, simplifySelection as Se, temporarilySetTabFocusMode as Ce } from "@codemirror/commands";
-import { json as we } from "@codemirror/lang-json";
-import { yaml as Te } from "@codemirror/lang-yaml";
-import { StreamLanguage as Ee, bracketMatching as De, foldGutter as Oe, foldKeymap as ke, indentOnInput as Ae, indentUnit as je } from "@codemirror/language";
-import { shell as Me } from "@codemirror/legacy-modes/mode/shell";
-import { lintGutter as Ne, lintKeymap as Pe, linter as Fe } from "@codemirror/lint";
-import { highlightSelectionMatches as Ie, search as Le, searchKeymap as Re } from "@codemirror/search";
+import e from "./AcTooltip.js";
+import { copyText as t } from "../composables/copyText.js";
+import n from "./AcSegmentedControl.js";
+import { editorHighlight as r, editorPhrases as i, editorTheme as a } from "../editor/theme.js";
+import { Fragment as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, nextTick as te, normalizeClass as p, normalizeStyle as ne, onBeforeUnmount as re, onMounted as ie, openBlock as m, ref as h, renderList as ae, renderSlot as oe, resolveDynamicComponent as se, shallowRef as ce, toDisplayString as g, unref as _, useId as le, useModel as ue, useSlots as de, vShow as fe, watch as v, withCtx as pe, withDirectives as me } from "vue";
+import { Check as he, CircleAlert as ge, Copy as _e, TriangleAlert as ve } from "@lucide/vue";
+import { closeBrackets as ye, closeBracketsKeymap as be } from "@codemirror/autocomplete";
+import { defaultKeymap as xe, history as Se, historyKeymap as Ce, indentWithTab as we, simplifySelection as Te, temporarilySetTabFocusMode as Ee } from "@codemirror/commands";
+import { json as De } from "@codemirror/lang-json";
+import { yaml as Oe } from "@codemirror/lang-yaml";
+import { StreamLanguage as ke, bracketMatching as Ae, foldGutter as je, foldKeymap as Me, indentOnInput as Ne, indentUnit as Pe } from "@codemirror/language";
+import { shell as Fe } from "@codemirror/legacy-modes/mode/shell";
+import { lintGutter as Ie, lintKeymap as Le, linter as Re } from "@codemirror/lint";
+import { highlightSelectionMatches as ze, search as Be, searchKeymap as Ve } from "@codemirror/search";
 import { Compartment as y, EditorState as b, Text as x } from "@codemirror/state";
-import { EditorView as S, drawSelection as ze, dropCursor as Be, highlightActiveLine as Ve, highlightActiveLineGutter as He, keymap as Ue, lineNumbers as C, placeholder as w } from "@codemirror/view";
+import { EditorView as S, drawSelection as He, dropCursor as Ue, highlightActiveLine as We, highlightActiveLineGutter as Ge, keymap as Ke, lineNumbers as C, placeholder as w } from "@codemirror/view";
 //#region src/lib/components/AcCodeEditor.vue?vue&type=script&setup=true&lang.ts
-var We = {
+var qe = {
 	key: 0,
 	class: "flex min-h-11 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border-light px-3 py-2"
-}, Ge = {
+}, Je = {
 	key: 0,
 	class: "min-w-0 truncate font-mono text-xs font-medium text-heading"
-}, Ke = {
+}, Ye = {
 	key: 1,
 	class: "rounded-4 bg-surface-sunken px-1.5 text-sm leading-5 font-medium text-muted"
-}, qe = {
+}, Xe = {
 	key: 2,
 	class: "text-xs text-muted"
-}, Je = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, Ye = ["aria-label", "title"], Xe = ["id"], Ze = {
+}, Ze = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, Qe = ["aria-label"], $e = ["id"], et = {
 	class: "sr-only",
 	"aria-live": "polite"
-}, Qe = { class: "ac-scrollbar max-h-[calc(92px*var(--ac-scale))] py-1" }, $e = ["onClick"], et = { class: "shrink-0 font-mono text-muted" }, tt = { class: "min-w-0 [overflow-wrap:anywhere]" }, T = /*@__PURE__*/ u({
+}, tt = { class: "ac-scrollbar max-h-[calc(92px*var(--ac-scale))] py-1" }, nt = ["onClick"], rt = { class: "shrink-0 font-mono text-muted" }, it = { class: "min-w-0 [overflow-wrap:anywhere]" }, T = /*@__PURE__*/ d({
 	__name: "AcCodeEditor",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ f({
 		language: { default: "yaml" },
 		original: { default: void 0 },
 		readonly: {
@@ -70,13 +72,13 @@ var We = {
 		view: { default: "edit" },
 		viewModifiers: {}
 	}),
-	emits: /*@__PURE__*/ d([
+	emits: /*@__PURE__*/ f([
 		"validate",
 		"focus",
 		"blur"
 	], ["update:modelValue", "update:view"]),
-	setup(u, { expose: d, emit: T }) {
-		let E = u, D = ce(u, "modelValue"), O = ce(u, "view"), k = T, nt = le(), rt, A = () => rt ??= import("@codemirror/merge"), it, at = () => it ??= import("../editor/validate.js"), j = {
+	setup(d, { expose: f, emit: T }) {
+		let E = d, D = ue(d, "modelValue"), O = ue(d, "view"), k = T, at = de(), ot, A = () => ot ??= import("@codemirror/merge"), st, ct = () => st ??= import("../editor/validate.js"), j = {
 			yaml: "YAML",
 			json: "JSON",
 			shell: "Shell",
@@ -84,16 +86,16 @@ var We = {
 		}, M = {
 			margin: 3,
 			minSize: 6
-		}, ot = h(), N = h(), P = oe(), F, I = h([]), L = h(0), R = h(!1), st = se(), z = a(() => E.original !== void 0 && !E.readonly), B = a(() => E.original !== void 0 && E.readonly), V = a(() => B.value || z.value && O.value === "changes"), ct = a(() => !!E.title || E.copyable || z.value || B.value || !!nt.actions), lt = a(() => E.validate && (E.language === "yaml" || E.language === "json")), H = a(() => E.label || E.title || `${j[E.language]} editor`), ut = a(() => I.value.filter((e) => e.severity === "error").length), dt = a(() => [{
+		}, lt = h(), N = h(), P = ce(), F, I = h([]), L = h(0), R = h(!1), ut = le(), z = o(() => E.original !== void 0 && !E.readonly), B = o(() => E.original !== void 0 && E.readonly), V = o(() => B.value || z.value && O.value === "changes"), dt = o(() => !!E.title || E.copyable || z.value || B.value || !!at.actions), ft = o(() => E.validate && (E.language === "yaml" || E.language === "json")), H = o(() => E.label || E.title || `${j[E.language]} editor`), pt = o(() => I.value.filter((e) => e.severity === "error").length), mt = o(() => [{
 			value: "edit",
 			label: "Edit"
 		}, {
 			value: "changes",
 			label: L.value ? `Changes · ${L.value}` : "Changes"
-		}]), ft = a(() => ({
+		}]), U = o(() => ({
 			height: E.height === "auto" ? void 0 : E.height,
 			maxHeight: E.maxHeight
-		})), U = {
+		})), W = {
 			language: new y(),
 			readonly: new y(),
 			wrap: new y(),
@@ -102,82 +104,82 @@ var We = {
 			placeholder: new y(),
 			attributes: new y()
 		};
-		function W() {
-			return E.language === "yaml" ? Te() : E.language === "json" ? we() : E.language === "shell" ? Ee.define(Me) : [];
-		}
 		function G() {
+			return E.language === "yaml" ? Oe() : E.language === "json" ? De() : E.language === "shell" ? ke.define(Fe) : [];
+		}
+		function ht() {
 			return E.lineNumbers ? [
 				C(),
-				Oe({
+				je({
 					openText: "▾",
 					closedText: "▸"
 				}),
-				He()
+				Ge()
 			] : [];
 		}
-		function pt(e) {
+		function gt(e) {
 			JSON.stringify(e) !== JSON.stringify(I.value) && (I.value = e, k("validate", e));
 		}
-		function mt() {
-			return lt.value ? [Ne(), Fe(async (e) => {
-				let t = e.state.doc.toString(), { checkDocument: n, toProblems: r } = await at(), i = await n(t, E.language, E.schema);
-				return P.value?.state.doc.toString() === t && pt(r(i, e.state.doc)), i;
-			}, { delay: 300 })] : (pt([]), []);
+		function _t() {
+			return ft.value ? [Ie(), Re(async (e) => {
+				let t = e.state.doc.toString(), { checkDocument: n, toProblems: r } = await ct(), i = await n(t, E.language, E.schema);
+				return P.value?.state.doc.toString() === t && gt(r(i, e.state.doc)), i;
+			}, { delay: 300 })] : (gt([]), []);
 		}
-		function ht() {
+		function vt() {
 			return S.contentAttributes.of({
 				"aria-label": H.value,
 				...E.readonly ? { "aria-readonly": "true" } : {},
-				...ut.value ? {
+				...pt.value ? {
 					"aria-invalid": "true",
-					"aria-describedby": st
+					"aria-describedby": ut
 				} : {}
 			});
 		}
-		let K = 0, gt = {
+		let K = 0, yt = {
 			key: "Escape",
 			run: (e) => {
 				let t = Date.now();
-				return t - K < 2e3 ? !1 : (K = t, Se(e), Ce(e));
+				return t - K < 2e3 ? !1 : (K = t, Te(e), Ee(e));
 			}
 		};
-		function _t() {
+		function bt() {
 			P.value = new S({
-				parent: ot.value,
+				parent: lt.value,
 				state: b.create({
 					doc: D.value,
 					extensions: [
+						a,
 						r,
-						t,
-						n,
+						i,
+						Se(),
+						He(),
+						Ue(),
+						Ne(),
+						Pe.of("  "),
+						b.tabSize.of(2),
+						Ae(),
 						ye(),
+						We(),
 						ze(),
-						Be(),
-						Ae(),
-						je.of("  "),
-						b.tabSize.of(2),
-						De(),
-						ge(),
-						Ve(),
-						Ie(),
-						Le({ top: !0 }),
-						Ue.of([
-							..._e,
-							...Re,
-							...ke,
-							...Pe,
-							gt,
-							xe,
+						Be({ top: !0 }),
+						Ke.of([
 							...be,
-							...ve
+							...Ve,
+							...Me,
+							...Le,
+							yt,
+							we,
+							...Ce,
+							...xe
 						]),
-						U.language.of(W()),
-						U.readonly.of(b.readOnly.of(E.readonly)),
-						U.wrap.of(E.wrap ? S.lineWrapping : []),
-						U.gutters.of(G()),
-						U.lint.of(mt()),
-						U.placeholder.of(E.placeholder ? w(E.placeholder) : []),
-						U.attributes.of(ht()),
+						W.language.of(G()),
+						W.readonly.of(b.readOnly.of(E.readonly)),
+						W.wrap.of(E.wrap ? S.lineWrapping : []),
+						W.gutters.of(ht()),
+						W.lint.of(_t()),
+						W.placeholder.of(E.placeholder ? w(E.placeholder) : []),
+						W.attributes.of(vt()),
 						S.updateListener.of((e) => {
 							e.docChanged && (D.value = e.state.doc.toString()), e.focusChanged && e.view.hasFocus ? k("focus") : e.focusChanged && k("blur");
 						})
@@ -190,9 +192,9 @@ var We = {
 		}
 		function J(e) {
 			return [
+				a,
 				r,
-				t,
-				W(),
+				G(),
 				b.readOnly.of(!0),
 				b.tabSize.of(2),
 				E.wrap ? S.lineWrapping : [],
@@ -242,7 +244,7 @@ var We = {
 			});
 		}
 		let Q;
-		function vt() {
+		function xt() {
 			if (clearTimeout(Q), E.original === void 0) {
 				L.value = 0;
 				return;
@@ -252,10 +254,10 @@ var We = {
 				E.original !== void 0 && (L.value = e.build(x.of(E.original.split("\n")), x.of(D.value.split("\n"))).length);
 			}, 250);
 		}
-		function yt() {
+		function St() {
 			P.value?.focus();
 		}
-		function bt(e) {
+		function Ct(e) {
 			let t = P.value;
 			t && (t.dispatch({
 				selection: {
@@ -266,9 +268,9 @@ var We = {
 			}), t.focus());
 		}
 		let $;
-		async function xt() {
+		async function wt() {
 			try {
-				await navigator.clipboard.writeText(D.value), R.value = !0, clearTimeout($), $ = setTimeout(() => R.value = !1, 1500);
+				await t(D.value), R.value = !0, clearTimeout($), $ = setTimeout(() => R.value = !1, 1500);
 			} catch {}
 		}
 		return v(D, (e) => {
@@ -278,15 +280,15 @@ var We = {
 				to: t.state.doc.length,
 				insert: e
 			} });
-		}), v(() => E.language, () => q(U.language, W())), v(() => E.readonly, (e) => q(U.readonly, b.readOnly.of(e))), v(() => E.wrap, (e) => q(U.wrap, e ? S.lineWrapping : [])), v(() => E.lineNumbers, () => q(U.gutters, G())), v(() => E.placeholder, (e) => q(U.placeholder, e ? w(e) : [])), v([
+		}), v(() => E.language, () => q(W.language, G())), v(() => E.readonly, (e) => q(W.readonly, b.readOnly.of(e))), v(() => E.wrap, (e) => q(W.wrap, e ? S.lineWrapping : [])), v(() => E.lineNumbers, () => q(W.gutters, ht())), v(() => E.placeholder, (e) => q(W.placeholder, e ? w(e) : [])), v([
 			() => E.language,
 			() => E.schema,
 			() => E.validate
-		], () => q(U.lint, mt())), v([
+		], () => q(W.lint, _t())), v([
 			H,
 			() => E.readonly,
-			ut
-		], () => q(U.attributes, ht())), v([() => E.original, D], vt, { immediate: !0 }), v([
+			pt
+		], () => q(W.attributes, vt())), v([() => E.original, D], xt, { immediate: !0 }), v([
 			V,
 			() => E.diffLayout,
 			() => E.original,
@@ -294,80 +296,84 @@ var We = {
 			() => E.wrap
 		], async ([e]) => {
 			if (!e) return Y();
-			await ee(), Z();
-		}), v(D, () => V.value && Z()), ne(() => {
-			_t(), V.value && Z();
-		}), te(() => {
+			await te(), Z();
+		}), v(D, () => V.value && Z()), ie(() => {
+			bt(), V.value && Z();
+		}), re(() => {
 			clearTimeout(Q), clearTimeout($), Y(), P.value?.destroy();
-		}), d({
-			focus: yt,
+		}), f({
+			focus: St,
 			editor: P
-		}), (t, n) => (m(), c("div", {
-			class: f(["flex min-w-0 flex-col overflow-hidden bg-surface", u.bordered && "rounded-10 border border-border shadow-xs transition-[border-color,box-shadow] has-[.cm-editor.cm-focused]:focus-ring"]),
+		}), (t, r) => (m(), l("div", {
+			class: p(["flex min-w-0 flex-col overflow-hidden bg-surface", d.bordered && "rounded-10 border border-border shadow-xs transition-[border-color,box-shadow] has-[.cm-editor.cm-focused]:focus-ring"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-code-editor"
 		}, [
-			ct.value ? (m(), c("div", We, [
-				u.title ? (m(), c("span", Ge, g(u.title), 1)) : s("", !0),
-				u.language === "text" ? s("", !0) : (m(), c("span", Ke, g(j[u.language]), 1)),
-				B.value ? (m(), c("span", qe, g(L.value ? `${L.value} ${L.value === 1 ? "change" : "changes"}` : "No changes"), 1)) : s("", !0),
-				l("div", Je, [
-					ie(t.$slots, "actions"),
-					z.value ? (m(), o(e, {
+			dt.value ? (m(), l("div", qe, [
+				d.title ? (m(), l("span", Je, g(d.title), 1)) : c("", !0),
+				d.language === "text" ? c("", !0) : (m(), l("span", Ye, g(j[d.language]), 1)),
+				B.value ? (m(), l("span", Xe, g(L.value ? `${L.value} ${L.value === 1 ? "change" : "changes"}` : "No changes"), 1)) : c("", !0),
+				u("div", Ze, [
+					oe(t.$slots, "actions"),
+					z.value ? (m(), s(n, {
 						key: 0,
 						modelValue: O.value,
-						"onUpdate:modelValue": n[0] ||= (e) => O.value = e,
-						options: dt.value,
+						"onUpdate:modelValue": r[0] ||= (e) => O.value = e,
+						options: mt.value,
 						size: "small",
 						label: "Editor view"
-					}, null, 8, ["modelValue", "options"])) : s("", !0),
-					u.copyable ? (m(), c("button", {
-						key: 1,
-						type: "button",
-						class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-						"aria-label": R.value ? "Copied" : "Copy to clipboard",
-						title: R.value ? "Copied" : "Copy",
-						onClick: xt
-					}, [R.value ? (m(), o(_(fe), {
-						key: 0,
-						class: "size-3.5 text-success",
-						"aria-hidden": "true"
-					})) : (m(), o(_(me), {
+					}, null, 8, ["modelValue", "options"])) : c("", !0),
+					d.copyable ? (m(), s(e, {
 						key: 1,
-						class: "size-3.5",
-						"aria-hidden": "true"
-					}))], 8, Ye)) : s("", !0)
+						content: R.value ? "Copied" : "Copy"
+					}, {
+						default: pe(() => [u("button", {
+							type: "button",
+							class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+							"aria-label": R.value ? "Copied" : "Copy to clipboard",
+							onClick: wt
+						}, [R.value ? (m(), s(_(he), {
+							key: 0,
+							class: "size-3.5 text-success",
+							"aria-hidden": "true"
+						})) : (m(), s(_(_e), {
+							key: 1,
+							class: "size-3.5",
+							"aria-hidden": "true"
+						}))], 8, Qe)]),
+						_: 1
+					}, 8, ["content"])) : c("", !0)
 				])
-			])) : s("", !0),
-			de(l("div", {
+			])) : c("", !0),
+			me(u("div", {
 				ref_key: "host",
-				ref: ot,
-				class: f(["min-h-0 flex-auto [&>.cm-editor]:max-h-[inherit]", u.height === "auto" && "min-h-20"]),
-				style: p(ft.value)
-			}, null, 6), [[ue, !V.value]]),
-			V.value ? (m(), c("div", {
+				ref: lt,
+				class: p(["min-h-0 flex-auto [&>.cm-editor]:max-h-[inherit]", d.height === "auto" && "min-h-20"]),
+				style: ne(U.value)
+			}, null, 6), [[fe, !V.value]]),
+			V.value ? (m(), l("div", {
 				key: 1,
 				ref_key: "diffHost",
 				ref: N,
 				class: "min-h-0 flex-auto overflow-auto [&_.cm-mergeView]:h-full [&>.cm-editor]:max-h-[inherit]",
-				style: p(ft.value)
-			}, null, 4)) : s("", !0),
-			I.value.length && !V.value ? (m(), c("div", {
+				style: ne(U.value)
+			}, null, 4)) : c("", !0),
+			I.value.length && !V.value ? (m(), l("div", {
 				key: 2,
-				id: _(st),
+				id: _(ut),
 				class: "border-t border-border-light bg-surface-muted"
-			}, [l("p", Ze, g(I.value.length) + " " + g(I.value.length === 1 ? "problem" : "problems"), 1), l("ul", Qe, [(m(!0), c(i, null, re(I.value, (e, t) => (m(), c("li", { key: t }, [l("button", {
+			}, [u("p", et, g(I.value.length) + " " + g(I.value.length === 1 ? "problem" : "problems"), 1), u("ul", tt, [(m(!0), l(ee, null, ae(I.value, (e, t) => (m(), l("li", { key: t }, [u("button", {
 				type: "button",
 				class: "flex w-full cursor-pointer items-start gap-2 px-3 py-1 text-left text-xs leading-5 text-body hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:outline-none",
-				onClick: (t) => bt(e)
+				onClick: (t) => Ct(e)
 			}, [
-				(m(), o(ae(e.severity === "error" ? _(pe) : _(he)), {
-					class: f(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-red-50" : "text-yellow-50"]),
+				(m(), s(se(e.severity === "error" ? _(ge) : _(ve)), {
+					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-red-50" : "text-yellow-50"]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])),
-				l("span", et, "Ln " + g(e.line) + ", Col " + g(e.column), 1),
-				l("span", tt, g(e.message), 1)
-			], 8, $e)]))), 128))])], 8, Xe)) : s("", !0)
+				u("span", rt, "Ln " + g(e.line) + ", Col " + g(e.column), 1),
+				u("span", it, g(e.message), 1)
+			], 8, nt)]))), 128))])], 8, $e)) : c("", !0)
 		], 2));
 	}
 });

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

@@ -11,7 +11,7 @@ var o = /*@__PURE__*/ n({
 			class: r(n.surface && "rounded-10 border border-border bg-surface shadow-xs"),
 			"data-ac-ds": "",
 			"data-testid": "ac-content-layout"
-		}, [a(o.$slots, "header"), t("div", null, [a(o.$slots, "default")])], 2));
+		}, [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));
 	}
 });
 //#endregion

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

@@ -1,27 +1,25 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g } from "vue";
-import { Check as _, Copy as v, Eye as y, EyeOff as b } from "@lucide/vue";
+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, defineComponent as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+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 x = {
+var w = {
 	key: 0,
 	class: "text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
-}, S = {
+}, T = {
 	key: 1,
 	class: "ml-auto flex shrink-0 items-center gap-2"
-}, C = ["aria-busy"], w = { class: "flex h-5 items-center" }, T = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-base text-heading" }, E = {
+}, E = ["aria-busy"], D = { class: "flex h-5 items-center" }, O = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-base text-heading" }, k = {
 	key: 0,
 	class: "text-muted"
-}, D = {
+}, A = {
 	key: 1,
 	class: "flex min-w-0 items-start gap-1.5"
-}, O = [
+}, j = [
 	"aria-label",
 	"aria-pressed",
 	"onClick"
-], k = [
-	"aria-label",
-	"title",
-	"onClick"
-], A = /*@__PURE__*/ s({
+], M = ["aria-label", "onClick"], N = /*@__PURE__*/ l({
 	__name: "AcInfoTable",
 	props: {
 		items: { default: () => [] },
@@ -38,88 +36,92 @@ var x = {
 		},
 		emptyText: { default: "No details available" }
 	},
-	setup(s) {
-		let A = s, j = [
+	setup(l) {
+		let N = l, P = [
 			"w-40",
 			"w-28",
 			"w-52",
 			"w-32",
 			"w-44",
 			"w-24"
-		], M = d(null), N = d(/* @__PURE__ */ new Set()), P, F = t(() => A.items.map((e) => ({
+		], F = p(null), I = p(/* @__PURE__ */ new Set()), L, R = r(() => N.items.map((e) => ({
 			item: e,
 			key: e.key ?? e.label
-		}))), I = t(() => [
+		}))), z = r(() => [
 			"min-w-0 border-t border-border-light py-2.5 first:border-t-0",
-			A.columns === 2 && "md:[&:nth-child(2)]:border-t-0",
-			A.layout === "horizontal" ? "flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
-		]), L = t(() => ["flex items-center gap-1.5 text-base text-muted", A.layout === "horizontal" && (A.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")]);
-		function R(e) {
+			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")]);
+		function V(e) {
 			return e == null || e === "";
 		}
-		function z(e) {
-			let t = new Set(N.value);
-			t.delete(e) || t.add(e), N.value = t;
+		function H(e) {
+			let t = new Set(I.value);
+			t.delete(e) || t.add(e), I.value = t;
 		}
-		async function B(e, t) {
+		async function U(e, n) {
 			try {
-				await navigator.clipboard.writeText(String(t ?? "")), M.value = e, clearTimeout(P), P = setTimeout(() => M.value = null, 1500);
+				await t(String(n ?? "")), F.value = e, clearTimeout(L), L = setTimeout(() => F.value = null, 1500);
 			} catch {}
 		}
-		return l(() => clearTimeout(P)), (t, l) => (u(), i("div", {
-			class: c(s.bordered && "rounded-10 border border-border bg-surface shadow-xs"),
+		return d(() => clearTimeout(L)), (t, r) => (f(), o("div", {
+			class: u(l.bordered && "rounded-10 border border-border bg-surface shadow-xs"),
 			"data-ac-ds": "",
 			"data-testid": "ac-info-table"
-		}, [s.title || t.$slots.actions ? (u(), i("div", {
+		}, [l.title || t.$slots.actions ? (f(), o("div", {
 			key: 0,
-			class: c(["flex items-center justify-between gap-4", s.bordered ? "border-b border-border-light px-5 py-3.5" : "mb-2"])
-		}, [s.title ? (u(), i("h3", x, h(s.title), 1)) : r("", !0), t.$slots.actions ? (u(), i("div", S, [p(t.$slots, "actions")])) : r("", !0)], 2)) : r("", !0), !s.loading && !s.items.length ? (u(), i("p", {
+			class: u(["flex items-center justify-between gap-4", l.bordered ? "border-b border-border-light px-5 py-3.5" : "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: c(["py-6 text-center text-base text-muted", s.bordered && "px-5"])
-		}, h(s.emptyText), 3)) : (u(), i("dl", {
+			class: u(["py-6 text-center text-base text-muted", l.bordered && "px-5"])
+		}, _(l.emptyText), 3)) : (f(), o("dl", {
 			key: 2,
-			class: c(["grid", [s.columns === 2 && "md:grid-cols-2 md:gap-x-10", s.bordered ? "px-5 py-2" : ""]]),
-			"aria-busy": s.loading || void 0
-		}, [s.loading && !s.items.length ? (u(), i(e, { key: 0 }, f(j, (e, t) => a("div", {
+			class: u(["grid", [l.columns === 2 && "md:grid-cols-2 md:gap-x-10", l.bordered ? "px-5 py-2" : ""]]),
+			"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: c(I.value)
-		}, [a("dt", { class: c(L.value) }, [...l[0] ||= [a("span", { class: "h-3 w-20 animate-pulse rounded-4 bg-surface-sunken" }, null, -1)]], 2), a("dd", w, [a("span", { class: c(["h-3 animate-pulse rounded-4 bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : r("", !0), (u(!0), i(e, null, f(F.value, ({ item: e, key: l }, d) => (u(), i("div", {
-			key: l,
-			class: c(I.value)
-		}, [a("dt", { class: c(L.value) }, [p(t.$slots, `label-${l}`, { item: e }, () => [o(h(e.label), 1)])], 2), a("dd", T, [s.loading ? (u(), i("span", {
+			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", {
+			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: c(["h-3 animate-pulse rounded-4 bg-surface-sunken", j[d % j.length]])
-		}, null, 2)) : p(t.$slots, `value-${l}`, { item: e }, () => [R(e.value) ? (u(), i("span", E, "—")) : (u(), i("span", D, [
-			a("span", { class: c(["min-w-0 [overflow-wrap:anywhere]", (e.mono || e.secret) && "font-mono text-xs leading-5"]) }, h(e.secret && !N.value.has(l) ? "••••••••••••" : e.value), 3),
-			e.secret ? (u(), i("button", {
+			class: u(["h-3 animate-pulse rounded-4 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",
-				"aria-label": N.value.has(l) ? `Hide ${e.label}` : `Show ${e.label}`,
-				"aria-pressed": N.value.has(l),
-				onClick: (e) => z(l)
-			}, [(u(), n(m(N.value.has(l) ? g(b) : g(y)), {
+				"aria-label": I.value.has(r) ? `Hide ${n.label}` : `Show ${n.label}`,
+				"aria-pressed": I.value.has(r),
+				onClick: (e) => H(r)
+			}, [(f(), i(g(I.value.has(r) ? v(C) : v(S)), {
 				class: "size-3.5",
 				"aria-hidden": "true"
-			}))], 8, O)) : r("", !0),
-			e.copyable ? (u(), i("button", {
+			}))], 8, j)) : a("", !0),
+			n.copyable ? (f(), i(e, {
 				key: 1,
-				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",
-				"aria-label": M.value === l ? `${e.label} copied` : `Copy ${e.label}`,
-				title: M.value === l ? "Copied" : "Copy",
-				onClick: (t) => B(l, e.value)
-			}, [M.value === l ? (u(), n(g(_), {
-				key: 0,
-				class: "size-3.5 text-success",
-				"aria-hidden": "true"
-			})) : (u(), n(g(v), {
-				key: 1,
-				class: "size-3.5",
-				"aria-hidden": "true"
-			}))], 8, k)) : r("", !0)
-		]))], void 0, 1)])], 2))), 128))], 10, C))], 2));
+				content: F.value === r ? "Copied" : "Copy"
+			}, {
+				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",
+					"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",
+					"aria-hidden": "true"
+				})) : (f(), i(v(x), {
+					key: 1,
+					class: "size-3.5",
+					"aria-hidden": "true"
+				}))], 8, M)]),
+				_: 2
+			}, 1032, ["content"])) : a("", !0)
+		]))], void 0, 1)])], 2))), 128))], 10, E))], 2));
 	}
 });
 //#endregion
-export { A as default };
+export { N as default };

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

@@ -51,8 +51,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     name: string;
     size: "small" | "normal";
-    hint: string;
     readonly: boolean;
+    hint: string;
     errorMsg: string;
     addonLabel: string;
     addonIcon: Component;

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

@@ -3,7 +3,7 @@ export interface Props<T> {
     /** The choices: `{ value, label, description?, disabled?, group? }`. */
     options: SelectOption<T>[];
     /** How to tell whether two values are the same, for option values that are objects. A property name (`"id"`) or a function `(a, b) => boolean`. Without it values are compared with `===`, which is right for strings and numbers. */
-    by?: (T extends object ? keyof T & string : never) | ((a: T, b: T) => boolean);
+    by?: string | ((a: T, b: T) => boolean);
     /** Floating label. It rests inside the field and rises when a value is chosen or the list opens. */
     label?: string;
     /** Text shown in the field when there's no label and nothing is selected. */

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

@@ -58,7 +58,7 @@ var ye = { class: "relative" }, be = [
 	props: /*@__PURE__*/ f({
 		options: {},
 		by: {
-			type: Function,
+			type: [String, Function],
 			default: void 0
 		},
 		label: { default: "" },

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

@@ -41,8 +41,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     name: string;
     rows: number;
-    hint: string;
     readonly: boolean;
+    hint: string;
     errorMsg: string;
     mono: boolean;
     maxlength: number;

package/dist/lib/composables/copyText.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copies text to the clipboard. Uses the async Clipboard API, which browsers only expose on
+ * HTTPS and localhost, and falls back to a hidden textarea + `execCommand("copy")` so copying
+ * still works on plain-HTTP hosts such as `http://bb.test`. Throws when both are blocked.
+ */
+export declare function copyText(text: string): Promise<void>;

package/dist/lib/composables/copyText.js

@@ -0,0 +1,16 @@
+//#region src/lib/composables/copyText.ts
+async function e(e) {
+	if (navigator.clipboard?.writeText) {
+		await navigator.clipboard.writeText(e);
+		return;
+	}
+	let t = document.createElement("textarea");
+	t.value = e, t.setAttribute("readonly", ""), t.style.cssText = "position:fixed;top:0;left:0;opacity:0", document.body.appendChild(t), t.select();
+	try {
+		if (!document.execCommand("copy")) throw Error("copy command was rejected");
+	} finally {
+		t.remove();
+	}
+}
+//#endregion
+export { e as copyText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",