@nxgt/material 3.51.0 → 3.52.0

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

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-Ang2f31m.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/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/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/package.json

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

package/dist/translate-material-D6KCK21i.js

@@ -1,12 +0,0 @@
-import "./stored-language-Cb9FMEwk.js";
-import { a as e, r as t } from "./translator-BnQXtpSZ.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-pLgSqqLw.js

@@ -1,14 +0,0 @@
-import { r as e } from "./i18n-provider-Ang2f31m.js";
-import { t } from "./translate-material-D6KCK21i.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 };