@nxgt/material-vue 0.38.0 → 0.39.0

package/dist/{pdf-outline-sidebar-BsePJlTi.js → pdf-outline-sidebar-aQ5Lhbss.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Hf as n } from "./components-B_s5oxUp.js";
-import { t as r } from "./use-material-translation-1FdRx9I7.js";
+import { Hf as n } from "./components-B2kSyBK0.js";
+import { t as r } from "./use-material-translation-C6xccbic.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-outline-row.vue?vue&type=script&setup=true&lang.ts
 var y = {

package/dist/{pdf-page-Ct313mNF.js → pdf-page-NCmScgMW.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Gp as t } from "./components-B_s5oxUp.js";
+import { Gp as t } from "./components-B2kSyBK0.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, openBlock as f, ref as p, shallowRef as m, unref as h, watch as g } from "vue";
 import { DEFAULT_PAGE_SIZE as _, escapeHtml as v, findTextMatches as y, highlightItemHtml as b, placeholderSize as x, rotatedSize as S } from "@nxgt/material-core/pdf-viewer";
 //#region lib/components/ui/media/pdf-viewer/pdf-note-icons.ts

package/dist/{pdf-page-list-JrRo2BeU.js → pdf-page-list-BnvE130d.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Hf as t } from "./components-B_s5oxUp.js";
-import { t as n } from "./pdf-page-Ct313mNF.js";
+import { Hf as t } from "./components-B2kSyBK0.js";
+import { t as n } from "./pdf-page-NCmScgMW.js";
 import { Fragment as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, renderList as l, withCtx as u } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-page-list.vue?vue&type=script&setup=true&lang.ts
 var d = { class: "flex flex-col items-center gap-4 px-4 py-4" }, f = /*@__PURE__*/ s({

package/dist/{pdf-reader-tABBZMbZ.js → pdf-reader-CMt9dKZ-.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components-B_s5oxUp.js";
-import { t as n } from "./use-material-translation-1FdRx9I7.js";
-import { t as r } from "./Button-5UyKA-x_.js";
-import { o as i } from "./HoverCardTrigger-CmCDiTn8.js";
-import { n as a } from "./pdf-page-Ct313mNF.js";
-import { t as o } from "./pdf-page-list-JrRo2BeU.js";
-import { t as s } from "./pdf-sidebar-Caw9rzU-.js";
-import { t as c } from "./pdf-toolbar-BM8Sz_JN.js";
+import { kn as t } from "./components-B2kSyBK0.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { t as r } from "./Button-DVeAQorb.js";
+import { o as i } from "./HoverCardTrigger-VvXPswRz.js";
+import { n as a } from "./pdf-page-NCmScgMW.js";
+import { t as o } from "./pdf-page-list-BnvE130d.js";
+import { t as s } from "./pdf-sidebar-BWzX3e0f.js";
+import { t as c } from "./pdf-toolbar-DpQMG5rv.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, onBeforeUnmount as y, onMounted as b, openBlock as x, reactive as S, ref as C, shallowRef as w, toDisplayString as T, toRef as E, unref as D, useId as O, watch as k, withCtx as A } from "vue";
 import { AlertCircle as j, FileX2 as M, KeyRound as N, Loader2 as P } from "@lucide/vue";
 import { pdfSourceKey as F, toPdfjsParams as I } from "@nxgt/material-core/pdf-source";

package/dist/{pdf-sidebar-Caw9rzU-.js → pdf-sidebar-BWzX3e0f.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-1FdRx9I7.js";
-import { t as r } from "./pdf-outline-sidebar-BsePJlTi.js";
-import { t as i } from "./pdf-thumbnail-sidebar-ZybLeUG7.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { t as r } from "./pdf-outline-sidebar-aQ5Lhbss.js";
+import { t as i } from "./pdf-thumbnail-sidebar-8nbYsI3d.js";
 import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, toDisplayString as d, unref as f, useId as p, useTemplateRef as m } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-sidebar.vue?vue&type=script&setup=true&lang.ts
 var h = ["aria-label"], g = ["aria-label"], _ = [

package/dist/{pdf-thumbnail-sidebar-ZybLeUG7.js → pdf-thumbnail-sidebar-8nbYsI3d.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Hf as n } from "./components-B_s5oxUp.js";
-import { t as r } from "./use-material-translation-1FdRx9I7.js";
-import { t as i } from "./pdf-page-Ct313mNF.js";
+import { Hf as n } from "./components-B2kSyBK0.js";
+import { t as r } from "./use-material-translation-C6xccbic.js";
+import { t as i } from "./pdf-page-NCmScgMW.js";
 import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-thumbnail-sidebar.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = {

package/dist/{pdf-toolbar-BM8Sz_JN.js → pdf-toolbar-DpQMG5rv.js}

@@ -1,10 +1,10 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-1FdRx9I7.js";
-import { d as r } from "./Button-5UyKA-x_.js";
-import { t as i } from "./icon-button-DhqJE6Ej.js";
-import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-BsuyNVzV.js";
-import { o as d } from "./HoverCardTrigger-CmCDiTn8.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { d as r } from "./Button-DVeAQorb.js";
+import { t as i } from "./icon-button-CSPfP615.js";
+import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-C7uYPf_9.js";
+import { o as d } from "./HoverCardTrigger-VvXPswRz.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, nextTick as x, normalizeClass as S, openBlock as C, ref as w, renderList as T, toDisplayString as E, unref as D, useTemplateRef as O, watch as k, withCtx as A } from "vue";
 import { ChevronDown as j, ChevronLeft as M, ChevronRight as N, ChevronUp as P, Download as F, Maximize2 as I, Minimize2 as L, Moon as R, Printer as z, RotateCw as B, Search as V, Sidebar as H, ZoomIn as U, ZoomOut as W } from "@lucide/vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-toolbar-search.vue?vue&type=script&setup=true&lang.ts

package/dist/pdf.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./use-material-translation-1FdRx9I7.js";
-import { t as n } from "./Button-5UyKA-x_.js";
+import { n as e, t } from "./use-material-translation-C6xccbic.js";
+import { t as n } from "./Button-DVeAQorb.js";
 import { computed as r, createBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, nextTick as c, onMounted as l, onScopeDispose as u, openBlock as d, ref as f, renderSlot as p, shallowRef as m, toDisplayString as ee, toValue as h, unref as g, watch as te, withCtx as ne } from "vue";
 import { contentDisposition as re, pdfBytesResponse as ie, toWebStream as ae } from "@nxgt/material-core/pdf/http";
 import { badge as oe, dataTable as se, defaultPdfTheme as ce, definePdfDocument as _, divider as v, header as y, heading as b, image as x, keyValue as S, keyValueOf as C, link as w, metric as T, page as E, pageBreak as D, pageNumber as O, pdfDocument as k, resolvePdfColor as A, resolvePdfTheme as j, row as M, section as N, spacer as P, stack as F, table as I, text as L, totals as R } from "@nxgt/material-core/pdf/model";

package/dist/{print-format.utils-CQFIVeUA.js → print-format.utils-oj5kle2P.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-CvOHC8AD.js";
-import { r } from "./translator-k1rKIgC7.js";
+import { i as e, r as t, t as n } from "./stored-language-CKZMMJcz.js";
+import { r } from "./translator-uh5FWiMq.js";
 import { t as i } from "./_baseIsEqual-BUD8VQJE.js";
 import { n as a } from "./number.utils-Bpo9tUaJ.js";
 import { defineComponent as o, getCurrentInstance as s, h as c, inject as l, provide as u, useId as d } from "vue";

package/dist/{sortable-provider-CKkWYijj.js → sortable-provider-2czx1jSW.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-1FdRx9I7.js";
-import { t as n } from "./icon-button-DhqJE6Ej.js";
+import { t } from "./use-material-translation-C6xccbic.js";
+import { t as n } from "./icon-button-CSPfP615.js";
 import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, normalizeStyle as f, onUnmounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S, watchEffect as C, withCtx as w, withModifiers as T } from "vue";
 import { GripVertical as E } from "@lucide/vue";
 import { Primitive as D } from "reka-ui";

package/dist/{stored-language-CvOHC8AD.js → stored-language-CKZMMJcz.js}

@@ -345,6 +345,7 @@ var e = {
 				"select-all": "Select all",
 				"select-row": "Select row",
 				"toggle-row": "Toggle row details",
+				expand: "Expand",
 				"scroll-region": "Scrollable table"
 			},
 			pagination: {
@@ -1581,6 +1582,7 @@ var e = {
 				"select-all": "Tout sélectionner",
 				"select-row": "Sélectionner la ligne",
 				"toggle-row": "Afficher ou masquer les détails de la ligne",
+				expand: "Déplier",
 				"scroll-region": "Tableau défilant"
 			},
 			pagination: {

package/dist/{stx-player-CsVKbwFk.js → stx-player-CS1FYHVS.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jp as n, Jt as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-B_s5oxUp.js";
-import { t as l } from "./use-material-translation-1FdRx9I7.js";
+import { $t as t, Jp as n, Jt as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-B2kSyBK0.js";
+import { t as l } from "./use-material-translation-C6xccbic.js";
 import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, openBlock as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region lib/components/ui/media/stx-player/partials/stx-player-frame.vue?vue&type=script&setup=true&lang.ts
 var S = ["data-layout", "aria-label"], C = {

package/dist/{translator-k1rKIgC7.js → translator-uh5FWiMq.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-CvOHC8AD.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-CKZMMJcz.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-D-ipoQwl.js → use-heading-spy-CcJfoBA1.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-BEvjls8b.js";
+import { a as e } from "./i18n-provider-BBnUUGqM.js";
 import { c as t, d as n, f as r, l as i, r as a, u as o } from "./number.utils-Bpo9tUaJ.js";
 import { computed as s, getCurrentInstance as c, inject as l, onMounted as u, ref as d, shallowRef as f, toValue as p, watch as m } from "vue";
 import { injectConfigProviderContext as h } from "reka-ui";

package/dist/{use-material-translation-1FdRx9I7.js → use-material-translation-C6xccbic.js}

@@ -1,6 +1,6 @@
-import "./stored-language-CvOHC8AD.js";
-import { a as e } from "./i18n-provider-BEvjls8b.js";
-import { i as t, r as n } from "./translator-k1rKIgC7.js";
+import "./stored-language-CKZMMJcz.js";
+import { a as e } from "./i18n-provider-BBnUUGqM.js";
+import { i as t, r as n } from "./translator-uh5FWiMq.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/data-table-filter-and-lists.md

@@ -64,7 +64,8 @@ of your own; both footers take `disabled`);
 `useColumnHelpers<T>()` returns a
 `columnHelper` bound to the table's features and `predefinedColumns()` —
 `select` (checkboxes) and `expand` (a toggle for the expanded row, named
-"Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`);
+"Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`, under a
+visually hidden header "Expand", `material.table.labels.expand`);
 `useDeleteRowsHandler(onDelete)` for a delete-selected action behind a
 confirm dialog.
 `dataTableFeatures` / `DataTableFeatures` are the TanStack v9 features the
@@ -84,6 +85,7 @@ table enables, for typing your own column defs.
 | `scrollLabel` | `string` | "Scrollable table" | the name of the scroll region the table becomes while it overflows |
 | `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
 | `loadingRows` | `number` | the page size | how many skeleton rows |
+| `density` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` tightens the cell padding, the row and header heights and the gap between rows, the selection column included; it is the table's `data-density` attribute, styled with classes (no inline style). The toolbar band and the empty state keep their size; the print variant is unchanged |
 | `#empty="{ filtered }"` | slot | icon and "No data available" | content of the empty row, spanning every visible column |
 | `manual` | `boolean` | `false` | `data` is one server page: no client filtering, sorting or paging; the footer is the server footer ([server-side data](#server-side-data)) |
 | `v-model:sorting` | `SortingState` | held inside | controlled sorting; `update:sorting` gets the new state |

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

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

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.38.0",
+	"version": "0.39.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"

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 };