@ac-design/design-system 2.10.3 → 2.11.0

package/README.md

@@ -1,6 +1,6 @@
 # AppsCode Design System
 
-The design system for every AppsCode console (cluster-ui, kubedb-ui, platform-ui, billing, marketplace…): a **Tailwind CSS v4 theme** and **Vue 3 components**, with a documentation site that shows every component live.
+The design system for every AppsCode console (cloud-ui, cluster-ui, kubedb-ui, platform-ui, billing-ui, selfhost-ui…): a **Tailwind CSS v4 theme** and **Vue 3 components**, with a documentation site that shows every component live.
 
 It replaces the old Bulma/SCSS library (`@appscode/design-system` 2.x). Every component the apps import from the old library has a replacement here, and the docs' Migration page maps the old props to the new ones.
 
@@ -14,9 +14,10 @@ npm run dev          # docs site at http://localhost:5173
 | | |
 | --- | --- |
 | **Theme** | `src/lib/theme.css`: colour scales, semantic tokens (text, borders, surfaces), type scale, radii, shadows and a full dark theme, as a Tailwind `@theme`. |
-| **Components** | 85 Vue components plus 2 editors and 4 charts (counting sub-parts) in eight groups, listed below. |
-| **Editors** | `AcCodeEditor` and `AcFileEditor` on CodeMirror 6, in a separate entry so other apps don't bundle CodeMirror. |
-| **Composables** | `useColorMode()` (light/dark/system), `useToast()` (notifications), `useBrandColor()` (re-hue the brand at runtime). |
+| **Components** | 101 Vue components (counting sub-parts such as `AcDropdownItem`) in eight groups, listed below. |
+| **Editors** | `AcCodeEditor` and `AcFileEditor` on CodeMirror 6, in the `/editor` entry so other apps don't bundle CodeMirror. |
+| **Charts** | Seven charts on Apache ECharts 6 (cloud-ui's engine), in the `/charts` entry. `echarts` is an optional peer dependency. |
+| **Composables** | `useColorMode()` (light/dark/system), `useFontScale()` (text size), `useToast()` (notifications), `useBrandColor()` (re-hue the brand at runtime), `useTablePagination()` and `useApiPagination()`, `useBulkSelection()`, `useFormValidation()`, and `copyText()`. |
 | **Logo** | `AcLogo`: the AppsCode logo and mark as inline SVG that follows dark mode. |
 | **Docs site** | Getting started, foundations, a page per component (live playground, examples, guidelines, accessibility, API tables) and full example pages. |
 
@@ -24,15 +25,15 @@ npm run dev          # docs site at http://localhost:5173
 
 | Group | Components |
 | --- | --- |
-| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd, Copy Button |
-| Feedback | Spinner, Preloader, Skeleton, Progress, Circular Progress, Toast, Empty State |
-| Form | Input, Number Input, Tag Input, Key-Value Input, Textarea, Code Editor, File Editor, Select, CheckBox, CheckRadio, Switch, Switch Card, Search Bar, File Upload, Slider, Date Picker, Time Picker, Color Input, Form, Form Array, Theme Mode |
-| Overlay | Modal, Confirm Modal, Delete Modal, Side Panel, Dropdown, Tooltip |
-| Layout | Sidebar, Navbar, Header, Content Table, Section, Accordion, Status Bar, Footer |
-| Navigation | Breadcrumb, Tabs, Steps, Pagination, Side Tabs, App Switcher, Cluster Switcher, Notifications, Locale Switcher |
-| Data | Table, Bulk Action Bar, Info Table, Cell Value |
-| Cards | Stat Card, Feature Card, Resource Card, Usage Card |
-| Charts (`/charts`) | Line Chart, Area Chart, Bar Chart, Donut Chart |
+| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd, Copy Button, Command Block, Check List |
+| Feedback | Spinner and Preloader, Loader, Skeleton, Progress, Circular Progress, Toast, Empty State, Error State |
+| Form | Input, Number Input, Textarea, Code Editor, File Editor, Select, Combobox, Tag Input, CheckBox, CheckRadio, Radio Card, Switch, Switch Card, Search Bar, File Upload, Slider, Date Picker, Month Picker, Color Input, Time Picker, Form, Form Array, Key-Value Input, Taint Input, Theme Mode, Font Scale |
+| Overlay | Modal, Delete Modal, Confirm Modal, Side Panel, Dropdown, Popover, Tooltip |
+| Layout | Page, Sidebar, Navbar, Header, Product Hero, Content Table, Section Content, Settings Row, Accordion, Status Bar, Footer |
+| Navigation | Breadcrumb, Tabs, Steps, Pagination, Locale Switcher, Side Tabs, App Switcher, Cluster Switcher, Notifications |
+| Data | Table, Bulk Action Bar, Info Table, List, Cell Value |
+| Cards | Stat Card, Feature Card, Resource Card, Usage Card, Cost Summary |
+| Charts (`/charts`) | Line Chart, Area Chart, Bar Chart, Donut Chart, Map Chart, Graph Chart, Tree Chart |
 
 Example pages put them together: a database list, a database detail page, a create wizard, settings, empty and error states, and a full app shell.
 
@@ -42,14 +43,19 @@ The look and voice are the AppsCode Cloud console's (`cloud-ui`), so the system
 
 - **Type:** Roboto for the interface, Google Sans Flex for headings and JetBrains Mono for code and resource names, on a 14px base.
 - **Colour:** white cards on a `#f9fafb` page, neutral greys (`#252525` text, `#5c5c5c` descriptions, one `#ebebeb` border), the `#00a651` brand green, and success, info, warning, danger and pending statuses, each with an AA `-strong` text colour.
-- **Shape:** 40px controls with a 10px radius, 14px cards and 16px dialogs. Cards rest on a border; shadows mark only what floats.
+- **Shape:** 42px buttons and fields with a 10px radius, 14px cards and 16px dialogs. Cards rest on a border; shadows mark only what floats.
 - **Focus:** a `focus-ring` utility (primary border and a 2px halo) on form fields, and a 2px offset ring on buttons.
 - **Dark mode:** class-based. Every token has a dark value, so components need no dark-specific code.
 - **Icons:** [Lucide](https://lucide.dev) (`@lucide/vue`). Components never draw their own SVG icons.
 
 ## Using it in an app
 
-The package is `@ac-design/design-system` **2.0.0**. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+The package is [`@ac-design/design-system`](https://www.npmjs.com/package/@ac-design/design-system) on npm. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+
+```sh
+npm install @ac-design/design-system @lucide/vue
+npm install echarts   # only if you use /charts
+```
 
 ## Styling rule
 
@@ -59,54 +65,50 @@ There are two ways to load the styles:
 
 | The app… | Load | Tailwind in the app |
 | --- | --- | --- |
-| still loads the old Bulma/SCSS design system (cluster-ui, kubedb-ui, platform-ui…) | `compat.css` | No |
-| doesn't load the old styles (new apps, or after migrating) | `theme.css` with Tailwind v4 | Yes |
-
-### In an app that still loads the old styles
+| runs Tailwind v4 (cloud-ui, cluster-ui, kubedb-ui, platform-ui and new apps) | `theme.css` | Yes |
+| still loads the old Bulma/SCSS design system and has no Tailwind | `compat.css` | No |
 
-The docs page **Getting Started → Existing Apps** has the full guide. In short:
-
-```sh
-# installed next to the old 2.x package, under a second name
-npm install @appscode/ds-next@npm:@ac-design/design-system@2.0.0 @lucide/vue
-```
+### In an app with Tailwind v4
 
 ```ts
-// main.ts (Vite), or the `css` list in nuxt.config.ts: after the old styles
-import "./assets/styles/scss/main.scss";
+// main.ts: fonts once
 import "@fontsource-variable/roboto";
 import "@fontsource-variable/google-sans-flex/opsz.css";
 import "@fontsource-variable/jetbrains-mono";
-import "@appscode/ds-next/compat.css";
 ```
 
-- **`compat.css`** is the library's styles, precompiled and fenced in: they apply only inside new components, and win over the old `!important` utilities there. Old pages don't change; this was checked pixel by pixel in kubedb-ui.
-- **Don't put utility classes on new components** while both are loaded. Wrap the component in your own element for spacing.
+```css
+/* your main CSS file */
+@import "tailwindcss";
+@import "@ac-design/design-system/theme.css";
+```
+
+### In an app with only the old styles
 
-### In an app without the old styles
+The docs page **Getting Started → Existing Apps** has the full guide. In short:
 
 ```ts
-// main.ts: fonts once
+// main.ts (Vite), or the `css` list in nuxt.config.ts: after the old styles
+import "./assets/styles/scss/main.scss";
 import "@fontsource-variable/roboto";
 import "@fontsource-variable/google-sans-flex/opsz.css";
 import "@fontsource-variable/jetbrains-mono";
+import "@ac-design/design-system/compat.css";
 ```
 
-```css
-/* your main CSS file */
-@import "tailwindcss";
-@import "@ac-design/design-system/theme.css";
-```
+- **`compat.css`** is the library's styles, precompiled and fenced in: they apply only inside new components, and win over the old `!important` utilities there. Old pages don't change; this was checked pixel by pixel in kubedb-ui.
+- **Don't put utility classes on new components** while both are loaded. Wrap the component in your own element for spacing.
 
 ### Either way
 
 ```ts
 import { AcButton, AcInput, useToast } from "@ac-design/design-system";
 import { AcCodeEditor, AcFileEditor } from "@ac-design/design-system/editor";
+import { AcLineChart, AcDonutChart } from "@ac-design/design-system/charts";
 ```
 
 - **Requirements:** Vue 3.5+, Vite 5+ or Nuxt 3+, and TypeScript with `moduleResolution: "bundler"`. Every component renders on the server, so Nuxt SSR works.
-- **Peer dependencies:** `vue` ^3.5 and `@lucide/vue` ^1.0. CodeMirror, Ajv and `yaml` are regular dependencies, bundled only by apps that import from `/editor`.
+- **Peer dependencies:** `vue` ^3.5 and `@lucide/vue` ^1.0, plus `echarts` ^6 (optional) for `/charts`. CodeMirror, Ajv and `yaml` are regular dependencies, bundled only by apps that import from `/editor`.
 - **Dark mode:** put `.dark` on `<html>` (the old `.is-dark-theme` class works too), or call `useColorMode().setMode("dark" | "light" | "system")`. The user's choice is saved under the old `themeMode` localStorage key.
 - **Toasts:** mount `<AcToaster />` once near the root, then call `useToast().success("Saved")` anywhere.
 - **Brand colour:** `useBrandColor().setColor("#0066cc")` re-hues the primary scale. The old `HexToHSL`, `setThemeHSL` and `getThemeHSL` helpers are exported under the same names.
@@ -118,6 +120,7 @@ import { AcCodeEditor, AcFileEditor } from "@ac-design/design-system/editor";
 | --- | --- |
 | `npm run dev` | Regenerates the API data, then starts the docs site at http://localhost:5173 |
 | `npm run build` | Regenerates the API data, type-checks, and builds the docs site into `dist/` |
+| `npm run preview` | Serves the built docs site from `dist/` |
 | `npm run build:lib` | Builds the library into `dist/lib`: ES modules, `.d.ts` files, `theme.css` and `compat.css` |
 | `npm run type-check` | `vue-tsc` over the whole project |
 | `npm run meta` | Regenerates `src/docs/generated/component-meta.json` (the API tables) from the components' types |
@@ -135,7 +138,8 @@ src/
       index.ts                component exports, sorted
       types.ts                shared types (Tone, Variant, Option, SelectOption)
     editor/                   the /editor entry: index.ts, CodeMirror theme, YAML/JSON Schema checks
-    composables/              useColorMode.ts, useToast.ts, useBrandColor.ts
+    charts/                   the /charts entry: index.ts, ECharts setup, ChartFrame.vue (legend, tooltip, sr-only table)
+    composables/              useColorMode, useFontScale, useToast, useBrandColor, pagination, selection and form helpers
   docs/                       the documentation site
     nav.ts                    every page: path, title, description, section, group, component
     router.ts                 hash router built from nav.ts
@@ -151,7 +155,7 @@ scripts/
   build-compat.mjs            builds compat.css for apps that still load the old styles
 public/                       favicon, logos
 vite.config.ts                docs site
-vite.lib.config.ts            library build (two entries: index and editor/index)
+vite.lib.config.ts            library build (three entries: index, editor/index and charts/index)
 ```
 
 ## Contributing

package/dist/lib/compat.css

@@ -5415,6 +5415,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       font-size: var(--text-xs) !important;
       line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
     }
+    .max-sm\:has-\[\>\.w-full\]\:basis-full:has( > .w-full):where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 100% !important;
+    }
   }
   @media (width >= 40rem) {
     .sm\:inset-x-auto:where([data-ac-ds], [data-ac-ds] *) {

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

@@ -12,7 +12,7 @@ var g = {
 	class: "mt-0.5 text-xs leading-4 text-muted"
 }, b = {
 	key: 1,
-	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap"
+	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2 max-sm:has-[>.w-full]:basis-full sm:flex-nowrap"
 }, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {

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

@@ -4,6 +4,8 @@ export interface Props {
     defaultScale?: FontScale | number;
     /** `icons` is a compact switch of four "A"s; `labels` adds the words, for menus and settings pages. */
     display?: "icons" | "labels";
+    /** Fills its row and shares the width between the buttons, e.g. in a 256px menu where the labelled switch would overflow. */
+    block?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "set:scale": (scale: number) => any;
@@ -11,6 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     "onSet:scale"?: ((scale: number) => any) | undefined;
 }>, {
     display: "icons" | "labels";
+    block: boolean;
     defaultScale: FontScale | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,26 +1,24 @@
 import { FONT_SCALES as e, useFontScale as t } from "../composables/useFontScale.js";
 import { Fragment as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
 //#region src/lib/components/AcFontScale.vue?vue&type=script&setup=true&lang.ts
-var d = {
-	role: "radiogroup",
-	"aria-label": "Text size",
-	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
-	"data-ac-ds": "",
-	"data-testid": "ac-font-scale"
-}, f = [
+var d = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], p = { key: 1 }, m = /*@__PURE__*/ a({
+], f = { key: 1 }, p = /*@__PURE__*/ a({
 	__name: "AcFontScale",
 	props: {
 		defaultScale: { default: "default" },
-		display: { default: "icons" }
+		display: { default: "icons" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	emits: ["set:scale"],
-	setup(a, { emit: m }) {
-		let h = a, g = m, _ = [
+	setup(a, { emit: p }) {
+		let m = a, h = p, g = [
 			{
 				value: "small",
 				label: "Small",
@@ -41,25 +39,31 @@ var d = {
 				label: "Larger",
 				glyph: "text-2xl"
 			}
-		], { scale: v, preset: y, setScale: b } = t({ defaultScale: typeof h.defaultScale == "number" ? h.defaultScale : e[h.defaultScale] });
-		function x(e) {
-			b(e), g("set:scale", v.value);
+		], { scale: _, preset: v, setScale: y } = t({ defaultScale: typeof m.defaultScale == "number" ? m.defaultScale : e[m.defaultScale] });
+		function b(e) {
+			y(e), h("set:scale", _.value);
 		}
-		return (e, t) => (s(), r("div", d, [(s(), r(n, null, c(_, (e) => i("button", {
+		return (e, t) => (s(), r("div", {
+			role: "radiogroup",
+			"aria-label": "Text size",
+			class: o(["items-center gap-1 rounded-10 bg-surface-sunken p-1", a.block ? "flex w-full" : "inline-flex"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-font-scale"
+		}, [(s(), r(n, null, c(g, (e) => i("button", {
 			key: e.value,
 			type: "button",
 			role: "radio",
-			"aria-checked": u(y) === e.value,
+			"aria-checked": u(v) === e.value,
 			"aria-label": a.display === "icons" ? `${e.label} text` : void 0,
 			title: a.display === "icons" ? `${e.label} text` : void 0,
-			class: o(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [a.display === "icons" ? "w-7" : "px-3", u(y) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
-			onClick: (t) => x(e.value)
+			class: o(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [a.display === "icons" ? "w-7" : a.block ? "flex-1 px-1" : "px-3", u(v) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
+			onClick: (t) => b(e.value)
 		}, [a.display === "icons" ? (s(), r("span", {
 			key: 0,
 			class: o(["leading-none font-semibold", e.glyph]),
 			"aria-hidden": "true"
-		}, "A", 2)) : (s(), r("span", p, l(e.label), 1))], 10, f)), 64))]));
+		}, "A", 2)) : (s(), r("span", f, l(e.label), 1))], 10, d)), 64))], 2));
 	}
 });
 //#endregion
-export { m as default };
+export { p as default };

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

@@ -12,7 +12,7 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 }, be = {
 	key: 2,
 	class: "sr-only"
-}, xe = { class: "ac-scrollbar" }, Se = { class: "w-full border-separate border-spacing-0 text-base" }, Ce = { class: "sr-only" }, we = {
+}, xe = { class: "ac-scrollbar relative" }, Se = { class: "w-full border-separate border-spacing-0 text-base" }, Ce = { class: "sr-only" }, we = {
 	key: 0,
 	scope: "col",
 	class: "h-10 w-px border-b border-border bg-surface-sunken/50 px-3 text-right"

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

@@ -7,6 +7,8 @@ export interface Props {
     collapsible?: boolean;
     /** Keeps the sidebar inside its parent instead of the viewport: the mobile drawer and backdrop use `absolute`, and the mobile layout follows the parent's width. Give the parent `relative`, `overflow-hidden` and a height. For previews and embedded shells. */
     contained?: boolean;
+    /** Narrows the docked sidebar from 256px to 208px between 1024px and 1279px, as cloud-ui. Set `false` to keep 256px when labels are long. */
+    shrink?: boolean;
     /** Width in px below which the sidebar becomes an off-canvas drawer: the window's width, or the parent's with `contained`. `0` keeps it docked. */
     breakpoint?: number;
     /** With the sidebar collapsed to the rail, opens it to full width over the page while the pointer or keyboard focus is inside, then folds it back. The page doesn't shift. */
@@ -61,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     top: string;
     dark: boolean;
     contained: boolean;
+    shrink: boolean;
     breakpoint: number;
     hoverExpand: boolean;
     footerScrolls: boolean;

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

@@ -35,6 +35,10 @@ var E = [
 			type: Boolean,
 			default: !1
 		},
+		shrink: {
+			type: Boolean,
+			default: !0
+		},
 		breakpoint: { default: 768 },
 		hoverExpand: {
 			type: Boolean,
@@ -81,17 +85,17 @@ var E = [
 			top: k.top,
 			height: `calc(100dvh - ${k.top})`
 		}), _e = n(() => {
-			let e = k.dark ? "dark border-r border-border bg-sidebar text-body shadow-sm" : "border-r border-border bg-sidebar-panel/95 text-body shadow-sm backdrop-blur-sm";
+			let e = k.dark ? "dark border-r border-border bg-sidebar text-body" : "border-r border-border bg-sidebar-panel/95 text-body backdrop-blur-sm";
 			return F.value ? [
 				e,
 				k.contained ? "absolute" : "fixed",
-				"inset-y-0 left-0 z-[80] w-64 duration-300 ease-out-soft motion-reduce:transition-none",
+				"inset-y-0 left-0 z-[80] w-64 shadow-sm duration-300 ease-out-soft motion-reduce:transition-none",
 				j.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
 			] : [
 				e,
 				B.value ? [k.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : k.contained ? "relative h-full" : k.fixed ? "fixed left-0 z-30" : "sticky",
 				"transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-				V.value ? "w-14" : k.contained ? "w-64" : "w-64 lg:w-52 xl:w-64"
+				V.value ? "w-14" : k.contained || !k.shrink ? "w-64" : "w-64 lg:w-52 xl:w-64"
 			];
 		});
 		function J() {

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

@@ -4,7 +4,7 @@ import n from "./AcPagination.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, getCurrentInstance as f, mergeModels as p, mergeProps as ee, normalizeClass as m, normalizeStyle as h, openBlock as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as te, useModel as S, useSlots as ne, watch as re, withCtx as C, withModifiers as w } from "vue";
 import { Check as T, ChevronDown as ie, ChevronRight as ae, ChevronUp as oe, Minus as se } from "@lucide/vue";
 //#region src/lib/components/AcTable.vue?vue&type=script&setup=true&lang.ts
-var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border-spacing-0 text-base" }, ue = { class: "relative flex size-[18px]" }, de = [
+var ce = { class: "ac-scrollbar relative" }, le = { class: "w-full border-separate border-spacing-0 text-base" }, ue = { class: "relative flex size-[18px]" }, de = [
 	"checked",
 	"indeterminate",
 	"disabled"

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

@@ -4,6 +4,8 @@ export interface Props {
     defaultMode?: ColorMode;
     /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages; `toggle` is cloud-ui's sun/moon switch for the navbar (64×32px), light or dark only. */
     display?: "icons" | "labels" | "toggle";
+    /** Fills its row and shares the width between the buttons, e.g. in a 256px menu where the labelled switch would overflow. Not for `toggle`. */
+    block?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -19,6 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:dark"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     display: "icons" | "labels" | "toggle";
+    block: boolean;
     defaultMode: ColorMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -2,23 +2,20 @@ import { useColorMode as e } from "../composables/useColorMode.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderList as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useModel as v, watch as y } from "vue";
 import { Monitor as b, Moon as x, Sun as S } from "@lucide/vue";
 //#region src/lib/components/AcThemeMode.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-checked", "title"], w = {
-	key: 1,
-	role: "radiogroup",
-	"aria-label": "Theme",
-	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
-	"data-ac-ds": "",
-	"data-testid": "ac-theme-mode"
-}, T = [
+var C = ["aria-checked", "title"], w = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], E = { key: 0 }, D = /*@__PURE__*/ c({
+], T = { key: 0 }, E = /*@__PURE__*/ c({
 	__name: "AcThemeMode",
 	props: /*@__PURE__*/ l({
 		defaultMode: { default: "light" },
-		display: { default: "icons" }
+		display: { default: "icons" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		dark: {
 			type: Boolean,
@@ -28,7 +25,7 @@ var C = ["aria-checked", "title"], w = {
 	}),
 	emits: /*@__PURE__*/ l(["set:theme"], ["update:dark"]),
 	setup(c, { emit: l }) {
-		let D = c, O = v(c, "dark"), k = l, A = [
+		let E = c, D = v(c, "dark"), O = l, k = [
 			{
 				value: "light",
 				label: "Light",
@@ -44,60 +41,67 @@ var C = ["aria-checked", "title"], w = {
 				label: "System",
 				icon: b
 			}
-		], j = O.value === void 0 ? e({ defaultMode: D.defaultMode }) : null, M = n(() => j ? j.isDark.value : !!O.value), N = n(() => j ? j.mode.value : O.value ? "dark" : "light"), P = p(M.value), F;
-		function I(e) {
-			if (j) {
-				j.setMode(e), k("set:theme", M.value ? "dark" : "light");
+		], A = D.value === void 0 ? e({ defaultMode: E.defaultMode }) : null, j = n(() => A ? A.isDark.value : !!D.value), M = n(() => A ? A.mode.value : D.value ? "dark" : "light"), N = p(j.value), P;
+		function F(e) {
+			if (A) {
+				A.setMode(e), O("set:theme", j.value ? "dark" : "light");
 				return;
 			}
 			let t = e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches : e === "dark";
-			O.value = t, k("set:theme", t ? "dark" : "light");
+			D.value = t, O("set:theme", t ? "dark" : "light");
 		}
-		function L() {
-			P.value = !P.value, clearTimeout(F), F = setTimeout(() => {
-				F = void 0, I(P.value ? "dark" : "light");
+		function I() {
+			N.value = !N.value, clearTimeout(P), P = setTimeout(() => {
+				P = void 0, F(N.value ? "dark" : "light");
 			}, 200);
 		}
-		return y(M, (e) => {
-			F === void 0 && (P.value = e);
-		}), d(() => clearTimeout(F)), (e, n) => c.display === "toggle" ? (f(), a("button", {
+		return y(j, (e) => {
+			P === void 0 && (N.value = e);
+		}), d(() => clearTimeout(P)), (e, n) => c.display === "toggle" ? (f(), a("button", {
 			key: 0,
 			type: "button",
 			role: "switch",
-			"aria-checked": P.value,
+			"aria-checked": N.value,
 			"aria-label": "Dark mode",
-			title: P.value ? "Switch to light mode" : "Switch to dark mode",
+			title: N.value ? "Switch to light mode" : "Switch to dark mode",
 			class: "relative inline-flex h-8 w-16 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
 			"data-ac-ds": "",
 			"data-testid": "ac-theme-mode",
-			onClick: L
+			onClick: I
 		}, [
 			o("span", {
-				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", P.value ? "translate-x-[10px] rotate-0 opacity-0" : "translate-x-[3px] rotate-[15deg] opacity-100"]),
+				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", N.value ? "translate-x-[10px] rotate-0 opacity-0" : "translate-x-[3px] rotate-[15deg] opacity-100"]),
 				"aria-hidden": "true"
 			}, [s(_(S), { class: "size-[19px] text-theme-sun" })], 2),
 			o("span", {
-				class: u(["size-[21px] shrink-0 rounded-full inset-ring-2 transition-[translate,background-color] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", P.value ? "-translate-x-[14px] bg-theme-moon inset-ring-white" : "translate-x-4 bg-theme-sun-soft inset-ring-theme-sun"]),
+				class: u(["size-[21px] shrink-0 rounded-full inset-ring-2 transition-[translate,background-color] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", N.value ? "-translate-x-[14px] bg-theme-moon inset-ring-white" : "translate-x-4 bg-theme-sun-soft inset-ring-theme-sun"]),
 				"aria-hidden": "true"
 			}, null, 2),
 			o("span", {
-				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2.5,0.46,0.71)] motion-reduce:transition-none", P.value ? "-translate-x-[3px] -rotate-[15deg] opacity-100" : "-translate-x-2 rotate-0 opacity-0"]),
+				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2.5,0.46,0.71)] motion-reduce:transition-none", N.value ? "-translate-x-[3px] -rotate-[15deg] opacity-100" : "-translate-x-2 rotate-0 opacity-0"]),
 				"aria-hidden": "true"
 			}, [s(_(x), { class: "size-[21px] text-heading" })], 2)
-		], 8, C)) : (f(), a("div", w, [(f(), a(t, null, m(A, (e) => o("button", {
+		], 8, C)) : (f(), a("div", {
+			key: 1,
+			role: "radiogroup",
+			"aria-label": "Theme",
+			class: u(["items-center gap-1 rounded-10 bg-surface-sunken p-1", c.block ? "flex w-full" : "inline-flex"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-theme-mode"
+		}, [(f(), a(t, null, m(k, (e) => o("button", {
 			key: e.value,
 			type: "button",
 			role: "radio",
-			"aria-checked": N.value === e.value,
+			"aria-checked": M.value === e.value,
 			"aria-label": c.display === "icons" ? `${e.label} theme` : void 0,
 			title: c.display === "icons" ? `${e.label} theme` : void 0,
-			class: u(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [c.display === "icons" ? "w-7" : "px-3", N.value === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
-			onClick: (t) => I(e.value)
+			class: u(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [c.display === "icons" ? "w-7" : c.block ? "flex-1 px-1" : "px-3", M.value === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
+			onClick: (t) => F(e.value)
 		}, [(f(), r(h(e.icon), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})), c.display === "labels" ? (f(), a("span", E, g(e.label), 1)) : i("", !0)], 10, T)), 64))]));
+		})), c.display === "labels" ? (f(), a("span", T, g(e.label), 1)) : i("", !0)], 10, w)), 64))], 2));
 	}
 });
 //#endregion
-export { D as default };
+export { E as default };

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

@@ -360,6 +360,7 @@ var me = {
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 				}, "Theme", 8, Ye), f(r, {
 					display: "labels",
+					block: "",
 					"onSet:theme": o[3] ||= (e) => k("set:theme", e)
 				})], 8, Je)) : c("", !0),
 				p.showFontScale ? (g(), l("div", {
@@ -370,7 +371,10 @@ var me = {
 				}, [u("p", {
 					id: `${S(M)}-scale`,
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, "Text size", 8, Ze), f(n, { display: "labels" })], 8, Xe)) : c("", !0),
+				}, "Text size", 8, Ze), f(n, {
+					display: "labels",
+					block: ""
+				})], 8, Xe)) : c("", !0),
 				u("div", Qe, [
 					(g(!0), l(i, null, v(p.items, (e) => (g(), s(b(q(e)), ne({ key: e.label }, { ref_for: !0 }, st(e), {
 						role: "menuitem",

package/package.json

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