@nxgt/material 3.76.0 → 3.78.0

package/docs/guides/app-shell.md

@@ -376,8 +376,10 @@ export const invoiceRoute: RouteObject = {
   context the page fills while it renders cannot do this: the bar is written
   before the page is reached.)
 - **It is the page's `h1`**, in `--font-display` (the body face when you
-  define none), truncated with an ellipsis; when it is cut off, its full text
-  is the `title` tooltip, as for `headerTitle` (#629), and its accessible
+  define none). On a phone a long title wraps to a second line first, so a
+  record's number stays readable by touch (#2324); from `md` up, and on a
+  phone once two lines are not enough, it is cut with an ellipsis. When it is
+  cut off, its full text is the `title` tooltip, as for `headerTitle` (#629), and its accessible
   name stays the text itself. It sits after `headerTitle`, which gives it room.
 - **Typing it.** `AppShellHandle<Data>` (`{ breadcrumb?, title?, titleAfter? }`) and
   `PageTitle<Data>` are exported for a route's `handle`; `Data` types the
@@ -455,7 +457,7 @@ export const handle = {
   (`[data-slot=app-header-title-after]`), vertically centred with the title, so
   the heading's accessible name stays the plain title.
 - **On a phone it stays on screen** and shares the row with the title: the
-  title truncates first (ellipsis), the slot never shrinks.
+  title gives way first (two lines, then an ellipsis), the slot never shrinks.
 - **Nothing changes without it**: the markup of a bar with no slot is the same
   as before, and the slot is read from the matches like the title, so it is in
   the server HTML and does not flash on a route change.
@@ -484,7 +486,7 @@ A multi-tenant app keeps the current tenant visible on a desktop screen with
   adds nothing to the bar, and setting both never shows the name twice on one
   screen.
 - **The title truncates first**: with a long title, the slot and the line
-  together, the title gives way; the slot stays whole and the line keeps its cap.
+  together, the title gives way (two lines on a phone, then an ellipsis); the slot stays whole and the line keeps its cap.
 - **It needs a page title**: while the bar shows none (no `handle.title`),
   `headerTitle` is the context line and `headerContext` is ignored.
 

package/docs/guides/illustrations.md

@@ -120,7 +120,7 @@ in a state, a string that is not a registered id is a node, as before (so the
 set must be registered for the string shorthand). An app that never imports the
 subpath does not carry the table. A table of your own is a `SceneTable`
 (`SceneRow` from `@nxgt/material-core/illustrations`), passed through `sets` or
-`scenes`; its ids are not in `SceneId`, so type them with the `scenes` prop. `HEALTH_SUGGESTED_ICONS` (like `SUGGESTED_ICONS`) lists the icon names the set draws, hero first.
+`scenes`; its ids join `SceneId` once you register them ([Scenes of your own](#scenes-of-your-own)). `HEALTH_SUGGESTED_ICONS` (like `SUGGESTED_ICONS`) lists the icon names the set draws, hero first.
 
 ## Scene sets: the education scenes
 
@@ -179,6 +179,39 @@ unrelated to the `night-sky` Background preset. Every icon is in the Free sheet,
 needs no substitution; `GAME_SUGGESTED_ICONS` lists the names, hero first.
 Importing the entry adds the ids to `SceneId`.
 
+## Scenes of your own
+
+A table of your own is a `SceneTable` (a row is `[plate, tone, layout, hero, ...satellites]`). Register it with `IllustrationDefaults` `sets`, and declare its ids once so `scene` accepts them beside the built-in ones, without a cast:
+
+The file that holds the `declare module` must be a module (it has an `import` or an `export`), otherwise the declaration replaces the module's types instead of augmenting them.
+
+```tsx
+import type { SceneTable } from '@nxgt/material-core/illustrations';
+import {
+  Illustration,
+  IllustrationDefaults,
+  type SceneTableIds,
+} from '@nxgt/material/illustrations';
+
+const MY_SCENES = {
+  'my-scene': ['cookie-9', 'primary', 0, 'star', 'moon', 'heart'],
+} satisfies SceneTable;
+
+declare module '@nxgt/material/illustrations' {
+  interface RegisteredScenes extends SceneTableIds<typeof MY_SCENES> {}
+}
+
+export function Example({ id }: { id: 'empty' | 'my-scene' }) {
+  return (
+    <IllustrationDefaults sets={[MY_SCENES]}>
+      <Illustration scene={id} />
+    </IllustrationDefaults>
+  );
+}
+```
+
+`RegisteredScenes` is an empty interface: each key is a scene id (the value is ignored). `SceneTableIds<typeof TABLE>` derives the keys of a table, so the augmentation is one line; write `interface RegisteredScenes { 'my-scene': true }` by hand if you prefer. The ids widen `SceneId` (so `RegisteredScene` too) for `Illustration scene`, a state's `illustration` and `emptyIllustration`. The declaration is only types: the table still has to be registered (`sets`) or passed (`scenes={MY_SCENES}`) to be drawn. Passing `scenes={MY_SCENES}` keeps its own typing: `scene` is then one of that table's ids only.
+
 ## Turn them on for an app
 
 `IllustrationDefaults` opts a subtree in: every default-size `EmptyState` and

package/docs/guides/theming.md

@@ -68,7 +68,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--accent`, `--accent-foreground` | `bg-accent`, … | hover surfaces |
 | `--nxgt-accent` | `[--nxgt-accent:…]` | the mark colour of the selection controls: the fill, handle, state layer and stop dots of `Slider`, the on state of `Switch`, the box and dot of `Checkbox` and `Radio`. It defaults to `--primary` (`--primary-text` in dark) and is set per control, so override it on the control itself, not on `:root` |
 | `--error`, `--success`, `--info`, `--warning` (+ `-foreground`) | `bg-error`, `text-success`, … | the status colours of `Button`, `Alert`, `Badge`, toasts |
-| `--primary-text` | `text-primary-text` | primary drawn as text or an icon on a page, card or popover surface: `Typography tone="primary"`, links, the `Alert` primary icon, selected labels. Equal to `--primary` in light; in dark, `--primary` mixed 60 % with white (`color-mix(in oklab, var(--primary) 40%, white)`), well over 4.5:1 on `--background` and `--card` |
+| `--primary-text` | `text-primary-text` | primary drawn as text or an icon on a page, card or popover surface: `Typography tone="primary"`, links, the `Alert` primary icon, selected labels. In light, `--primary` mixed toward black: 96 % at most, solved lower on a tinted page so a tonal Button label on a striped row reaches 4.6:1 (94 % on teal, 89 % on corail, 94 % on pink); in dark, `--primary` mixed 60 % with white (`color-mix(in oklab, var(--primary) 40%, white)`), well over 4.5:1 on `--background` and `--card` |
 | `--primary-indicator` | `bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator` | primary drawn as a non-text mark that carries a state (WCAG 1.4.11, 3:1): an active bar or dot, a selected or focused border, a ring, a spinner arc. Equal to `--primary` in light; in dark, `--primary` mixed 25 % with white (`color-mix(in oklab, var(--primary) 75%, white)`), 4.8:1 on `--background`, 4.5:1 on `--card`, 4.2:1 on `--muted` (`--primary` itself gives 2.7, 2.5 and 2.3:1) |
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
@@ -985,8 +985,8 @@ the fill can stay dark while the text is light enough to read. The light value
 is `color-mix(in oklab, var(--error) 92%, black)` (6.0:1 on `--background`,
 6.0:1 on `--card`, 5.0:1 on the `bg-error/10` tint of a focused menu item, where
 `--error` gives 5.0 and 4.2:1); the dark one is
-`color-mix(in oklab, var(--error) 76%, white)`, 6.25:1 on `--background` and
-5.9:1 on `--card` (5.2:1 on a focused error menu item), where `--error` itself gives 4.0 and 3.8:1. Field messages,
+`color-mix(in oklab, var(--error) 76%, white)` at most (6.25:1 on `--background` and
+5.9:1 on `--card` for the shared night, 5.2:1 on a focused error menu item, where `--error` itself gives 4.0 and 3.8:1). The share is solved per theme: it drops below 76 % (71 % on teal) when a lighter dark card would leave the text under 5.3:1, since a browser measures a hair under this module. Field messages,
 `HelperText` in its error state, form, dialog and upload errors, a textarea's
 counter over its limit, the error lines of `Terminal`, a
 `variant="error"` menu item and the falling values of the metric cards use it.
@@ -1011,8 +1011,8 @@ override on the root, or use a [theme zone](#themes), which re-declares them.
 **Primary text has a token of its own**, `--primary-text` (`text-primary-text`),
 for the same reason: the brand colour is a dark fill (it keeps near-white text
 readable on a button) and reads at only about 2:1 as text on the dark surfaces.
-The light value is `color-mix(in oklab, var(--primary) 96%, black)` (primary
-4 % toward black, 7.9:1 on the white page); the dark one is
+The light value is `color-mix(in oklab, var(--primary) 96%, black)` at most (primary
+4 % toward black, 7.9:1 on the white page; the share is solved per theme and drops when a tinted page would leave a tonal Button label under 4.6:1 on a striped row, to 94 % on teal); the dark one is
 `color-mix(in oklab, var(--primary) 40%, white)` (primary mixed 60 % with
 white, the recipe of the tonal `Button` labels). `Typography tone="primary"`,
 the `Alert` primary icon, links, selected labels and the other primary text of

package/docs/troubleshooting.md

@@ -1241,7 +1241,7 @@ on the page; the catalogue's own primary text passes.
 **Why:** it is drawn with `text-primary`, the fill colour. The brand colour is
 dark so that near-white text reads on it, which makes it too dark to read as
 text on the dark surfaces. Primary text has its own token, `--primary-text`:
-the same colour in light, `--primary` mixed 60 % with white in dark.
+`--primary` mixed toward black in light (96 % at most, solved per theme), `--primary` mixed 60 % with white in dark.
 **Fix:** draw primary text with `text-primary-text`; keep `text-primary` for
 fills, borders and rings:
 
@@ -2219,7 +2219,8 @@ opens a dialog. When they close, `document.activeElement` is `document.body`.
 when a dialog opened from an item closes), but a toast, a later dialog or a
 remounted row takes it afterwards.
 **Fix:** call `focusRowMenu(row.id)` from `useRowMenuFocus()` once the action
-settles, with `focusRef` on the table. It matches the row by id, not by label.
+settles, with `focusRef` on the table. It matches the row by id, not by label. A plain row button (not a `RowMenu`)
+needs `{...rowFocusProps(row.id)}` to be found.
 See "Handing the focus back to a row" in
 [RowMenu](components/data-table-filter-and-lists.md#handing-the-focus-back-to-a-row).
 

package/lib/components/ui/display/chip/chip-hairline.css

@@ -72,6 +72,25 @@
 	}
 }
 
+/* A toggle chip (`aria-checked` or `aria-pressed`: a choice of a
+ * ChipGroupField, a filter) is a control, and its boundary is what shows
+ * where it is: 3:1 against the page and the card (WCAG 1.4.11), in light and
+ * dark, on every preset (#2357). The soft look draws it too (chip-soft.css
+ * reads --chip-line). The share is checked in chip-line-contrast.test.ts. A
+ * plain or a coloured chip keeps its quiet look. */
+@layer components {
+	.nxgt-chip[data-tone="neutral"]:is([aria-checked], [aria-pressed]),
+	:is(.dark, [data-theme="dark"])
+		.nxgt-chip[data-tone="neutral"]:is([aria-checked], [aria-pressed]) {
+		--chip-line: color-mix(in oklab, var(--foreground) 50%, var(--background));
+		--chip-line-hover: color-mix(
+			in oklab,
+			var(--foreground) 64%,
+			var(--background)
+		);
+	}
+}
+
 /* A coloured chip: the hairline takes the tone, the face a breath of it,
  * hover included (through the variables the hover rule reads). */
 @layer components {

package/lib/components/ui/display/chip/chip-soft.css

@@ -65,6 +65,24 @@
 	}
 }
 
+/* A toggle chip left unselected keeps a boundary (--chip-line, set in
+ * chip-hairline.css): the fill alone is under 3:1 (#2357). Selected has its
+ * ring and its check. */
+@layer components {
+	.nxgt-chip[data-look="soft"][data-tone="neutral"]:is(
+		[aria-checked="false"],
+		[aria-pressed="false"]
+	) {
+		border-color: var(--chip-line);
+	}
+	.nxgt-chip[data-look="soft"][data-tone="neutral"]:is(
+		[aria-checked="false"],
+		[aria-pressed="false"]
+	):is(button:hover):not(:disabled, [data-disabled]) {
+		border-color: var(--chip-line-hover);
+	}
+}
+
 /* A coloured chip (`color` other than default) is a status: the tone
  * (in dark the base of the tone's container, --nxgt-tone-container-base: the
  * tone held at a container's lightness) at

package/lib/themes/ambre.css

@@ -1,6 +1,6 @@
 /* Theme "ambre", generated.
  * Seeds: primary oklch(0.52 0.13 48), secondary oklch(0.5 0.09 95), tertiary oklch(0.5 0.14 350), neutral hue 65, tint 0.85.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * hue-near-status: The primary's hue 48 is 14° from warning (62): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="ambre"] {

package/lib/themes/ardoise.css

@@ -1,6 +1,6 @@
 /* Theme "ardoise", generated.
  * Seeds: primary oklch(0.45 0.065 252), secondary oklch(0.48 0.05 215), tertiary oklch(0.48 0.1 290), neutral hue 250, tint 0.7.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;

package/lib/themes/bleumono.css

@@ -1,6 +1,6 @@
 /* Theme "bleumono", generated.
  * Seeds: primary oklch(0.46 0.13 255), secondary oklch(0.55 0.06 255), tertiary oklch(0.38 0.17 255), neutral hue 255, tint 1.1.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * chroma-lowered: tertiary: chroma 0.170 to 0.125 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 255 is 0° from info (254.624): they may read alike. Keep an icon and a word with every status.

package/lib/themes/bluemoon.css

@@ -1,6 +1,6 @@
 /* Theme "bluemoon", generated.
  * Seeds: primary oklch(0.45 0.12 265), secondary oklch(0.55 0.02 250), tertiary oklch(0.62 0.08 290), neutral hue 265, tint 1.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * lightness-moved: tertiary: lightness 0.620 to 0.563 for AA.
  * hue-near-status: The primary's hue 265 is 10° from info (254.624): they may read alike. Keep an icon and a word with every status.

package/lib/themes/corail.css

@@ -1,6 +1,6 @@
 /* Theme "corail", generated.
  * Seeds: primary oklch(0.58 0.17 35), secondary oklch(0.52 0.1 70), tertiary oklch(0.5 0.1 200), neutral hue 30, tint 0.8.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * lightness-moved: primary: lightness 0.580 to 0.575 for AA.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 35 is 8° from error (27.325): they may read alike. Keep an icon and a word with every status.
@@ -17,7 +17,7 @@
 	--popover-foreground: oklch(0.227 0.0136 30);
 	--primary: oklch(0.575 0.17 35);
 	--primary-foreground: oklch(0.984 0.003 30);
-	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 89%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.52 0.1 70);
 	--secondary-foreground: oklch(0.984 0.003 30);

package/lib/themes/foret.css

@@ -1,6 +1,6 @@
 /* Theme "foret", generated.
  * Seeds: primary oklch(0.48 0.1 152), secondary oklch(0.5 0.08 118), tertiary oklch(0.5 0.1 55), neutral hue 140, tint 0.8.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;

package/lib/themes/lavande.css

@@ -1,6 +1,6 @@
 /* Theme "lavande", generated.
  * Seeds: primary oklch(46% 0.1135 276.35), secondary oklch(48% 0.1135 245.65), tertiary oklch(45.91% 0.1864 310.75), neutral hue 292, tint 1.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="lavande"] {
 	--radius: 0.625rem;

package/lib/themes/menthe.css

@@ -1,6 +1,6 @@
 /* Theme "menthe", generated.
  * Seeds: primary oklch(0.5 0.105 168), secondary oklch(0.5 0.09 205), tertiary oklch(0.52 0.11 120), neutral hue 170, tint 0.8.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.101 (lowered to fit sRGB or AA).
  * chroma-lowered: secondary: chroma 0.090 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 168 is 17° from success (184.704): they may read alike. Keep an icon and a word with every status.

package/lib/themes/ocean.css

@@ -1,6 +1,6 @@
 /* Theme "ocean", generated.
  * Seeds: primary oklch(0.5 0.12 228), secondary oklch(0.52 0.09 192), tertiary oklch(0.5 0.13 268), neutral hue 230, tint 0.9.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.120 to 0.098 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.505 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).

package/lib/themes/pink.css

@@ -1,6 +1,6 @@
 /* Theme "pink", generated.
  * Seeds: primary oklch(0.55 0.2 345), secondary oklch(0.5 0.14 320), tertiary oklch(0.5 0.1 200), neutral hue 345, tint 0.7.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
@@ -15,7 +15,7 @@
 	--popover-foreground: oklch(0.227 0.0119 345);
 	--primary: oklch(0.55 0.2 345);
 	--primary-foreground: oklch(0.984 0.003 345);
-	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 94%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.5 0.14 320);
 	--secondary-foreground: oklch(0.984 0.003 345);

package/lib/themes/prune.css

@@ -1,6 +1,6 @@
 /* Theme "prune", generated.
  * Seeds: primary oklch(0.42 0.15 330), secondary oklch(0.5 0.1 355), tertiary oklch(0.55 0.1 85), neutral hue 330, tint 1.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="prune"] {
 	--radius: 0.5rem;

package/lib/themes/sable.css

@@ -1,6 +1,6 @@
 /* Theme "sable", generated.
  * Seeds: primary oklch(0.5 0.06 70), secondary oklch(0.5 0.05 45), tertiary oklch(0.5 0.07 150), neutral hue 75, tint 0.5.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="sable"] {
 	--radius: 0.5rem;

package/lib/themes/slate.css

@@ -1,6 +1,6 @@
 /* Theme "slate", generated.
  * Seeds: primary oklch(0.4 0.025 258), secondary oklch(0.48 0.02 230), tertiary oklch(0.46 0.045 275), neutral hue 258, tint 0.35.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  */
 [data-nxgt-theme="slate"] {
 	--radius: 0.25rem;

package/lib/themes/teal.css

@@ -1,6 +1,6 @@
 /* Theme "teal", generated.
  * Seeds: primary oklch(0.5 0.105 185), secondary oklch(0.52 0.09 215), tertiary oklch(0.52 0.12 60), neutral hue 190, tint 0.8.
- * Contrast: 65 pairs, 0 failing.
+ * Contrast: 66 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.088 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.490 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -19,7 +19,7 @@
 	--popover-foreground: oklch(0.227 0.0136 190);
 	--primary: oklch(0.5 0.0881 185);
 	--primary-foreground: oklch(0.984 0.003 190);
-	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 94%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.49 0.0866 215);
 	--secondary-foreground: oklch(0.984 0.003 190);
@@ -105,7 +105,7 @@
 	--accent-foreground: oklch(0.943 0.0096 190);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 190);
-	--error-text: color-mix(in oklab, var(--error) 76%, white);
+	--error-text: color-mix(in oklab, var(--error) 71%, white);
 	--success: oklch(0.6 0.118 145);
 	--success-foreground: oklch(0.995 0.002 190);
 	--info: oklch(0.707 0.165 254.62);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.76.0",
+	"version": "3.78.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.49.0",
+		"@nxgt/material-core": "^0.49.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",