@nxgt/material 3.53.0 → 3.55.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nxgt/material
 
+## 3.55.0
+
+### Minor Changes
+
+- [#1930](https://github.com/softistx/nxgt-material/pull/1930) [`ea953b1`](https://github.com/softistx/nxgt-material/commit/ea953b15b2d0878c065d4df29d8d5e9e2e5e94cd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `SeatRing`: participants as seats around a circle, or in a two-column grid when its own box is narrow (a container query, so it follows a column or a dialog, not the window). Each seat takes an avatar (default: the label's initials), a label, a status written in words with a tone, a badge and `disabled` / `empty` flags; `renderAvatar`, `renderStatus`, `renderBadge`, `renderEmptySeat` and `centerSlot` replace the defaults, `highlightedId` marks whose turn it is, and `size` is `sm`, `md` or `lg`. Without `selectionMode` it is a `list`; with `selectionMode="single"` or `"multiple"` (`value`, `defaultValue`, `onValueChange`) it is a `listbox` of `option`s with a roving tab stop: arrows, Home and End move, Space or Enter picks, and the selection is shown with a check as well as a tint. New `material.seat-ring.empty` key in English and French. Closes [#1911](https://github.com/softistx/nxgt-material/issues/1911).
+
+## 3.54.0
+
+### Minor Changes
+
+- [#1909](https://github.com/softistx/nxgt-material/pull/1909) [`6ffea13`](https://github.com/softistx/nxgt-material/commit/6ffea13d8897bfa87dac21a49e2dc244d3d90c6e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Dark theme: cards, popovers and dialogs now lift off the page ground. The dark `--card`, `--popover`, `--muted`, `--accent`, `--border` and `--input` are 0.03 of lightness higher (same hue and chroma; Lavande's card goes from `oklch(0.19 0.019 289.4)` to `oklch(0.22 0.019 289.4)`), in `theme-tokens.css`, every shipped theme stylesheet and the `defineTheme` generator; the sidebar keeps its former surface. A new `--card-edge` token (`var(--border)` in light, so light does not change; `color-mix(in oklab, white 8%, var(--card))` in dark, also `border-card-edge`) draws the edge of `Card`, `Popover` and `Dialog`, with a faint top highlight in dark. An app with a custom theme regenerates it to get the new values and the token; an app that overrides `--card` in dark keeps its colour.
+
+### Patch Changes
+
+- [#1905](https://github.com/softistx/nxgt-material/pull/1905) [`0855c07`](https://github.com/softistx/nxgt-material/commit/0855c07bac2aa042e61de09f03e4892954277469) Thanks [@SteveGT96](https://github.com/SteveGT96)! - docs(data-grid): the guide says a column's `cell` renders a node on read-only and computed columns, and that `meta.format` and the built-in editors replace it with text [#1905](https://github.com/softistx/nxgt-material/pull/1905)
+
+- [#1908](https://github.com/softistx/nxgt-material/pull/1908) [`976a84b`](https://github.com/softistx/nxgt-material/commit/976a84bba04d3ee44a26575a7387c2e0aaf89d38) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataGrid`: a number column whose `meta.number.decimals` is a function of the row now shows exactly that many fraction digits (a saved 2.50 reads `2,50`, not `2,5`), in the cell, the editor and a copy. `meta.format` receives the cell's row as `ctx.row` (absent for a total). `numberCodes` gains `fixed` to write exactly `decimals` fraction digits ([#1903](https://github.com/softistx/nxgt-material/issues/1903)).
+
+- [#1907](https://github.com/softistx/nxgt-material/pull/1907) [`32a5103`](https://github.com/softistx/nxgt-material/commit/32a5103570bab504bbc3d276420c8accd80eb3ca) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Switcher: the tooltip that shows the full title (clipped title, or `size="compact"`) is visual only; the trigger no longer gets an `aria-describedby` to it, so a screen reader no longer reads the title and subtitle twice.
+- Updated dependencies [[`6ffea13`](https://github.com/softistx/nxgt-material/commit/6ffea13d8897bfa87dac21a49e2dc244d3d90c6e), [`976a84b`](https://github.com/softistx/nxgt-material/commit/976a84bba04d3ee44a26575a7387c2e0aaf89d38)]:
+  - @nxgt/material-core@0.42.0
+
 ## 3.53.0
 
 ### Minor Changes

package/README.md

@@ -599,6 +599,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback`, `AvatarBase` | Image with a fallback and an optional online / offline dot; `shape` clips it to an expressive shape; the initials scale with the size (40 % of the diameter); `tone` colours the fallback. | `Avatar`, `AvatarImage`, `AvatarFallback` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatargroup.webp" width="120" alt="AvatarGroup"> | [`AvatarGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatargroup) | Overlapping avatars with a `+N` overflow. | `AvatarGroup` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-seatring.webp" width="120" alt="SeatRing"> | [`SeatRing`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#seatring) | Participants as seats around a circle, or in a grid on a narrow box; avatar, name, status, badge and centre slots; optionally a listbox to pick one or several (`selectionMode`). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-shape.webp" width="120" alt="Shape"> | [`Shape`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#shape) | Material 3 Expressive's 35 shapes and a squircle as a backdrop, an icon container or a mask for a photo, with a morph; eight tones or an app tone. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-badge.webp" width="120" alt="Badge"> | [`Badge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#badge) | Status pill, 20 px: default, secondary, error, success, info, warning, `soft` (tonal, for states), outlined; an optional decorative `icon` before the words. | `Badge` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-countbadge.webp" width="120" alt="CountBadge"> | [`CountBadge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#countbadge) | Count in the corner of its children, capped at `99+` and hidden at 0; `animated` pops it in when it changes. | `CountBadge` |

package/dist/{async-slice-DDSsekfm.js → async-slice-yhXT9cml.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-B1lJMPbR.js";
-import { r } from "./translator-BU1o3_l9.js";
+import { i as e, r as t, t as n } from "./stored-language-B39mABN7.js";
+import { r } from "./translator-1ql2sxrx.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-Ct8DSLVv.js → button-CD7f4KFL.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./is-production-GLw59WU8.js";
 import { n, t as r } from "./dist-DVRQkaTK.js";
-import { n as i, r as a, t as o } from "./spinner-Rg4PnBPH.js";
+import { n as i, r as a, t as o } from "./spinner-GKZcQmrR.js";
 import { a as s, i as c, n as l, o as u, s as d, t as f } from "./use-click-lock-BZYtTmVt.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";
 import { t as m } from "./has-text-content-Ds2dkHX_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./use-material-translation-nNF8fUXz.js";
-import { t as i } from "./button-Ct8DSLVv.js";
+import { t as r } from "./use-material-translation-B1p5y3s9.js";
+import { t as i } from "./button-CD7f4KFL.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-BzoNsd-W.js";
+import { t as d } from "./chip-Cl7Wm8Pn.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-BzoNsd-W.js → chip-Cl7Wm8Pn.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { r as t } from "./spinner-Rg4PnBPH.js";
+import { r as t } from "./spinner-GKZcQmrR.js";
 import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-nNF8fUXz.js";
+import { t as r } from "./use-material-translation-B1p5y3s9.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-DsLQeiZc.js → code-editor-tOhXy6Qo.js}

@@ -2,13 +2,13 @@ import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./is-production-GLw59WU8.js";
 import { a as r } from "./dist-lmHmz_bu.js";
-import { c as i, d as a, f as o, n as s, t as c } from "./dropdown-menu-CDN6Nqx6.js";
-import { a as l, i as u, n as d } from "./field-blur-context-Dg1nwWOV.js";
-import { a as f, d as p, r as m, t as h, u as g } from "./toolbar-items-BFY_hns5.js";
-import { t as _ } from "./use-material-translation-nNF8fUXz.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-4zXlIEZ0.js";
+import { c as i, d as a, f as o, n as s, t as c } from "./dropdown-menu-DUZF4xAJ.js";
+import { a as l, i as u, n as d } from "./field-blur-context-ZsK8OTNg.js";
+import { a as f, d as p, r as m, t as h, u as g } from "./toolbar-items-BrJI-BCs.js";
+import { t as _ } from "./use-material-translation-B1p5y3s9.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-BxlY6onk.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { n as C, t as w } from "./escape-owner-DI_lg2ID.js";
+import { n as C, t as w } from "./escape-owner-BYs2_7T5.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";
 import { t as E } from "./react-node-text-Crkpfpco.js";
 import D, { memo as O, useCallback as ee, useEffect as k, useId as A, useImperativeHandle as j, useMemo as M, useRef as N, useState as P } from "react";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-BFY_hns5.js";
-import { t as o } from "./use-material-translation-nNF8fUXz.js";
-import { i as s, n as c, o as l } from "./code-language-items-4zXlIEZ0.js";
-import { r as u, t as d } from "./field-blur-BcJH8H9B.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-BrJI-BCs.js";
+import { t as o } from "./use-material-translation-B1p5y3s9.js";
+import { i as s, n as c, o as l } from "./code-language-items-BxlY6onk.js";
+import { r as u, t as d } from "./field-blur-r1tHwqdF.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-DsLQeiZc.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-tOhXy6Qo.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
 import { ChevronDown as F, ChevronUp as I, Columns2 as L } from "lucide-react";

package/dist/{code-language-items-4zXlIEZ0.js → code-language-items-BxlY6onk.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-CDN6Nqx6.js";
-import { t as n } from "./use-material-translation-nNF8fUXz.js";
+import { d as e, f as t } from "./dropdown-menu-DUZF4xAJ.js";
+import { t as n } from "./use-material-translation-B1p5y3s9.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/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/dist/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);

package/dist/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/dist/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)));
+	}
+}

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

@@ -0,0 +1,139 @@
+/* SeatRing: seats as a grid of cards, or on a circle when the box is wide
+ * enough. The component is a size container, so the switch follows its own
+ * width (a column, a dialog, a phone), never the window. The ring is pure CSS
+ * (trigonometry on `--i`, the seat's index, and `--n`, their count, both set by
+ * the attribute rules below, so server markup carries no `style`). It holds up
+ * to 10 seats (RING_LIMIT); more is a grid. Selected: the primary tint, a
+ * border and a check mark, so colour is never the only cue. */
+@layer components {
+	.nxgt-seat-ring {
+		--seat: 6rem;
+		--seat-avatar: 2.5rem;
+		--seat-dir: 1;
+		container: seat-ring / inline-size;
+	}
+	.nxgt-seat-ring:dir(rtl) {
+		--seat-dir: -1;
+	}
+	.nxgt-seat-ring[data-size="sm"] {
+		--seat: 4.75rem;
+		--seat-avatar: 2rem;
+	}
+	.nxgt-seat-ring[data-size="lg"] {
+		--seat: 8rem;
+		--seat-avatar: 3.5rem;
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-orbit"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-center"] {
+		order: -1;
+		display: grid;
+		place-items: center;
+		text-align: center;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-list"] {
+		display: grid;
+		grid-template-columns: repeat(
+				auto-fill,
+				minmax(min(var(--seat), 100%), 1fr)
+			);
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	@container seat-ring (max-width: 30rem) {
+		.nxgt-seat-ring [data-slot="seat-ring-list"] {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		min-inline-size: 0;
+		min-block-size: 2.75rem;
+		padding: 0.5rem 0.375rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		text-align: center;
+		transition:
+			background-color 150ms,
+			border-color 150ms;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-label"] {
+		max-inline-size: 100%;
+		overflow-wrap: anywhere;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-badge"] {
+		position: absolute;
+		inset-block-start: -0.5rem;
+		inset-inline-end: 0.25rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-mark"] {
+		position: absolute;
+		inset-block-start: 0.25rem;
+		inset-inline-start: 0.25rem;
+		display: grid;
+		inline-size: 1rem;
+		block-size: 1rem;
+		color: var(--primary-text, var(--primary));
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-empty-circle"] {
+		inline-size: var(--seat-avatar);
+		block-size: var(--seat-avatar);
+		border: 2px dashed var(--border);
+		border-radius: 9999px;
+	}
+	.nxgt-seat-ring [data-empty] {
+		border-style: dashed;
+		background: transparent;
+	}
+	.nxgt-seat-ring [data-highlighted] {
+		border-color: var(--primary-indicator, var(--primary));
+		box-shadow: 0 0 0 2px var(--primary-indicator, var(--primary));
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]):hover {
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 8%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-selected="true"] {
+		border-color: var(--primary-text, var(--primary));
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 12%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-disabled="true"],
+	.nxgt-seat-ring [aria-disabled="true"] {
+		opacity: 0.6;
+	}
+	.nxgt-seat-ring [role="option"]:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+			transition: none;
+		}
+	}
+}

package/dist/components/ui/overlays/dialog/dialog.css

@@ -39,7 +39,8 @@
 		--dialog-bg: color-mix(in oklab, var(--primary) 18%, var(--card));
 		box-shadow:
 			var(--nxgt-elevation-3),
-			inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	.nxgt-dialog[data-state="open"] {
 		animation:

package/dist/components/ui/overlays/popover/popover.css

@@ -30,13 +30,14 @@
 		--popover-bg: var(--popover);
 		--popover-lift:
 			0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-		border: 1px solid var(--border);
+		border: 1px solid var(--card-edge);
 		border-radius: var(--radius-md);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover {
 		--popover-bg: color-mix(in oklab, var(--primary) 16%, var(--popover));
 		--popover-lift:
-			var(--nxgt-elevation-2), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			var(--nxgt-elevation-2), inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover[data-variant="tonal"] {
 		--popover-bg: color-mix(in oklab, var(--primary) 34%, var(--popover));