@nxgt/material 3.81.0 → 3.82.0

package/dist/{use-heading-spy-BgyA6SJl.js → use-heading-spy-gDNtK1sU.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DOZ0SfQs.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DXLJ4AZP.js";
 import { a as l } from "./button-CSKUtMI3.js";
 import { i as u } from "./translate-material-D4rn5UaQ.js";
 import { t as d } from "./use-material-translation-DYrfV_JJ.js";

package/docs/README.md

@@ -26,7 +26,7 @@ detail: every option, the second example, and the traps.
 | [Streaming (HLS)](guides/media-streaming.md) | You play `.m3u8` streams in `MediaPlayer` with `@nxgt/material/media-hls` |
 | [Maps](guides/maps.md) | You render Leaflet maps or a location field with `@nxgt/material/map` |
 | [Drawing](guides/drawing.md) | You draw diagrams, badges or illustrations from code with `@nxgt/material/draw`: scenes and JSX primitives, roles and tones, a strict CSP, accessibility and events, sketch, animation, PNG, PDF and e-mail |
-| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
+| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health, education and game sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
 | [Icon motifs](guides/icon-motifs.md) | You use icon backgrounds, celestial skies, illustrations or a theme that names a motif: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, Free fallbacks for Pro-only names |
 | [Backgrounds](guides/backgrounds.md) | You want a gradient or patterned backdrop: tones, intensity, the opt-in `backgrounds.css`, custom colours, motion and CSP |
 | [SSR](guides/ssr.md) | Your app renders on a server and bundles this package |

package/docs/components/data-display.md

@@ -814,7 +814,7 @@ import { TubeCap } from '@nxgt/material/components';
 
 `TUBE_CAP_KINDS` lists the kinds. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
 
-**Storybook:** `Data display/TubeCap` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/TubeCap` · **Vue:** `TubeCap` (`@nxgt/material-vue/components`)
 
 ---
 

package/docs/components/form-fields.md

@@ -1348,6 +1348,11 @@ import { InlineEdit } from '@nxgt/material/components';
 | `onSave` | `(value: string) => void` | — | on save (Enter or the check button), not on each key |
 | `placeholder` | `string` | "Click to edit" | shown while empty |
 | `disabled` | `boolean` | `false` | read-only text |
+| `variant` | Typography step (`headline-lg`, …) | body | the type step of the saved text and of the input, so a title reads as a title |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | none | renders the text (and the input while editing) in an `<h1>`…`<h6>`, so the field can be a document's title; the button and input keep their name |
+| `defaultEditing` | `boolean` | `false` | starts with the input open, and focuses it on mount (a new, untitled document) |
+| `aria-label` | `string` | — | the input's name when there is no `label`; with `headingLevel`, set `label` or `aria-label` (the heading then reads the value, then the label) |
+| `editing` / `onEditingChange` | `boolean` / `(editing: boolean) => void` | — | controls whether the input is open (`disabled` keeps it closed) |
 
 Enter, Escape, Save and Cancel return focus to the field, while a click
 elsewhere saves and leaves focus where it went.

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

@@ -1007,6 +1007,7 @@ const [order, setOrder] = useState(savedLayout); // string[] of tile ids
 | --- | --- | --- | --- |
 | `id` | `string` | required | The tile's name in `order`; unique in the grid |
 | `title` | `ReactNode` | none | An `h3` at the top, the tile's accessible name and its handle's name |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | The level of the title (`<h2>`…`<h6>`), to follow the heading above the grid |
 | `span` / `rowSpan` | as `ResponsiveGrid.Item` | 1 | Columns and rows covered, held to the grid's columns at each width |
 | `plain` | `boolean` | `false` | No card of its own (border, background, padding), for a child that is a card already |
 | `label` | `string` | the title, else the id | The name used by the handle and the announcements when `title` is not text |

package/docs/guides/icon-motifs.md

@@ -138,7 +138,7 @@ An `Illustration` draws a hero icon on a Material 3 Expressive plate, with two
 to four satellites. There are twelve base scenes (`empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in`, `empty-inbox`) and two domain sets of
-ten, **health** and **education**, plus **game** (sixteen scenes for games and
+ten, **health** and **education**, plus **game** (twenty-five scenes for games and
 events), each its own subpath so an app that does not import one does not carry it:
 
 <img src="../previews/feedback-status-illustration.webp" width="480" alt="The twelve base illustration scenes">

package/docs/guides/illustrations.md

@@ -5,7 +5,7 @@ on a Material 3 Expressive plate, two to four satellite icons around it, a
 dashed ring and a few sparkles. There are twelve scenes: `empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in` and `empty-inbox`, and two domain sets of
-ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)), and sixteen for games ([game](#scene-sets-the-game-scenes)). The icons are
+ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)), and twenty-five for games ([game](#scene-sets-the-game-scenes)). The icons are
 [Font Awesome](https://fontawesome.com) sprites **your app serves** (see
 [Icons](../getting-started.md#icons)): the package ships no icon artwork, so it
 works with the sprites your licence covers. The [icon motifs guide](icon-motifs.md) shows them next to the icon backgrounds, the sky and the themes, and lists the suggested names that are Pro only, with Free neighbours.
@@ -148,12 +148,12 @@ icons: serve a Pro sprite, or set `edition="free"` on `IconSpritesProvider`, whi
 
 ## Scene sets: the game scenes
 
-`@nxgt/material/illustrations/game` holds sixteen scenes for a game, a quiz, a
+`@nxgt/material/illustrations/game` holds twenty-five scenes for a game, a quiz, a
 community or an event app: `night-sky`, `dawn`, `village` (night),
-`day-village`, `graveyard`, seven character pictograms (`seer`, `healer`,
-`archer`, `cupid`, `wolf`, `villager`, `witch`), `victory`, `empty-table`,
+`day-village`, `graveyard`, sixteen character pictograms (`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` and `connection-lost`. It works exactly like the other sets,
-and they register side by side. Use them where a screen is empty, waiting,
+and they register side by side. The `fox` and `scapegoat` heroes are drawn as vector art, because the icon sprites have no fox or goat; they follow the tone and dark mode like the sprite icons. Use them where a screen is empty, waiting,
 failed, celebrating or opening: a lobby with no players, a round that waits, a
 dropped connection, a winner, a night-phase hero. Keep them away from behind
 data.

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.81.0",
+	"version": "3.82.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.49.2",
+		"@nxgt/material-core": "^0.50.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",