@nxgt/material 3.76.0 → 3.77.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @nxgt/material
 
+## 3.77.0
+
+### Minor Changes
+
+- [#2336](https://github.com/softistx/nxgt-material/pull/2336) [`bdfa59d`](https://github.com/softistx/nxgt-material/commit/bdfa59d3566b2bc65c09214b735c2a1febb1c645) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Hero` gains `background` (the props of the `Background` of `@nxgt/material/backgrounds`: `preset`, `intensity`, `tone`, `fill`…, drawn `aria-hidden` behind the content, clipped by the band's radius, loaded on demand, replacing the built-in gradient and glows), `size="compact"` (a greeting band for a home page: `rounded-xl`, a Card's content padding, the title in `headline-lg` emphasized, a muted description, actions at the end from `lg` and wrapping below, buttons at least 44px tall) and `headingLevel` (1 to 6, default 1). `aria-label` now passes through to the section. The new type `HeroBackgroundProps` is exported from `@nxgt/material/components`. The default Hero renders as before. Fixes [#2335](https://github.com/softistx/nxgt-material/issues/2335).
+
+- [#2378](https://github.com/softistx/nxgt-material/pull/2378) [`034fe52`](https://github.com/softistx/nxgt-material/commit/034fe5294cebca878c3bcb53fe19753f29214ec3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `rowFocusProps(rowId)`, to spread on a plain row button (an edit pen opening a dialog) so `useRowMenuFocus().focusRowMenu(rowId)` hands the focus back to it like a `RowMenu` trigger, with no local map of button refs ([#2377](https://github.com/softistx/nxgt-material/issues/2377)).
+
+### Patch Changes
+
+- [#2351](https://github.com/softistx/nxgt-material/pull/2351) [`4eebac0`](https://github.com/softistx/nxgt-material/commit/4eebac0fe3574ce52acf9bdef722137c3df3c47b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the app bar's page title on a phone: a long title (a record's number such as `Prescription P00000001`) now wraps to a second line before it is cut with an ellipsis, so the identifier stays readable by touch, where the `title` tooltip cannot be reached. From `md` up it is unchanged (one line, ellipsis); the full-text `title` is still set whenever the text is cut off. Fixes [#2324](https://github.com/softistx/nxgt-material/issues/2324).
+
+- [#2374](https://github.com/softistx/nxgt-material/pull/2374) [`fef1413`](https://github.com/softistx/nxgt-material/commit/fef14130acaf94aa69a65ed4343504fd3b64870c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `ChangeHistory` on a phone: a long unbroken value (a URL, a reference) is no longer clipped inside the rail's value pill or the old value, and a long unbroken field name now wraps in both the rail and the cards instead of widening the page at 360px. Spaced text already wrapped. Fixes [#2358](https://github.com/softistx/nxgt-material/issues/2358).
+
+- [#2370](https://github.com/softistx/nxgt-material/pull/2370) [`fcdeacc`](https://github.com/softistx/nxgt-material/commit/fcdeacc3332119aa0860d986e55edceb24095227) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the unselected chips of a `ChipGroupField` (and any neutral toggle `Chip`, `aria-checked` or `aria-pressed`) having no visible container in dark mode: the tonal fill alone was about 1.2:1 over the card. An unselected toggle chip now draws a boundary of 50 % of `--foreground` over the page (64 % on hover), at least 3:1 against the page and the card in light and dark on the 14 presets, teal included (WCAG 1.4.11). Selected chips, plain and coloured chips are unchanged. Fixes [#2357](https://github.com/softistx/nxgt-material/issues/2357).
+
+- [#2347](https://github.com/softistx/nxgt-material/pull/2347) [`875ce11`](https://github.com/softistx/nxgt-material/commit/875ce1161e95e41594cf27b50958cbed0d831494) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `CurrencyField` and `CurrencyFormField` drawing the currency code in an opaque 32 px box off the field's fill, with the code at its top: the code now sits on the field's own surface and is centred on the amount's line, in light and dark and on touch screens ([#2343](https://github.com/softistx/nxgt-material/issues/2343)).
+
+- [#2353](https://github.com/softistx/nxgt-material/pull/2353) [`5d876d4`](https://github.com/softistx/nxgt-material/commit/5d876d4e27218dd0281cee04f33572c3026bb6fe) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Paint the EntityHeader band with the Card surface (`bg-card`) instead of the page ground (`bg-background`). In dark an EntityHeader beside a Card was near-black while the Card was a lighter surface; both now sit on the same elevation, in every preset. Fixes [#2323](https://github.com/softistx/nxgt-material/issues/2323).
+
+- [#2367](https://github.com/softistx/nxgt-material/pull/2367) [`7615ecc`](https://github.com/softistx/nxgt-material/commit/7615ecc5c8c54c3188742d1a4108ed39852dfbd5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EntityHeader`: a lone icon-only action (`expanded: false`) stays beside the title at narrow widths instead of taking its own row ([#2360](https://github.com/softistx/nxgt-material/issues/2360)).
+
+- [#2338](https://github.com/softistx/nxgt-material/pull/2338) [`ddcfa2c`](https://github.com/softistx/nxgt-material/commit/ddcfa2cf9e4166f9e86e9bb574ec02f5c5942bfb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(quantity-field): keep the number input a 44px tap target at 375px; the unit part shrinks before the number does ([#2327](https://github.com/softistx/nxgt-material/issues/2327)).
+
+- [#2364](https://github.com/softistx/nxgt-material/pull/2364) [`45bb1dd`](https://github.com/softistx/nxgt-material/commit/45bb1dd8fc939f3d57971054020de4622baeee96) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `ServerTable` on a phone without `actions` now puts the labelled "Select all" in the second row (with the sort and "Filters"), as it does with `actions`, instead of a blank full-width band holding a bare checkbox. Fixes [#2363](https://github.com/softistx/nxgt-material/issues/2363).
+
+- [#2373](https://github.com/softistx/nxgt-material/pull/2373) [`cc97b1a`](https://github.com/softistx/nxgt-material/commit/cc97b1a91e4137a109e641d73a93dd9012c09172) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs and a code comment only: the theming guides now describe `--primary-text` (light) and the dark `--error-text` as solved shares per theme (teal 94 %, corail 89 %, pink 94 %; dark error 71 % on teal), not the fixed 96 % and 76 %. No behaviour change.
+
+- [#2334](https://github.com/softistx/nxgt-material/pull/2334) [`599fab6`](https://github.com/softistx/nxgt-material/commit/599fab6f0b743b7b06e09fc420c5c52911bec201) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `TabsNav` (and `Tabs`) leaving the active tab half under a scroll chevron after the tabs or the list changed size (a web font, a count, a rotation): the active tab is now kept revealed, clear of the chevrons, until the person scrolls the list themselves ([#2328](https://github.com/softistx/nxgt-material/issues/2328)).
+
+- [#2362](https://github.com/softistx/nxgt-material/pull/2362) [`3bc6091`](https://github.com/softistx/nxgt-material/commit/3bc6091b15e0fa644907720b4b220ba43a09eaae) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The dark `--error-text` is solved against the dark `--background` and `--card`: its share of the error colour drops below 76 % when a lighter card (the teal preset's) would leave it under 5.3:1, so a field's error message and an inline alert keep 4.5:1 in axe on that card. Other presets are unchanged. Fixes [#2332](https://github.com/softistx/nxgt-material/issues/2332).
+
+- [#2366](https://github.com/softistx/nxgt-material/pull/2366) [`2ae3bba`](https://github.com/softistx/nxgt-material/commit/2ae3bbacf31cce96639579468d4edd2d2f66c943) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(theme): `primary-text` (light) darkens when a tinted page would leave a tonal Button label under 4.5:1 on a striped table row; Teal's label is now AA there. `CONTRAST_PAIRS` gains `primary-text` on `primary@row15` ([#2322](https://github.com/softistx/nxgt-material/issues/2322)).
+- Updated dependencies [[`cc97b1a`](https://github.com/softistx/nxgt-material/commit/cc97b1a91e4137a109e641d73a93dd9012c09172), [`3bc6091`](https://github.com/softistx/nxgt-material/commit/3bc6091b15e0fa644907720b4b220ba43a09eaae), [`2ae3bba`](https://github.com/softistx/nxgt-material/commit/2ae3bbacf31cce96639579468d4edd2d2f66c943)]:
+  - @nxgt/material-core@0.49.1
+
 ## 3.76.0
 
 ### Minor Changes

package/README.md

@@ -715,7 +715,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), `surface="none"` to sit in a Card with no frame of its own, a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog, and `rowFocusProps(rowId)` marks a plain row button the same way. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-recordactionsmenu.webp" width="120" alt="RecordActionsMenu"> | [`RecordActionsMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#recordactionsmenu), `useRecordActions` | A record's archive, restore and delete menu over `RowMenu`: Archive runs at once with an Undo toast that stays until dismissed, Restore runs at once, Delete permanently (archived records only) always asks and keeps a refusal in its locked dialog; `can` hides what is not allowed (and the whole menu when nothing is), `send` does the action, `onDone` follows it, `items` / `children` add your own entries, `messages` renames the words; `archivePolicy="confirm"` asks before archiving (no Undo), `consequence` notes what an action entails, `successAction` adds a toast action, and `ActionRefusal` / `isActionRefusal` carry a refusal's details and action. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`; `totalCount` is optional: a feed with no total shows no range, only Previous / Next; `hideOnSinglePage` renders nothing when there is no previous and no next page), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |
@@ -751,7 +751,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-toc.webp" width="120" alt="Toc"> | [`Toc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#toc) | On-this-page outline with a per-item active bar. Rail from `xl`, collapsible panel below. `DocToc` composes it. | `Toc` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress (expressive shapes, optional steps, a phone header with Back and Next). | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions; `size="compact"` is a home-page greeting band, and `background` draws a `Background` behind it. | `Hero`, `HeroBackgroundProps` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 52 presets on `/backgrounds`, and a `sky` overlay. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |

package/dist/{calculator-BaSMe0SK.js → calculator-DSSaYRmM.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, r as n, t as r, u as i } from "./tabs-DzEqMb1W.js";
+import { n as t, r as n, t as r, u as i } from "./tabs-BT9pSRwk.js";
 import { t as a } from "./button-3op3rtZh.js";
 import { t as o } from "./use-material-translation-CD6QoVal.js";
 import { t as s } from "./icon-button-Cogxy1cy.js";
@@ -282,7 +282,7 @@ var Re = {
 	scientific: () => import("./scientific-variant-2y3UxAAU.js"),
 	pos: () => import("./pos-variant-GrUfbTTP.js"),
 	programmer: () => import("./programmer-variant-eKJNKENL.js"),
-	financial: () => import("./financial-variant-BsZEa5sF.js"),
+	financial: () => import("./financial-variant-vZdgyMeN.js"),
 	conversion: () => import("./conversion-variant-BDFAxqe9.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();

package/dist/calculator-field.js

@@ -3,9 +3,9 @@ import { t } from "./button-3op3rtZh.js";
 import { t as n } from "./use-material-translation-CD6QoVal.js";
 import { t as r } from "./icon-button-Cogxy1cy.js";
 import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CV09H7Nb.js";
-import { r as l, t as u } from "./currency-field-BJ9rSrif.js";
+import { r as l, t as u } from "./currency-field-DWHB5oms.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-BaSMe0SK.js";
+import { t as p } from "./calculator-DSSaYRmM.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-BaSMe0SK.js";
+import { n as e, t } from "./calculator-DSSaYRmM.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

package/dist/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/dist/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