@nxgt/material-vue 0.36.0 → 0.37.1

package/dist/{pdf-outline-sidebar-Gmdd3RNG.js → pdf-outline-sidebar-DJJ-ARco.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Bf as n } from "./components-D56FEfTa.js";
+import { Bf as n } from "./components--v_k8diD.js";
 import { t as r } from "./use-material-translation-DRB6oPdF.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-outline-row.vue?vue&type=script&setup=true&lang.ts

package/dist/{pdf-page-C3XhLcrp.js → pdf-page-CRt6KXdJ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Up as t } from "./components-D56FEfTa.js";
+import { Up as t } from "./components--v_k8diD.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, openBlock as f, ref as p, shallowRef as m, unref as h, watch as g } from "vue";
 import { DEFAULT_PAGE_SIZE as _, escapeHtml as v, findTextMatches as y, highlightItemHtml as b, placeholderSize as x, rotatedSize as S } from "@nxgt/material-core/pdf-viewer";
 //#region lib/components/ui/media/pdf-viewer/pdf-note-icons.ts

package/dist/{pdf-page-list-BTIb5Y-Y.js → pdf-page-list-BgCp5Asx.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Bf as t } from "./components-D56FEfTa.js";
-import { t as n } from "./pdf-page-C3XhLcrp.js";
+import { Bf as t } from "./components--v_k8diD.js";
+import { t as n } from "./pdf-page-CRt6KXdJ.js";
 import { Fragment as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, renderList as l, withCtx as u } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-page-list.vue?vue&type=script&setup=true&lang.ts
 var d = { class: "flex flex-col items-center gap-4 px-4 py-4" }, f = /*@__PURE__*/ s({

package/dist/{pdf-reader-CX2owreo.js → pdf-reader-BGxqEx8O.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components-D56FEfTa.js";
+import { kn as t } from "./components--v_k8diD.js";
 import { t as n } from "./use-material-translation-DRB6oPdF.js";
 import { t as r } from "./Button-CurFF4Zt.js";
-import { o as i } from "./HoverCardTrigger-C3r0oc5d.js";
-import { n as a } from "./pdf-page-C3XhLcrp.js";
-import { t as o } from "./pdf-page-list-BTIb5Y-Y.js";
-import { t as s } from "./pdf-sidebar-BmAJ8Q_m.js";
-import { t as c } from "./pdf-toolbar-zI0_eNXV.js";
+import { o as i } from "./HoverCardTrigger-jCXl6TrX.js";
+import { n as a } from "./pdf-page-CRt6KXdJ.js";
+import { t as o } from "./pdf-page-list-BgCp5Asx.js";
+import { t as s } from "./pdf-sidebar-Cvtuomgp.js";
+import { t as c } from "./pdf-toolbar-BtXcyEpd.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, onBeforeUnmount as y, onMounted as b, openBlock as x, reactive as S, ref as C, shallowRef as w, toDisplayString as T, toRef as E, unref as D, useId as O, watch as k, withCtx as A } from "vue";
 import { AlertCircle as j, FileX2 as M, KeyRound as N, Loader2 as P } from "@lucide/vue";
 import { pdfSourceKey as F, toPdfjsParams as I } from "@nxgt/material-core/pdf-source";

package/dist/{pdf-sidebar-BmAJ8Q_m.js → pdf-sidebar-Cvtuomgp.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
 import { t as n } from "./use-material-translation-DRB6oPdF.js";
-import { t as r } from "./pdf-outline-sidebar-Gmdd3RNG.js";
-import { t as i } from "./pdf-thumbnail-sidebar-C04OeZ9M.js";
+import { t as r } from "./pdf-outline-sidebar-DJJ-ARco.js";
+import { t as i } from "./pdf-thumbnail-sidebar-CeWPs7o7.js";
 import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, toDisplayString as d, unref as f, useId as p, useTemplateRef as m } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-sidebar.vue?vue&type=script&setup=true&lang.ts
 var h = ["aria-label"], g = ["aria-label"], _ = [

package/dist/{pdf-thumbnail-sidebar-C04OeZ9M.js → pdf-thumbnail-sidebar-CeWPs7o7.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Bf as n } from "./components-D56FEfTa.js";
+import { Bf as n } from "./components--v_k8diD.js";
 import { t as r } from "./use-material-translation-DRB6oPdF.js";
-import { t as i } from "./pdf-page-C3XhLcrp.js";
+import { t as i } from "./pdf-page-CRt6KXdJ.js";
 import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-thumbnail-sidebar.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = {

package/dist/{pdf-toolbar-zI0_eNXV.js → pdf-toolbar-BtXcyEpd.js}

@@ -4,7 +4,7 @@ import { t as n } from "./use-material-translation-DRB6oPdF.js";
 import { d as r } from "./Button-CurFF4Zt.js";
 import { t as i } from "./icon-button-CIUc1bEp.js";
 import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-BsuyNVzV.js";
-import { o as d } from "./HoverCardTrigger-C3r0oc5d.js";
+import { o as d } from "./HoverCardTrigger-jCXl6TrX.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, nextTick as x, normalizeClass as S, openBlock as C, ref as w, renderList as T, toDisplayString as E, unref as D, useTemplateRef as O, watch as k, withCtx as A } from "vue";
 import { ChevronDown as j, ChevronLeft as M, ChevronRight as N, ChevronUp as P, Download as F, Maximize2 as I, Minimize2 as L, Moon as R, Printer as z, RotateCw as B, Search as V, Sidebar as H, ZoomIn as U, ZoomOut as W } from "@lucide/vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-toolbar-search.vue?vue&type=script&setup=true&lang.ts

package/dist/{stx-player-BUo2Vs0j.js → stx-player-nDsDyvc-.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jt as n, Kp as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-D56FEfTa.js";
+import { $t as t, Jt as n, Kp as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components--v_k8diD.js";
 import { t as l } from "./use-material-translation-DRB6oPdF.js";
 import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, openBlock as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region lib/components/ui/media/stx-player/partials/stx-player-frame.vue?vue&type=script&setup=true&lang.ts

package/docs/components/feedback-and-status.md

@@ -173,6 +173,8 @@ keeps focus off the Cancel, on the content: the page behind an alert dialog is
 task: focus it from a `setTimeout`, not in the handler.
 
 **Emits:** `update:open` on `AlertDialog` — `boolean`.
+`AlertDialogContent` is capped to the viewport height and scrolls inside itself, like `DialogContent` ([Dialog](overlays-and-menus.md#dialog)).
+
 **Storybook:** `Feedback & status/AlertDialog` · **React:** `AlertDialog` (same parts)
 
 ---

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

@@ -96,6 +96,21 @@ overlay, for a dialog taller than the screen).
 Unlike React, `DialogContent` renders the X by itself (turn it off with
 `:show-close-button="false"`), and `DialogTrigger` is not `as-child` by default.
 
+`DialogContent` and `AlertDialogContent` are capped at `100dvh - 2rem` (`100vh`
+where `dvh` is unsupported) and scroll inside themselves, so a long body never
+pushes the title off-screen on a phone. The built-in X scrolls with the content. On
+browsers with `dvh` support, your own `max-h-*` through `class` wins over the
+cap. To remove the cap and the scroll, pass `class="max-h-none overflow-visible"`:
+
+```vue
+<DialogContent class="max-h-none overflow-visible">
+```
+
+Content wider than the dialog now scrolls horizontally or is clipped
+(`overflow-visible` restores the old behaviour). `DialogScrollContent` is for a
+dialog that should grow taller than the screen and scroll inside the overlay
+instead of capping; it does not pin the header or footer.
+
 On open, `DialogContent` moves focus into the dialog: to its first control
 (the built-in X when there is nothing before it), or to the content itself
 when it has none. An `@open-auto-focus` that calls `event.preventDefault()`
@@ -165,6 +180,9 @@ Parts: `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`,
 | `side` (`SheetContent`) | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | the edge it slides from; left / right are ¾ wide, capped at 384 px |
 | `default-open` / `v-model:open`, `modal` (`Sheet`) | as `Dialog` | — | a sheet is a Reka dialog |
 
+`SheetContent` scrolls inside itself, and a top or bottom sheet is capped at
+`100dvh`. Override the cap with `max-h-*` through `class`.
+
 `SheetContent` always renders a top-right X, named "Close"
 (`material.buttons.close`, translated); there is no `withCloseButton` prop in
 Vue.

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

@@ -263,19 +263,19 @@ const picked = ref<string[]>(['nuxt']);
 | --- | --- | --- | --- |
 | `mode` | `'single' \| 'multiple'` | `'single'` | decides the `v-model` type |
 | `v-model` | `string \| string[] \| null` | `null` | per `mode` |
-| `options` | `T[]`, `T extends { value: string; label: string }` | `[]` | the items, typed by your own option type; with `on-search`, the list before a search and the selected options' labels |
+| `options` | `T[]`, `T extends { value: string; label: string; disabled?: boolean }` | `[]` | the items (`disabled` on one: listed, announced as disabled, never picked), typed by your own option type; with `on-search`, the list before a search and the selected options' labels |
 | `get-option-value` | `(option: T) => string` | `option.value` | the value an option stands for |
 | `get-option-label` | `(option: T) => string` | `option.label` | the text it shows and is searched by |
 | `filter` | `'accent-insensitive' \| 'none' \| (option: T, query: string) => boolean` | `'accent-insensitive'`, `'none'` with `on-search` | how the list is filtered as the user types: label or value, ignoring case and accents (`e` finds "École") in the provider's language; `'none'` shows `options` as given; a function gets the trimmed query, never an empty one |
 | `free-solo` | `boolean` | `false` | accept a typed value that is not an option ("Add …") |
 | `free-solo-label` | `(query: string) => string` | `Add "{query}"`, translated | the free-solo button's text |
 | `@search` (prop `on-search`) | `(query: string, { signal }: { signal: AbortSignal }) => Promise<T[]>` | — | server search: called once typing pauses; its results become the list. Each search aborts the previous one, and a response that lands after a newer one is dropped |
-| `@search-error` | `(error: unknown) => void` | — | `on-search` rejected (an abort is not a rejection) |
+| `@search-error` | `(error: unknown) => void` | — | `on-search` rejected (an abort is not a rejection); pass the reason back as `search-error` |
 | `min-query-length` | `number` | `1` | `on-search` waits for this many characters; below it the list says "Type at least N characters to search." |
-| `debounce-ms` | `number` | `250` | the pause before `on-search` and `@query-change` run |
-| `@query-change` | `(query: string) => void` | — | the typed text once typing pauses — fetch `options` yourself here |
+| `debounce-ms` | `number` | `250` | the pause before `on-search` and `@query-change` run on typed text; an emptied query is reported to `@query-change` at once, and `on-search` never runs on it unless `min-query-length` is `0` (then it follows the pause) |
+| `@query-change` | `(query: string) => void` | — | the typed text once typing pauses, and `''` at once when it empties (a pick, a clear) — fetch `options` yourself here |
 | `loading` | `boolean` | — | with `@query-change`: "Loading…" in the list, `aria-busy` on it, announced |
-| `search-error` | `string` | — | with `@query-change`: shown and announced in place of the options |
+| `search-error` | `string` | — | shown and announced in place of the options; with `on-search` it replaces the generic "The search failed. Try again." |
 | `empty` | `string` | "No option found." | text when nothing matches |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on the input, which the label names |
 | `error` | `boolean` | — | red border on the box, error helper text, `aria-invalid` on the input |
@@ -321,7 +321,10 @@ const person = ref<string | null>(null);
 With `on-search`, `min-query-length` defaults to 1, `debounce-ms` to 250 and `filter` to `'none'`
 (the server filters). A rejected search shows and announces "The search
 failed. Try again." by itself and hands the error to `@search-error`; an abort is
-never an error. Type your search with `AutocompleteSearch<T>` (its second
+never an error. To say why instead (the API's own refusal, "the service is
+unreachable"), keep the reason in your state from `@search-error` and pass it as
+`search-error`: it takes precedence over the generic text, in the list and in the
+live region. Type your search with `AutocompleteSearch<T>` (its second
 argument is `AutocompleteSearchContext`, `{ signal }`); `AutocompleteFilter<T>`
 and `AutocompleteSearchProps<T>` are exported from `@nxgt/material-vue/components` too.
 `filterAutocompleteOptions(options, query, locale?)`, exported beside the
@@ -332,6 +335,11 @@ To fetch it yourself instead, keep `options` and `loading` in your state,
 update them on `@query-change`, and pass `filter="none"` when the server
 already filtered.
 
+A disabled option (`disabled: true` on it, in `options` or in what `on-search`
+returns) is greyed out, carries `aria-disabled` and a native `disabled`, so Tab
+skips it, and is never picked, by click or by Enter (which picks the first
+enabled option), in `single` and `multiple` mode.
+
 **Accessibility.** A polite live region (`role="status"`) says "Loading…",
 then "3 results" or "No results" (or the failure) once the search answers or
 typing pauses — never on every keystroke. The list is `aria-busy` while

package/docs/troubleshooting.md

@@ -26,6 +26,7 @@ words in your error.
 - [Dialogs, toasts or buttons no longer animate](#dialogs-toasts-or-buttons-no-longer-animate)
 - [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)
 - [`JsBarcode is not a function`](#jsbarcode-is-not-a-function)
 - [A `LinkButton` selected as a `button` stops matching](#a-linkbutton-selected-as-a-button-stops-matching)
 - [A `Toc`, `Pager`, `SeeAlso` or `ScrollProgress` inside `Doc` selected by `data-slot` stops matching](#a-toc-pager-seealso-or-scrollprogress-inside-doc-selected-by-data-slot-stops-matching)
@@ -39,7 +40,10 @@ words in your error.
 - [A test no longer finds `aria-invalid` on a `Switch` row or an `Autocomplete` box](#a-test-no-longer-finds-aria-invalid-on-a-switch-row-or-an-autocomplete-box)
 - [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
 - [`@query-change` runs more often after upgrading](#query-change-runs-more-often-after-upgrading)
+- [A click on the next field right after an `Autocomplete` pick is lost](#a-click-on-the-next-field-right-after-an-autocomplete-pick-is-lost)
 - [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
+- [An `Autocomplete` option does nothing on click or Enter](#an-autocomplete-option-does-nothing-on-click-or-enter)
+- ["The search failed. Try again." no longer shows in an `Autocomplete`](#the-search-failed-try-again-no-longer-shows-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A test no longer finds a sidebar entry by the `button` role](#a-test-no-longer-finds-a-sidebar-entry-by-the-button-role)
@@ -642,6 +646,20 @@ was a fixed 300 ms.
 **Fix:** set the pause you had, `:debounce-ms="300"`, or move the fetch to `on-search`, which
 also aborts the previous request and drops a stale response.
 
+### A click on the next field right after an `Autocomplete` pick is lost
+
+**When:** before 0.37.1, in a dialog, a `Select` (or any field) right below an
+`Autocomplete` whose `@query-change` shows or hides something (a line naming
+who is already linked, a result count): a click on that field's option just
+after a pick does nothing, now and then (more often in Firefox and on a slow
+machine; an end-to-end test flakes).
+**Why:** a pick empties the query, and `@query-change` with `''` came only
+after `debounceMs`. The line it removed then shrank the centred dialog, which
+moved the open list by half that height between the pointer's press and its
+release: the release landed on another option, and nothing was chosen.
+**Fix:** upgrade: an emptied query is reported at once, with the pick, before
+the next click. Waiting in a test until no `listbox` is left only hid it.
+
 ### An older search's results replace the newer ones in an `Autocomplete`
 
 **When:** you fetch `options` yourself from `@query-change`, and a slow response
@@ -661,6 +679,47 @@ an older query, even from an API that ignores the signal:
 />
 ```
 
+### An `Autocomplete` option does nothing on click or Enter
+
+**When:** one option of an `Autocomplete` is greyed out and clicking it, or
+pressing Enter on it, changes nothing, with no error.
+**Why:** that option has `disabled: true` (in the local `options` or in what
+`on-search` returns). It is listed and announced with `aria-disabled`, and never
+picked, in `single` and `multiple` mode; Enter picks the first enabled option, and Tab skips a disabled one.
+**Fix:** drop `disabled` from the option, or build it only for the options that
+may be chosen:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :options="[
+    { value: 'a', label: 'Alpha', disabled: true }, // listed, never picked
+    { value: 'b', label: 'Beta' },
+  ]"
+/>
+```
+
+### "The search failed. Try again." no longer shows in an `Autocomplete`
+
+**When:** after upgrading, an `Autocomplete` whose `on-search` rejects shows
+your own text, or nothing generic, where it used to say "The search failed. Try
+again."
+**Why:** `search-error` now takes precedence over the generic text with `on-search`
+too, in the list and in the live announcement. The generic text only shows
+while `search-error` is unset.
+**Fix:** nothing, if the reason is what you want. To get the generic text back,
+leave `search-error` unset or empty; to show a reason, keep it from `@search-error` and pass it
+back:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :on-search="search"
+  :search-error="reason"
+  @search-error="reason = 'Directory unreachable'"
+/>
+```
+
 ### A test no longer finds `aria-invalid` on an `OtpField` slot
 
 **When:** `[data-slot="input-otp-slot"][aria-invalid]` (or
@@ -1182,6 +1241,27 @@ your own through `class`. With `as-child`, put the label in a `<span>`:
 </template>
 ```
 
+### A dialog or sheet scrolls, or clips a child, after upgrading
+
+**When:** after upgrading, a tall `DialogContent`, `AlertDialogContent` or
+`SheetContent` shows a scrollbar, or a child that stuck out of it (a popover, a
+focus ring, a wide table) is clipped.
+**Why:** these contents are now capped to the viewport (`max-h-[calc(100dvh-2rem)]`,
+`100vh` where `dvh` is unsupported; a top or bottom sheet is capped at `100dvh`)
+and carry `overflow-y-auto`, so a long body scrolls inside them instead of
+leaving the title off-screen. Setting `overflow-y` makes `overflow-x` clip or
+scroll too.
+**Fix:** to keep the old behaviour on one dialog, remove the cap and the scroll
+with `class="max-h-none overflow-visible"`; to change the cap, pass your own
+`max-h-*` (it wins on browsers with `dvh` support):
+
+```vue
+<DialogContent class="max-h-none overflow-visible">
+```
+
+For a dialog that should grow taller than the screen and scroll inside the
+overlay instead of capping, use `DialogScrollContent`.
+
 ## Feedback
 
 ### A toast with an action never goes away

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.36.0",
+	"version": "0.37.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"