@nxgt/material 3.14.0 → 3.16.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-D_Gz7wgr.js";
+import { t as e } from "./public-Bj3rGSfS.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/{public-D_Gz7wgr.js → public-Bj3rGSfS.js}

@@ -6,7 +6,7 @@ import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.
 import { a as u, o as d } from "./tooltip-CkttDIab.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-rOMjlKJ7.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-YHZJjDrI.js";
 import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-BEyP-A0J.js";
 import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-CVQBYp4K.js";
 import { t as N } from "./use-material-translation-DGeVp-qP.js";

package/dist/{use-chat-composer-P4GxmCHa.js → use-chat-composer-CoXmJCkr.js}

@@ -7,7 +7,7 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-rOMjlKJ7.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-YHZJjDrI.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
 import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-BEyP-A0J.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
@@ -36,7 +36,7 @@ import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
 import { n as cn, r as ln, t as un } from "./chip-BZu-bvAJ.js";
-import { n as dn, t as fn } from "./icon-badge-_tY1MwU9.js";
+import { n as dn, t as fn } from "./icon-badge-C0TGvF9o.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as mn } from "./empty-state-ZtqqpX0S.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
@@ -1324,7 +1324,7 @@ function xu({ className: e, ...t }) {
 function Su({ className: e, ...t }) {
 	return /* @__PURE__ */ G("kbd", {
 		"data-slot": "kbd",
-		className: n("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground", e),
+		className: n("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground", "in-[[data-slot=button][data-variant=filled]]:border-current/40 in-[[data-slot=button][data-variant=filled]]:bg-current/15 in-[[data-slot=button][data-variant=filled]]:text-inherit", e),
 		...t
 	});
 }
@@ -7969,7 +7969,7 @@ function Hy({ slot: e, values: t, getOptionValue: r = (e) => e.value, getOptionL
 		ref: o,
 		"data-slot": e ?? "autocomplete-field",
 		"data-mode": a.mode,
-		className: n("grid w-full gap-1.5", a.className),
+		className: n("grid w-full content-start gap-1.5", a.className),
 		children: [
 			/* @__PURE__ */ G(dt, {
 				id: c,
@@ -8432,7 +8432,7 @@ function ub({ group: e, name: t, slot: r, className: i, contentClassName: a, inl
 	return /* @__PURE__ */ K("div", {
 		"data-slot": r,
 		"data-pw": t ?? r,
-		className: n("grid gap-1 w-full", i),
+		className: n("grid content-start gap-1 w-full", i),
 		...l,
 		...d,
 		ref: u,
@@ -9542,7 +9542,7 @@ function kx({ error: e, helperText: t, label: r, className: i, placeholder: a, m
 	return /* @__PURE__ */ K("div", {
 		ref: m,
 		"data-slot": "textarea-field",
-		className: n("grid w-full gap-1.5", i),
+		className: n("grid w-full content-start gap-1.5", i),
 		children: [
 			r && /* @__PURE__ */ G(dt, {
 				withAsterisk: p.required,
@@ -12073,7 +12073,7 @@ function GC({ id: e, value: t, defaultValue: r = "", onChange: i, onValueChange:
 	return /* @__PURE__ */ K("div", {
 		"data-slot": "search-field",
 		"data-pw": m ?? "search-field",
-		className: n("grid w-full gap-1.5", h),
+		className: n("grid w-full content-start gap-1.5", h),
 		children: [
 			l && /* @__PURE__ */ G(dt, {
 				htmlFor: ee,

package/docs/components/data-display.md

@@ -368,7 +368,7 @@ reads as a status (a stronger container of the tone, the label in the tone's
 text colour, 4.5:1 or more on the page and in a card; the `outlined` hairline
 and the `tag` dot still read `--chip-tone`, not the tone channel); `tag`
 a smaller tag led by a colour dot; `dashed` a muted "add" pill. 28px tall,
-24px with `size="sm"`. Selected (`active`, or `aria-pressed` on a toggle
+24px with `size="sm"`, 44px with `size="lg"`. Selected (`active`, or `aria-pressed` on a toggle
 chip) takes a primary tint and a primary edge, and a pressed toggle with
 nothing leading draws a check. The label is truncated as one piece; the ✕
 and `trailing` stay whole.
@@ -397,7 +397,7 @@ import { Avatar, Chip } from '@nxgt/material/components';
 | `variant` | `'outlined' \| 'tonal' \| 'filled' \| 'tag' \| 'dashed'` | `'outlined'` | the look: hairline, soft (`tonal` and `filled`), tag, or a muted dashed "add" pill that turns solid once `active` or pressed. `ghost` (soft) and `link` (hairline) are still accepted, deprecated |
 | `active` | `boolean` | — | selected: primary tint and edge |
 | `aria-pressed` | `boolean` | — | a toggle chip: selected while pressed, with a check when nothing leads |
-| `size` | `'default' \| 'sm'` | `'default'` | 28px or 24px; every target stays at least 24px |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | 28px, 24px, or `lg`, a 44px box at every pointer (the touch target); every target stays at least 24px |
 | `color` | `'default' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'` | neutral | tone: the edge (outlined), the fill and label (tonal, `filled`: a status look) or the dot and tint (tag). A `tag` without `color` (or with `default`) draws no dot |
 | `onDismiss` | `() => void` | — | adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text `label` shows, a node's included; "Remove" when it shows none; the ✕ is drawn 18px (16px small) with a 24px target |
 | `dismissLabel` | `string \| ((label: string) => string)` | — | names the ✕ instead of "Remove {label}": a string as is, or a function of the text the chip shows |

package/docs/components/feedback-and-status.md

@@ -222,8 +222,12 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `onConfirm` | `() => void \| Promise<void>` | required | awaited with the dialog open and both buttons disabled; closes on success; on a throw or rejection the dialog stays open and shows the error's message, or the translated `material.confirm-dialog.failed` ("The action failed.") when it has none |
 | `variant` | `'default' \| 'destructive'` | `'default'` | `destructive` paints the confirm button `error` |
 | `loading` | `boolean` | `false` | disables both buttons and shows the translated `material.confirm-dialog.processing` label, as a pending `onConfirm` does |
+| `confirmDisabled` | `boolean` | `false` | disables the confirm button, for example while an error of yours stands |
+| `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
 
+On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
+
 `ConfirmDialog` opens with its Cancel focused, so Enter cancels. On closing
 it hands the focus back to what opened it, or to the menu's trigger when
 that was a `DropdownMenuItem` (gone by then); `Dialog`, `Sheet` and

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

@@ -81,6 +81,9 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `menuOpen` / `onMenuOpenChange` | `boolean` / `(open: boolean) => void` | — | control the phone's menu sheet; it still closes by itself when a link in it is followed or the location changes (see the [app shell guide](../guides/app-shell.md#activitylayout)) |
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | `ActivityContent`: the title's heading level |
 | `inset` | `boolean` | `false` | `ActivityContent`: pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
+| `width` | `'full' \| 'form' \| 'reading'` | `'full'` | `ActivityContent`: caps the main column at 48rem (`'form'`) or 72ch (`'reading'`), the side panel right beside it |
+| `aside`, `asideLabel` / `asideLabelledBy` | `ReactNode`, `string` | — | `ActivityContent`: a side panel, a named `complementary` landmark, beside the content from 1280px (CSS only), stacked below; sticky under the app bar |
+| `asideSide` / `asideWidth` / `asideFrom` / `asideSticky` / `asideStack` | `'start' \| 'end'` / `'sm' \| 'md' \| 'lg' \| string` / `'lg' \| 'xl' \| '2xl'` / `boolean` / `'before' \| 'after'` | `'end'` / `'md'` / `'xl'` / `true` / `'after'` | `ActivityContent`: the panel's side, width (16, 20, 24rem), breakpoint, stickiness and stacking order (see the [app shell guide](../guides/app-shell.md#a-side-panel-and-a-readable-width)) |
 | `align` | `'start' \| 'center'` | `'start'` | `ActivityLayout`, `AppSidebar`: the collapsed rail's entries sit right under the brand, or `'center'` for centred in the height below it |
 | `backdrop` | `ReactNode \| false` | — | `ActivityLayout`: an exception to the theme's background (drawn by default; Lavande's is the built-in gradient and blobs); `false` draws a plain page. A node is a decorative background behind the frame: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer as wide as the content column and one viewport high, fixed in the viewport while the content scrolls; the chrome (app bar, breadcrumb, tabs strip) is lightly translucent and frosted over it (80%, 87% for the sidebar, breadcrumb and tabs strip, 92% and no blur under `prefers-reduced-transparency` or without `backdrop-filter`), and the lists, tables and cards stay opaque; `--nxgt-backdrop-chrome` sets the chrome's fill and `--nxgt-backdrop-surface` the lists'. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
 | `routeTransition` | `boolean \| Omit<ViewTransitionProps, 'children' \| 'ref'>` | `true` | `ActivityLayout`: React's `<ViewTransition>` around the content region, so a navigation cross-fades it. `false` renders none (your app has its own boundary); an object passes `default` / `update` classes, `name`, callbacks through. See [Route transitions](../guides/app-shell.md#route-transitions) |

package/docs/components/overlays-and-menus.md

@@ -131,7 +131,7 @@ export function Terms() {
 | `asChild` (`DialogTrigger`) | `boolean` | **`true`** | the trigger is its child — pass one element, usually a `Button` |
 | `variant`, `color` (`DialogClose`) | as `IconButton` | `'ghost'` | a top-right X button, named "Close" (`material.buttons.close`, translated) while it shows only the icon; text children or an `aria-label` name it instead, and icon-only children leave it unnamed; children replace the X |
 | `size` (`DialogContent`) | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | its width from 640 px up: 384, 512, 672, 896 px, or the screen less 2rem a side |
-| `mobilePresentation` (`DialogContent`) | `'dialog' \| 'bottom-sheet' \| 'fullscreen'` | `'dialog'` | below 640 px: a centred dialog, a sheet that springs up from the bottom edge (rounded top corners), or the whole screen |
+| `mobilePresentation` (`DialogContent`) | `'dialog' \| 'bottom-sheet' \| 'top' \| 'fullscreen'` | `'dialog'` | below 640 px: a centred dialog, a sheet that springs up from the bottom edge (rounded top corners), a dialog pinned under the top edge, or the whole screen |
 | `scrim` (`DialogContent`, `SheetContent`, `DrawerContent`) | `'dim' \| 'blur'` | `'dim'` | the scrim behind; `blur` also blurs the page a little |
 
 The look lives in the stylesheet (`nxgt-dialog`, `nxgt-scrim`), under the
@@ -678,6 +678,7 @@ children and they replace that, as before.
 | `alwaysRender` (`CommandSeparator`) | `boolean` | `false` | the separator is purely visual (`role="presentation"`, hidden from assistive technology) and hidden while the user searches; `true` keeps it visible then |
 | `shouldFilter` (`Command`) | `boolean` | `true` | `false` when you filter the items yourself (server search) |
 | `title` / `description` (`CommandDialog`) | `string` | `"Command Palette"` / `"Search for a command to run..."` (translated) | the dialog's title and description, inside the dialog and visually hidden |
+| `mobilePresentation` (`CommandDialog`) | `'dialog' \| 'top' \| 'fullscreen'` | `'top'` | below 640 px: pinned under the top edge (so the input and the results stay above the on-screen keyboard), the whole screen, or the centred modal it was before |
 | `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | `CommandDialog` takes every `Dialog` prop |
 
 `CommandDialog` does not bind a keyboard shortcut; listen for ⌘K yourself and

package/docs/components/primitives.md

@@ -526,6 +526,8 @@ import { Kbd, KbdShortcut } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `keys` (`KbdShortcut`) | `string[]` | — (required) | one `Kbd` per key; `mod`, `shift` and `alt` become `⌘ ⇧ ⌥` on Apple platforms, `Ctrl Shift Alt` elsewhere |
 
+Inside a filled `Button` the key, its border and the `+` between keys take the button's own text colour, so the shortcut keeps the contrast of the fill.
+
 `Kbd` takes the props of `<kbd>`. `shortcutGlyph(key)` gives one glyph on its own.
 
 **Storybook:** `Primitives/Kbd` · **Vue:** `Kbd`, `KbdShortcut`

package/docs/components/selection-and-choice.md

@@ -328,6 +328,8 @@ when nothing matches. Options with a `group` are listed under its header
 with their count, filtered within it (a group with no match goes); a
 `description` is a muted line under the label, in the list only.
 
+Once an option is picked, a round "Clear" button (`material.combobox.clear`, "Effacer" in French) appears at the end of the box, also in `ComboboxFormField`. It is a real button, named and exposed to assistive technology (`getByRole('button', { name: 'Clear' })`), described by the field's label, and kept out of the tab order like the other clearable fields: the keyboard clears with Backspace or by selecting the text and deleting it.
+
 ```tsx
 import { ComboboxField } from '@nxgt/material/components';
 import { useState } from 'react';
@@ -785,7 +787,7 @@ export function Topics() {
 | `deselectable` | `boolean` | `false` | `single` only: pressing the chosen chip clears it |
 | `max` / `min` | `number` | — | `multiple` only: `max` blocks the other chips once reached and speaks "{count} of {max} chosen"; `min` is a hint only |
 | `options` | `{ value; label; icon?; count?; description?; disabled?; disabledReason? }[]` | — | the chips; `count`: see [option counts](#option-counts) |
-| `size` | `'default' \| 'sm'` | `'default'` | the chip's size (28px or 24px) |
+| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | the chip's size: 28px, 24px, or `lg`, a 44px box at every pointer (a coarse pointer already gets a 44px box at any size) |
 | `name` | `string` | — | put on every chip (`ChipGroupFormField` passes its field `name`), so `document.getElementsByName(name)` finds the group's chips in order |
 | `label`, `helperText`, `error`, `required`, `disabled`, `id` | | — | the question and its help or error text, the required mark, disabling every chip, the group's `id` |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | wrapping row or a column (each chip as wide as its label); in single mode it sets the `radiogroup`'s `aria-orientation` (ARIA allows none on a `group`), and every arrow key moves in both axes either way (the chips wrap) |

package/docs/guides/app-shell.md

@@ -799,6 +799,15 @@ export function BoardShell({ items }: { items: MenuItem[] }) {
 | `hideHeader` | `boolean` | `false` | No header card |
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | The title's element: the screen's heading, `'h2'` under a heading of yours, `'div'` for none |
 | `inset` | `boolean` | `false` | Pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
+| `width` | `'full'` \| `'form'` \| `'reading'` | `'full'` | Caps the main column: `'form'` 48rem, `'reading'` 72ch. The header card keeps the full width |
+| `aside` | `ReactNode` | — | A side panel: beside the content from `asideFrom`, stacked below it |
+| `asideLabel` / `asideLabelledBy` | `string` | — | The panel's accessible name (`aria-label`), or the id of a heading inside it (`aria-labelledby`). One of them is needed |
+| `asideSide` | `'start'` \| `'end'` | `'end'` | Which side of the content the panel sits on, wide |
+| `asideWidth` | `'sm'` \| `'md'` \| `'lg'` \| a CSS length | `'md'` | 16, 20 or 24rem; `'md'` reads the `--nxgt-aside-width` token (20rem) |
+| `asideFrom` | `'lg'` \| `'xl'` \| `'2xl'` | `'xl'` | The viewport width (1024, 1280 or 1536px) from which the panel is beside the content |
+| `asideSticky` | `boolean` | `true` | Keeps the panel under the app bar while the page scrolls; it scrolls inside itself when taller than the window |
+| `asideStack` | `'before'` \| `'after'` | `'after'` | Where the panel goes below `asideFrom`, in the DOM and on screen |
+| `asideClassName` | `string` | — | Classes for the panel |
 
 ```tsx
 import { ActivityContent, Button } from '@nxgt/material/components';
@@ -819,6 +828,49 @@ export function InvoicesPage() {
 The header card wraps: on a narrow screen the actions go under the title
 instead of squeezing it, and a long title wraps rather than scrolling.
 
+### A side panel and a readable width
+
+A record's alerts and key facts, a dashboard's counts, a form's help: pass them
+as `aside`. From `asideFrom` (`'xl'`, a 1280px window) the panel sits beside the
+main column and sticks under the app bar; below it, the panel stacks after the
+content (`asideStack="before"` puts it first). The switch is CSS only: the
+server's HTML and a phone's first paint are already right, and no JavaScript
+decides the layout.
+
+```tsx
+<ActivityContent
+  title="New visit"
+  width="form"
+  aside={<DuplicateHints />}
+  asideLabel="Possible duplicates"
+>
+  <VisitForm />
+</ActivityContent>
+```
+
+- **Landmark.** The panel is an `<aside>`, a `complementary` landmark: name it
+  with `asideLabel`, or with `asideLabelledBy` (the id of its heading). Its
+  content is the panel's own; give it one `h2` when it has a heading.
+- **Sticky, in every scroll mode.** With `scroll="document"` the panel sticks
+  under the app bar (the bar's gutter, its `--nxgt-header-height` and 0.5rem);
+  with `scroll="container"` it sticks to the top of the content region. It is as
+  tall as the window at most and scrolls inside itself, and becomes focusable
+  (`tabindex="0"`) only while it does, so a keyboard reaches what overflows. A
+  `scroll="document"` page needs no `overflow` on any ancestor of the screen
+  (see [the troubleshooting entry](../troubleshooting.md#the-side-panel-does-not-stick)).
+- **A capped column sits beside its panel.** `width="form"` or `"reading"` caps
+  the main column and the pair stays start-aligned: at 1920px the panel is 1rem
+  from the fields, not at the window's far edge. The header card above keeps
+  the full width. `width` also works without a panel.
+- **The breakpoint is the window's.** `asideFrom` follows the viewport, not the
+  content column, which the sidebar and the gutters narrow a little: pick `'lg'`
+  for a panel on a smaller window, `'2xl'` to keep it stacked on all but the
+  widest.
+- **A size container.** With a panel, the main column is an `@container`, so a
+  `ResponsiveGrid` inside it follows the column's width.
+- **Width token.** `--nxgt-aside-width` changes `asideWidth="md"` (20rem) app-wide;
+  any CSS length goes in `asideWidth` for one screen.
+
 ## Breadcrumbs
 
 `AppBreadcrumb` (rendered by `ActivityLayout`) starts with a home icon linking

package/docs/guides/theming.md

@@ -625,6 +625,7 @@ centre line from `md` (48rem) up:
 | Token | Default | Reads |
 | --- | --- | --- |
 | `--nxgt-header-height` | `4rem` | the app bar (all widths) and the rail's header (`md` and up) |
+| `--nxgt-aside-width` | `20rem` | an `ActivityContent` side panel with `asideWidth="md"` (the default) |
 
 ```css
 :root {

package/docs/troubleshooting.md

@@ -1338,6 +1338,30 @@ top (`align="start"`).
 <ActivityLayout items={items} align="center">…</ActivityLayout>
 ```
 
+### The side panel does not stick
+
+**When:** an `ActivityContent` `aside` scrolls away with the page instead of
+staying under the app bar, or it is not beside the content at 1280px.
+**Why:** `position: sticky` sticks inside its nearest scrolling ancestor, and
+any ancestor with an `overflow` other than `visible` (`overflow-hidden`,
+`overflow-auto`, `overflow-clip`; a `PaneLayout`'s root has `overflow-hidden`)
+becomes that scroller, which does not scroll, so the panel never moves. A
+wrapper of yours around the screen, or an `ActivityLayout` with
+`scroll="container"` where you meant `"document"`, does the same. Below
+`asideFrom` (1280px by default) the panel is stacked and not sticky on
+purpose, and the breakpoint is the window's width, not the column's.
+**Fix:** take the `overflow` off every ancestor between `ActivityLayout` and
+`ActivityContent`, or move it onto an element inside the screen; use
+`scroll="document"` (the default). Find the culprit in the console:
+
+```js
+for (let el = document.querySelector('[data-slot="activity-content-aside"]').parentElement; el; el = el.parentElement)
+  if (getComputedStyle(el).overflowY !== 'visible') console.log(el);
+```
+
+With `scroll="container"` the region itself is the scroller, and the panel
+sticks to its top: that is expected.
+
 ### axe reports `target-size` on a control under a form's sticky actions
 
 **When:** since the form's actions stick to the bottom (see above), axe's
@@ -1975,6 +1999,26 @@ a few frames after the alert has gone) and look it up by selector rather
 than by role: the closing alert still hides the page from the accessibility
 tree.
 
+### A `ConfirmDialog` keeps offering a refused action
+
+When `onConfirm` throws, the dialog shows the error and the confirm button
+stays active, so the user can retry. If a retry cannot succeed (the item is
+still referenced), lock it:
+
+```tsx
+<ConfirmDialog variant="destructive" lockOnRefusal onConfirm={remove} … />
+```
+
+Cancel stays enabled. `confirmDisabled` is the switch for your own condition.
+
+### Fields in a two-column row sit at different heights
+
+A field is a grid of a label and a control. In earlier versions its rows stretched when a
+neighbour in the same row was taller (a helper or error text under it), so the
+shorter field's control sank by half the difference. Fields now keep their rows
+at the top (`content-start`); upgrade, and drop any `mt-*` or `items-end`
+workaround. A `DateField`'s tonal fill is deliberate and not a misalignment.
+
 ## Navigation
 
 ### A `ListTile` link shows two chevrons

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.14.0",
+	"version": "3.16.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"