@nxgt/material 3.50.0 → 3.51.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nxgt/material
 
+## 3.51.0
+
+### Minor Changes
+
+- [#1848](https://github.com/softistx/nxgt-material/pull/1848) [`1b506da`](https://github.com/softistx/nxgt-material/commit/1b506dafb6c7fbb0e2ad287a217f3b950a521e14) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable` with `bulkActions` and `filter`: the first selected row turns the band that holds the filter bar into a selection bar in place ([#1718](https://github.com/softistx/nxgt-material/issues/1718)), on the same row and height: "N selected", the bulk actions and a tonal "Cancel" that clears the selection. The search and the page's actions stay mounted, hidden, so the table does not move; clearing the selection brings them back and gives the focus to the control that started the selection, or else to the list. The extra bulk toolbar row that grew from `h-0` is gone, and the cards' and tiles' list bar no longer repeats the count and "Clear selection". On a phone the bar is one row: the first action keeps its button, the others go into an icon "More". The public props are unchanged; without `filter`, or with the facets panel, the bulk actions stay in the table's toolbar. New text keys `material.server-table.bulk-selected`, `bulk-cancel` and `bulk-bar`.
+  
+  Migration: tests that query "Clear selection" in a `ServerTable` with `filter` and `bulkActions` now query `getByRole('button', { name: 'Cancel' })` inside `getByRole('group', { name: 'Selected rows' })`, and `[data-slot="header"]` (the toolbar row) no longer appears on selection. While rows are selected the search is `inert`, so `filterRef.focus()` does nothing; cancel the selection first. Below 768px the band keeps one bulk action and puts the rest in "More".
+
+### Patch Changes
+
+- [#1847](https://github.com/softistx/nxgt-material/pull/1847) [`a4f357c`](https://github.com/softistx/nxgt-material/commit/a4f357ca1f73cc724d29963dd4a0637b4fa87f82) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix a backdrop shape seen behind a paragraph of body text on a reload, or after a late font load reflows the text with `keepClear="gaps"` (or `true`) on `ActivityLayout`, `AuthCard` and the theme's background ([#1720](https://github.com/softistx/nxgt-material/issues/1720)). The first pass dropped a glyph over the text by fading it out over 150 ms, after the scene was shown, so a shape was drawn behind the text for those frames at phone width and on desktop. A dropped glyph is now hidden at once on the first pass; the fade starts one frame later (`data-settled` on the scene) and still softens every later drop and return. The pass also runs again when a web font finishes loading late, so text that reflows after it keeps its margin.
+
 ## 3.50.0
 
 ### Minor Changes

package/dist/{async-slice-3loEtzUY.js → async-slice-BGtmF3K5.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-Beyj2ult.js";
-import { r } from "./translator-CBgIb3zP.js";
+import { i as e, r as t, t as n } from "./stored-language-Cb9FMEwk.js";
+import { r } from "./translator-BnQXtpSZ.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-BRUaHD8z.js → button-BWcr2b49.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./is-production-GLw59WU8.js";
 import { n, t as r } from "./dist-DVRQkaTK.js";
-import { n as i, r as a, t as o } from "./spinner-BpVwI1ps.js";
+import { n as i, r as a, t as o } from "./spinner-UvqlDsV8.js";
 import { a as s, i as c, n as l, o as u, s as d, t as f } from "./use-click-lock-BZYtTmVt.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";
 import { t as m } from "./has-text-content-Ds2dkHX_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./use-material-translation-DWWeeg-B.js";
-import { t as i } from "./button-BRUaHD8z.js";
+import { t as r } from "./use-material-translation-pLgSqqLw.js";
+import { t as i } from "./button-BWcr2b49.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-DneTrtNj.js";
+import { t as d } from "./chip-CmLW6ZrT.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-DneTrtNj.js → chip-CmLW6ZrT.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { r as t } from "./spinner-BpVwI1ps.js";
+import { r as t } from "./spinner-UvqlDsV8.js";
 import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-DWWeeg-B.js";
+import { t as r } from "./use-material-translation-pLgSqqLw.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-R_nPN_-d.js → code-editor-BKMaeIF6.js}

@@ -2,13 +2,13 @@ import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./is-production-GLw59WU8.js";
 import { a as r } from "./dist-lmHmz_bu.js";
-import { c as i, d as a, f as o, n as s, t as c } from "./dropdown-menu-XLlxfDgq.js";
-import { a as l, i as u, n as d } from "./field-blur-context-Cwt4TuBq.js";
-import { a as f, d as p, r as m, t as h, u as g } from "./toolbar-items-CIMo4F9q.js";
-import { t as _ } from "./use-material-translation-DWWeeg-B.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-BKEUhQlF.js";
+import { c as i, d as a, f as o, n as s, t as c } from "./dropdown-menu-BozV6Ikw.js";
+import { a as l, i as u, n as d } from "./field-blur-context-6McYOnM8.js";
+import { a as f, d as p, r as m, t as h, u as g } from "./toolbar-items-C09bJphe.js";
+import { t as _ } from "./use-material-translation-pLgSqqLw.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-Cs1Pwd1h.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { n as C, t as w } from "./escape-owner-B9eCwjLw.js";
+import { n as C, t as w } from "./escape-owner-Bu-aDEEO.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";
 import { t as E } from "./react-node-text-Crkpfpco.js";
 import D, { memo as O, useCallback as ee, useEffect as k, useId as A, useImperativeHandle as j, useMemo as M, useRef as N, useState as P } from "react";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-CIMo4F9q.js";
-import { t as o } from "./use-material-translation-DWWeeg-B.js";
-import { i as s, n as c, o as l } from "./code-language-items-BKEUhQlF.js";
-import { r as u, t as d } from "./field-blur-5uRDFHvB.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-C09bJphe.js";
+import { t as o } from "./use-material-translation-pLgSqqLw.js";
+import { i as s, n as c, o as l } from "./code-language-items-Cs1Pwd1h.js";
+import { r as u, t as d } from "./field-blur-47zmuDkH.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-R_nPN_-d.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BKMaeIF6.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
 import { ChevronDown as F, ChevronUp as I, Columns2 as L } from "lucide-react";

package/dist/{code-language-items-BKEUhQlF.js → code-language-items-Cs1Pwd1h.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-XLlxfDgq.js";
-import { t as n } from "./use-material-translation-DWWeeg-B.js";
+import { d as e, f as t } from "./dropdown-menu-BozV6Ikw.js";
+import { t as n } from "./use-material-translation-pLgSqqLw.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/components/ui/layout/app-shell/activity-backdrop-shapes.css

@@ -18,15 +18,20 @@
 		visibility: hidden;
 	}
 
-	/* A shape over the page's text, controls or surfaces (cards, tables, lists) fades out and comes back once
-	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
-	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
-	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing
-	 * flashes over the content. */
-	[data-keep-inside] .mo > *,
-	[data-keep-inside] .pt,
-	[data-slot="activity-layout-backdrop"] [data-background] .mo > *,
-	[data-slot="activity-layout-backdrop"] [data-background] .pt {
+	/* A shape over the page's text, controls or surfaces (cards, tables, lists)
+	 * fades out and comes back once clear (watch-content.ts): it is hidden,
+	 * never moved. A compound body (the moon, the planet, the eclipse: `.pt.mg`)
+	 * is hidden whole, with its halo (`.pt.mh`). The scene stays invisible until
+	 * the first check, so nothing flashes over the content. The fade waits for
+	 * `data-settled`, set a frame after the first pass: a shape that pass drops
+	 * is hidden at once, never seen fading out over the text on a reload. */
+	[data-keep-inside][data-settled] .mo > *,
+	[data-keep-inside][data-settled] .pt,
+	[data-slot="activity-layout-backdrop"]
+		[data-background][data-settled]
+		.mo
+		> *,
+	[data-slot="activity-layout-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	/* Important: a preset sets its own opacity on a body (`.md`, the dark

package/dist/components/ui/layout/auth-card/auth-card-backdrop.css

@@ -13,8 +13,8 @@
 		visibility: hidden;
 	}
 	/* A shape over the card or the brand row fades out (watch-content.ts). */
-	[data-slot="auth-card-backdrop"] [data-background] .mo > *,
-	[data-slot="auth-card-backdrop"] [data-background] .pt {
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .mo > *,
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-hidden],