@nxgt/material 3.79.1 → 3.80.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @nxgt/material
 
+## 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 |
@@ -733,15 +762,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 +786,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
 

package/dist/{alert-dialog-653apk3f.js → alert-dialog-DgHtXZuB.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-BS1JLcnq.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-YBQsGtQT.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-DTlOlIoq.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-_vm-xSBU.js}

@@ -1,6 +1,6 @@
 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-RITOxvpH.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 { t as f } from "./is-production-GLw59WU8.js";

package/dist/{calculator-KqIMBXSh.js → calculator-CTd_S23A.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-DSo4eCUn.js";
+import { t as a } from "./button-_vm-xSBU.js";
+import { t as o } from "./use-material-translation-BJucC_xe.js";
+import { t as s } from "./icon-button-BamxMwZs.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-CXnEdjdy.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-B9ScTgfx.js"),
+	pos: () => import("./pos-variant-DMwn_7is.js"),
+	programmer: () => import("./programmer-variant-Bo4eiDFi.js"),
+	financial: () => import("./financial-variant-BdyfYhnp.js"),
+	conversion: () => import("./conversion-variant-CqrPwPjC.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-_vm-xSBU.js";
+import { t as n } from "./use-material-translation-BJucC_xe.js";
+import { t as r } from "./icon-button-BamxMwZs.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-BUCFMoAZ.js";
+import { r as l, t as u } from "./currency-field-CMFvctye.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-CTd_S23A.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-OI1BT3bA.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CD6QoVal.js";
+import { t as e } from "./use-material-translation-BJucC_xe.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-CTd_S23A.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-_vm-xSBU.js";
+import { t as i } from "./use-material-translation-BJucC_xe.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-DumcVzUO.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-DumcVzUO.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-C1QIewWv.js";
+import { n as t } from "./spinner-RITOxvpH.js";
 import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-CD6QoVal.js";
+import { t as r } from "./use-material-translation-BJucC_xe.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-CiwgfSOK.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-CPOgcajv.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-Bt5RK-Nx.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-BJucC_xe.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-Dip0xnmc.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-Bt5RK-Nx.js";
+import { t as o } from "./use-material-translation-BJucC_xe.js";
+import { i as s, n as c, o as l } from "./code-language-items-Dip0xnmc.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-CiwgfSOK.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-Dip0xnmc.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-CPOgcajv.js";
+import { t as n } from "./use-material-translation-BJucC_xe.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/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";
@@ -206,6 +208,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 */

package/dist/components/ui/actions/fab/fab-dock.css

@@ -1,6 +1,9 @@
 /* FabDock: the bottom-end corner, 16px in (24px from 840px wide, M3's
- * medium window), above the home indicator and above a docked bar that
- * sets --nxgt-media-dock. `contained` places it in its positioned parent.
+ * medium window), above the home indicator, above a docked bar that sets
+ * --nxgt-media-dock and above a bottom navigation bar (--nxgt-nav-bar);
+ * --nxgt-bottom-chrome is the two together. The bar's room holds the
+ * safe area, so the dock clears the taller of the two, not their sum. `contained` places it in its
+ * positioned parent.
  * While a FabMenu in it is open, a light scrim covers the page (contained:
  * the pane) behind the pills. The menu is modal, so the whole page is inert
  * either way. */
@@ -11,8 +14,13 @@
 		inset-inline-end: var(--fab-dock-gap);
 		inset-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 		z-index: 40;
 		display: flex;
@@ -33,8 +41,13 @@
 		padding: var(--fab-dock-gap);
 		padding-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 	}
 	@media (min-width: 840px) {

package/dist/components/ui/layout/app-search/app-search.css

@@ -0,0 +1,62 @@
+/* The app bar's search (app-search-bar.tsx, search-view.tsx). One source for
+ * the sizes: --nxgt-search-h is the pill's height, 2.75rem in the bar and
+ * 3rem (a 48px target) in the phone's full-screen view; the back arrow, the
+ * phone's button and the field read it. The pill is a filled, fully rounded
+ * field box: no border at rest, the field box's focus ring when focused.
+ * Classes in the `components` layer: a utility passed as `className` wins. */
+@layer components {
+	.nxgt-search-bar {
+		--nxgt-search-h: 2.75rem;
+	}
+	.nxgt-search-button {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-view {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-pill {
+		--nxgt-field-radius: calc(var(--nxgt-search-h) / 2);
+	}
+	.nxgt-search-pill [data-slot="input-group"] {
+		height: var(--nxgt-search-h);
+		border-color: transparent;
+		background-color: var(--muted);
+	}
+	.nxgt-search-pill [data-slot="input-group"]:focus-within {
+		background-color: var(--background);
+	}
+	/* The bar's pill: grows to a comfortable width and gives way to the title. */
+	.nxgt-search-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 0 1 28rem;
+		min-width: 0;
+	}
+	.nxgt-search-form {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.nxgt-search-button {
+		flex: none;
+	}
+	.nxgt-search-view-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		padding-top: max(0.5rem, env(safe-area-inset-top));
+		padding-left: max(0.5rem, env(safe-area-inset-left));
+		padding-right: max(0.5rem, env(safe-area-inset-right));
+	}
+	.nxgt-search-view-back {
+		flex: none;
+	}
+	.nxgt-search-view-results {
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.5rem 1rem;
+		padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+	}
+}

package/dist/components/ui/layout/app-shell/activity-backdrop.css

@@ -82,8 +82,16 @@
 		--nxgt-backdrop-height: calc(
 			100dvh -
 			var(--nxgt-backdrop-top) -
-			max(0.5rem, env(safe-area-inset-bottom)) -
-			var(--nxgt-media-dock, 0px)
+			max(
+				max(0.5rem, env(safe-area-inset-bottom)),
+				calc(
+					0.5rem +
+					var(
+						--nxgt-bottom-chrome,
+						calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+					)
+				)
+			)
 		);
 		position: sticky;
 		top: var(--nxgt-backdrop-top);