@nxgt/material 3.71.0 → 3.73.0

package/dist/{use-heading-spy-CJnBkCY0.js → use-heading-spy-Bzj5mIUZ.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-y2pbowVh.js";
-import { a as l } from "./button-D54Hrjo0.js";
-import { i as u } from "./translate-material-R-uLthBy.js";
-import { t as d } from "./use-material-translation-CCWUeiEn.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-A8K8zai1.js";
+import { a as l } from "./button-C8moFnIT.js";
+import { i as u } from "./translate-material-D1ndrd7a.js";
+import { t as d } from "./use-material-translation-C6H0B4kE.js";
 import { _ as f, g as p, h as m, n as h, v as g, y as _ } from "./number.utils-BG_eEt5g.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";

package/dist/{use-material-translation-CCWUeiEn.js → use-material-translation-C6H0B4kE.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-R-uLthBy.js";
+import { i as e, t } from "./translate-material-D1ndrd7a.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-Duk40DZI.js → use-return-focus-CkUX1HFl.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { a as n, c as r, i, l as a, o, r as s, s as c } from "./dist-lmHmz_bu.js";
-import { C as l, S as u, w as d } from "./spinner-BFZxqdWC.js";
+import { C as l, S as u, w as d } from "./spinner-C5Kb6MWu.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-Vwkyp-M5.js";
 import { r as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";

package/docs/components/form-fields.md

@@ -375,6 +375,15 @@ up / down buttons, `min` and `max` rows (Remove is disabled at `min`, Add is
 announcements. Without a form library, `ChoiceListField` takes `value` and
 `onChange`.
 
+**Focus.** `ChoiceListFormField` gives React Hook Form's `field.ref` a handle
+that focuses the first refused row's text input: the row of the first
+`choices.<i>.text` error (a resolver's), or the first blank row when the
+built-in blank rule refused the list. An error on the list itself (too few
+rows, no row marked) focuses its first control. So `shouldFocusError`,
+`setFocus('choices')` and `setError('choices', …, { shouldFocus: true })` land
+on the refused row when there is an error, and on the first control otherwise;
+the form needs no `[aria-invalid="true"]` lookup.
+
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `control`, `name` | `Control<T>`, `Path<T>` | — | the form and its array (`ChoiceListFormField`) |
@@ -1700,6 +1709,37 @@ import { AttributesFormField } from '@nxgt/material/components';
 <AttributesFormField control={control} name="attributes" label="Attributes" />
 ```
 
+**`AttributeValuesFormFieldSet`** renders one input per attribute and writes
+`{ [attribute.name]: value }` to the form at `name`:
+
+```tsx
+import { AttributeValuesFormFieldSet, FormSection } from '@nxgt/material/components';
+
+const form = useForm({ defaultValues: { attributes: { color: '#2563eb', size: 'M' } } });
+
+<FormSection title="Attributes">
+  <AttributeValuesFormFieldSet
+    control={form.control}
+    name="attributes"
+    label="Attributes"
+    hideLabel
+    attributes={[
+      { name: 'color', label: 'Colour', type: 'COLOR' },
+      { name: 'size', label: 'Size', type: 'SELECT', options: ['S', 'M', 'L'] },
+    ]}
+  />
+</FormSection>
+```
+
+| Prop | |
+| --- | --- |
+| `attributes` | the attributes to fill, one input each |
+| `control`, `name` | the form and the path of the object it writes |
+| `label` | the fieldset's accessible name (required) |
+| `hideLabel` | default `false`. `true` keeps `label` as the name but draws nothing, for a `FormSection` that already has the title |
+| `defaultValues` | optional fallback, used only while the form value at `name` is empty: `undefined`, `null` or an object with no keys (`{}`). Any other value in the form wins |
+| `className` | on the `<fieldset>` |
+
 **The inline editor** is one row per attribute: a grip, the type's icon, the
 label with `name · Type` under it, the unit as a badge and the default value
 (a Yes or No, a colour swatch, a number with its unit). A row opens to its
@@ -1811,7 +1851,10 @@ const schema = z.object({ attributes: attributesListSchema() });
 
 **Emits:** `Attribute[]`; the inline editor writes a date as `yyyy-MM-dd`, a
 date-time as an ISO instant and a time as `HH:mm`. `AttributeValuesFormFieldSet`
-writes an object keyed by attribute `name`; `AttributeValuesForm` reads a bare
+writes an object keyed by attribute `name`, reads the form's value at `name`
+(`defaultValues` is only the fallback while it holds nothing), fills the row
+width, and takes `hideLabel` to keep `label` as the fieldset's accessible name
+without drawing the heading; `AttributeValuesForm` reads a bare
 `yyyy-MM-dd` default as that local day.
 **Form wrapper:** `AttributesFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair), [what each field emits](../guides/forms.md#what-each-field-emits)
@@ -1863,6 +1906,32 @@ The editor checks the shape of a value, not that the line exists. Below 640px
 each contact is a summary row; tapping it opens a bottom sheet with the same
 fields and actions, and closing it with an empty value drops the contact.
 
+**Limit the types, hide the star.** A backend that stores only some types, or
+no primary flag, says so on `ContactsFormField` and `ContactsEditor` (`primary` is inline only):
+
+```tsx
+<ContactsFormField
+  control={control}
+  name="contacts"
+  label="Contacts"
+  types={['EMAIL', 'PHONE', 'FAX', 'WEBSITE']}
+  primary={false}
+/>
+```
+
+`types` (an array of `ContactTypeName`, i.e. `'EMAIL' | 'PHONE' | …` or the
+`ContactType` values; every type by default) limits the "Add" chips and the
+type select; list at least one type, since an empty `types={[]}` is not
+supported. The chips keep the library's order (phone, mobile, email,
+website, fax); the select follows the order given. With `editing="dialog"`,
+`types` limits the dialog's type select (`ContactDialog` takes it too, and a
+new contact starts with the first type); `primary` has no effect there, since
+the dialog has no star. A contact
+already in the value with another type is kept and shown, and its own type
+stays in its select, so nothing is changed silently. `primary={false}` (`true`
+by default) hides the star and the primary marks; a `primary` flag already in
+the value is left untouched.
+
 `variant="cards"` is the Expressive variant: each contact is its own tinted
 card with a round tile for the primary one. The fields keep the library's
 field radius in both. `variant` is on `ContactsFormField`, `ContactsEditor`
@@ -1895,9 +1964,9 @@ only, and a value that fails its check is shown without a link.
 | `empty` | `ReactNode` | "No contacts" | shown when there is nothing to list; `null` renders nothing |
 
 `ContactsEditor` takes `value`, `onValueChange`, `label`, `headingLevel` (`3`
-by default; the type headings sit one below it), `variant` and `disabled`. A
+by default; the type headings sit one below it), `variant`, `types`, `primary` and `disabled`. A
 wrong format is said once the field was left, a duplicate at once. `ContactsFormField` takes `editing` (`'inline' \| 'dialog'`,
-default `'inline'`), `variant` (inline only) and `cancelVariant` (dialog only,
+default `'inline'`), `variant` (inline only), `types`, `primary` (inline only) and `cancelVariant` (dialog only,
 the Cancel button's `Button` variant, default `'tonal'`; `'outlined'` restores
 the earlier look). `Contacts` takes `data`, `onAdd`, `onEdit` and `disabled`.
 

package/docs/components/media-and-files.md

@@ -78,12 +78,15 @@ function Attachments() {
 | `mode` | `'single' \| 'multiple'` | — (required) | `value` is a `string` or a `string[]` |
 | `onUpload` | `(file, onProgress?, signal?) => Promise<string>` | — | `NetworkUploadField` only; the resolved string becomes the value. Removing an uploading row or unmounting the field aborts `signal`: pass it to your request, or the upload still completes (its value is dropped). An abort after the request completed cannot unsend it: the value is dropped and `onRemove` is not called. The S3 fields abort their request themselves and reject with an `UploadError` of kind `aborted` (named `AbortError`, no longer a `DOMException`) |
 | `getPresignedUrl` | `(file) => Promise<PresignedUploadTarget>` | — | `S3UploadField` only; `{ uploadUrl, publicUrl, headers? }` PUTs the file and stores `publicUrl`; `{ method: 'POST', url, fields, value }` posts a form and stores `value` (see [presigned POST](#presigned-post)) |
-| `accept` | `string` | — | file input `accept`, also shown under the drop zone |
+| `accept` | `string` | — | file input `accept`; the drop zone's hint shows it as short names (`image/jpeg,image/png` reads `JPEG, PNG`, `.pdf` reads `PDF`, `image/*` reads `Images`; unknown entries stay as given) |
+| `acceptLabel` | `string` | — | replaces those names in the hint (`"Photos only"`); `""` hides the type part. |
 | `maxSize` | `number` (bytes) | — | larger files are rejected before upload |
 | `maxFiles` | `number` | — | `mode="multiple"` only; the drop zone is disabled once reached |
 | `onRemove` | `(value) => void \| Promise<void>` | — | called when a committed file is removed (delete it server-side here) |
 | `resolveUrl` | `(value) => string \| null \| undefined` | — | turns a stored key into an `<img src>` so saved images preview |
 
+The drop zone's hint wraps in a narrow dialog instead of being clipped.
+
 The field is a `group` named by its `label`. The drop zone is a `button`, which
 may not carry `aria-invalid`: with `error` it is described by `helperText`, or
 without one by a visually hidden "This value is not valid."

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

@@ -61,10 +61,27 @@ Your own `onEscapeKeyDown` on the content receives the Escape that only closes a
 >
 ```
 
+**A long dialog scrolls its body, not the whole box.** Wrap the fields in `DialogBody` (a direct child of `DialogContent`, between `DialogHeader` and `DialogFooter`): the content becomes a clipped column, the header and the footer stay in view, and only the body scrolls. A hairline shows on the edge where content is hidden beneath the header or the footer. It works the same as a bottom sheet or full screen on a phone, with the safe-area padding kept under the footer. A dialog without `DialogBody` is unchanged and scrolls as a whole. Give the body an `aria-label` (or `aria-labelledby`) to make it a named region; `className` sets its inner layout (`grid gap-3`). It sets `data-overflow-start` and `data-overflow-end` while content is hidden above or below. `DialogScrollContent`, `Sheet`, `Drawer` and `AlertDialog` do not take it yet.
+
+```tsx
+<DialogContent>
+	<DialogHeader>
+		<DialogTitle>New item</DialogTitle>
+	</DialogHeader>
+	<DialogBody aria-label="Item fields" className="grid gap-3">
+		{/* twelve fields */}
+	</DialogBody>
+	<DialogFooter>
+		<Button>Save</Button>
+	</DialogFooter>
+</DialogContent>
+```
+
 ```tsx
 import {
 	Button,
 	Dialog,
+	DialogBody,
 	DialogClose,
 	DialogContent,
 	DialogDescription,
@@ -94,7 +111,8 @@ import {
 ```
 
 Parts: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`,
-`DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`, plus
+`DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogBody` (the part
+that scrolls alone), `DialogClose`, plus
 `DialogOverlay` and `DialogPortal`, and `DialogScrollContent`: a content for
 a dialog taller than the screen, which sits in a scrolling overlay with a
 margin instead of being clipped, and renders its own close button. It takes
@@ -132,6 +150,7 @@ export function Terms() {
 | `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' \| '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 |
+| `className`, `aria-label` / `aria-labelledby`, `onScroll`, `ref` (`DialogBody`) | `ComponentProps<'div'>` | — | the scroll region: `className` lays out its content (`grid gap-3`); an `aria-label` or `aria-labelledby` makes it a `region` with that name; `onScroll` and `ref` are called after its own overflow flags update. It sets `data-overflow-start` / `data-overflow-end` while content is hidden above / below, and bleeds by `--dialog-px` (1.5rem) so a `DialogContent` with its own padding sets both: `p-4 [--dialog-px:1rem]` |
 | `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

package/docs/components/primitives.md

@@ -163,7 +163,8 @@ import {
 Parts: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,
 `CardContent`, `CardFooter` — each a styled `<div>` taking its element's props,
 except `CardTitle`, a heading: an `h3` by default, another level or a `div`
-with `as` (`<CardTitle as="h2">`), so `getByRole('heading', { name })` finds it.
+with `as` (`<CardTitle as="h2">`), so `getByRole('heading', { name })` finds it. The title takes its text size's
+line height; pass a `leading-*` class to override.
 `CardAction` sits top-right of the header.
 
 **Storybook:** `Primitives/Card` · **Vue:** `Card` (same parts)

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

@@ -436,8 +436,10 @@ disabled with the field; Backspace in the empty input removes the last one.
 Enter in a form: it acts on the list and does not submit the form while it has
 something to do (WAI-ARIA combobox practice). It picks the highlighted option;
 with `freeSolo` and no option highlighted it adds the typed text; with the list
-open it is only default-prevented. On a closed list with nothing typed it
-submits, as a plain input does.
+open it is only default-prevented. In `mode="multiple"` (a tags box, `freeSolo`
+or not) Enter never submits the form, closed list and empty input included, so
+the Enter after a pick does not save the form. In `single` mode, on a closed
+list with nothing typed it submits, as a plain input does.
 
 An avatar in the rows and the chips:
 `getOptionLeading={(person) => <Avatar src={person.photo} alt="" />}`; see

package/docs/guides/forms.md

@@ -279,10 +279,11 @@ the form, on a translucent, blurred background, so Cancel and Save stay in
 reach while the fields scroll under them; a form shorter than the screen
 shows them right under its fields.
 
-- In a `DialogContent` or a `SheetContent`, which are capped to the screen
+- In a `DialogContent` without a `DialogBody`, or a `SheetContent`, which are capped to the screen
   and scroll themselves, the actions stick to the dialog's or the sheet's
   bottom. A `DrawerContent` does not scroll: a form that is its direct child
   is the scroll box there.
+- A long form in a `Dialog` can pin its own header and `DialogFooter` instead: put the fields in a `DialogBody` and only the body scrolls (see the Dialog section of the overlays page). Do not combine it with `form-actions`: they would stick inside the body, so use a `DialogFooter` for the buttons and `form="id"` on the submit button.
 - In an `AlertDialogContent` (the rich text editor's edit dialogs use one),
   the actions stick to its bottom the same way, over its padding.
 - `ConfirmationDialog` holds a form when you pass it `formOptions` (a schema, its `defaultValues` and `renderForm`): it renders the
@@ -608,7 +609,7 @@ export function SupplierForm({ onSave }: { onSave: (values: Values) => void }) {
 
 | Wrapper | Value | Notes |
 | --- | --- | --- |
-| `ContactsFormField` | `Contact[]` | Edited in place by default (one `primary` per type); `editing="dialog"` goes through `ContactDialog`. `ContactType` is `EMAIL`, `FAX`, `MOBILE`, `PHONE`, `WEBSITE` |
+| `ContactsFormField` | `Contact[]` | Edited in place by default (one `primary` per type); `editing="dialog"` goes through `ContactDialog`. `ContactType` is `EMAIL`, `FAX`, `MOBILE`, `PHONE`, `WEBSITE`; `types={['EMAIL', 'PHONE']}` limits the offered types and `primary={false}` hides the star (inline only) |
 | `OpeningHoursFormField` | `OpeningHour[]` | Edits the week inline by default (`weekStartsOn` and `locale` apply there); `editing="dialog"` keeps the list and dialog, where `showAddAllDays` adds Monday–Friday 09:00–17:00 and a closed weekend in one click |
 | `PostalAddressFormField` | `PostalAddressFieldValue` | Deleting the address writes `{}`, not `null` |
 | `AttributesFormField` | `Attribute[]` | A typed attribute editor, in place by default (rows that open, drag and keyboard reorder that sets `priority`, unique names); `editing="dialog"` keeps the list and dialog. Its `label` prop is required |
@@ -628,7 +629,11 @@ export function SupplierForm({ onSave }: { onSave: (values: Values) => void }) {
   `form.setValue()` replace the list it shows.
 - `AttributeValuesFormFieldSet` is the other half: given `attributes`, it
   renders one input per attribute and writes `{ [attribute.name]: value }` to
-  its `name`.
+  its `name`. It reads the value the form already holds at `name` (and shows
+  a `reset()` or `setValue()`), so `defaultValues` is only the fallback while
+  the form value is empty (`undefined`, `null` or `{}`). Its fields fill the row, and `hideLabel` keeps
+  `label` as the group's accessible name without drawing it, under a
+  `FormSection` that already has the title.
 
 ### Rows a user adds and removes
 

package/docs/guides/i18n.md

@@ -324,7 +324,7 @@ breadcrumb (`material.doc.breadcrumb`); `MessageCard`'s "Unread"
 failed", its type, size and count errors (`material.upload.replace-named`,
 `remove-named`, `failed`, `invalid-type`, `too-large`, `max-files`; an error keeps the language
 it was raised in) and the drop zone's "Max {size}" and "Up to {count} files"
-(`material.upload.dropzone.max-size` / `max-files`); the editor's
+(`material.upload.dropzone.max-size` / `max-files`) and the names `accept` wildcards read as (`material.upload.accept.images`, `audio`, `video`, `text`, `application`); the editor's
 placeholder, which follows a language change without rebuilding the editor,
 and its emoji buttons (`material['rich-text-editor'].placeholder` /
 `insert-emoji`); `CircularProgress`'s "Progress: {value}%"

package/docs/troubleshooting.md

@@ -11,6 +11,7 @@ words in your error.
 - [`Cannot find package '@react-pdf/renderer'`](#cannot-find-package-react-pdfrenderer)
 - [`Cannot find package 'react-router'` after upgrading to 3.0](#cannot-find-package-react-router-after-upgrading-to-30) (and `ERESOLVE` on `react` or `react-router`; `Element type is invalid` for `ViewTransition` or `browser is not a function` from a stale Storybook or Vitest pre-bundle)
 - [`Conflicting peer dependency: @react-pdf/renderer` (`ERESOLVE`)](#conflicting-peer-dependency-react-pdfrenderer)
+- [`AttributeValuesFormFieldSet` shows empty fields, or ignores my `defaultValues`](#attributevaluesformfieldset-shows-empty-fields-or-ignores-my-defaultvalues)
 - [`Cannot find package 'leaflet'`](#cannot-find-package-leaflet)
 - [`hls.js could not be loaded. Install it (`npm i hls.js`) to play HLS streams in this browser.`](#hlsjs-could-not-be-loaded-install-it-npm-i-hlsjs-to-play-hls-streams-in-this-browser)
 - [`This browser cannot play HLS streams.`](#this-browser-cannot-play-hls-streams)
@@ -68,6 +69,8 @@ words in your error.
 - [An input now has `placeholder=" "` in the DOM](#an-input-now-has-placeholder--in-the-dom)
 - ["Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone](#select-all-runs-under-the-sort-filters-or-the-actions-in-a-cards-or-tiles-list-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
+- [A `DialogBody`'s header and footer do not stay pinned](#a-dialogbodys-header-and-footer-do-not-stay-pinned)
+- [A form's `form-actions` bar sticks inside a `DialogBody`](#a-forms-form-actions-bar-sticks-inside-a-dialogbody)
 - [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
 - [My activity content lost its side padding, or the rail's entries moved up](#my-activity-content-lost-its-side-padding-or-the-rails-entries-moved-up)
 - [axe reports `target-size` on a control under a form's sticky actions](#axe-reports-target-size-on-a-control-under-a-forms-sticky-actions)
@@ -310,6 +313,7 @@ words in your error.
 - [A click on the next field right after an `Autocomplete` pick is lost](#a-click-on-the-next-field-right-after-an-autocomplete-pick-is-lost)
 - [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
 - [An `Autocomplete` option does nothing on click or Enter](#an-autocomplete-option-does-nothing-on-click-or-enter)
+- [Enter in a multiple `Autocomplete` no longer submits the form](#enter-in-a-multiple-autocomplete-no-longer-submits-the-form)
 - ["The search failed. Try again." no longer shows in an `Autocomplete`](#the-search-failed-try-again-no-longer-shows-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds `aria-invalid` on a `CodeEditor`](#a-test-no-longer-finds-aria-invalid-on-a-codeeditor)
@@ -381,6 +385,7 @@ words in your error.
 - [`` [@nxgt/material] DataTable: `tableRef` stays null in the `cards` layout; use `focusRef`. ``](#nxgtmaterial-datatable-tableref-stays-null-in-the-cards-layout-use-focusref)
 - [`defineCodeTheme: "keyword" must be a hex colour`](#definecodetheme-keyword-must-be-a-hex-colour-rgb-or-rrggbb)
 - [A `CodeEditor` shows its code in one colour after another Monaco editor mounts](#a-codeeditor-shows-its-code-in-one-colour-after-another-monaco-editor-mounts)
+- [`primary={false}` has no effect on a `ContactsFormField` with `editing="dialog"`](#primaryfalse-has-no-effect-on-a-contactsformfield-with-editingdialog)
 
 **PDF reader**
 
@@ -536,7 +541,28 @@ bun add @react-pdf/renderer@^4.9
 `--legacy-peer-deps` silences the error but keeps a renderer the print
 entry is not tested against.
 
-### `Cannot find package 'leaflet'`
+### `AttributeValuesFormFieldSet` shows empty fields, or ignores my `defaultValues`
+
+**When:** the set comes up empty although you pass `defaultValues`, or shows
+other values than the ones you passed.
+
+**Why:** the set reads the form value at `name` first. `defaultValues`
+is only a fallback while that value is empty: `undefined`, `null` or an object
+with no keys. A form that already holds `{ color: 'red' }` at `name` wins over
+`defaultValues`; a form that holds `{ color: undefined }` has a key, so it is
+not empty either.
+
+**Fix:** put the values in the form, where every other field reads them:
+
+```tsx
+const form = useForm({ defaultValues: { attributes: { size: 'M' } } });
+// or, for a record loaded later
+form.reset({ attributes: record.attributes });
+```
+
+Keep `defaultValues` on the set only for a fallback when the form holds nothing.
+
+## `Cannot find package 'leaflet'`
 
 **When:** at build or at the first import of `@nxgt/material/map`. The missing
 name may also be `react-leaflet`, `@react-leaflet/core`,
@@ -614,6 +640,14 @@ never receives the press.
 forwards `ref` and `...props` to its root. Or skip `trigger` and open it from
 your own state with `open` / `onOpenChange`.
 
+### A test that read the upload hint now sees "JPEG, PNG, WebP" or "Images"
+
+**When:** after upgrading, a test or snapshot that matched the drop zone's hint
+(`image/jpeg,image/png · Max 2 MB`, `image/*`) fails.
+**Why:** the hint shows short names derived from `accept` instead of the raw
+list: `JPEG, PNG · Max 2 MB`, `Images`.
+**Fix:** match the names, or pass `acceptLabel="..."` to fix the text.
+
 ### `This browser cannot play HLS streams.`
 
 **When:** an HLS track on a browser without Media Source Extensions where
@@ -1461,6 +1495,38 @@ with `className="max-h-none overflow-visible"`; to change the cap, pass your own
 For a dialog that should grow taller than the screen and scroll inside the
 overlay instead of capping, use `DialogScrollContent`.
 
+With a `DialogBody` as a direct child, the content is `overflow-hidden` (a
+clipped flex column) and only the body scrolls, so a child that sticks out of
+the content is clipped there too; keep popovers in a portal.
+
+### A `DialogBody`'s header and footer do not stay pinned
+
+**When:** a long dialog with a `DialogBody` still scrolls as a whole, or the
+footer sits at the end of the fields.
+**Why:** the content only turns into a column when the `DialogBody` is a
+*direct* child of `DialogContent` (`has-[>[data-slot=dialog-body]]`). Inside a
+`<form>` or another wrapper it is not. Another cause: a `max-h-none` or
+`overflow-visible` in the content's `className`.
+**Fix:** make the body a direct child, and put the `<form>` around the whole
+content, or keep the body inside and submit with `form="id"` on the footer button:
+
+```tsx
+<DialogContent>
+	<DialogHeader>…</DialogHeader>
+	<DialogBody>…</DialogBody>
+	<DialogFooter>…</DialogFooter>
+</DialogContent>
+```
+
+### A form's `form-actions` bar sticks inside a `DialogBody`
+
+**When:** a `.form-grid-layout` form with `form-actions` in a `DialogBody` shows
+its Save bar at the bottom of the body, not of the dialog.
+**Why:** the bar is sticky at the bottom of whatever scrolls, and the body now
+scrolls.
+**Fix:** use the `DialogFooter` for the buttons, with `form="my-form"` on the
+submit button and `id="my-form"` on the form, and leave `form-actions` out.
+
 ### A form's fields no longer scroll in their own box after upgrading
 
 **When:** after upgrading, a `.form-grid-layout` form grows with the page
@@ -4815,6 +4881,19 @@ on a desktop and on a phone alike: closing the picker with OK hands focus back
 to the trigger, and the next Tab or click elsewhere touches it. See the next
 entry.
 
+### A failed submit focuses a `ChoiceListFormField` but not the refused row
+
+**When:** a form with a `ChoiceListFormField` fails validation (a row's text
+is blank, `choices.2.text` in a resolver) and `document.activeElement` is the
+list's first control, or nothing, instead of the refused row. In versions
+before this fix.
+**Why:** the field gave React Hook Form a handle that focused the first
+control of the list, whichever row was refused.
+**Fix:** upgrade to the release that lists this fix in its changelog:
+`shouldFocusError` and `setFocus(name)` focus the first refused row's text
+input. Remove a workaround that queries `[aria-invalid="true"]` after submit.
+For the other fields, see the next entry.
+
 ### `setError(…, { shouldFocus: true })` or a failed submit does not focus the field
 
 **When:** a form wired with `*FormField`s: `handleSubmit` fails validation, or
@@ -5647,6 +5726,27 @@ may be chosen:
 />
 ```
 
+### Enter in a multiple `Autocomplete` no longer submits the form
+
+**When:** after upgrading, Enter in an `Autocomplete` (or `AutocompleteFormField`,
+a tags field) with `mode="multiple"` no longer submits the surrounding form
+when the list is closed and the input is empty.
+**Why:** the field is a tags box: the Enter that follows a pick used to save the
+whole form by surprise (#2199). Enter in `mode="multiple"` now only picks or
+adds. `single` mode is unchanged.
+**Fix:** submit with the form's button, or with a key handler of your own on the
+form if a keyboard shortcut is wanted (Ctrl/Cmd + Enter); drop any
+`onKeyDown` that prevented Enter on the combobox.
+
+```tsx
+<form
+	onSubmit={save}
+	onKeyDown={(e) => {
+		if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) e.currentTarget.requestSubmit();
+	}}
+>
+```
+
 ### "The search failed. Try again." no longer shows in an `Autocomplete`
 
 **When:** after upgrading, an `Autocomplete` whose `onSearch` rejects shows
@@ -6950,6 +7050,19 @@ structural theme back when it mounts, but not while the other editor stays.
 **Fix:** keep that editor on a page of its own, or stop it calling `setTheme`
 (`CodeEditor`'s `ref` handle gives Monaco's editor for the options you need).
 
+### `primary={false}` has no effect on a `ContactsFormField` with `editing="dialog"`
+
+**When:** `<ContactsFormField editing="dialog" primary={false} />` looks the
+same as without the prop.
+
+**Why:** `primary` hides the star and the primary marks of the inline editor.
+The dialog edits `type`, `value` and `label` only; it has no star to hide, and
+the `primary` flag already in the value is left untouched. `types` does work
+in both modes.
+
+**Fix:** use the default `editing="inline"` when the star must go, or drop the
+`primary` flag from the value before saving.
+
 ## PDF reader
 
 ### PDF text is missing or in the wrong font in `PdfReader` (cMaps and standard fonts)

package/lib/components/ui/fields/attributes/attribute-values-form/attribute-values-form.css

@@ -3,6 +3,11 @@
 	form {
 		@apply grid @xl:grid-cols-2 @2xl:grid-cols-3 @3xl:grid-cols-4 gap-2;
 
+		/* Every field takes its cell's full width, whatever its own slot. */
+		> * {
+			@apply w-full min-w-0;
+		}
+
 		[data-slot="separator"] {
 			@apply col-start-full;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.71.0",
+	"version": "3.73.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.46.0",
+		"@nxgt/material-core": "^0.47.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -487,6 +487,7 @@
 		"axe-core": "4.12.1",
 		"bwip-js": "^4.11.4",
 		"globals": "^17.7.0",
+		"happy-dom": "^21.0.4",
 		"hls.js": "^1.7.3",
 		"leaflet": "^1.9.4",
 		"lightningcss": "^1.33.0",