@nxgt/material 3.65.0 → 3.67.0

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.65.0",
+	"version": "3.67.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"