@nxgt/material 3.64.0 → 3.66.0

package/docs/troubleshooting.md

@@ -79,6 +79,8 @@ words in your error.
 
 **Buttons & actions**
 
+- [`useHref() may be used only in the context of a <Router> component` on a `TabsNav`, `SegmentedNav` or a `LinkButton`](#usehref-may-be-used-only-in-the-context-of-a-router-component-on-a-tabsnav-segmentednav-or-a-linkbutton)
+- [A tab switch reloads the route's data, or the default tab shows `?tab=` in the URL](#a-tab-switch-reloads-the-routes-data-or-the-default-tab-shows-tab-in-the-url)
 - [An `ActionCard` inside a button or a link is a button inside a button](#an-actioncard-inside-a-button-or-a-link-is-a-button-inside-a-button)
 - [A `Card` class or a `[data-slot=card]` selector no longer styles an `ActionCard`](#a-card-class-or-a-data-slotcard-selector-no-longer-styles-an-actioncard)
 - [A `[data-slot=button]` selector no longer finds a SplitButton's half, or a class should style the whole split button](#a-data-slotbutton-selector-no-longer-finds-a-splitbuttons-half-or-a-class-should-style-the-whole-split-button)
@@ -1508,15 +1510,17 @@ top (`align="start"`).
 **When:** an `ActivityContent` `aside` scrolls away with the page instead of
 staying under the app bar, or it is not beside the content at 1280px.
 **Why:** `position: sticky` sticks inside its nearest scrolling ancestor, and
-any ancestor with an `overflow` other than `visible` (`overflow-hidden`,
-`overflow-auto`, `overflow-clip`; a `PaneLayout`'s root has `overflow-hidden`)
-becomes that scroller, which does not scroll, so the panel never moves. A
-wrapper of yours around the screen, or an `ActivityLayout` with
-`scroll="container"` where you meant `"document"`, does the same. Below
+any ancestor with an `overflow` other than `visible` or `clip`
+(`overflow-hidden`, `overflow-auto`; a `PaneLayout`'s root and content use
+`overflow-clip`, which clips without becoming a scroller, so a sticky panel
+inside still sticks) becomes that scroller, which does not scroll, so the
+panel never moves. A wrapper of yours around the screen, or an
+`ActivityLayout` with `scroll="container"` where you meant `"document"`, does
+the same. Below
 `asideFrom` (1280px by default) the panel is stacked and not sticky on
 purpose, and the breakpoint is the window's width, not the column's.
-**Fix:** take the `overflow` off every ancestor between `ActivityLayout` and
-`ActivityContent`, or move it onto an element inside the screen; use
+**Fix:** take the `overflow` (other than `visible` or `clip`) off every
+ancestor between `ActivityLayout` and `ActivityContent`, or move it onto an element inside the screen; use
 `scroll="document"` (the default). Find the culprit in the console:
 
 ```js
@@ -1906,6 +1910,30 @@ return <IconButton size="lg" {...rest} />;
 <Button size="xl">Save</Button>
 ```
 
+### `useHref() may be used only in the context of a <Router> component` on a `TabsNav`, `SegmentedNav` or a `LinkButton`
+
+**When:** a `TabsNavLink`, `SegmentedNavItem`, `LinkButton`, `IconLinkButton` or `ResponsiveLinkButton` renders in a test, a story or a tree with no router, and no `LinkComponentProvider`.
+**Why:** without a provider (or a `linkComponent` prop), they render React Router's `Link`, which reads the router's context.
+**Fix:** wrap the tree in your router (`MemoryRouter` in a test or a story), or set a `LinkComponentProvider` once.
+
+```tsx
+<MemoryRouter>
+	<TabsNav aria-label="Account" value="profile">
+		<TabsNavLink to="/profile" value="profile">Profile</TabsNavLink>
+	</TabsNav>
+</MemoryRouter>
+```
+
+### A tab switch reloads the route's data, or the default tab shows `?tab=` in the URL
+
+**When:** a route using `useTabParam` re-runs its loader on every tab click, or the first tab's link carries `?tab=overview`.
+**Why:** a search-param change revalidates the route's loaders unless `shouldRevalidate` says otherwise; and the default tab writes no param unless `explicitDefault` is on.
+**Fix:** export `skipTabChange()` as the route's `shouldRevalidate`, and leave `explicitDefault` off unless another param implies a tab. Parent routes' loaders still revalidate unless they export `skipTabChange` as well.
+
+```tsx
+export const shouldRevalidate = skipTabChange();
+```
+
 ## Feedback
 
 ### An `EmptyState` with no `kind` shows "No Data Found" where it showed "Something Went Wrong"

package/lib/components/components.css

@@ -122,6 +122,8 @@
 @import "./ui/primitives/accordion/accordion.css";
 @import "./ui/primitives/accordion/accordion-surfaces.css";
 @import "./ui/primitives/collapsible/collapsible.css";
+/* TabsNav in forced colours (the current link's mark). */
+@import "./ui/primitives/tabs/tabs-nav-forced.css";
 /* ToggleGroup: shared rules, then one file per variant. */
 @import "./ui/primitives/toggle-group/toggle-group.css";
 @import "./ui/primitives/toggle-group/toggle-group-connected.css";

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

@@ -1,6 +1,10 @@
 /* Chip `tonal` and `filled`, "soft": no outline at all. A low tonal fill that reads as a
  * chip on any surface; selected = the library's primary tint, a hairline
- * ring in primary-text and a check (the ≥3:1 cue), the label unchanged. */
+ * ring in primary-text and a check (the ≥3:1 cue), the label unchanged. In
+ * dark the tint is mixed from --primary-text, the light end of the primary,
+ * 56 % at rest and 58 % on hover, and the label is white: in all 14 themes
+ * the fill is ≥3:1 over the surface and the label ≥4.5:1 (#2044); the deep
+ * --primary gave 1.3:1. */
 @layer components {
 	.nxgt-chip[data-look="soft"] {
 		--chip-bg: color-mix(in oklab, var(--foreground) 6.5%, var(--background));
@@ -9,8 +13,8 @@
 			var(--foreground) 10%,
 			var(--background)
 		);
-		--chip-on: color-mix(in oklab, var(--primary) 12%, var(--background));
-		--chip-on-hover: color-mix(in oklab, var(--primary) 17%, var(--background));
+		--chip-on: color-mix(in oklab, var(--primary) 20%, var(--background));
+		--chip-on-hover: color-mix(in oklab, var(--primary) 25%, var(--background));
 		--chip-on-ring: color-mix(
 			in oklab,
 			var(--primary-text) 75%,
@@ -25,8 +29,13 @@
 			var(--foreground) 14%,
 			var(--background)
 		);
-		--chip-on: color-mix(in oklab, var(--primary) 42%, var(--background));
-		--chip-on-hover: color-mix(in oklab, var(--primary) 52%, var(--background));
+		--chip-on: color-mix(in oklab, var(--primary-text) 56%, var(--background));
+		--chip-on-hover: color-mix(
+			in oklab,
+			var(--primary-text) 58%,
+			var(--background)
+		);
+		--chip-on-text: white;
 		--chip-on-ring: color-mix(
 			in oklab,
 			var(--primary-text) 80%,
@@ -43,6 +52,11 @@
 		background: var(--chip-on);
 		box-shadow: inset 0 0 0 1px var(--chip-on-ring);
 	}
+	/* Dark: the label on the lighter fill is white (the foreground fell under
+	 * 4.5:1 on some themes' hover). Light keeps the foreground. */
+	.nxgt-chip[data-look="soft"][data-selected] {
+		color: var(--chip-on-text, var(--foreground));
+	}
 	.nxgt-chip[data-look="soft"][data-selected]:is(
 		button:hover,
 		:has(> button[data-slot="chip-body"]:hover)

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -149,9 +149,10 @@
 		backdrop-filter: blur(var(--nxgt-backdrop-blur));
 	}
 
-	/* Tabs: the strip is a band, its top corners rounded. (The segmented look
-	 * has its own track.) */
-	[data-slot="activity-layout"][data-backdrop] [data-slot="tabs-list"] {
+	/* Tabs and route tabs (`TabsNav`): the strip is a band, its top corners
+	 * rounded. (The segmented look has its own track.) */
+	[data-slot="activity-layout"][data-backdrop]
+	:is([data-slot="tabs-list"], [data-slot="tabs-nav"]) {
 		border-start-start-radius: var(--radius);
 		border-start-end-radius: var(--radius);
 		background: var(--nxgt-backdrop-fill-nav);

package/lib/components/ui/primitives/tabs/tabs-nav-forced.css

@@ -0,0 +1,27 @@
+/* The indicator hides when no link is current (a `value` that matches none). */
+[data-slot="tabs-nav"]:not(:has([data-state="active"]))
+> [data-slot="tabs-indicator"] {
+	visibility: hidden;
+}
+
+/* TabsNav in forced colours: the current link keeps a mark. The indicator and
+ * the active link's ::after are backgrounds and borders, which the browser
+ * flattens; they are painted again with the system Highlight. React only
+ * (tabs-classes.ts is shared with Vue, so this is not a class there). */
+@media (forced-colors: active) {
+	[data-slot="tabs-nav"][data-variant="underline"]
+		> [data-slot="tabs-indicator"],
+	[data-slot="tabs-nav"][data-variant="underline"]
+		[data-slot="tabs-trigger"][aria-current="page"]::after {
+		forced-color-adjust: none;
+		background: Highlight;
+	}
+	[data-slot="tabs-nav"][data-variant="segmented"]
+		> [data-slot="tabs-indicator"],
+	[data-slot="tabs-nav"][data-variant="segmented"]
+		[data-slot="tabs-trigger"][aria-current="page"]::after {
+		forced-color-adjust: none;
+		border: 2px solid Highlight;
+		background: Canvas;
+	}
+}

package/lib/components/ui/primitives/toggle-group/toggle-group-segmented.css

@@ -61,7 +61,8 @@
 		> .nxgt-toggle-group-item:hover:not(
 			:disabled,
 			[aria-checked="true"],
-			[aria-pressed="true"]
+			[aria-pressed="true"],
+			[aria-current="page"]
 		) {
 		background: var(--tg-seg-hover);
 	}
@@ -78,7 +79,11 @@
 	 * every chosen state is primary). Forced colours: the pill is hidden and
 	 * the SelectedItem rule in toggle-group.css wins (its layer-less rule). */
 	[data-variant="segmented"]
-	> .nxgt-toggle-group-item:is([aria-checked="true"], [aria-pressed="true"]) {
+	> .nxgt-toggle-group-item:is(
+		[aria-checked="true"],
+		[aria-pressed="true"],
+		[aria-current="page"]
+	) {
 		color: var(--primary-text);
 	}
 
@@ -135,6 +140,9 @@
 	/* Multiple: a pill per pressed item; touching pills join. Also a single
 	 * group of 9 or more items, which has no sliding pill. */
 	[data-variant="segmented"] > .nxgt-toggle-group-item[aria-pressed="true"],
+	/* SegmentedNav: a scrolling track has no sliding pill, the current link
+	 * paints its own. */
+	[data-variant="segmented"] > .nxgt-toggle-group-item[aria-current="page"],
 	[data-variant="segmented"]:has(> .nxgt-toggle-group-item:nth-of-type(9))
 		> .nxgt-toggle-group-item[aria-checked="true"] {
 		background: var(--tg-pill);

package/lib/components/ui/primitives/toggle-group/toggle-group.css

@@ -127,7 +127,11 @@
 	.nxgt-toggle-group-item {
 		border: 1px solid ButtonText;
 	}
-	.nxgt-toggle-group-item:is([aria-checked="true"], [aria-pressed="true"]) {
+	.nxgt-toggle-group-item:is(
+		[aria-checked="true"],
+		[aria-pressed="true"],
+		[aria-current="page"]
+	) {
 		forced-color-adjust: none;
 		background: SelectedItem;
 		color: SelectedItemText;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.64.0",
+	"version": "3.66.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,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.45.0",
+		"@nxgt/material-core": "^0.45.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",