@nxgt/material 3.15.0 → 3.16.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nxgt/material
 
+## 3.16.0
+
+### Minor Changes
+
+- [#1566](https://github.com/softistx/nxgt-material/pull/1566) [`b52e65b`](https://github.com/softistx/nxgt-material/commit/b52e65b85f4fa00830d3689a2d468cd0df71e62c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityContent` takes a side panel and a capped main column. `aside` (with `asideLabel` or `asideLabelledBy`, `asideSide`, `asideWidth`, `asideFrom`, `asideSticky`, `asideStack`, `asideClassName`) puts a named `complementary` landmark beside the content from `xl` (1280px; `lg` and `2xl` too) and stacks it after the content, or before it, on a narrower screen. The switch is CSS only, so the server's HTML and a phone's first paint are right, and the panel sticks under the app bar in `scroll="document"` and `scroll="container"`, scrolling inside itself and focusable only while it overflows ([#1551](https://github.com/softistx/nxgt-material/issues/1551)). `width="form" | "reading"` caps the main column at 48rem or 72ch, the panel right beside it with no gutter, and `width` works without a panel ([#1552](https://github.com/softistx/nxgt-material/issues/1552)). A screen without `aside` or `width` renders the same markup as before. `--nxgt-aside-width` sets the default panel width (20rem).
+
 ## 3.15.0
 
 ### Minor Changes

package/README.md

@@ -643,7 +643,7 @@ 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. 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, 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. `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. 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. | `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) |