@nxgt/material 3.53.0 → 3.55.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-BoVE0ffh.js";
+import { t as e } from "./public-tWgM204K.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/print.js

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-DlVPS58N.js";
-import { t } from "./translate-material-q-JNxP1m.js";
+import { r as e } from "./i18n-provider-TQAEPlJ5.js";
+import { t } from "./translate-material-hUA-UAP6.js";
 import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";

package/dist/{public-BoVE0ffh.js → public-tWgM204K.js}

@@ -3,21 +3,21 @@ import { n as t } from "./ui.utils-CAnKTCw5.js";
 import { t as n } from "./utils-BLfntITJ.js";
 import { o as r } from "./dist-DVRQkaTK.js";
 import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.js";
-import { n as u, s as d } from "./spinner-Rg4PnBPH.js";
+import { n as u, s as d } from "./spinner-GKZcQmrR.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-DwPmwmA3.js";
-import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-CDN6Nqx6.js";
-import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-BFY_hns5.js";
-import { t as N } from "./use-material-translation-nNF8fUXz.js";
-import { t as _e } from "./button-Ct8DSLVv.js";
-import { n as ve, t as ye } from "./icon-button-C3wDxsh6.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-BzfHcRo6.js";
+import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-DUZF4xAJ.js";
+import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-BrJI-BCs.js";
+import { t as N } from "./use-material-translation-B1p5y3s9.js";
+import { t as _e } from "./button-CD7f4KFL.js";
+import { n as ve, t as ye } from "./icon-button-B8tdlP6R.js";
 import { t as be } from "./useEvent-2fKq-6w8.js";
 import { n as xe, t as Se } from "./toggle-group-BkH23Jk4.js";
-import { o as Ce } from "./escape-owner-DI_lg2ID.js";
+import { o as Ce } from "./escape-owner-BYs2_7T5.js";
 import { n as we } from "./use-slice-reducer-BGkeGtML.js";
 import { r as Te } from "./use-csp-nonce-ZKs9k-ov.js";
-import { n as Ee, t as De } from "./empty-state-Bb9W9did.js";
+import { n as Ee, t as De } from "./empty-state-D9o2id1p.js";
 import { t as Oe } from "./client-only.utils-3nHNzCki.js";
 import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
 import * as P from "react";

package/dist/{rich-code-block-DAUM7Yh_.js → rich-code-block-0OcsqURY.js}

@@ -1,7 +1,7 @@
-import { r as e } from "./spinner-Rg4PnBPH.js";
-import { c as t, n, t as r } from "./dropdown-menu-CDN6Nqx6.js";
-import { t as i } from "./use-material-translation-nNF8fUXz.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-4zXlIEZ0.js";
+import { r as e } from "./spinner-GKZcQmrR.js";
+import { c as t, n, t as r } from "./dropdown-menu-DUZF4xAJ.js";
+import { t as i } from "./use-material-translation-B1p5y3s9.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-BxlY6onk.js";
 import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
 import { t as m } from "./code-block-spec-CGLKRhwD.js";
 import { Suspense as h, lazy as g, useEffect as _, useRef as v, useState as y } from "react";
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
 }
 //#endregion
 //#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
-var N = g(() => import("./code-editor-DsLQeiZc.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = g(() => import("./code-editor-tOhXy6Qo.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ b("div", {

package/dist/{sortable-provider-BLXsGE_0.js → sortable-provider-DzFAlPU_.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
-import { t as n } from "./use-material-translation-nNF8fUXz.js";
-import { t as r } from "./icon-button-C3wDxsh6.js";
+import { t as n } from "./use-material-translation-B1p5y3s9.js";
+import { t as r } from "./icon-button-B8tdlP6R.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import a, { cloneElement as o, createContext as s, forwardRef as c, memo as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
 import { jsx as y } from "react/jsx-runtime";

package/dist/{spinner-Rg4PnBPH.js → spinner-GKZcQmrR.js}

@@ -3,7 +3,7 @@ import { n as t, t as n } from "./utils-BLfntITJ.js";
 import { i as r, o as i } from "./dist-DVRQkaTK.js";
 import { a, c as o, i as s, l as c, n as l, o as u, r as d, s as f, t as p, u as m } from "./dist-lmHmz_bu.js";
 import { a as h, c as g, d as _, i as v, l as y, o as b, r as x, t as S, u as C } from "./floating-ui.dom-KkZSW8_E.js";
-import { t as w } from "./use-material-translation-nNF8fUXz.js";
+import { t as w } from "./use-material-translation-B1p5y3s9.js";
 import * as T from "react";
 import { useLayoutEffect as E, useRef as D, useSyncExternalStore as O } from "react";
 import { jsx as k, jsxs as A } from "react/jsx-runtime";

package/dist/{stored-language-B1lJMPbR.js → stored-language-B39mABN7.js}

@@ -1334,6 +1334,7 @@ var t = {
 			busy: "Busy",
 			active: "Active"
 		},
+		"seat-ring": { empty: "Empty seat" },
 		"country-field": { placeholder: "Country" },
 		"duration-field": {
 			hours: "h",
@@ -4174,6 +4175,7 @@ var t = {
 			busy: "Occupé",
 			active: "Actif"
 		},
+		"seat-ring": { empty: "Place libre" },
 		"country-field": { placeholder: "Pays" },
 		"duration-field": {
 			hours: "h",

package/dist/styles.css

@@ -57,6 +57,7 @@
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
+	--color-card-edge: var(--card-edge);
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);

package/dist/theme-picker.js

@@ -1,10 +1,10 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-B7BVd9fX.js";
 import { a as s, r as c } from "./icon-sprites-CaYXzOL4.js";
-import { t as l } from "./use-material-translation-nNF8fUXz.js";
+import { t as l } from "./use-material-translation-B1p5y3s9.js";
 import { t as u } from "./use-theme-BCLireTd.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-jVdxF_mc.js";
+import { t as p } from "./theme-toggle-C8idk_jQ.js";
 import { n as m, t as h } from "./nxgt-theme-ivgNca3z.js";
 import { useContext as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";

package/dist/{theme-toggle-jVdxF_mc.js → theme-toggle-C8idk_jQ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-nNF8fUXz.js";
+import { t as e } from "./use-material-translation-B1p5y3s9.js";
 import { i as t } from "./theme-store-BdPp43cV.js";
 import { n, t as r } from "./use-theme-BCLireTd.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-BFY_hns5.js → toolbar-items-BrJI-BCs.js}

@@ -2,13 +2,13 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./warn-once-C_e47JM8.js";
 import { o as n, r, t as i } from "./dist-DVRQkaTK.js";
 import { a, c as o, i as s, l as c, r as l, s as u } from "./dist-lmHmz_bu.js";
-import { C as d, S as f, d as p, f as m, m as h, p as g, r as _, u as v } from "./spinner-Rg4PnBPH.js";
+import { C as d, S as f, d as p, f as m, m as h, p as g, r as _, u as v } from "./spinner-GKZcQmrR.js";
 import { i as y, n as b, r as x, t as S } from "./dist-C4wtXCjf.js";
 import { a as C, c as w, l as T, o as E, r as ee, s as te, t as ne } from "./in-dialog-Vwkyp-M5.js";
-import { A as re, M as ie, N as ae, b as oe, d as se, f as ce, i as le, j as ue, l as de, n as fe, o as pe, r as me, t as he, u as ge, y as _e } from "./dropdown-menu-CDN6Nqx6.js";
+import { A as re, M as ie, N as ae, b as oe, d as se, f as ce, i as le, j as ue, l as de, n as fe, o as pe, r as me, t as he, u as ge, y as _e } from "./dropdown-menu-DUZF4xAJ.js";
 import { a as ve, n as ye, r as be, t as xe } from "./dist-B7RjY7SL.js";
-import { t as Se } from "./use-material-translation-nNF8fUXz.js";
-import { o as Ce } from "./escape-owner-DI_lg2ID.js";
+import { t as Se } from "./use-material-translation-B1p5y3s9.js";
+import { o as Ce } from "./escape-owner-BYs2_7T5.js";
 import * as D from "react";
 import { createContext as O, useCallback as we, useContext as k, useEffect as A, useId as Te, useLayoutEffect as j, useMemo as M, useReducer as Ee, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{translate-material-q-JNxP1m.js → translate-material-hUA-UAP6.js}

@@ -1,5 +1,5 @@
-import "./stored-language-B1lJMPbR.js";
-import { a as e, r as t, t as n } from "./translator-BU1o3_l9.js";
+import "./stored-language-B39mABN7.js";
+import { a as e, r as t, t as n } from "./translator-1ql2sxrx.js";
 //#region lib/i18n/translate-material.ts
 var r = /* @__PURE__ */ new WeakMap();
 function i(e) {

package/dist/{translator-BU1o3_l9.js → translator-1ql2sxrx.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, r, t as i } from "./stored-language-B1lJMPbR.js";
+import { a as t, i as n, r, t as i } from "./stored-language-B39mABN7.js";
 import { t as a } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function o(e, t) {

package/dist/{use-chat-composer-DGbDuIUa.js → use-chat-composer-DQpb8ZXV.js}

@@ -5,39 +5,39 @@ import { t as r } from "./warn-once-C_e47JM8.js";
 import { n as i } from "./use-shape-morph-DXdy2X5g.js";
 import { n as a, o, t as s } from "./dist-DVRQkaTK.js";
 import { a as c, c as l, i as u, l as d, n as f, o as p, r as m, s as h, t as g } from "./dist-lmHmz_bu.js";
-import { _, a as v, b as y, c as b, g as x, h as S, i as C, n as w, o as T, r as E, s as D, t as O, v as k, x as A, y as ee } from "./spinner-Rg4PnBPH.js";
+import { _, a as v, b as y, c as b, g as x, h as S, i as C, n as w, o as T, r as E, s as D, t as O, v as k, x as A, y as ee } from "./spinner-GKZcQmrR.js";
 import { a as j, i as M, n as N, r as te, t as ne } from "./dist-C4wtXCjf.js";
 import { i as P, n as re, t as ie } from "./in-dialog-Vwkyp-M5.js";
-import { A as F, C as ae, D as oe, E as se, O as I, S as ce, T as le, _ as ue, b as de, f as fe, g as pe, k as me, l as he, m as ge, n as _e, o as ve, r as ye, s as be, t as xe, u as Se, v as Ce, w as we, x as Te, y as Ee } from "./dialog-DwPmwmA3.js";
+import { A as F, C as ae, D as oe, E as se, O as I, S as ce, T as le, _ as ue, b as de, f as fe, g as pe, k as me, l as he, m as ge, n as _e, o as ve, r as ye, s as be, t as xe, u as Se, v as Ce, w as we, x as Te, y as Ee } from "./dialog-BzfHcRo6.js";
 import { A as De, C as Oe, D as ke, E as Ae, O as je, S as Me, T as Ne, _ as Pe, a as Fe, b as Ie, d as Le, f as Re, g as ze, h as Be, i as Ve, k as He, l as Ue, m as We, n as Ge, o as Ke, p as qe, r as Je, s as Ye, t as Xe, u as Ze, v as Qe, w as $e, x as et, y as tt } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as nt, E as rt, N as it, O as at, c as L, d as ot, f as st, i as ct, k as lt, m as ut, n as dt, o as ft, p as pt, t as mt, u as ht } from "./dropdown-menu-CDN6Nqx6.js";
-import { a as gt, i as _t, n as vt } from "./field-blur-context-Dg1nwWOV.js";
-import { C as yt, S as bt, a as xt, c as St, d as Ct, l as wt, n as Tt, o as Et, s as Dt, u as Ot } from "./toolbar-items-BFY_hns5.js";
+import { D as nt, E as rt, N as it, O as at, c as L, d as ot, f as st, i as ct, k as lt, m as ut, n as dt, o as ft, p as pt, t as mt, u as ht } from "./dropdown-menu-DUZF4xAJ.js";
+import { a as gt, i as _t, n as vt } from "./field-blur-context-ZsK8OTNg.js";
+import { C as yt, S as bt, a as xt, c as St, d as Ct, l as wt, n as Tt, o as Et, s as Dt, u as Ot } from "./toolbar-items-BrJI-BCs.js";
 import { a as kt, i as At, n as jt, o as Mt, t as Nt } from "./bubble-input-B7BVd9fX.js";
 import { i as Pt } from "./dist-B7RjY7SL.js";
 import { o as Ft, s as It, t as Lt } from "./use-click-lock-BZYtTmVt.js";
 import { a as Rt, r as zt } from "./icon-sprites-CaYXzOL4.js";
-import "./stored-language-B1lJMPbR.js";
-import { a as Bt } from "./translator-BU1o3_l9.js";
+import "./stored-language-B39mABN7.js";
+import { a as Bt } from "./translator-1ql2sxrx.js";
 import { h as Vt } from "./get-CTzJAwfc.js";
 import { t as Ht } from "./isEmpty-F_g3jLf8.js";
-import { t as R } from "./use-material-translation-nNF8fUXz.js";
-import { i as Ut, r as Wt, t as Gt } from "./button-Ct8DSLVv.js";
-import { t as z } from "./icon-button-C3wDxsh6.js";
+import { t as R } from "./use-material-translation-B1p5y3s9.js";
+import { i as Ut, r as Wt, t as Gt } from "./button-CD7f4KFL.js";
+import { t as z } from "./icon-button-B8tdlP6R.js";
 import { t as Kt } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as qt, t as Jt } from "./util-4heV2LPI.js";
 import { t as Yt } from "./useEvent-2fKq-6w8.js";
-import { f as Xt } from "./field-blur-BcJH8H9B.js";
+import { f as Xt } from "./field-blur-r1tHwqdF.js";
 import { c as Zt, i as Qt, l as $t, o as en, r as tn, s as nn, t as rn } from "./dist-C3GR7kJd.js";
 import { i as an } from "./toggle-group-BkH23Jk4.js";
-import { a as on, i as sn, o as cn } from "./escape-owner-DI_lg2ID.js";
+import { a as on, i as sn, o as cn } from "./escape-owner-BYs2_7T5.js";
 import { n as ln } from "./use-slice-reducer-BGkeGtML.js";
 import { t as un } from "./browser-only-DQ94lWF8.js";
 import { t as dn } from "./compose-refs-DZ0iIVF-.js";
-import { n as fn, r as pn, t as mn } from "./chip-BzoNsd-W.js";
-import { n as hn, t as gn } from "./icon-badge-DVPBQOKe.js";
+import { n as fn, r as pn, t as mn } from "./chip-Cl7Wm8Pn.js";
+import { n as hn, t as gn } from "./icon-badge-BlaY_a-P.js";
 import { r as _n } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as vn } from "./empty-state-Bb9W9did.js";
+import { t as vn } from "./empty-state-D9o2id1p.js";
 import { t as yn } from "./skeleton-DSdtr2qc.js";
 import { H as bn, V as xn, X as Sn, bt as Cn, it as wn, lt as Tn, n as En, t as Dn, xt as On, yt as kn } from "./dist-moutbfbd.js";
 import { t as An } from "./markdown-Dw_uH7j7.js";
@@ -11353,7 +11353,7 @@ var tC = (e = {}) => jn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-DAUM7Yh_.js")
+			import("./rich-code-block-0OcsqURY.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-CP63sAcS.js → use-heading-spy-vlPOI1Aj.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-DlVPS58N.js";
+import { r as e } from "./i18n-provider-TQAEPlJ5.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 import { busySettler as f, busySettler as p, createSubmitGuard as m, createSubmitGuard as h } from "@nxgt/material-core/submit-guard";

package/dist/{use-material-translation-nNF8fUXz.js → use-material-translation-B1p5y3s9.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-DlVPS58N.js";
-import { t } from "./translate-material-q-JNxP1m.js";
+import { r as e } from "./i18n-provider-TQAEPlJ5.js";
+import { t } from "./translate-material-hUA-UAP6.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/components/data-display.md

@@ -8,6 +8,7 @@ from `@nxgt/material/components`.
 | --- | --- | --- |
 | <img src="../previews/data-display-avatar.webp" width="96" alt=""> | [Avatar](#avatar) | Image with a fallback and an optional online / offline dot |
 | <img src="../previews/data-display-avatargroup.webp" width="96" alt=""> | [AvatarGroup](#avatargroup) | Overlapping avatars with a `+N` overflow |
+| <img src="../previews/data-display-seatring.webp" width="96" alt=""> | [SeatRing](#seatring) | Participants as seats around a circle or in a grid, optionally pickable |
 | <img src="../previews/data-display-shape.webp" width="96" alt=""> | [Shape](#shape) | Material 3 Expressive's shapes as a backdrop, an icon container or a mask for a photo |
 | <img src="../previews/data-display-badge.webp" width="96" alt=""> | [Badge](#badge) | Status pill, 20 px, in seven tones, soft or outlined, with an optional decorative `icon` before the words |
 | <img src="../previews/data-display-countbadge.webp" width="96" alt=""> | [CountBadge](#countbadge) | Count in the corner of its children |
@@ -127,6 +128,70 @@ array (`people.map(...)`); a single wrapper component or fragment counts as one.
 
 ---
 
+## SeatRing
+
+![SeatRing](../previews/data-display-seatring.webp)
+
+Participants as seats: around a circle when there is room, in a grid on a
+phone. A seating plan, a round-table meeting, a party-game lobby. Each seat has
+an avatar, a name, a status written in words and a badge; with `selectionMode`
+it is a listbox to pick one or several seats from.
+
+```tsx
+import { SeatRing } from '@nxgt/material/components';
+
+<SeatRing
+  aria-label="Players"
+  seats={[
+    { id: 'ada', label: 'Ada Example', status: { label: 'Ready', tone: 'success' }, badge: 'Host' },
+    { id: 'bo', label: 'Bo Sample', status: { label: 'Away', tone: 'warning' } },
+    { id: 'free', label: 'Free', empty: true },
+  ]}
+  highlightedId="ada"
+  centerSlot={<p>Round 2</p>}
+  selectionMode="single"
+  value={target}
+  onValueChange={setTarget}
+/>
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `seats` | `Seat[]` | required | `{ id, label, avatar?: { src?, fallback? }, status?: { label, tone? }, badge?, disabled?, empty? }`; clockwise from the top |
+| `layout` | `'ring' \| 'grid'` | `'ring'` | `ring` falls back to the grid in a narrow box and past the seat limit (10 seats) |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | seat width 4.75, 6 or 8rem; ring from a box of 32, 38 or 46rem; at most 10 seats on the circle |
+| `selectionMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | `none`: a list; otherwise a listbox |
+| `value`, `defaultValue`, `onValueChange` | `string \| null` (single), `string[]` (multiple) | — | controlled or not |
+| `highlightedId` | `string` | — | emphasised seat (whose turn it is); `aria-current="true"` on it, in a list and in a listbox |
+| `renderAvatar`, `renderStatus`, `renderBadge` | `(seat) => ReactNode` | — | replace the default avatar, status line or badge |
+| `renderEmptySeat` | `(seat) => ReactNode` | dashed circle and "Empty seat" | content of an empty seat |
+| `centerSlot` | `ReactNode` | — | middle of the ring (a timer, a title); above the seats in the grid |
+| `aria-label` / `aria-labelledby` | `string` | — | names the list or the listbox: always give one |
+
+The layout follows the component's own width (a container query), not the
+window, so it also collapses in a narrow column or a dialog. The grid is two columns
+at 30rem or less and auto-fill above it, with a 44px minimum seat height. The circle is CSS only, so server markup has
+no `style` attribute and a strict CSP is fine.
+
+**Accessibility**
+
+- Not selectable: a `list` of `listitem`s. Selectable: a `listbox` of `option`s
+  (`aria-multiselectable` in `multiple`).
+- A roving tab stop sits on the chosen seat, else the first taken one. Arrow
+  keys, Home and End move the focus (an empty seat is skipped); Space or Enter
+  picks, and pressing the chosen seat again clears it.
+- A seat is named by its label and its status text, never by colour alone.
+- In a listbox, empty and `disabled` seats are `aria-disabled`, and a disabled
+  seat can be reached but not picked (in a list, `disabled` only dims the seat).
+- Put no button in a selectable seat: interactive content (an "Invite" action
+  in `renderEmptySeat`) belongs to a non-selectable ring.
+- Seat changes are not animated beyond a colour fade, which stops under
+  `prefers-reduced-motion`.
+
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
+
+---
+
 ## Shape
 
 ![Shape](../previews/data-display-shape.webp)

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

@@ -7,7 +7,7 @@ documentation-site shell. Everything is imported from
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
+| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`, or `<Switcher size="compact">` for an icon-only one), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
 | <img src="../previews/navigation-layout-accountmenu.webp" width="96" alt=""> | [AccountMenu](#accountmenu) | The app bar's avatar menu: the account, the app's links, Sign out |
 | <img src="../previews/navigation-layout-authcard.webp" width="96" alt=""> | [AuthCard](#authcard) | Signed-out page frame: one `main`, a centred card, its title the `h1` |
 | <img src="../previews/navigation-layout-sidebar.webp" width="96" alt=""> | [Sidebar](#sidebar) | Collapsible navigation sidebar |

package/docs/components/selection-and-choice.md

@@ -28,7 +28,7 @@ value type each one writes. Everything is imported from
 | <img src="../previews/selection-choice-transferlist.webp" width="96" alt=""> | [TransferList](#transferlist) | Two-pane picker: search, counts, select-all, drag between panes |
 | <img src="../previews/selection-choice-sortablelist.webp" width="96" alt=""> | [SortableList](#sortablelist) | Reorderable list: drag or keyboard, announced |
 | <img src="../previews/selection-choice-treeselectfield.webp" width="96" alt=""> | [TreeSelectField](#treeselectfield) | Pick from a tree, single or multiple |
-| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace, establishment or class switcher: menu, search, groups, links |
+| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace, establishment or class switcher: menu, search, groups, links; `size="compact"` an icon-only round trigger for the app bar's `titleAfter` slot |
 
 ## Select
 

package/docs/guides/data-grid.md

@@ -44,12 +44,12 @@ Columns are DataTable's TanStack v9 column definitions. A column with no
 | `lockPosition` | `'start'` or `'end'`: the column keeps its edge when columns are reordered ([columns](#columns-resize-hide-and-reorder)) |
 | `editor` | `'text'`, `'number'`, `'select'`, `'date'`, `'checkbox'`, or your own component ([custom editor](#a-custom-editor)) |
 | `rowEditor(row)` | The built-in editor (`'text'`, `'number'`, `'select'`, `'date'`, `'checkbox'`) a row's cell has, for a column that mixes kinds ([one column, several kinds of row](#one-column-several-kinds-of-row)). It wins over `editor` |
-| `number` | `{ min, max, decimals }` for the number editor; `min`, `max` and `decimals` may be functions of the row. A value outside them, or with too many decimals, is an error: it is never rounded or clamped |
+| `number` | `{ min, max, decimals }` for the number editor; `min`, `max` and `decimals` may be functions of the row. A value outside them, or with too many decimals, is an error: it is never rounded or clamped. A `decimals` given as a function of the row is also what the cell shows: exactly that many fraction digits (`2,50`), where a plain number shows up to that many |
 | `codes` | Symbolic values the number editor also takes ("abs", "exempt"), with the label each language shows and the aliases it accepts |
 | `options` | The select editor's `{ value, label }` list, or a function of the row returning it. The cell shows and copies the label; a typed or pasted text matches a label or a value, in any case and without accents |
 | `date` | `{ min, max }` as ISO dates (`'2026-09-01'`). The value is an ISO date, shown and read in the page's locale |
 | `parse(text, ctx)` | Text to value, replacing the editor's own: `{ value }` or `{ error }`. `ctx` has `lang`, `locale` and `row`. `{ value: null }` clears the cell, whatever the column's value type |
-| `format(value, ctx)` | Value to text, shown in the cell and in the editor |
+| `format(value, ctx)` | Value to text, shown in the cell and in the editor. `ctx` has `lang`, `locale` and, for a cell, its `row`, optional because a total has none: guard it (`ctx.row?.scale ?? 0`) |
 | `validate(value, row)` | A message (a string) flags the cell in error; nothing means valid |
 | `schema` | Any Standard Schema (zod, valibot, ArkType), run after `validate`. An asynchronous one that has not answered after the grid's `checkTimeout` (10 s by default) flags the cell "Check timed out" ([below](#checks-that-never-answer)) |
 | `value(row, cell)` | A computed column: never editable, it follows the unsaved edits. `cell(columnId)` reads what any column's cell shows |
@@ -115,6 +115,43 @@ the same instant, and `null` with `undefined`. Any other object equals only
 itself, so a `parse` that builds a new object on every call reads as a change
 each time. Return primitives or `Date`s, or keep the object's identity.
 
+### A cell that renders a component
+
+A column's `cell` is the TanStack renderer and returns any node: a `Badge`, a
+chip, an icon with a word. It draws the cells of a **read-only column** (no
+`meta.editor`) and of a **computed column** (`meta.value`), where `getValue()`
+is the computed value and follows the unsaved edits. The cell stays read-only
+and is never an editor.
+
+```tsx
+import { Badge } from '@nxgt/material/components';
+
+type Result = { id: string; value: number; high: number };
+
+const helper = createColumnHelper<DataTableFeatures, Result>();
+
+// `meta.value` makes the column computed; `cell` draws what it returns.
+helper.accessor((row) => (row.value > row.high ? 'high' : 'normal'), {
+  id: 'interpretation',
+  header: 'Interpretation',
+  meta: { value: (row) => (row.value > row.high ? 'high' : 'normal') },
+  cell: ({ getValue }) => (
+    <Badge variant="soft" tone={getValue() === 'high' ? 'error' : 'success'}>
+      {getValue() === 'high' ? 'High' : 'Normal'}
+    </Badge>
+  ),
+});
+```
+
+Keep a word in the node: a tone alone never carries the meaning.
+
+**Some columns replace `cell` with text**: those with `meta.format` (computed
+ones included), `meta.codes`, or a built-in `editor` of `'number'`, `'select'`
+or `'date'`, whose value the grid writes itself, in the cell, the editor and the
+clipboard. A `'checkbox'` editor draws a checkbox, and a cell holding an invalid
+unsaved edit shows that text with its error icon. A column that must draw a component leaves both out; a column that
+is edited keeps its editor and its text.
+
 ### Checks that never answer
 
 `validate` and `schema` may return a Promise. A commit waits for it, and so

package/docs/guides/theming.md

@@ -74,6 +74,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--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 |
+| `--card-edge` | `border-card-edge` | the edge of a `Card`, a `Popover` and a `Dialog`: `var(--border)` in light, `color-mix(in oklab, white 8%, var(--card))` in dark, a hairline lighter than the surface so it lifts off `--ground` |
 | `--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) |
 | `--chart-soft-1` … `--chart-soft-5`, `--chart-soft-1-ink` … `--chart-soft-5-ink` | (none) | the native charts' soft palette (`palette="soft"`, `data-chart-palette="soft"`): a pale fill per series and its ink, 3:1 or more on `--card`, for outlines, lines and points ([charts guide](charts.md#soft-palette)) |
@@ -115,6 +116,13 @@ the token (light block and dark block), written from the theme's own
 AA: foreground, muted foreground and primary text are measured on the ground in
 both modes.
 
+In dark, `--card`, `--popover`, `--muted`, `--accent`, `--border` and `--input`
+sit 0.03 of lightness above the former values (same hue and chroma; Lavande's
+card is `oklch(0.22 0.019 289.4)`, it was `0.19`; the sidebar and
+`--sidebar-border` keep their values), and a card, a popover and a dialog
+draw the `--card-edge` hairline plus a faint top highlight, so a card reads
+against the ground. Light is unchanged.
+
 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

package/docs/roadmap.md

@@ -150,8 +150,6 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
-- **Dark cards that separate from the page ground** — in dark mode, cards
-  stand out from the page instead of blending into it ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -350,6 +348,9 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Dark cards that separate from the page ground (3.54.0)** — in dark mode, cards,
+  popovers and dialogs lift off the page ground (lighter surfaces and a `--card-edge`
+  hairline), light unchanged ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
 - **Compact `ServerTable` tiles** — `renderTile` shows a compact `ListTile`
   record row (`size="sm"` with chips) through `item.Row` ([#1766](https://github.com/softistx/nxgt-material/issues/1766)).
 - **A compact `Switcher` trigger, `size="compact"`** — an icon-only round

package/docs/troubleshooting.md

@@ -25,6 +25,7 @@ words in your error.
 
 **Styles & assets**
 
+- [In dark, my cards are lighter, or my own card colour has no edge](#in-dark-my-cards-are-lighter-or-my-own-card-colour-has-no-edge)
 - [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)
@@ -745,6 +746,20 @@ import { Background } from '@nxgt/material/backgrounds';
 </ActivityLayout>
 ```
 
+### In dark, my cards are lighter, or my own card colour has no edge
+
+Since 3.54 the dark `--card`, `--popover`, `--muted`, `--accent`, `--border` and
+`--input` are 0.03 of lightness higher, and `Card`, `Popover` and `Dialog` draw their edge with
+`--card-edge` (a hairline 8 % lighter than `--card`; in light it is
+`var(--border)`). An app that overrides `--card` under `.dark` keeps its
+colour; the edge follows it only when the override is on the same selector as
+the theme (`.dark` or the theme block). An override on a nested element sets
+`--card-edge` beside `--card`. An app that set its own dark card to
+lift it off the page can drop that override, and one that sets `--card-edge`
+(or `border-color` on a card) keeps it. A theme made with `defineTheme` and
+generated before 3.54 has the former values and no `--card-edge`: regenerate
+it (`nxgt-theme`, or the Vite plugin on the next build).
+
 ### The page and the cards look the same
 
 **When:** a screen under `ActivityLayout`, after the 3.24 upgrade or on an older

package/lib/components/components.css

@@ -134,6 +134,10 @@
 @import "./ui/display/period-cards/period-cards.css";
 @import "./ui/layout/sidebar/sidebar-tokens.css";
 @import "./ui/display/avatar/avatar.css";
+/* SeatRing: seats as a grid or on a circle by its own width. */
+@import "./ui/display/seat-ring/seat-ring.css";
+@import "./ui/display/seat-ring/seat-ring-index.css";
+@import "./ui/display/seat-ring/seat-ring-ring.css";
 /* Alert and Banner span the row in the form grids (#1497). */
 @import "./ui/feedback/alert/alert.css";
 @import "./ui/display/stat-card/stat-card.css";

package/lib/components/theme-tokens.css

@@ -11,6 +11,9 @@
 	   keeps the flat look with `--ground: var(--background)`. */
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	/* The card's edge (Card, Popover, Dialog): the border in light; dark draws it a
+	   hairline lighter than the card. */
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
 	--popover: oklch(1 0 0);
@@ -111,38 +114,39 @@
 		var(--primary) 6%,
 		color-mix(in oklab, var(--background) 55%, black)
 	);
-	--card: oklch(0.19 0.019 289.4);
+	--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);
-	--popover: oklch(0.19 0.019 289.4);
+	--popover: oklch(0.22 0.019 289.4);
 	--popover-foreground: oklch(0.943 0.012 291.3);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.995 0.002 291.3);
 	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
 	   on --background and --card. */
 	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
-	/* --primary itself is 2.7:1 on --background, 2.5:1 on --card and 2.3:1 on
-	   --muted. Mixed 25 % toward white: 4.8:1, 4.5:1 and 4.2:1. */
+	/* --primary itself is 2.7:1 on --background, 2.4:1 on --card and 2.1:1 on
+	   --muted. Mixed 25 % toward white: 4.8:1, 4.2:1 and 3.8:1. */
 	--primary-indicator: color-mix(in oklab, var(--primary) 75%, white);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.8:1
-	   on --background, 6.4:1 on --card; 5.1:1 on its own 15 % tonal tint over a
+	   on --background, 6.0:1 on --card; 4.8:1 on its own 15 % tonal tint over a
 	   Card). A filled secondary surface mixes it toward --background (the opaque
 	   70 % mix) to keep 5.4:1 under its near-white text (4.9:1 over a Card). */
 	--secondary: oklch(0.675 0.1135 245.65);
 	--secondary-foreground: oklch(0.995 0.002 291.3);
-	--muted: oklch(0.228 0.022 290);
+	--muted: oklch(0.258 0.022 290);
 	--muted-foreground: oklch(0.725 0.03 292.2);
-	/* 3.7:1 on --background, 3.5:1 on --card; the fill 3.3:1 on the track. */
+	/* 3.7:1 on --background, 3.3:1 on --card; the fill 3.3:1 on the track. */
 	--track: oklch(0.53 0.03 290);
 	--track-fill: oklch(0.85 0.09 276.35);
 	--tooltip: oklch(0.925 0.012 291.3);
 	--tooltip-foreground: oklch(0.446 0.043 291);
-	--accent: oklch(0.25 0.022 290);
+	--accent: oklch(0.28 0.022 290);
 	--accent-foreground: oklch(0.943 0.012 291.3);
 	--error: oklch(0.577 0.245 27.325);
 	--error-foreground: oklch(0.995 0.002 291.3);
 	/* --error stays the fill under near-white text; as text it would give only
 	   4.0:1 on --background and 3.8:1 on --card. Lightened (76 % --error), 6.25
-	   and 5.9:1, and 5.2:1 on a focused error menu item (bg-error/20 over the
+	   and 5.5:1, and 4.9:1 on a focused error menu item (bg-error/20 over the
 	   popover; the former 80 % missed 4.5:1 once rendered). */
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	/* The light brights: on the dark surfaces they read as text and as the
@@ -152,15 +156,15 @@
 	--success-foreground: oklch(0.995 0.002 291.3);
 	--info: oklch(0.707 0.165 254.624);
 	--info-foreground: oklch(0.995 0.002 291.3);
-	/* Amber too, as text: 7.2:1 on --background and 6.7:1 on --card, 6.4:1 and
-	   5.9:1 on its 10% tint; the badge's 60% fill under near-white text is
-	   6.1:1 on a page and 5.8:1 on a Card. */
+	/* Amber too, as text: 7.2:1 on --background and 6.3:1 on --card, 6.4:1 and
+	   5.5:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   6.1:1 on a page and 5.6:1 on a Card. */
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 291.3);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.025 291.4);
-	--input: oklch(0.298 0.027 291.4);
-	/* 4.05:1 on --background, 3.80:1 on --card, 3.50:1 on --muted. */
+	--border: oklch(0.289 0.025 291.4);
+	--input: oklch(0.328 0.027 291.4);
+	/* 4.05:1 on --background, 3.57:1 on --card, 3.22:1 on --muted. */
 	--ring: oklch(0.551 0.03 290);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);