@nxgt/material 2.18.1 → 2.20.0

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

@@ -609,6 +609,8 @@ Parts: `Command`, `CommandDialog`, `CommandInput`, `CommandList`,
 | --- | --- | --- | --- |
 | `onSelect` (`CommandItem`) | `(value: string) => void` | — | Enter or click on the item |
 | `value` / `keywords` (`CommandItem`) | `string` / `string[]` | the item's text | what the filter matches |
+| `checked` (`CommandItem`) | `boolean` | — | sets `aria-checked` and shows a checkbox indicator, for a multi-choice list. cmdk's `aria-selected` keeps meaning "highlighted" |
+| `multiselectable` (`CommandList`) | `boolean` | — | sets `aria-multiselectable` on the list |
 | `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 |
 | `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | `CommandDialog` takes every `Dialog` prop |

package/docs/components/primitives.md

@@ -176,14 +176,16 @@ import { Typography } from '@nxgt/material/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'huge-large' \| 'huge-medium' \| 'huge-small' \| 'headline-larger' \| 'headline-large' \| 'headline-medium' \| 'headline-small' \| 'title-large' \| 'title-medium' \| 'title-small' \| 'body-medium' \| 'body-small' \| 'caption' \| 'normal'` | `'normal'` | size and weight; `caption` is also muted |
+| `tone` | `'default' \| 'muted' \| 'primary' \| 'error'` | `'default'` | text colour: `muted` is `text-muted-foreground`, `primary` is `text-primary`, `error` is `text-error-text`; `default` inherits (a `className` colour still wins) |
 | `as` | an intrinsic tag name (`keyof JSX.IntrinsicElements`) | `'div'` | the element to render, keeping the variant, e.g. `as="h2"` or `as="span"` |
 | `asChild` | `boolean` | `false` | merge the classes onto the single child instead of rendering an element |
 
-It renders a `<div>` unless `as` or `asChild` says otherwise:
+It renders a `<div>` unless `as` or `asChild` says otherwise. Use `as="span"` inside a `<button>` or a link, where a `<div>` is invalid HTML. It sets no `overflow`, so it is never a scroll region: text with break points wraps, while an unbreakable string can overflow its box (add `wrap-anywhere` or `min-w-0`; put your own wrapper with `overflow-auto` and `tabIndex={0}` around it to scroll):
 
 ```tsx
 <Typography as="span" variant="title-small">Inline</Typography>
 <Typography asChild variant="body-medium"><a href="/docs">Docs</a></Typography>
+<Typography tone="muted" variant="body-medium">Jan 3 to Jan 9</Typography>
 ```
 
 The variants are also exported as `typographyVariants` for use on your own elements.

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

@@ -427,7 +427,7 @@ export function Frameworks() {
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: ReactNode }[]` | — | the boxes |
+| `options` | `{ value: string; label: ReactNode; count?: number }[]` | — | the boxes; `count`: see [option counts](#option-counts). |
 | `value` | `string[]` | `[]` | the checked values |
 | `onValueChange` | `(value: string[]) => void` | — | the new list on each toggle |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
@@ -446,6 +446,10 @@ error with no message (`setError(name, { type: 'server' })`) keeps your
 the group's description is "<helperText> This value is not valid." and the error
 is not only a red colour.
 
+#### Option counts
+
+`count` on an option of `CheckboxGroup`, `RadioGroup` or `SelectChipField` shows a number after the label, in muted `tabular-nums` text, and joins the accessible name: the number as plain text plus a visually hidden unit word, so the option is named "CE1 24 results" (it starts with the visible label). The unit is the ICU plural `material.option-count.label` (`result` / `results`; `résultat` / `résultats` in French), so override it in your resources for another noun. `0` is a valid count.
+
 **Emits:** `string[]`.
 **Form wrapper:** `CheckboxGroupFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
@@ -482,7 +486,7 @@ full naming alignment is planned for 3.0.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: ReactNode; disabled?: boolean }[]` | — | the radios; `disabled` on an option disables only it |
+| `options` | `{ value: string; label: ReactNode; disabled?: boolean; count?: number }[]` | — | the radios; `disabled` on an option disables only it; `count`: see [option counts](#option-counts). |
 | `value` / `defaultValue` | `string` | — | Radix radio group state |
 | `onValueChange` | `(value: string) => void` | — | |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
@@ -610,12 +614,24 @@ export function Topics() {
 }
 ```
 
+With counts, and a single choice that stays chosen when pressed again:
+
+```tsx
+const levels = [
+	{ value: 'ce1', label: 'CE1', count: 24 },
+	{ value: 'ce2', label: 'CE2', count: 1 },
+];
+
+<SelectChipField label="Level" options={levels} value={value} onValueChange={setValue} deselectable={false} />
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `mode` | `'single' \| 'multiple'` | `'single'` | clicking the selected chip in `single` mode clears it |
+| `mode` | `'single' \| 'multiple'` | `'single'` | clicking the selected chip in `single` mode clears it, unless `deselectable` is `false` |
+| `deselectable` | `boolean` | `true` | `false`: in `single` mode a second press keeps the chosen chip chosen, as a radio group does; another chip still replaces it |
 | `value` | `string[]` | `[]` | the selected values, even in `single` mode |
 | `onValueChange` | `(value: string[]) => void` | — | |
-| `options` | `{ value, label, icon? }[]` | — | the chips |
+| `options` | `{ value: string; label: string; icon?: ReactNode; count?: number }[]` | — | the chips; `count`: see [option counts](#option-counts). |
 
 **Accessibility:** the chips are toggle buttons in a `role="group"` named by
 `label` and described by the help text: a chosen chip is

package/docs/guides/forms.md

@@ -270,6 +270,55 @@ in `[data-slot="form-actions"]`) and put each group of fields in a
   fields still take a row of their own. A rule separates each section from the
   one before it (`separated={false}` drops it).
 
+### One scroll, sticky actions
+
+The form grid has no height of its own and its fields no scroll box: a long
+form grows with the page, and the page is the one scroll. The actions
+(`[data-slot="form-actions"]`) are sticky at the bottom of whatever scrolls
+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
+  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.
+- 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
+  fields in a `.form-grid-layout` with no `form-actions`, so its footer
+  (Cancel, Confirm) is what sticks to the dialog's bottom. Any `Dialog` or
+  `AlertDialog` whose content holds a `.form-grid-layout` without
+  `form-actions` gets the same sticky footer.
+- A focused control or link is scrolled into view clear of the actions and
+  a line of helper text below it (`scroll-margin-bottom` on the fields'
+  controls: 6rem, plus a dialog's bottom padding, 7.5rem above a
+  `ConfirmationDialog`'s stacked footer), so a field you tab to is never
+  hidden behind them (WCAG 2.4.11). It is set on the controls, so it holds
+  in a scroll box of your own too.
+- Taller actions (a third button, labels that wrap) or helper text on
+  several lines need more room: raise `--form-actions-clearance` on the
+  form. A dialog whose bottom padding is not the default 1.5rem (`p-0` and
+  `p-4` are recognised) sets `--form-actions-fill` to it:
+
+  ```css
+  .edit-school-form {
+    --form-actions-clearance: 9rem;
+  }
+  .edit-school-dialog {
+    --form-actions-fill: 2rem; /* its pb-8 */
+  }
+  ```
+
+  ```tsx
+  <form className="form-grid-layout edit-school-form">
+  ```
+- To scroll a form in a box of your own, give it a height and the scroll
+  (`className="form-grid-layout max-h-[60vh] overflow-y-auto"`); to keep the
+  actions in place, give them `className="static"`. The
+  [troubleshooting entry](../troubleshooting.md#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
+  has the details.
+
 ## Validation messages
 
 `zodLocaleError()` from `@nxgt/material/lib` is a Zod v4 error map that
@@ -567,6 +616,41 @@ export function SupplierForm({ onSave }: { onSave: (values: Values) => void }) {
   renders one input per attribute and writes `{ [attribute.name]: value }` to
   its `name`.
 
+### Rows a user adds and removes
+
+When the rows are fields of their own — a school year's periods, each with a
+name, a start date and an end date — use
+[`RepeatableGroupFormField`](../components/form-fields.md#repeatablegroup)
+over `useFieldArray`, and render each row's fields with the form's own
+wrappers:
+
+```tsx
+<RepeatableGroupFormField
+  control={form.control}
+  name="periods"
+  label="Periods"
+  rowLabel="period"
+  max={6}
+  reorderable
+  newRow={() => ({ name: '' })}
+  renderRow={({ index }) => (
+    <>
+      <TextFormField control={form.control} name={`periods.${index}.name`} label="Name" />
+      <DateFormField control={form.control} name={`periods.${index}.start`} label="Start date" />
+    </>
+  )}
+/>
+```
+
+- A row's field shows its own error (`periods.1.name`); the array's own error
+  (`.min(2)` on the array, or a `useFieldArray` rule) shows under the rows and
+  describes the group.
+- The group moves the focus as rows come and go (an added row's first field,
+  a removed row's neighbour or Add, a moved row's move button) and announces each change politely
+  ("Added period 3"). A row your own code appends takes
+  `{ shouldFocus: false }`
+  ([why](../troubleshooting.md#the-focus-jumps-away-from-a-new-row-of-a-repeatablegroupformfield)).
+
 ## Config-driven forms
 
 `FormField` renders the field that matches a config `type`, which is useful

package/docs/guides/i18n.md

@@ -209,7 +209,8 @@ single value's input, when nothing names the slider, `material.slider.value`
 ("Value", "Valeur"). `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
 "Copy failed"). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
-(`material.table.labels.toggle-row`), its loading status, "Loading data…" /
+(`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
+(`material.table.labels.expand`), its loading status, "Loading data…" /
 "Chargement des données…" (`material.table.loading`), its scroll region,
 "Scrollable table" / "Tableau défilant"
 (`material.table.labels.scroll-region`, or the `scrollLabel` prop), a chip's remove button — `Chip`,

package/docs/roadmap.md

@@ -157,6 +157,13 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Rows a user adds, removes and reorders** — `RepeatableGroup` and
+  `RepeatableGroupFormField` over the form library's field array: rows from
+  `renderRow`, a list for assistive tech, Remove and move buttons named after
+  the row ("Remove period 2"), `max` and `min`, an empty state, focus that
+  follows each change, polite announcements, and the array's own error under
+  the rows. One column on a phone. 2.19.0.
+
 - **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
   sign-in page (one `main`, the card's title its `h1`, a status or alert
   notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,

package/docs/troubleshooting.md

@@ -28,6 +28,7 @@ words in your error.
 - [A Content-Security-Policy reports a `data:` image on every form with a required field](#a-content-security-policy-reports-a-data-image-on-every-form-with-a-required-field)
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-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 form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
 
 **Feedback**
 
@@ -130,6 +131,7 @@ words in your error.
 - ["Required" shows as soon as the calendar opens, or while a date is being picked](#required-shows-as-soon-as-the-calendar-opens-or-while-a-date-is-being-picked)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
 - [An end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`](#an-end-to-end-test-no-longer-finds-aria-expanded-on-a-responsivebutton)
+- [The focus jumps away from a new row of a `RepeatableGroupFormField`](#the-focus-jumps-away-from-a-new-row-of-a-repeatablegroupformfield)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
 - [An end-to-end test no longer finds a `LinkButton` by the `button` role](#an-end-to-end-test-no-longer-finds-a-linkbutton-by-the-button-role)
 - [A test no longer finds a date or time picker by the `button` role, or a slider thumb by the exact name `Minimum`](#a-test-no-longer-finds-a-date-or-time-picker-by-the-button-role-or-a-slider-thumb-by-the-exact-name-minimum)
@@ -162,6 +164,7 @@ words in your error.
 - [A `className` on `ActivityLayout` now styles the whole shell](#a-classname-on-activitylayout-now-styles-the-whole-shell)
 - [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 test no longer finds a tooltip on an entry of an expanded sidebar](#a-test-no-longer-finds-a-tooltip-on-an-entry-of-an-expanded-sidebar)
 - [A test no longer finds a calendar day by its number, or by "Today" or "selected"](#a-test-no-longer-finds-a-calendar-day-by-its-number-or-by-today-or-selected)
 - [`#<name>` no longer finds a `SwitchFormField` or `CheckboxFormField`](#name-no-longer-finds-a-switchformfield-or-checkboxformfield)
@@ -641,6 +644,32 @@ 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`.
 
+### 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
+instead of scrolling its fields in a box of its own, Cancel and Save stay at
+the bottom of the screen, or a form inside a box you gave a fixed height
+overflows it.
+**Why:** the form grid used to cap its height
+(`max-h-[calc(100lvh-184px)]`, more from `md`) and scroll
+`[data-slot="form-fields"]` inside it, so a page had two scrolls, one inside
+the other. It now has no cap and no scroll of its own: the page, or the
+`DialogContent` / `SheetContent` around it, is the one scroll, and
+`[data-slot="form-actions"]` is sticky at its bottom on a blurred background.
+A `Drawer`'s content does not scroll, so a form that is a direct child of
+`DrawerContent` is the scroll box there.
+**Fix:** to scroll a form inside a box again, give the box (or the form) a
+height and the scroll; the actions then stick to its bottom. To keep the
+actions where they are, make them static:
+
+```tsx
+<form className="form-grid-layout max-h-[60vh] overflow-y-auto">
+<div data-slot="form-actions" className="static">
+```
+
+An app's own fixed bottom bar or floating action button now sits under the
+sticky actions (`z-index: 10`): give it a z-index above 10 (`className="z-20"`).
+
 ## Feedback
 
 ### A toast with an action never goes away
@@ -2396,6 +2425,26 @@ On an older version, give the field an array default and keep an array:
 useForm({ defaultValues: { volume: [40] } }); // an array stays an array
 ```
 
+### The focus jumps away from 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 `useFieldArray`'s `append`,
+`prepend` or `insert` on the same `name`, and the focus lands on another field
+than the one you expected, or the page scrolls to it.
+**Why:** react-hook-form's `append` (and `prepend`, `insert`) default to
+`shouldFocus: true` and focus the new row's first registered field. The group
+moves the focus itself only after its own buttons (the new row's first field,
+a removed row's neighbour, a move button), so a second `useFieldArray` that
+focuses on its own fights with it.
+**Fix:** let the group's Add button add rows (`newRow` is what it appends).
+When your own code must add one, pass `{ shouldFocus: false }` and move the
+focus yourself if you want it moved:
+
+```tsx
+const { append } = useFieldArray({ control, name: 'periods' });
+append({ name: '' }, { shouldFocus: false });
+```
+
 ### A multi-step form reopens at a later step
 
 **When:** a wizard built on `createStepFormSlice` opens at the step (and with
@@ -3107,6 +3156,26 @@ with its own `<main>` passes `contentAs="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`:
+
+```tsx
+<div className="max-h-40 overflow-auto" tabIndex={0} aria-label="Release notes">
+	<Typography>{longText}</Typography>
+</div>
+```
+
 ### A test no longer finds a tooltip on an entry of an expanded sidebar
 
 **When:** after upgrading, a test hovers or focuses a `SidebarMenuItem` of an

package/lib/components/base-content.css

@@ -97,7 +97,7 @@
 	.form-grid-layout {
 		@apply relative flex flex-col gap-2 @container;
 		[data-slot="form-fields"] {
-			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start overflow-auto;
+			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start;
 
 			[data-slot="separator"] {
 				@apply col-start-full;
@@ -125,13 +125,73 @@
 				@apply col-start-full;
 			}
 		}
+		/* A focused control scrolls into view clear of the actions and a line
+		   of helper text, in any scroll box (WCAG 2.4.11 Focus Not Obscured). */
+		[data-slot="form-fields"]
+			:is(
+				input,
+				textarea,
+				select,
+				button,
+				a[href],
+				summary,
+				[tabindex],
+				[contenteditable]
+			) {
+			scroll-margin-bottom: calc(
+				var(--form-actions-clearance, 6rem) +
+				var(--form-actions-fill, 0px)
+			);
+		}
+		/* Sticky at the bottom of whatever scrolls the form: in reach. */
 		[data-slot="form-actions"] {
-			@apply flex w-full justify-end gap-2 bottom-2 p-4 max-sm:*:flex-1;
+			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 backdrop-blur-sm max-sm:*:flex-1;
 		}
 	}
 
-	.form-grid-layout {
-		@apply max-h-[calc(100lvh-184px)] md:max-h-[calc(100lvh-242px)] lg:max-h-[calc(100lvh-280px)];
+	/* No height cap and no scroll of its own: the page (or the overlay) is
+	   the one scroll. A Drawer's content does not scroll: the form does. */
+	[data-slot="drawer-content"] > .form-grid-layout {
+		@apply min-h-0 overflow-y-auto;
+	}
+
+	/* In a dialog, the stuck actions sit above its bottom padding
+	   (`--form-actions-fill`: p-6 by default; set it for another one). */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+		--form-actions-fill: 1.5rem;
+		&:is(.p-0, .py-0, .pb-0) {
+			--form-actions-fill: 0px;
+		}
+		&:is(.p-4, .py-4, .pb-4) {
+			--form-actions-fill: 1rem;
+		}
+	}
+
+	/* ConfirmationDialog's form has no actions of its own: the dialog's
+	   footer (two stacked buttons on a phone) sticks instead. */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
+		.form-grid-layout
+	):not(:has([data-slot="form-actions"])) {
+		--form-actions-clearance: 7.5rem;
+		> :is([data-slot="dialog-footer"], [data-slot="alert-dialog-footer"]) {
+			@apply sticky bottom-0 z-10 bg-background/90 backdrop-blur-sm;
+		}
+	}
+
+	/* A sticky element stops at the scroll box's padding: in a dialog, an
+	   `::after` as tall as that padding fills the strip below the stuck
+	   actions, so no field shows there, and adds no overflow. */
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])
+		.form-grid-layout
+		> [data-slot="form-actions"]::after,
+	:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
+			.form-grid-layout
+		):not(:has([data-slot="form-actions"]))
+		> :is(
+			[data-slot="dialog-footer"],
+			[data-slot="alert-dialog-footer"]
+		)::after {
+		@apply absolute inset-x-0 top-full h-(--form-actions-fill) bg-background content-[""];
 	}
 
 	/* No height cap on `DataTable` here (it nested a scroll in the page's):

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.18.1",
+	"version": "2.20.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -119,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.10.0",
+		"@nxgt/material-core": "^0.11.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",