@nxgt/material 3.50.0 → 3.52.0

package/dist/{use-heading-spy-C5LXtA8Z.js → use-heading-spy-BgXA8uz6.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-DPM_ALQ4.js";
+import { r as e } from "./i18n-provider-BFNrM0Qu.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 import { busySettler as f, busySettler as p, createSubmitGuard as m, createSubmitGuard as h } from "@nxgt/material-core/submit-guard";

package/dist/use-material-translation-ByM3gD9R.js

@@ -0,0 +1,14 @@
+import { r as e } from "./i18n-provider-BFNrM0Qu.js";
+import { t } from "./translate-material-BPl8TQLg.js";
+import { useCallback as n } from "react";
+//#region lib/i18n/use-material-translation.ts
+function r() {
+	let r = e(), i = r?.language, a = r?.resources;
+	return {
+		t: n((e, n, r) => t(i, e, n, r, a), [i, a]),
+		language: i,
+		hasProvider: !!r
+	};
+}
+//#endregion
+export { r as t };

package/docs/components/data-display.md

@@ -642,7 +642,7 @@ import { Description } from '@nxgt/material/components';
 </div>
 ```
 
-`label` and `value` are its main props; the rest go to the `div`. A `value` of `null`, `undefined`, `false` or `''` renders nothing (`0` is shown), so optional fields need no guard. Inside a `variant="panels"` list a `Description` must sit in a `DescriptionList.Group`; otherwise it renders its stand-alone markup. The label is a small
+`label` and `value` are its main props; the rest go to the `div`. A `value` of `null`, `undefined`, `false` or `''` with no `lines` and no `children` renders nothing (`0` is shown), so optional fields need no guard. `children` alone are the value (`<Description label="Note">text</Description>`); after a `value` they follow it. Inside a `variant="panels"` list a `Description` must sit in a `DescriptionList.Group`; otherwise it renders its stand-alone markup. The label is a small
 muted caption above the value (not a title). `Description` takes one cell of
 the grid it is in; pass `className="col-start-full"` for a full-width row. It takes `lines` anywhere; inside a [`DescriptionList`](#descriptionlist) also `span` and `labelPosition`.
 
@@ -686,7 +686,7 @@ row) or a number of columns (used once that many fit; at most `maxColumns`, and
 field uses dense packing: the fields after it fill the cells before it, so they
 may be drawn above it while the DOM and reading order stay the source order.
 Put the full-width field where that reads fine, or last. A multi-line value
-(an address) takes `lines={[…]}` or `children`, never a string to split. Entries of `lines` that are `null`, `false` or `""` are skipped, and a `Description` whose `lines` are all empty and that has no `value` renders nothing.
+(an address) takes `lines={[…]}` or `children`, never a string to split. Entries of `lines` that are `null`, `false` or `""` are skipped, and a `Description` whose `lines` are all empty and that has no `value` or `children` renders nothing.
 
 ```tsx
 <DescriptionList variant="panels">
@@ -1087,7 +1087,7 @@ yours, the component names no domain.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `entries` | `ChangeHistoryEntry[]` | — | `id`, `kind`, `at` (`Date`, string or number), `author` (`name`, `src`), `changes` (`ChangeHistoryChange[]`: `field`, `before`, `after`, `redacted`) |
+| `entries` | `ChangeHistoryEntry[]` | — | `id`, `kind`, `at` (`Date`, string or number), `author` (`name`, `src`), `changes` (optional, `ChangeHistoryChange[]`: `field`, `before`, `after`, `redacted`; left out or `[]`, the entry shows its sentence, author and time with no change list) |
 | `kinds` | `Record<string, ChangeHistoryKindOverride>` | built-ins | `label`, `verb`, `icon` (`null` removes it), `tone` per kind; `creation` (default true for `created`) makes an entry list values only |
 | `variant` | `'rail' \| 'cards'` | `'rail'` | the look |
 | `groupBy` | `'day' \| 'none'` | `'day'` | a heading per day (sticky on the rail), or one list in the order given |

package/docs/components/data-table-filter-and-lists.md

@@ -244,8 +244,10 @@ with a `select` column and `actions`, the toolbar keeps its band while
 nothing is selected, so the first selection does not move the rows (on a
 wide screen; on a phone the extra lines still push them down). Below 768px
 the declarative `bulkActions` fold past the third into a "More" menu in the
-toolbar too, so a list that stays a table on a phone (`layout="table"`) shows
-three actions and "More", as the cards and tiles do (#1797).
+toolbar (a `ServerTable` without `filter`, or with the facets panel) and in a
+phone's second row (#1719), as the cards and tiles do (#1797). The
+[selection band](#the-selection-band) keeps one action and puts the rest in
+"More".
 
 ```tsx
 <DataTable
@@ -293,6 +295,33 @@ press elsewhere is never pulled back. The footer's selected count is a polite
 status, so the first selection is announced ("1 row selected") when its bar
 shows up.
 
+### The selection band
+
+With `bulkActions` and a `filter` (not `variant: 'facets'`), the first
+selected row turns the band that holds the filter bar into a selection bar, in
+place and on the same row: "N selected", the bulk actions, and a tonal
+"Cancel" that clears the selection (#1718). The search and the page's
+`actions` stay mounted, hidden (`invisible`, `inert`) and keep their size, so
+the table does not move; clearing the selection brings them back. The bar's
+height is the row's (40px, 44px on a coarse pointer). From 768px every
+declarative action keeps its button; below it the bar is one row: the first
+action keeps its button, the others go into "More" (an icon, still named),
+and "Cancel" is an icon (its name and tooltip stay). Bulk actions written as a
+function are rendered as they are, in the same place.
+
+After "Cancel" the focus goes back to the control that started the selection
+(the row's or the header's checkbox) when it is still on the page, else to the
+list; a selection cleared another way (a bulk action's `selection.clear()`, a
+new query) keeps its own focus rule. While rows are selected the search is
+`inert`, so `filterRef.focus()` does nothing: cancel the selection first. The count is told once, politely, by the
+footer's status ("N rows selected"); the bar's own count is plain text. The
+cards' and tiles' list bar leaves its count and "Clear selection" to the bar.
+A phone's second row of a list in cards or tiles with `actions` (#1719) is the
+selection bar there, as before. Without `filter` (or with the facets panel) the
+band has no filter bar to replace, and the bulk actions stay in the table's
+toolbar. Text keys: `material.server-table.bulk-selected`, `bulk-cancel`,
+`bulk-bar` (English and French).
+
 ### Focus after a bulk action
 
 When a bulk action clears the selection, its buttons unmount and the focus
@@ -410,7 +439,9 @@ grow the toolbar. Without the `select` column, or without `actions`, no band
 is kept above the table. `reserveActions={false}` keeps none either: the bar
 arrives on the first selection with a short grow (none under reduced motion),
 and the rows move down by its height. `ServerTable` passes `false`, so its
-bulk bar leaves no empty row under the band while nothing is selected.
+bulk bar leaves no empty row under the band while nothing is selected. With
+`filter` it has no toolbar row at all: the band's selection bar holds the bulk
+actions ([the selection band](#the-selection-band)).
 
 ```tsx
 <DataTable
@@ -843,7 +874,8 @@ export default function Students() {
     onRetry={() => fetcher.reload()}
   />
   ```
-- **Selection.** With `bulkActions(ids, selection)`, rows are selectable;
+- **Selection.** With `bulkActions(ids, selection)`, rows are selectable
+  (see [the selection band](#the-selection-band) for where the bulk actions show);
   the selection is kept across pages and drops on a new query.
   `selection.clear()` empties it and moves the focus to the table
   (`tabindex="-1"`, by script only; the list of cards or tiles in those layouts); `selection.deselect(ids)` drops rows
@@ -1036,7 +1068,8 @@ rows (the bulk bar is not drawn under it). With the declarative list form of
 (2)", named "Publish 2 rows"), hidden at 0 rows; the buttons wrap onto a second
 line rather than scroll, and past the third action the rest go into a "More"
 menu (`material.server-table.bulk-more`), each item keeping its count (the same
-fold applies below 768px to every layout, a phone table included). From
+fold applies below 768px to every layout in the toolbar and in this row; the
+[selection band](#the-selection-band) of a list with `filter` keeps one action). From
 768px the buttons read "Label (n)" as before. When the focused button
 disappears the focus goes to the next one, else to "More", else to "Select all"; an action past `max` shows its notice there (an inline text, or a disabled More item). The function
 form (`bulkActions={(ids) => node}`) is drawn whole in the row, so keep it to

package/docs/components/primitives.md

@@ -735,7 +735,7 @@ reached with the arrow keys. The list scrolls sideways when the tabs do not
 fit (its scrollbar hidden), which suits a phone or a narrow popover. While it
 overflows, each side with hidden tabs fades and gets a small scroll button
 ("Scroll tabs left" / "Scroll tabs right", from `material.tabs.*`; out of the
-tab order, 44px on a touch screen); the selected and the focused tab are
+tab order; on a touch screen 44px wide and as tall as the list, so it never covers content); the selected and the focused tab are
 scrolled into view, instantly under reduced motion. A list that fits has
 neither, and neither is in the server markup. `segmented` does the same.
 

package/docs/guides/backgrounds.md

@@ -545,7 +545,9 @@ good.
 - The server renders every glyph. The drop happens after the first measure, on the client, in one frame (boxes read
   before any write), so the markup never differs between server and client.
 - A dropped glyph fades out in 150 ms (none under `prefers-reduced-motion`) and fades back when the content moves
-  away. It runs again on resize and when the content changes.
+  away. It runs again on resize and when the content changes. A glyph the first pass drops is hidden at once: the fade
+  starts a frame later (`data-settled` on the scene), so no glyph is seen over a paragraph for the length of a fade on
+  a reload.
 - The open areas keep their glyphs; the space behind and between cards is empty. `keepClear={false}` on an `AuthCard`
   lets the glyphs run under the card.
 - **`keepClear="gaps"`** (on `ActivityLayout` and `AuthCard`, opt-in; `true` stays the default) lets a glyph stay between

package/docs/guides/cards-and-tiles.md

@@ -144,6 +144,9 @@ is not `focusable`). On a narrow list (under 30rem) the bar stays on one row and
 Clear shrinks to an icon button; its label stays its accessible name, and it has
 a tooltip. Do not add your own in `actions`: that one is the bulk bar's.
 Once a bulk action clears the selection and the focus is lost, the list takes it.
+In a `ServerTable` with `filter` and `bulkActions`, the band's own selection bar
+tells the count and has "Cancel" (#1718), so the list bar leaves its count and
+"Clear selection" out ([the selection band](../components/data-table-filter-and-lists.md#the-selection-band)).
 
 Inside a `ServerTable` with `filter` and `actions`, below 768px, the bar has no
 row of its own: its "Select all" (with a short visible label, "Select all"),

package/docs/guides/helpers.md

@@ -265,7 +265,7 @@ flag. Storybook: `Guides/Hooks/useSubmitOnce`.
 | `formatMessage(message, language, values?, { onError }?)` | Formats one ICU message (`{name}`, plurals, selects) in any BCP 47 `language` with the translator's engine, for a message that is not in a bundle (a server-side catalogue). Cached per message; one that does not format is logged and returned unformatted, or passed to `onError` as a `FormatMessageError` (reason, key, source) without logging. |
 | `createTypedTranslation(translate)` | Turns a translator into a typed `useTranslation()` hook. |
 | `translate`, `useMaterialTranslation()` | Translator / hook bound to the package's own `material.*` keys. `useMaterialTranslation().t(key, fallback)` returns `fallback` without a provider. |
-| `translateMaterial(language, key, fallback, values?)` | The same as `useMaterialTranslation().t`, with the language passed as a value: no provider, no hook. For a PDF `footer` function or a server. `'fr-CA'` reads `fr`; an unknown language formats `fallback`. |
+| `translateMaterial(language, key, fallback, values?, resources?)` | The same as `useMaterialTranslation().t`, with the language passed as a value: no provider, no hook. `resources` is your merged bundle (stable object), read before the base one. For a PDF `footer` function or a server. `'fr-CA'` reads `fr`; an unknown language formats `fallback`. |
 | `getLanguage()` | Language read from `localStorage`, else `FALLBACK_LANGUAGE`. |
 | `LANGUAGE_KEY`, `FALLBACK_LANGUAGE`, `SUPPORTED_LANGUAGES` | Storage key (`'language'`), fallback (`'en'`) and supported languages (`en`, `fr`). |
 

package/docs/guides/i18n.md

@@ -63,6 +63,7 @@ function translateMaterial(
   key: MaterialLocaleKey,
   fallback: string,
   values?: TranslationContext,
+  resources?: ResourceBundle, // your merged bundle, a stable object (module scope)
 ): string;
 ```
 
@@ -189,6 +190,7 @@ if (failure) {
 | `initialLanguage` | `Language` | — | Used as-is for the first render when supported, and `localStorage` is not read. Set it in SSR. See [below](#server-rendering) |
 | `storageKey` | `string` | `'language'` | `localStorage` key the choice is read from and written to |
 | `supportedLanguages` | `Language[]` | `['en', 'fr']` | What `changeLanguage` accepts and `LanguageSwitcher` lists |
+| `resources` | `ResourceBundle` | — | Your `mergeResources(...)` result: the components read their `material.*` words from it before the base bundle. Pass a stable object (module scope) |
 | `onLanguageChange` | `(language) => void` | — | Called after a successful change: save it to a cookie, a profile, analytics |
 
 `changeLanguage` with an unsupported value logs
@@ -208,7 +210,8 @@ const context = useOptionalI18nContext(); // null outside the provider
 third language is not in the type today, so adding one to
 `supportedLanguages` takes a cast. The runtime accepts it: your translator
 uses your strings for it, and the components fall back to their English copy,
-formatted.
+formatted. A third language you define under `material.*` and give through
+`resources` now reaches the components.
 
 ```tsx
 const LANGUAGES = ['en', 'fr', 'de'] as Language[];
@@ -498,8 +501,8 @@ material.emoji.groups.flags;       // "Flags" / "Drapeaux"
 
 A group your `EmojiItem`s name that is not in this list (`hand_signs`) reads
 as its words in English (`Hand signs`). As for every `material.*` key above,
-the components read their own bundle: your own translator sees a key you add,
-the tab does not.
+your own translator sees a key you add; the components see it too once you hand
+them the merged resources (see "Overriding a component's words" below).
 
 ```tsx
 // Under <I18nProvider defaultLanguage="fr">
@@ -509,11 +512,30 @@ the tab does not.
 <Spinner variant="4" />     // role="img" aria-label="Chargement..."
 ```
 
-That override is visible only through **your** translator. The components
-translate through the package's own bundle, so defining
-`material.command.title` in your resources changes what
-`t('material.command.title')` returns in your code, but not the title
-`CommandDialog` renders.
+### Overriding a component's words
+
+Give the provider the merged resources and every component translates through
+them, so an override under `material.*` changes what it renders:
+
+```tsx
+import { mergeResources, resources as materialResources } from '@nxgt/material/i18n';
+
+const resources = mergeResources(materialResources, {
+  en: { material: { 'recovery-codes-status': { title: 'Backup codes' } } },
+});
+
+<I18nProvider defaultLanguage="en" resources={resources}>
+  <RecoveryCodesStatus remaining={3} onRegenerate={regenerate} /> {/* title: "Backup codes" */}
+</I18nProvider>
+```
+
+Without `resources`, the components read the package's own bundle: an override
+is visible only through **your** translator, and defining `material.command.title`
+does not change the title `CommandDialog` renders. Pass a stable object
+(module scope), not one built in a render. A component's `labels` prop still
+wins over both. Outside a component, `translateMaterial` takes the merged
+resources as a fifth argument and `zodLocaleError` takes `translate`; the
+toast presets and the toast close label still read the package's bundle.
 
 Each time `mergeResources` runs outside production, overlapping leaves are
 reported, one line per language:

package/docs/guides/two-factor.md

@@ -62,7 +62,8 @@ in `@nxgt/material-core/two-factor`.
 What stays in the app: every request, the mapping of a server error to the
 props above, where the challenge is kept, the replay of the action a step-up
 unblocked, the leave guard around the new recovery codes, and all wording
-(`labels`, or your translations under `material.*`).
+(`labels`, or your translations under `material.*`, given to
+`I18nProvider` as `resources`, see [i18n](i18n.md#overriding-a-components-words)).
 
 ## On a phone and for assistive technology
 

package/docs/troubleshooting.md

@@ -3902,8 +3902,9 @@ followed by the list of keys, e.g. `"en": material.command.title. App resources
 take precedence over the base bundle at these keys.`
 **Why:** your resources define leaves under the `material` namespace, which
 this package reserves for its own strings. The override reaches your app's
-own translator only: the package's components translate from their own
-bundle, so their text does **not** change.
+own translator only, unless you also give the merged object to
+`<I18nProvider resources={resources}>`: without it the package's components
+translate from their own bundle, so their text does **not** change.
 **Fix:**
 
 ```ts

package/lib/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/lib/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],

package/package.json

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

package/dist/translate-material-DEUlaL_1.js

@@ -1,12 +0,0 @@
-import "./stored-language-Beyj2ult.js";
-import { a as e, r as t } from "./translator-CBgIb3zP.js";
-//#region lib/i18n/translate-material.ts
-function n(n, r, i, a) {
-	if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {
-		let n = t(r, a, () => e);
-		if (n !== r) return n;
-	}
-	return e(i, n || "en", a);
-}
-//#endregion
-export { n as t };

package/dist/use-material-translation-DWWeeg-B.js

@@ -1,14 +0,0 @@
-import { r as e } from "./i18n-provider-DPM_ALQ4.js";
-import { t } from "./translate-material-DEUlaL_1.js";
-import { useCallback as n } from "react";
-//#region lib/i18n/use-material-translation.ts
-function r() {
-	let r = e(), i = r?.language;
-	return {
-		t: n((e, n, r) => t(i, e, n, r), [i]),
-		language: i,
-		hasProvider: !!r
-	};
-}
-//#endregion
-export { r as t };