@nxgt/material 2.19.0 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @nxgt/material
 
+## 2.20.0
+
+### Minor Changes
+
+- [#588](https://github.com/softistx/nxgt-material/pull/588) [`f8ef212`](https://github.com/softistx/nxgt-material/commit/f8ef2120be53d5a60a976ff47355d1eb487672b1) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` takes a `density` prop, `'comfortable'` (default, the look it always had) or `'compact'`, which tightens the cell padding above and below, the row and header heights, the sort and expand buttons (the expand button keeps 28px, above the 24px target minimum) and the gap between rows, the selection column included. The table carries it as `data-density`, styled with classes, so a strict CSP is unaffected; a `DataTable` nested in an expanded row keeps its own density. The toolbar band, the empty state and the print variant keep their size. The `DataTableDensity` type is exported.
+  
+  Also in this release:
+  
+  - `@nxgt/material`: `TableHead` now sets `text-foreground`, as `@nxgt/material-vue`'s does. It affects every React `Table` header: the header text is the foreground colour, no longer the muted inherited one (3.97:1 contrast on the header band, now above 4.5:1).
+  - Both: the `expand` column's header is no longer empty. It holds a visually hidden "Expand" (`material.table.labels.expand`, "Déplier" in French), which fixes axe's `empty-table-header`. An app that overrides the `material.table.labels` bundle can add the key.
+  
+  Nothing to change in an existing app.
+
+### Patch Changes
+
+- [#579](https://github.com/softistx/nxgt-material/pull/579) [`69562df`](https://github.com/softistx/nxgt-material/commit/69562dff2d874d60f066d45dd6dc7df418112041) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Autocomplete in a dialog: the open list no longer covers the dialog's own controls ([#577](https://github.com/softistx/nxgt-material/issues/577)). Inside a `DialogContent`, `DialogScrollContent`, `AlertDialogContent` or `SheetContent`, the list opens under the field's helper text, in the layer's flow, and pushes what follows (the footer, the Save button) down instead of floating over it. It never flips up over the title, and its options scroll past 15rem. The layer grows while the list is open (a dialog stays capped at the viewport and scrolls) and shrinks back at once on a pick, so the next field does not move under a click aimed at it. A closed field is as tall in a dialog as outside one. A `PopoverContent`, `HoverCardContent` or menu content opened from a dialog keeps a floating list, as on the page. A `DrawerContent` on the page is not covered yet: its list still floats ([#582](https://github.com/softistx/nxgt-material/issues/582)). Outside these layers nothing changes. No API change.
+
+- [#586](https://github.com/softistx/nxgt-material/pull/586) [`a3d9c79`](https://github.com/softistx/nxgt-material/commit/a3d9c79310c09e14d25b67db5c5c73afa4f875b4) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `.form-grid-layout` no longer caps its height (`max-h-[calc(100lvh-…)]`) nor scrolls `[data-slot="form-fields"]` in a box of its own: a long form grows with the page, and the page (or the `DialogContent` / `SheetContent` around it) is the one scroll. `[data-slot="form-actions"]` is sticky at the bottom of that scroll on a blurred `bg-background/90`, so Cancel and Save stay in reach. In a `DialogContent` or an `AlertDialogContent` the stuck actions fill the dialog's padding below them, and `ConfirmationDialog`'s footer sticks the same way when it holds a form (any dialog holding a `.form-grid-layout` without `form-actions` does). A form that is a direct child of `DrawerContent` scrolls itself, since a drawer does not. The fields' controls and links carry `scroll-margin-bottom` (6rem plus a dialog's bottom padding, 7.5rem above `ConfirmationDialog`'s footer), so a field tabbed to is scrolled clear of the actions in any scroll box (WCAG 2.4.11); `--form-actions-clearance` raises it for taller actions, and `--form-actions-fill` names a dialog's bottom padding when it is not the default.
+  
+  Migration: search for `form-grid-layout` in a box with a fixed height that relied on the fields scrolling inside it; give that form (or box) the height and the scroll yourself (`max-h-[60vh] overflow-y-auto`), and the actions stick to its bottom. To keep the actions in place, add `static` to `[data-slot="form-actions"]`. An app's own fixed bottom bar or floating button now sits under the sticky actions (`z-index: 10`): give it a z-index above 10. Storybook: `Guides/Forms/Form grid layout`, `Guides/Forms/Form grid layout, overlays` and `Guides/Forms/Form grid layout, dialogs`.
+
 ## 2.19.0
 
 ### Minor Changes

package/dist/{_Uint8Array-B6RHzY7k.js → _Uint8Array-DGVY6NfN.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-DX_ArUA5.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-B_lmafJN.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-Cs3RIAVd.js → _overRest-DCKNcrF0.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-DX_ArUA5.js";
+import { m as e, p as t } from "./translator-B_lmafJN.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-CgbRYTRY.js → async-slice-DAVXvBm1.js}

@@ -1,6 +1,6 @@
-import { a as e, i as t, t as n } from "./stored-language-FHwsTPoM.js";
-import { C as r, S as i, h as a, l as o, m as s, p as c, r as l, u, v as d, w as f, x as p } from "./translator-DX_ArUA5.js";
-import { a as m, c as h, d as g, i as _, n as v, r as y, t as b, u as ee } from "./_Uint8Array-B6RHzY7k.js";
+import { a as e, i as t, t as n } from "./stored-language-DqlfjXt8.js";
+import { C as r, S as i, h as a, l as o, m as s, p as c, r as l, u, v as d, w as f, x as p } from "./translator-B_lmafJN.js";
+import { a as m, c as h, d as g, i as _, n as v, r as y, t as b, u as ee } from "./_Uint8Array-DGVY6NfN.js";
 import { L as te } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as ne, createContext as re, createElement as x, useContext as ie, useEffect as ae, useMemo as S, useReducer as oe, useState as se, useSyncExternalStore as ce } from "react";
 import { asyncThunkCreator as le, buildCreateSlice as ue } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-D5ptXmBP.js → blockDiagram-BEXU5L5S-BrCVxVRd.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-CORKO6lR.js";
+import { t as e } from "./graphlib-Dc5Siwxn.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-al8CepY8.js → chunk-3FUC2YCW-DWaNSANO.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-CORKO6lR.js";
+import { t as e } from "./graphlib-Dc5Siwxn.js";
 import { n as t } from "./src-CsLQInsN.js";
 import { g as n } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-BERAnmfo.js → chunk-7M6MHVWA-x-N4hnls.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-DMMDhC9T.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-Dzk3o85s.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-DMMDhC9T.js → chunk-GNY47TPC-Dzk3o85s.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BfEvNh_f.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BG0kHR2f.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-Ck8np52h.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-D-NdHe_L.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-C8TrgNLm.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-Ma7iLhhV.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-CsMBdu5o.js → chunk-NETBCI7D-WvAAUJne.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
+import { o as t } from "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-CLYmaWUD.js → chunk-Z7XXMR3K-DY6U0Uq4.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-C5y9FL-6.js";
+import { st as e } from "./components-DH5dpaU8.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{classDiagram-v2-NBCMYWYE-C-6ddqhF.js → classDiagram-v2-NBCMYWYE-QeFmLU9L.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-CLYmaWUD.js";
+import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-DMMDhC9T.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-Dzk3o85s.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/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):