@nxgt/material 3.81.0 → 3.82.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nxgt/material
 
+## 3.82.0
+
+### Minor Changes
+
+- [#2466](https://github.com/softistx/nxgt-material/pull/2466) [`849e55f`](https://github.com/softistx/nxgt-material/commit/849e55f047f40dbf62459dd9611da743ee133e96) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DashboardTile` takes a `headingLevel` prop (`2` to `6`, default `3`, so nothing changes for existing tiles) to set the level of its title and keep the page's outline right. Fixes [#2453](https://github.com/softistx/nxgt-material/issues/2453).
+
+- [#2476](https://github.com/softistx/nxgt-material/pull/2476) [`3451afc`](https://github.com/softistx/nxgt-material/commit/3451afc178b3173dcbe4710192e2e5f3389c5d0d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/illustrations/game` gains nine scenes for classic roles: `protector`, `elder`, `village-idiot`, `scapegoat`, `raven`, `fox`, `siblings`, `big-bad-wolf` and `wolf-father`, themed and dark-mode aware like the others. `fox` and `scapegoat` draw their animal as vector art (the sprites have none), in the same tone and dark mode as the icons. Fixes [#2473](https://github.com/softistx/nxgt-material/issues/2473).
+
+- [#2478](https://github.com/softistx/nxgt-material/pull/2478) [`add1d9f`](https://github.com/softistx/nxgt-material/commit/add1d9f9d363ed48f1ef8f1e0c99354fa4a555b3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `InlineEdit` can be a document's title: `variant` sets the type step of its text and input, `headingLevel` (`1` to `6`) renders it as a heading, and `defaultEditing` (or `editing` with `onEditingChange`) opens it in editing mode. The input now has an accessible name even without a `label`. Defaults are unchanged. Fixes [#2457](https://github.com/softistx/nxgt-material/issues/2457).
+
+### Patch Changes
+
+- [#2475](https://github.com/softistx/nxgt-material/pull/2475) [`f370c1c`](https://github.com/softistx/nxgt-material/commit/f370c1c9b2979799aab62b0d0732fbc3e278e9de) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable` and `DataTable` in the `cards` and `tiles` layouts no longer sit 4px inside their container: the list's room for the focus ring was inside the scroll box, so with `surface="none"` the first card started 4px right of a heading above it. The scroll box now takes that room back on both inline sides; the focus ring still fits. The list now reaches 4px past its parent on each inline side, so the parent needs that much inline room (a gutter) to avoid a horizontal scroll or a clipped ring. Fixes [#2472](https://github.com/softistx/nxgt-material/issues/2472).
+
+- [#2463](https://github.com/softistx/nxgt-material/pull/2463) [`b28f55f`](https://github.com/softistx/nxgt-material/commit/b28f55f3be17138177cc803a5b24f664f13a445f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The `link` feature's toolbar control (and every other editor control that opens an `AlertDialog`) keeps `aria-expanded` and `aria-haspopup` on its button instead of on a wrapper `div`, so axe no longer reports `aria-allowed-attr`. `AlertDialogTrigger` now renders its child itself (`asChild`) with no extra `div` around it: a single element child is slotted (`asChild`), anything else (text, a fragment) gets the trigger's own button, and the wrapper `div` is gone. Fixes [#2461](https://github.com/softistx/nxgt-material/issues/2461).
+
+- [#2468](https://github.com/softistx/nxgt-material/pull/2468) [`dadd372`](https://github.com/softistx/nxgt-material/commit/dadd3727328e7d8245ea143016fa87423e5463eb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Gallery` with `preset="photos"` (justified rows) keeps a short last row at the row height and start-aligned, instead of stretching its few tiles across the whole width and blowing them up. A last row that is nearly full (it would need at most 1.3 times the target height to fill the width) still fills it, and a lone photo on a narrow screen follows the same rule. Fixes [#2445](https://github.com/softistx/nxgt-material/issues/2445).
+- Updated dependencies [[`3451afc`](https://github.com/softistx/nxgt-material/commit/3451afc178b3173dcbe4710192e2e5f3389c5d0d)]:
+  - @nxgt/material-core@0.50.0
+
 ## 3.81.0
 
 ### Minor Changes

package/README.md

@@ -210,7 +210,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/illustrations` | State illustrations: `Illustration` (`scene`: `empty`, `no-results`, `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`, `maintenance`, `invitation`, `sign-in`, `empty-inbox`, or an id of the `scenes` table it is given; `size`, `title`, `animated`, `hero`, `satellites`, `iconStyle`, `tone`, `duotone`) draws a hero icon on a Material 3 Expressive plate with satellites, from the Font Awesome sprites your app serves (no icon artwork ships); `IllustrationDefaults` (`icons`: `'suggested'` or a table, `iconStyle`, `sets`) opts a subtree's `EmptyState` and `ErrorState` into them; `ILLUSTRATION_SCENES`, `SUGGESTED_ICONS` and the types re-exported from `@nxgt/material-core/illustrations` (`SceneRow`, `SceneTable`), plus `IconStyleInput` and `IconStyleRef` (the `iconStyle` types: `{ family?, type? }` or one of the 37 sprite file names), `SceneId` and `RegisteredScene` (the scene id types: the built-in ids plus those registered through `IllustrationSceneRegistry` by an imported set, or through `RegisteredScenes` by you), `RegisteredScenes` (an interface to augment with the ids of a table of your own registered through `sets`) and `SceneTableIds` (the helper type that gives a table's ids: `interface RegisteredScenes extends SceneTableIds<typeof MY_SCENES> {}`). `unauthorized` and `maintenance` states draw the `forbidden` and `maintenance` scenes. `EmptyState`, `ErrorState` and the `DataTable` empty row (`emptyIllustration`) also take `illustration` as a scene id or `true`. Colours are theme tones in `styles.css`; its own entry ([illustrations guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md)) |
 | `@nxgt/material/illustrations/health` | The health scenes: `HEALTH_SCENES` (`patient-record`, `consultation`, `appointment`, `lab-sample`, `prescription`, `vaccination`, `hospitalisation`, `emergency`, `no-patients`, `lab-results`), `HEALTH_SCENE_IDS`, `HEALTH_SUGGESTED_ICONS`, `HealthScene`; register it with `<IllustrationDefaults sets={[HEALTH_SCENES]}>` so `<Illustration scene="patient-record" />` and `<EmptyState illustration="no-patients" />` work (or pass `scenes={HEALTH_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
 | `@nxgt/material/illustrations/education` | The education scenes: `EDUCATION_SCENES` (`classroom`, `homework`, `exam-grades`, `timetable`, `attendance`, `enrolment`, `library`, `graduation`, `no-students`, `report-card`), `EDUCATION_SCENE_IDS`, `EDUCATION_SUGGESTED_ICONS`, `EducationScene`; register it with `<IllustrationDefaults sets={[EDUCATION_SCENES]}>` so `<Illustration scene="classroom" />` and `<EmptyState illustration="no-students" />` work (or pass `scenes={EDUCATION_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
-| `@nxgt/material/illustrations/game` | The game scenes, for a game, quiz, community or event app: `GAME_SCENES` (`night-sky`, `dawn`, `village`, `day-village`, `graveyard`, `seer`, `healer`, `archer`, `cupid`, `wolf`, `villager`, `witch`, `victory`, `empty-table`, `waiting-players`, `connection-lost`), `GAME_SCENE_IDS`, `GAME_SUGGESTED_ICONS`, `GameScene`; register it with `<IllustrationDefaults sets={[GAME_SCENES]}>` so `<Illustration scene="village" />` and `<EmptyState illustration="empty-table" />` work (or pass `scenes={GAME_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. Pass `title` for an accessible name, otherwise the picture is decorative (`aria-hidden`). An app that does not import it does not carry it |
+| `@nxgt/material/illustrations/game` | The game scenes, for a game, quiz, community or event app: `GAME_SCENES` (twenty-five scenes: `night-sky`, `dawn`, `village`, `day-village`, `graveyard`, `seer`, `healer`, `archer`, `cupid`, `wolf`, `villager`, `witch`, `protector`, `elder`, `village-idiot`, `scapegoat`, `raven`, `fox`, `siblings`, `big-bad-wolf`, `wolf-father`, `victory`, `empty-table`, `waiting-players`, `connection-lost`), `GAME_SCENE_IDS`, `GAME_SUGGESTED_ICONS`, `GameScene`; register it with `<IllustrationDefaults sets={[GAME_SCENES]}>` so `<Illustration scene="village" />` and `<EmptyState illustration="empty-table" />` work (or pass `scenes={GAME_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. Pass `title` for an accessible name, otherwise the picture is decorative (`aria-hidden`). An app that does not import it does not carry it |
 | `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill`, `motif`, and for `preset="icons"` `icons`, `iconStyle` and `iconMotif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 52 ids `Background` draws), `MoonOptions` (the `moon` prop), `IconMotifOptions` (`iconMotif`, with `quiet`: a band the icons fade out of for text), `IconLayout`, `IconQuiet`, `SkyPreset` and `CelestialPreset` (the `sky` ids), `IconsInput` (`icons`), `IconStyleInput` and `IconStyleRef` (`iconStyle`: `{ family?, type? }` or one of the 37 sprite file names, completed by the editor, any other string is a type error), `sky` (`'moon'` or a celestial preset over any preset, also read from the theme's `background.sky`; the four celestial presets and `sky` share the opt-in `@nxgt/material/backgrounds/celestial.css`, also in `backgrounds.css`), `MOTIF_SHAPES_ALL` (the 25 motif shapes), the `MotifLayout` type, the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
 | `@nxgt/material/editor` | The rich text editor: `DocumentEditor` and `DocumentEditorFormField` (with an `outline`, a block handle, focus mode, find and replace, `onUpload`, `onAssist` and `comments`), `CompactEditor` and `CompactEditorFormField`, `RichChatComposer`, `EditorRoot` and the parts (`EditorToolbar`, `EditorContent`, `EditorFooter`, `EditorAssistantPanel`, ...), `useEditor`, the kits (`documentKit`, `compactKit`, `chatKit`, `formNodesKit`), `withFeatures` / `withoutFeatures` and `defineFeature`, and the converters `toHtml`, `toJson`, `toMarkdown`, `fromMarkdown` and `looksLikeMarkdown` — **its own entry, and not in the barrel above**. **Client-only**: import it from a `'use client'` file; `/editor/viewer` is the server-safe one. The `.nxgt-prose` page styles ship in `styles.css` with the component CSS ([DocumentEditor](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#documenteditor)) |
 | `@nxgt/material/editor/viewer` | `RichTextViewer`: shows a saved document (HTML, JSON or Markdown) read-only, **server-safe**, with no editor instance and no `'use client'` ([RichTextViewer](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#richtextviewer)) |
@@ -714,7 +714,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-metric-cards.webp" width="120" alt="TrendCard"> | [`TrendCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#metric-cards), `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard`, `Sparkline` | Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries. A `tone` (named, or your app's) draws the accent in it; deltas and breaches stay semantic. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-card-presets.webp" width="120" alt="FeatureCard"> | [`FeatureCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#card-presets), `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` | Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-tubecap.webp" width="120" alt="TubeCap"> | [`TubeCap`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#tubecap) | A specimen tube's chip: a cap in its fixed convention colour, the container's name beside it, optional volume, accession and action | (later, #2470) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-tubecap.webp" width="120" alt="TubeCap"> | [`TubeCap`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#tubecap) | A specimen tube's chip: a cap in its fixed convention colour, the container's name beside it, optional volume, accession and action | `TubeCap` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-descriptionlist.webp" width="120" alt="DescriptionList"> | [`DescriptionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#descriptionlist), `DescriptionList.Group` | Dense auto-fill grid of `Description`s in a `dl` (`minItem`, `maxColumns`, `meta`, `span`, `labelPosition`, `lines`), or tonal panels per group with `variant="panels"`. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |

package/dist/{alert-dialog-DOZ0SfQs.js → alert-dialog-DXLJ4AZP.js}

@@ -7,64 +7,65 @@ import { t as a } from "./in-dialog-D61Yeaol.js";
 import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-C_Qz_yTk.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Fragment as y, isValidElement as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region ../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs
-var x = /* @__PURE__ */ e({
-	Action: () => W,
-	AlertDialog: () => D,
-	AlertDialogAction: () => I,
-	AlertDialogCancel: () => R,
-	AlertDialogContent: () => N,
-	AlertDialogDescription: () => F,
-	AlertDialogOverlay: () => A,
-	AlertDialogPortal: () => k,
-	AlertDialogTitle: () => P,
-	AlertDialogTrigger: () => O,
-	Cancel: () => G,
-	Content: () => U,
-	Description: () => q,
-	Overlay: () => H,
-	Portal: () => V,
-	Root: () => z,
-	Title: () => K,
-	Trigger: () => B,
-	createAlertDialogScope: () => T
-}), S = Object.defineProperty, C = (e, t) => S(e, "name", {
+var C = /* @__PURE__ */ e({
+	Action: () => K,
+	AlertDialog: () => k,
+	AlertDialogAction: () => R,
+	AlertDialogCancel: () => B,
+	AlertDialogContent: () => F,
+	AlertDialogDescription: () => L,
+	AlertDialogOverlay: () => M,
+	AlertDialogPortal: () => j,
+	AlertDialogTitle: () => I,
+	AlertDialogTrigger: () => A,
+	Cancel: () => q,
+	Content: () => G,
+	Description: () => Y,
+	Overlay: () => W,
+	Portal: () => U,
+	Root: () => V,
+	Title: () => J,
+	Trigger: () => H,
+	createAlertDialogScope: () => D
+}), w = Object.defineProperty, T = (e, t) => w(e, "name", {
 	value: t,
 	configurable: !0
-}), [w, T] = i("AlertDialog", [c]), E = c(), D = /* @__PURE__ */ C((e) => {
+}), [E, D] = i("AlertDialog", [c]), O = c(), k = /* @__PURE__ */ T((e) => {
 	let { __scopeAlertDialog: t, ...n } = e;
-	return /* @__PURE__ */ y(p, {
-		...E(t),
+	return /* @__PURE__ */ x(p, {
+		...O(t),
 		...n,
 		modal: !0
 	});
-}, "AlertDialog"), O = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}, "AlertDialog"), A = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
 	let { __scopeAlertDialog: n, ...r } = e;
-	return /* @__PURE__ */ y(g, {
-		...E(n),
+	return /* @__PURE__ */ x(g, {
+		...O(n),
 		...r,
 		ref: t
 	});
-}, "AlertDialogTrigger")), k = /* @__PURE__ */ C((e) => {
+}, "AlertDialogTrigger")), j = /* @__PURE__ */ T((e) => {
 	let { __scopeAlertDialog: t, ...n } = e;
-	return /* @__PURE__ */ y(s, {
-		...E(t),
+	return /* @__PURE__ */ x(s, {
+		...O(t),
 		...n
 	});
-}, "AlertDialogPortal"), A = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}, "AlertDialogPortal"), M = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
 	let { __scopeAlertDialog: n, ...r } = e;
-	return /* @__PURE__ */ y(m, {
-		...E(n),
+	return /* @__PURE__ */ x(m, {
+		...O(n),
 		...r,
 		ref: t
 	});
-}, "AlertDialogOverlay")), [j, M] = w("AlertDialogContent"), N = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeAlertDialog: i, children: a, ...s } = e, c = E(i), l = n(t, v.useRef(null)), u = v.useRef(null);
-	return /* @__PURE__ */ y(j, {
+}, "AlertDialogOverlay")), [N, P] = E("AlertDialogContent"), F = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeAlertDialog: i, children: a, ...s } = e, c = O(i), l = n(t, v.useRef(null)), u = v.useRef(null);
+	return /* @__PURE__ */ x(N, {
 		scope: i,
 		cancelRef: u,
-		children: /* @__PURE__ */ y(o, {
+		children: /* @__PURE__ */ x(o, {
 			role: "alertdialog",
 			...c,
 			...s,
@@ -77,65 +78,65 @@ var x = /* @__PURE__ */ e({
 			children: a
 		})
 	});
-}, "AlertDialogContent")), P = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}, "AlertDialogContent")), I = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
 	let { __scopeAlertDialog: n, ...r } = e;
-	return /* @__PURE__ */ y(u, {
-		...E(n),
+	return /* @__PURE__ */ x(u, {
+		...O(n),
 		...r,
 		ref: t
 	});
-}, "AlertDialogTitle")), F = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}, "AlertDialogTitle")), L = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
 	let { __scopeAlertDialog: n, ...r } = e;
-	return /* @__PURE__ */ y(f, {
-		...E(n),
+	return /* @__PURE__ */ x(f, {
+		...O(n),
 		...r,
 		ref: t
 	});
-}, "AlertDialogDescription")), I = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}, "AlertDialogDescription")), R = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
 	let { __scopeAlertDialog: n, ...r } = e;
-	return /* @__PURE__ */ y(l, {
-		...E(n),
+	return /* @__PURE__ */ x(l, {
+		...O(n),
 		...r,
 		ref: t
 	});
-}, "AlertDialogAction")), L = "AlertDialogCancel", R = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeAlertDialog: r, ...i } = e, { cancelRef: a } = M(L, r), o = E(r), s = n(t, a);
-	return /* @__PURE__ */ y(l, {
+}, "AlertDialogAction")), z = "AlertDialogCancel", B = v.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeAlertDialog: r, ...i } = e, { cancelRef: a } = P(z, r), o = O(r), s = n(t, a);
+	return /* @__PURE__ */ x(l, {
 		...o,
 		...i,
 		ref: s
 	});
-}, "AlertDialogCancel")), z = D, B = O, V = k, H = A, U = N, W = I, G = R, K = P, q = F;
+}, "AlertDialogCancel")), V = k, H = A, U = j, W = M, G = F, K = R, q = B, J = I, Y = L;
 //#endregion
 //#region lib/components/ui/feedback/alert-dialog/alert-dialog.tsx
-function J({ ...e }) {
-	return /* @__PURE__ */ y(z, {
+function X({ ...e }) {
+	return /* @__PURE__ */ x(V, {
 		"data-slot": "alert-dialog",
 		...e
 	});
 }
-function Y({ children: e, asChild: t = !0, ...n }) {
-	return /* @__PURE__ */ y(B, {
+function Z({ children: e, asChild: t = !0, ...n }) {
+	return /* @__PURE__ */ x(H, {
 		"data-slot": "alert-dialog-trigger",
-		asChild: t,
+		asChild: t && b(e) && e.type !== y,
 		...n,
-		children: /* @__PURE__ */ y("div", { children: e })
+		children: e
 	});
 }
-function X({ ...e }) {
-	return /* @__PURE__ */ y(V, {
+function Q({ ...e }) {
+	return /* @__PURE__ */ x(U, {
 		"data-slot": "alert-dialog-portal",
 		...e
 	});
 }
-function Z({ className: e, ...n }) {
-	return /* @__PURE__ */ y(H, {
+function $({ className: e, ...n }) {
+	return /* @__PURE__ */ x(W, {
 		"data-slot": "alert-dialog-overlay",
 		className: t("nxgt-scrim fixed inset-0 z-50", e),
 		...n
 	});
 }
-function Q({ className: e, onOpenAutoFocus: n, onCloseAutoFocus: r, onEscapeKeyDown: i, ref: o, ...s }) {
+function ee({ className: e, onOpenAutoFocus: n, onCloseAutoFocus: r, onEscapeKeyDown: i, ref: o, ...s }) {
 	let c = h({
 		onOpenAutoFocus: n,
 		onCloseAutoFocus: r
@@ -144,9 +145,9 @@ function Q({ className: e, onOpenAutoFocus: n, onCloseAutoFocus: r, onEscapeKeyD
 		onEscapeKeyDown: i,
 		...s
 	}, !0);
-	return /* @__PURE__ */ y(_, { children: /* @__PURE__ */ y(a, {
+	return /* @__PURE__ */ x(_, { children: /* @__PURE__ */ x(a, {
 		value: !0,
-		children: /* @__PURE__ */ b(X, { children: [/* @__PURE__ */ y(Z, { ref: l.overlayRef }), /* @__PURE__ */ y(U, {
+		children: /* @__PURE__ */ S(Q, { children: [/* @__PURE__ */ x($, { ref: l.overlayRef }), /* @__PURE__ */ x(G, {
 			ref: l.ref,
 			"data-slot": "alert-dialog-content",
 			className: t("nxgt-dialog fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 p-6 sm:max-w-lg max-h-[calc(100dvh-2rem)] supports-[not(height:100dvh)]:max-h-[calc(100vh-2rem)] overflow-y-auto", e),
@@ -158,33 +159,33 @@ function Q({ className: e, onOpenAutoFocus: n, onCloseAutoFocus: r, onEscapeKeyD
 		})] })
 	}) });
 }
-function $({ className: e, ...n }) {
-	return /* @__PURE__ */ y("div", {
+function te({ className: e, ...n }) {
+	return /* @__PURE__ */ x("div", {
 		"data-slot": "alert-dialog-header",
 		className: t("flex flex-col gap-2 text-center sm:text-left", e),
 		...n
 	});
 }
-function ee({ className: e, ...n }) {
-	return /* @__PURE__ */ y("div", {
+function ne({ className: e, ...n }) {
+	return /* @__PURE__ */ x("div", {
 		"data-slot": "alert-dialog-footer",
 		className: t("flex flex-col-reverse gap-2 pt-2 max-sm:*:w-full sm:flex-row sm:justify-end", e),
 		...n
 	});
 }
-function te({ className: e, ...n }) {
-	return /* @__PURE__ */ y(K, {
+function re({ className: e, ...n }) {
+	return /* @__PURE__ */ x(J, {
 		"data-slot": "alert-dialog-title",
 		className: t("text-2xl/8 font-medium tracking-tight text-foreground", e),
 		...n
 	});
 }
-function ne({ className: e, ...n }) {
-	return /* @__PURE__ */ y(q, {
+function ie({ className: e, ...n }) {
+	return /* @__PURE__ */ x(Y, {
 		"data-slot": "alert-dialog-description",
 		className: t("text-muted-foreground text-sm/6", e),
 		...n
 	});
 }
 //#endregion
-export { $ as a, te as c, G as d, x as f, ee as i, Y as l, Q as n, Z as o, ne as r, X as s, J as t, W as u };
+export { te as a, re as c, q as d, C as f, ne as i, Z as l, ee as n, $ as o, ie as r, Q as s, X as t, K as u };

package/dist/components/ui/collections/data-table/data-table-items.css

@@ -48,6 +48,21 @@
 		gap: var(--nxgt-cards-gap, 0.75rem);
 		grid-template-columns: minmax(0, 1fr);
 	}
+	/* The list's 4px of ring room sits inside the scroll box, which clips: the
+	 * box takes it back on each inline side, so the cards' edges (not the
+	 * room's) meet the page's edge and the heading above (#2472); the parent needs 4px of inline room. */
+	[data-slot="table-wrapper"]:has(> [data-slot="data-table-cards"]) {
+		margin-inline: -4px;
+		/* `w-full` (utilities layer) would win over this layer. */
+		width: calc(100% + 8px) !important;
+	}
+	/* Tiles keep their own 4px margin, except on a phone (#2292). */
+	@media (min-width: 768px) {
+		[data-slot="table-wrapper"]:has(> [data-slot="data-table-tiles"]) {
+			margin-inline: -4px;
+			width: calc(100% + 8px) !important;
+		}
+	}
 	@container (min-width: 36rem) {
 		[data-slot="data-table-cards"] {
 			grid-template-columns: repeat(2, minmax(0, 1fr));