@nxgt/material 3.48.0 → 3.49.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nxgt/material
 
+## 3.49.0
+
+### Minor Changes
+
+- [#1820](https://github.com/softistx/nxgt-material/pull/1820) [`22d3dd0`](https://github.com/softistx/nxgt-material/commit/22d3dd018e478e9cc8907697be27a34775a91de3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActionCard` takes `status` (a soft badge line), `meta` (one line, with a tooltip only while it is clipped), a trailing `action` outside the press surface (the title becomes the card's one button, so the card and its action are two tab stops and nothing nests), and `variant="tile"`, a compact grid cell with no minimum width and no indicator by default. Without `action` the DOM is unchanged. With an `action`, `title` is required (the button's text; development builds warn without one and the button is then named after the status and the meta line), the `description` is the button's description, a `role` (`switch`, `checkbox`, `radio`) and its `aria-checked` move to the button instead of the plain root, hover and press answer only the title button, and the meta tooltip follows hover and focus of the card (only Escape dismisses it). A tile's `withIndicator` gets its own column. `RowMenu`'s children (radio and checkbox items) take the text size of its `items`, as their 44px floor already did.
+
+### Patch Changes
+
+- [#1823](https://github.com/softistx/nxgt-material/pull/1823) [`bc5775c`](https://github.com/softistx/nxgt-material/commit/bc5775c7cfb2354616214d21f3318102793b10bd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New recipe `Guides/Recipes/Status board`: a board of tiles in sections (an `ActionCard` tile with a status badge, the occupant as meta and a menu that changes the status) and an occupancy screen (figures, a table with a rate per section, tiles on a phone), with its code in the `nxgt-material` plugin's `screen-recipes` skill (2.5.0).
+
 ## 3.48.0
 
 ### Minor Changes

package/README.md

@@ -518,7 +518,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator. | `ActionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards. | `ActionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-themetoggle.webp" width="120" alt="ThemeToggle"> | [`ThemeToggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#themetoggle) | Light / dark / system switch that stores and applies the choice. | `ThemeToggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-languageswitcher.webp" width="120" alt="LanguageSwitcher"> | [`LanguageSwitcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#languageswitcher) | Globe button with a menu of the `I18nProvider` languages. | `LanguageSwitcher` |
 
@@ -805,7 +805,7 @@ which is private: adding it needs a GitHub account with access to it.
 | --- | --- |
 | skill `use-nxgt-material` | an index that picks the component by need and wires imports and `styles.css`; its references cover the tokens and themes, forms, i18n, tests by role, SSR and the other subpaths, read from these docs in `node_modules/@nxgt/material/docs/` |
 | skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and an 11-criteria grid to score a screen out of 5 |
-| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings), each the code of a tested `Guides/Recipes/<Name>` story |
+| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board and an occupancy board), each the code of a tested `Guides/Recipes/<Name>` story |
 | agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check, then looks at 360 and 1440 px screenshots in light and dark and fixes until the grid reads 4 everywhere |
 | agent `design-reviewer` | read-only: scores a screen's screenshots on the same 11 criteria and returns the fixes ranked, each with the component and prop |
 | skill `build-a-theme` + agent `theme-builder` | the app's own theme with `defineTheme`: seeds, tones, background and icon motif, generation, provider and picker; checks the AA contrast of the generated tokens in light and dark and looks at key screens |

package/dist/{button-yaltbQmC.js → button-DJgaQbBD.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { o as r, t as i } from "./tooltip-CkttDIab.js";
-import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-C4CgDEYm.js";
-import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
+import { t } from "./is-production-GLw59WU8.js";
+import { n, t as r } from "./dist-DVRQkaTK.js";
+import { n as i, t as a } from "./dist-B61_o9Mg.js";
+import { a as o, i as s, r as c, t as l } from "./button-tones-BwuVvAmd.js";
+import { t as u } from "./spinner-BhuZuHK1.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";
 import { Children as p, Fragment as m, cloneElement as h, isValidElement as g, useCallback as _, useContext as v, useEffect as y, useRef as b, useState as x } from "react";
@@ -59,42 +59,42 @@ var T = [
 	{
 		variant: "tonal",
 		color: "primary",
-		class: `${l.primary} ${u.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "tonal",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "tonal",
 		color: "info",
-		class: `${l.info} ${u.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "tonal",
 		color: "success",
-		class: `${l.success} ${u.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "tonal",
 		color: "warning",
-		class: `${l.warning} ${u.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "tonal",
 		color: "error",
-		class: `${l.error} ${u.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "tonal",
 		color: "default",
-		class: `${l.default} ${u.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+		class: `${c.default} ${l.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
 	},
 	{
 		variant: "ghost",
 		color: "primary",
-		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "ghost",
@@ -104,99 +104,99 @@ var T = [
 	{
 		variant: "ghost",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "ghost",
 		color: "success",
-		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "ghost",
 		color: "info",
-		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "ghost",
 		color: "warning",
-		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "ghost",
 		color: "error",
-		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "primary",
-		class: `${l.primary} ${u.primary} focus:bg-primary/10 hover:bg-primary/10`
+		class: `${c.primary} ${l.primary} focus:bg-primary/10 hover:bg-primary/10`
 	},
 	{
 		variant: "outlined",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
 	},
 	{
 		variant: "outlined",
 		color: "info",
-		class: `${l.info} ${u.info} focus:bg-info/10 hover:bg-info/10`
+		class: `${c.info} ${l.info} focus:bg-info/10 hover:bg-info/10`
 	},
 	{
 		variant: "outlined",
 		color: "success",
-		class: `${l.success} ${u.success} focus:bg-success/10 hover:bg-success/10`
+		class: `${c.success} ${l.success} focus:bg-success/10 hover:bg-success/10`
 	},
 	{
 		variant: "outlined",
 		color: "warning",
-		class: `${l.warning} ${u.warning} focus:bg-warning/10 hover:bg-warning/10`
+		class: `${c.warning} ${l.warning} focus:bg-warning/10 hover:bg-warning/10`
 	},
 	{
 		variant: "outlined",
 		color: "error",
-		class: `${l.error} ${u.error} focus:bg-error/10 hover:bg-error/10`
+		class: `${c.error} ${l.error} focus:bg-error/10 hover:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "default",
-		class: `${l.default} ${u.default} focus:bg-foreground/10 hover:bg-foreground/10`
+		class: `${c.default} ${l.default} focus:bg-foreground/10 hover:bg-foreground/10`
 	},
 	{
 		variant: "link",
 		color: "primary",
-		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "link",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "link",
 		color: "success",
-		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "link",
 		color: "info",
-		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "link",
 		color: "warning",
-		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "link",
 		color: "error",
-		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "link",
 		color: "default",
-		class: `${l.default} ${u.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+		class: `${c.default} ${l.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], E = r("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
+], E = a("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
 	variants: {
 		variant: {
 			filled: "",
@@ -205,7 +205,7 @@ var T = [
 			outlined: "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--btn-line,currentColor)_55%,transparent)]",
 			link: "nxgt-btn-bare focus:underline underline-offset-4 hover:underline"
 		},
-		color: c,
+		color: s,
 		size: {
 			xs: "h-(--btn-h) [--btn-h:24px] [--btn-px:12px] [--btn-pxi:4px] [--btn-gap:4px] [--btn-ic:14px] [--btn-sq:6px] [--btn-fs:var(--text-label-md)] [--btn-lh:var(--text-label-md--line-height)] [--btn-ls:var(--text-label-md--letter-spacing)] [--btn-fw:560]",
 			sm: "h-(--btn-h) [--btn-h:32px] [--btn-px:16px] [--btn-pxi:4px] [--btn-gap:6px] [--btn-ic:16px] [--btn-sq:8px] [--btn-fs:var(--text-label-lg)] [--btn-lh:var(--text-label-lg--line-height)] [--btn-ls:var(--text-label-lg--letter-spacing)] [--btn-fw:580]",
@@ -282,38 +282,38 @@ function N(e, t) {
 }
 //#endregion
 //#region lib/components/ui/actions/button/button.tsx
-function P({ className: r, variant: i = "filled", asChild: c = !1, children: l, color: u, size: p, loading: m = !1, lockOnClick: h, spinnerVariant: g = "2", wrap: _, shape: b, selected: x, disabled: T, onClickCapture: E, type: O = "button", ...j }) {
-	let M = c ? n : "button", P = v(d), F = p ?? P, I = c && x !== void 0;
+function P({ className: i, variant: a = "filled", asChild: s = !1, children: c, color: l, size: p, loading: m = !1, lockOnClick: h, spinnerVariant: g = "2", wrap: _, shape: b, selected: x, disabled: T, onClickCapture: E, type: O = "button", ...j }) {
+	let M = s ? r : "button", P = v(d), F = p ?? P, I = s && x !== void 0;
 	y(() => {
-		I && !a() && console.warn("Button: `selected` is ignored with `asChild`; set aria-pressed on the child element.");
+		I && !t() && console.warn("Button: `selected` is ignored with `asChild`; set aria-pressed on the child element.");
 	}, [I]);
-	let L = !c && x !== void 0, R = v(s) || !!(j["aria-label"] || j["aria-labelledby"]) || f(l), z = N(h, m), B = m || z.locked, V = w(B, z, E);
-	return /* @__PURE__ */ S(s, {
+	let L = !s && x !== void 0, R = v(o) || !!(j["aria-label"] || j["aria-labelledby"]) || f(c), z = N(h, m), B = m || z.locked, V = w(B, z, E);
+	return /* @__PURE__ */ S(o, {
 		value: R,
 		children: /* @__PURE__ */ C(M, {
 			"data-slot": "button",
-			"data-variant": i,
-			"data-color": u,
+			"data-variant": a,
+			"data-color": l,
 			"data-size": F,
 			"data-shape": b,
 			"data-selected": L && x ? "true" : void 0,
-			className: e("w-fit max-w-full min-w-0 justify-center", c && "nxgt-btn-as-child overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:22px]", D({
-				variant: i,
-				color: u,
+			className: e("w-fit max-w-full min-w-0 justify-center", s && "nxgt-btn-as-child overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:22px]", D({
+				variant: a,
+				color: l,
 				size: F
-			}), k(_, F), r),
-			type: c ? void 0 : O,
+			}), k(_, F), i),
+			type: s ? void 0 : O,
 			disabled: T,
 			...j,
 			"aria-disabled": B || j["aria-disabled"],
 			"aria-busy": B || j["aria-busy"],
 			"aria-pressed": L ? x : j["aria-pressed"],
 			onClickCapture: V,
-			children: [B && /* @__PURE__ */ S(o, {
+			children: [B && /* @__PURE__ */ S(u, {
 				variant: g,
-				color: i === "filled" ? "light" : u,
+				color: a === "filled" ? "light" : l,
 				className: e("starting:scale-0 duration-500", g === "4" ? "size-7.5" : "size-4.5")
-			}), /* @__PURE__ */ S(t, { children: c ? l : A(l) })]
+			}), /* @__PURE__ */ S(n, { children: s ? c : A(c) })]
 		})
 	});
 }