@nxgt/material 3.54.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/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/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/ui/display/seat-ring/seat-ring-index.css

@@ -0,0 +1,125 @@
+/* SeatRing: the seat count `--n` and the seat's index `--i`, from data
+ * attributes, for the circle's trigonometry (seat-ring-ring.css). Server
+ * markup carries no `style`. Up to 10 seats (RING_LIMIT); more is a grid. */
+@layer components {
+	.nxgt-seat-ring[data-count="1"] {
+		--n: 1;
+	}
+	.nxgt-seat-ring[data-count="2"] {
+		--n: 2;
+	}
+	.nxgt-seat-ring[data-count="3"] {
+		--n: 3;
+	}
+	.nxgt-seat-ring[data-count="4"] {
+		--n: 4;
+	}
+	.nxgt-seat-ring[data-count="5"] {
+		--n: 5;
+	}
+	.nxgt-seat-ring[data-count="6"] {
+		--n: 6;
+	}
+	.nxgt-seat-ring[data-count="7"] {
+		--n: 7;
+	}
+	.nxgt-seat-ring[data-count="8"] {
+		--n: 8;
+	}
+	.nxgt-seat-ring[data-count="9"] {
+		--n: 9;
+	}
+	.nxgt-seat-ring[data-count="10"] {
+		--n: 10;
+	}
+	.nxgt-seat-ring[data-count="11"] {
+		--n: 11;
+	}
+	.nxgt-seat-ring[data-count="12"] {
+		--n: 12;
+	}
+	.nxgt-seat-ring[data-count="13"] {
+		--n: 13;
+	}
+	.nxgt-seat-ring[data-count="14"] {
+		--n: 14;
+	}
+	.nxgt-seat-ring[data-count="15"] {
+		--n: 15;
+	}
+	.nxgt-seat-ring[data-count="16"] {
+		--n: 16;
+	}
+	.nxgt-seat-ring[data-count="17"] {
+		--n: 17;
+	}
+	.nxgt-seat-ring[data-count="18"] {
+		--n: 18;
+	}
+	.nxgt-seat-ring[data-count="19"] {
+		--n: 19;
+	}
+	.nxgt-seat-ring[data-count="20"] {
+		--n: 20;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="0"] {
+		--i: 0;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="1"] {
+		--i: 1;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="2"] {
+		--i: 2;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="3"] {
+		--i: 3;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="4"] {
+		--i: 4;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="5"] {
+		--i: 5;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="6"] {
+		--i: 6;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="7"] {
+		--i: 7;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="8"] {
+		--i: 8;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="9"] {
+		--i: 9;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="10"] {
+		--i: 10;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="11"] {
+		--i: 11;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="12"] {
+		--i: 12;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="13"] {
+		--i: 13;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="14"] {
+		--i: 14;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="15"] {
+		--i: 15;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="16"] {
+		--i: 16;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="17"] {
+		--i: 17;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="18"] {
+		--i: 18;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="19"] {
+		--i: 19;
+	}
+}

package/lib/components/ui/display/seat-ring/seat-ring-ring.css

@@ -0,0 +1,87 @@
+/* SeatRing's circle: CSS trigonometry on `--i`, `--n` (seat-ring-index.css)
+ * and `--seat-dir` (-1 in a right-to-left box, so the ring is mirrored). The
+ * three container queries only switch `--ring-k` on the orbit once the box
+ * fits the seat size (32rem small, 38rem medium, 46rem large); every rule
+ * below reads it, as 0 (the grid of seat-ring.css) or 1 (the circle), so the
+ * circle's rules are written once. */
+@layer components {
+	@container seat-ring (min-width: 32rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="sm"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+	@container seat-ring (min-width: 38rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="md"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+	@container seat-ring (min-width: 46rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="lg"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-orbit"] {
+		position: relative;
+		display: var(--ring-block, flex);
+		inline-size: var(--ring-size, auto);
+		aspect-ratio: var(--ring-ratio, auto);
+		margin-inline: var(--ring-margin, 0);
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-list"] {
+		position: var(--ring-abs, static);
+		inset: 0;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+		--a: calc(360deg * var(--i, 0) / var(--n, 1));
+		position: var(--ring-abs, relative);
+		inline-size: var(--ring-w, auto);
+		left: calc(
+			var(--ring-k, 0) *
+			(50% + (50% - var(--seat) / 2) * sin(var(--a)) * var(--seat-dir))
+		);
+		top: calc(
+			var(--ring-k, 0) *
+			(50% - (50% - var(--seat) / 2) * cos(var(--a)))
+		);
+		translate: calc(var(--ring-k, 0) * -50%) calc(var(--ring-k, 0) * -50%);
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-center"] {
+		position: var(--ring-abs, static);
+		/* The square inside the circle of seats: the orbit's radius less a seat and a half. */
+		inset: calc(50% - 0.5 * max(0px, 50% - 1.1 * var(--seat)));
+	}
+}