@nxgt/material 3.7.0 → 3.7.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nxgt/material
 
+## 3.7.2
+
+### Patch Changes
+
+- [#1361](https://github.com/softistx/nxgt-material/pull/1361) [`4303761`](https://github.com/softistx/nxgt-material/commit/430376168103b49c0213cac6905b5497ef64b4c6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the chrome of an `ActivityLayout` with a `backdrop` letting the shapes run behind its text ([#1356](https://github.com/softistx/nxgt-material/issues/1356)). Under `data-backdrop`, the sidebar, the app bar, the breadcrumb, the tabs strip and the lists/tables (`DataTable`, `ServerTable`) take an opaque surface, tuned by `--nxgt-backdrop-chrome` (default `var(--background)`) and `--nxgt-backdrop-surface` (default `var(--card)`). Nothing changes without a `backdrop`.
+  
+  The backdrop layer now sits in the content column, and the frame's gutters take the chrome fill, so no shape is cut at the edges. `DataTable` and `ServerTable` keep their look without a backdrop with an equivalent class (`bg-[color:var(--nxgt-backdrop-fill-surface,color-mix(...80%...))]` in place of `bg-background/80`).
+
+## 3.7.1
+
+### Patch Changes
+
+- [#1367](https://github.com/softistx/nxgt-material/pull/1367) [`1c545b2`](https://github.com/softistx/nxgt-material/commit/1c545b2bf839f2793292b9fbcd3b6b195b1224f9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Dark theme: primary drawn as a non-text mark now reaches 3:1 (WCAG 1.4.11). The dark `--primary` is only 2.1 to 2.5:1 on `--background`, `--card` and `--muted`, so the marks that carried a state with it failed. A new token, `--primary-indicator` (`bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator`), is `--primary` in light and, in dark, `--primary` mixed 25 % with white (4.5, 4.1 and 3.7:1). `@nxgt/material` uses it for the Toc, Stepper and ScrollProgress bars, the Spinner arc, the primary StatusIndicator dot, the carousel and gallery dots, the Alert, pricing, timeline, notice and message cards, the OTP, inline-edit, file-list, upload, image-field, Kanban, sortable-list, PDF thumbnail, image-editor filter and snap-target focus, selection and drag borders and rings, the chat reply quote, the audio frame, the editor comment and suggestion rows and the compact editor focus, the period card and the metric tones. `@nxgt/material-vue` only gains the token (`theme-tokens.css`, shared byte for byte with `@nxgt/material`); its components are unchanged. `--primary` itself is unchanged, as is the dark `--error-text` (76 %: 5.85:1 on `--background`, 5.35:1 on `--card`, 4.80:1 on `--muted`); the Contrast stories now assert it on all three surfaces. Fixes [#1366](https://github.com/softistx/nxgt-material/issues/1366).
+
 ## 3.7.0
 
 ### Minor Changes

package/dist/{button-1Fornjtn.js → button--cF4gY14.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-Bcd2Z3ea.js";
 import { F as t, P as n, o as r, t as i } from "./tooltip-tmFoTU_d.js";
-import { t as a } from "./spinner-D-FE_mTW.js";
+import { t as a } from "./spinner-CtGCPza-.js";
 import { i as o, r as s, t as c } from "./button-tones-BgZJ1tkD.js";
 import { Children as l, Fragment as u, cloneElement as d, isValidElement as f, useCallback as p, useContext as m, useEffect as h, useRef as g, useState as _ } from "react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";

package/dist/charts.js

@@ -1,7 +1,7 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-Bcd2Z3ea.js";
 import { t as n } from "./use-material-translation-hLQzOjF0.js";
-import { t as r } from "./button-1Fornjtn.js";
+import { t as r } from "./button--cF4gY14.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";

package/dist/{code-editor-DeZYlIO2.js → code-editor-0CdGwKDg.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-Bcd2Z3ea.js";
 import { D as n } from "./tooltip-tmFoTU_d.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-DiZvX4tG.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-DWtgUVW7.js";
 import { a as c, i as l, n as u } from "./field-blur-context-Dw9ZAgBr.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-DnkS3bDY.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-DsDDD5AY.js";
 import { t as g } from "./is-production-GLw59WU8.js";
 import { t as _ } from "./use-material-translation-hLQzOjF0.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-Bb7afEj-.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-CGARRbVm.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-B8k7DvFa.js";
 import { t as T } from "./skeleton-Bmp4gWAH.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-Bcd2Z3ea.js";
 import { D as t } from "./tooltip-tmFoTU_d.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-DnkS3bDY.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-DsDDD5AY.js";
 import { t as o } from "./use-material-translation-hLQzOjF0.js";
-import { i as s, n as c, o as l } from "./code-language-items-Bb7afEj-.js";
+import { i as s, n as c, o as l } from "./code-language-items-CGARRbVm.js";
 import { r as u, t as d } from "./field-blur-DFUazxsL.js";
 import { t as f } from "./skeleton-Bmp4gWAH.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-DeZYlIO2.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-0CdGwKDg.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-Bb7afEj-.js → code-language-items-CGARRbVm.js}

@@ -1,4 +1,4 @@
-import { d as e, f as t } from "./dropdown-menu-DiZvX4tG.js";
+import { d as e, f as t } from "./dropdown-menu-DWtgUVW7.js";
 import { t as n } from "./use-material-translation-hLQzOjF0.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";

package/dist/components/animations/scroll.css

@@ -132,7 +132,7 @@
 		z-index: 50;
 		height: 0.25rem;
 		pointer-events: none;
-		background-color: var(--primary);
+		background-color: var(--primary-indicator);
 	}
 	transform-origin: 0 50%;
 	animation: nx-scroll-progress linear both;

package/dist/components/base-content.css

@@ -43,7 +43,7 @@
 				}
 
 				.column-resize-handle {
-					background-color: var(--color-primary);
+					background-color: var(--color-primary-indicator);
 					bottom: -2px;
 					pointer-events: none;
 					position: absolute;

package/dist/components/base.css

@@ -124,7 +124,7 @@
 			height: 0.55em;
 			transform: scale(0);
 			transition: 120ms transform ease-in-out;
-			box-shadow: inset 1em 1em var(--color-primary);
+			box-shadow: inset 1em 1em var(--color-primary-indicator);
 		}
 		input[type="checkbox"]:checked::before {
 			transform: scale(1);

package/dist/components/editor-field-expressive.css

@@ -37,6 +37,11 @@
 		border-color: color-mix(in oklab, var(--primary) 60%, transparent);
 		box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 50%, transparent);
 	}
+	/* Dark: the 60 % border is under 3:1 on the card (WCAG 1.4.11). */
+	:is(.dark, [data-theme="dark"])
+	[data-slot="compact-editor"][data-look="expressive"]:focus-within {
+		border-color: var(--primary-indicator);
+	}
 	[data-slot="editor-field"][data-invalid]
 		:is(
 			[data-slot="compact-editor"],

package/dist/components/editor-prose.css

@@ -115,7 +115,7 @@
 		}
 
 		blockquote {
-			border-inline-start: 3px solid var(--primary);
+			border-inline-start: 3px solid var(--primary-indicator);
 			padding-inline-start: 1.1em;
 			color: var(--muted-foreground);
 			font-family: var(--nxgt-prose-heading-font);

package/dist/components/theme-tokens.css

@@ -17,6 +17,11 @@
 	   the violet page (7.9:1 on a Card; the colour itself gives 6.8:1 on the
 	   page); the dark theme lifts it. */
 	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	/* Primary drawn as a non-text mark (WCAG 1.4.11, 3:1): an indicator bar or dot,
+	   a selected or focused border, a ring, a spinner arc, a progress fill
+	   (`bg-primary-indicator`, `border-primary-indicator`...). Light is --primary;
+	   the dark theme lifts it. */
+	--primary-indicator: var(--primary);
 	/* --secondary, --success and --info are 0.02 darker than before: on the
 	   violet page tint (--background, 97.3 %) their own 15 % tonal tint gave the
 	   text 4.3 to 4.5:1; now 4.7:1 or more on the page and on a Card. */
@@ -104,6 +109,9 @@
 	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
 	   on --background and --card. */
 	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
+	/* --primary itself is 2.5:1 on --background, 2.3:1 on --card and 2.1:1 on
+	   --muted. Mixed 25 % toward white: 4.5:1, 4.1:1 and 3.7:1. */
+	--primary-indicator: color-mix(in oklab, var(--primary) 75%, white);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.3:1
 	   on --background, 5.8:1 on --card; 4.6:1 on its own 15 % tonal tint over a
 	   Card). A filled secondary surface mixes it toward --background (the opaque

package/dist/components/ui/display/period-cards/period-cards.css

@@ -49,8 +49,8 @@
 		pointer-events: none;
 	}
 	[data-slot="period-card"][data-state="current"] {
-		--card-bar: var(--primary);
-		border-color: var(--primary);
+		--card-bar: var(--primary-indicator);
+		border-color: var(--primary-indicator);
 		background: color-mix(in oklab, var(--primary) 7%, var(--card));
 	}
 	[data-slot="period-card"][data-state="past"] {

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

@@ -1,11 +1,24 @@
 /* ActivityLayout's `backdrop` prop: a node (a `Background` preset from
- * `@nxgt/material/backgrounds`) drawn behind the frame instead of the built-in
+ * `@nxgt/material/backgrounds`) drawn behind the content column instead of the built-in
  * gradient. `data-backdrop` is on the layout's root only while one is given, so
  * without it nothing here matches and the gradient is unchanged.
  *
  * Plain CSS, no inline `style`, in `@layer components` like the rest: an app's
  * utilities still win. The layer itself (`data-slot="activity-layout-backdrop"`)
- * is positioned by classes in activity-layout.tsx. */
+ * is in the content column, positioned by classes in activity-layout.tsx: the
+ * frame's padding and gaps take the chrome fill, so the shapes show nowhere
+ * else.
+ *
+ * The shapes show in the free content area only: every surface of the chrome and
+ * of the lists is opaque, so none runs behind a text, an icon or a control. Two
+ * tokens, set on the layout (or any ancestor), tune them:
+ *   --nxgt-backdrop-chrome   the sidebar, the app bar, the breadcrumb, the tabs
+ *                            strip (default: var(--background))
+ *   --nxgt-backdrop-surface  the lists and tables, their band and rows
+ *                            (default: var(--card))
+ * The sidebar, the app bar and the tables take theirs from a class whose
+ * fallback is their usual surface, through `--nxgt-backdrop-fill-*`: a utility
+ * class outranks any rule in a layer, so a rule here could not set them. */
 @layer components {
 	/* The gradient's own tint and blobs give way to the backdrop. */
 	[data-slot="activity-layout"][data-backdrop] {
@@ -21,4 +34,30 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	[data-slot="activity-layout"][data-backdrop] {
+		--nxgt-backdrop-fill-chrome: var(--nxgt-backdrop-chrome, var(--background));
+		--nxgt-backdrop-fill-surface: var(--nxgt-backdrop-surface, var(--card));
+	}
+
+	/* The breadcrumb trail: a pill under the app bar, as wide as its crumbs. */
+	[data-slot="activity-layout"][data-backdrop]
+		[data-slot="activity-layout-frame"]
+		> *
+		> [data-slot="breadcrumb"] {
+		width: fit-content;
+		max-width: 100%;
+		padding-block: 0.25rem;
+		padding-inline-end: 0.75rem;
+		border-radius: 999px;
+		background: var(--nxgt-backdrop-fill-chrome);
+	}
+
+	/* 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"] {
+		border-start-start-radius: var(--radius);
+		border-start-end-radius: var(--radius);
+		background: var(--nxgt-backdrop-fill-chrome);
+	}
 }

package/dist/components/ui/media/pdf-viewer/pdf-viewer.css

@@ -9,7 +9,7 @@
 }
 
 .pdf-highlight[data-current] {
-	outline: 2px solid var(--color-primary);
+	outline: 2px solid var(--color-primary-indicator);
 	outline-offset: 1px;
 }