@nxgt/material-vue 0.37.1 → 0.39.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
@@ -619,6 +668,40 @@ const onSubmit = handleSubmit((values) => emit('save', values));
   `{ [attribute.name]: value }` to its `name`. Its starting values come from
   its `default-values` prop, not from the form.
 
+### Rows a user adds and removes
+
+When the rows are fields of their own — a school year's periods, each with a
+name, a start date and an end date — use
+[`RepeatableGroupFormField`](../components/form-fields.md#repeatablegroup)
+over vee-validate's `useFieldArray`, and render each row's fields with the
+form's own wrappers in its `row` slot:
+
+```vue
+<RepeatableGroupFormField
+  name="periods"
+  label="Periods"
+  row-label="period"
+  :max="6"
+  reorderable
+  :new-row="() => ({ name: '' })"
+>
+  <template #row="{ path }">
+    <TextFormField :name="`${path}.name`" label="Name" />
+    <DateFormField :name="`${path}.start`" label="Start date" />
+  </template>
+</RepeatableGroupFormField>
+```
+
+- A row's field shows its own error (`periods[1].name`); the array's own
+  error (`.min(2)` on the array) shows under the rows and describes the group.
+- The slot's `path` is `periods[1]`, not `name`: a slot's `name` attribute is
+  the slot's own.
+- The group moves the focus as rows come and go (an added row's first field,
+  a removed row's neighbour or Add, a moved row's move button) and announces each change politely
+  ("Added period 3"), after its own buttons only: a row your
+  own code pushes leaves the focus where it is
+  ([what to do](../troubleshooting.md#the-focus-does-not-move-to-a-new-row-of-a-repeatablegroupformfield)).
+
 ## Config-driven forms
 
 `Field` renders the field that matches a config `type`, which is useful when
@@ -868,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

package/docs/roadmap.md

@@ -162,6 +162,13 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Rows a user adds, removes and reorders** — `RepeatableGroup` and
+  `RepeatableGroupFormField` over the form library's field array: rows from
+  the `row` slot, a list for assistive tech, Remove and move buttons named after
+  the row ("Remove period 2"), `max` and `min`, an empty state, focus that
+  follows each change, polite announcements, and the array's own error under
+  the rows. One column on a phone. 0.38.0.
+
 - **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
   sign-in page (one `main`, the card's title its `h1`, a status or alert
   notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,

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)
@@ -51,6 +52,7 @@ words in your error.
 - [The app shell's page scrolls instead of its content, or a full-height screen collapses](#the-app-shells-page-scrolls-instead-of-its-content-or-a-full-height-screen-collapses)
 - [A test finds a new heading or a second `main`, or no longer finds a title in a `div`](#a-test-finds-a-new-heading-or-a-second-main-or-no-longer-finds-a-title-in-a-div)
 - [`[data-test="typogaphy"]` finds nothing](#data-testtypogaphy-finds-nothing)
+- [Long text in `Typography` no longer scrolls](#long-text-in-typography-no-longer-scrolls)
 - [A `class` on `ActivityLayout` now styles the whole shell](#a-class-on-activitylayout-now-styles-the-whole-shell)
 - [A test no longer finds a calendar day by its number](#a-test-no-longer-finds-a-calendar-day-by-its-number)
 - [A `QRCode`'s `aria-label` is no longer on its wrapper](#a-qrcodes-aria-label-is-no-longer-on-its-wrapper)
@@ -97,6 +99,7 @@ words in your error.
 - [A failed submit does not focus the first invalid field](#a-failed-submit-does-not-focus-the-first-invalid-field)
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
 - [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
+- [The focus does not move to a new row of a `RepeatableGroupFormField`](#the-focus-does-not-move-to-a-new-row-of-a-repeatablegroupformfield)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
 - [The form could not be loaded.](#the-form-could-not-be-loaded)
 
@@ -836,6 +839,26 @@ with its own `<main>` passes `content-as="div"`.
 **Fix:** select `[data-test="typography"]` — or better, the text or the role
 the user sees.
 
+### Long text in `Typography` no longer scrolls
+
+**When:** after upgrading, a `Typography` with a fixed height or width used to
+scroll its overflowing text; it now overflows its box (or `truncate` and
+`line-clamp-*` are the only things that clip it).
+**Why:** `Typography` always carried `overflow-auto`, which made every block
+`Typography` a scroll region: Firefox counted a subpixel overflow, and axe
+reported `scrollable-region-focusable`. It sets no `overflow` now, so it is no
+longer a block formatting context (its margins can collapse with its
+neighbours'), and a text flex or grid item no longer has the zero minimum width a scroll container has.
+**Fix:** where you want scrolling, wrap the text in an element that owns it,
+focusable and named so keyboard users can scroll it; where you want a flex
+item to shrink, give it `min-w-0`:
+
+```vue
+<div class="max-h-40 overflow-auto" tabindex="0" aria-label="Release notes">
+  <Typography>{{ longText }}</Typography>
+</div>
+```
+
 ### A `class` on `ActivityLayout` now styles the whole shell
 
 **When:** after upgrading, the classes passed to `<ActivityLayout class="…">`
@@ -1262,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
@@ -1974,6 +2023,27 @@ yourself.
 field.value?.$el.querySelector<HTMLElement>('[aria-pressed="true"], button')?.focus();
 ```
 
+### The focus does not move to a new row of a `RepeatableGroupFormField`
+
+**When:** a row is added to a `RepeatableGroupFormField` by your own code (a
+second "Add" button, a "Duplicate" action) through vee-validate's
+`useFieldArray` `push`, `prepend` or `insert` on the same `name`, and the focus
+stays where it was, with nothing announced.
+**Why:** the group moves the focus and announces the change only after its
+own buttons (the new row's first field, a removed row's neighbour, a move
+button). A row added from outside is a value change it renders, not an action
+it took.
+**Fix:** let the group's Add button add rows (`new-row` is what it pushes).
+When your own code must add one, move the focus yourself once the row has
+rendered:
+
+```ts
+const { push } = useFieldArray('periods');
+push({ name: '' });
+await nextTick();
+document.querySelector<HTMLElement>('[data-slot="repeatable-group-row"]:last-child input')?.focus();
+```
+
 ### A multi-step form reopens at a later step
 
 **When:** a wizard built on `defineStepFormStore` opens at the step (and with

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/base.css

@@ -55,7 +55,9 @@
 			font-size: var(--text-xs);
 			font-weight: var(--font-weight-medium);
 		}
-		a:not(:has(> button)) {
+		/* A sidebar entry is a link styled as a menu entry: the prose link style
+		   (underline, info tint on hover and focus) must not reach it (#566). */
+		a:not(:has(> button)):not([data-slot="sidebar-menu-item"]) {
 			@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;
 		}

package/lib/nuxt/component-names.ts

@@ -436,6 +436,8 @@ export const COMPONENT_NAMES = [
 	'ReceiptCard',
 	'RecoveryCodes',
 	'RelativeTime',
+	'RepeatableGroup',
+	'RepeatableGroupFormField',
 	'ResizableHandle',
 	'ResizablePanel',
 	'ResizablePanelGroup',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.37.1",
+	"version": "0.39.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.10.0",
+		"@nxgt/material-core": "^0.11.0",
 		"@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 };