@nxgt/material 3.79.1 → 3.81.0

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # @nxgt/material
 
+## 3.81.0
+
+### Minor Changes
+
+- [#2428](https://github.com/softistx/nxgt-material/pull/2428) [`01db466`](https://github.com/softistx/nxgt-material/commit/01db466820ad19e33444a07bc5bff474168f7130) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChoiceCardGroup` balances its rows: four cards in room for three now draw 2+2 instead of 3+1 (and five in room for four draw 3+2). The column count follows the group's own width through container-query classes, so the server and the client print the same markup, and four fit in one row when the space allows. The new `balance` prop (default `true`) turns it off (`balance={false}`) to keep the previous fill-every-column layout. A balanced group's root is an `@container`, so in a shrink-to-fit parent (an inline-flex box) give the parent a width or pass `balance={false}`, which adds no container. Fixes [#2423](https://github.com/softistx/nxgt-material/issues/2423).
+
+- [#2439](https://github.com/softistx/nxgt-material/pull/2439) [`77dc449`](https://github.com/softistx/nxgt-material/commit/77dc449ca58c3354274756d7790ba5dd3ae84a3f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DayGroupedList` takes a `headingLevel` prop (`2` to `6`, default `3`, so nothing changes for existing lists) to set the level of each bucket's heading and keep the page's outline right. Fixes [#2438](https://github.com/softistx/nxgt-material/issues/2438).
+
+- [#2454](https://github.com/softistx/nxgt-material/pull/2454) [`fd09402`](https://github.com/softistx/nxgt-material/commit/fd09402fce1e7c7b4fcbf3c682172ccfa9842483) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EventCalendar` has a template-week mode, `mode="template"`, for a recurring week such as a school timetable. The columns are named by weekday only, and there is no date navigation, Today button, today marker or now line. Events, slots and changes are keyed by ISO weekday (1 to 7) and `HH:mm` times (`EventCalendarTemplateEvent`, `EventCalendarTemplateSlot`, `EventCalendarTemplateChange`) instead of dates. Create, move, resize and the keyboard keep working. The optional `lanes` prop (`[{ id: 'A', label: 'Week A' }, …]`, with `lane`, `defaultLane` and `onLaneChange`) adds a switch to edit two alternating weeks in the same view: an event with a `lane` belongs to that week, one with none to every week. The dated props are unchanged, but `ComponentProps<typeof EventCalendar>` is now the union of the dated and template props: type a wrapper or a handler with `EventCalendarProps` (dated) or `EventCalendarTemplateProps`. Fixes [#2371](https://github.com/softistx/nxgt-material/issues/2371).
+
+- [#2427](https://github.com/softistx/nxgt-material/pull/2427) [`12a87b4`](https://github.com/softistx/nxgt-material/commit/12a87b4001d0c5a2dcd1b3249f04bd1cfc56a26b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/hooks` exports `useSsrMediaQuery(query, serverValue)`, the hydration-safe media-query hook the library's own components use. Use it for a breakpoint `useIsMobile` (768px) does not cover, such as `(min-width: 80rem)`: the server and the hydrating client render `serverValue` (pass the desktop answer) and the client switches right after hydrating; a client-only render reads the real answer at once.
+
+- [#2455](https://github.com/softistx/nxgt-material/pull/2455) [`2346f87`](https://github.com/softistx/nxgt-material/commit/2346f8762edcfc01b2fa97e0c7dcd3d222695423) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A form grid can sit flush in a container that already pads it: add `data-padding="none"` to the `.form-grid-layout` element and its fields and actions lose their padding (the fields on all sides, the actions left and right), so they line up with the page's, card's or sheet's content edge instead of being double-padded. The default is unchanged. Fixes [#2452](https://github.com/softistx/nxgt-material/issues/2452).
+
+- [#2419](https://github.com/softistx/nxgt-material/pull/2419) [`397062b`](https://github.com/softistx/nxgt-material/commit/397062be38a5e82a649f2e7f4deed358dc6d884e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SortableList` and `SortableListFormField` pass axe: a row holds its own buttons (grip, move, remove), so the rows are `role="listitem"` of a `role="list"` instead of `option`s of a `listbox` (axe `nested-interactive`). Tab reaches the list on one row (a roving tab stop), the arrow keys move the focus from row to row and Space, Enter, Delete and Ctrl/⌘ + arrows keep their meaning when a row has the focus; a key pressed on a row's own button is no longer the list's. The grip's name carries the item (`Drag: Ada Lovelace`), and a truncated row title or subtitle (`ListPane` rows too) keeps its full text in a `title`. The component's props and emitted value are unchanged. For tests and queries: use `getByRole('list', { name })` and `getAllByRole('listitem')` in place of `listbox` and `option`; `aria-selected`, `aria-activedescendant` and `aria-required` are gone (`aria-disabled` stays on the rows of a disabled list or item, and a disabled list has no tab stop), so `required` only draws the asterisk. Fixes [#2416](https://github.com/softistx/nxgt-material/issues/2416).
+
+- [#2471](https://github.com/softistx/nxgt-material/pull/2471) [`55555ad`](https://github.com/softistx/nxgt-material/commit/55555ad70ba3ac23717db1e48f37353efe967ec8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `TubeCap` (`@nxgt/material/components`, Data display): a chip for a specimen tube. The cap colour follows the international tube convention (`kind`: `edta` lavender, `heparin` green, `citrate` light blue, `esr` black, `serum` red, `gel` gold, `fluoride` grey, `trace` royal blue, `other` plain), fixed and identical in light and dark and in every theme. The container's name (`label`, required) is written beside the cap, so colour never carries the meaning alone. Optional `volume`, `accession`, `action` and `size`. Fixes [#2467](https://github.com/softistx/nxgt-material/issues/2467).
+
+### Patch Changes
+
+- [#2465](https://github.com/softistx/nxgt-material/pull/2465) [`8e0853d`](https://github.com/softistx/nxgt-material/commit/8e0853d6bef57b72691d39b95f773778ac0028c7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - In dark mode a tonal Button label now reaches 4.5:1 on a Card, a popover and the muted and accent surfaces, not only on the page and the ground, in every preset (teal success and secondary were 4.24 on a card, secondary 3.75 on muted). The dark secondary, info and success tonal labels are mixed toward white (80 %, 85 % and 70 % of the token). The dark success focus ring is a little lighter too. Nothing to adapt. Fixes [#2459](https://github.com/softistx/nxgt-material/issues/2459).
+
+- [#2441](https://github.com/softistx/nxgt-material/pull/2441) [`9c2453f`](https://github.com/softistx/nxgt-material/commit/9c2453fd280520e609be48ab5fdb5cc576d10bfe) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A field never exceeds its container: the 280px minimum width of `Textarea`, `InputGroupTextarea`, the labelled `Checkbox`, `ImageField`, `UploadField` and `NetworkUploadField` is now `min(280px, 100%)`. In a wide container the floor is the same; in a container narrower than 280px (a phone card, a narrow drawer or column) the field shrinks to fit instead of overflowing it. Fixes [#2210](https://github.com/softistx/nxgt-material/issues/2210).
+
+- [#2443](https://github.com/softistx/nxgt-material/pull/2443) [`5b14c8f`](https://github.com/softistx/nxgt-material/commit/5b14c8fe3f43bdf56abdbf2913e2a3a236ef5c5a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SheetFooter` now stacks its buttons in the same order as `DialogFooter` on a phone: write the secondary action first and the main one last, and the main one is on top (the footer is a reversed column). Before, a sheet showed them in source order, the opposite of a dialog. A sheet footer written main-first (`Apply`, `Reset`) now shows `Reset` on top: swap the two children, or add `flex-col` to its `className`. The order is stated in the Dialog and Sheet docs. Fixes [#2394](https://github.com/softistx/nxgt-material/issues/2394).
+
+- [#2449](https://github.com/softistx/nxgt-material/pull/2449) [`8feff2a`](https://github.com/softistx/nxgt-material/commit/8feff2a393ca4d2f267d6720b2c6badb7488e67f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Gallery` now honours the props you pass to it: an `aria-label` or `aria-labelledby` names the gallery (two galleries on a page can be told apart by screen-reader users), and `id`, `data-*` and other div props reach its root element. Without a name, the default "Gallery" label stays; a given `aria-labelledby` replaces it. `MiniGallery` and `LightboxGallery` accept the same two name props. Fixes [#2447](https://github.com/softistx/nxgt-material/issues/2447).
+
+- [#2434](https://github.com/softistx/nxgt-material/pull/2434) [`a7173d5`](https://github.com/softistx/nxgt-material/commit/a7173d516a3fe051ddf668f02254a8828adc3435) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ListTile` `actions` no longer stretch the row: they are centred on it, so a tile with actions has the height and the title-to-subtitle rhythm of one without. Fixes [#2392](https://github.com/softistx/nxgt-material/issues/2392).
+
+- [#2424](https://github.com/softistx/nxgt-material/pull/2424) [`92d5a03`](https://github.com/softistx/nxgt-material/commit/92d5a03d292834e95ffa6f63ed4aaefd60474b9b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - RepeatableGroup and RepeatableGroupFormField take `removeAtMin="hide"`: at `min` rows the Remove button is not rendered instead of shown disabled (default `'disable'`, unchanged). Nothing to adapt. Fixes [#2389](https://github.com/softistx/nxgt-material/issues/2389).
+
+- [#2425](https://github.com/softistx/nxgt-material/pull/2425) [`fe38112`](https://github.com/softistx/nxgt-material/commit/fe38112ee2371789ba4ee11e660aeb78c41d2775) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The roadmap lists the layouts effort as shipped in 3.80.0.
+
+- [#2433](https://github.com/softistx/nxgt-material/pull/2433) [`4300c78`](https://github.com/softistx/nxgt-material/commit/4300c781b06112e0d11f89aa6ffd589f93b33def) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New recipe `Guides/Recipes/Search dialog and results page`: a command dialog (Ctrl/Cmd+K and a header button) with debounced suggestions grouped by type, and a results page with type chips, a filter that appears only where it applies and highlighted result cards, with its code in the `nxgt-material` plugin's `screen-recipes` skill (2.7.0).
+
+- [#2429](https://github.com/softistx/nxgt-material/pull/2429) [`fc72811`](https://github.com/softistx/nxgt-material/commit/fc7281170ce58ca57c1065a8b65d3f51a4280526) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable`'s `error` takes an `illustration` (a scene id, a node, `true` or `false`), as `empty.none` and `empty.noMatch` do, replacing the scene its `kind` picks. Fixes [#2388](https://github.com/softistx/nxgt-material/issues/2388).
+
+- [#2435](https://github.com/softistx/nxgt-material/pull/2435) [`b1c0445`](https://github.com/softistx/nxgt-material/commit/b1c0445d3a0cc43058c19864578b9db6ee197203) Thanks [@SteveGT96](https://github.com/SteveGT96)! - ServerTable (and DataTable) tiles: the selection checkbox sits on the tile's title row instead of the tile's vertical middle, and the tile's content starts at the top, so a multi-line tile no longer puts the box level with its body text. `item.Row` record rows keep the box centred. The phone select-all checkbox keeps an accessible name in every state. Nothing to adapt. Fixes [#2391](https://github.com/softistx/nxgt-material/issues/2391).
+
+- [#2436](https://github.com/softistx/nxgt-material/pull/2436) [`30ee430`](https://github.com/softistx/nxgt-material/commit/30ee430749af42cf1056b5fb106d7812f8d41a5c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StickyActionBar` no longer adds its own 1rem of horizontal padding: its leading and trailing edges are those of the column it sits in, so its buttons line up with the cards and fields above instead of ending 16px short (sticky or inline). Below `md` it still pads clear of the left and right safe areas. Fixes [#2393](https://github.com/softistx/nxgt-material/issues/2393).
+
+- [#2431](https://github.com/softistx/nxgt-material/pull/2431) [`ec1da47`](https://github.com/softistx/nxgt-material/commit/ec1da478f72e8987a8e13192e7752d54f5ba20ea) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A tonal Button label now reaches 4.5:1 straight on the tinted page (`--ground`), not only on a card or a striped row, in every preset and in both themes. The light `--primary-text` share is solved against the ground too (teal 92 %, corail 88 %, pink 92 %, menthe 95 %), the secondary, info and success tonal labels are mixed 10 % toward black in light, and the error one 20 %. A new contrast pair `primary-text / primary@ground15` guards it. Nothing to adapt: regenerate a theme file to take the new shares. Fixes [#2398](https://github.com/softistx/nxgt-material/issues/2398).
+- Updated dependencies [[`ec1da47`](https://github.com/softistx/nxgt-material/commit/ec1da478f72e8987a8e13192e7752d54f5ba20ea)]:
+  - @nxgt/material-core@0.49.2
+
+## 3.80.0
+
+### Minor Changes
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Kanban` gains `phoneLayout` (`'tabs'`, `'swipe'`, `'columns'`; unset keeps today's board) and `phoneColumn` / `onPhoneColumnChange`. On a phone viewport (below 768px; the board measures its own width, so a narrow region switches too), `tabs` shows one column at a time under a tab list of the columns (name and count, arrow-key navigation), and `swipe` snaps full-width columns sideways; both switch by CSS only, so server and client markup match. A card's popover lists the other columns under "Move to" for moving it without dragging; "Move to" follows the board's own width, not the viewport's (in jsdom, where the width is 0, it renders). Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` draws the app bar in the Material 3 Expressive sizes: `header` takes `'small'` (the default, unchanged), `'center'` (the title centred), `'medium'` and `'large'` (the page's title on a second row in display type, collapsing into the small bar as the page scrolls; `collapse: false` keeps it) and `'none'`, and `{ variant, collapse, hideOnScroll }` to hide the bar on the way down and bring it back on the way up (`inert` while away, with the focus moved to the content). A route chooses its own through `handle.header` (the deepest wins, over the layout's `header`). The headline is the page's one `h1`; a medium or large header on a page with no `handle.title` stays small, and `'none'` drops the phone's menu button with the bar (pair it with `navigation="bar"`). `AppHeader` takes `variant`, `collapse`, `hideOnScroll` and `headline`, `TopAppBar` takes `variant` and `headline`, and `AppShellHandle` gains `header`. The collapse follows the shell's scroll (`useShellScroll`, the window or the content region), sets one CSS variable on the bar and snaps under reduced motion. `ActivityLayout` publishes the bar's real height, tabs and headline row included, as `--nxgt-header-total` on its root (measured with a `ResizeObserver` and written once per frame, not while the bar is collapsing; worked out in CSS from `data-header` and `data-header-tabs` on the root before script runs), and the sticky aside and `Doc` stick below all of it.
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ResponsiveGrid` gains `ResponsiveGrid.Item` (`span` of 1 to 6 or `'full'` and `rowSpan` of 1 to 4, each a number or `{ base, md, xl }` by the grid's own width: 768px and 1280px), `dense` (`grid-auto-flow: dense`) and `flow="masonry"` (CSS multi-column packing, the column count from `minItem` or the width; tiles read down each column, so use it for browsing, not for a sequence). New `DashboardGrid` and `DashboardTile`: tiles with spans in a grid of 1, 2 and 4 columns (`columns` changes them) that the user rearranges in an edit mode, turned on by an "Edit layout" button or by `editing` / `defaultEditing` / `onEditingChange`. In edit mode each tile has a handle: drag it, or press Space, move with the arrows (Home and End go first and last), drop with Space, cancel with Escape, with live-region announcements; below 768px each tile also has earlier and later buttons. The order is the app's: `order` and `onOrderChange` (or `defaultOrder`). Without any of the new props, `ResponsiveGrid` renders the markup it did. New `material.dashboard.*` strings in English and French. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Doc` takes `chrome="embedded"` to be drawn inside the app shell (`ActivityLayout`) instead of owning the viewport. It then has no top bar, reading bar or full-height frame: the shell's header is the page's. The page tree and the outline stick under that header at the offset `ActivityContent`'s `aside` uses (so a taller header and a `scroll="container"` shell are followed) and scroll with the shell; the tree's sheet and the page clear a bottom bar or the floating toolbar (`--nxgt-bottom-chrome`). Below `md` the tree opens from a « Browse docs » button (new `material.doc.browse` key, en and fr), named apart from the shell's « Menu », beside the search and `actions`. `useDoc` returns the mode as `frame`, and `DocChrome` is exported. The default is `chrome="standalone"`, and its markup is unchanged. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `EditorLayout`, the editor page, built on `PaneLayout`: a `toolbar`, a canvas (`children`) that scrolls on its own over a `plain`, `tinted` or `neutral` `ground`, a `properties` panel at the end and an optional `start` panel (layers, outline). It follows its own width: from 768px the properties are an inline panel (`propertiesWidth`, `propertiesOpen` / `defaultPropertiesOpen` / `onPropertiesOpenChange`), below it they open in a bottom sheet from `EditorLayout.PropertiesTrigger`; the start panel is inline from 1280px and a side sheet below, from `EditorLayout.StartTrigger`. The regions are named (`toolbarLabel`, `startLabel`, `propertiesLabel`, `canvasLabel`), the server renders the desktop markup with no `style` attribute. New `material.editor-layout.*` strings in English and French. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NavigationToolbar` is the floating navigation toolbar: a pill of round icon links at the bottom centre, over the content. It is a named `nav` of links (`aria-current="page"` on the current one, each named by a visually hidden label and a tooltip, 48px targets, badges read in the link's name), not a `role="toolbar"`: `Toolbar variant="floating"` stays for actions, and the two share the pill (the `--tb-*` tokens, shadow and slide away of `.nxgt-toolbar`). It keeps 3 to 5 destinations (`bar`, `priority`, `max`, as for `NavigationBar`) and « More » for the rest. `ActivityLayout` draws it with `navigation="floating"`: a name alone applies to every size, the phone included, where it replaces the menu sheet; `{ phone: 'floating' }` limits it. `navigation.hideOnScroll` (off by default) slides it away on the way down and back on the way up, `inert` while away, its focus moved to the content region and restored, no slide under reduced motion; `NavigationToolbar` takes `hideOnScroll` and `hidden` too. While it shows it sets `--nxgt-nav-bar` to `calc(5rem + env(safe-area-inset-bottom, 0px))` (its height, the gap and the safe area, also while slid away), and a docked `MediaPlayerHost` bar sits above it, so `FabDock`, toasts, the mini player and `StickyActionBar` stay clear. Every `ShellNavigation` name is now drawn. An unset `navigation` and the default markup are unchanged. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `LandingLayout`, `LandingSection` and `SiteFooter`: the frame of a public landing page outside the app shell. `LandingLayout` draws a top bar (the brand, your `items` as a `TopNav` from 768px or in a drawer opened by a menu button below it, and your `actions`), a `main` with the `hero` then the sections, and the `footer`; the bar sticks unless `stickyHeader={false}`. `LandingSection` is a band with `eyebrow`, `title`, `description` and `actions` over its content, on a `tone` (`background`, `muted`, `ground`, `primary`), a `width` (`narrow`, `medium`, `default`, `full`) and an `align`; `variant="hero"` draws the page's `h1` larger. `SiteFooter` shows the brand, columns of link groups, a legal line and a slot for social links or a switcher, stacked on a phone. In dark the bar and the footer take the card surface, one tone above the page. A `Guides/Recipes/Landing page` story builds a whole page from them. Needs a router, like `TopNav`. New `material.landing.*` strings in English and French. Additive: nothing existing changes. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ListDetailsLayout` gains a third pane, a URL-driven view and a resizable list, all opt-in (without them the markup is unchanged, except that the list pane now always carries an `id`, and the existing types keep their shape). `inspector` enables `ListDetailsLayout.Inspector title="…"`, open while the view is `'inspector'` (`ListDetailsView`; `activeView`/`onActiveViewChange` take it only with `inspector`, and `ListDetailsLayout.Trigger view="inspector"` needs `inspector` too): beside the details from 1280px, over them below that, switched by CSS with no flip after hydration (Escape and a close button close the overlay), and on a phone one more step after the details with a back button. Its title is a heading that names the `complementary` landmark; the focus moves to it on open and returns to the opener on close. `history="push"` (or `"replace"`, `historyParam`) keeps the view in the URL's search params through React Router, so the browser Back goes from the details to the list on a phone; `useListDetailsParam()` keeps the selected record's id (`?item=`) the same way, and `select(id, { open: 'details' })` writes the id and the view in one history entry. `listWidth` and `resizable` (with `onListWidthChange`) give the list pane a width in px and a keyboard and pointer separator (`role="separator"`, `aria-valuenow`, 240 to 480px). `useListDetails()` keeps `activeView: 'list' | 'details'` (`'details'` while the inspector is open) and also returns `inspectorOpen`, `listWidth` and `setListWidth`. New `material.list-details.*` strings (`inspector-back`, `inspector-close`, `resize`) in English and French. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NavigationBar` is the bottom navigation bar of a phone: 3 to 5 destinations with always-visible labels, an indicator pill, badges read in the link's name and a "More" sheet for the rest (`bar` and `priority` on a `MenuItem` choose them; `splitBarItems()` returns the split). `ActivityLayout` draws it with `navigation="bar"` or `{ phone: 'bar' }`: a name alone draws the bar on a phone only (below 768px), hidden by CSS from 768px, where the default rail shows (`{ tablet: 'bar' }` keeps it there), and the phone has no menu button; the shell's frame, the backdrop and the aside clear `--nxgt-bottom-chrome`. While it shows, `--nxgt-nav-bar` is `calc(4rem + env(safe-area-inset-bottom, 0px))`, so `FabDock`, the toaster, `StickyActionBar`, the thread composer, the mini player and the sticky panels clear the home indicator once, and a docked `MediaPlayerHost` bar sits above the bar (`bottom: var(--nxgt-nav-bar)`). A phone never draws `'rail'` or `'rail-expanded'`, a top bar of links or two-level navigation, given by name or in the object form: it keeps its menu sheet. Unset, the shell's markup is unchanged. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NavigationDrawer` is the Material 3 Expressive navigation drawer: destinations in sections (by the entries' `group`), each a 56px row with an icon, a label and a badge read in the link's name, the current one marked with `aria-current`; `variant="standard"` is a permanent column, `variant="modal"` the same column in a sheet that shares the app shell's menu sheet logic (`open`, `onOpenChange`, `trigger`). `NavigationDrawerSection` and `NavigationDrawerItem` compose it by hand. `ActivityLayout` draws the standard drawer with `navigation="drawer"` and the collapsible sidebar with `navigation="sidebar"`, a small chevron button expanding and collapsing it (it starts collapsed), its state controlled with `sidebarExpanded` / `defaultSidebarExpanded` / `onSidebarExpandedChange` and remembered with `navigation.persistKey` (read after hydration). A preset name alone (`navigation="sidebar"`, `"drawer"`) leaves a phone its default navigation; `{ phone: 'sidebar' }` draws it there. An unset `navigation` and the default markup are unchanged. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NavigationRail` is the Material 3 Expressive rail: destinations with an icon in an indicator pill and the label under it, badges read in the link's name, a `fab` slot for the screen's primary action and a menu button that expands it into a wide rail with the labels inline (`expanded`, `defaultExpanded`, `onExpandedChange`, and `persistKey` to remember the choice, read after hydration). Without `items` it is still the empty `div`. `ActivityLayout` draws it with `navigation="rail-expanded"` (per size, hidden by CSS elsewhere), takes its FAB from the new `navigationFab` prop and its `persistKey` from `navigation`; `'rail'` and the default markup are unchanged. A phone never draws a rail, `'rail'` or `'rail-expanded'`: below 768px it keeps its menu sheet (`{ phone: 'rail-expanded' }` resolves to it). Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PaneLayout` gains `phone` (`'sheet'`, `'bottom'` or `'stack'`: the pane as a side sheet, a bottom sheet or under the main content below 768px), `breakpoint` (`'viewport'`, the default, or `'container'` to switch by the layout's own width, for a layout in a narrow region) and `paneWidth` (`'sm'`, `'md'` or `'lg'`, token sizes with no style attribute). With `phone` or `breakpoint` set the inline pane is a named `<aside>` landmark and the context carries the new values; with `breakpoint="container"` the root is the container and the flex row moves to an inner `data-slot="pane-layout-body"`, so style the body, not the root, for row layout; left unset, the markup and the 648px side sheet are unchanged. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `AppSearchBar` and `SearchView` search from the app bar. `ActivityLayout`'s `header` takes `search` (`true`, or the bar's props; a route's `handle.header` too, `search: false` drops it there): from 768px a pill, a filled and fully rounded search field with the `results` (a node, or a function of the text and a `close`) in a panel docked under it, and on a phone a search button that opens `SearchView`, a full-screen modal dialog with a back arrow and 48px targets. `value`, `defaultValue` and `onValueChange` control the text, `onSubmit`, `placeholder`, `label`, `loading`, `leading` and `trailing` shape it, `shortcut` (`"/"`, `"Ctrl+K"`) is shown as a hint and bound on the document, and `resultCount` is announced politely. The view mounts only while open, traps the focus, puts it in the field when it opens and returns it to the element that opened it; Escape, the arrow and Enter close it. New strings `material.app-header.*` in English and French. The phone button and the pill are both drawn and a breakpoint class hides one, so the server's markup and the hydrating client's match; the shortcut acts on the visible one. `header.search` was `boolean` and drew nothing; it still accepts `true`.
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `SettingsLayout`: the settings screen on `ListDetailsLayout`. `sections` (`id`, `title`, `description`, `icon`, `group`, `keywords`, `disabled`, `content`) show as grouped links with an icon well beside the selected section's page (heading, description, your rows); on a phone the list comes first, a tap opens the page, the focus moves to its heading, and Back returns to the tapped row. The selection is the `?section=` search param (`param`, `viewParam`), shared links open the page on a phone, and `search` adds a filter over the sections. Needs a router. `ListDetailsLayout` also moves a phone's focus to an element marked `data-pane-focus` inside the details, if there is one. New `material.settings-layout.*` strings in English and French. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` takes `navigation` (a preset name, or one per phone, tablet and desktop) and `header` (a variant, or a variant with options) and `MenuItem` gains `children`, `group`, `bar` and `priority`; unset, the shell draws exactly what it did. `resolveNavigation()`, `resolveHeader()` and `navigationClasses()` return what they resolve to, `useShellScroll()` with `ShellScrollProvider` gives the scroll direction and offset, and `--nxgt-nav-bar` and `--nxgt-bottom-chrome` leave room at the bottom for `FabDock`, `Toaster`, the mini player and `StickyActionBar`. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout`'s `header` draws `tabs`, and a route's `handle.back` draws a back arrow. `header.tabs` (a `TabsNav`, on the layout or per route in `handle.header`; `tabs: null` drops them for a route) is a 48px row at the foot of the app bar: it stays under a `medium` or `large` header as it collapses, and when `hideOnScroll` slides the bar away the tabs stay pinned at the top of the window (only the bar's rows go `inert`, and a tab keeps the focus). `handle.back` is `{ to, label? }`, a link drawn with the shell's `linkComponent` named "Back" or "Back to <label>", or `true`, a button that goes back in the history (up one level when the visit started on that page); the arrow is a 48px target at the start of the bar, comes first in the bar, before the title; the phone's menu button follows it while the phone has the menu sheet, and the rail or sidebar stays from 768px. `AppHeader` takes `tabs` and `back`; the new types are `ShellBack` and `AppShellHandle['back']`. New strings `material.app-header.back` and `back-to` in English and French. Unset, the bar is the same markup as before.
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ThreadLayout` gains `width` (`'form'`, `'reading'` or `'wide'`: a centred column of 32, 48 or 72 rem with token classes), `footer` (a sticky action bar that stays in view and clear of `--nxgt-bottom-chrome` and the home bar) and `stepperPlacement` (`'top'` or `'side'`: the `stepper` goes in a `nav` named "Progress", a sticky rail beside the column from 1280px with `'side'`, above it below). `AuthCard` gains `layout="split"` (two columns from 768px: the new `visual` slot, which can host a `Background` preset, and an opaque form side; a phone keeps the form under its brand row) and `visual`. All of it is placed by CSS classes only, so the server and the client render the same markup; left unset the markup is unchanged. New string `material.navigation.steps`, en and fr. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `TopNav` is the Material 3 Expressive top navigation, built on Radix's navigation menu: one named `nav` of 48px pill destinations, the current one marked with `aria-current="page"`, badges read in the link's name, and an entry with `children` opening a dropdown of its child links (its trigger reads as active while a child is current; arrow keys, Escape and reduced motion follow Radix). `TopNavItem` and `TopNavMenu` compose it by hand. `ActivityLayout` draws it in the app header, after the brand, with `navigation="top"`; the phone keeps its menu sheet, which now nests an entry's `children` under it (as does the expanded sidebar). A preset name alone leaves a phone its default navigation, and `{ phone: 'top' }` keeps the menu sheet. An unset `navigation` and the default markup are unchanged. An entry with `children` is only a trigger: its `url` is never a link, so put an "all" link as the first child. Past about 5 entries the bar does not fit at 768px beside the brand and the title and pushes the header's actions out; it does not scroll (that would clip the dropdowns). Use `{ tablet: 'rail', desktop: 'top' }` for a longer menu. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NavigationRailPanel` is the second level of a two-level navigation: a `nav` beside the `NavigationRail` that lists the `children` of the top-level entry the location belongs to, under its label, the current child marked with `aria-current="page"`. It is open by default and a button folds it to a narrow strip (`aria-expanded`, focus kept); nothing opens it on hover. `ActivityLayout` draws the rail (without its own menu button) and the panel together with `navigation="two-level"` from 768px; `navigation.persistKey` remembers the panel's state under `nxgt-panel:<key>`, read after hydration. A rail entry always links to its own `url`; an entry without `children` hides the panel by CSS, its markup kept. `NavigationRail` now lights the top-level entry whose child is current, even a child outside the parent's `url`. A preset name alone leaves a phone its default navigation, and `{ phone: 'two-level' }` keeps the menu sheet. An unset `navigation` and the default markup are unchanged. New strings: `material.navigation.panel-collapse` and `panel-expand` (en, fr). Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
+### Patch Changes
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Toaster`'s bottom offset now clears the home indicator. `FabDock`, the layout frame and a docked `MediaPlayerHost` bar no longer add the bottom inset twice. `StickyActionBar` clears a docked `MediaPlayerHost` bar as well as the navigation bar.
+
+- [#2421](https://github.com/softistx/nxgt-material/pull/2421) [`0b26d2c`](https://github.com/softistx/nxgt-material/commit/0b26d2c8f91a272d5ac8728580f11d8d860e0bf6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New [layouts guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/layouts.md): pick a navigation preset, an app bar variant and a page layout by need, with a working example each. The README gains a layouts section, `EditorLayout`'s `propertiesOpen` row reads more clearly and its docs preview is refreshed. Docs only. Refs [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
 ## 3.79.1
 
 ### Patch Changes

package/README.md

@@ -287,6 +287,34 @@ function InviteForm({ onSubmit }: { onSubmit: (v: { email: string }) => void })
 the same pair. [Getting started](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/getting-started.md) walks through a first
 screen.
 
+### Layouts
+
+`ActivityLayout` draws the app shell; `navigation` and `header` choose how, per
+window size, and are opt-in (unset, the shell is unchanged). Page layouts go
+inside it. `items`, `Outlet` (from `react-router`) and `ProfileForm` below are your own.
+
+```tsx
+import { ActivityLayout, SettingsLayout } from '@nxgt/material/components';
+
+// a bottom bar on a phone, a rail from 768px, a collapsible sidebar from 1280px
+<ActivityLayout
+  items={items}
+  navigation={{ phone: 'bar', tablet: 'rail', desktop: 'sidebar', persistKey: 'nav' }}
+  header={{ variant: 'large', search: { placeholder: 'Search' } }}
+>
+  <Outlet />
+</ActivityLayout>
+
+// grouped settings: a list then the page on a phone, the section in the URL
+<SettingsLayout
+  sections={[{ id: 'profile', group: 'Account', title: 'Profile', content: <ProfileForm /> }]}
+/>
+```
+
+Also: `ListDetailsLayout`, `PaneLayout`, `ThreadLayout`, `ResponsiveGrid`,
+`DashboardGrid`, `EditorLayout` and `LandingLayout`. The [layouts guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/layouts.md)
+picks one by need.
+
 ### Amounts and dates in your locale
 
 ```tsx
@@ -489,7 +517,8 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) | wiring fields to React Hook Form and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; `handle.titleAfter` / `titleAfter` a slot right after it, such as a record's `Switcher`, and `headerContext` a small tenant line from md up; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link, or with `icon: true` keeps it with its own target and name, `breadcrumb={false}` hides the trail), the `<main>` landmark, the `h1` title, document scrolling, a background preset behind the shell (`backdrop`), and the tinted page ground the cards stand on (`--ground`, the opt-out) |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (its `header`: small, center, medium and large collapsing on scroll, hide on scroll, a search in the bar, sticky tabs under it, a back arrow per route with `handle.back`, per route with `handle.header`; route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; `handle.titleAfter` / `titleAfter` a slot right after it, such as a record's `Switcher`, and `headerContext` a small tenant line from md up; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link, or with `icon: true` keeps it with its own target and name, `breadcrumb={false}` hides the trail), the `<main>` landmark, the `h1` title, document scrolling, a background preset behind the shell (`backdrop`), and the tinted page ground the cards stand on (`--ground`, the opt-out) |
+| [Layouts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/layouts.md) | choosing a navigation preset (bar, rail, drawer, sidebar, top, two-level, floating), an app bar variant or a page layout (list and details, settings, dashboard, editor, landing), with an example of each |
 | [Themes for your app](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md) | defining app themes, generating their stylesheets and types with the Vite plugin's `themes` option or the `nxgt-theme` command, the CI check |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, the page ground (`--ground`, `bg-ground`: its light and dark values and the opt-out), dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
@@ -685,6 +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-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)) |
@@ -733,15 +763,20 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; it draws the theme's background (Lavande's is the gradient), `backdrop` puts a `/backgrounds` preset behind it for one screen, and `backdrop={false}` draws a plain page, and `keepClear="gaps"` lets its glyphs sit in the gaps between surfaces of a dense page. It paints the tinted page ground (`--ground`, `bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card` (`--ground: var(--background)` opts out). `ActivityContent` takes an `aside` side panel (beside the content from 1280px in CSS only, sticky under the app bar, a named `complementary` landmark, stacked below) and `width="form" \| "reading"` to cap the main column with the panel right beside it; `notice` puts an `Alert` or `Banner` above both, at their width. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet (`header` picks its size: small, center, medium or large collapsing on scroll, `hideOnScroll`, a route's `handle.header`), route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; it draws the theme's background (Lavande's is the gradient), `backdrop` puts a `/backgrounds` preset behind it for one screen, and `backdrop={false}` draws a plain page, and `keepClear="gaps"` lets its glyphs sit in the gaps between surfaces of a dense page. It paints the tinted page ground (`--ground`, `bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card` (`--ground: var(--background)` opts out). `ActivityContent` takes an `aside` side panel (beside the content from 1280px in CSS only, sticky under the app bar, a named `complementary` landmark, stacked below) and `width="form" \| "reading"` to cap the main column with the panel right beside it; `notice` puts an `Alert` or `Banner` above both, at their width. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then an optional Theme choice (`themeChoice`) and a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding, an optional backdrop (the theme's by default) that keeps clear of the card. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface in four sizes (`variant`), and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
+| | [`AppSearchBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#appsearchbar), `SearchView` | The app bar's search (`header.search` on `ActivityLayout`): a pill with a docked results panel from 768px (a `shortcut`, `results` as a node or a function, a polite `resultCount`), a search button opening a full-screen, focus-trapped `SearchView` on a phone. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stickyactionbar.webp" width="120" alt="StickyActionBar"> | [`StickyActionBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stickyactionbar) | The bar of a page's main decision: stuck to the bottom on a phone above the keyboard and clear of the safe areas, inline from `md`, one primary action. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Breadcrumb primitives. | `Breadcrumb` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-listdetailslayout.webp" width="120" alt="ListDetailsLayout"> | [`ListDetailsLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#listdetailslayout), `PaneLayout`, `ThreadLayout` | List / details that collapses to one view on mobile (a `back` bar and focus moves on the details, `breakpoint="container"` to follow its own width), a side pane that becomes a sheet, and a centred column. | `ListDetailsLayout`, `PaneLayout`, `ThreadLayout` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns, or fills by a minimum tile width (`minItem`) with a `gap`. | `ResponsiveGrid` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-settingslayout.webp" width="120" alt="SettingsLayout"> | [`SettingsLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#settingslayout) | The settings screen: grouped sections beside the selected one's page, list then page on a phone, the section kept in the URL, optional search. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-landinglayout.webp" width="120" alt="LandingLayout"> | [`LandingLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#landinglayout), `LandingSection`, `SiteFooter` | The frame of a public landing page outside the app shell: a top bar on `TopNav` (a drawer on a phone), a hero and bands on the theme's surfaces, a footer of link columns. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns, or fills by a minimum tile width (`minItem`) with a `gap`; `ResponsiveGrid.Item` spans, `dense` packing and `flow="masonry"`. | `ResponsiveGrid` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-dashboardgrid.webp" width="120" alt="DashboardGrid"> | [`DashboardGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#dashboardgrid) | Tiles with spans that the user rearranges in an edit mode, by drag or keyboard; the order is the app's. | React only for now |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-editorlayout.webp" width="120" alt="EditorLayout"> | [`EditorLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#editorlayout) | The editor page: a toolbar, a canvas that scrolls on its own, properties at the end (a bottom sheet on a phone) and an optional outline at the start. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sectioncolumns.webp" width="120" alt="SectionColumns"> | [`SectionColumns`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sectioncolumns) | Short page sections side by side from a viewport breakpoint (`from`, `columns`), stacked in source order below it; not a landmark. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-recordpage.webp" width="120" alt="RecordPage"> | [`RecordPage`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#recordpage), `RecordDetails` | The page of one record: a header card, the content, and the record's facts as a side panel from `xl` that stacks after (or before) the content, with a muted "Added on … · Updated on …" line. | — (later, [#2127](https://github.com/softistx/nxgt-material/issues/2127)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-resizable.webp" width="120" alt="ResizableGroup"> | [`ResizableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#resizablegroup), `ResizablePanel`, `ResizableSeparator` | Resizable panels with an optional grip handle. | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
@@ -752,9 +787,14 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress (expressive shapes, optional steps, a phone header with Back and Next). | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions; `size="compact"` is a home-page greeting band, and `background` draws a `Background` behind it. | `Hero`, `HeroBackgroundProps` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`, or drawn inside the app shell with `chrome="embedded"`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 52 presets on `/backgrounds`, and a `sky` overlay. | `Background` |
-| — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
+| — | [`NavigationBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationbar) | Bottom bar of 3 to 5 destinations with labels, badges and a More sheet. | `—` |
+| — | [`TopNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topnav) | Top navigation bar of destinations; an entry with `children` opens a dropdown; `navigation="top"` draws it in the app header. | `—` |
+| — | [`NavigationDrawer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationdrawer) | Navigation drawer in sections, `standard` (permanent) or `modal` (a sheet); `NavigationDrawerSection`, `NavigationDrawerItem`. | `—` |
+| — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Navigation rail with a FAB slot, badges and an expanded state (the FAB comes with `navigation="rail-expanded"`); an empty `div` without items. | `NavigationRail` (placeholder) |
+| — | [`NavigationRailPanel`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrailpanel) | Second-level panel beside the rail, listing the current entry's `children`; open by default, collapsible; `navigation="two-level"` draws both. | `—` |
+| — | [`NavigationToolbar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationtoolbar) | Floating pill of navigation links at the bottom centre (a `nav`, not a `role="toolbar"`), 3 to 5 destinations and More; optional hide on scroll; `navigation="floating"` draws it. | `—` |
 
 ### Overlays & menus
 
@@ -831,7 +871,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-chat-overview.webp" width="120" alt="ChatInbox"> | [`ChatInbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#chat-kit), `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer`, `ChatThreadHeader`, `ChatWidget`, `ChatConversationItem`, `ChatActionProposal`, `ChatToolActivity`… | Chat kit: inbox (list + thread, container queries from `@md`), bubbles grouped by sender or flat rows, read receipts, replies, reactions and a message toolbar, a pill composer with quick replies, attachments and stop, a floating chat widget, an approval card for an assistant's proposed action and a compact tool-step row; 320 px to desktop, light and dark. | `ChatInbox`, `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer` (same parts; `ChatActionProposal` and `ChatToolActivity` not yet, [#2145](https://github.com/softistx/nxgt-material/issues/2145)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-kanban.webp" width="120" alt="Kanban"> | [`Kanban`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#kanban) | Board with columns, swimlanes, WIP limits, search, and drag-and-drop cards and columns. | `Kanban` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a now line, a mini-month side panel and a phone layout. | `EventCalendar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a recurring template week (`mode="template"`), a now line, a mini-month side panel and a phone layout. | `EventCalendar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-native-charts-linechart.webp" width="120" alt="LineChart"> | [`LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`, `RadialBarChart`, `FunnelChart`, `HeatmapChart`, `RadarChart`, `ScatterChart`, `ComboChart`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#charts) from `@nxgt/material/charts` | Native SVG charts with keyboard point navigation, a screen-reader summary, a "View data" table, `patterns`, a hide/isolate legend, zoom and phone scroll (client-only entry; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)). | [not yet](https://github.com/softistx/nxgt-material/issues/1255) (#1255) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#emojipicker), `EmojiList` | Shared picker. `ChatComposer` takes `emojis`; `Markdown` expands `:shortcode:`; the RTE toolbar uses the same picker. | `EmojiPicker`, `EmojiList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. | `MentionList` |
@@ -892,7 +932,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 and an occupancy board), 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 and a search dialog with its results page), 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-653apk3f.js → alert-dialog-DOZ0SfQs.js}

@@ -4,7 +4,7 @@ import { o as n } from "./dist-DVRQkaTK.js";
 import { r } from "./dist-DWZXlCZR.js";
 import { a as i } from "./dist-DHdUUM1w.js";
 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-Cevw_6yq.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";

package/dist/{async-slice-CXLbQuOc.js → async-slice-BfVokA46.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-DJkf4J7t.js";
+import { l as e, r as t, s as n, u as r } from "./translator-CcEgQ-H7.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-3op3rtZh.js → button-CSKUtMI3.js}

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

package/dist/{calculator-KqIMBXSh.js → calculator-Cv00UQgR.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, r as n, t as r, u as i } from "./tabs-KGKvve3y.js";
-import { t as a } from "./button-3op3rtZh.js";
-import { t as o } from "./use-material-translation-CD6QoVal.js";
-import { t as s } from "./icon-button-Cogxy1cy.js";
+import { n as t, r as n, t as r, u as i } from "./tabs-Um0SFyf1.js";
+import { t as a } from "./button-CSKUtMI3.js";
+import { t as o } from "./use-material-translation-DYrfV_JJ.js";
+import { t as s } from "./icon-button-4PKlaI1g.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as l } from "./useEvent-2fKq-6w8.js";
 import { t as u } from "./useLatest-C2PnQEeD.js";
@@ -11,7 +11,7 @@ import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { n as m, t as h } from "./calculator-context-BugcKuVG.js";
 import { a as g, c as _, i as v, l as y, n as b, o as ee, r as te, s as ne } from "./calculator-announce-DRd2c6Dq.js";
-import { i as re, t as ie } from "./pos-types-DKCkOTYy.js";
+import { i as re, t as ie } from "./pos-types-BFrapNmx.js";
 import { a as ae, r as oe } from "./key-layout-cR79xfGE.js";
 import { n as x, r as se, t as ce } from "./programmer-word-CNCF7DJF.js";
 import { t as le } from "./standard-layout-BuSRr3TY.js";
@@ -279,11 +279,11 @@ function Le({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var Re = {
-	scientific: () => import("./scientific-variant-2y3UxAAU.js"),
-	pos: () => import("./pos-variant-GrUfbTTP.js"),
-	programmer: () => import("./programmer-variant-eKJNKENL.js"),
-	financial: () => import("./financial-variant-CggTpad2.js"),
-	conversion: () => import("./conversion-variant-BDFAxqe9.js")
+	scientific: () => import("./scientific-variant-CjErQxuZ.js"),
+	pos: () => import("./pos-variant-CctfqieO.js"),
+	programmer: () => import("./programmer-variant-Dd0YOixn.js"),
+	financial: () => import("./financial-variant-igpGRbGw.js"),
+	conversion: () => import("./conversion-variant-wZd-G6xR.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();
 };

package/dist/calculator-field.js

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./button-3op3rtZh.js";
-import { t as n } from "./use-material-translation-CD6QoVal.js";
-import { t as r } from "./icon-button-Cogxy1cy.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CV09H7Nb.js";
-import { r as l, t as u } from "./currency-field-DWHB5oms.js";
+import { t } from "./button-CSKUtMI3.js";
+import { t as n } from "./use-material-translation-DYrfV_JJ.js";
+import { t as r } from "./icon-button-4PKlaI1g.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CiTycWgV.js";
+import { r as l, t as u } from "./currency-field-DizBTAat.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-KqIMBXSh.js";
+import { t as p } from "./calculator-Cv00UQgR.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/{calculator-segment-BlJE1LaS.js → calculator-segment-CwnC2cV_.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CD6QoVal.js";
+import { t as e } from "./use-material-translation-DYrfV_JJ.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/calculator/partials/calculator-segment.tsx
 function n({ label: n, choices: r, value: i, nameKey: a, onChange: o }) {

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-KqIMBXSh.js";
+import { n as e, t } from "./calculator-Cv00UQgR.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

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 "./button-3op3rtZh.js";
-import { t as i } from "./use-material-translation-CD6QoVal.js";
+import { t as r } from "./button-CSKUtMI3.js";
+import { t as i } from "./use-material-translation-DYrfV_JJ.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-MuKDwtkG.js";
+import { t as d } from "./chip-BGn0V6Pt.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-MuKDwtkG.js → chip-BGn0V6Pt.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-C1QIewWv.js";
-import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-CD6QoVal.js";
+import { n as t } from "./spinner-DH1mm8hH.js";
+import { s as n } from "./use-click-lock-Bwg_caHO.js";
+import { t as r } from "./use-material-translation-DYrfV_JJ.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-Bp2RrdNx.js → code-editor-B25-mWhb.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./dist-DWZXlCZR.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-xlZ6NYUA.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-C6rcYGB9.js";
 import { a as c, i as l, n as u } from "./field-blur-context-BLGgf_3z.js";
-import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-D310xDuM.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BoEY5bkt.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-CD6QoVal.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-B7WR5ua_.js";
+import { t as _ } from "./use-material-translation-DYrfV_JJ.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-oRjtO3qV.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-DpaP0lm1.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,13 +1,13 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DWZXlCZR.js";
-import { o as n, r, s as i, t as a } from "./toolbar-items-D310xDuM.js";
-import { t as o } from "./use-material-translation-CD6QoVal.js";
-import { i as s, n as c, o as l } from "./code-language-items-B7WR5ua_.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-BoEY5bkt.js";
+import { t as o } from "./use-material-translation-DYrfV_JJ.js";
+import { i as s, n as c, o as l } from "./code-language-items-oRjtO3qV.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { t as f } from "./use-mobile-BDro060N.js";
 import { t as p } from "./react-node-text-Crkpfpco.js";
-import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-Bp2RrdNx.js";
+import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-B25-mWhb.js";
 import { r as D, t as O } from "./field-blur-DkiZOVNV.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";

package/dist/{code-language-items-B7WR5ua_.js → code-language-items-oRjtO3qV.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-xlZ6NYUA.js";
-import { t as n } from "./use-material-translation-CD6QoVal.js";
+import { d as e, f as t } from "./dropdown-menu-C6rcYGB9.js";
+import { t as n } from "./use-material-translation-DYrfV_JJ.js";
 import { t as r } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as i } from "./live-status-BGPaN8r8.js";
 import { useEffect as a, useRef as o, useState as s } from "react";

package/dist/components/base-content.css

@@ -162,6 +162,17 @@
 		[data-slot="form-actions"] {
 			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/80 border-t-8 border-transparent px-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
 		}
+		/* `data-padding="none"`: the form sits flush in a container that
+		   already pads it (a page, a card, a sheet): no inset on the fields or
+		   the actions, so both align with the container's content edge. */
+		&[data-padding="none"] {
+			[data-slot="form-fields"] {
+				@apply p-0;
+			}
+			[data-slot="form-actions"] {
+				@apply px-0;
+			}
+		}
 	}
 
 	/* No height cap and no scroll of its own: the page (or the overlay) is

package/dist/components/components.css

@@ -54,6 +54,7 @@
 @import "./ui/actions/button-group/button-group-standard.css";
 /* ActivityLayout: the route transition (cross-fade, none under reduced motion). */
 @import "./ui/layout/app-shell/route-transition.css";
+@import "./ui/layout/app-shell/app-header.css";
 @import "./ui/layout/app-shell/activity-backdrop.css";
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
 @import "./ui/layout/auth-card/auth-card-backdrop.css";
@@ -97,6 +98,7 @@
 @import "./ui/actions/toolbar/toolbar-morph-slots.css";
 @import "./ui/actions/toolbar/toolbar-morph-widen.css";
 @import "./ui/actions/toolbar/toolbar-expressive-look.css";
+@import "./ui/layout/navigation-toolbar/navigation-toolbar.css";
 @import "./ui/actions/toolbar/toolbar-density.css";
 @import "./editor-toolbar-expressive.css";
 @import "./editor-floating-bar.css";
@@ -142,6 +144,8 @@
 @import "./ui/display/seat-ring/seat-ring-ring.css";
 /* VoteTally: ranked bars with counts, shares and voters. */
 @import "./ui/display/vote-tally/vote-tally.css";
+/* TubeCap: a specimen tube chip, cap colours fixed by the tube convention. */
+@import "./ui/display/tube-cap/tube-cap.css";
 /* SecretCard: a face that is not rendered until it is revealed. */
 @import "./ui/display/secret-card/secret-card.css";
 /* Alert and Banner span the row in the form grids (#1497). */
@@ -206,6 +210,7 @@
 @import "./ui/fields/attributes/attributes.css";
 /* Background: the gradient preset's CSS, shared (lib/backgrounds/css); the other presets are opt-in: backgrounds.css. */
 @import "./background-shared.css";
+@import "./ui/layout/app-search/app-search.css"; /* AppSearchBar, SearchView */
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
 @import "./ui/widgets/drawing/drawing-animate.css";
 @import "./ui/widgets/barcode/barcode.css"; /* @nxgt/material/barcode: symbol colours, label sheet */