@ac-design/design-system 2.8.0 → 2.9.0

package/dist/lib/compat.css

@@ -361,6 +361,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .relative:where([data-ac-ds], [data-ac-ds] *) {
     position: relative !important;
   }
+  .static:where([data-ac-ds], [data-ac-ds] *) {
+    position: static !important;
+  }
   .sticky:where([data-ac-ds], [data-ac-ds] *) {
     position: sticky !important;
   }
@@ -3685,6 +3688,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .ac-focus-inset:focus-visible:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+    --tw-ring-color: var(--color-ring) !important;
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+    --tw-ring-inset: inset !important;
+  }
   .ring:where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -3920,6 +3931,16 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
   }
+  .ac-transition-colors:where([data-ac-ds], [data-ac-ds] *) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+    --tw-duration: 200ms !important;
+    transition-duration: 200ms !important;
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none !important;
+    }
+  }
   .transition:where([data-ac-ds], [data-ac-ds] *) {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;

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

@@ -9,6 +9,12 @@ export interface Props {
     disabled?: boolean;
     /** Heading level of the title. Defaults to the parent AcAccordion's, or 3. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Turn off for a section that always shows its content: the header is plain text, with no chevron, and `open` is ignored. */
+    collapsible?: boolean;
+    /** Frame of an item on its own (inside an AcAccordion the parent's applies): `separated` its own card, `bordered` no frame with card padding, for a container that draws the border, `flush` no frame or side padding. */
+    variant?: "bordered" | "separated" | "flush";
+    /** Attributes for the header button (the header row when not `collapsible`), e.g. `{ 'data-testid': 'section-heading' }` for tests. */
+    headerAttrs?: Record<string, unknown>;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -35,11 +41,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onToggle?: ((open: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "bordered" | "separated" | "flush";
     headingLevel: 2 | 3 | 4 | 5 | 6;
     title: string;
     value: string;
     description: string;
     disabled: boolean;
+    collapsible: boolean;
+    headerAttrs: Record<string, unknown>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,7 @@
-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, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useId as h, useModel as g, watch as _, withCtx as v } from "vue";
-import { ChevronDown as y, ChevronRight as b } from "@lucide/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, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { ChevronDown as b, ChevronRight as x } from "@lucide/vue";
 //#region src/lib/components/AcAccordionItem.vue?vue&type=script&setup=true&lang.ts
-var x = [
-	"id",
-	"aria-expanded",
-	"aria-controls",
-	"disabled"
-], S = {
+var S = {
 	key: 1,
 	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"
@@ -17,7 +12,7 @@ var x = [
 	"id",
 	"aria-labelledby",
 	"inert"
-], D = /*@__PURE__*/ o({
+], D = "cursor-pointer ac-transition-colors ac-focus-inset disabled:cursor-not-allowed disabled:opacity-50", O = /*@__PURE__*/ o({
 	__name: "AcAccordionItem",
 	props: /*@__PURE__*/ c({
 		value: { default: void 0 },
@@ -27,7 +22,13 @@ var x = [
 			type: Boolean,
 			default: !1
 		},
-		headingLevel: { default: void 0 }
+		headingLevel: { default: void 0 },
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		variant: { default: void 0 },
+		headerAttrs: { default: void 0 }
 	}, {
 		open: {
 			type: Boolean,
@@ -37,54 +38,65 @@ var x = [
 	}),
 	emits: /*@__PURE__*/ c(["toggle"], ["update:open"]),
 	setup(o, { emit: c }) {
-		let D = o, O = g(o, "open"), k = c, A = s("ac-accordion", null), j = h(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
-		function I() {
-			if (D.disabled) return;
-			let e = !N.value;
-			A ? A.toggle(M.value) : O.value = e, k("toggle", e);
+		let O = o, k = _(o, "open"), A = c, j = s("ac-accordion", null), M = g(), N = e(() => O.value ?? M), P = e(() => !O.collapsible || (j ? j.isOpen(N.value) : k.value)), F = e(() => O.headingLevel ?? j?.headingLevel.value ?? 3), I = e(() => j?.variant.value ?? O.variant ?? "separated");
+		function L() {
+			if (O.disabled || !O.collapsible) return;
+			let e = !P.value;
+			j ? j.toggle(N.value) : k.value = e, A("toggle", e);
 		}
-		return _(N, (e) => {
-			A && (O.value = e);
-		}), (e, s) => (u(), r("div", {
-			class: l([F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
+		let R = e(() => O.collapsible ? {
+			type: "button",
+			"data-accordion-trigger": "",
+			"aria-expanded": P.value,
+			"aria-controls": `${M}-panel`,
+			disabled: O.disabled
+		} : {});
+		return v(P, (e) => {
+			j && (k.value = e);
+		}), (e, s) => (d(), r("div", {
+			class: u([I.value === "separated" && "overflow-clip rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion-item"
-		}, [i("div", { class: l(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(u(), t(f(`h${P.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
-			default: v(() => [i("button", {
-				id: `${m(j)}-trigger`,
-				type: "button",
-				"data-accordion-trigger": "",
-				"aria-expanded": N.value,
-				"aria-controls": `${m(j)}-panel`,
-				disabled: o.disabled,
-				class: l(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"]]),
-				onClick: I
-			}, [
-				e.$slots.actions ? (u(), t(m(b), {
-					key: 0,
-					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-90 text-heading"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"])) : n("", !0),
-				e.$slots.icon ? (u(), r("span", S, [d(e.$slots, "icon")])) : n("", !0),
-				i("span", C, [i("span", w, [d(e.$slots, "title", {}, () => [a(p(o.title), 1)])]), o.description || e.$slots.description ? (u(), r("span", T, [d(e.$slots, "description", {}, () => [a(p(o.description), 1)])])) : n("", !0)]),
-				e.$slots.actions ? n("", !0) : (u(), t(m(y), {
-					key: 2,
-					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"]))
-			], 10, x)]),
+		}, [i("div", { class: u(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(d(), t(p(`h${F.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
+			default: y(() => [(d(), t(p(o.collapsible ? "button" : "span"), l({ id: `${h(M)}-trigger` }, {
+				...R.value,
+				...o.headerAttrs
+			}, {
+				class: ["flex w-full items-center gap-3 text-left", [
+					I.value === "flush" ? "px-1 py-3" : "px-5 py-4",
+					o.collapsible && D,
+					o.collapsible && !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"
+				]],
+				onClick: L
+			}), {
+				default: y(() => [
+					o.collapsible && e.$slots.actions ? (d(), t(h(x), {
+						key: 0,
+						class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", P.value && "rotate-90 text-heading"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : n("", !0),
+					e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
+					i("span", C, [i("span", w, [f(e.$slots, "title", {}, () => [a(m(o.title), 1)])]), o.description || e.$slots.description ? (d(), r("span", T, [f(e.$slots, "description", {}, () => [a(m(o.description), 1)])])) : n("", !0)]),
+					o.collapsible && !e.$slots.actions ? (d(), t(h(b), {
+						key: 2,
+						class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", P.value && "rotate-180 text-heading"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : n("", !0)
+				]),
+				_: 3
+			}, 16, ["id", "class"]))]),
 			_: 3
-		})), e.$slots.actions ? (u(), r("div", {
+		})), e.$slots.actions ? (d(), r("div", {
 			key: 0,
-			class: l(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", F.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
-		}, [d(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: l(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
-			id: `${m(j)}-panel`,
+			class: u(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", I.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
+		}, [f(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: u(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", P.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
+			id: `${h(M)}-panel`,
 			role: "region",
-			"aria-labelledby": `${m(j)}-trigger`,
-			inert: !N.value || void 0,
-			class: "min-h-0 overflow-hidden"
-		}, [i("div", { class: l(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [d(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+			"aria-labelledby": `${h(M)}-trigger`,
+			inert: !P.value || void 0,
+			class: "min-h-0 overflow-clip"
+		}, [i("div", { class: u(["pt-0.5 text-base text-body", I.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -38,11 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onBack?: (() => any) | undefined;
 }>, {
     title: string;
+    collapsible: boolean;
     tone: "default" | "danger";
     subtitle: string;
     padded: boolean;
     plain: boolean;
-    collapsible: boolean;
     backButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -75,12 +75,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string;
+    collapsible: boolean;
     width: string;
     top: string;
     bottom: string;
     mobile: "select" | "scroll";
     sticky: boolean;
-    collapsible: boolean;
     breakpoint: number;
     offsetSelectors: string[];
     hideTabs: boolean;

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

@@ -56,10 +56,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     fixed: boolean;
     label: string;
+    collapsible: boolean;
     spacing: "normal" | "compact";
     top: string;
     dark: boolean;
-    collapsible: boolean;
     contained: boolean;
     breakpoint: number;
     hoverExpand: boolean;

package/dist/lib/theme.css

@@ -314,6 +314,8 @@
   --radius-14: calc(14px * var(--ac-scale));
   --radius-16: calc(16px * var(--ac-scale));
   --radius-50: calc(50px * var(--ac-scale));
+  /* a band inside a 14px card (a header, footer or steps strip): the card's corner less its 1px border */
+  --radius-14-inner: calc(var(--radius-14) - 1px);
 
   /* elevation: cloud-ui's neutral scale. Cards rest on a border, not a shadow. */
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -644,6 +646,29 @@
   &.ac-scrollbar::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
 }
 
+/* Composite classes: one name for a set of utilities the components and apps keep repeating. They work with
+   variants like any utility (`hover:ac-transition-colors`, `max-sm:…`). */
+
+/* A small uppercase label over a group: menu sections, panel headings, sidebar groups (11px, 600, 0.08em). */
+@utility ac-overline {
+  @apply text-sm font-semibold tracking-[0.08em] text-muted uppercase;
+}
+
+/* Hover and selection colour changes at the standard 200ms, and none when the user asks for less motion. */
+@utility ac-transition-colors {
+  @apply transition-colors duration-200 motion-reduce:transition-none;
+}
+
+/* Turning and sliding (a chevron opening, an arrow nudging) at 200ms, and none with reduced motion. */
+@utility ac-transition-transform {
+  @apply transition-transform duration-200 motion-reduce:transition-none;
+}
+
+/* Keyboard focus drawn inside the element: full-width rows and headers, where an outer ring would be clipped. */
+@utility ac-focus-inset {
+  @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none;
+}
+
 /* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
 @keyframes ac-skeleton-shimmer {
   from { background-position: 150% 0; }

package/package.json

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