@nxgt/material-core 0.3.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @nxgt/material-core
 
+## 0.5.0
+
+### Minor Changes
+
+- [#456](https://github.com/softistx/nxgt-material/pull/456) [`7200d8c`](https://github.com/softistx/nxgt-material/commit/7200d8c05e8b94de10910ccb3609be3ed1b59061) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New subpath `@nxgt/material-core/escape-forward`: `forwardEscape(content, event)`, called from an overlay content's escape handler, presses Escape again for the overlay below once a content that was closing (`data-state="closed"`, still on the page for its exit animation) has left. Radix's and reka's dismissable layers give Escape to the highest layer only and drop a dialog's layer when it unmounts, not when it closes, so an Escape pressed during the animation was lost. Both libraries' dialog, alert dialog, sheet and drawer contents use it.
+
+- [#450](https://github.com/softistx/nxgt-material/pull/450) [`8e568c3`](https://github.com/softistx/nxgt-material/commit/8e568c3544327c1ba273482963ec13e1930d3be6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New subpath `@nxgt/material-core/focus-control`: `firstControl(roots)` returns the first control of a field a user can reach (one they can Tab to that is rendered, not a `display: none` input a library keeps), and `focusHandle(roots)` builds the stand-in element a form library focuses (`focus()`, `select()`, `setCustomValidity()`, `reportValidity()`), for a field made of several controls. Both libraries use it: `@nxgt/material`'s fields hand it to React Hook Form as `field.ref`, and `@nxgt/material-vue`'s `focusField` / `focusFirstInvalid` look the control up with it.
+  
+  New subpath `@nxgt/material-core/zod-issue-messages`: `sizeMessage(issue, { translate, lookup })` and `invalidFormatMessage(issue, { translate, lookup })`, the text of a zod `too_big` / `too_small` and `invalid_format` issue, which both libraries' zod error maps use. Core reads the issue by shape and has no zod dependency.
+  
+  New subpath `@nxgt/material-core/described-by`: `describedBy(own, ...ids)`, a field's `aria-describedby` value — the caller's ids first, then the field's help or error ids, the falsy ones left out, `undefined` when none is left. Both libraries' text-like fields use it.
+
+- [#461](https://github.com/softistx/nxgt-material/pull/461) [`f6cb264`](https://github.com/softistx/nxgt-material/commit/f6cb2649cbdae34201eba18d0ec69846a281deba) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New subpath `@nxgt/material-core/inert-others`: `inertOthers(content, keep?)` makes everything in `<body>` but a modal layer's content `inert` — out of the tab order and of the accessibility tree — and returns the undo. It marks what `aria-hidden`'s `hideOthers` marks `aria-hidden` (the siblings of the content and of its ancestors) and keeps what `hideOthers` keeps (`[aria-live], script`) and `keep` reachable. Elements mounted after the call are not made inert. Elements are counted per layer, so nested layers undo in any order; an element already `inert` is left as it was; focus left on the page behind goes to the content; the undo also runs by itself when the content leaves the document. Marked elements carry `data-nxgt-inert` (`INERT_MARKER`). Both libraries' modal layers use it.
+
+- [#457](https://github.com/softistx/nxgt-material/pull/457) [`025bf28`](https://github.com/softistx/nxgt-material/commit/025bf28872d1954596cf7d7054245646309e4525) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New subpath `@nxgt/material-core/touch-hover`: `ignoreTouchHover(document, selector)` keeps a tap from hovering whatever matches `selector`. After a tap, a browser emulates a mouse that arrives over what was tapped (`mouseover`, `mouseenter`, `mousemove`) and does not leave until the next tap elsewhere; while the last pointer was a finger, those three events are stopped in the capture phase, before any handler inside the element hears them. A mouse or a pen hovers as before, and `mouseout` / `mouseleave` always pass. It returns the function that removes its listeners. Both libraries' `Toaster` use it, so a toast a finger tapped no longer stays paused.
+  
+  The subpath also exports `TOASTER_PHONE_QUERY` and `TOASTER_PHONE_POSITION`, the phone width and default position both libraries' `Toaster` share.
+
+## 0.4.0
+
+### Minor Changes
+
+- [#431](https://github.com/softistx/nxgt-material/pull/431) [`bd58a6f`](https://github.com/softistx/nxgt-material/commit/bd58a6f67bdc25d4b4d0d7d88c52784869ad1529) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` renders server-side data: one page from a loader, with the query in the URL. Everything is opt-in; a table that sets none of the new props renders and behaves as before.
+  
+  - `manual`: `data` is one server page, rendered as given — no client paging, sorting or filtering — and the footer becomes `DataTableServerFooter` (exported).
+  - `pagination={{ totalCount, offset, previous, next }}`: the server footer's range ("41–60 of 133", `material.table.pagination.range`) and Previous / Next, each an href (a real link, `rel="prev"` / `rel="next"`, that works with no JavaScript) or a callback (a button); disabled when absent and while `loading`.
+  - Controlled sorting: `sorting` + `onSortingChange(sorting)` in React, `v-model:sorting` in Vue. The headers show the sorting they are given; the callback receives the new `SortingState`, not an updater.
+  - `getRowId(row, index)` and controlled selection by id: `rowSelection` + `onRowSelectionChange(selection)` in React, `v-model:row-selection` in Vue. Ids of other pages are kept, and the server footer counts them all.
+  - `getRowHref(row)`: the first data cell becomes a link to the row's page, and a click anywhere else on the row (but on a control, in a portal, or at the end of a text selection) follows it. `onRowClick(row, event)` (`@row-click` in Vue) makes the row focusable and activatable with Enter.
+  - `linkComponent`: the link rendered for row and page links, given `href` (wrap React Router's `Link` or vue-router's `RouterLink`, which take `to`). Default: a plain `<a>`.
+  - `footer`: a render function (React, Vue) or the `#footer` slot (Vue) replaces the footer; `footer={false}` removes it.
+  - New `material.table.pagination.*` strings, in English and French: `label`, `range`, `range-open`, `total`, `selected`.
+  
+  `@nxgt/material-core` gains `/row-activation` (`isRowActivation`, `followRowLink`, `ROW_CONTROL_SELECTOR`, `ROW_LINK_SELECTOR`, `RowClick`): the clickable-row rule both libraries' `DataTable` use.
+
 ## 0.3.2
 
 ### Patch Changes

package/README.md

@@ -5,17 +5,27 @@ The framework-free core that [`@nxgt/material`](https://www.npmjs.com/package/@n
 (Vue) share, as one copy: the PDF document model and its react-pdf renderer,
 the print formatters, the PDF file helpers, the PDF viewer's framework-free
 half (page geometry, scroll spy, text search), the currency field's decimals,
-the file-size formatter, the fields' blur rule, the Vite plugin that bundles
-pdfkit's standard fonts, and the Node-only resolution of those fonts that the
-Next.js helper and the Nuxt module run at build time.
+the file-size formatter, the slider's tick marks, the date range presets, the
+file preview's kind detection, the fields' blur rule, a field's first
+reachable control (`/focus-control`) and its `aria-describedby`
+(`/described-by`), the page behind a modal layer made inert
+(`/inert-others`), Escape pressed while an overlay closes
+(`/escape-forward`), the Toaster's guard against a tap's emulated hover
+(`/touch-hover`), a table row's activation, the zod error map's issue
+messages (`/zod-issue-messages`), the Vite plugin that bundles pdfkit's
+standard fonts, and the Node-only resolution of those fonts that the Next.js
+helper and the Nuxt module run at build time.
 
 **You usually do not install it yourself.** Both libraries depend on it and
 re-export what they always exported, at the same subpaths:
 `@nxgt/material/print`, `@nxgt/material-vue/pdf`, `/lib` and `/vite` read
-from here, and so do their `PdfReader`, `CurrencyField`, form fields, file
-list and upload field (`formatFileSize`), `@nxgt/material/next` and
-`@nxgt/material-vue/nuxt`. Import it directly when you want the model or a formatter without
-a UI library.
+from here, and so do their `PdfReader`, `CurrencyField`, form fields (their
+focus, blur, `aria-describedby` and zod messages), file list and upload
+field (`formatFileSize`), modal layers (the inert page behind, Escape while
+closing), `Toaster`, `DataTable` rows, `@nxgt/material/next` and
+`@nxgt/material-vue/nuxt`. Import it directly when you want the model or a
+formatter without a UI library, or one of these helpers in a component of
+your own.
 
 ```ts
 import { heading, pdfDocument, text } from '@nxgt/material-core/pdf/model';
@@ -70,6 +80,13 @@ built-in.
 | `/pdf-viewer` | The PDF viewer's pure half: page geometry and fit (`readerFitScale`, `placeholderSize`, `rotatedSize`, `PdfPageSize`, `FitMode`), page sizes (`readPageSizes`, `createPageSizesLoader`), the scroll spy (`createScrollSpy`, `revealHit`, `scrollIntoArea`), the opening page's pin (`pinToPage`, whose optional `onRelease` runs once when it lets go, and `pinHolds`, whether the view is still where it puts the page), text search (`pageTextFromItems`, `findTextMatches`, `searchDocument`), `escapeHtml`, `mapPdfOutline` |
 | `/currency-digits` | `currencyFractionDigits` — the decimals `CurrencyField` shows |
 | `/field-blur-layers` | `layerOf`, `openerOf`, `FieldLayers` — whose overlay a layer of the page is, for a field's blur |
+| `/focus-control` | `firstControl`, `focusHandle`, `FocusHandle` — the first control of a field a user can reach, and a stand-in element that focuses it for a form library |
+| `/escape-forward` | `forwardEscape` — Escape pressed while an overlay closes, pressed again for the overlay below once it has gone |
+| `/described-by` | `describedBy` — an `aria-describedby` value from the caller's ids and a field's help and error ids |
+| `/inert-others` | `inertOthers`, `INERT_MARKER` — the rest of the page `inert` behind a modal layer, live regions kept, nested layers counted |
+| `/touch-hover` | `ignoreTouchHover`, `TOASTER_PHONE_QUERY`, `TOASTER_PHONE_POSITION` — keeps a tap from hovering an element, so a toast a finger touched does not stay paused; where the `Toaster` puts toasts on a phone |
+| `/zod-issue-messages` | `sizeMessage`, `invalidFormatMessage`, `IssueText` — the translated text of a zod `too_big` / `too_small` and `invalid_format` issue |
+| `/row-activation` | `isRowActivation`, `followRowLink`, `ROW_CONTROL_SELECTOR`, `ROW_LINK_SELECTOR`, `RowClick` — whether a click on a table row follows its link, and following it |
 | `/format-file-size` | `formatFileSize` — a byte count as `'1.5 KB'` |
 | `/slider-ticks` | `tickValues` — where a slider's tick marks sit |
 | `/date-range` | `DATE_RANGE_PRESET_IDS`, `presetRange`, `resolvePresetRange`, `isSameDayRange`, `isRangeDisabled`, `withTimeOf`, `endOfDayTime`, `clampRangeEnd`, `keepRangeTimes` and the types `DayRange`, `PartialDayRange`, `DateRangePreset`, `DateRangePresetId`, `DateRangePresetOption`, `DateRangeRules` — `DateRangeField`'s presets and times |
@@ -465,6 +482,155 @@ field.addEventListener('focusout', (event) => {
 });
 ```
 
+### Focusing a field made of several controls: `/focus-control`
+
+`firstControl(roots)` returns the first control in the roots a user can
+reach (one they can Tab to that is rendered, not a `display: none` input a
+library keeps), or `null`. `focusHandle(roots)` builds a stand-in element for
+a form library that focuses an invalid field by calling `focus()` on what the
+field registered, as React Hook Form does with `field.ref`: `focus()` focuses
+that first control, looked up when it is called (and once more a turn later,
+when a re-render replaced it). Pass a live collection — the `Set` of the
+field's roots — and both read the DOM only when called.
+
+```ts
+import { firstControl, focusHandle } from '@nxgt/material-core/focus-control';
+
+const roots = new Set<Element>([document.querySelector('#delivery-dates')!]);
+firstControl(roots)?.focus(); // the first date input, not a hidden one
+field.ref(focusHandle(roots)); // React Hook Form: shouldFocusError reaches it
+```
+
+### Escape while an overlay closes: `/escape-forward`
+
+Radix's and reka's dismissable layers give Escape to the highest layer only,
+and a dialog's layer leaves their stack when its content unmounts, not when
+it closes: an Escape pressed during the exit animation went to a dialog that
+was already closed, and the overlay below stayed open.
+`forwardEscape(content, event)`, called from the content's escape handler
+after the caller's, does nothing unless `content` has `data-state="closed"`
+and the default was not prevented. Then it prevents the default and presses
+Escape again (a new `keydown` on what has focus) once `content` has left the
+page, two frames later, so the layer below has taken over. It returns
+whether it did. A content that is still there after about two seconds (a
+`forceMount`) is no longer waited on.
+
+```ts
+import { forwardEscape } from '@nxgt/material-core/escape-forward';
+
+const contentElement = document.querySelector<HTMLElement>('[role="dialog"]');
+const own = (event: KeyboardEvent) => console.log(event.key); // the caller's handler
+
+function onEscapeKeyDown(event: KeyboardEvent) {
+  own(event); // the caller's handler first
+  forwardEscape(contentElement, event);
+}
+```
+
+### A field's `aria-describedby`: `/described-by`
+
+`describedBy(own, ...ids)` joins the ids a field's control is described by:
+the caller's own `aria-describedby` first, then the field's (its help or
+error text), with `undefined`, `false` and empty ids left out. It returns
+`undefined` when none is left, so the attribute is not rendered at all.
+
+```ts
+import { describedBy } from '@nxgt/material-core/described-by';
+
+describedBy('hint', error && 'email-error'); // 'hint email-error', or 'hint'
+describedBy(undefined, false); // undefined: no attribute
+```
+
+### The page behind a modal layer: `/inert-others`
+
+`inertOthers(content, keep?)` makes everything in `<body>` but a modal
+layer's content `inert` — out of the tab order and of the accessibility tree
+— and returns the undo. It marks the elements `aria-hidden`'s `hideOthers`
+marks `aria-hidden` (the siblings of the content and of its ancestors), so
+the two libraries' modal layers pass axe's `aria-hidden-focus`. Live regions
+and scripts stay reachable — the selector `hideOthers` keeps,
+`[aria-live], script`, so a `role="status"` without `aria-live` does not —
+and so does anything in `keep`. Each element is counted per
+layer: nested layers (a select in a dialog) undo in any order, and an element
+that was already `inert` is left as it was. Focus still on the page behind
+goes to the content a microtask later, unless something moved it into the
+layer by then. The undo runs once, by your call or by itself when the content
+leaves the document; marked elements carry `data-nxgt-inert`
+(`INERT_MARKER`). It reads the DOM only when called, and does nothing
+without a content in the document (on the server). Elements mounted after
+the call are not made inert: mount them before the layer opens, or pass them
+in `keep` when they must stay reachable.
+
+```ts
+import { inertOthers } from '@nxgt/material-core/inert-others';
+
+const undo = inertOthers(dialogContent);
+// … the dialog closes:
+undo();
+```
+
+### A tap that does not hover: `/touch-hover`
+
+After a tap, a browser emulates a mouse: `mouseover`, `mouseenter` and
+`mousemove` arrive on what was tapped, and no `mouseleave` follows until the
+next tap lands somewhere else. Anything that pauses while hovered (a toast,
+under WCAG 2.2.1) stays paused. `ignoreTouchHover(document, selector)`
+listens in the capture phase and, while the last pointer was a finger
+(`pointerType: 'touch'`), stops those three events before any handler inside
+an element matching `selector` hears them. A mouse or a pen hovers as before
+(its first `pointermove` ends the touch), and `mouseout` / `mouseleave`
+always pass. After a tap, bubble-phase listeners over a toast no longer see the
+emulated `mouseover`, `mouseenter` and `mousemove`. It returns the function that
+removes its listeners.
+
+```ts
+import { ignoreTouchHover } from '@nxgt/material-core/touch-hover';
+
+const stop = ignoreTouchHover(document, '[data-sonner-toaster]');
+// …on unmount
+stop();
+```
+
+It also holds the two constants both libraries' `Toaster` share: `TOASTER_PHONE_QUERY`
+(`'(max-width: 600px)'`, the width under which sonner lays toasts out across the
+screen) and `TOASTER_PHONE_POSITION` (`'top-center'`, where toasts go on a phone
+when the caller names no `position`).
+
+### Zod issue messages: `/zod-issue-messages`
+
+The two libraries' zod error maps turn an issue into text in the language
+they resolved. The two issues with several shapes are formatted here:
+`sizeMessage(issue, { translate, lookup })` for `too_big` / `too_small` (a
+string reads as a length, anything else as a size with its unit) and
+`invalidFormatMessage(issue, { translate, lookup })` for `invalid_format`.
+`translate` returns the message at a key (the key itself when missing),
+`lookup` returns it or `undefined`. A zod issue is passed as is: core reads it
+by shape and has no zod dependency.
+
+```ts
+import { sizeMessage } from '@nxgt/material-core/zod-issue-messages';
+
+sizeMessage(issue, { translate, lookup }); // "Must contain at most 80 characters."
+```
+
+### A clickable table row: `/row-activation`
+
+A row whose first cell links to its page should follow that link on a click
+anywhere else on the row — but not on its checkbox or its buttons, not from
+a menu its cell opened into `<body>`, and not when the click ends a text
+selection. `isRowActivation` says whether a click is one; `followRowLink`
+clicks the row's link (`ROW_LINK_SELECTOR`) with the click's modifier keys,
+so a router's link navigates as it does on its own click. Both read the DOM
+when called, never at import.
+
+```ts
+import { followRowLink, isRowActivation } from '@nxgt/material-core/row-activation';
+
+row.addEventListener('click', (event) => {
+	if (isRowActivation(event, row)) followRowLink(row, event);
+});
+```
+
 ### Bundling pdfkit's fonts: `/vite`
 
 An SSR server bundled into a single file with no `node_modules` needs

package/dist/lib/described-by.d.ts

@@ -0,0 +1,6 @@
+/**
+ * An `aria-describedby` value: the caller's own ids first, then the field's
+ * (its help or error text), the falsy ones left out; `undefined` when none.
+ */
+export declare function describedBy(own?: string, ...ids: (string | undefined | false)[]): string | undefined;
+//# sourceMappingURL=described-by.d.ts.map

package/dist/lib/described-by.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"described-by.d.ts","sourceRoot":"","sources":["../../src/lib/described-by.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAC1B,GAAG,CAAC,EAAE,MAAM,EACZ,GAAG,GAAG,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,GACpC,MAAM,GAAG,SAAS,CAEpB"}

package/dist/lib/described-by.js

@@ -0,0 +1,10 @@
+// src/lib/described-by.ts
+function describedBy(own, ...ids) {
+  return [own, ...ids].filter(Boolean).join(" ") || undefined;
+}
+export {
+  describedBy
+};
+
+//# debugId=A732F6C9ECA1AE0864756E2164756E21
+//# sourceMappingURL=described-by.js.map

package/dist/lib/described-by.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/described-by.ts"],
+  "sourcesContent": [
+    "/**\n * An `aria-describedby` value: the caller's own ids first, then the field's\n * (its help or error text), the falsy ones left out; `undefined` when none.\n */\nexport function describedBy(\n\town?: string,\n\t...ids: (string | undefined | false)[]\n): string | undefined {\n\treturn [own, ...ids].filter(Boolean).join(' ') || undefined;\n}\n"
+  ],
+  "mappings": ";AAIO,SAAS,WAAW,CAC1B,QACG,KACkB;AAAA,EACrB,OAAO,CAAC,KAAK,GAAG,GAAG,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA;",
+  "debugId": "A732F6C9ECA1AE0864756E2164756E21",
+  "names": []
+}

package/dist/lib/escape-forward.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Escape pressed while an overlay is closing, handed on to the overlay below.
+ *
+ * Radix's and reka's `DismissableLayer` give Escape to the highest layer of
+ * their stack only, and a dialog's layer leaves that stack when its content
+ * unmounts — not when it closes. A content still on the page for its exit
+ * animation therefore takes every Escape pressed meanwhile and does nothing
+ * with it (it is already closed): the Sheet under a just-closed AlertDialog
+ * stays open, and the user has to press Escape again.
+ *
+ * Called from the content's `onEscapeKeyDown` (after the caller's own
+ * handler), `forwardEscape` does nothing unless `content` is closing
+ * (`data-state="closed"`) and the default was not prevented. Then it
+ * prevents the default (so the closing layer does nothing either) and
+ * presses Escape again — a new `keydown` on what has focus — once `content`
+ * has left the page and the layer below listens again. It returns whether
+ * it did.
+ */
+export declare function forwardEscape(content: HTMLElement | null | undefined, event: KeyboardEvent): boolean;
+//# sourceMappingURL=escape-forward.d.ts.map

package/dist/lib/escape-forward.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-forward.d.ts","sourceRoot":"","sources":["../../src/lib/escape-forward.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AA4BH,wBAAgB,aAAa,CAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EACvC,KAAK,EAAE,aAAa,GAClB,OAAO,CA6BT"}

package/dist/lib/escape-forward.js

@@ -0,0 +1,50 @@
+// src/lib/escape-forward.ts
+var MAX_FRAMES = 120;
+function keyInit(event) {
+  return {
+    key: event.key,
+    code: event.code,
+    location: event.location,
+    repeat: event.repeat,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  };
+}
+function forwardEscape(content, event) {
+  if (event.defaultPrevented || content?.dataset.state !== "closed") {
+    return false;
+  }
+  const document = content.ownerDocument;
+  const view = document.defaultView;
+  if (!view)
+    return false;
+  event.preventDefault();
+  const init = keyInit(event);
+  let frames = 0;
+  const tick = () => {
+    if (content.dataset.state !== "closed")
+      return;
+    if (content.isConnected) {
+      if (++frames < MAX_FRAMES)
+        view.requestAnimationFrame(tick);
+      return;
+    }
+    view.requestAnimationFrame(() => view.requestAnimationFrame(() => {
+      const target = document.activeElement ?? document.body;
+      target.dispatchEvent(new view.KeyboardEvent("keydown", init));
+    }));
+  };
+  view.requestAnimationFrame(tick);
+  return true;
+}
+export {
+  forwardEscape
+};
+
+//# debugId=6802D3D345478C3C64756E2164756E21
+//# sourceMappingURL=escape-forward.js.map

package/dist/lib/escape-forward.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/escape-forward.ts"],
+  "sourcesContent": [
+    "/**\n * Escape pressed while an overlay is closing, handed on to the overlay below.\n *\n * Radix's and reka's `DismissableLayer` give Escape to the highest layer of\n * their stack only, and a dialog's layer leaves that stack when its content\n * unmounts — not when it closes. A content still on the page for its exit\n * animation therefore takes every Escape pressed meanwhile and does nothing\n * with it (it is already closed): the Sheet under a just-closed AlertDialog\n * stays open, and the user has to press Escape again.\n *\n * Called from the content's `onEscapeKeyDown` (after the caller's own\n * handler), `forwardEscape` does nothing unless `content` is closing\n * (`data-state=\"closed\"`) and the default was not prevented. Then it\n * prevents the default (so the closing layer does nothing either) and\n * presses Escape again — a new `keydown` on what has focus — once `content`\n * has left the page and the layer below listens again. It returns whether\n * it did.\n */\n\n// A content that never leaves (a `forceMount`) stops being waited on: about\n// two seconds at 60 frames per second.\nconst MAX_FRAMES = 120;\n\n// The window of the content's document: its frames, and its `KeyboardEvent`\n// (an iframe's, when the content is in one).\ntype Frames = Pick<Window, 'requestAnimationFrame'> & {\n\tKeyboardEvent: typeof KeyboardEvent;\n};\n\nfunction keyInit(event: KeyboardEvent): KeyboardEventInit {\n\treturn {\n\t\tkey: event.key,\n\t\tcode: event.code,\n\t\tlocation: event.location,\n\t\trepeat: event.repeat,\n\t\taltKey: event.altKey,\n\t\tctrlKey: event.ctrlKey,\n\t\tmetaKey: event.metaKey,\n\t\tshiftKey: event.shiftKey,\n\t\tbubbles: true,\n\t\tcancelable: true,\n\t\tcomposed: true,\n\t};\n}\n\nexport function forwardEscape(\n\tcontent: HTMLElement | null | undefined,\n\tevent: KeyboardEvent,\n): boolean {\n\tif (event.defaultPrevented || content?.dataset.state !== 'closed') {\n\t\treturn false;\n\t}\n\tconst document = content.ownerDocument;\n\tconst view = document.defaultView as Frames | null;\n\tif (!view) return false;\n\tevent.preventDefault();\n\tconst init = keyInit(event);\n\tlet frames = 0;\n\tconst tick = () => {\n\t\t// Reopened meanwhile: it is a live layer again, and Escape is its own.\n\t\tif (content.dataset.state !== 'closed') return;\n\t\tif (content.isConnected) {\n\t\t\tif (++frames < MAX_FRAMES) view.requestAnimationFrame(tick);\n\t\t\treturn;\n\t\t}\n\t\t// The layer leaves the stack in an unmount cleanup; with Radix, the\n\t\t// layer below then re-renders and listens again in an effect of its\n\t\t// own. Two frames cover both.\n\t\tview.requestAnimationFrame(() =>\n\t\t\tview.requestAnimationFrame(() => {\n\t\t\t\tconst target = document.activeElement ?? document.body;\n\t\t\t\ttarget.dispatchEvent(new view.KeyboardEvent('keydown', init));\n\t\t\t}),\n\t\t);\n\t};\n\tview.requestAnimationFrame(tick);\n\treturn true;\n}\n"
+  ],
+  "mappings": ";AAqBA,IAAM,aAAa;AAQnB,SAAS,OAAO,CAAC,OAAyC;AAAA,EACzD,OAAO;AAAA,IACN,KAAK,MAAM;AAAA,IACX,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EACX;AAAA;AAGM,SAAS,aAAa,CAC5B,SACA,OACU;AAAA,EACV,IAAI,MAAM,oBAAoB,SAAS,QAAQ,UAAU,UAAU;AAAA,IAClE,OAAO;AAAA,EACR;AAAA,EACA,MAAM,WAAW,QAAQ;AAAA,EACzB,MAAM,OAAO,SAAS;AAAA,EACtB,IAAI,CAAC;AAAA,IAAM,OAAO;AAAA,EAClB,MAAM,eAAe;AAAA,EACrB,MAAM,OAAO,QAAQ,KAAK;AAAA,EAC1B,IAAI,SAAS;AAAA,EACb,MAAM,OAAO,MAAM;AAAA,IAElB,IAAI,QAAQ,QAAQ,UAAU;AAAA,MAAU;AAAA,IACxC,IAAI,QAAQ,aAAa;AAAA,MACxB,IAAI,EAAE,SAAS;AAAA,QAAY,KAAK,sBAAsB,IAAI;AAAA,MAC1D;AAAA,IACD;AAAA,IAIA,KAAK,sBAAsB,MAC1B,KAAK,sBAAsB,MAAM;AAAA,MAChC,MAAM,SAAS,SAAS,iBAAiB,SAAS;AAAA,MAClD,OAAO,cAAc,IAAI,KAAK,cAAc,WAAW,IAAI,CAAC;AAAA,KAC5D,CACF;AAAA;AAAA,EAED,KAAK,sBAAsB,IAAI;AAAA,EAC/B,OAAO;AAAA;",
+  "debugId": "6802D3D345478C3C64756E2164756E21",
+  "names": []
+}

package/dist/lib/focus-control.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The first control of `roots` a user can reach, in document order: one a
+ * user can Tab to that is rendered — not a `display: none` input a library
+ * keeps for forms. A root that is itself such a control is its own first
+ * control. `null` when none is. Reads the DOM when called.
+ */
+export declare function firstControl(roots: Iterable<Element>): HTMLElement | null;
+/** What a form library calls on the element a field registered. */
+export type FocusHandle = {
+    focus: () => void;
+    select: () => void;
+    setCustomValidity: (message: string) => void;
+    reportValidity: () => boolean;
+};
+/**
+ * A stand-in element for a field made of several controls, for a form
+ * library that focuses an invalid field by calling `focus()` on what the
+ * field registered (React Hook Form's `field.ref`). `focus()` focuses the
+ * first control of `roots` a user can reach, looked up when it is called —
+ * `roots` is read live, so pass the field's own set — and again a turn
+ * later when focus is not in the field by then: the error that triggered it
+ * may re-render the field and replace its control. `select()` selects that
+ * control's text when it has any. Native validation is not used:
+ * `setCustomValidity` does nothing and `reportValidity` returns `true`.
+ */
+export declare function focusHandle(roots: Iterable<Element>): FocusHandle;
+//# sourceMappingURL=focus-control.d.ts.map

package/dist/lib/focus-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-control.d.ts","sourceRoot":"","sources":["../../src/lib/focus-control.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,WAAW,GAAG,IAAI,CAUzE;AAED,mEAAmE;AACnE,MAAM,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,MAAM,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,WAAW,CAqBjE"}

package/dist/lib/focus-control.js

@@ -0,0 +1,43 @@
+// src/lib/focus-control.ts
+var TABBABLE = 'input:not([type="hidden"]):not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+function firstControl(roots) {
+  for (const root of roots) {
+    const controls = root.matches(TABBABLE) ? [root] : root.querySelectorAll(TABBABLE);
+    for (const control of controls) {
+      if (control.getClientRects().length)
+        return control;
+    }
+  }
+  return null;
+}
+function focusHandle(roots) {
+  return {
+    focus: () => {
+      firstControl(roots)?.focus();
+      setTimeout(() => {
+        const list = [...roots];
+        const active = list[0]?.ownerDocument.activeElement ?? null;
+        if (!list.some((root) => root.contains(active))) {
+          firstControl(list)?.focus();
+        }
+      });
+    },
+    select: () => {
+      const control = firstControl(roots);
+      if (control && "select" in control) {
+        control.select();
+      }
+    },
+    setCustomValidity: () => {
+      return;
+    },
+    reportValidity: () => true
+  };
+}
+export {
+  firstControl,
+  focusHandle
+};
+
+//# debugId=F6055B3989727FBE64756E2164756E21
+//# sourceMappingURL=focus-control.js.map

package/dist/lib/focus-control.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/focus-control.ts"],
+  "sourcesContent": [
+    "/** What a user can Tab to inside a field. */\nconst TABBABLE =\n\t'input:not([type=\"hidden\"]):not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), button:not(:disabled):not([tabindex=\"-1\"]), [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * The first control of `roots` a user can reach, in document order: one a\n * user can Tab to that is rendered — not a `display: none` input a library\n * keeps for forms. A root that is itself such a control is its own first\n * control. `null` when none is. Reads the DOM when called.\n */\nexport function firstControl(roots: Iterable<Element>): HTMLElement | null {\n\tfor (const root of roots) {\n\t\tconst controls = root.matches(TABBABLE)\n\t\t\t? [root as HTMLElement]\n\t\t\t: root.querySelectorAll<HTMLElement>(TABBABLE);\n\t\tfor (const control of controls) {\n\t\t\tif (control.getClientRects().length) return control;\n\t\t}\n\t}\n\treturn null;\n}\n\n/** What a form library calls on the element a field registered. */\nexport type FocusHandle = {\n\tfocus: () => void;\n\tselect: () => void;\n\tsetCustomValidity: (message: string) => void;\n\treportValidity: () => boolean;\n};\n\n/**\n * A stand-in element for a field made of several controls, for a form\n * library that focuses an invalid field by calling `focus()` on what the\n * field registered (React Hook Form's `field.ref`). `focus()` focuses the\n * first control of `roots` a user can reach, looked up when it is called —\n * `roots` is read live, so pass the field's own set — and again a turn\n * later when focus is not in the field by then: the error that triggered it\n * may re-render the field and replace its control. `select()` selects that\n * control's text when it has any. Native validation is not used:\n * `setCustomValidity` does nothing and `reportValidity` returns `true`.\n */\nexport function focusHandle(roots: Iterable<Element>): FocusHandle {\n\treturn {\n\t\tfocus: () => {\n\t\t\tfirstControl(roots)?.focus();\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst list = [...roots];\n\t\t\t\tconst active = list[0]?.ownerDocument.activeElement ?? null;\n\t\t\t\tif (!list.some((root) => root.contains(active))) {\n\t\t\t\t\tfirstControl(list)?.focus();\n\t\t\t\t}\n\t\t\t});\n\t\t},\n\t\tselect: () => {\n\t\t\tconst control = firstControl(roots);\n\t\t\tif (control && 'select' in control) {\n\t\t\t\t(control as HTMLInputElement).select();\n\t\t\t}\n\t\t},\n\t\tsetCustomValidity: () => undefined,\n\t\treportValidity: () => true,\n\t};\n}\n"
+  ],
+  "mappings": ";AACA,IAAM,WACL;AAQM,SAAS,YAAY,CAAC,OAA8C;AAAA,EAC1E,WAAW,QAAQ,OAAO;AAAA,IACzB,MAAM,WAAW,KAAK,QAAQ,QAAQ,IACnC,CAAC,IAAmB,IACpB,KAAK,iBAA8B,QAAQ;AAAA,IAC9C,WAAW,WAAW,UAAU;AAAA,MAC/B,IAAI,QAAQ,eAAe,EAAE;AAAA,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACD;AAAA,EACA,OAAO;AAAA;AAsBD,SAAS,WAAW,CAAC,OAAuC;AAAA,EAClE,OAAO;AAAA,IACN,OAAO,MAAM;AAAA,MACZ,aAAa,KAAK,GAAG,MAAM;AAAA,MAC3B,WAAW,MAAM;AAAA,QAChB,MAAM,OAAO,CAAC,GAAG,KAAK;AAAA,QACtB,MAAM,SAAS,KAAK,IAAI,cAAc,iBAAiB;AAAA,QACvD,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM,CAAC,GAAG;AAAA,UAChD,aAAa,IAAI,GAAG,MAAM;AAAA,QAC3B;AAAA,OACA;AAAA;AAAA,IAEF,QAAQ,MAAM;AAAA,MACb,MAAM,UAAU,aAAa,KAAK;AAAA,MAClC,IAAI,WAAW,YAAY,SAAS;AAAA,QAClC,QAA6B,OAAO;AAAA,MACtC;AAAA;AAAA,IAED,mBAAmB,MAAG;AAAA,MAAG;AAAA;AAAA,IACzB,gBAAgB,MAAM;AAAA,EACvB;AAAA;",
+  "debugId": "F6055B3989727FBE64756E2164756E21",
+  "names": []
+}

package/dist/lib/inert-others.d.ts

@@ -0,0 +1,20 @@
+/** The attribute on every element `inertOthers` made `inert`. */
+export declare const INERT_MARKER = "data-nxgt-inert";
+/**
+ * Makes everything in `<body>` but `target` (a modal layer's content) and
+ * `keep` `inert` — out of the tab order and out of the accessibility tree —
+ * and returns the undo. The elements marked are the siblings of `target`
+ * and of each of its ancestors, the ones `aria-hidden`'s `hideOthers` marks
+ * `aria-hidden`: live regions and scripts are kept too, and so are their
+ * ancestors. Every element is counted per layer, so nested layers (a select
+ * open in a dialog) undo in any order: an element stays inert while one
+ * layer that marked it is open. An element already `inert` is left as it
+ * was. Focus still on an element made inert goes to `target`, which a
+ * layer's content takes (`tabindex="-1"`). The undo runs once — by your
+ * call, or by itself when `target` leaves the document — and a second call
+ * does nothing. Elements mounted after the call are not made inert. Does nothing, and
+ * returns a no-op, when `target` is missing or not in its document's body
+ * (on the server). Reads and writes the DOM only when called.
+ */
+export declare function inertOthers(target: Element | null | undefined, keep?: Iterable<Element | null | undefined>): () => void;
+//# sourceMappingURL=inert-others.d.ts.map

package/dist/lib/inert-others.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inert-others.d.ts","sourceRoot":"","sources":["../../src/lib/inert-others.ts"],"names":[],"mappings":"AASA,iEAAiE;AACjE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AA6C9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAC1B,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAClC,IAAI,GAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAM,GAC7C,MAAM,IAAI,CAqCZ"}

package/dist/lib/inert-others.js

@@ -0,0 +1,116 @@
+// src/lib/inert-others.ts
+var KEEP = "[aria-live], script";
+var INERT_MARKER = "data-nxgt-inert";
+var counts = new WeakMap;
+var inertBefore = new WeakSet;
+function keptPath(targets, body) {
+  const kept = new Set;
+  for (const target of targets) {
+    for (let node = target;node && node !== body && !kept.has(node); node = node.parentNode) {
+      kept.add(node);
+    }
+  }
+  return kept;
+}
+function mark(element) {
+  const count = (counts.get(element) ?? 0) + 1;
+  counts.set(element, count);
+  if (count > 1)
+    return;
+  if (element.hasAttribute("inert")) {
+    inertBefore.add(element);
+    return;
+  }
+  element.setAttribute("inert", "");
+  element.setAttribute(INERT_MARKER, "");
+}
+function unmark(element) {
+  const count = (counts.get(element) ?? 1) - 1;
+  if (count > 0) {
+    counts.set(element, count);
+    return;
+  }
+  counts.delete(element);
+  if (inertBefore.delete(element))
+    return;
+  element.removeAttribute("inert");
+  element.removeAttribute(INERT_MARKER);
+}
+function inertOthers(target, keep = []) {
+  const body = target?.ownerDocument?.body;
+  if (!target || !body?.contains(target))
+    return () => {
+      return;
+    };
+  const targets = [
+    target,
+    ...[...keep].filter((element) => Boolean(element && body.contains(element))),
+    ...Array.from(body.querySelectorAll(KEEP))
+  ];
+  const kept = keptPath(targets, body);
+  const stops = new Set(targets);
+  const marked = [];
+  const active = target.ownerDocument.activeElement;
+  const visit = (parent) => {
+    for (const child of Array.from(parent.children)) {
+      if (stops.has(child))
+        continue;
+      if (kept.has(child)) {
+        visit(child);
+        continue;
+      }
+      mark(child);
+      marked.push(child);
+    }
+  };
+  visit(body);
+  let undone = false;
+  keepFocus(target, active, marked, () => !undone);
+  const undo = () => {
+    if (undone)
+      return;
+    undone = true;
+    watch?.disconnect();
+    for (const element of marked)
+      unmark(element);
+  };
+  const watch = watchRemoval(body, target, undo);
+  return undo;
+}
+function keepFocus(target, active, marked, open) {
+  const doc = target.ownerDocument;
+  if (!active || !marked.some((element) => element.contains(active)))
+    return;
+  queueMicrotask(() => {
+    if (!open() || target.contains(doc.activeElement))
+      return;
+    target.focus?.({ preventScroll: true });
+  });
+}
+function watchRemoval(body, target, undo) {
+  const Observer = body.ownerDocument.defaultView?.MutationObserver;
+  if (!Observer)
+    return;
+  const observer = new Observer(() => {
+    if (!target.isConnected)
+      return undo();
+    observer.disconnect();
+    observeAncestors(observer, body, target);
+  });
+  observeAncestors(observer, body, target);
+  return observer;
+}
+function observeAncestors(observer, body, target) {
+  for (let node = target.parentNode;node; node = node.parentNode) {
+    observer.observe(node, { childList: true });
+    if (node === body)
+      break;
+  }
+}
+export {
+  INERT_MARKER,
+  inertOthers
+};
+
+//# debugId=DB32588292C8994B64756E2164756E21
+//# sourceMappingURL=inert-others.js.map

package/dist/lib/inert-others.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/inert-others.ts"],
+  "sourcesContent": [
+    "/**\n * What stays reachable behind a modal layer, the selector `aria-hidden`'s\n * `hideOthers` keeps: elements with `aria-live` — a toaster announces what\n * happens while the layer is open, and its toasts stay usable — and scripts.\n * A `role=\"status\"` or `role=\"alert\"` without `aria-live` is not kept, as it\n * is not there.\n */\nconst KEEP = '[aria-live], script';\n\n/** The attribute on every element `inertOthers` made `inert`. */\nexport const INERT_MARKER = 'data-nxgt-inert';\n\n/** How many open layers made each element inert. */\nconst counts = new WeakMap<Element, number>();\n/** Elements that were already `inert` before the first layer: left as found. */\nconst inertBefore = new WeakSet<Element>();\n\nfunction keptPath(targets: Element[], body: Element): Set<Node> {\n\tconst kept = new Set<Node>();\n\tfor (const target of targets) {\n\t\tfor (\n\t\t\tlet node: Node | null = target;\n\t\t\tnode && node !== body && !kept.has(node);\n\t\t\tnode = node.parentNode\n\t\t) {\n\t\t\tkept.add(node);\n\t\t}\n\t}\n\treturn kept;\n}\n\nfunction mark(element: Element) {\n\tconst count = (counts.get(element) ?? 0) + 1;\n\tcounts.set(element, count);\n\tif (count > 1) return;\n\tif (element.hasAttribute('inert')) {\n\t\tinertBefore.add(element);\n\t\treturn;\n\t}\n\telement.setAttribute('inert', '');\n\telement.setAttribute(INERT_MARKER, '');\n}\n\nfunction unmark(element: Element) {\n\tconst count = (counts.get(element) ?? 1) - 1;\n\tif (count > 0) {\n\t\tcounts.set(element, count);\n\t\treturn;\n\t}\n\tcounts.delete(element);\n\tif (inertBefore.delete(element)) return;\n\telement.removeAttribute('inert');\n\telement.removeAttribute(INERT_MARKER);\n}\n\n/**\n * Makes everything in `<body>` but `target` (a modal layer's content) and\n * `keep` `inert` — out of the tab order and out of the accessibility tree —\n * and returns the undo. The elements marked are the siblings of `target`\n * and of each of its ancestors, the ones `aria-hidden`'s `hideOthers` marks\n * `aria-hidden`: live regions and scripts are kept too, and so are their\n * ancestors. Every element is counted per layer, so nested layers (a select\n * open in a dialog) undo in any order: an element stays inert while one\n * layer that marked it is open. An element already `inert` is left as it\n * was. Focus still on an element made inert goes to `target`, which a\n * layer's content takes (`tabindex=\"-1\"`). The undo runs once — by your\n * call, or by itself when `target` leaves the document — and a second call\n * does nothing. Elements mounted after the call are not made inert. Does nothing, and\n * returns a no-op, when `target` is missing or not in its document's body\n * (on the server). Reads and writes the DOM only when called.\n */\nexport function inertOthers(\n\ttarget: Element | null | undefined,\n\tkeep: Iterable<Element | null | undefined> = [],\n): () => void {\n\tconst body = target?.ownerDocument?.body;\n\tif (!target || !body?.contains(target)) return () => undefined;\n\tconst targets = [\n\t\ttarget,\n\t\t...[...keep].filter((element): element is Element =>\n\t\t\tBoolean(element && body.contains(element)),\n\t\t),\n\t\t...Array.from(body.querySelectorAll(KEEP)),\n\t];\n\tconst kept = keptPath(targets, body);\n\tconst stops = new Set<Node>(targets);\n\tconst marked: Element[] = [];\n\t// Read before anything turns inert: a browser may blur what it marks.\n\tconst active = target.ownerDocument.activeElement;\n\tconst visit = (parent: Element) => {\n\t\tfor (const child of Array.from(parent.children)) {\n\t\t\tif (stops.has(child)) continue;\n\t\t\tif (kept.has(child)) {\n\t\t\t\tvisit(child);\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tmark(child);\n\t\t\tmarked.push(child);\n\t\t}\n\t};\n\tvisit(body);\n\tlet undone = false;\n\tkeepFocus(target, active, marked, () => !undone);\n\tconst undo = () => {\n\t\tif (undone) return;\n\t\tundone = true;\n\t\twatch?.disconnect();\n\t\tfor (const element of marked) unmark(element);\n\t};\n\tconst watch = watchRemoval(body, target, undo);\n\treturn undo;\n}\n\n/**\n * Focus left on the page behind (an `onOpenAutoFocus` that prevented the\n * default) would be lost once it is inert: it goes to the layer instead, a\n * microtask later, unless something moved it into the layer by then (a\n * focus fallback of the layer's own).\n */\nfunction keepFocus(\n\ttarget: Element,\n\tactive: Element | null,\n\tmarked: Element[],\n\topen: () => boolean,\n) {\n\tconst doc = target.ownerDocument;\n\tif (!active || !marked.some((element) => element.contains(active))) return;\n\tqueueMicrotask(() => {\n\t\tif (!open() || target.contains(doc.activeElement)) return;\n\t\t(target as HTMLElement).focus?.({ preventScroll: true });\n\t});\n}\n\n/**\n * Calls `undo` once `target` leaves the document: Radix's Select drops its\n * content on close without detaching the ref a wrapper holds, so the\n * wrapper never hears it went. Only the children of `target`'s ancestors,\n * up to `body`, are watched: removing `target` or one of them is the only\n * way it leaves, and the rest of the page's mutations never wake it.\n */\nfunction watchRemoval(body: Element, target: Element, undo: () => void) {\n\tconst Observer = body.ownerDocument.defaultView?.MutationObserver;\n\tif (!Observer) return undefined;\n\tconst observer = new Observer(() => {\n\t\tif (!target.isConnected) return undo();\n\t\t// Re-parented: watch the ancestors it has now.\n\t\tobserver.disconnect();\n\t\tobserveAncestors(observer, body, target);\n\t});\n\tobserveAncestors(observer, body, target);\n\treturn observer;\n}\n\nfunction observeAncestors(\n\tobserver: MutationObserver,\n\tbody: Element,\n\ttarget: Element,\n) {\n\tfor (let node = target.parentNode; node; node = node.parentNode) {\n\t\tobserver.observe(node, { childList: true });\n\t\tif (node === body) break;\n\t}\n}\n"
+  ],
+  "mappings": ";AAOA,IAAM,OAAO;AAGN,IAAM,eAAe;AAG5B,IAAM,SAAS,IAAI;AAEnB,IAAM,cAAc,IAAI;AAExB,SAAS,QAAQ,CAAC,SAAoB,MAA0B;AAAA,EAC/D,MAAM,OAAO,IAAI;AAAA,EACjB,WAAW,UAAU,SAAS;AAAA,IAC7B,SACK,OAAoB,OACxB,QAAQ,SAAS,QAAQ,CAAC,KAAK,IAAI,IAAI,GACvC,OAAO,KAAK,YACX;AAAA,MACD,KAAK,IAAI,IAAI;AAAA,IACd;AAAA,EACD;AAAA,EACA,OAAO;AAAA;AAGR,SAAS,IAAI,CAAC,SAAkB;AAAA,EAC/B,MAAM,SAAS,OAAO,IAAI,OAAO,KAAK,KAAK;AAAA,EAC3C,OAAO,IAAI,SAAS,KAAK;AAAA,EACzB,IAAI,QAAQ;AAAA,IAAG;AAAA,EACf,IAAI,QAAQ,aAAa,OAAO,GAAG;AAAA,IAClC,YAAY,IAAI,OAAO;AAAA,IACvB;AAAA,EACD;AAAA,EACA,QAAQ,aAAa,SAAS,EAAE;AAAA,EAChC,QAAQ,aAAa,cAAc,EAAE;AAAA;AAGtC,SAAS,MAAM,CAAC,SAAkB;AAAA,EACjC,MAAM,SAAS,OAAO,IAAI,OAAO,KAAK,KAAK;AAAA,EAC3C,IAAI,QAAQ,GAAG;AAAA,IACd,OAAO,IAAI,SAAS,KAAK;AAAA,IACzB;AAAA,EACD;AAAA,EACA,OAAO,OAAO,OAAO;AAAA,EACrB,IAAI,YAAY,OAAO,OAAO;AAAA,IAAG;AAAA,EACjC,QAAQ,gBAAgB,OAAO;AAAA,EAC/B,QAAQ,gBAAgB,YAAY;AAAA;AAmB9B,SAAS,WAAW,CAC1B,QACA,OAA6C,CAAC,GACjC;AAAA,EACb,MAAM,OAAO,QAAQ,eAAe;AAAA,EACpC,IAAI,CAAC,UAAU,CAAC,MAAM,SAAS,MAAM;AAAA,IAAG,OAAO,MAAG;AAAA,MAAG;AAAA;AAAA,EACrD,MAAM,UAAU;AAAA,IACf;AAAA,IACA,GAAG,CAAC,GAAG,IAAI,EAAE,OAAO,CAAC,YACpB,QAAQ,WAAW,KAAK,SAAS,OAAO,CAAC,CAC1C;AAAA,IACA,GAAG,MAAM,KAAK,KAAK,iBAAiB,IAAI,CAAC;AAAA,EAC1C;AAAA,EACA,MAAM,OAAO,SAAS,SAAS,IAAI;AAAA,EACnC,MAAM,QAAQ,IAAI,IAAU,OAAO;AAAA,EACnC,MAAM,SAAoB,CAAC;AAAA,EAE3B,MAAM,SAAS,OAAO,cAAc;AAAA,EACpC,MAAM,QAAQ,CAAC,WAAoB;AAAA,IAClC,WAAW,SAAS,MAAM,KAAK,OAAO,QAAQ,GAAG;AAAA,MAChD,IAAI,MAAM,IAAI,KAAK;AAAA,QAAG;AAAA,MACtB,IAAI,KAAK,IAAI,KAAK,GAAG;AAAA,QACpB,MAAM,KAAK;AAAA,QACX;AAAA,MACD;AAAA,MACA,KAAK,KAAK;AAAA,MACV,OAAO,KAAK,KAAK;AAAA,IAClB;AAAA;AAAA,EAED,MAAM,IAAI;AAAA,EACV,IAAI,SAAS;AAAA,EACb,UAAU,QAAQ,QAAQ,QAAQ,MAAM,CAAC,MAAM;AAAA,EAC/C,MAAM,OAAO,MAAM;AAAA,IAClB,IAAI;AAAA,MAAQ;AAAA,IACZ,SAAS;AAAA,IACT,OAAO,WAAW;AAAA,IAClB,WAAW,WAAW;AAAA,MAAQ,OAAO,OAAO;AAAA;AAAA,EAE7C,MAAM,QAAQ,aAAa,MAAM,QAAQ,IAAI;AAAA,EAC7C,OAAO;AAAA;AASR,SAAS,SAAS,CACjB,QACA,QACA,QACA,MACC;AAAA,EACD,MAAM,MAAM,OAAO;AAAA,EACnB,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,YAAY,QAAQ,SAAS,MAAM,CAAC;AAAA,IAAG;AAAA,EACpE,eAAe,MAAM;AAAA,IACpB,IAAI,CAAC,KAAK,KAAK,OAAO,SAAS,IAAI,aAAa;AAAA,MAAG;AAAA,IAClD,OAAuB,QAAQ,EAAE,eAAe,KAAK,CAAC;AAAA,GACvD;AAAA;AAUF,SAAS,YAAY,CAAC,MAAe,QAAiB,MAAkB;AAAA,EACvE,MAAM,WAAW,KAAK,cAAc,aAAa;AAAA,EACjD,IAAI,CAAC;AAAA,IAAU;AAAA,EACf,MAAM,WAAW,IAAI,SAAS,MAAM;AAAA,IACnC,IAAI,CAAC,OAAO;AAAA,MAAa,OAAO,KAAK;AAAA,IAErC,SAAS,WAAW;AAAA,IACpB,iBAAiB,UAAU,MAAM,MAAM;AAAA,GACvC;AAAA,EACD,iBAAiB,UAAU,MAAM,MAAM;AAAA,EACvC,OAAO;AAAA;AAGR,SAAS,gBAAgB,CACxB,UACA,MACA,QACC;AAAA,EACD,SAAS,OAAO,OAAO,WAAY,MAAM,OAAO,KAAK,YAAY;AAAA,IAChE,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;AAAA,IAC1C,IAAI,SAAS;AAAA,MAAM;AAAA,EACpB;AAAA;",
+  "debugId": "DB32588292C8994B64756E2164756E21",
+  "names": []
+}

package/dist/lib/row-activation.d.ts

@@ -0,0 +1,30 @@
+/** What a click inside a row must not activate the row from: its controls
+ * (checkboxes, buttons, links, menus, fields) and anything marked
+ * `data-row-click-ignore`. */
+export declare const ROW_CONTROL_SELECTOR: string;
+/** The row's own link, which a click on the row follows: the element marked
+ * `data-slot="data-table-row-link"`, else the first link of the cell marked
+ * `data-row-link-cell` (for a link component that drops the `data-slot` it
+ * is given). */
+export declare const ROW_LINK_SELECTOR = "[data-slot=\"data-table-row-link\"],[data-row-link-cell] a[href]";
+/** The parts of a click this module reads. */
+export type RowClick = {
+    target: EventTarget | null;
+    button: number;
+    defaultPrevented: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+};
+/** Whether `event`, a click that reached `row`, activates the row: a primary
+ * click, not handled yet, inside the row's own DOM (not in a portal its
+ * cells opened), not on one of its controls, and not the end of a text
+ * selection in it. */
+export declare function isRowActivation(event: RowClick, row: Element): boolean;
+/** Follows the row's link (`ROW_LINK_SELECTOR`) as if it had been clicked,
+ * with the modifier keys of `event`: a router's link navigates as it does on
+ * its own click, Ctrl/Cmd+click opens a tab where the browser allows it.
+ * `false` when the row has no link. */
+export declare function followRowLink(row: Element, event: RowClick): boolean;
+//# sourceMappingURL=row-activation.d.ts.map

package/dist/lib/row-activation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-activation.d.ts","sourceRoot":"","sources":["../../src/lib/row-activation.ts"],"names":[],"mappings":"AAIA;;8BAE8B;AAC9B,eAAO,MAAM,oBAAoB,QAgBtB,CAAC;AAEZ;;;gBAGgB;AAChB,eAAO,MAAM,iBAAiB,qEACmC,CAAC;AAElE,8CAA8C;AAC9C,MAAM,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAMF;;;sBAGsB;AACtB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAgBtE;AAED;;;uCAGuC;AACvC,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,GAAG,OAAO,CAgBpE"}

package/dist/lib/row-activation.js

@@ -0,0 +1,62 @@
+// src/lib/row-activation.ts
+var ROW_CONTROL_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="switch"]',
+  '[role="combobox"]',
+  "[data-row-click-ignore]"
+].join(",");
+var ROW_LINK_SELECTOR = '[data-slot="data-table-row-link"],[data-row-link-cell] a[href]';
+function isElement(target) {
+  return target !== null && typeof target.closest === "function";
+}
+function isRowActivation(event, row) {
+  if (event.defaultPrevented || event.button !== 0)
+    return false;
+  const { target } = event;
+  if (!isElement(target) || !row.contains(target))
+    return false;
+  const control = target.closest(ROW_CONTROL_SELECTOR);
+  if (control && control !== row && row.contains(control))
+    return false;
+  const selection = row.ownerDocument?.getSelection?.();
+  if (selection && !selection.isCollapsed && selection.anchorNode && row.contains(selection.anchorNode)) {
+    return false;
+  }
+  return true;
+}
+function followRowLink(row, event) {
+  const link = row.querySelector(ROW_LINK_SELECTOR);
+  const view = row.ownerDocument?.defaultView;
+  if (!link || !view)
+    return false;
+  link.dispatchEvent(new view.MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey
+  }));
+  return true;
+}
+export {
+  ROW_CONTROL_SELECTOR,
+  ROW_LINK_SELECTOR,
+  followRowLink,
+  isRowActivation
+};
+
+//# debugId=B5C72BCA21047D6B64756E2164756E21
+//# sourceMappingURL=row-activation.js.map

package/dist/lib/row-activation.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/row-activation.ts"],
+  "sourcesContent": [
+    "// A clickable table row: a click anywhere on the row, but on a control of its\n// own, does what the row's link (or its click handler) does. Shared by both\n// libraries' `DataTable`. Reads the DOM only when called, never at import.\n\n/** What a click inside a row must not activate the row from: its controls\n * (checkboxes, buttons, links, menus, fields) and anything marked\n * `data-row-click-ignore`. */\nexport const ROW_CONTROL_SELECTOR = [\n\t'a[href]',\n\t'button',\n\t'input',\n\t'select',\n\t'textarea',\n\t'label',\n\t'summary',\n\t'[contenteditable=\"true\"]',\n\t'[role=\"button\"]',\n\t'[role=\"checkbox\"]',\n\t'[role=\"link\"]',\n\t'[role=\"menuitem\"]',\n\t'[role=\"switch\"]',\n\t'[role=\"combobox\"]',\n\t'[data-row-click-ignore]',\n].join(',');\n\n/** The row's own link, which a click on the row follows: the element marked\n * `data-slot=\"data-table-row-link\"`, else the first link of the cell marked\n * `data-row-link-cell` (for a link component that drops the `data-slot` it\n * is given). */\nexport const ROW_LINK_SELECTOR =\n\t'[data-slot=\"data-table-row-link\"],[data-row-link-cell] a[href]';\n\n/** The parts of a click this module reads. */\nexport type RowClick = {\n\ttarget: EventTarget | null;\n\tbutton: number;\n\tdefaultPrevented: boolean;\n\tctrlKey?: boolean;\n\tmetaKey?: boolean;\n\tshiftKey?: boolean;\n\taltKey?: boolean;\n};\n\nfunction isElement(target: EventTarget | null): target is Element {\n\treturn target !== null && typeof (target as Element).closest === 'function';\n}\n\n/** Whether `event`, a click that reached `row`, activates the row: a primary\n * click, not handled yet, inside the row's own DOM (not in a portal its\n * cells opened), not on one of its controls, and not the end of a text\n * selection in it. */\nexport function isRowActivation(event: RowClick, row: Element): boolean {\n\tif (event.defaultPrevented || event.button !== 0) return false;\n\tconst { target } = event;\n\tif (!isElement(target) || !row.contains(target)) return false;\n\tconst control = target.closest(ROW_CONTROL_SELECTOR);\n\tif (control && control !== row && row.contains(control)) return false;\n\tconst selection = row.ownerDocument?.getSelection?.();\n\tif (\n\t\tselection &&\n\t\t!selection.isCollapsed &&\n\t\tselection.anchorNode &&\n\t\trow.contains(selection.anchorNode)\n\t) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/** Follows the row's link (`ROW_LINK_SELECTOR`) as if it had been clicked,\n * with the modifier keys of `event`: a router's link navigates as it does on\n * its own click, Ctrl/Cmd+click opens a tab where the browser allows it.\n * `false` when the row has no link. */\nexport function followRowLink(row: Element, event: RowClick): boolean {\n\tconst link = row.querySelector(ROW_LINK_SELECTOR);\n\tconst view = row.ownerDocument?.defaultView;\n\tif (!link || !view) return false;\n\tlink.dispatchEvent(\n\t\tnew view.MouseEvent('click', {\n\t\t\tbubbles: true,\n\t\t\tcancelable: true,\n\t\t\tbutton: 0,\n\t\t\tctrlKey: event.ctrlKey,\n\t\t\tmetaKey: event.metaKey,\n\t\t\tshiftKey: event.shiftKey,\n\t\t\taltKey: event.altKey,\n\t\t}),\n\t);\n\treturn true;\n}\n"
+  ],
+  "mappings": ";AAOO,IAAM,uBAAuB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,EAAE,KAAK,GAAG;AAMH,IAAM,oBACZ;AAaD,SAAS,SAAS,CAAC,QAA+C;AAAA,EACjE,OAAO,WAAW,QAAQ,OAAQ,OAAmB,YAAY;AAAA;AAO3D,SAAS,eAAe,CAAC,OAAiB,KAAuB;AAAA,EACvE,IAAI,MAAM,oBAAoB,MAAM,WAAW;AAAA,IAAG,OAAO;AAAA,EACzD,QAAQ,WAAW;AAAA,EACnB,IAAI,CAAC,UAAU,MAAM,KAAK,CAAC,IAAI,SAAS,MAAM;AAAA,IAAG,OAAO;AAAA,EACxD,MAAM,UAAU,OAAO,QAAQ,oBAAoB;AAAA,EACnD,IAAI,WAAW,YAAY,OAAO,IAAI,SAAS,OAAO;AAAA,IAAG,OAAO;AAAA,EAChE,MAAM,YAAY,IAAI,eAAe,eAAe;AAAA,EACpD,IACC,aACA,CAAC,UAAU,eACX,UAAU,cACV,IAAI,SAAS,UAAU,UAAU,GAChC;AAAA,IACD,OAAO;AAAA,EACR;AAAA,EACA,OAAO;AAAA;AAOD,SAAS,aAAa,CAAC,KAAc,OAA0B;AAAA,EACrE,MAAM,OAAO,IAAI,cAAc,iBAAiB;AAAA,EAChD,MAAM,OAAO,IAAI,eAAe;AAAA,EAChC,IAAI,CAAC,QAAQ,CAAC;AAAA,IAAM,OAAO;AAAA,EAC3B,KAAK,cACJ,IAAI,KAAK,WAAW,SAAS;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA,EACf,CAAC,CACF;AAAA,EACA,OAAO;AAAA;",
+  "debugId": "B5C72BCA21047D6B64756E2164756E21",
+  "names": []
+}

package/dist/lib/touch-hover.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A phone, as sonner sees one: under 600px wide it lays the toasts out
+ * across the whole width (`@media (max-width: 600px)` in its styles).
+ */
+export declare const TOASTER_PHONE_QUERY = "(max-width: 600px)";
+/** Where toasts go on a phone when the caller names no `position`. */
+export declare const TOASTER_PHONE_POSITION = "top-center";
+type Listen = Pick<Document, 'addEventListener' | 'removeEventListener'>;
+/**
+ * Keeps a tap from hovering whatever matches `selector`: while the last
+ * pointer was a finger (`pointerType: 'touch'`), the hover events the browser
+ * emulates for it (`mouseover`, `mouseenter`, `mousemove`) stop at `doc`, in
+ * the capture phase, before any handler inside the matching element hears
+ * them. A mouse or a pen hovers as before: its first `pointermove` ends the
+ * touch. `mouseout` and `mouseleave` always pass, so a hover that did start
+ * still ends.
+ *
+ * Toasts pause while hovered (WCAG 2.2.1), and a tap on one used to leave it
+ * "hovered", so paused, until the next tap elsewhere. Returns the function
+ * that removes the listeners; nothing is read before an event arrives.
+ */
+export declare function ignoreTouchHover(doc: Listen, selector: string): () => void;
+export {};
+//# sourceMappingURL=touch-hover.d.ts.map

package/dist/lib/touch-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-hover.d.ts","sourceRoot":"","sources":["../../src/lib/touch-hover.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,sBAAsB,eAAe,CAAC;AAYnD,KAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;AAEzE;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,IAAI,CAqB1E"}

package/dist/lib/touch-hover.js

@@ -0,0 +1,39 @@
+// src/lib/touch-hover.ts
+var TOASTER_PHONE_QUERY = "(max-width: 600px)";
+var TOASTER_PHONE_POSITION = "top-center";
+var HOVER_EVENTS = ["mouseover", "mouseenter", "mousemove"];
+var POINTER_EVENTS = ["pointerdown", "pointermove", "pointerup"];
+function ignoreTouchHover(doc, selector) {
+  let touch = false;
+  const onPointer = (event) => {
+    touch = event.pointerType === "touch";
+  };
+  const onHover = (event) => {
+    if (!touch)
+      return;
+    const target = event.target;
+    if (typeof target?.closest !== "function")
+      return;
+    if (target.closest(selector))
+      event.stopPropagation();
+  };
+  const options = { capture: true, passive: true };
+  for (const type of POINTER_EVENTS)
+    doc.addEventListener(type, onPointer, options);
+  for (const type of HOVER_EVENTS)
+    doc.addEventListener(type, onHover, options);
+  return () => {
+    for (const type of POINTER_EVENTS)
+      doc.removeEventListener(type, onPointer, options);
+    for (const type of HOVER_EVENTS)
+      doc.removeEventListener(type, onHover, options);
+  };
+}
+export {
+  TOASTER_PHONE_POSITION,
+  TOASTER_PHONE_QUERY,
+  ignoreTouchHover
+};
+
+//# debugId=F1500A469841898064756E2164756E21
+//# sourceMappingURL=touch-hover.js.map

package/dist/lib/touch-hover.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/touch-hover.ts"],
+  "sourcesContent": [
+    "/**\n * A phone, as sonner sees one: under 600px wide it lays the toasts out\n * across the whole width (`@media (max-width: 600px)` in its styles).\n */\nexport const TOASTER_PHONE_QUERY = '(max-width: 600px)';\n\n/** Where toasts go on a phone when the caller names no `position`. */\nexport const TOASTER_PHONE_POSITION = 'top-center';\n\n/**\n * The mouse events a browser emulates after a tap (\"compatibility mouse\n * events\"): a tap reads as a mouse arriving over what was tapped and staying\n * there, with no `mouseleave` until the next tap lands somewhere else.\n */\nconst HOVER_EVENTS = ['mouseover', 'mouseenter', 'mousemove'] as const;\n\n/** The pointer events that say which kind of pointer is in use. */\nconst POINTER_EVENTS = ['pointerdown', 'pointermove', 'pointerup'] as const;\n\ntype Listen = Pick<Document, 'addEventListener' | 'removeEventListener'>;\n\n/**\n * Keeps a tap from hovering whatever matches `selector`: while the last\n * pointer was a finger (`pointerType: 'touch'`), the hover events the browser\n * emulates for it (`mouseover`, `mouseenter`, `mousemove`) stop at `doc`, in\n * the capture phase, before any handler inside the matching element hears\n * them. A mouse or a pen hovers as before: its first `pointermove` ends the\n * touch. `mouseout` and `mouseleave` always pass, so a hover that did start\n * still ends.\n *\n * Toasts pause while hovered (WCAG 2.2.1), and a tap on one used to leave it\n * \"hovered\", so paused, until the next tap elsewhere. Returns the function\n * that removes the listeners; nothing is read before an event arrives.\n */\nexport function ignoreTouchHover(doc: Listen, selector: string): () => void {\n\tlet touch = false;\n\tconst onPointer = (event: Event) => {\n\t\ttouch = (event as PointerEvent).pointerType === 'touch';\n\t};\n\tconst onHover = (event: Event) => {\n\t\tif (!touch) return;\n\t\tconst target = event.target as Partial<Element> | null;\n\t\tif (typeof target?.closest !== 'function') return;\n\t\tif (target.closest(selector)) event.stopPropagation();\n\t};\n\tconst options = { capture: true, passive: true };\n\tfor (const type of POINTER_EVENTS)\n\t\tdoc.addEventListener(type, onPointer, options);\n\tfor (const type of HOVER_EVENTS) doc.addEventListener(type, onHover, options);\n\treturn () => {\n\t\tfor (const type of POINTER_EVENTS)\n\t\t\tdoc.removeEventListener(type, onPointer, options);\n\t\tfor (const type of HOVER_EVENTS)\n\t\t\tdoc.removeEventListener(type, onHover, options);\n\t};\n}\n"
+  ],
+  "mappings": ";AAIO,IAAM,sBAAsB;AAG5B,IAAM,yBAAyB;AAOtC,IAAM,eAAe,CAAC,aAAa,cAAc,WAAW;AAG5D,IAAM,iBAAiB,CAAC,eAAe,eAAe,WAAW;AAiB1D,SAAS,gBAAgB,CAAC,KAAa,UAA8B;AAAA,EAC3E,IAAI,QAAQ;AAAA,EACZ,MAAM,YAAY,CAAC,UAAiB;AAAA,IACnC,QAAS,MAAuB,gBAAgB;AAAA;AAAA,EAEjD,MAAM,UAAU,CAAC,UAAiB;AAAA,IACjC,IAAI,CAAC;AAAA,MAAO;AAAA,IACZ,MAAM,SAAS,MAAM;AAAA,IACrB,IAAI,OAAO,QAAQ,YAAY;AAAA,MAAY;AAAA,IAC3C,IAAI,OAAO,QAAQ,QAAQ;AAAA,MAAG,MAAM,gBAAgB;AAAA;AAAA,EAErD,MAAM,UAAU,EAAE,SAAS,MAAM,SAAS,KAAK;AAAA,EAC/C,WAAW,QAAQ;AAAA,IAClB,IAAI,iBAAiB,MAAM,WAAW,OAAO;AAAA,EAC9C,WAAW,QAAQ;AAAA,IAAc,IAAI,iBAAiB,MAAM,SAAS,OAAO;AAAA,EAC5E,OAAO,MAAM;AAAA,IACZ,WAAW,QAAQ;AAAA,MAClB,IAAI,oBAAoB,MAAM,WAAW,OAAO;AAAA,IACjD,WAAW,QAAQ;AAAA,MAClB,IAAI,oBAAoB,MAAM,SAAS,OAAO;AAAA;AAAA;",
+  "debugId": "F1500A469841898064756E2164756E21",
+  "names": []
+}

package/dist/lib/zod-issue-messages.d.ts

@@ -0,0 +1,39 @@
+/** The values a message interpolates (a count, a unit, a pattern…). */
+export type IssueContext = Record<string, string | number>;
+/**
+ * The part of a zod issue these messages read, by shape: core has no zod
+ * dependency, and a zod issue is assignable to it.
+ */
+export type ZodIssueShape = {
+    code: string;
+    origin?: string;
+    inclusive?: boolean;
+    maximum?: unknown;
+    minimum?: unknown;
+    format?: string;
+    prefix?: unknown;
+    suffix?: unknown;
+    includes?: unknown;
+    pattern?: unknown;
+};
+/** How `zodLocaleError` formats one issue in the language it resolved. */
+export type IssueText = {
+    /** The message at `key` (the key itself when the bundle lacks it). */
+    translate: (key: string, context?: IssueContext) => string;
+    /** The message at `key`, or `undefined` when the bundle lacks it. */
+    lookup: (key: string, context?: IssueContext) => string | undefined;
+};
+/**
+ * A `too_big` or `too_small` issue. A string reads as a length ("Must
+ * contain at most 80 characters.", the count passed as a number so the
+ * message can pluralize it); anything else (a number, a list, a set, a file)
+ * as a size, with its unit when `material.zod.sizing.<origin>.unit` has one.
+ */
+export declare function sizeMessage(issue: ZodIssueShape, { translate, lookup }: IssueText): string;
+/**
+ * An `invalid_format` issue: a prefix, a suffix, an included text or a
+ * pattern is named; any other format (`email`, `url`, …) by its noun, which
+ * opens the sentence ("{noun} invalide.") and so is capitalized.
+ */
+export declare function invalidFormatMessage(issue: ZodIssueShape, { translate, lookup }: IssueText): string;
+//# sourceMappingURL=zod-issue-messages.d.ts.map

package/dist/lib/zod-issue-messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zod-issue-messages.d.ts","sourceRoot":"","sources":["../../src/lib/zod-issue-messages.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG;IACvB,sEAAsE;IACtE,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,CAAC;IAC3D,qEAAqE;IACrE,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC;CACpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,aAAa,EACpB,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,UAmBhC;AAWD;;;;GAIG;AACH,wBAAgB,oBAAoB,CACnC,KAAK,EAAE,aAAa,EACpB,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,UAYhC"}

package/dist/lib/zod-issue-messages.js

@@ -0,0 +1,44 @@
+// src/lib/zod-issue-messages.ts
+function sizeMessage(issue, { translate, lookup }) {
+  const code = issue.code === "too_big" ? "too_big" : "too_small";
+  const bound = code === "too_big" ? "maximum" : "minimum";
+  const adj = issue.inclusive ? "inclusive" : "exclusive";
+  if (issue.origin === "string") {
+    const text = lookup(`material.zod.${code}_string_${adj}`, {
+      [bound]: Number(issue[bound])
+    });
+    if (text)
+      return text;
+  }
+  const unit = lookup(`material.zod.sizing.${issue.origin}.unit`);
+  const context = {
+    origin: issue.origin ?? "value",
+    [bound]: String(issue[bound])
+  };
+  return unit ? translate(`material.zod.${code}_${adj}`, { ...context, unit }) : translate(`material.zod.${code}_no_unit_${adj}`, context);
+}
+var FORMAT_VALUES = {
+  starts_with: "prefix",
+  ends_with: "suffix",
+  includes: "includes",
+  regex: "pattern"
+};
+function invalidFormatMessage(issue, { translate, lookup }) {
+  const format = issue.format ?? "";
+  const value = FORMAT_VALUES[format];
+  if (value) {
+    return translate(`material.zod.invalid_format.${format}`, {
+      [value]: String(issue[value])
+    });
+  }
+  const noun = lookup(`material.zod.nouns.${format}`) ?? format;
+  const message = translate("material.zod.invalid_format.default", { noun });
+  return message.charAt(0).toLocaleUpperCase() + message.slice(1);
+}
+export {
+  invalidFormatMessage,
+  sizeMessage
+};
+
+//# debugId=5949BD7BC175EE9164756E2164756E21
+//# sourceMappingURL=zod-issue-messages.js.map

package/dist/lib/zod-issue-messages.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/lib/zod-issue-messages.ts"],
+  "sourcesContent": [
+    "/** The values a message interpolates (a count, a unit, a pattern…). */\nexport type IssueContext = Record<string, string | number>;\n\n/**\n * The part of a zod issue these messages read, by shape: core has no zod\n * dependency, and a zod issue is assignable to it.\n */\nexport type ZodIssueShape = {\n\tcode: string;\n\torigin?: string;\n\tinclusive?: boolean;\n\tmaximum?: unknown;\n\tminimum?: unknown;\n\tformat?: string;\n\tprefix?: unknown;\n\tsuffix?: unknown;\n\tincludes?: unknown;\n\tpattern?: unknown;\n};\n\n/** How `zodLocaleError` formats one issue in the language it resolved. */\nexport type IssueText = {\n\t/** The message at `key` (the key itself when the bundle lacks it). */\n\ttranslate: (key: string, context?: IssueContext) => string;\n\t/** The message at `key`, or `undefined` when the bundle lacks it. */\n\tlookup: (key: string, context?: IssueContext) => string | undefined;\n};\n\n/**\n * A `too_big` or `too_small` issue. A string reads as a length (\"Must\n * contain at most 80 characters.\", the count passed as a number so the\n * message can pluralize it); anything else (a number, a list, a set, a file)\n * as a size, with its unit when `material.zod.sizing.<origin>.unit` has one.\n */\nexport function sizeMessage(\n\tissue: ZodIssueShape,\n\t{ translate, lookup }: IssueText,\n) {\n\tconst code = issue.code === 'too_big' ? 'too_big' : 'too_small';\n\tconst bound = code === 'too_big' ? 'maximum' : 'minimum';\n\tconst adj = issue.inclusive ? 'inclusive' : 'exclusive';\n\tif (issue.origin === 'string') {\n\t\tconst text = lookup(`material.zod.${code}_string_${adj}`, {\n\t\t\t[bound]: Number(issue[bound]),\n\t\t});\n\t\tif (text) return text;\n\t}\n\tconst unit = lookup(`material.zod.sizing.${issue.origin}.unit`);\n\tconst context = {\n\t\torigin: issue.origin ?? 'value',\n\t\t[bound]: String(issue[bound]),\n\t};\n\treturn unit\n\t\t? translate(`material.zod.${code}_${adj}`, { ...context, unit })\n\t\t: translate(`material.zod.${code}_no_unit_${adj}`, context);\n}\n\n/** The value each `invalid_format` message of a fixed shape interpolates. */\ntype FormatValue = 'prefix' | 'suffix' | 'includes' | 'pattern';\nconst FORMAT_VALUES: Record<string, FormatValue> = {\n\tstarts_with: 'prefix',\n\tends_with: 'suffix',\n\tincludes: 'includes',\n\tregex: 'pattern',\n};\n\n/**\n * An `invalid_format` issue: a prefix, a suffix, an included text or a\n * pattern is named; any other format (`email`, `url`, …) by its noun, which\n * opens the sentence (\"{noun} invalide.\") and so is capitalized.\n */\nexport function invalidFormatMessage(\n\tissue: ZodIssueShape,\n\t{ translate, lookup }: IssueText,\n) {\n\tconst format = issue.format ?? '';\n\tconst value = FORMAT_VALUES[format];\n\tif (value) {\n\t\treturn translate(`material.zod.invalid_format.${format}`, {\n\t\t\t[value]: String(issue[value as FormatValue]),\n\t\t});\n\t}\n\tconst noun = lookup(`material.zod.nouns.${format}`) ?? format;\n\tconst message = translate('material.zod.invalid_format.default', { noun });\n\treturn message.charAt(0).toLocaleUpperCase() + message.slice(1);\n}\n"
+  ],
+  "mappings": ";AAkCO,SAAS,WAAW,CAC1B,SACE,WAAW,UACZ;AAAA,EACD,MAAM,OAAO,MAAM,SAAS,YAAY,YAAY;AAAA,EACpD,MAAM,QAAQ,SAAS,YAAY,YAAY;AAAA,EAC/C,MAAM,MAAM,MAAM,YAAY,cAAc;AAAA,EAC5C,IAAI,MAAM,WAAW,UAAU;AAAA,IAC9B,MAAM,OAAO,OAAO,gBAAgB,eAAe,OAAO;AAAA,OACxD,QAAQ,OAAO,MAAM,MAAM;AAAA,IAC7B,CAAC;AAAA,IACD,IAAI;AAAA,MAAM,OAAO;AAAA,EAClB;AAAA,EACA,MAAM,OAAO,OAAO,uBAAuB,MAAM,aAAa;AAAA,EAC9D,MAAM,UAAU;AAAA,IACf,QAAQ,MAAM,UAAU;AAAA,KACvB,QAAQ,OAAO,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,OACJ,UAAU,gBAAgB,QAAQ,OAAO,KAAK,SAAS,KAAK,CAAC,IAC7D,UAAU,gBAAgB,gBAAgB,OAAO,OAAO;AAAA;AAK5D,IAAM,gBAA6C;AAAA,EAClD,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AACR;AAOO,SAAS,oBAAoB,CACnC,SACE,WAAW,UACZ;AAAA,EACD,MAAM,SAAS,MAAM,UAAU;AAAA,EAC/B,MAAM,QAAQ,cAAc;AAAA,EAC5B,IAAI,OAAO;AAAA,IACV,OAAO,UAAU,+BAA+B,UAAU;AAAA,OACxD,QAAQ,OAAO,MAAM,MAAqB;AAAA,IAC5C,CAAC;AAAA,EACF;AAAA,EACA,MAAM,OAAO,OAAO,sBAAsB,QAAQ,KAAK;AAAA,EACvD,MAAM,UAAU,UAAU,uCAAuC,EAAE,KAAK,CAAC;AAAA,EACzE,OAAO,QAAQ,OAAO,CAAC,EAAE,kBAAkB,IAAI,QAAQ,MAAM,CAAC;AAAA;",
+  "debugId": "5949BD7BC175EE9164756E2164756E21",
+  "names": []
+}

package/docs/roadmap.md

@@ -31,6 +31,29 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **A field's first reachable control** (`/focus-control`) — the control of a
+  field made of several a user can reach, and a stand-in a form library can
+  focus, so both libraries focus the first invalid field. 0.5.0.
+- **A field's `aria-describedby`** (`/described-by`) — the caller's ids and
+  the field's help or error ids joined into one value, for both libraries'
+  text-like fields. 0.5.0.
+- **The page behind a modal layer made inert** (`/inert-others`) — everything
+  but the layer out of the tab order and the accessibility tree, live
+  regions kept, nested layers counted, for both libraries' dialogs, sheets,
+  drawers, selects and menus. 0.5.0.
+- **Escape while an overlay closes** (`/escape-forward`) — an Escape pressed
+  during a layer's exit animation pressed again for the layer below once it
+  has gone, for both libraries' dialogs, sheets and drawers. 0.5.0.
+- **A tap that does not hover** (`/touch-hover`) — a browser's emulated hover
+  after a tap ignored, so a toast a finger touched does not stay paused, and
+  where the `Toaster` puts toasts on a phone. 0.5.0.
+- **Zod issue messages** (`/zod-issue-messages`) — the translated text of a
+  zod size or format issue, which both libraries' zod error maps read from
+  here. 0.5.0.
+- **Clickable table rows** (`/row-activation`) — whether a click on a row
+  should follow its link (not on a control, not in a portal, not the end of
+  a text selection) and following it with the click's modifier keys, for
+  both libraries' `DataTable`. 0.4.0.
 - **Date range presets and times** (`/date-range`) — the built-in presets'
   ranges, whether a field's rules rule a range out, and the time of day on
   each end, for both libraries' `DateRangeField`. 0.3.0.

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nxgt/material-core",
-	"version": "0.3.2",
-	"description": "The framework-free core of @nxgt/material and @nxgt/material-vue: the PDF document model and its react-pdf renderer, print formatters, PDF file helpers, the PDF viewer's pure modules, the currency digits, the file-size formatter, the field-blur layers, the date range presets, the file preview's kind detection and text reader, the pdfkit fonts Vite plugin and the Node-only pdfkit fonts resolution for Next.js and Nuxt builds",
+	"version": "0.5.0",
+	"description": "The framework-free core of @nxgt/material and @nxgt/material-vue: the PDF document model and its react-pdf renderer, print formatters, PDF file helpers, the PDF viewer's pure modules, the currency digits, the file-size formatter, the field-blur layers, a field's first focusable control, the aria-describedby joiner, the inert background of a modal layer, Escape forwarded while an overlay closes, the Toaster's touch-hover guard, the zod issue messages, the date range presets, the file preview's kind detection and text reader, the pdfkit fonts Vite plugin and the Node-only pdfkit fonts resolution for Next.js and Nuxt builds",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -93,6 +93,41 @@
 			"import": "./dist/lib/field-blur-layers.js",
 			"default": "./dist/lib/field-blur-layers.js"
 		},
+		"./focus-control": {
+			"types": "./dist/lib/focus-control.d.ts",
+			"import": "./dist/lib/focus-control.js",
+			"default": "./dist/lib/focus-control.js"
+		},
+		"./escape-forward": {
+			"types": "./dist/lib/escape-forward.d.ts",
+			"import": "./dist/lib/escape-forward.js",
+			"default": "./dist/lib/escape-forward.js"
+		},
+		"./described-by": {
+			"types": "./dist/lib/described-by.d.ts",
+			"import": "./dist/lib/described-by.js",
+			"default": "./dist/lib/described-by.js"
+		},
+		"./touch-hover": {
+			"types": "./dist/lib/touch-hover.d.ts",
+			"import": "./dist/lib/touch-hover.js",
+			"default": "./dist/lib/touch-hover.js"
+		},
+		"./zod-issue-messages": {
+			"types": "./dist/lib/zod-issue-messages.d.ts",
+			"import": "./dist/lib/zod-issue-messages.js",
+			"default": "./dist/lib/zod-issue-messages.js"
+		},
+		"./inert-others": {
+			"types": "./dist/lib/inert-others.d.ts",
+			"import": "./dist/lib/inert-others.js",
+			"default": "./dist/lib/inert-others.js"
+		},
+		"./row-activation": {
+			"types": "./dist/lib/row-activation.d.ts",
+			"import": "./dist/lib/row-activation.js",
+			"default": "./dist/lib/row-activation.js"
+		},
 		"./format-file-size": {
 			"types": "./dist/lib/format-file-size.d.ts",
 			"import": "./dist/lib/format-file-size.js",
@@ -172,6 +207,13 @@
 			"src/lib/pdf-download.ts",
 			"src/lib/currency-digits.ts",
 			"src/lib/field-blur-layers.ts",
+			"src/lib/focus-control.ts",
+			"src/lib/escape-forward.ts",
+			"src/lib/described-by.ts",
+			"src/lib/touch-hover.ts",
+			"src/lib/zod-issue-messages.ts",
+			"src/lib/inert-others.ts",
+			"src/lib/row-activation.ts",
 			"src/lib/format-file-size.ts",
 			"src/lib/slider-ticks.ts",
 			"src/lib/date-range.ts",