@nxgt/material 3.14.0 → 3.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#1543](https://github.com/softistx/nxgt-material/pull/1543) [`b7025f2`](https://github.com/softistx/nxgt-material/commit/b7025f2433e34bf21211c7d902605593b868172e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Five consumer-reported UX gaps. `ChipGroupField` and `Chip` take `size="lg"`, a 44px box at every pointer ([#1529](https://github.com/softistx/nxgt-material/issues/1529)). A `Kbd` and the `+` of a `KbdShortcut` inside a filled `Button` take the button's text colour, so the shortcut keeps its contrast ([#1530](https://github.com/softistx/nxgt-material/issues/1530)). `ConfirmDialog` takes `confirmDisabled` and `lockOnRefusal` (off by default: the confirm button stays disabled while a refusal's error shows), and a destructive one puts Cancel first on a phone ([#1531](https://github.com/softistx/nxgt-material/issues/1531)). Every field's label and control rows stay at the top, so a `ComboboxField` or `PhoneField` no longer sinks beside a `TextField` or `DateField` with a helper text ([#1532](https://github.com/softistx/nxgt-material/issues/1532)). `CommandDialog` is pinned under the top edge below 640px by default, with `mobilePresentation` (`'dialog' | 'top' | 'fullscreen'`) to change it (`mobilePresentation="dialog"` restores the centred dialog), and `DialogContent` gets the `top` presentation ([#1533](https://github.com/softistx/nxgt-material/issues/1533)).
+
 ## 3.14.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) |

package/dist/components/ui/display/chip/chip.css

@@ -1,6 +1,6 @@
 /* Chip: what the three looks share (data-look hairline, soft, tag). Sizes:
- * default 28px, sm 24px (both at least the 24px target of WCAG 2.5.8). The
- * label truncates as one piece; the ✕ is drawn small, its target is 24×24
+ * default 28px, sm 24px (both at least the 24px target of WCAG 2.5.8), lg
+ * 44px (the touch target). The label truncates as one piece; the ✕ is drawn small, its target is 24×24
  * through ::after, and it has its own focus ring. */
 @layer components {
 	.nxgt-chip {
@@ -50,6 +50,16 @@
 		--chip-gap: 0.25rem;
 		--chip-x: 1rem;
 	}
+	/* lg: a 44px box at every pointer (the touch target, #1529). */
+	.nxgt-chip[data-size="lg"] {
+		--chip-h: 2.75rem;
+		--chip-px: 1rem;
+		--chip-font: 0.9375rem;
+		--chip-icon: 1rem;
+		--chip-gap: 0.375rem;
+		--chip-x: 1.5rem;
+		min-width: 2.75rem;
+	}
 	button.nxgt-chip,
 	.nxgt-chip > button[data-slot="chip-body"] {
 		cursor: pointer;