@nxgt/material 3.85.0 → 3.86.0

package/lib/themes/bluemoon.css

@@ -1,6 +1,6 @@
 /* Theme "bluemoon", generated.
  * Seeds: primary oklch(0.45 0.12 265), secondary oklch(0.55 0.02 250), tertiary oklch(0.62 0.08 290), neutral hue 265, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * lightness-moved: tertiary: lightness 0.620 to 0.563 for AA.
  * hue-near-status: The primary's hue 265 is 10° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 265);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 265);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 265);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 265);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 265);

package/lib/themes/corail.css

@@ -1,6 +1,6 @@
 /* Theme "corail", generated.
  * Seeds: primary oklch(0.58 0.17 35), secondary oklch(0.52 0.1 70), tertiary oklch(0.5 0.1 200), neutral hue 30, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * lightness-moved: primary: lightness 0.580 to 0.575 for AA.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 35 is 8° from error (27.325): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 30);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 30);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 30);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 30);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 30);

package/lib/themes/foret.css

@@ -1,12 +1,14 @@
 /* Theme "foret", generated.
  * Seeds: primary oklch(0.48 0.1 152), secondary oklch(0.5 0.08 118), tertiary oklch(0.5 0.1 55), neutral hue 140, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 140);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 140);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 140);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 140);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 140);

package/lib/themes/lavande.css

@@ -1,12 +1,14 @@
 /* Theme "lavande", generated.
  * Seeds: primary oklch(46% 0.1135 276.35), secondary oklch(48% 0.1135 245.65), tertiary oklch(45.91% 0.1864 310.75), neutral hue 292, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="lavande"] {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 290);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 290);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 291.3);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 289.4);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 291.3);

package/lib/themes/menthe.css

@@ -1,6 +1,6 @@
 /* Theme "menthe", generated.
  * Seeds: primary oklch(0.5 0.105 168), secondary oklch(0.5 0.09 205), tertiary oklch(0.52 0.11 120), neutral hue 170, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.101 (lowered to fit sRGB or AA).
  * chroma-lowered: secondary: chroma 0.090 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 168 is 17° from success (184.704): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 170);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 170);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 170);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 170);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 170);

package/lib/themes/ocean.css

@@ -1,6 +1,6 @@
 /* Theme "ocean", generated.
  * Seeds: primary oklch(0.5 0.12 228), secondary oklch(0.52 0.09 192), tertiary oklch(0.5 0.13 268), neutral hue 230, tint 0.9.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.120 to 0.098 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.505 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0153 230);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0153 230);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0108 230);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0171 230);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0108 230);

package/lib/themes/pink.css

@@ -1,6 +1,6 @@
 /* Theme "pink", generated.
  * Seeds: primary oklch(0.55 0.2 345), secondary oklch(0.5 0.14 320), tertiary oklch(0.5 0.1 200), neutral hue 345, tint 0.7.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
@@ -8,6 +8,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 345);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0119 345);
@@ -77,6 +79,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 345);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0133 345);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0084 345);

package/lib/themes/prune.css

@@ -1,12 +1,14 @@
 /* Theme "prune", generated.
  * Seeds: primary oklch(0.42 0.15 330), secondary oklch(0.5 0.1 355), tertiary oklch(0.55 0.1 85), neutral hue 330, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="prune"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 330);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 330);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 330);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 330);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 330);

package/lib/themes/sable.css

@@ -1,12 +1,14 @@
 /* Theme "sable", generated.
  * Seeds: primary oklch(0.5 0.06 70), secondary oklch(0.5 0.05 45), tertiary oklch(0.5 0.07 150), neutral hue 75, tint 0.5.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="sable"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0085 75);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0085 75);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.006 75);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0095 75);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.006 75);

package/lib/themes/slate.css

@@ -1,12 +1,14 @@
 /* Theme "slate", generated.
  * Seeds: primary oklch(0.4 0.025 258), secondary oklch(0.48 0.02 230), tertiary oklch(0.46 0.045 275), neutral hue 258, tint 0.35.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="slate"] {
 	--radius: 0.25rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.006 258);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.006 258);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0042 258);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0067 258);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0042 258);

package/lib/themes/teal.css

@@ -1,6 +1,6 @@
 /* Theme "teal", generated.
  * Seeds: primary oklch(0.5 0.105 185), secondary oklch(0.52 0.09 215), tertiary oklch(0.52 0.12 60), neutral hue 190, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.088 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.490 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -12,6 +12,8 @@
 	--background: oklch(0.973 0.0064 190);
 	--foreground: oklch(0.227 0.0136 190);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 190);
@@ -81,6 +83,8 @@
 	--background: oklch(0.192 0.0128 190);
 	--foreground: oklch(0.943 0.0096 190);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.262 0.0152 190);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 190);

package/package.json

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

package/dist/lib/components/ui/layout/app-bar/top-app-bar.d.ts

@@ -1,18 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-export type TopAppBarProps = {
-    /**
-     * The bar's look. `'small'` (the default): one row of `children`.
-     * `'center'`: the row's content centred. `'medium'` and `'large'`: the
-     * `headline` on a second row, in display type (`'large'` a taller row and a
-     * bigger step); without a `headline` they draw as `'small'`.
-     */
-    variant?: 'small' | 'center' | 'medium' | 'large';
-    /** The title of a `medium` or `large` bar: its second row. Make it the page's heading with an element of your own, `<h1>`. */
-    headline?: ReactNode;
-} & ComponentProps<'div'>;
-/**
- * A top app bar: a row of actions and a title, in the Material 3 sizes. It
- * does not scroll itself; `ActivityLayout`'s `header` collapses and hides the
- * shell's own bar.
- */
-export declare function TopAppBar({ variant, headline, className, children, ...props }: TopAppBarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-header-row.d.ts

@@ -1,3 +0,0 @@
-import { AppHeaderProps } from './app-header.js';
-/** The bar's one row: the menu, the top navigation, the titles, the actions and the account. */
-export declare function AppHeaderRow({ items, linkComponent, children, topNav, actions, avatar, search, back, brand, logo, name, context, menuOpen, onMenuOpenChange, showMenuIcon, }: Omit<AppHeaderProps, 'className' | 'variant' | 'collapse' | 'hideOnScroll' | 'headline' | 'tabs'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/header-context.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * The app bar's small muted context line (the tenant), after the page's
- * title: from `md` up only, truncated with an ellipsis, and only then
- * carrying a `title` with the full text (#629). The title truncates before
- * it does (this line never shrinks below its own cap).
- */
-export declare function HeaderContext({ children }: {
-    children?: ReactNode;
-}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/page-title.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-/** The type step and the fit of each size. */
-declare const SIZES: {
-    readonly bar: readonly ["title-medium", "min-w-0 max-md:line-clamp-2 max-md:break-words md:truncate"];
-    readonly headline: readonly ["headline-lg", "min-w-0 truncate"];
-    readonly display: readonly ["display-md", "min-w-0 line-clamp-2 break-words"];
-};
-/**
- * The page's one `h1`, in the app bar: from `md` up truncated with an
- * ellipsis when long, on a phone wrapped to two lines first (a record's number
- * stays readable by touch, #2324), and only when cut off carrying a `title`
- * with the full text (as the header's leading title does, #629); the accessible name is the content itself.
- * The display face is `--font-display`, the body face without it.
- */
-export declare function PageHeading({ children, id, after, context, size, center, }: {
-    children?: ReactNode;
-    id?: string;
-    /** The slot right after the title, outside the `h1`: it never truncates, the title does. */
-    after?: ReactNode;
-    /** The small muted context line (the tenant), last in the row, from `md` up. */
-    context?: ReactNode;
-    /** `'bar'`: the title in the app bar. `'headline'` and `'display'`: the second row of a medium and a large header, which wraps (display up to two lines). */
-    size?: keyof typeof SIZES;
-    /** Centre it, for the `'center'` header. */
-    center?: boolean;
-}): import("react").JSX.Element | null;
-export {};