@nxgt/material 3.81.0 → 3.83.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @nxgt/material
 
+## 3.83.0
+
+### Minor Changes
+
+- [#2485](https://github.com/softistx/nxgt-material/pull/2485) [`407ed60`](https://github.com/softistx/nxgt-material/commit/407ed60325b7e9c8adaf7d19adc4551930899358) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Gallery` takes `selectionActions`, a node or a render function `(selectedIds) => ReactNode`, shown at the end of the "n selected" bar of a `selectable` gallery for bulk actions such as download, move or delete. The bar, and so the actions, stay hidden while nothing is selected, and they wrap under the count on a phone. Fixes [#2446](https://github.com/softistx/nxgt-material/issues/2446).
+
+- [#2491](https://github.com/softistx/nxgt-material/pull/2491) [`db927b8`](https://github.com/softistx/nxgt-material/commit/db927b83eafadce14e49129b42d4087dc817d7dc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `TotalsList`, the on-screen counterpart of `PrintTotals`: a `dl` of labelled figures with labels at the start, right-aligned tabular amounts, an emphasised and ruled `last` row for the grand total, a `tone` per amount (a due or negative figure), an accessible `label` and a `card` or `plain` variant. Its rows have the shape of `PrintTotalRow`, so a screen and its print share data. Fixes [#2490](https://github.com/softistx/nxgt-material/issues/2490).
+
+### Patch Changes
+
+- [#2483](https://github.com/softistx/nxgt-material/pull/2483) [`15d76f5`](https://github.com/softistx/nxgt-material/commit/15d76f5ecb0c18f6f4c9e282b0c3321376cebb40) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChoiceCardGroup` and `CheckCardField` no longer collapse to 0 width in a parent that fits its content (`inline-flex`, a table cell): the balanced group is a size container, which has no intrinsic width, so it now keeps a floor of one card (13.5rem). Fixes [#2482](https://github.com/softistx/nxgt-material/issues/2482).
+
+- [#2480](https://github.com/softistx/nxgt-material/pull/2480) [`91f879b`](https://github.com/softistx/nxgt-material/commit/91f879b85f46f89c645255df6502fbcf57edecfc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The data-display docs page no longer shows a stray `Vue: not yet ([#2470](https://github.com/softistx/nxgt-material/issues/2470))` note on SeatRing, SecretCard, ChangeHistory, ZonedTime, VoteTally, EnrolmentCard and RecoveryCodesStatus (it belongs to TubeCap only), and the TubeCap section names the exported `TubeCapKind` type beside `TUBE_CAP_KINDS`.
+
+- [#2481](https://github.com/softistx/nxgt-material/pull/2481) [`5fec9f4`](https://github.com/softistx/nxgt-material/commit/5fec9f434401235c74cb02927010e937410913a9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs: new `Guides/Recipes` screens on the shipped layouts — feed, gallery, sign-in, conversation thread, settings, dashboard and editor — each a tested story with its code in the plugin's `screen-recipes` skill.
+
+## 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)) |
@@ -711,10 +711,11 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-periodcards.webp" width="120" alt="PeriodCards"> | [`PeriodCards`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#periodcards) | Consecutive date ranges (terms, sprints) as cards: a "Current" marker with `aria-current`, a link over each card, as many 14rem columns as fit (one on a phone). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-chip.webp" width="120" alt="Chip"> | [`Chip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#chip) | Compact pill in three looks (hairline, soft, tag) and a dashed add pill, with leading, avatar and trailing slots, a selected state and a dismiss button; a coloured soft chip reads as a status (the tone's container, its text colour on it). | `Chip` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`); `href` (and `linkComponent`) makes the whole card one link with a trailing chevron; `StatCardGroup` lays compact tiles 2×2 on a phone and in a row beside, holds its width in a flex row, and `align="end"` sets them against its end edge. | `StatCard` |
+| | [`TotalsList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#totalslist) | On-screen `PrintTotals`: a `dl` of labelled figures, labels at the start, right-aligned tabular amounts, a ruled `last` row for the grand total, a `tone` per amount, an accessible `label`; rows share the shape of `PrintTotalRow`. | — (later, #2492) |
 | <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)) |
@@ -932,7 +933,7 @@ which is private: adding it needs a GitHub account with access to it.
 | --- | --- |
 | skill `use-nxgt-material` | an index that picks the component by need and wires imports and `styles.css`; its references cover the tokens and themes, forms, i18n, tests by role, SSR and the other subpaths, read from these docs in `node_modules/@nxgt/material/docs/` |
 | skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and a 12-criteria grid to score a screen out of 5 |
-| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board, an occupancy board, a landing page and a search dialog with its results page), each the code of a tested `Guides/Recipes/<Name>` story |
+| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board, an occupancy board, a landing page, a search dialog with its results page, a team feed, the sign-in, sign-up and forgotten-password screens, a gallery of pictures, settings with sections, a messages thread, an overview of rearrangeable widgets and a document editor), each the code of a tested `Guides/Recipes/<Name>` story |
 | agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check, then looks at 360 and 1440 px screenshots in light and dark and fixes until the grid reads 4 everywhere |
 | agent `design-reviewer` | read-only: scores a screen's screenshots on the same 12 criteria and returns the fixes ranked, each with the component and prop |
 | skill `build-a-theme` + agent `theme-builder` | the app's own theme with `defineTheme`: seeds, tones, background and icon motif, generation, provider and picker; checks the AA contrast of the generated tokens in light and dark and looks at key screens |

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