@nxgt/material-vue 0.26.1 → 0.28.0

package/dist/styles.css

@@ -2,6 +2,13 @@
 @import "tw-animate-css";
 /* The stylesheets the components need: lib/components/components.css. */
 @import "./components/components.css";
+/* Reduced motion: unlayered on purpose, see the file. */
+@import "./components/reduced-motion.css";
+/* The theme's colour tokens, light (:root) and dark: lib/components/theme-tokens.css. */
+@import "./components/theme-tokens.css";
+/* The base layer: elements (base.css), then editor content and the form grid. */
+@import "./components/base.css";
+@import "./components/base-content.css";
 /* Consumers' Tailwind skips node_modules: scan the compiled components. */
 @source "../dist";
 
@@ -9,91 +16,6 @@
 	&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)
 );
 
-:root {
-	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.14 0.036 258.53);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
-	--strix: oklch(45.91% 0.1864 310.75);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.129 0.042 264.695);
-	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
-	--secondary: oklch(56.67% 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.554 0.046 257.417);
-	--tooltip: oklch(0.446 0.043 257.281);
-	--tooltip-foreground: oklch(1 0 0);
-	--accent: oklch(0.9182 0.0077 228.86);
-	--accent-foreground: oklch(0.216 0.006 56.043);
-	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
-	--success: oklch(0.6 0.118 184.704);
-	--success-foreground: oklch(0.984 0.003 247.858);
-	--info: oklch(0.707 0.165 254.624);
-	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.646 0.222 41.116);
-	--warning-foreground: oklch(0.984 0.003 247.858);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.929 0.013 255.508);
-	--input: oklch(0.929 0.013 255.508);
-	--ring: oklch(0.704 0.04 256.788);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.984 0.003 247.858);
-	--sidebar-foreground: oklch(0.129 0.042 264.695);
-	--sidebar-primary: oklch(0.208 0.042 265.755);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.968 0.007 247.896);
-	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-	--sidebar-border: oklch(0.929 0.013 255.508);
-	--sidebar-ring: oklch(0.704 0.04 256.788);
-}
-
-.dark,
-[data-theme="dark"] {
-	--background: oklch(0.14 0.036 258.53);
-	--foreground: oklch(0.984 0.003 247.858);
-	--card: oklch(0.208 0.042 265.755);
-	--card-foreground: oklch(0.984 0.003 247.858);
-	--popover: oklch(0.208 0.042 265.755);
-	--popover-foreground: oklch(0.984 0.003 247.858);
-	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
-	--secondary: oklch(56.67% 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.554 0.046 257.417);
-	--tooltip: oklch(0.929 0.013 255.508);
-	--tooltip-foreground: oklch(0.446 0.043 257.281);
-	--accent: oklch(0.268 0.007 34.298);
-	--accent-foreground: oklch(0.985 0.001 106.423);
-	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.551 0.027 264.364);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.208 0.042 265.755);
-	--sidebar-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.279 0.041 260.031);
-	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
-}
-
 @theme {
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
@@ -118,6 +40,8 @@
 	--color-secondary-container: --alpha(var(--secondary-foreground) / 20%);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
+	--color-track: var(--track);
+	--color-track-fill: var(--track-fill);
 	--color-tooltip: var(--tooltip);
 	--color-tooltip-foreground: var(--tooltip-foreground);
 	--color-accent: var(--accent);
@@ -126,6 +50,7 @@
 	--color-error: var(--error);
 	--color-error-foreground: var(--error-foreground);
 	--color-error-container: --alpha(var(--error-foreground) / 20%);
+	--color-error-text: var(--error-text);
 	--color-success: var(--success);
 	--color-success-foreground: var(--success-foreground);
 	--color-info: var(--info);
@@ -187,286 +112,3 @@
 	bottom: -0.1875rem;
 	transform: rotate(-45deg) scale(0.75);
 }
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50 selection:bg-primary selection:text-primary-foreground;
-		&::-webkit-scrollbar {
-			@apply w-1 gap-4 h-1 md:w-1.5 md:h-1.5 cursor-pointer;
-		}
-		&::-webkit-scrollbar-track {
-			@apply rounded bg-primary/20;
-		}
-		&::-webkit-scrollbar-thumb {
-			@apply rounded bg-muted-foreground;
-		}
-
-		input::-webkit-outer-spin-button,
-		::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-	}
-	body {
-		@apply bg-background text-foreground;
-
-		input[type="number"] {
-			-moz-appearance: textfield;
-		}
-
-		[data-slot="icon"] {
-			@apply dark:fill-foreground;
-		}
-
-		h1 {
-			font-size: var(--text-2xl);
-			font-weight: var(--font-weight-medium);
-		}
-		h2 {
-			font-size: var(--text-xl);
-			font-weight: var(--font-weight-medium);
-		}
-		h3 {
-			font-size: var(--text-lg);
-			font-weight: var(--font-weight-medium);
-		}
-		h4 {
-			font-size: var(--text-base);
-			font-weight: var(--font-weight-medium);
-		}
-		h5 {
-			font-size: var(--text-sm);
-			font-weight: var(--font-weight-medium);
-		}
-		h6 {
-			font-size: var(--text-xs);
-			font-weight: var(--font-weight-medium);
-		}
-		a:not(:has(> button)) {
-			@apply focus:underline underline-offset-4 hover:underline cursor-pointer;
-			@apply text-info [&_svg]:data-[slot=icon]:text-info hover:bg-info/10 active:bg-info/5 focus:bg-info/15;
-		}
-
-		code {
-			@apply rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono mx-0.5;
-		}
-
-		blockquote {
-			@apply border-l-2 border-primary/40 pl-4 italic text-muted-foreground my-1;
-		}
-		pre {
-			@apply bg-muted rounded p-4 overflow-x-auto my-1;
-			code {
-				@apply text-sm;
-			}
-		}
-
-		ul li p,
-		ol li p {
-			display: inline;
-		}
-
-		ul[data-type="taskList"] {
-			list-style-type: disc;
-		}
-		ol[data-type="taskList"] {
-			list-style-type: decimal;
-		}
-
-		ul[data-type="taskList"] li {
-			@apply flex gap-2 items-center;
-		}
-
-		ul,
-		ol {
-			@apply list-inside marker:text-muted-foreground;
-		}
-
-		[data-type="emoji"] {
-			img {
-				@apply size-4;
-			}
-		}
-
-		input[type="checkbox"] {
-			display: grid;
-			place-content: center;
-			-webkit-appearance: none;
-			appearance: none;
-			font: inherit;
-			color: ---value(--color-primary);
-			width: 1.05em;
-			height: 1.05em;
-			border: 0.13em solid var(--muted-foreground);
-			border-radius: 0.15em;
-		}
-		input[type="checkbox"]::before {
-			content: "";
-			width: 0.55em;
-			height: 0.55em;
-			transform: scale(0);
-			transition: 120ms transform ease-in-out;
-			box-shadow: inset 1em 1em var(--color-primary);
-		}
-		input[type="checkbox"]:checked::before {
-			transform: scale(1);
-		}
-		input[type="checkbox"]:indeterminate::before {
-			height: 0.15em;
-		}
-
-		table {
-			overflow: hidden;
-			table-layout: fixed;
-			@apply border-collapse w-full overflow-hidden rounded;
-
-			tr {
-				@apply even:bg-primary/5;
-			}
-
-			td,
-			th {
-				@apply border-0 p-1 py-2;
-			}
-
-			th {
-				@apply bg-primary/15 text-left text-muted-foreground dark:text-primary-foreground;
-			}
-		}
-
-		.tiptap {
-			ul li p,
-			ol li p {
-				display: inline;
-			}
-
-			ul:not([data-type="taskList"]) {
-				list-style-type: disc;
-			}
-			ol {
-				list-style-type: decimal;
-			}
-
-			ul:not([data-type="taskList"]),
-			ol {
-				@apply list-inside marker:text-muted-foreground;
-			}
-
-			ul[data-type="taskList"] li {
-				@apply flex gap-2 items-center;
-			}
-
-			:first-child {
-				margin-top: 0;
-			}
-
-			table {
-				/* Override the global `body table { width: w-full }` base rule
-				   (see @layer base above) — it fights TipTap's resizable colgroup
-				   widths, which only get applied as an inline table width once
-				   every column has an explicit pixel width. Letting the table size
-				   itself (still table-layout: fixed) makes resizing and
-				   center/right alignment actually visible. */
-				width: auto;
-
-				.selectedCell {
-					@apply bg-primary/20;
-				}
-
-				.column-resize-handle {
-					background-color: var(--color-primary);
-					bottom: -2px;
-					pointer-events: none;
-					position: absolute;
-					right: -2px;
-					top: 0;
-					width: 4px;
-				}
-
-				&[data-table-caption]::before {
-					content: attr(data-table-caption);
-					display: block;
-					margin-bottom: 0.5rem;
-					@apply text-sm text-muted-foreground text-center;
-				}
-			}
-
-			.tableWrapper {
-				margin: 1.5rem 0;
-				overflow-x: auto;
-
-				&:has(table[data-table-align="center"]) {
-					width: fit-content;
-					margin-inline: auto;
-				}
-
-				&:has(table[data-table-align="right"]) {
-					width: fit-content;
-					margin-left: auto;
-					margin-right: 0;
-				}
-			}
-
-			&.resize-cursor {
-				cursor: col-resize;
-			}
-
-			.is-empty::before {
-				content: attr(data-placeholder);
-				float: left;
-				height: 0;
-				pointer-events: none;
-				@apply text-muted-foreground;
-			}
-
-			.has-focus {
-				@apply bg-accent/40 rounded;
-			}
-		}
-	}
-
-	.form-grid-layout {
-		@apply relative flex flex-col gap-2 @container;
-		[data-slot="form-fields"] {
-			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start overflow-auto;
-
-			[data-slot="separator"] {
-				@apply col-start-full;
-			}
-
-			[data-slot*="text-field"],
-			[data-slot*="autocomplete-field"][data-mode="single"],
-			[data-slot*="currency-form-field"],
-			[data-slot*="time-field"],
-			[data-slot*="image-field"],
-			[data-slot*="select-field"] {
-				@apply w-full;
-			}
-
-			[data-slot="switch-field"],
-			[data-slot="textarea-field"],
-			[data-slot="autocomplete-field"][data-mode="multiple"],
-			[data-slot="select-chip-field"],
-			[data-slot="file-picker-field"] {
-				@apply col-start-full @6xl:col-span-2;
-			}
-
-			[data-slot="files-form-field"],
-			[data-slot="rich-text-editor"] {
-				@apply col-start-full;
-			}
-		}
-		[data-slot="form-actions"] {
-			@apply flex w-full justify-end gap-2 bottom-2 p-4 max-sm:*:flex-1;
-		}
-	}
-
-	.form-grid-layout,
-	[data-slot="data-table"] {
-		@apply max-h-[calc(100lvh-184px)] md:max-h-[calc(100lvh-242px)] lg:max-h-[calc(100lvh-280px)];
-	}
-
-	[data-slot="table-wrapper"] {
-		@apply max-h-[calc(100vh-432px)] md:max-h-[calc(100vh-490px)] lg:max-h-[calc(100vh-528px)];
-	}
-}

package/dist/{translator-CLI_7Crg.js → translator-J3_vaV_A.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-Bxhsx4iB.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-UnInBB6T.js";
 import { t as i } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function a(e, t) {

package/dist/{use-heading-spy-VPuFj2Gt.js → use-heading-spy-_dk8kGwL.js}

@@ -1,34 +1,28 @@
-import { a as e } from "./i18n-provider-CaaZCmaR.js";
+import { a as e } from "./i18n-provider-BPK68eqM.js";
 import { c as t, d as n, f as r, l as i, n as a, u as o } from "./number.utils-Cy1z6qI7.js";
 import { computed as s, getCurrentInstance as c, onMounted as l, ref as u, toValue as d } from "vue";
 import { useIntersectionObserver as f, useMediaQuery as p, useSSRWidth as m, useStorage as h } from "@vueuse/core";
-//#region lib/composables/use-ssr-media-query.ts
-var g = 1024;
-function _(e) {
-	return c() ? p(e, { ssrWidth: m() ?? g }) : p(e);
-}
-//#endregion
-//#region lib/composables/use-mobile.ts
-var v = 768;
-function y() {
-	return _(`(max-width: ${v - 1}px)`);
-}
-//#endregion
 //#region lib/composables/resolve-theme.ts
-function b(e, t) {
+function g(e, t) {
 	let n = e === "light" || e === "dark" ? e : "system";
 	return {
 		theme: n === "system" ? t ? "dark" : "light" : n,
 		preference: n
 	};
 }
-function x(e) {
+function _(e) {
 	typeof document > "u" || (document.documentElement.classList.toggle("dark", e === "dark"), document.documentElement.style.colorScheme = e);
 }
 //#endregion
+//#region lib/composables/use-ssr-media-query.ts
+var v = 1024;
+function y(e) {
+	return c() ? p(e, { ssrWidth: m() ?? v }) : p(e);
+}
+//#endregion
 //#region lib/composables/use-theme.ts
-function S() {
-	let e = _("(prefers-color-scheme: dark)"), t = h("theme", null, void 0, { initOnMounted: !0 }), n = s(() => b(t.value, !!e.value));
+function b() {
+	let e = y("(prefers-color-scheme: dark)"), t = h("theme", null, void 0, { initOnMounted: !0 }), n = s(() => g(t.value, !!e.value));
 	return {
 		get theme() {
 			return n.value.theme;
@@ -37,11 +31,17 @@ function S() {
 			return n.value.preference;
 		},
 		updateTheme: (n) => {
-			n === "system" ? t.value = null : t.value = n, x(b(n === "system" ? void 0 : n, !!e.value).theme);
+			n === "system" ? t.value = null : t.value = n, _(g(n === "system" ? void 0 : n, !!e.value).theme);
 		}
 	};
 }
 //#endregion
+//#region lib/composables/use-mobile.ts
+var x = 768;
+function S() {
+	return y(`(max-width: ${x - 1}px)`);
+}
+//#endregion
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js
 var C = {
 	lessThanXSeconds: {
@@ -477,4 +477,4 @@ function z(e, t, n) {
 	});
 }
 //#endregion
-export { b as a, x as i, I as n, y as o, S as r, _ as s, z as t };
+export { y as a, b as i, I as n, _ as o, S as r, g as s, z as t };

package/dist/use-inert-others-CtGqZKR8.js

@@ -0,0 +1,22 @@
+import { nextTick as e, useTemplateRef as t, watch as n } from "vue";
+import { unrefElement as r } from "@vueuse/core";
+import { inertOthers as i } from "@nxgt/material-core/inert-others";
+//#region lib/components/ui/overlays/dialog/use-inert-others.ts
+function a(a, o) {
+	let s = typeof a == "string" ? t(a) : a;
+	n(o, (t, n, a) => {
+		if (!t || typeof document > "u") return;
+		let o, c = !1;
+		e(() => {
+			let e = r(s);
+			!c && e instanceof Element && (o = i(e));
+		}), a(() => {
+			c = !0, o?.();
+		});
+	}, {
+		immediate: !0,
+		flush: "post"
+	});
+}
+//#endregion
+export { a as t };

package/dist/{use-material-translation-CONqD9wJ.js → use-material-translation-Do6ztdtV.js}

@@ -1,6 +1,6 @@
-import "./stored-language-Bxhsx4iB.js";
-import { a as e } from "./i18n-provider-CaaZCmaR.js";
-import { i as t, r as n } from "./translator-CLI_7Crg.js";
+import "./stored-language-UnInBB6T.js";
+import { a as e } from "./i18n-provider-BPK68eqM.js";
+import { i as t, r as n } from "./translator-J3_vaV_A.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/docs/components/buttons-and-actions.md

@@ -54,17 +54,71 @@ function save() {
 | `variant` | `'filled' \| 'tonal' \| 'outlined' \| 'ghost' \| 'link'` | `'filled'` | the style |
 | `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'default'` | `'primary'` | the colour; `default` is the foreground colour |
 | `size` | `'default' \| 'xs' \| 'sm' \| 'lg' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'` | — (36 px) | height; the `icon*` sizes are square |
-| `loading` | `boolean` | — | shows a spinner, sets `aria-busy` and disables the button |
+| `loading` | `boolean` | — | busy: a spinner, `aria-busy="true"` and `aria-disabled="true"`, and every click cancelled before your `@click` — a submit button submits neither on a click nor on Enter in a field. It stays focusable (no native `disabled`), so focus is not lost |
+| `lock-on-click` | `boolean` | — | a click makes the button busy at once, until `loading` has turned true and back (or for one second when it never does): for a `loading` that turns true only after an `await` |
 | `spinner-variant` | `SpinnerProps['variant']` | `'2'` | which spinner `loading` shows |
+| `wrap` | `boolean` | — | the label breaks onto as many lines as it needs, centred, instead of being cut with “…”: the button grows taller, never shorter than its `size`. Ignored by the `icon*` sizes |
 | `tooltip` | `string` | — | wraps the button in a `Tooltip` |
-| `as-child` / `as` | `boolean` / tag or component | `false` / `'button'` | styles its only child, or renders another element |
+| `as-child` / `as` | `boolean` / tag or component | `false` / `'button'` | styles its only child, or renders another element. With `as-child` the child keeps its own attributes (`class`, `style` and listeners merge) and its slot content; while `loading`, the spinner goes inside the child, `aria-busy` and `aria-disabled` land on it, and the child stays the same element, keeping its focus, ref and directives. A component child with no slot content shows only the spinner while busy |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | not `submit` by default — pass it inside a form |
 
-Unlike React, `loading` disables the button (it is not focusable while
-loading). The classes are exported as `buttonVariants` for styling your own
-element.
+The classes are exported as `buttonVariants` for styling your own element.
 
-**Storybook:** `Buttons & actions/Button` · **React:** `Button`
+**On a phone.** A button is never wider than its container, and keeps its
+content's width in a column: a label too
+long for it (a card on a phone) is cut with “…” on one line, and its
+accessible name — and a `title` you give it — keep the whole text. Give a
+label that must be read in full `wrap`, or a width of your own (`w-full`).
+The text is put in a `<span data-slot="button-label">` (one per run of
+text) that shrinks and ends in the ellipsis; it needs the text to be the button's own slot content; with
+`as-child`, put the label in a `<span>` inside the child element.
+
+```vue
+<template>
+  <Button title="Continue to the payment details">Continue to the payment details</Button>
+  <Button wrap>Continue to the payment details and confirm the order</Button>
+</template>
+```
+
+**Submitting once.** Give a submit button `:loading="isSubmitting"` from
+`useForm`: vee-validate sets it as `handleSubmit` starts, so the button is
+busy from the first click and a double click, or Enter pressed twice,
+submits once. When `loading` comes from something that turns true later — a
+mutation's pending flag after an `await` — the second click comes first: add
+`lock-on-click`.
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate';
+import { Button, EmailFormField } from '@nxgt/material-vue/components';
+
+const { handleSubmit, isSubmitting } = useForm();
+const onSubmit = handleSubmit(async (values) => {
+  // …
+});
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <EmailFormField name="email" label="Email" />
+    <Button type="submit" :loading="isSubmitting">Sign in</Button>
+  </form>
+</template>
+```
+
+**What the guard covers.** Clicks on this button, Space and Enter on it,
+and Enter in a field when it is the form's first submit button (the default
+one, which the browser clicks). `form.requestSubmit()` and `form.submit()`
+fire no click, so a submit your code starts — an OTP step that submits on its
+last digit, a keyboard shortcut — must check `isSubmitting` itself.
+With `lock-on-click`, a `loading` that never turns true releases the lock after
+one second.
+
+A test finds a busy button by its state, not by `disabled`:
+`expect(button).toHaveAttribute('aria-busy', 'true')` (`toBeDisabled()` is
+false: it is still focusable).
+
+**Storybook:** `Buttons & actions/Button` (`Submits Once`, `Lock On Click`), `Buttons & actions/Button/Phone` · **React:** `Button`
 
 ---
 
@@ -204,7 +258,7 @@ function save(options?: { draft: boolean }) {
 | --- | --- | --- | --- |
 | `#menu` slot | — | — | the `DropdownMenu*` items shown by the chevron |
 | `menu-label` | `string` | `"More actions"` (translated) | the chevron's `aria-label` |
-| `variant`, `color`, `loading`, `disabled` | as `Button` | as `Button` | applied to both halves; `loading` also disables the chevron |
+| `variant`, `color`, `loading`, `disabled` | as `Button` | as `Button` | `variant`, `color` and `disabled` apply to both halves; `loading` makes the main half busy (spinner, clicks ignored, still focusable) and disables the chevron (native `disabled`) |
 
 Other `Button` props and `@click` go to the main half.
 
@@ -216,7 +270,7 @@ Other `Button` props and `@click` go to the main half.
 
 ![ResponsiveButton](../previews/buttons-actions-responsivebutton.webp)
 
-Shows its label on desktop and collapses to icon-only on mobile.
+Shows its label from 768 px up and collapses to icon-only below. The collapse is a CSS media query, not a JS effect, so the server HTML is the same everywhere and nothing flashes.
 
 ```vue
 <script setup lang="ts">
@@ -235,10 +289,10 @@ import { Plus } from '@lucide/vue';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `#icon` slot | — | — | always shown |
-| `expanded` | `boolean` | not mobile (`useIsMobile`) | forces the label on or off |
+| `expanded` | `boolean` | by width (`max-md` CSS) | forces the label on or off at every width |
 
-Every `Button` prop applies. Collapsed, the label stays in the button as
-screen-reader text, so it keeps its accessible name; an `aria-label` would
+Every `Button` prop applies. The label is always in the DOM, so the accessible
+name is the same at every width; collapsed, it is screen-reader text; an `aria-label` would
 replace that name, so pass one only when it should differ from the label.
 `expanded` is layout, not disclosure: the button has no `aria-expanded` of its
 own, so it is not announced as "collapsed". Used as a popover, drawer or menu
@@ -297,7 +351,7 @@ Needs `vue-router` installed on the app (`app.use(router)`).
 
 ![CopyButton](../previews/buttons-actions-copybutton.webp)
 
-Copies a value to the clipboard and briefly shows a check mark.
+Copies a value to the clipboard and briefly shows a check mark (or a cross when the clipboard refuses).
 
 ```vue
 <script setup lang="ts">
@@ -315,11 +369,12 @@ import { CopyButton } from '@nxgt/material-vue/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `value` | `string \| (() => string)` | — (required) | what is copied; a function is read at click time |
-| `label` / `copied-label` | `string` | `"Copy"` / `"Copied"` (translated) | tooltip and `aria-label`, before and after |
+| `label` | `string` | `"Copy"` (translated) | the button's accessible name; it never changes after a click |
+| `copied-label` / `failed-label` | `string` | `"Copied"` / `"Copy failed"` (translated) | announced in the status region (and shown in the tooltip) once the write succeeded or failed |
 | `#icon` slot | — | a copy icon | replaces the idle icon |
 | `variant`, `color` | as `IconButton` | `'ghost'`, `'default'` | the button style |
 
-The check mark stays for 1.5 s. `copyToClipboard(text)` is the same copy
+The write is awaited: "Copied" appears only once the clipboard accepted the text, and a refusal (no permission, an insecure page, no Clipboard API) shows "Copy failed" instead. The outcome is announced through a visually hidden `role="status"` (polite) region rendered next to the button, not by renaming the button: `getByRole('button', { name: 'Copy' })` keeps matching, and a test reads the outcome with `within(button.parentElement!).getByRole('status')` (a bare `getByRole('status')` is ambiguous: every `CopyButton` renders a `status` region, and so do `Banner`, `DataTable` and the skeletons). Its one root is a `span` with `display: contents` (no box) around the button and the status region, so `v-show`, `Transition` and `$el` work, and a class still goes to the button. The result stays for 1.5 s. `copyToClipboard(text)` is the same copy
 without a button.
 
 `CopyValue` shows the value in a monospace chip with the button beside it:
@@ -399,7 +454,7 @@ const emit = defineEmits<{ next: [] }>();
 | `label` | `string` | `"Load more"` (translated) | tooltip, `aria-label` and expanded label |
 | `#icon` slot | — | a rotate icon | replaces it |
 | `variant` | as `Button` | `'tonal'` | the style |
-| `loading` | `boolean` | — | spinner, button disabled |
+| `loading` | `boolean` | — | spinner, clicks ignored |
 
 Icon-only by default because it sits in a pagination bar next to other icon
 buttons.
@@ -522,7 +577,7 @@ on load.
 
 ![LanguageSwitcher](../previews/buttons-actions-languageswitcher.webp)
 
-Globe button with a menu of the `I18nProvider` languages.
+Globe button with a menu of the `I18nProvider` languages. Its menu is non-modal (see [DropdownMenu](overlays-and-menus.md#dropdownmenu)).
 
 ```vue
 <script setup lang="ts">