@nxgt/material-vue 0.36.0 → 0.37.0

package/dist/{pdf-outline-sidebar-Gmdd3RNG.js → pdf-outline-sidebar-DTb_hLjX.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-CCzdGGAe.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-CCZtaTRB.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-CCzdGGAe.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-D7ImAK7v.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-CCzdGGAe.js";
+import { t as n } from "./pdf-page-CCZtaTRB.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-CsLVHCV6.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-CCzdGGAe.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-CCZtaTRB.js";
+import { t as o } from "./pdf-page-list-D7ImAK7v.js";
+import { t as s } from "./pdf-sidebar-DlU0RgZL.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-DlU0RgZL.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-DTb_hLjX.js";
+import { t as i } from "./pdf-thumbnail-sidebar-CNB7q0Mq.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-CNB7q0Mq.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-CCzdGGAe.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-CCZtaTRB.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-CqsfQlLp.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-CCzdGGAe.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 |
 | `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)
@@ -40,6 +41,8 @@ words in your error.
 - [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)
 - [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)
@@ -661,6 +664,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 +1226,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.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"