@nxgt/material-vue 0.37.1 → 0.38.0

package/docs/troubleshooting.md

@@ -51,6 +51,7 @@ words in your error.
 - [The app shell's page scrolls instead of its content, or a full-height screen collapses](#the-app-shells-page-scrolls-instead-of-its-content-or-a-full-height-screen-collapses)
 - [A test finds a new heading or a second `main`, or no longer finds a title in a `div`](#a-test-finds-a-new-heading-or-a-second-main-or-no-longer-finds-a-title-in-a-div)
 - [`[data-test="typogaphy"]` finds nothing](#data-testtypogaphy-finds-nothing)
+- [Long text in `Typography` no longer scrolls](#long-text-in-typography-no-longer-scrolls)
 - [A `class` on `ActivityLayout` now styles the whole shell](#a-class-on-activitylayout-now-styles-the-whole-shell)
 - [A test no longer finds a calendar day by its number](#a-test-no-longer-finds-a-calendar-day-by-its-number)
 - [A `QRCode`'s `aria-label` is no longer on its wrapper](#a-qrcodes-aria-label-is-no-longer-on-its-wrapper)
@@ -97,6 +98,7 @@ words in your error.
 - [A failed submit does not focus the first invalid field](#a-failed-submit-does-not-focus-the-first-invalid-field)
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
 - [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
+- [The focus does not move to a new row of a `RepeatableGroupFormField`](#the-focus-does-not-move-to-a-new-row-of-a-repeatablegroupformfield)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
 - [The form could not be loaded.](#the-form-could-not-be-loaded)
 
@@ -836,6 +838,26 @@ with its own `<main>` passes `content-as="div"`.
 **Fix:** select `[data-test="typography"]` — or better, the text or the role
 the user sees.
 
+### Long text in `Typography` no longer scrolls
+
+**When:** after upgrading, a `Typography` with a fixed height or width used to
+scroll its overflowing text; it now overflows its box (or `truncate` and
+`line-clamp-*` are the only things that clip it).
+**Why:** `Typography` always carried `overflow-auto`, which made every block
+`Typography` a scroll region: Firefox counted a subpixel overflow, and axe
+reported `scrollable-region-focusable`. It sets no `overflow` now, so it is no
+longer a block formatting context (its margins can collapse with its
+neighbours'), and a text flex or grid item no longer has the zero minimum width a scroll container has.
+**Fix:** where you want scrolling, wrap the text in an element that owns it,
+focusable and named so keyboard users can scroll it; where you want a flex
+item to shrink, give it `min-w-0`:
+
+```vue
+<div class="max-h-40 overflow-auto" tabindex="0" aria-label="Release notes">
+  <Typography>{{ longText }}</Typography>
+</div>
+```
+
 ### A `class` on `ActivityLayout` now styles the whole shell
 
 **When:** after upgrading, the classes passed to `<ActivityLayout class="…">`
@@ -1974,6 +1996,27 @@ yourself.
 field.value?.$el.querySelector<HTMLElement>('[aria-pressed="true"], button')?.focus();
 ```
 
+### The focus does not move to a new row of a `RepeatableGroupFormField`
+
+**When:** a row is added to a `RepeatableGroupFormField` by your own code (a
+second "Add" button, a "Duplicate" action) through vee-validate's
+`useFieldArray` `push`, `prepend` or `insert` on the same `name`, and the focus
+stays where it was, with nothing announced.
+**Why:** the group moves the focus and announces the change only after its
+own buttons (the new row's first field, a removed row's neighbour, a move
+button). A row added from outside is a value change it renders, not an action
+it took.
+**Fix:** let the group's Add button add rows (`new-row` is what it pushes).
+When your own code must add one, move the focus yourself once the row has
+rendered:
+
+```ts
+const { push } = useFieldArray('periods');
+push({ name: '' });
+await nextTick();
+document.querySelector<HTMLElement>('[data-slot="repeatable-group-row"]:last-child input')?.focus();
+```
+
 ### A multi-step form reopens at a later step
 
 **When:** a wizard built on `defineStepFormStore` opens at the step (and with

package/lib/components/base.css

@@ -55,7 +55,9 @@
 			font-size: var(--text-xs);
 			font-weight: var(--font-weight-medium);
 		}
-		a:not(:has(> button)) {
+		/* A sidebar entry is a link styled as a menu entry: the prose link style
+		   (underline, info tint on hover and focus) must not reach it (#566). */
+		a:not(:has(> button)):not([data-slot="sidebar-menu-item"]) {
 			@apply focus:underline underline-offset-4 hover:underline cursor-pointer;
 			@apply text-info [&_svg]:data-[slot=icon]:text-info hover:bg-info/10 active:bg-info/5 focus:bg-info/15;
 		}

package/lib/nuxt/component-names.ts

@@ -436,6 +436,8 @@ export const COMPONENT_NAMES = [
 	'ReceiptCard',
 	'RecoveryCodes',
 	'RelativeTime',
+	'RepeatableGroup',
+	'RepeatableGroupFormField',
 	'ResizableHandle',
 	'ResizablePanel',
 	'ResizablePanelGroup',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.37.1",
+	"version": "0.38.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.10.0",
+		"@nxgt/material-core": "^0.11.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",