@nxgt/material-vue 0.38.0 → 0.40.0

package/docs/guides/forms.md

@@ -293,6 +293,55 @@ in `[data-slot="form-actions"]`) and put each group of fields in a
   fields still take a row of their own. A rule separates each section from the
   one before it (`:separated="false"` drops it).
 
+### One scroll, sticky actions
+
+The form grid has no height of its own and its fields no scroll box: a long
+form grows with the page, and the page is the one scroll. The actions
+(`[data-slot="form-actions"]`) are sticky at the bottom of whatever scrolls
+the form, on a translucent, blurred background, so Cancel and Save stay in
+reach while the fields scroll under them; a form shorter than the screen
+shows them right under its fields.
+
+- In a `DialogContent` or a `SheetContent`, which are capped to the screen
+  and scroll themselves, the actions stick to the dialog's or the sheet's
+  bottom. A `DrawerContent` does not scroll: a form that is its direct child
+  is the scroll box there.
+- In an `AlertDialogContent` (the rich text editor's edit dialogs use one),
+  the actions stick to its bottom the same way, over its padding.
+- `ConfirmationDialog` holds a form when you pass it `form-options` (a schema and its `defaultValues`) and the `#form` slot: it renders the
+  fields in a `.form-grid-layout` with no `form-actions`, so its footer
+  (Cancel, Confirm) is what sticks to the dialog's bottom. Any `Dialog` or
+  `AlertDialog` whose content holds a `.form-grid-layout` without
+  `form-actions` gets the same sticky footer.
+- A focused control or link is scrolled into view clear of the actions and
+  a line of helper text below it (`scroll-margin-bottom` on the fields'
+  controls: 6rem, plus a dialog's bottom padding, 7.5rem above a
+  `ConfirmationDialog`'s stacked footer), so a field you tab to is never
+  hidden behind them (WCAG 2.4.11). It is set on the controls, so it holds
+  in a scroll box of your own too.
+- Taller actions (a third button, labels that wrap) or helper text on
+  several lines need more room: raise `--form-actions-clearance` on the
+  form. A dialog whose bottom padding is not the default 1.5rem (`p-0` and
+  `p-4` are recognised) sets `--form-actions-fill` to it:
+
+  ```css
+  .edit-school-form {
+    --form-actions-clearance: 9rem;
+  }
+  .edit-school-dialog {
+    --form-actions-fill: 2rem; /* its pb-8 */
+  }
+  ```
+
+  ```vue
+  <form class="form-grid-layout edit-school-form">
+  ```
+- To scroll a form in a box of your own, give it a height and the scroll
+  (`class="form-grid-layout max-h-[60vh] overflow-y-auto"`); to keep the
+  actions in place, give them `class="static"`. The
+  [troubleshooting entry](../troubleshooting.md#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
+  has the details.
+
 ## Validation messages
 
 `zodLocaleError()` from `@nxgt/material-vue/lib` is a Zod v4 error map that
@@ -902,10 +951,12 @@ const onSubmit = handleSubmit(() => {
 
 - `meta.valid` keeps the button disabled until the schema passes; the form
   runs a silent validation when it mounts, so it starts disabled.
-- `ConfirmationDialog` has no form of its own in `@nxgt/material-vue`: it
-  renders its default slot above Cancel / Confirm and emits `confirm`, then
-  closes. Use it for a plain confirmation, and the pattern above when the
-  user has to type something.
+- `ConfirmationDialog` renders its default slot above Cancel / Confirm and
+  emits `confirm`, then closes. For a small form (a name to type before a
+  delete), pass `form-options` (a schema and its `defaultValues`) and render
+  the fields in its `#form` slot: Confirm stays disabled until the form is
+  valid, and `@confirm` receives the schema's output. Use the pattern above
+  for a larger form with its own submit.
 - `ConfirmDialog` (controlled: `open` is required) awaits its `@confirm`
   handler: while the promise is pending both buttons are disabled and the
   confirm button reads "Processing..." (`material.confirm-dialog.processing`);

package/docs/guides/i18n.md

@@ -281,7 +281,8 @@ checkboxes, the filter's presets and `Min`/`Max` fields, the `variant="4"` spinn
 `DialogFooter`. `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
 "Copy failed"). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
-(`material.table.labels.toggle-row`), its loading status, "Loading data…" /
+(`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
+(`material.table.labels.expand`), its loading status, "Loading data…" /
 "Chargement des données…" (`material.table.loading`), its scroll region,
 "Scrollable table" / "Tableau défilant"
 (`material.table.labels.scroll-region`, or the `scroll-label` prop), a `Chip`'s remove button, which the
@@ -291,7 +292,7 @@ the `LocationPreview` trigger (`material.map.preview` / `preview-named`),
 (`material['duration-field']['hours-label']` / `minutes-label`), and
 the delete button of the deprecated `ContactItem` / `OpeningHoursItem`
 (`material.contacts.buttons.remove`,
-`material['opening-hours'].buttons.remove`). When the form of a
+`material['opening-hours'].buttons.remove`). `FacetGroup`'s toggle is named "Level, 2 selected" / "Level, 2 sélectionnés" (`material.facet-group.name`, an ICU plural over `{title}` and `{count}`) and its Clear button "Clear Level" / "Effacer Level" (`material.facet-group.clear-label`, with the visible `material.facet-group.clear`). When the form of a
 `ConfirmationDialog` with `form-options` cannot be loaded, it says so in the
 form's place: "The form could not be loaded." / "Le formulaire n’a pas pu être
 chargé." (`material.confirm-dialog.form-failed`). The keys and the French are the

package/docs/guides/ssr.md

@@ -179,6 +179,14 @@ function clientOnly<P extends object>(component: Component<P>): Component<P>;
   `@nxgt/material-vue/composables` is a `Ref<boolean>` that is `false` on the
   server and the first render, then `true`.
 
+## Hidden form inputs
+
+`Checkbox`, `Switch`, `RadioGroup` and `Select` create their hidden form input
+after mount, never in the server HTML (Reka put an inline `style` on it, which a
+strict CSP blocks). Before hydration a native form post therefore carries none
+of these four controls' values; submit through the client, or wait for
+hydration. See [csp.md](csp.md#the-hidden-form-inputs).
+
 ## Hydration
 
 **Never name an SVG with `<svg><title>`.** Some SSR setups treat `<title>` as

package/docs/guides/theming.md

@@ -134,7 +134,7 @@ import { Button } from '@nxgt/material-vue/components';
 
 **Contrast.** The shipped light palette keeps the text of every filled status
 colour at 4.5:1 or more (WCAG 1.4.3): `--secondary` 5.7:1, `--success` 5.6:1,
-`--info` 5.8:1 and `--warning` 5.3:1 against their `-foreground`, and
+`--info` 5.8:1 and `--warning` 5.5:1 against their `-foreground`, and
 `--secondary` as text (a `tonal`, `outlined` or `link` `Button`) 6.0:1 on
 `--background`, 4.8:1 on its own 15 % `tonal` tint.
 
@@ -144,8 +144,8 @@ and 5.8:1 on `--card` (a `tonal` secondary `Button` 5.4:1 and 4.6:1). Under
 near-white text those brights are too light, so every filled surface built on
 them is tinted in the dark theme: a filled `secondary` `Button`, `IconButton`
 or `Badge` at 70 % (5.2:1 on `--background`, 4.9:1 on `--card`), a filled
-`success`, `info` or `warning` one at 60 % (7.3:1, 5.7:1 and 7.5:1 on
-`--background`; 6.7:1, 5.3:1 and 7.0:1 on `--card`). Their hover, focus and
+`success`, `info` or `warning` one at 60 % (7.3:1, 5.7:1 and 6.0:1 on
+`--background`; 6.7:1, 5.3:1 and 5.6:1 on `--card`; the `warning` `Button` 6.5:1). Their hover, focus and
 pressed states are tinted further down, so they only gain contrast.
 
 In the light theme the filled `primary`, `secondary`, `success`, `info`,
@@ -161,9 +161,9 @@ their text and icon in one tone per colour, read on `--background`, on
 `--card` and on the variant's own tint (15 % at most, at rest or focused). In
 the light theme `primary`, `secondary`, `info` and `success` use the token
 itself (5.8, 4.8, 4.9 and 4.7:1 at their lowest) and `warning` and `error` the
-token mixed with 15 % black (6.0 and 5.4:1). In the dark theme `primary` is
+token mixed with 15 % black (6.4 and 5.4:1). In the dark theme `primary` is
 mixed with 60 % white (8.1:1 on `--card`: the token itself is a dark indigo,
-2.2:1), `success` and `warning` with 15 % white (5.0 and 5.4:1), `error` with
+2.2:1), `success` and `warning` with 15 % white (5.0 and 6.3:1), `error` with
 30 % white (5.9:1), and `secondary` and `info` use the token (4.6 and 5.3:1).
 The tones are mixed from the tokens (`color-mix(in oklab, var(--color-error)
 85%, black)`), so an override of a token moves its tone with it; a text colour
@@ -179,6 +179,29 @@ darker than the dark theme's: a filled `error` button's near-white text reaches
 4.8:1 (it was 4.6:1). The dark `--error` keeps `0.577`: a lighter value drops
 the filled surface's near-white text below 4.5:1 (`0.62` gives 3.85:1).
 
+**`--warning` is amber**, a hue apart from `--error` (62 against 27 degrees in
+the light theme, 70 in the dark one), so a warning `Alert`, `Banner`, `Badge`
+or toast does not read as a failure. Light `oklch(0.52 0.13 62)` is 5.5:1
+under its near-white `-foreground`; dark `oklch(0.7 0.15 70)` reads as text at
+7.3:1 on `--background` and 6.5:1 on `--card` (6.6 and 5.8:1 on its 10 % tint). An app that overrides `--warning` keeps its own
+value; one that keeps the shipped value sees its `bg-warning` and
+`text-warning` surfaces change hue, and re-checks its custom pairs.
+
+**A selected `DataTable` row** (`TableRow`, `data-state="selected"`) is a 15 %
+primary tint with `foreground` text, a bar on the inline-start edge of its
+first cell (`before:`, primary in the light theme, primary mixed with 60 %
+white in the dark one: 5.9:1 in light and 8.2:1 or more in dark against the
+row), and the checkbox, drawn in the same dark colour (8.2:1 or more). The
+tint is too light to be told from its neighbour alone (1.2:1 in light, 1.06 to
+1.11:1 in dark), which is what keeps the text at 4.5:1 or more on a page and on
+a `Card`: 15.9:1 in light, and in dark 17.5:1 on a page, 17.1:1 in a `DataTable`
+on a `Card` and 15.4:1 for a bare `TableRow` on a `Card`. Links and
+`text-muted-foreground` texts (drawn as `foreground` at 70 %) are 7.0:1 in
+light and 8.15:1 in dark for a bare row on a `Card`. A `text-error-text` text
+keeps its colour. Do not
+put `text-primary-foreground` in a cell for a selected row: it is near-white
+on that tint.
+
 **Error text has a token of its own**, `--error-text` (`text-error-text`), so
 the fill can stay dark while the text is light enough to read. The light value
 is `color-mix(in oklab, var(--error) 94%, black)` (5.7:1 on `--background`
@@ -212,7 +235,7 @@ the surfaces' text, the error text (`HelperText` and a field's message on
 `--background` and `--card`), the `Alert`s and the `Timeline`, `Button` and
 `IconButton` in every variant and colour, and a `Badge` link in every colour,
 at rest, hovered, focused and pressed, the tracks and the tabs;
-`Data display/ListTile` measures the selected tile. Run them against your own
+`Data display/ListTile` measures the selected tile, `Data table, filter & lists/DataTable/On a card` the header, the cells, the links and the selected rows on a page and on a `Card` (also right-to-left), and `Feedback & status/Alert/Tones contrast` the warning, error and success alerts there. Run them against your own
 tokens after an override.
 
 **Tabs.** An `underline` tab's active label is `--primary` in the light

package/docs/roadmap.md

@@ -90,9 +90,14 @@ version they shipped in, and planned entries may name the major they target.
   Vue only: `@nxgt/material`'s print blocks already produce a PDF.
 - **`StepperIndicator`, as in `@nxgt/material`** — the step markers on their
   own, for a stepper laid out your way.
+- **Facets panel: `Filter variant="facets"`** — collapsible FacetGroups sharing the filter bar's state, a sheet on a phone
 
 ## Later
 
+- **A CSP without `style-src-attr 'unsafe-inline'`** — the four form controls'
+  hidden inputs no longer need it; the checked `Checkbox` indicator,
+  `SelectValue`, the `RadioGroup` root, `Slider` and popper positioning still
+  do. Inventory: softistx/nxgt-material#596.
 - **Next major: an error `Banner` interrupts** — `tone="error"` becomes
   `role="alert"` `aria-live="assertive"`, so a screen reader reads it out at
   once. Every tone is `role="status"` `aria-live="polite"` today; pass

package/docs/troubleshooting.md

@@ -27,6 +27,7 @@ words in your error.
 - [A Content-Security-Policy reports a `data:` image on every form with a required field](#a-content-security-policy-reports-a-data-image-on-every-form-with-a-required-field)
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
+- [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
 - [`JsBarcode is not a function`](#jsbarcode-is-not-a-function)
 - [A `LinkButton` selected as a `button` stops matching](#a-linkbutton-selected-as-a-button-stops-matching)
 - [A `Toc`, `Pager`, `SeeAlso` or `ScrollProgress` inside `Doc` selected by `data-slot` stops matching](#a-toc-pager-seealso-or-scrollprogress-inside-doc-selected-by-data-slot-stops-matching)
@@ -1284,6 +1285,32 @@ with `class="max-h-none overflow-visible"`; to change the cap, pass your own
 For a dialog that should grow taller than the screen and scroll inside the
 overlay instead of capping, use `DialogScrollContent`.
 
+### A form's fields no longer scroll in their own box after upgrading
+
+**When:** after upgrading, a `.form-grid-layout` form grows with the page
+instead of scrolling its fields in a box of its own, Cancel and Save stay at
+the bottom of the screen, or a form inside a box you gave a fixed height
+overflows it.
+**Why:** the form grid used to cap its height
+(`max-h-[calc(100lvh-184px)]`, more from `md`) and scroll
+`[data-slot="form-fields"]` inside it, so a page had two scrolls, one inside
+the other. It now has no cap and no scroll of its own: the page, or the
+`DialogContent` / `SheetContent` around it, is the one scroll, and
+`[data-slot="form-actions"]` is sticky at its bottom on a blurred background.
+A `Drawer`'s content does not scroll, so a form that is a direct child of
+`DrawerContent` is the scroll box there.
+**Fix:** to scroll a form inside a box again, give the box (or the form) a
+height and the scroll; the actions then stick to its bottom. To keep the
+actions where they are, make them static:
+
+```vue
+<form class="form-grid-layout max-h-[60vh] overflow-y-auto">
+<div data-slot="form-actions" class="static">
+```
+
+An app's own fixed bottom bar or floating action button now sits under the
+sticky actions (`z-index: 10`): give it a z-index above 10 (`class="z-20"`).
+
 ## Feedback
 
 ### A toast with an action never goes away
@@ -1318,12 +1345,12 @@ no `position`; it still covers the bottom when the app mounts vue-sonner's own
 `position`, which applies on every screen.
 **Fix:** mount the `Toaster` from `@nxgt/material-vue/components`, and drop a
 bottom `position` unless the bottom is what you want on phones too. When a
-sticky header must stay visible above the toasts, raise the phone offset's
-`top`:
+sticky header is taller than the app shell's (72px with its margin), raise the
+phone offset's `top` (80 by default, so toasts start below that bar):
 
 ```vue
 <Toaster />                          <!-- top-center on a phone -->
-<Toaster :mobile-offset="{ top: 72 }" />
+<Toaster :mobile-offset="{ top: 96 }" />
 <Toaster position="bottom-center" /> <!-- bottom-center on every screen -->
 ```
 
@@ -3306,8 +3333,8 @@ while a `Switch`, `SwitchField` or `SwitchFormField` with `required` and a
 proceed".
 **Why:** `required` used to draw only the label's asterisk. It now reaches the
 switch, which is announced as required (`aria-required`), and its hidden input
-is `required`, so the browser's native validation blocks the submit, as for a
-required checkbox.
+is `required`, so once hydrated the browser's native validation blocks the
+submit, as for a required checkbox.
 **Fix:** leave `required` on a switch that must be on (an agreement); drop it
 from one that may stay off. A form that validates itself (vee-validate) can
 turn native validation off with `novalidate`:

package/lib/components/base-content.css

@@ -97,7 +97,7 @@
 	.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;
+			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start;
 
 			[data-slot="separator"] {
 				@apply col-start-full;
@@ -125,13 +125,73 @@
 				@apply col-start-full;
 			}
 		}
+		/* A focused control scrolls into view clear of the actions and a line
+		   of helper text, in any scroll box (WCAG 2.4.11 Focus Not Obscured). */
+		[data-slot="form-fields"]
+			:is(
+				input,
+				textarea,
+				select,
+				button,
+				a[href],
+				summary,
+				[tabindex],
+				[contenteditable]
+			) {
+			scroll-margin-bottom: calc(
+				var(--form-actions-clearance, 6rem) +
+				var(--form-actions-fill, 0px)
+			);
+		}
+		/* Sticky at the bottom of whatever scrolls the form: in reach. */
 		[data-slot="form-actions"] {
-			@apply flex w-full justify-end gap-2 bottom-2 p-4 max-sm:*:flex-1;
+			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 backdrop-blur-sm max-sm:*:flex-1;
 		}
 	}
 
-	.form-grid-layout {
-		@apply max-h-[calc(100lvh-184px)] md:max-h-[calc(100lvh-242px)] lg:max-h-[calc(100lvh-280px)];
+	/* No height cap and no scroll of its own: the page (or the overlay) is
+	   the one scroll. A Drawer's content does not scroll: the form does. */
+	[data-slot="drawer-content"] > .form-grid-layout {
+		@apply min-h-0 overflow-y-auto;
+	}
+
+	/* In a dialog, the stuck actions sit above its bottom padding
+	   (`--form-actions-fill`: p-6 by default; set it for another one). */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+		--form-actions-fill: 1.5rem;
+		&:is(.p-0, .py-0, .pb-0) {
+			--form-actions-fill: 0px;
+		}
+		&:is(.p-4, .py-4, .pb-4) {
+			--form-actions-fill: 1rem;
+		}
+	}
+
+	/* ConfirmationDialog's form has no actions of its own: the dialog's
+	   footer (two stacked buttons on a phone) sticks instead. */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
+		.form-grid-layout
+	):not(:has([data-slot="form-actions"])) {
+		--form-actions-clearance: 7.5rem;
+		> :is([data-slot="dialog-footer"], [data-slot="alert-dialog-footer"]) {
+			@apply sticky bottom-0 z-10 bg-background/90 backdrop-blur-sm;
+		}
+	}
+
+	/* A sticky element stops at the scroll box's padding: in a dialog, an
+	   `::after` as tall as that padding fills the strip below the stuck
+	   actions, so no field shows there, and adds no overflow. */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])
+		.form-grid-layout
+		> [data-slot="form-actions"]::after,
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
+			.form-grid-layout
+		):not(:has([data-slot="form-actions"]))
+		> :is(
+			[data-slot="dialog-footer"],
+			[data-slot="alert-dialog-footer"]
+		)::after {
+		@apply absolute inset-x-0 top-full h-(--form-actions-fill) bg-background content-[""];
 	}
 
 	/* No height cap on `DataTable` here (it nested a scroll in the page's):

package/lib/components/theme-tokens.css

@@ -38,7 +38,9 @@
 	--success-foreground: oklch(0.984 0.003 247.858);
 	--info: oklch(0.5 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.54 0.222 41.116);
+	/* Amber, a hue apart from --error (27): a warning must not read as a
+	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
+	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: var(--error);
 	--border: oklch(0.929 0.013 255.508);
@@ -94,7 +96,10 @@
 	--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);
+	/* Amber too, as text: 7.3:1 on --background and 6.5:1 on --card, 6.6:1 and
+	   5.8:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   6.0:1 on a page and 5.6:1 on a Card. */
+	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);

package/lib/nuxt/component-names.ts

@@ -241,6 +241,7 @@ export const COMPONENT_NAMES = [
 	'EventCard',
 	'EventChip',
 	'ExtendedLabel',
+	'FacetGroup',
 	'FeatureCard',
 	'Field',
 	'Figure',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.38.0",
+	"version": "0.40.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.11.0",
+		"@nxgt/material-core": "^0.11.1",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",

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

@@ -1,22 +0,0 @@
-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 };