@nxgt/material 3.22.0 → 3.24.0

package/dist/styles.css

@@ -52,6 +52,7 @@
 	--color-paper: --alpha(var(--primary) / 0.5%);
 	--color-strix: var(--strix);
 	--color-background: var(--background);
+	--color-ground: var(--ground);
 	--color-background-paper: --alpha(var(--primary) / 5%);
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);

package/docs/components/data-table-filter-and-lists.md

@@ -122,6 +122,7 @@ table enables, for typing your own column defs.
 | `getRowHref` | `(row) => string \| undefined` | — | the first data cell links to the row's page; a click elsewhere on the row follows it |
 | `onRowClick` | `(row, event) => void` | — | a click on the row (not on a control); alone (without `getRowHref`), it makes the row focusable and Enter calls it |
 | `linkComponent` | `ComponentType<{ href, className?, children?, rel?, 'aria-label'?, onClick? }>` | `<a>` | the link for `getRowHref` and the page links: wrap your router's. It must forward `className` and `ref` (the past-end page's "Back to the first page" is a `Button asChild` over it) |
+| `reserveActions` | `boolean` | `true` | with `actions` and a `select` column: keep the toolbar's 68px band while nothing is selected, so the bar does not push the rows down; `false` keeps none and the bar arrives on the first selection (`ServerTable` passes `false`) |
 | `focusable` | `boolean` | `true` with `actions`, else `false` | the `<table>` (or the list of cards or tiles) takes the focus by script (`tabindex="-1"`, never a tab stop): where the focus goes once the control that had it is gone. When the selection is cleared and the focused control went with it (a bulk action's button), the table takes the focus instead of the page's body ([focus after a bulk action](#focus-after-a-bulk-action)); `false` turns both off |
 | `tableRef` | `Ref<HTMLTableElement>` | — | the `<table>`, to focus it yourself (with `focusable`); `controls.focusTable()` does the same from a toolbar slot. It stays `null` while the layout is a list (`cards`, `tiles`, or the phone side of `{ phone, wide }`): use `focusRef` |
 | `focusRef` | `Ref<HTMLElement>` | — | the element `focusable` moves the focus to, whichever the layout: the `<table>`, or the list of cards |
@@ -273,6 +274,18 @@ wide screen; on a phone the extra lines still push them down).
 />
 ```
 
+### Focus while paging
+
+A page control that has the focus keeps it while the next page loads: a link
+(or a button) stays the same element, `aria-disabled`, dimmed, and a click on
+it does nothing, instead of being swapped for a disabled button (which drops the
+focus to `<body>`, #1609). When a control really goes (Next on the last page),
+the focus moves to its counterpart, or to the pagination `<nav>`
+(`tabindex="-1"`, never a tab stop) when neither is left. A focus or a pointer
+press elsewhere is never pulled back. The footer's selected count is a polite
+status, so the first selection is announced ("1 row selected") when its bar
+shows up.
+
 ### Focus after a bulk action
 
 When a bulk action clears the selection, its buttons unmount and the focus
@@ -387,7 +400,10 @@ same minimum height once they do — so the "Delete selected" that appears on
 the first selection does not push the tapped row down. The reserved height
 is one row of default-size buttons (`h-9`); taller or wrapping actions still
 grow the toolbar. Without the `select` column, or without `actions`, no band
-is kept above the table.
+is kept above the table. `reserveActions={false}` keeps none either: the bar
+arrives on the first selection with a short grow (none under reduced motion),
+and the rows move down by its height. `ServerTable` passes `false`, so its
+bulk bar leaves no empty row under the band while nothing is selected.
 
 ```tsx
 <DataTable
@@ -868,7 +884,8 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `description` | `ReactNode` | — | a muted line under the `title`, or alone above the band's controls without one; the `actions` stay at the band's end |
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
 | `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
-| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged) |
+| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged); on a coarse pointer the icon controls are 44x44 boxes (still painted 32px) |
+| `bandActions` | `'stacked' \| 'inline'` | `'stacked'` | with `filter`, where `actions` sit below 768px: `'stacked'` gives them a row above the search; `'inline'` keeps them on the search's row (the search takes the room left), for a lone icon action such as a "+". An action wider than 3.5rem wraps under the search. From 768px both are the same |
 | `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
 | `sorting` | `createSorting(…)` | — | headers sorted from the URL |
 | `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
@@ -883,6 +900,11 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `resultsLabel` | `(count) => string` | "N results" | without `filter`: what the list's region says. The page past the last has its own words: `material.server-table.past-end`, `past-end-hint`, `first-page` and `past-end-status` |
 | `className` | `string` | — | on the list's surface |
 
+```tsx
+// A lone icon action stays on the search's row on a phone.
+<ServerTable {...props} filter={{ model }} bandActions="inline" actions={<IconButton aria-label="New" tooltip="New"><Icon name="plus" /></IconButton>} />
+```
+
 **Where the focus goes.** After "Clear" on an empty page, or the last chip
 removed, the focus returns to the Filter's search; a bar without one falls to
 its first shown control (a quick filter, "Add filter", or "Filters (N)" on a

package/docs/components/navigation-and-layout.md

@@ -31,7 +31,7 @@ documentation-site shell. Everything is imported from
 
 ![ActivityLayout](../previews/navigation-layout-appshell.webp)
 
-App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page. See the [app shell guide](../guides/app-shell.md).
+App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page. It paints the tinted page ground (`bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card`. See the [app shell guide](../guides/app-shell.md).
 
 ```tsx
 import { Outlet } from 'react-router';
@@ -414,7 +414,7 @@ open the pane (`ListDetailsTrigger` takes the `view` to show), and their `childr
 layout state. A server, which has no screen width, renders the wide layout,
 as does a hydrating client; a phone switches right after hydrating. A page
 rendered only in the browser starts on the real layout. `ThreadLayout` is a centred column over the app
-[background](#background) for focused flows (sign-in, onboarding), with no
+[background](#background) on the page ground (`bg-ground`, so a `bg-card` card stands apart) for focused flows (sign-in, onboarding), with no
 app bar.
 
 | Prop | Type | Default | Effect |

package/docs/guides/app-shell.md

@@ -209,7 +209,7 @@ partitionMenu(items);                              // { content, footer }
 | `align` | `'start' \| 'center'` | `'start'` | Where the collapsed rail's entries sit: right under the brand, or centred in the height below it |
 | `menuOpen` | `boolean` | — | Controls the phone's menu sheet: open while `true`. Leave it out and the layout manages the sheet. Only a phone shows the sheet |
 | `onMenuOpenChange` | `(open: boolean) => void` | — | Called for every change of the sheet: the menu button, Escape, the close button, a followed link, a new location |
-| `backdrop` | `ReactNode \| false` | — | An exception to the theme's background, which the layout draws by default (Lavande's: the built-in gradient and blobs). A node replaces it for this screen: usually a `Background` preset from `@nxgt/material/backgrounds` (see [Use a background preset behind the shell](#use-a-background-preset-behind-the-shell)); `false` draws no background, a plain page |
+| `backdrop` | `ReactNode \| false` | — | An exception to the theme's background (the page ground, [`--ground`](#the-page-ground), is painted either way), which the layout draws by default (Lavande's: the built-in gradient and blobs). A node replaces it for this screen: usually a `Background` preset from `@nxgt/material/backgrounds` (see [Use a background preset behind the shell](#use-a-background-preset-behind-the-shell)); `false` draws no background, a plain page |
 
 On a page with `viewport-fit=cover` (an installed PWA drawing under a
 notch and the home indicator), the shell pads clear of
@@ -502,6 +502,22 @@ while the sheet is open, so leave ids out of it. A link in `brand` (a home
 link around the logo) is the sheet's first focusable element, so it takes
 the focus when the sheet opens.
 
+## The page ground
+
+The layout paints `bg-ground` (the `--ground` token, see [Page ground](./theming.md#page-ground))
+on its root, so the content, the gutters and the space between the chrome and
+the content are tinted, with or without a `backdrop`, in light and dark. The
+sidebar and the app bar stay on `--background`: flat rectangles with no radius
+and no shadow (translucent over a backdrop, about 90 % without one), so the edge
+between chrome and content is the change of colour. The cards, and the
+`ActivityContent` header card (`bg-card`), stand on the ground with their
+hairline and soft shadow. With `scroll="container"` the same ground stays behind
+the scrolling region.
+
+`--ground: var(--background)` on the layout or an ancestor opts out. An app
+sets no page colour of its own under the layout, and no colour on a backdrop;
+`--ground` is the one place to tune it.
+
 ## The theme's background
 
 `ActivityLayout` draws the background of the nearest theme (`NxgtThemeProvider`

package/docs/guides/theming.md

@@ -72,6 +72,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--primary-indicator` | `bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator` | primary drawn as a non-text mark that carries a state (WCAG 1.4.11, 3:1): an active bar or dot, a selected or focused border, a ring, a spinner arc. Equal to `--primary` in light; in dark, `--primary` mixed 25 % with white (`color-mix(in oklab, var(--primary) 75%, white)`), 4.8:1 on `--background`, 4.5:1 on `--card`, 4.2:1 on `--muted` (`--primary` itself gives 2.7, 2.5 and 2.3:1) |
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
+| `--ground` | `bg-ground` | the page's ground under `ActivityLayout`: the tinted colour the cards stand on (see [Page ground](#page-ground)) |
 | `--card`, `--popover`, `--tooltip` (+ `-foreground`) | `bg-card`, `bg-popover`, `bg-tooltip` | surfaces |
 | `--border`, `--input`, `--ring` | `border-border`, `border-input`, `ring-ring` | outlines |
 | `--chart-1` … `--chart-5` | `bg-chart-1`, … | chart series (the charts read them at runtime) |
@@ -95,6 +96,45 @@ container is the accent colour itself, the same as `bg-accent`.
 
 Put `text-foreground` on a container; it stays well above 4.5:1 in both themes.
 
+## Page ground
+
+`--ground` (`bg-ground`) is the colour of the page under the content: the page,
+the gutters and what the app bar and the sidebar float on. `ActivityLayout`
+paints it by default, with or without a `backdrop` (so does `ThreadLayout`), so a card (`bg-card`) stands
+apart from the page in every screen and an app sets no page colour.
+
+| Mode | Value | What it does |
+| --- | --- | --- |
+| light | `color-mix(in oklab, var(--primary) 7%, var(--background))` | the primary at 7 % over the page: a quiet tint, 0.03 to 0.04 ΔEOK from a white card |
+| dark | `color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black))` | darker than `--background` (lightness about 0.105 against 0.150) and than `--card`, so the cards lift off it: 0.08 to 0.09 ΔEOK |
+
+The mixes are in `oklab`, never `oklch`: `oklch` skews the hue when a colour is
+mixed with white. Every built-in theme and every `defineTheme` output carries
+the token (light block and dark block), written from the theme's own
+`--primary` and `--background`, so a zone gets its own ground. Text on it keeps
+AA: foreground, muted foreground and primary text are measured on the ground in
+both modes.
+
+The sidebar and the app bar do **not** take the tint: they stay on
+`--background` (near-white in light), flat, with no radius and no shadow, so
+only the content ground carries the colour. The cards keep `bg-card`, their
+hairline border and their soft shadow.
+
+```css
+/* A custom tint, anywhere above the layout (or on a zone): */
+:root { --ground: color-mix(in oklab, var(--primary) 10%, var(--background)); }
+
+/* Opt out: the page is flat again, as before 3.24. */
+[data-slot="activity-layout"] { --ground: var(--background); }
+```
+
+A theme overrides it like any token: `defineTheme({ …, tokens: { light: { ground:
+'var(--background)' } } })`, and `checkThemeContrast` measures the override.
+
+Do not paint your own page background under the layout (`bg-background`,
+`bg-muted`, a gradient) or add a shadow to every card: both fight the ground.
+A backdrop's colours come from the theme; set none on it.
+
 ## The neutral palette
 
 The default theme's page is plain: pure white in light and the one dark night

package/docs/troubleshooting.md

@@ -25,6 +25,7 @@ words in your error.
 
 **Styles & assets**
 
+- [The page and the cards look the same](#the-page-and-the-cards-look-the-same)
 - [Components render unstyled, with no error](#components-render-unstyled-with-no-error)
 - [A link is blue and underlined on hover and focus](#a-link-of-mine-or-of-a-component-is-blue-and-underlined-on-hover-and-focus)
 - [The light and dark neutrals turned violet after upgrading to 3.6](#the-light-and-dark-neutrals-turned-violet-after-upgrading-to-36)
@@ -356,6 +357,8 @@ words in your error.
 - [A `ServerTable` search shows older text, or a write is lost, over a slow router](#a-servertable-search-shows-older-text-or-a-write-is-lost-over-a-slow-router)
 - [`ListEmpty`'s title is now a heading](#listempty-title-is-now-a-heading)
 - [`ServerTable` keeps showing the empty page or the old rows after a failed fetch](#servertable-keeps-showing-the-empty-page-or-the-old-rows-after-a-failed-fetch)
+- [The focus falls to `<body>` after Previous / Next on a `ServerTable`](#the-focus-falls-to-body-after-previous--next-on-a-servertable)
+- [An empty gap under the `ServerTable` band while nothing is selected](#an-empty-gap-under-the-servertable-band-while-nothing-is-selected)
 - [The focus falls to the page after a `DataTable` bulk action](#the-focus-falls-to-the-page-after-a-datatable-bulk-action)
 - [A test's `getByText('No data available')` finds two elements after a change](#a-tests-getbytextno-data-available-finds-two-elements-after-a-change)
 - [`` [@nxgt/material] DataTable: `virtual` needs `maxHeight`; the rows are not virtualized. ``](#nxgtmaterial-datatable-virtual-needs-maxheight-the-rows-are-not-virtualized)
@@ -708,6 +711,33 @@ Vite and React Router apps use:
 
 ## Styles & assets
 
+### The page and the cards look the same
+
+**When:** a screen under `ActivityLayout`, after the 3.24 upgrade or on an older
+setup. The cards, tiles and the header card have no visible edge against the
+page.
+**Why:** the page ground (`--ground`, `bg-ground`) is flat again, equal to
+`--background`: an app's CSS paints its own page colour under the layout (a
+`bg-background` or `bg-white` on a wrapper, `body`, a route), sets
+`--ground: var(--background)`, a stylesheet loaded without `theme-tokens.css`
+(no `--ground`, so `bg-ground` paints nothing), or a theme whose `tokens`
+override made `ground` equal to `card`.
+**Fix:** remove the page background under the layout, import
+`@nxgt/material/styles.css` (it carries the token), and read the value on the
+layout:
+
+```css
+/* a custom tint is fine; a flat page is the opt-out */
+:root { --ground: color-mix(in oklab, var(--primary) 7%, var(--background)); }
+```
+
+```ts
+getComputedStyle(document.querySelector('[data-slot="activity-layout"]')!).backgroundColor;
+```
+
+Also drop app-level card shadows: the cards already carry a hairline and a soft
+shadow.
+
 ### Components render unstyled, with no error
 
 **When:** on the first page load. Components have their structure but no
@@ -6502,6 +6532,23 @@ const columns = [{ accessorKey: 'name', header: NameHeader }];
 **Why:** `ServerTable` cannot tell a failed fetch from an empty answer: `error` was never passed, or it was passed and never cleared (`null`) when the next answer landed, so the failure stays on screen.
 **Fix:** pass `error` while the fetch has failed, with `onRetry`, and set it back to `null` as soon as the next answer lands. See [ServerTable](components/data-table-filter-and-lists.md#servertable).
 
+### The focus falls to `<body>` after Previous / Next on a `ServerTable`
+
+Versions before `reserveActions` landed swapped a page link for a disabled
+button while the next page loaded, which dropped the focus to `<body>`
+(always on a phone's tiles). Upgrade: the control now stays, `aria-disabled`,
+and the focus moves to its counterpart when one goes (Next on the last page).
+See [Focus while paging](components/data-table-filter-and-lists.md#focus-while-paging).
+A custom `linkComponent` must render an element that can take the focus (an
+`<a href>`).
+
+### An empty gap under the `ServerTable` band while nothing is selected
+
+Versions before `reserveActions` reserved the toolbar's 68px (`header-placeholder`) for the
+bulk actions. `ServerTable` now reserves nothing. On `DataTable` itself the
+default is still `reserveActions` `true`: pass `reserveActions={false}` to get
+the same.
+
 ### The focus falls to the page after a `DataTable` bulk action
 
 **When:** a bulk action clears the selection, its buttons unmount, and the next Tab starts from the top of the page.

package/lib/backgrounds/css/motifs.css

@@ -7,7 +7,10 @@
 @import "./scene.css";
 
 @layer components {
-	/* The wash: two soft colour pools under the scene. */
+	/* The wash: one even, soft gradient over the whole layer, top to bottom, no
+	 * pool in a corner. It sits in the backdrop layer under the content column, so
+	 * it never repaints the sidebar or the app bar, and the page ground
+	 * (--ground) shows through it. */
 	:is(
 		[data-background="shapes"],
 		[data-background="confetti-grid"],
@@ -18,17 +21,15 @@
 	) > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;
-		background:
-			radial-gradient(
-				ellipse 75% 65% at 30% 20%,
-				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
-				transparent 72%
+		background: linear-gradient(
+			180deg in oklab,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.75),
+				transparent
 			),
-			radial-gradient(
-				ellipse 60% 60% at 85% 90%,
-				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
-				transparent 70%
-			);
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
 	}
 
 	/* The scene clips the float, which scales it past the frame. */

package/lib/backgrounds/css-react/icons.css

@@ -23,20 +23,19 @@
 @import "./icons-tint.css";
 
 @layer components {
+	/* The wash: one even, soft gradient over the layer (see css/motifs.css). */
 	[data-background="icons"] > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;
-		background:
-			radial-gradient(
-				ellipse 75% 65% at 22% 18%,
-				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
-				transparent 72%
+		background: linear-gradient(
+			180deg in oklab,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.75),
+				transparent
 			),
-			radial-gradient(
-				ellipse 60% 60% at 86% 90%,
-				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
-				transparent 70%
-			);
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
 	}
 
 	:is([data-background="icons"], [data-background="shapes"]) > [data-scene] {

package/lib/components/theme-tokens.css

@@ -5,6 +5,11 @@
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 290);
+	/* The page ground under ActivityLayout (`bg-ground`): the primary at 7 % over the
+	   page, so the cards (--card, white) stand apart from it. Set here, not on
+	   `body`, so a zone that sets --primary or --background gets its own. A page
+	   keeps the flat look with `--ground: var(--background)`. */
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
@@ -99,6 +104,13 @@
 [data-theme="dark"] {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 291.3);
+	/* Darker than --background so the cards (--card) stand apart: the page 55 %
+	   toward black, the primary at 6 % over it. */
+	--ground: color-mix(
+		in oklab,
+		var(--primary) 6%,
+		color-mix(in oklab, var(--background) 55%, black)
+	);
 	--card: oklch(0.19 0.019 289.4);
 	--card-foreground: oklch(0.943 0.012 291.3);
 	--popover: oklch(0.19 0.019 289.4);

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

@@ -6,8 +6,8 @@
  * 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 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.
+ * frame's padding and gaps show the page ground (--ground), so the shapes show
+ * nowhere else.
  *
  * The chrome is lightly translucent and frosted: about 80% of the background
  * colour (--nxgt-backdrop-chrome-alpha, the app bar) or 87% (--nxgt-backdrop-nav-alpha,
@@ -34,7 +34,7 @@
 		display: none;
 	}
 
-	/* The gutter mask without a backdrop (activity-layout.tsx) has the app bar's
+	/* The gutter mask without a backdrop (activity-layout.tsx) has the page ground's
 	 * translucent fill, which the page's top gutter never had: it fades in over
 	 * the first 8px of scroll, so at scroll top nothing changed. A browser
 	 * without scroll-driven animations shows it from the start. */
@@ -60,19 +60,6 @@
 		background-image: none;
 	}
 
-	/* scroll="document": the frame's chrome fill leaves its top gutter to the
-	 * gutter mask (activity-layout.tsx), a fixed strip with the same fill that
-	 * hides the scrolled page above the sticky app bar. Painting both would
-	 * stack two translucent fills there. */
-	[data-slot="activity-layout"][data-backdrop][data-scroll="document"]
-	[data-slot="activity-layout-frame"] {
-		background:
-			linear-gradient(
-				var(--nxgt-backdrop-fill-chrome),
-				var(--nxgt-backdrop-fill-chrome)
-			)
-			bottom / 100% calc(100% - var(--nxgt-backdrop-top)) no-repeat;
-	}
 	[data-slot="activity-layout"][data-backdrop] > [data-layer] {
 		display: none;
 	}

package/lib/styles.css

@@ -52,6 +52,7 @@
 	--color-paper: --alpha(var(--primary) / 0.5%);
 	--color-strix: var(--strix);
 	--color-background: var(--background);
+	--color-ground: var(--ground);
 	--color-background-paper: --alpha(var(--primary) / 5%);
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);

package/lib/themes/ambre.css

@@ -1,12 +1,13 @@
 /* Theme "ambre", generated.
  * Seeds: primary oklch(0.52 0.13 48), secondary oklch(0.5 0.09 95), tertiary oklch(0.5 0.14 350), neutral hue 65, tint 0.85.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * hue-near-status: The primary's hue 48 is 14° from warning (62): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="ambre"] {
 	--radius: 0.875rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0145 65);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0145 65);
 	--popover: oklch(1 0 0);
@@ -74,6 +75,7 @@
 [data-nxgt-theme="ambre"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]), [data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0102 65);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0161 65);
 	--card-foreground: oklch(0.943 0.0102 65);
 	--popover: oklch(0.19 0.0161 65);

package/lib/themes/ardoise.css

@@ -1,11 +1,12 @@
 /* Theme "ardoise", generated.
  * Seeds: primary oklch(0.45 0.065 252), secondary oklch(0.48 0.05 215), tertiary oklch(0.48 0.1 290), neutral hue 250, tint 0.7.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 250);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0119 250);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="ardoise"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ardoise"] [data-nxgt-theme]:not([data-nxgt-theme="ardoise"]), [data-nxgt-theme="ardoise"] [data-nxgt-theme]:not([data-nxgt-theme="ardoise"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 250);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0133 250);
 	--card-foreground: oklch(0.943 0.0084 250);
 	--popover: oklch(0.19 0.0133 250);

package/lib/themes/bleumono.css

@@ -1,6 +1,6 @@
 /* Theme "bleumono", generated.
  * Seeds: primary oklch(0.46 0.13 255), secondary oklch(0.55 0.06 255), tertiary oklch(0.38 0.17 255), neutral hue 255, tint 1.1.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * chroma-lowered: tertiary: chroma 0.170 to 0.125 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 255 is 0° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -9,6 +9,7 @@
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0187 255);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0187 255);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="bleumono"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="bleumono"] [data-nxgt-theme]:not([data-nxgt-theme="bleumono"]), [data-nxgt-theme="bleumono"] [data-nxgt-theme]:not([data-nxgt-theme="bleumono"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0132 255);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0209 255);
 	--card-foreground: oklch(0.943 0.0132 255);
 	--popover: oklch(0.19 0.0209 255);

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: 61 pairs, 0 failing.
+ * Contrast: 65 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.
@@ -9,6 +9,7 @@
 	--radius: 0.75rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 265);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 265);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="bluemoon"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="bluemoon"] [data-nxgt-theme]:not([data-nxgt-theme="bluemoon"]), [data-nxgt-theme="bluemoon"] [data-nxgt-theme]:not([data-nxgt-theme="bluemoon"]) *) {
 	--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));
 	--card: oklch(0.19 0.019 265);
 	--card-foreground: oklch(0.943 0.012 265);
 	--popover: oklch(0.19 0.019 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: 61 pairs, 0 failing.
+ * Contrast: 65 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.
@@ -9,6 +9,7 @@
 	--radius: 1rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 30);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 30);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="corail"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="corail"] [data-nxgt-theme]:not([data-nxgt-theme="corail"]), [data-nxgt-theme="corail"] [data-nxgt-theme]:not([data-nxgt-theme="corail"]) *) {
 	--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));
 	--card: oklch(0.19 0.0152 30);
 	--card-foreground: oklch(0.943 0.0096 30);
 	--popover: oklch(0.19 0.0152 30);

package/lib/themes/foret.css

@@ -1,11 +1,12 @@
 /* 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: 61 pairs, 0 failing.
+ * Contrast: 65 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));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 140);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="foret"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="foret"] [data-nxgt-theme]:not([data-nxgt-theme="foret"]), [data-nxgt-theme="foret"] [data-nxgt-theme]:not([data-nxgt-theme="foret"]) *) {
 	--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));
 	--card: oklch(0.19 0.0152 140);
 	--card-foreground: oklch(0.943 0.0096 140);
 	--popover: oklch(0.19 0.0152 140);

package/lib/themes/lavande.css

@@ -1,11 +1,12 @@
 /* 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: 61 pairs, 0 failing.
+ * Contrast: 65 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));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 290);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="lavande"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="lavande"] [data-nxgt-theme]:not([data-nxgt-theme="lavande"]), [data-nxgt-theme="lavande"] [data-nxgt-theme]:not([data-nxgt-theme="lavande"]) *) {
 	--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));
 	--card: oklch(0.19 0.019 289.4);
 	--card-foreground: oklch(0.943 0.012 291.3);
 	--popover: oklch(0.19 0.019 289.4);

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: 61 pairs, 0 failing.
+ * Contrast: 65 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.
@@ -9,6 +9,7 @@
 	--radius: 1rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 170);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 170);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="menthe"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="menthe"] [data-nxgt-theme]:not([data-nxgt-theme="menthe"]), [data-nxgt-theme="menthe"] [data-nxgt-theme]:not([data-nxgt-theme="menthe"]) *) {
 	--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));
 	--card: oklch(0.19 0.0152 170);
 	--card-foreground: oklch(0.943 0.0096 170);
 	--popover: oklch(0.19 0.0152 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: 61 pairs, 0 failing.
+ * Contrast: 65 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).
@@ -9,6 +9,7 @@
 	--radius: 0.75rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0153 230);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0153 230);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="ocean"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ocean"] [data-nxgt-theme]:not([data-nxgt-theme="ocean"]), [data-nxgt-theme="ocean"] [data-nxgt-theme]:not([data-nxgt-theme="ocean"]) *) {
 	--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));
 	--card: oklch(0.19 0.0171 230);
 	--card-foreground: oklch(0.943 0.0108 230);
 	--popover: oklch(0.19 0.0171 230);

package/lib/themes/pink.css

@@ -1,12 +1,13 @@
 /* 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: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
 	--radius: 1.25rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 345);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0119 345);
 	--popover: oklch(1 0 0);
@@ -74,6 +75,7 @@
 [data-nxgt-theme="pink"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="pink"] [data-nxgt-theme]:not([data-nxgt-theme="pink"]), [data-nxgt-theme="pink"] [data-nxgt-theme]:not([data-nxgt-theme="pink"]) *) {
 	--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));
 	--card: oklch(0.19 0.0133 345);
 	--card-foreground: oklch(0.943 0.0084 345);
 	--popover: oklch(0.19 0.0133 345);