@nxgt/material 3.48.0 → 3.49.0

package/dist/{use-theme-DMcyJ52N.js → use-theme-BCLireTd.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./use-ssr-media-query-C6M5m8sf.js";
-import { i as t, n, o as r, r as i, s as a, t as o } from "./theme-store-CSl51uNH.js";
+import { i as t, n, o as r, r as i, s as a, t as o } from "./theme-store-BdPp43cV.js";
 import { a as s } from "./theme-context-Cofk6vgs.js";
 import { useCallback as c, useEffect as l, useState as u, useSyncExternalStore as d } from "react";
 import { PRESET_SCHEMES as f } from "@nxgt/material-core/theme/boot";

package/docs/components/buttons-and-actions.md

@@ -20,7 +20,7 @@ and language switches. Everything is imported from `@nxgt/material/components`.
 | <img src="../previews/buttons-actions-loadmorebutton.webp" width="96" alt=""> | [LoadMoreButton](#loadmorebutton) | "Load more" for cursor pagination |
 | <img src="../previews/buttons-actions-scrolltotop.webp" width="96" alt=""> | [ScrollToTop](#scrolltotop) | Appears past a scroll threshold |
 | <img src="../previews/buttons-actions-scrolltolatestbutton.webp" width="96" alt=""> | [ScrollToLatestButton](#scrolltolatestbutton) | "Jump to latest" over a scroll box, counting what arrived |
-| <img src="../previews/buttons-actions-actioncard.webp" width="96" alt=""> | [ActionCard](#actioncard) | Clickable card, a button (`aria-pressed`) when it chooses or reacts, with an active indicator |
+| <img src="../previews/buttons-actions-actioncard.webp" width="96" alt=""> | [ActionCard](#actioncard) | Clickable card, a button (`aria-pressed`) when it chooses or reacts, with an active indicator; `status`, `meta`, a trailing `action` and a `tile` variant |
 | <img src="../previews/buttons-actions-themetoggle.webp" width="96" alt=""> | [ThemeToggle](#themetoggle) | Light / dark / system switch |
 | <img src="../previews/buttons-actions-languageswitcher.webp" width="96" alt=""> | [LanguageSwitcher](#languageswitcher) | Menu of the `I18nProvider` languages |
 
@@ -1063,9 +1063,12 @@ import { Banknote, CreditCard } from 'lucide-react';
 | `active` | `boolean` | — | the chosen look: a primary container with its edge, a primary title, the icon's circle morphs to a filled cookie and the indicator fills; also `aria-pressed` |
 | `onClick` | `(event) => void` | — | makes the card a button |
 | `disabled` | `boolean` | `false` | `aria-disabled`, out of the Tab order, no click and no key, muted look |
-| `variant` | `'sm' \| 'md'` | `'sm'` | one row, or icon and indicator above the text |
-| `withIndicator` | `boolean` | `true` | the radio-like ring that fills with a check |
+| `variant` | `'sm' \| 'md' \| 'tile'` | `'sm'` | one row, icon and indicator above the text, or a compact [tile](#actioncard-tile) |
+| `withIndicator` | `boolean` | `true` (`false` for `tile`) | the radio-like ring that fills with a check |
 | `title`, `description`, `icon` | `ReactNode` | — | the content |
+| `status` | `ReactNode` | — | a line under the title; a string or number becomes a soft `Badge`, a node is shown as given |
+| `meta` | `ReactNode` | — | a secondary line, one line with an ellipsis |
+| `action` | `ReactNode` | — | a trailing control outside the press surface, see [tile](#actioncard-tile); `title` is then required, a `role` moves to the title button; the card's `disabled` does not reach it, disable its control too |
 
 A card with `active`, `onClick`, `disabled` or your own `role` is `role="button"` (unless you set another): it takes the Tab stop, and
 Enter and Space press it. `active` sets `aria-pressed`; pass your own `role`
@@ -1079,9 +1082,64 @@ the card, forced colours in system colours, and no motion under reduced motion.
 For a card choice bound to a form value, see `ChoiceCardGroup` on
 [Selection & choice](selection-and-choice.md).
 
+### ActionCard tile
+
+`variant="tile"` is a compact grid cell for boards: no minimum width (it fills
+its grid track), the title and the `action` on the first row, then `status`,
+`description` and `meta`, and no indicator unless `withIndicator`. `status` and
+`meta` work on every variant.
+
+```tsx
+import {
+	ActionCard,
+	Badge,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	RowMenu,
+} from '@nxgt/material/components';
+
+<ActionCard
+	variant="tile"
+	active={selected === unit.id}
+	onClick={() => setSelected(unit.id)}
+	title={unit.name}
+	status={<Badge variant="soft" tone="success">Free</Badge>}
+	meta="Zone B, second floor"
+	action={
+		<RowMenu
+			label={unit.name}
+			triggerProps={{ 'aria-label': `Change status of ${unit.name}` }}
+		>
+			<DropdownMenuRadioGroup value={unit.status} onValueChange={setStatus}>
+				<DropdownMenuRadioItem value="free">Free</DropdownMenuRadioItem>
+				<DropdownMenuRadioItem value="occupied">Occupied</DropdownMenuRadioItem>
+			</DropdownMenuRadioGroup>
+		</RowMenu>
+	}
+/>;
+```
+
+With an `action`, a card that chooses or reacts is a plain `div` and its
+**title is the one button**, stretched over the card, so the whole card presses
+it and the action never nests inside it (no `nested-interactive`). The button
+is named after the title, the status and the meta together ("Unit 21 Free Zone
+B"); the action keeps its own name. The card is one Tab stop and the action a
+second; Enter and Space press the button. `disabled` disables the button
+natively; disable the action's control too. **`title` is required with
+`action`**: it is the button's text (without one the button is still there, named
+after the status and the meta line, and development builds warn). The
+`description` is the button's description (`aria-describedby`). A `role`
+(`switch`, `checkbox`, `radio`) and its `aria-checked` move to the button, where
+they are valid; the root stays a plain `div` and takes no `aria-checked` or
+`aria-label`. Hover and press answer only the title button (its stretched area covers the
+card, padding included), not the action. The meta line shows its full text in a tooltip, on hover or
+keyboard focus of the title button, only while it is clipped (Escape dismisses
+it; moving the pointer across the line does not). Without `action` the DOM is as
+before. Nothing is added for a Vue port yet (React first).
+
 The root is `data-slot="action-card"` (it was the `Card` primitive's `data-slot="card"`): style it with `className`, not through `Card` classes or a `[data-slot=card]` selector.
 
-**Storybook:** `Buttons & actions/ActionCard`, `Buttons & actions/ActionCard/Look` · **Vue:** `ActionCard`, with the earlier look and no button role yet (#1195)
+A whole board built on it, with sections and an occupancy table, is the `Guides/Recipes/Status board` recipe. **Storybook:** `Buttons & actions/ActionCard`, `Buttons & actions/ActionCard/Look`, `Buttons & actions/ActionCard/Tile`, `Buttons & actions/ActionCard/Checks` · **Vue:** `ActionCard`, with the earlier look and no button role yet (#1195)
 
 ---
 

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

@@ -1169,7 +1169,7 @@ and `ref`, so it is the child of a `DropdownMenuTrigger asChild`.
 | --- | --- | --- | --- |
 | `label` (`RowMenu`, `RowMenuTrigger`) | `string` | — | the row's name; the button's name is "Actions for {label}" (translated). An `aria-label` of your own wins |
 | `items` (`RowMenu`) | `{ label, icon?, onSelect?, disabled?, destructive?, id? }[]` | `[]` | the actions; `destructive` ones are drawn in the error colour and moved last, after a separator |
-| `children` (`RowMenu`) | `ReactNode` | — | menu content of your own, above `items` (put a destructive item last yourself) |
+| `children` (`RowMenu`) | `ReactNode` | — | menu content of your own, above `items` (put a destructive item last yourself); its menu items are 44px high on a coarse pointer too |
 | `triggerProps` (`RowMenu`) | button props | — | `disabled`, `className`, `data-*` on the button |
 | `open`, `onOpenChange` (`RowMenu`) | as `DropdownMenu` | — | controlled state |
 | `label`, `items`, `menu` (`rowMenuColumn`) | `(row) => string` / `(row) => RowMenuItem[]` / `(row) => ReactNode` | — | the row's name, its actions as data, or its menu content as nodes |

package/docs/guides/cards-and-tiles.md

@@ -240,6 +240,66 @@ navigation to learn.
 
 A `linkComponent` must forward `onClick` (with `className`): it is how `onRowClick` runs before the card's link navigates. A click that opens the link elsewhere (Ctrl, Cmd, Shift, Alt, the middle button) only opens it: `onRowClick` does not run. A title that is a button (`onRowClick` and no href) runs it on every click.
 
+## Status tiles and boards
+
+A board of resources (beds, rooms, vehicles) is not a list of records: it is a
+grid of compact cells you read at a glance and change in place. Use
+[`ActionCard variant="tile"`](../components/buttons-and-actions.md#actioncard-tile)
+in a `ResponsiveGrid minItem="xs"`, one grid per section under its own `h2`:
+
+- **`status`** is a soft `Badge` with its word and an icon, so a status is
+  never told by colour alone.
+- **`meta`** is one line, the occupant only while occupied; a long one is
+  clipped and shown in full in a tooltip.
+- **`action`** is a `RowMenu` with a `DropdownMenuRadioGroup` of statuses,
+  named "Change status of {name}". The title is the one button (it opens the
+  detail), so the card and its menu are two tab stops and nothing nests.
+
+```tsx
+import {
+	ActionCard,
+	Badge,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	ResponsiveGrid,
+	RowMenu,
+} from '@nxgt/material/components';
+
+<ResponsiveGrid minItem="xs">
+	<ActionCard
+		variant="tile"
+		title="Bed A1"
+		status={<Badge variant="soft" tone="warning" icon="user">Occupied</Badge>}
+		meta="Amara Diallo"
+		onClick={() => openDetail('a1')}
+		action={
+			<RowMenu
+				label="Bed A1"
+				triggerProps={{ 'aria-label': 'Change status of Bed A1' }}
+			>
+				<DropdownMenuRadioGroup value={status} onValueChange={setStatus}>
+					<DropdownMenuRadioItem value="free">Free</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="occupied">Occupied</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="cleaning">Cleaning</DropdownMenuRadioItem>
+				</DropdownMenuRadioGroup>
+			</RowMenu>
+		}
+	/>
+</ResponsiveGrid>;
+```
+
+`title` is required with `action`: it is the card's button, named after the
+title, the status and the meta line.
+
+For the figures of the whole board, put a `StatCardGroup` above a `DataTable`
+with one row per section, one numeric column per status (they add up to the
+total) (`meta: { numeric: true }`) and a
+rate cell (a `Progress` named "{section} occupancy" beside the visible
+percent); `layout={{ phone: 'tiles', wide: 'table' }}` turns the rows into
+tiles on a phone. Both screens, tested at 360 and 1440 px, light and dark, are
+the `Guides/Recipes/Status board` story, and the Claude Code plugin's
+`screen-recipes` skill ships their code.
+
 ## Troubleshooting
 
 **The sort control is missing, or an option reads like the column id.** The control needs a column that can be sorted (an accessor, `enableSorting` not `false`); an option is the column's `meta.label`, else a string `header`. Set `meta.label`.

package/docs/roadmap.md

@@ -330,6 +330,17 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **A status board of tiles** (3.49.0) — `ActionCard` gains `status` (a soft badge line),
+  `meta` (one line, its tooltip only while clipped), a trailing `action` (a
+  `RowMenu`, an `IconButton`) outside the press surface, and `variant="tile"`
+  for grids of compact cells. With an `action` the title is the card's one
+  button, so the card and its menu are two tab stops and nothing nests. The
+  `Guides/Recipes/Status board` recipe (tiles in sections with a menu that
+  changes the status, and an occupancy table with a rate per section) shows
+  the whole pattern, with its code in the plugin's `screen-recipes` skill.
+  React only for now; the Vue gap is a `vue` issue.
+  ([ActionCard tile](components/buttons-and-actions.md#actioncard-tile))
+
 - **A refused field says why** (3.48.0) — the filter bar shows the words of a
   refused field under it, in one error `Alert`: "Period: choose 366 days or
   fewer.", after `formError`, so a refused, empty list no longer shows a red

package/lib/components/components.css

@@ -191,6 +191,7 @@
 @import "./ui/feedback/toast/toast-tokens.css";
 @import "./ui/actions/action-card/action-card.css";
 @import "./ui/actions/action-card/action-card-indicator.css";
+@import "./ui/actions/action-card/action-card-tile.css";
 @import "./ui/actions/action-card/action-card-modes.css";
 @import "./ui/media/galleries/gallery-image-lists.css";
 /* Gallery: the View Transition from a tile to its lightbox. */

package/lib/components/ui/actions/action-card/action-card-indicator.css

@@ -37,4 +37,52 @@
 	.nxgt-action-card[data-active] .nxgt-action-card-indicator svg {
 		stroke-dashoffset: 0;
 	}
+
+	/* The indicator takes its own column, after the action, only when shown. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator) {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title ind" "status status" "desc desc" "meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title ind"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"title act ind"
+			"status status status"
+			"desc desc desc"
+			"meta meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"icon title act ind"
+			". status status status"
+			". desc desc desc"
+			". meta meta meta";
+	}
+
+	/* The indicator is centred on the title row (36px high). */
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-indicator {
+		align-self: start;
+		margin-block: 5px;
+	}
+
+	/* The action is no longer at the card's edge: no optical offset. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator)
+	.nxgt-action-card-action {
+		margin-inline-end: 0;
+	}
 }

package/lib/components/ui/actions/action-card/action-card-modes.css

@@ -7,7 +7,10 @@
 		.nxgt-action-card * {
 			transition: none;
 		}
-		.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+		.nxgt-action-card[data-interactive]:not([data-disabled]):active,
+		.nxgt-action-card[data-has-action][data-interactive]:not(
+				[data-disabled]
+			):has(.nxgt-action-card-button:active) {
 			scale: none;
 			--ac-r: 12px;
 		}

package/lib/components/ui/actions/action-card/action-card-tile.css

@@ -0,0 +1,141 @@
+/* biome-ignore-all lint/style/noDescendingSpecificity: states are grouped by meaning, not by specificity */
+/* ActionCard status, meta, action and the tile variant. Loaded after
+ * action-card.css and the indicator. With an `action` the title is the card's
+ * one button: its ::after covers the card, and the action sits above it. */
+@layer components {
+	.nxgt-action-card-status {
+		display: flex;
+		margin-top: 4px;
+		min-width: 0;
+	}
+	.nxgt-action-card-meta {
+		display: block;
+		margin-top: 2px;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: color-mix(in oklab, var(--card-foreground) 70%, var(--card));
+	}
+
+	/* The title button: the card's press surface. */
+	.nxgt-action-card-button {
+		display: inline;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		letter-spacing: inherit;
+		text-align: start;
+		cursor: pointer;
+		outline: none;
+	}
+	.nxgt-action-card-button::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		z-index: 0;
+	}
+	.nxgt-action-card-button:disabled {
+		cursor: not-allowed;
+	}
+	.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+		outline: 3px solid var(--ac-ring);
+		outline-offset: -3px;
+	}
+
+	/* The action: its own grid area, above the stretched button. */
+	.nxgt-action-card-action {
+		grid-area: act;
+		position: relative;
+		z-index: 1;
+		justify-self: end;
+		display: inline-flex;
+		margin-inline-end: -8px;
+	}
+	.nxgt-action-card[data-has-action] {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas: "icon text act ind";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas: "icon act ind" "text text text";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"]:not([data-icon]) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas: "text act ind";
+	}
+
+	/* Tile: a compact grid cell, title and action on the first row, then the
+	 * status, the description and the meta line, each full width. The text
+	 * wrapper dissolves so its children take the areas. */
+	.nxgt-action-card[data-size="tile"] {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title act" "status status" "desc desc" "meta meta";
+		align-items: start;
+		/* A taller neighbour stretches the card: keep the rows at the top. */
+		align-content: start;
+		row-gap: 0;
+		column-gap: 8px;
+		min-height: 0;
+		min-width: 0;
+		padding-block: 12px;
+		padding-inline: 16px 12px;
+	}
+	.nxgt-action-card[data-size="tile"][data-icon] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title act"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-icon {
+		width: 36px;
+		height: 36px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-text {
+		display: contents;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-title {
+		grid-area: title;
+		align-self: center;
+		min-height: 36px;
+		display: flex;
+		align-items: center;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-description {
+		grid-area: desc;
+		margin-top: 2px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-status {
+		grid-area: status;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-meta {
+		grid-area: meta;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		.nxgt-action-card-action {
+		align-self: start;
+	}
+
+	@media (forced-colors: active) {
+		.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+			outline: 3px solid CanvasText;
+			outline-offset: -5px;
+		}
+		.nxgt-action-card-meta {
+			color: CanvasText;
+		}
+		/* a chosen tile's border is 2px here: the content keeps its place */
+		.nxgt-action-card[data-size="tile"][data-active] {
+			padding-block: 11px;
+			padding-inline: 15px 11px;
+		}
+	}
+}

package/lib/components/ui/actions/action-card/action-card.css

@@ -125,13 +125,43 @@
 	.nxgt-action-card[data-interactive]:not([data-disabled]) {
 		cursor: pointer;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 11%;
 	}
-	.nxgt-action-card[data-interactive][data-active]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive][data-active]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 21%;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):active {
+		--ac-tint: 15%;
+		--ac-r: 16px;
+		scale: 0.97;
+	}
+
+	/* With an action, only the title button answers hover and press (its
+	 * stretched ::after covers the card, padding included); the action does
+	 * not. The rules above leave these cards to the ones below. */
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:hover
+	) {
+		--ac-tint: 11%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive][data-active]:not(
+		[data-disabled]
+	):has(.nxgt-action-card-button:hover) {
+		--ac-tint: 21%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:active
+	) {
 		--ac-tint: 15%;
 		--ac-r: 16px;
 		scale: 0.97;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.48.0",
+	"version": "3.49.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"

package/dist/nxgt-theme-ZS945iMP.js

@@ -1,37 +0,0 @@
-import { t as e } from "./dist-DVRQkaTK.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { n, r, t as i } from "./theme-context-Cofk6vgs.js";
-import { t as a } from "./warn-once-C_e47JM8.js";
-import { useContext as o, useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-//#region lib/themes/theme-value.ts
-function l(e, t, n) {
-	return {
-		name: e,
-		theme: t,
-		background: t?.background === !1 ? !1 : t?.background ?? i,
-		defaultMode: n
-	};
-}
-//#endregion
-//#region lib/themes/nxgt-theme.tsx
-function u({ theme: i, mode: u, asChild: d = !1, children: f, ...p }) {
-	let m = o(r), h = typeof i == "string" ? m?.find((e) => e.name === i) : i, g = typeof i == "string" ? i : i.name;
-	!t() && m && !h && a(`theme "${g}" is not in the provider's themes; its background is the default.`, "NxgtTheme");
-	let _ = o(n)?.defaultMode, v = s(() => l(g, h, _), [
-		g,
-		h,
-		_
-	]), y = d ? e : "div";
-	return /* @__PURE__ */ c(n.Provider, {
-		value: v,
-		children: /* @__PURE__ */ c(y, {
-			...p,
-			"data-nxgt-theme": g,
-			...u ? { "data-theme": u } : {},
-			children: f
-		})
-	});
-}
-//#endregion
-export { l as n, u as t };