@nxgt/material-vue 0.33.0 → 0.35.0

package/dist/{number.utils-Cy1z6qI7.js → number.utils-Bpo9tUaJ.js}

@@ -2626,44 +2626,44 @@ function Jt(e, t) {
 	return t >= 0 && t <= 59;
 }
 //#endregion
-//#region lib/composables/use-is-client.ts
-function Yt() {
-	let n = t(!1);
-	return e(() => {
-		n.value = !0;
-	}), n;
-}
-//#endregion
 //#region lib/lib/date.utils.ts
-function Xt(e) {
+function Yt(e) {
 	return !!e && typeof e == "object" && ("from" in e || "to" in e);
 }
-function Zt(e, t = "PP", n) {
+function Xt(e, t = "PP", n) {
 	return e ? z(X(e), t, { locale: n }) : "-";
 }
-function Qt(e) {
+function Zt(e) {
 	return jt(e, "HH:mm", /* @__PURE__ */ new Date());
 }
-function $t(e) {
+function Qt(e) {
 	return e ? X(e) : null;
 }
-function en(e) {
-	if (Xt(e)) return e.from || e.to ? {
+function $t(e) {
+	if (Yt(e)) return e.from || e.to ? {
 		from: e.from ? S(e.from).toISOString() : void 0,
 		to: e.to ? re(e.to).toISOString() : void 0
 	} : void 0;
 }
-var tn = {
-	format: Zt,
-	parseFromTimestring: Qt,
-	parseFromISOString: $t,
-	formatDateRangeFilter: en
+var en = {
+	format: Xt,
+	parseFromTimestring: Zt,
+	parseFromISOString: Qt,
+	formatDateRangeFilter: $t
 };
 //#endregion
+//#region lib/composables/use-is-client.ts
+function tn() {
+	let n = t(!1);
+	return e(() => {
+		n.value = !0;
+	}), n;
+}
+//#endregion
 //#region lib/lib/number.utils.ts
 function nn(e, t = {}) {
 	let { language: n = "en-US", ...r } = t, i = new Intl.NumberFormat(n, r).format(e);
 	return i === "NaN" ? "" : i;
 }
 //#endregion
-export { f as C, c as E, p as S, l as T, x as _, X as a, g as b, O as c, T as d, w as f, S as g, C as h, Yt as i, D as l, ne as m, tn as n, jt as o, re as p, en as r, z as s, nn as t, E as u, b as v, a as w, m as x, _ as y };
+export { f as C, c as E, p as S, l as T, x as _, X as a, g as b, O as c, T as d, w as f, S as g, C as h, $t as i, D as l, ne as m, tn as n, jt as o, re as p, en as r, z as s, nn as t, E as u, b as v, a as w, m as x, _ as y };

package/dist/{pdf-outline-sidebar-CzY59j_Y.js → pdf-outline-sidebar-Bjz8jMaZ.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { kf as n } from "./components-CmIOfRO4.js";
-import { t as r } from "./use-material-translation-CaHS6oZz.js";
+import { kf as n } from "./components-B3e9Djen.js";
+import { t as r } from "./use-material-translation-D30V5LyT.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
 var y = {

package/dist/{pdf-page-nM_fvTHh.js → pdf-page-BRtEfDpx.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Mp as t } from "./components-CmIOfRO4.js";
+import { Mp as t } from "./components-B3e9Djen.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-BMxNOnPk.js → pdf-page-list-DUSFOt6b.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { kf as t } from "./components-CmIOfRO4.js";
-import { t as n } from "./pdf-page-nM_fvTHh.js";
+import { kf as t } from "./components-B3e9Djen.js";
+import { t as n } from "./pdf-page-BRtEfDpx.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-Dpv3oWe1.js → pdf-reader-Dhuuu3ud.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components-CmIOfRO4.js";
-import { t as n } from "./use-material-translation-CaHS6oZz.js";
-import { t as r } from "./Button-DEA5W6O3.js";
-import { o as i } from "./HoverCardTrigger-CjSteFgk.js";
-import { n as a } from "./pdf-page-nM_fvTHh.js";
-import { t as o } from "./pdf-page-list-BMxNOnPk.js";
-import { t as s } from "./pdf-sidebar-DkefUgWg.js";
-import { t as c } from "./pdf-toolbar-Da6UMt1O.js";
+import { kn as t } from "./components-B3e9Djen.js";
+import { t as n } from "./use-material-translation-D30V5LyT.js";
+import { t as r } from "./Button-C6GBoxwB.js";
+import { o as i } from "./HoverCardTrigger-BRajrP9V.js";
+import { n as a } from "./pdf-page-BRtEfDpx.js";
+import { t as o } from "./pdf-page-list-DUSFOt6b.js";
+import { t as s } from "./pdf-sidebar-BOsuIcvK.js";
+import { t as c } from "./pdf-toolbar-ZYITLhtl.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-DkefUgWg.js → pdf-sidebar-BOsuIcvK.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-CaHS6oZz.js";
-import { t as r } from "./pdf-outline-sidebar-CzY59j_Y.js";
-import { t as i } from "./pdf-thumbnail-sidebar-I6i1lv5J.js";
+import { t as n } from "./use-material-translation-D30V5LyT.js";
+import { t as r } from "./pdf-outline-sidebar-Bjz8jMaZ.js";
+import { t as i } from "./pdf-thumbnail-sidebar-CEinOvk3.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-I6i1lv5J.js → pdf-thumbnail-sidebar-CEinOvk3.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { kf as n } from "./components-CmIOfRO4.js";
-import { t as r } from "./use-material-translation-CaHS6oZz.js";
-import { t as i } from "./pdf-page-nM_fvTHh.js";
+import { kf as n } from "./components-B3e9Djen.js";
+import { t as r } from "./use-material-translation-D30V5LyT.js";
+import { t as i } from "./pdf-page-BRtEfDpx.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-Da6UMt1O.js → pdf-toolbar-ZYITLhtl.js}

@@ -1,10 +1,10 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-CaHS6oZz.js";
-import { d as r } from "./Button-DEA5W6O3.js";
-import { t as i } from "./icon-button-CWcOcNHr.js";
+import { t as n } from "./use-material-translation-D30V5LyT.js";
+import { d as r } from "./Button-C6GBoxwB.js";
+import { t as i } from "./icon-button-Cep-hCMB.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-CjSteFgk.js";
+import { o as d } from "./HoverCardTrigger-BRajrP9V.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/pdf.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./use-material-translation-CaHS6oZz.js";
-import { t as n } from "./Button-DEA5W6O3.js";
+import { n as e, t } from "./use-material-translation-D30V5LyT.js";
+import { t as n } from "./Button-C6GBoxwB.js";
 import { computed as r, createBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, nextTick as c, onMounted as l, onScopeDispose as u, openBlock as d, ref as f, renderSlot as p, shallowRef as m, toDisplayString as ee, toValue as h, unref as g, watch as te, withCtx as ne } from "vue";
 import { contentDisposition as re, pdfBytesResponse as ie, toWebStream as ae } from "@nxgt/material-core/pdf/http";
 import { badge as oe, dataTable as se, defaultPdfTheme as ce, definePdfDocument as _, divider as v, header as y, heading as b, image as x, keyValue as S, keyValueOf as C, link as w, metric as T, page as E, pageBreak as D, pageNumber as O, pdfDocument as k, resolvePdfColor as A, resolvePdfTheme as j, row as M, section as N, spacer as P, stack as F, table as I, text as L, totals as R } from "@nxgt/material-core/pdf/model";

package/dist/{print-format.utils-DwJfU1tK.js → print-format.utils-DpBtUJvL.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./_baseIsEqual-BUD8VQJE.js";
-import { i as t } from "./number.utils-Cy1z6qI7.js";
+import { n as t } from "./number.utils-Bpo9tUaJ.js";
 import { defineComponent as n, getCurrentInstance as r, h as i, inject as a, provide as o, useId as s } from "vue";
 import { defineStore as c } from "pinia";
 import { createFormatters as l, formatAmount as u, formatDate as d } from "@nxgt/material-core/print-format";

package/dist/{sortable-provider-Cvpqk8tp.js → sortable-provider-BCawiL69.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-CaHS6oZz.js";
-import { t as n } from "./icon-button-CWcOcNHr.js";
+import { t } from "./use-material-translation-D30V5LyT.js";
+import { t as n } from "./icon-button-Cep-hCMB.js";
 import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, normalizeStyle as f, onUnmounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S, watchEffect as C, withCtx as w, withModifiers as T } from "vue";
 import { GripVertical as E } from "@lucide/vue";
 import { Primitive as D } from "reka-ui";

package/dist/{stored-language-GDRdeYD8.js → stored-language-CGMzf-kR.js}

@@ -355,7 +355,7 @@ var e = {
 				"go-to-first-page": "Go to first page",
 				"go-to-last-page": "Go to last page",
 				"rows-per-page": "Rows per page",
-				"rows-selected": "{count} of {total} {count, plural, =0 {row selected} one {row selected} other {rows selected} }",
+				"rows-selected": "{count, plural, =0 {No rows selected} one {# row selected} other {# rows selected}} of {total}",
 				"page-of": "Page {page} of {total}",
 				label: "Pagination",
 				range: "{from}–{to} of {total}",
@@ -1558,7 +1558,7 @@ var e = {
 				"go-to-first-page": "Aller à la première page",
 				"go-to-last-page": "Aller à la dernière page",
 				"rows-per-page": "Lignes par page",
-				"rows-selected": "{count} sur {total} {count, plural, =0 {ligne sélectionnée} one {ligne sélectionnée} other {lignes sélectionnées} }",
+				"rows-selected": "{count, plural, =0 {Aucune ligne sélectionnée} one {# ligne sélectionnée} other {# lignes sélectionnées}} sur {total}",
 				"page-of": "Page {page} sur {total}",
 				label: "Pagination",
 				range: "{from}–{to} sur {total}",

package/dist/{stx-player-CN7Ic8tP.js → stx-player-DAhHmRHW.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Fp as n, Jt as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-CmIOfRO4.js";
-import { t as l } from "./use-material-translation-CaHS6oZz.js";
+import { $t as t, Fp as n, Jt as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-B3e9Djen.js";
+import { t as l } from "./use-material-translation-D30V5LyT.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
 var S = ["data-layout", "aria-label"], C = {

package/dist/{translator-BDFEmlcL.js → translator-DhrnT0YX.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-GDRdeYD8.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-CGMzf-kR.js";
 import { t as i } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function a(e, t) {

package/dist/{use-heading-spy-DimKb49j.js → use-heading-spy-BF4hsZLZ.js}

@@ -1,5 +1,5 @@
-import { a as e } from "./i18n-provider-CiVi05fs.js";
-import { c as t, d as n, f as r, l as i, n as a, u as o } from "./number.utils-Cy1z6qI7.js";
+import { a as e } from "./i18n-provider-D0wc5ysD.js";
+import { c as t, d as n, f as r, l as i, r as a, u as o } from "./number.utils-Bpo9tUaJ.js";
 import { computed as s, getCurrentInstance as c, inject as l, onMounted as u, ref as d, toValue as f } from "vue";
 import { injectConfigProviderContext as p } from "reka-ui";
 import { useIntersectionObserver as m, useMediaQuery as h, useSSRWidth as g, useStorage as _ } from "@vueuse/core";

package/dist/{use-material-translation-CaHS6oZz.js → use-material-translation-D30V5LyT.js}

@@ -1,6 +1,6 @@
-import "./stored-language-GDRdeYD8.js";
-import { a as e } from "./i18n-provider-CiVi05fs.js";
-import { i as t, r as n } from "./translator-BDFEmlcL.js";
+import "./stored-language-CGMzf-kR.js";
+import { a as e } from "./i18n-provider-D0wc5ysD.js";
+import { i as t, r as n } from "./translator-DhrnT0YX.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/docs/components/data-display.md

@@ -171,8 +171,12 @@ Pill with leading, avatar and trailing slots, an active state and a dismiss butt
 
 ```vue
 <script setup lang="ts">
+import { ref } from 'vue';
 import { Avatar, AvatarFallback, Chip } from '@nxgt/material-vue/components';
 
+const chip = ref<InstanceType<typeof Chip>>();
+// chip.value?.focus()
+
 function remove(id: string) {
   console.log('remove', id);
 }
@@ -185,6 +189,9 @@ function remove(id: string) {
     </template>
   </Chip>
   <Chip label="Shipped" color="success" active />
+  <Chip label="Frontend" :dismiss-label="(label) => `Clear ${label} filter`" @dismiss="remove('fe')" />
+  <Chip label="+ Field" variant="dashed" :active="added" @click="add" />
+  <Chip ref="chip" label="Compact" size="sm" />
 </template>
 ```
 
@@ -192,12 +199,17 @@ function remove(id: string) {
 | --- | --- | --- | --- |
 | `label` | `string` | — | the text; the default slot replaces it |
 | `active` | `boolean` | — | filled appearance |
-| `variant` | Button `variant` | `'outlined'` | appearance when not active |
+| `variant` | Button `variant`, or `'dashed'` | `'outlined'` | appearance when not active; `dashed` is a muted dashed pill (a "+ Field" pill) that turns solid and normal once `active` |
+| `size` | `'default' \| 'sm'` | `'default'` | `sm` is a compact chip; the ✕ and every target stay at least 24px |
 | `color` | Button `color` | — | tone |
 | `disabled` | `boolean` | — | disables the chip and its ✕ |
-| `@dismiss` | `() => void` | — | a listener adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text the chip shows: the default slot's when given, else `label`; "Remove" when it shows none |
+| `@dismiss` | `() => void` | — | a listener adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text the chip shows: the default slot's when given, else `label`; "Remove" when it shows none; the ✕ is a 24px target |
+| `dismissLabel` | `string \| ((label: string) => string)` | — | names the ✕ instead of "Remove {label}": a string as is, or a function of the text the chip shows |
 | `@click` | `(event: MouseEvent) => void` | — | a listener makes the chip (or its body, when dismissible) a button |
 | `#leading`, `#avatar`, `#trailing` | slots | — | `#avatar` is shrunk to fit and replaces `#leading` |
+| exposed `el`, `focus(options?)` | `HTMLElement \| null`, `(options?: FocusOptions) => void` | — | the chip's body (the Button, the inner button, or the label span with `tabindex="-1"`) and a method focusing it: `chip.value?.focus()` |
+
+The dashed look's muted text meets 4.5:1 on the `background` and `card` surfaces, but not on `accent`.
 
 **Storybook:** `Data display/Chip` · **React:** `Chip`
 

package/docs/components/data-table-filter-and-lists.md

@@ -356,7 +356,8 @@ async function archive() {
   in the URL; `manual` turns client filtering off.
 - **Selection** is `v-model:row-selection`, keyed by `getRowId`, so it
   survives a page change: ids of other pages stay in it, and the footer
-  counts them all ("3 rows selected", `material.table.pagination.selected`).
+  counts them all ("3 rows selected of 128", `material.table.pagination.rows-selected`; "Page n of m"
+  is hidden when the table has no rows).
   `#actions="{ table }"` reads it too (`table.store.state.rowSelection`). To
   keep it across a reload, put it in the URL or `sessionStorage`. Unbound,
   both models are held inside, as before. Bind both halves (`v-model`, or

package/docs/components/date-and-time.md

@@ -101,6 +101,8 @@ No form wrapper — use `DateFormField`.
 
 Labelled trigger that opens a calendar popover, with an optional time picker and `disabled-days`.
 
+The trigger writes the date in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -159,6 +161,8 @@ before your `aria-describedby` ids.
 
 From / to range picked in a popover calendar, with `disabled-days`, presets and times.
 
+The trigger writes each date in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -304,6 +308,8 @@ where `to` stays `undefined` until the second day is picked.
 
 Opens a `TimePicker` in a popover, or in a dialog on mobile.
 
+The trigger writes the time in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';

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

@@ -432,9 +432,11 @@ function clearFilters() {}
 | --- | --- | --- | --- |
 | `variant` | `'not-found' \| 'unauthorized' \| 'generic' \| 'empty' \| 'offline' \| 'search' \| 'maintenance'` | `'generic'` | preset icon, well colour, title and description |
 | `#icon` slot | — | the preset's | replaces the icon |
-| `title` / `description` | `string` (or `#title` / `#description`) | the preset's (translated) | replace the preset text |
+| `title` / `description` | `string` (or `#title` / `#description`) | the preset's (translated) | replace the preset text; see below |
 | `#action` slot | — | — | shown under the text |
 
+The preset's description is the companion of its title: with your own `title` and no `description`, no description is rendered. Pass `description` to keep a line under your own title. A `#title` slot counts as your own title; a `#description` slot always renders.
+
 **Storybook:** `Feedback & status/EmptyState` · **React:** `EmptyState`
 
 ---

package/docs/components/primitives.md

@@ -193,9 +193,17 @@ import { Typography } from '@nxgt/material-vue/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'huge-larger' \| 'huge-large' \| 'huge-medium' \| 'huge-small' \| 'headline-larger' \| 'headline-large' \| 'headline-medium' \| 'headline-small' \| 'title-large' \| 'title-medium' \| 'title-small' \| 'body-medium' \| 'body-small' \| 'caption' \| 'normal'` | `'normal'` | size and weight; `caption` is also muted |
+| `as` | a tag name or a component | `'div'` | the element to render, keeping the variant, e.g. `as="h2"` or `as="span"` |
+| `asChild` | `boolean` | `false` | merge the classes onto the single child instead of rendering an element |
 
-It renders a `<div>`; the variants are also exported as `typographyVariants`
-for use on your own elements. Vue has one more step than React, `huge-larger`.
+It renders a `<div>` unless `as` or `asChild` says otherwise:
+
+```vue
+<Typography as="span" variant="title-small">Inline</Typography>
+<Typography as-child variant="body-medium"><a href="/docs">Docs</a></Typography>
+```
+
+The variants are also exported as `typographyVariants` for use on your own elements. Vue has one more step than React, `huge-larger`.
 
 **Storybook:** `Primitives/Typography` · **React:** `Typography`
 

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

@@ -144,6 +144,7 @@ const framework = ref('nuxt');
 | `placeholder` | `string` | `label` | the trigger's text while nothing is selected |
 | `required` | `boolean` | — | an asterisk after the label, and the select's `required`; the trigger is named by the label |
 | `label`, `helper-text`, `error`, `disabled` | | — | the field's text and state |
+| `ariaLabelledby` (`aria-labelledby` in a template) | `string` | — | the id of an element that names the trigger when `label` is absent; `label` wins when both are given |
 
 `#option` renders each option's content in the list (React's
 `renderOption`); it receives `{ option, index, selected }`. The trigger shows
@@ -166,7 +167,7 @@ the picked option's text.
 **Accessibility:** the trigger is named by `label`, described by the help or
 error text (`aria-describedby`) and marked `aria-invalid` on error, so
 `getByRole('combobox', { name: 'Framework' })` finds it and
-`toHaveAccessibleDescription(…)` / `toBeInvalid()` match.
+`toHaveAccessibleDescription(…)` / `toBeInvalid()` match. Without a `label`, `aria-labelledby` (`ariaLabelledby` in the script; the id of another element) names the trigger; when both are given, `label` wins.
 **Emits:** `update:modelValue` with `string`.
 **Form wrapper:** `SelectFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).

package/docs/guides/i18n.md

@@ -549,6 +549,8 @@ For money and dates shown to a user, `useFormatters()` (`formatAmount`,
 `useNumberFormatter()` is for the other `Intl.NumberFormat` styles
 (percentages, units). See [helpers](helpers.md#nxgtmaterial-vuecomposables).
 
+The trigger of a `DateField`, `DateRangeField` or `TimeField` follows the same language: `01/09/2028` on a French page, `09/01/2028` in English.
+
 ## Reference
 
 Everything `@nxgt/material-vue/i18n` exports is listed in

package/docs/roadmap.md

@@ -6,21 +6,6 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
-- **A strict Content Security Policy** — a page that sends `script-src` with
-  a nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
-  `'unsafe-inline'`, runs every component with no violation report: a
-  `NonceProvider` forwards the nonce to each component, the CSS the
-  dependencies inject moves into the stylesheet, zod becomes external with
-  schemas built lazily, and the KaTeX fonts ship as files. Done so far:
-  KaTeX's fonts are files beside the compiled stylesheet instead of 1.4 MB of
-  `data:` URIs inside it, so `font-src 'self'` needs no `data:`;
-  `NonceProvider` takes the nonce to reka's `Select`, `Combobox`,
-  `ScrollArea` and `Splitter`, `InputOTP` and `RichTextEditor`;
-  `ImageCropper` is measured and injects no `<style>`, and `InputOTP`'s rules
-  are in the stylesheet too; zod is no longer bundled and no schema is built
-  at import, so the app's `z.config({ jitless: true })` keeps zod from
-  probing `new Function`. Today the
-  [Content Security Policy guide](guides/csp.md) lists what is left to relax.
 - **Empty and error states that look designed** — `EmptyState` and a new
   `ErrorState` in three sizes (`default`, `compact`, `inline`), with in-house
   inline SVG illustrations or a slot for your own. `ErrorState` is a
@@ -32,6 +17,30 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
+- **One Vite plugin for the whole setup** — `nxgtMaterial()` from
+  `@nxgt/material-vue/vite` is the one call that wires the library
+  into a Vite app; it is implemented once in `@nxgt/material-core/vite`, and
+  `@nxgt/material/vite` is the same plugin.
+  Every option is on by default and each can be turned off or refined; the
+  helpers that exist today stay exported.
+  - `csp`: a nonce placeholder through `html.cspNonce` and
+    `applyCspNonce(html, nonce)` to fill it; zod's jitless mode set by an
+    inline nonced script in `index.html` (`ZOD_JITLESS_SCRIPT` for a server
+    that renders the page itself); and the recommended policy sent by the dev
+    server as Report-Only.
+  - `fonts`: the KaTeX fonts emitted as files, and `sans: 'inter'` for a
+    self-hosted Inter.
+  - `styles`: a build that fails with the exact fix when the stylesheet import
+    or the `@source` line is missing.
+  - `pdf`: pdfkit's standard fonts handled automatically when
+    `@react-pdf/renderer` is installed, and `bundle: true` (the Nuxt module's
+    `pdf.bundleStandardFonts` today) for a server that has no
+    `node_modules`.
+  - Nuxt: the Nuxt module takes the same options.
+  - On the server, `@nxgt/material-core` gains `createCspNonce()` (Web Crypto)
+    and `cspPolicy({ ... })`, which returns `{ directives, header }` as the
+    [Content Security Policy guide](guides/csp.md) describes; `NonceProvider`'s
+    `nonce` becomes optional on the client. Ships as minors.
 - **One media player, video and audio** — `MediaPlayer`, `MediaPlayerMini`,
   `useMediaPlayer` and `AudioPlayer`, built on the native `<video>` / `<audio>`.
   `StxPlayer` and `VideoPlayer` are removed in `@nxgt/material-vue` 1.0, with a
@@ -113,6 +122,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Not planned
 
+- **A Next.js plugin** — the plugin targets Vite only. No supported consumer
+  builds with Next.js, and `withNxgtPrint` stays the config helper for it.
 - **The `Combobox` primitive family** — `ComboboxFormField` covers forms; the
   low-level `Combobox` parts stay in `@nxgt/material` only.
 - **The React library's state and form stacks** — widgets keep their state in
@@ -151,6 +162,13 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **A strict Content Security Policy** — a page that sends `script-src` with a
+  nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
+  `'unsafe-inline'`, runs every component with no violation report:
+  `NonceProvider` forwards the nonce to each component, the CSS the
+  dependencies inject is in the stylesheet, zod is external and its schemas are
+  built on first use, and the KaTeX fonts are files. The
+  [Content Security Policy guide](guides/csp.md) has the policy. 0.33.0.
 - **An `Autocomplete` that searches a server** — `on-search`, `debounce-ms`, `min-query-length`, `filter`, `loading`, `search-error`: a
   debounced search with an `AbortSignal` whose stale responses are dropped,
   a polite "Loading…" / "N results" announcement, and local matching that

package/docs/troubleshooting.md

@@ -154,10 +154,12 @@ words in your error.
 - [An `Icon` is named "Icon {name}" although you passed `aria-label`](#an-icon-is-named-icon-name-although-you-passed-aria-label)
 - [An end-to-end test no longer finds the `Close` or `Zoom in` button](#an-end-to-end-test-no-longer-finds-the-close-or-zoom-in-button)
 - [A test no longer finds a pagination, breadcrumb or other built-in label by its English name](#a-test-no-longer-finds-a-pagination-breadcrumb-or-other-built-in-label-by-its-english-name)
+- [The selection count reads in the wrong order after overriding `material.table.pagination.rows-selected`](#the-selection-count-reads-in-the-wrong-order-after-overriding-materialtablepaginationrows-selected)
 - [A test no longer finds a chip's remove button by the exact name `Remove`, or a `LocationPreview` by its place name](#a-test-no-longer-finds-a-chips-remove-button-by-the-exact-name-remove-or-a-locationpreview-by-its-place-name)
 - [A test no longer finds an icon badge by role `button`, or an `Icon` named "Icon {name}" inside a button](#a-test-no-longer-finds-an-icon-badge-by-role-button-or-an-icon-named-icon-name-inside-a-button)
 - [A button named "Icon plus Add" is now named "Add"](#a-button-named-icon-plus-add-is-now-named-add)
 - [`An invalid form control with name='…' is not focusable` (an `UploadField`)](#an-invalid-form-control-with-name-is-not-focusable)
+- [The date field shows MM/DD/YYYY on a French page](#the-date-field-shows-mmddyyyy-on-a-french-page)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is nowhere in the page](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-nowhere-in-the-page)
 - [A test no longer finds the label or helper text inside a date or time picker's trigger](#a-test-no-longer-finds-the-label-or-helper-text-inside-a-date-or-time-pickers-trigger)
 - [A test no longer finds a `DurationField` input by the field's label, or a `Slider`'s `aria-label` on its root](#a-test-no-longer-finds-a-durationfield-input-by-the-fields-label-or-a-sliders-aria-label-on-its-root)
@@ -2826,6 +2828,31 @@ await page.getByRole('button', { name: /^(Next|Suivant)$/ }).click();
 <PaginationNext aria-label="Next results" />
 ```
 
+### The selection count reads in the wrong order after overriding `material.table.pagination.rows-selected`
+
+**When:** after upgrading, the data table's footer reads "of 128 3 rows
+selected" (or the French "sur 128 3 lignes sélectionnées") because your
+`I18nProvider` overrides `material.table.pagination.rows-selected` with the old
+text.
+**Why:** the message now leads with the count and ends with the total, so
+"3 rows selected of 128" and "No rows selected of 128" read as a sentence, and
+the plural covers zero. The old form, `{count} of {total} {count, plural, …}`,
+put the count and the total first. An override keeps its own text, so it keeps
+the old order. The same release hides "Page n of m" when the table has no rows.
+**Fix:** adopt the new ICU form in your override, or delete the override:
+
+```json
+{
+  "material": {
+    "table": {
+      "pagination": {
+        "rows-selected": "{count, plural, =0 {No rows selected} one {# row selected} other {# rows selected}} of {total}"
+      }
+    }
+  }
+}
+```
+
 ### A test no longer finds a chip's remove button by the exact name `Remove`, or a `LocationPreview` by its place name
 
 **When:** after an update (0.22.0 and later),
@@ -2929,6 +2956,27 @@ stops on it with the browser's own "select a file" message. If vee-validate
 validates the form (`UploadFormField`) and you do not want the browser's check,
 put `novalidate` on the `<form>`.
 
+### The date field shows MM/DD/YYYY on a French page
+
+**When:** a `DateField`, `DateFormField`, `DateRangeField` or `DateRangeFormField` (and a `TimeField`, which shows `2:30 PM` instead of `14:30`) under a French
+`I18nProvider` shows 1 September 2028 as `09/01/2028` in its trigger, while the
+calendar inside it is in French. No error is printed.
+**Why:** the trigger formatted the date without a locale, so it was always
+English (`MM/DD/YYYY`), whatever the language of the page.
+**Fix:** upgrade: the trigger now writes the date (and the time, for a
+`TimeField` or a `DateRangeField` with `withTime`) in the language of the
+page: the `I18nProvider` language, else English. Mount the provider above the
+field:
+
+```vue
+<I18nProvider initial-language="fr">
+  <DateField v-model="value" label="Livraison" />
+</I18nProvider>
+```
+
+With no provider, or in English, the output is unchanged (`09/01/2028`). The
+document's `<html lang>` and the browser's language are not read.
+
 ### An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is nowhere in the page
 
 **When:** with 0.21.0 or earlier: `getByTestId` finds nothing, a hint is not read as

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.33.0",
+	"version": "0.35.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.9.0",
+		"@nxgt/material-core": "^0.9.1",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",