@nxgt/material 2.18.0 → 2.19.0

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @nxgt/material
 
+## 2.19.0
+
+### Minor Changes
+
+- [#569](https://github.com/softistx/nxgt-material/pull/569) [`37d5114`](https://github.com/softistx/nxgt-material/commit/37d5114cc1bad14c352e0770a511bb842bc71ea5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Options of `CheckboxGroup`, `RadioGroup` and `SelectChipField` take a `count`: muted `tabular-nums` text after the label, and part of the accessible name ("CE1 24 results", from the new `material.option-count.label` ICU plural, in en and fr). `SelectChipField` in `@nxgt/material-vue` gains `icon` on its options, as in React, and both libraries gain `deselectable` (default `true`): `false` keeps the chosen chip chosen when it is pressed again in single mode.
+
+- [#574](https://github.com/softistx/nxgt-material/pull/574) [`c00f8c3`](https://github.com/softistx/nxgt-material/commit/c00f8c366e35b7769560bb86b964ae0705bcc60f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `RepeatableGroup` and `RepeatableGroupFormField` (Storybook
+  `Form fields/RepeatableGroup`): rows of fields a user adds, removes and, with
+  `reorderable`, moves up and down. `RepeatableGroupFormField` wraps the form
+  library's `useFieldArray` (react-hook-form in React, vee-validate in Vue) and
+  renders each row from `renderRow` (React) or the `row` slot (Vue), whose
+  `path` names the row's fields. The rows are a list (`ul` / `li`) in a group
+  named by `label`; each row's buttons are named after it ("Remove period 2",
+  "Move period 2 up"), from the new `material.repeatable-group.*` keys in
+  English and French. An added row's first field takes the focus, a removed row
+  hands it to its neighbour or to Add, and a moved row keeps it on its move
+  button; each change is announced politely. `max` makes Add `aria-disabled`,
+  described by "Maximum reached (n)"; `min` disables Remove; `emptyTitle` /
+  `emptyDescription` show an `EmptyState` with no row. The array's own error
+  shows under the rows and describes the group; each row's fields show their
+  own. One column on a phone, a responsive grid wider up, no inline style.
+  
+  `@nxgt/material-core` gains `/repeatable-group`: the focus rules
+  (`focusAfterRemove`, `focusAfterMove`, `focusRowTarget`), the limits
+  (`canAddRow`, `canRemoveRow`, `rowMoveTarget`) and the `RowAnnouncement`
+  descriptor both libraries use.
+  
+  ```tsx
+  <RepeatableGroupFormField
+    control={control}
+    name="periods"
+    label="Periods"
+    rowLabel="period"
+    max={6}
+    reorderable
+    newRow={() => ({ name: '' })}
+    renderRow={({ index }) => (
+      <TextFormField control={control} name={`periods.${index}.name`} label="Name" />
+    )}
+  />
+  ```
+  
+  ```vue
+  <RepeatableGroupFormField
+    name="periods"
+    label="Periods"
+    row-label="period"
+    :max="6"
+    reorderable
+    :new-row="() => ({ name: '' })"
+  >
+    <template #row="{ path }">
+      <TextFormField :name="`${path}.name`" label="Name" />
+    </template>
+  </RepeatableGroupFormField>
+  ```
+  
+  Fixes [#516](https://github.com/softistx/nxgt-material/issues/516).
+  
+  Migration: an app with a local field-array list marked temporary for this
+  request ([#516](https://github.com/softistx/nxgt-material/issues/516)) — a `useFieldArray` whose rows are mapped by hand, with its own
+  Add and per-row Remove buttons — can delete it and render
+  `RepeatableGroupFormField` instead: the array's `name`, `newRow` for what Add
+  appends, and the row's fields moved into `renderRow` / the `row` slot. Pass no
+  `shouldFocus` to `append`: the group moves the focus itself.
+
+- [#568](https://github.com/softistx/nxgt-material/pull/568) [`d694897`](https://github.com/softistx/nxgt-material/commit/d694897134f52b5d39f775d3ddc1bbaf24d26360) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SearchField` takes `shortcut` (for example `"/"`): a `Kbd` hint at the end while the field is empty (also hidden while it is `loading` or `disabled`), hidden from assistive tech, and `aria-keyshortcuts` on the input. It is a hint only and binds no key; the page owns the listener. In Vue the component also exposes `focus()`.
+  
+  `CommandItem` takes `checked`, which sets `aria-checked` and shows a checkbox indicator, and `CommandList` takes `multiselectable`, which sets `aria-multiselectable`. `aria-selected` keeps its meaning in each library (React: the highlighted item; Vue: the selected value, `multiple` is not used).
+
+- [#567](https://github.com/softistx/nxgt-material/pull/567) [`8f8530a`](https://github.com/softistx/nxgt-material/commit/8f8530a1fec64f45407d526769890f656eb395b4) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat: `Typography` takes a `tone` (`default`, `muted`, `primary`, `error`), so secondary text is `tone="muted"` instead of a hand-written `text-muted-foreground`. Fix: `Typography` no longer adds `overflow-auto`, which made every block a scroll region (axe `scrollable-region-focusable` in Firefox). Behaviour change: a `Typography` that relied on scrolling its text now overflows; wrap it in an element with `overflow-auto`, `tabIndex={0}` and an accessible name (see the troubleshooting entry "Long text in Typography no longer scrolls"). A block `Typography` is also no longer a block formatting context, so its margins can collapse. An unbreakable string can overflow its box: add `wrap-anywhere`. Block text in a flex or grid row needs `min-w-0` to shrink, as the library's own flex rows now have. Components that put a `Typography` inside a `<button>` (stepper, inline edit, chat conversation item, list tile, event chip) render it as a `span`.
+
+### Patch Changes
+
+- [#572](https://github.com/softistx/nxgt-material/pull/572) [`0a4b707`](https://github.com/softistx/nxgt-material/commit/0a4b7078eaf2d8e9c3bf15556ecff7f13e03d11d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Sidebar: a link entry (`SidebarMenuItem` with `href`, so every `AppSidebar` and `ActivityLayout` entry) now looks exactly like a button entry. The global link style (underline, info tint on hover and focus) no longer reaches it, so in the collapsed rail hover tints only the icon pill again, not the whole entry ([#566](https://github.com/softistx/nxgt-material/issues/566)).
+  
+  The selected entry no longer looks disabled ([#571](https://github.com/softistx/nxgt-material/issues/571)): its icon and label are in primary on the translucent pill, where the icon used to be white, and its label is semibold. In the dark theme, where primary itself reads at 2.5:1, they take a saturated lavender of primary's hue (`oklch(from primary 0.72 0.15 h)`), at 6.3:1 on a denser pill (`bg-primary/30`). In light the contrast is 5.8:1. Both layers of a duotone icon follow it. An unselected entry's icon takes its label's colour instead of the link blue. This covers the collapsed rail, the expanded sidebar and the phone sheet, for link and button entries alike.
+- Updated dependencies [[`c00f8c3`](https://github.com/softistx/nxgt-material/commit/c00f8c366e35b7769560bb86b964ae0705bcc60f)]:
+  - @nxgt/material-core@0.11.0
+
+## 2.18.1
+
+### Patch Changes
+
+- [#562](https://github.com/softistx/nxgt-material/pull/562) [`b41a427`](https://github.com/softistx/nxgt-material/commit/b41a42792e0bd249990fb2e30b013741e16527b2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix a click lost right after an Autocomplete pick ([#557](https://github.com/softistx/nxgt-material/issues/557)). A pick empties the query, and `onQueryChange` (`@query-change` in Vue) reported that `''` only after `debounceMs`; whatever the page hid on it (a line, a count) then shrank a centred dialog under the next click, so an option of the Select below was pressed and released on two different rows and nothing was chosen (seen in Firefox). A query that changes from a non-empty value to `''` is now reported at once, never on mount; typing still waits for the pause, and no second `''` follows it. Also: the closing Combobox and Popover lists take no pointer events while they animate out. The Select is left as it was: Radix and reka-ui set an inline `pointer-events: auto` on its content, which no class can override. Adds the `Autocomplete/Query cleared` play and a `useQueryReport` unit test (React), a `queryChange` unit test (Vue) and a `NextControlClickableWhileClosing` play to both libraries.
+  
+  Migration: none. A consumer test that waited for the list to close after a pick (`expect(page.getByRole('listbox')).toHaveCount(0)`) can drop that wait.
+
 ## 2.18.0
 
 ### Minor Changes

package/README.md

@@ -332,6 +332,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-field.webp" width="120" alt="Field"> | [`Field`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#field) · `FormField` | Renders the field matching a config `type` (text, select, date, upload, otp…). | `Field` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#formsection) | A titled section of a form (an `h2` by default) with an optional description and actions, its fields in the form grid's columns, one column on a phone. | `FormSection` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-repeatablegroup.webp" width="120" alt="RepeatableGroup"> | [`RepeatableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#repeatablegroup) · `RepeatableGroupFormField` | Rows of fields a user adds, removes and reorders (`useFieldArray`), a list for assistive tech, focus that follows each change, one column on a phone. | `RepeatableGroup`, `RepeatableGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-textfield.webp" width="120" alt="TextField"> | [`TextField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#textfield) · `TextFormField` | Labelled input with leading / trailing adornments and helper text. | `TextField`, `TextFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-textareafield.webp" width="120" alt="TextareaField"> | [`TextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#textareafield) · `TextareaFormField` | Labelled textarea with row sizing and a `maxLength` counter. | `TextareaField`, `TextareaFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-emailfield.webp" width="120" alt="EmailField"> | [`EmailField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#emailfield) · `EmailFormField` | Validates on blur; shows a `mailto:` button once the address is valid. | `EmailField`, `EmailFormField` |

package/dist/{_Uint8Array-C7apDrb7.js → _Uint8Array-B6RHzY7k.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-DEde7BKz.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-DX_ArUA5.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-CCAbV-eT.js → _overRest-Cs3RIAVd.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-DEde7BKz.js";
+import { m as e, p as t } from "./translator-DX_ArUA5.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-Cuekts5f.js → async-slice-CgbRYTRY.js}

@@ -1,6 +1,6 @@
-import { a as e, i as t, t as n } from "./stored-language-BKoohv2_.js";
-import { C as r, S as i, h as a, l as o, m as s, p as c, r as l, u, v as d, w as f, x as p } from "./translator-DEde7BKz.js";
-import { a as m, c as h, d as g, i as _, n as v, r as y, t as b, u as ee } from "./_Uint8Array-C7apDrb7.js";
+import { a as e, i as t, t as n } from "./stored-language-FHwsTPoM.js";
+import { C as r, S as i, h as a, l as o, m as s, p as c, r as l, u, v as d, w as f, x as p } from "./translator-DX_ArUA5.js";
+import { a as m, c as h, d as g, i as _, n as v, r as y, t as b, u as ee } from "./_Uint8Array-B6RHzY7k.js";
 import { L as te } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as ne, createContext as re, createElement as x, useContext as ie, useEffect as ae, useMemo as S, useReducer as oe, useState as se, useSyncExternalStore as ce } from "react";
 import { asyncThunkCreator as le, buildCreateSlice as ue } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-B63zbmDg.js → blockDiagram-BEXU5L5S-D5ptXmBP.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-DxjKaXeR.js";
+import { t as e } from "./graphlib-CORKO6lR.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-BBrCUBwp.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-CE9T5wr6.js → chunk-3FUC2YCW-al8CepY8.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-DxjKaXeR.js";
+import { t as e } from "./graphlib-CORKO6lR.js";
 import { n as t } from "./src-CsLQInsN.js";
 import { g as n } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-BBrCUBwp.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-BjaezAbj.js → chunk-7M6MHVWA-BERAnmfo.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-DjnciAsL.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-DMMDhC9T.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-DjnciAsL.js → chunk-GNY47TPC-DMMDhC9T.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-BBrCUBwp.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
 import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DmkPwZLS.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BfEvNh_f.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-BjO_Ytfq.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-Ck8np52h.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-Czy9f6gp.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-C8TrgNLm.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-CxQxB74H.js → chunk-NETBCI7D-CsMBdu5o.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-BBrCUBwp.js";
+import { o as t } from "./chunk-Z7XXMR3K-CLYmaWUD.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-BBrCUBwp.js → chunk-Z7XXMR3K-CLYmaWUD.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-CsPEBzNF.js";
+import { st as e } from "./components-C5y9FL-6.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{classDiagram-v2-NBCMYWYE-FeyVcYCs.js → classDiagram-v2-NBCMYWYE-C-6ddqhF.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-BBrCUBwp.js";
+import "./chunk-Z7XXMR3K-CLYmaWUD.js";
 import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-DjnciAsL.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-DMMDhC9T.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/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;
 		}