@nxgt/material 3.76.0 → 3.77.0

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.77.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",