@nxgt/material-vue 0.39.0 → 0.40.1

package/docs/guides/theming.md

@@ -134,7 +134,7 @@ import { Button } from '@nxgt/material-vue/components';
 
 **Contrast.** The shipped light palette keeps the text of every filled status
 colour at 4.5:1 or more (WCAG 1.4.3): `--secondary` 5.7:1, `--success` 5.6:1,
-`--info` 5.8:1 and `--warning` 5.3:1 against their `-foreground`, and
+`--info` 5.8:1 and `--warning` 5.5:1 against their `-foreground`, and
 `--secondary` as text (a `tonal`, `outlined` or `link` `Button`) 6.0:1 on
 `--background`, 4.8:1 on its own 15 % `tonal` tint.
 
@@ -144,8 +144,8 @@ and 5.8:1 on `--card` (a `tonal` secondary `Button` 5.4:1 and 4.6:1). Under
 near-white text those brights are too light, so every filled surface built on
 them is tinted in the dark theme: a filled `secondary` `Button`, `IconButton`
 or `Badge` at 70 % (5.2:1 on `--background`, 4.9:1 on `--card`), a filled
-`success`, `info` or `warning` one at 60 % (7.3:1, 5.7:1 and 7.5:1 on
-`--background`; 6.7:1, 5.3:1 and 7.0:1 on `--card`). Their hover, focus and
+`success`, `info` or `warning` one at 60 % (7.3:1, 5.7:1 and 6.0:1 on
+`--background`; 6.7:1, 5.3:1 and 5.6:1 on `--card`; the `warning` `Button` 6.5:1). Their hover, focus and
 pressed states are tinted further down, so they only gain contrast.
 
 In the light theme the filled `primary`, `secondary`, `success`, `info`,
@@ -161,9 +161,9 @@ their text and icon in one tone per colour, read on `--background`, on
 `--card` and on the variant's own tint (15 % at most, at rest or focused). In
 the light theme `primary`, `secondary`, `info` and `success` use the token
 itself (5.8, 4.8, 4.9 and 4.7:1 at their lowest) and `warning` and `error` the
-token mixed with 15 % black (6.0 and 5.4:1). In the dark theme `primary` is
+token mixed with 15 % black (6.4 and 5.4:1). In the dark theme `primary` is
 mixed with 60 % white (8.1:1 on `--card`: the token itself is a dark indigo,
-2.2:1), `success` and `warning` with 15 % white (5.0 and 5.4:1), `error` with
+2.2:1), `success` and `warning` with 15 % white (5.0 and 6.3:1), `error` with
 30 % white (5.9:1), and `secondary` and `info` use the token (4.6 and 5.3:1).
 The tones are mixed from the tokens (`color-mix(in oklab, var(--color-error)
 85%, black)`), so an override of a token moves its tone with it; a text colour
@@ -179,6 +179,29 @@ darker than the dark theme's: a filled `error` button's near-white text reaches
 4.8:1 (it was 4.6:1). The dark `--error` keeps `0.577`: a lighter value drops
 the filled surface's near-white text below 4.5:1 (`0.62` gives 3.85:1).
 
+**`--warning` is amber**, a hue apart from `--error` (62 against 27 degrees in
+the light theme, 70 in the dark one), so a warning `Alert`, `Banner`, `Badge`
+or toast does not read as a failure. Light `oklch(0.52 0.13 62)` is 5.5:1
+under its near-white `-foreground`; dark `oklch(0.7 0.15 70)` reads as text at
+7.3:1 on `--background` and 6.5:1 on `--card` (6.6 and 5.8:1 on its 10 % tint). An app that overrides `--warning` keeps its own
+value; one that keeps the shipped value sees its `bg-warning` and
+`text-warning` surfaces change hue, and re-checks its custom pairs.
+
+**A selected `DataTable` row** (`TableRow`, `data-state="selected"`) is a 15 %
+primary tint with `foreground` text, a bar on the inline-start edge of its
+first cell (`before:`, primary in the light theme, primary mixed with 60 %
+white in the dark one: 5.9:1 in light and 8.2:1 or more in dark against the
+row), and the checkbox, drawn in the same dark colour (8.2:1 or more). The
+tint is too light to be told from its neighbour alone (1.2:1 in light, 1.06 to
+1.11:1 in dark), which is what keeps the text at 4.5:1 or more on a page and on
+a `Card`: 15.9:1 in light, and in dark 17.5:1 on a page, 17.1:1 in a `DataTable`
+on a `Card` and 15.4:1 for a bare `TableRow` on a `Card`. Links and
+`text-muted-foreground` texts (drawn as `foreground` at 70 %) are 7.0:1 in
+light and 8.15:1 in dark for a bare row on a `Card`. A `text-error-text` text
+keeps its colour. Do not
+put `text-primary-foreground` in a cell for a selected row: it is near-white
+on that tint.
+
 **Error text has a token of its own**, `--error-text` (`text-error-text`), so
 the fill can stay dark while the text is light enough to read. The light value
 is `color-mix(in oklab, var(--error) 94%, black)` (5.7:1 on `--background`
@@ -212,7 +235,7 @@ the surfaces' text, the error text (`HelperText` and a field's message on
 `--background` and `--card`), the `Alert`s and the `Timeline`, `Button` and
 `IconButton` in every variant and colour, and a `Badge` link in every colour,
 at rest, hovered, focused and pressed, the tracks and the tabs;
-`Data display/ListTile` measures the selected tile. Run them against your own
+`Data display/ListTile` measures the selected tile, `Data table, filter & lists/DataTable/On a card` the header, the cells, the links and the selected rows on a page and on a `Card` (also right-to-left), and `Feedback & status/Alert/Tones contrast` the warning, error and success alerts there. Run them against your own
 tokens after an override.
 
 **Tabs.** An `underline` tab's active label is `--primary` in the light

package/docs/roadmap.md

@@ -90,9 +90,14 @@ version they shipped in, and planned entries may name the major they target.
   Vue only: `@nxgt/material`'s print blocks already produce a PDF.
 - **`StepperIndicator`, as in `@nxgt/material`** — the step markers on their
   own, for a stepper laid out your way.
+- **Facets panel: `Filter variant="facets"`** — collapsible FacetGroups sharing the filter bar's state, a sheet on a phone
 
 ## Later
 
+- **A CSP without `style-src-attr 'unsafe-inline'`** — the four form controls'
+  hidden inputs no longer need it; the checked `Checkbox` indicator,
+  `SelectValue`, the `RadioGroup` root, `Slider` and popper positioning still
+  do. Inventory: softistx/nxgt-material#596.
 - **Next major: an error `Banner` interrupts** — `tone="error"` becomes
   `role="alert"` `aria-live="assertive"`, so a screen reader reads it out at
   once. Every tone is `role="status"` `aria-live="polite"` today; pass

package/docs/troubleshooting.md

@@ -1345,12 +1345,12 @@ no `position`; it still covers the bottom when the app mounts vue-sonner's own
 `position`, which applies on every screen.
 **Fix:** mount the `Toaster` from `@nxgt/material-vue/components`, and drop a
 bottom `position` unless the bottom is what you want on phones too. When a
-sticky header must stay visible above the toasts, raise the phone offset's
-`top`:
+sticky header is taller than the app shell's (72px with its margin), raise the
+phone offset's `top` (80 by default, so toasts start below that bar):
 
 ```vue
 <Toaster />                          <!-- top-center on a phone -->
-<Toaster :mobile-offset="{ top: 72 }" />
+<Toaster :mobile-offset="{ top: 96 }" />
 <Toaster position="bottom-center" /> <!-- bottom-center on every screen -->
 ```
 
@@ -3333,8 +3333,8 @@ while a `Switch`, `SwitchField` or `SwitchFormField` with `required` and a
 proceed".
 **Why:** `required` used to draw only the label's asterisk. It now reaches the
 switch, which is announced as required (`aria-required`), and its hidden input
-is `required`, so the browser's native validation blocks the submit, as for a
-required checkbox.
+is `required`, so once hydrated the browser's native validation blocks the
+submit, as for a required checkbox.
 **Fix:** leave `required` on a switch that must be on (an agreement); drop it
 from one that may stay off. A form that validates itself (vee-validate) can
 turn native validation off with `novalidate`:

package/lib/components/theme-tokens.css

@@ -38,7 +38,9 @@
 	--success-foreground: oklch(0.984 0.003 247.858);
 	--info: oklch(0.5 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.54 0.222 41.116);
+	/* Amber, a hue apart from --error (27): a warning must not read as a
+	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
+	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: var(--error);
 	--border: oklch(0.929 0.013 255.508);
@@ -94,7 +96,10 @@
 	--success-foreground: oklch(0.984 0.003 247.858);
 	--info: oklch(0.707 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.646 0.222 41.116);
+	/* Amber too, as text: 7.3:1 on --background and 6.5:1 on --card, 6.6:1 and
+	   5.8:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   6.0:1 on a page and 5.6:1 on a Card. */
+	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);

package/lib/nuxt/component-names.ts

@@ -241,6 +241,7 @@ export const COMPONENT_NAMES = [
 	'EventCard',
 	'EventChip',
 	'ExtendedLabel',
+	'FacetGroup',
 	'FeatureCard',
 	'Field',
 	'Figure',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.39.0",
+	"version": "0.40.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.11.0",
+		"@nxgt/material-core": "^0.11.1",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",