@nxgt/material 3.64.0 → 3.66.0

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-_ezD5B0r.js";
-import { t as o } from "./use-material-translation-C_1cWRzW.js";
-import { i as s, n as c, o as l } from "./code-language-items-andgHKrM.js";
-import { r as u, t as d } from "./field-blur-DyOByjzw.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-BmNYNaRB.js";
+import { t as o } from "./use-material-translation-DkE9J5NE.js";
+import { i as s, n as c, o as l } from "./code-language-items-xhmbF6wA.js";
+import { r as u, t as d } from "./field-blur-B2y-bNYi.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-B0tN8Ha_.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BYhBAfcc.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
 import { getCspNonce as F } from "@nxgt/material-core/csp-nonce";

package/dist/{code-language-items-andgHKrM.js → code-language-items-xhmbF6wA.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-_SyVmSuy.js";
-import { t as n } from "./use-material-translation-C_1cWRzW.js";
+import { d as e, f as t } from "./dropdown-menu-DdzyvN76.js";
+import { t as n } from "./use-material-translation-DkE9J5NE.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

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