@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,7 +1,7 @@
 import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, useId as d, useModel as f, vShow as p, withDirectives as m } from "vue";
 import { ArrowLeft as h, ChevronDown as g } from "@lucide/vue";
 //#region src/lib/components/AcSectionContent.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "flex min-w-0 items-center gap-2.5" }, v = { class: "min-w-0" }, y = { class: "flex items-center gap-2" }, b = {
+var _ = { class: "flex min-w-0 items-center gap-3" }, v = { class: "min-w-0" }, y = { class: "flex items-center gap-2" }, b = {
 	key: 0,
 	class: "mt-0.5 truncate text-xs text-muted"
 }, x = { class: "flex shrink-0 items-center gap-2" }, S = [
@@ -41,32 +41,32 @@ var _ = { class: "flex min-w-0 items-center gap-2.5" }, v = { class: "min-w-0" }
 	setup(i, { emit: a }) {
 		let w = a, T = f(i, "open"), E = d();
 		return (a, d) => (s(), t("section", {
-			class: o(!i.plain && ["rounded-10 border bg-surface shadow-xs", i.tone === "danger" ? "border-red-80" : "border-border"]),
+			class: o(!i.plain && ["rounded-14 border bg-surface text-body", i.tone === "danger" ? "border-danger/25" : "border-border"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-section-content"
-		}, [n("header", { class: o(["flex items-center justify-between gap-4", [i.plain ? "mb-3" : "px-5 py-3.5", !i.plain && T.value && (i.tone === "danger" ? "border-b border-red-90" : "border-b border-border-light")]]) }, [n("div", _, [i.backButton ? (s(), t("button", {
+		}, [n("header", { class: o(["flex items-center justify-between gap-4", [i.plain ? "mb-4" : ["px-6", T.value ? "pt-5 pb-3" : "py-4"], !i.plain && T.value && (i.tone === "danger" ? "border-b border-danger/25" : "border-b border-border")]]) }, [n("div", _, [i.backButton ? (s(), t("button", {
 			key: 0,
 			type: "button",
-			class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "-ml-1.5 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
 			"aria-label": "Back",
 			onClick: d[0] ||= (e) => w("back")
 		}, [r(u(h), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})])) : e("", !0), n("div", v, [c(a.$slots, "header", {}, () => [n("div", y, [n("h5", { class: o(["truncate", i.tone === "danger" && "text-red-30"]) }, l(i.title), 3), c(a.$slots, "title-extra")]), i.subtitle ? (s(), t("p", b, l(i.subtitle), 1)) : e("", !0)])])]), n("div", x, [c(a.$slots, "actions"), i.collapsible ? (s(), t("button", {
+		})])) : e("", !0), n("div", v, [c(a.$slots, "header", {}, () => [n("div", y, [n("h5", { class: o(["truncate font-heading text-lg leading-tight font-semibold tracking-tight", i.tone === "danger" ? "text-danger-strong" : "text-heading"]) }, l(i.title), 3), c(a.$slots, "title-extra")]), i.subtitle ? (s(), t("p", b, l(i.subtitle), 1)) : e("", !0)])])]), n("div", x, [c(a.$slots, "actions"), i.collapsible ? (s(), t("button", {
 			key: 0,
 			type: "button",
-			class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-10 border border-border bg-surface text-heading transition-colors 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",
 			"aria-expanded": T.value,
 			"aria-controls": u(E),
 			"aria-label": T.value ? "Collapse section" : "Expand section",
 			onClick: d[1] ||= (e) => T.value = !T.value
 		}, [r(u(g), {
-			class: o(["size-4 transition-transform duration-200", !T.value && "-rotate-90"]),
+			class: o(["size-4 transition-transform duration-200 motion-reduce:transition-none", !T.value && "-rotate-90"]),
 			"aria-hidden": "true"
 		}, null, 8, ["class"])], 8, S)) : e("", !0)])], 2), m(n("div", {
 			id: u(E),
-			class: o(i.plain ? void 0 : i.padded ? "p-5" : "overflow-hidden rounded-b-10")
+			class: o(i.plain ? void 0 : i.padded ? "p-6" : "overflow-hidden rounded-b-14")
 		}, [c(a.$slots, "default")], 10, C), [[p, T.value]])], 2));
 	}
 });

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

@@ -11,7 +11,7 @@ export interface Props<T extends string | number> {
     options: (SegmentedOption<T> | T)[];
     /** Accessible name for the group, e.g. "Chart range". Required when nothing nearby labels it. */
     label?: string;
-    /** Height: `small` 28px (toolbars, cards) or `normal` 32px. */
+    /** Height: `small` 36px (toolbars, cards) or `normal` 40px, matching fields of the same size. */
     size?: "small" | "normal";
     /** Shows only the icons; each option's `label` becomes its accessible name and hover title. */
     iconOnly?: boolean;

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

@@ -69,7 +69,7 @@ var m = ["aria-label", "aria-disabled"], h = [
 			role: "radiogroup",
 			"aria-label": a.label || void 0,
 			"aria-disabled": a.disabled || void 0,
-			class: s(["items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5", [a.block ? "flex w-full" : "inline-flex max-w-full", a.disabled && "opacity-50"]]),
+			class: s(["items-center gap-1 rounded-10 bg-surface-sunken p-1", [a.block ? "flex w-full" : "inline-flex max-w-full", a.disabled && "opacity-50"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-segmented-control"
 		}, [(c(!0), i(e, null, u(x.value, (e, t) => (c(), i("button", {
@@ -84,12 +84,12 @@ var m = ["aria-label", "aria-disabled"], h = [
 			title: a.iconOnly ? e.label : void 0,
 			tabindex: t === S.value ? 0 : -1,
 			disabled: a.disabled || e.disabled,
-			class: s(["inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-6 font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed", [
-				a.size === "small" ? "h-6 text-xs [&_svg]:size-3.5" : "h-7 text-base [&_svg]:size-4",
+			class: s(["inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none disabled:cursor-not-allowed [&_svg]:size-4", [
+				a.size === "small" ? "h-7" : "h-8",
 				a.iconOnly ? a.size === "small" ? "w-7" : "w-8" : a.size === "small" ? "px-2.5" : "px-3",
 				a.block && "flex-1",
 				e.disabled && !a.disabled && "opacity-50",
-				e.value === v.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted enabled:hover:text-heading"
+				e.value === v.value ? "bg-surface text-heading shadow-sm" : "text-muted enabled:hover:text-heading"
 			]]),
 			onClick: (t) => C(e),
 			onKeydown: (e) => E(e, t)

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

@@ -4,9 +4,9 @@ export interface Props<T> {
     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?: 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 above the field. Also the accessible name of the select. */
     label?: string;
-    /** Text shown in the field when there's no label and nothing is selected. */
+    /** Text shown in the field while nothing is selected, e.g. "Select a version". */
     placeholder?: string;
     /** Allow several values; `v-model` becomes an array. */
     multiple?: boolean;
@@ -28,9 +28,9 @@ export interface Props<T> {
     required?: boolean;
     /** Error text under the field. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while `errorMsg` is set). */
+    /** Help text between the label and the field. */
     hint?: string;
-    /** `compact` 32px (toolbars and filters, no label), `small` 36px (forms) or `normal` 40px. */
+    /** `compact` 32px (toolbars and filters), `small` 36px or `normal` 42px tall. */
     size?: "compact" | "small" | "normal";
     /** Text shown when no option matches the search. */
     noResultText?: string;
@@ -42,8 +42,8 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         onSearch?: ((query: string) => any) | undefined;
         onSelect?: ((option: SelectOption<V>) => any) | undefined;
         "onUpdate:modelValue"?: ((value: V | V[] | null) => any) | undefined;
-        onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onCreate?: ((text: string) => any) | undefined;
+        onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onRefresh?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -65,7 +65,7 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             query: string;
         }) => unknown;
     };
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };