@nxgt/material 3.42.1 → 3.44.0

package/dist/{spinner-DLd_IHev.js → spinner-Dd0os4cb.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-CFF73jk5.js";
+import { t as n } from "./use-material-translation-DLsfkMxp.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region lib/components/ui/feedback/spinner/spinner.tsx
 var i = t("transition-all duration-500", {

package/dist/{stored-language-B5SMR-W2.js → stored-language-Blyb68vN.js}

@@ -1576,7 +1576,10 @@ var t = {
 			delete: "Delete event",
 			"delete-confirm": "This event will be removed.",
 			"open-day": "Open {date}",
-			sidebar: "Calendar navigation"
+			sidebar: "Calendar navigation",
+			unassigned: "Unassigned",
+			resource: "Resource",
+			"time-zone": "Time zone: {zone}"
 		},
 		dnd: { drag: "Drag" },
 		"rich-text-editor": {
@@ -4346,7 +4349,10 @@ var t = {
 			delete: "Supprimer l'événement",
 			"delete-confirm": "Cet événement sera retiré.",
 			"open-day": "Ouvrir le {date}",
-			sidebar: "Navigation du calendrier"
+			sidebar: "Navigation du calendrier",
+			unassigned: "Non assigné",
+			resource: "Ressource",
+			"time-zone": "Fuseau horaire : {zone}"
 		},
 		dnd: { drag: "Déplacer" },
 		"rich-text-editor": {

package/dist/theme-picker.js

@@ -1,10 +1,10 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-B7BVd9fX.js";
-import { t as s } from "./use-material-translation-CFF73jk5.js";
+import { t as s } from "./use-material-translation-DLsfkMxp.js";
 import { a as c, r as l } from "./icon-sprites-CaYXzOL4.js";
 import { t as u } from "./use-theme-DMcyJ52N.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-wJYmnwgu.js";
+import { t as p } from "./theme-toggle-BDRRkkiA.js";
 import { n as m, t as h } from "./nxgt-theme-ZS945iMP.js";
 import { Check as g } from "lucide-react";
 import { useContext as _ } from "react";

package/dist/{theme-toggle-wJYmnwgu.js → theme-toggle-BDRRkkiA.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CFF73jk5.js";
+import { t as e } from "./use-material-translation-DLsfkMxp.js";
 import { i as t } from "./theme-store-CSl51uNH.js";
 import { n, t as r } from "./use-theme-DMcyJ52N.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-BLjrk8uU.js → toolbar-items-D3hw7XZE.js}

@@ -4,9 +4,9 @@ import { a as i, c as a, i as o, l as s, r as c, s as l } from "./dist-lmHmz_bu.
 import { b as u, c as d, d as f, f as p, l as m, t as h, u as g, x as _ } from "./tooltip-CkttDIab.js";
 import { i as v, n as y, r as b, t as x } from "./dist-C4wtXCjf.js";
 import { a as S, c as C, l as w, o as T, r as ee, s as te, t as E } from "./in-dialog-Vwkyp-M5.js";
-import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-BA70o7HC.js";
+import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-DJEeT1XT.js";
 import { a as _e, n as ve, r as ye, t as be } from "./dist-B7RjY7SL.js";
-import { t as xe } from "./use-material-translation-CFF73jk5.js";
+import { t as xe } from "./use-material-translation-DLsfkMxp.js";
 import { t as Se } from "./warn-once-C_e47JM8.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.js";
 import { ChevronLeft as we, ChevronRightIcon as Te, MoreVertical as Ee } from "lucide-react";

package/dist/{translate-material-BYRDtSEk.js → translate-material-CdJBbURx.js}

@@ -1,5 +1,5 @@
-import "./stored-language-B5SMR-W2.js";
-import { a as e, r as t } from "./translator-C-_M57ZA.js";
+import "./stored-language-Blyb68vN.js";
+import { a as e, r as t } from "./translator-38JuN_VD.js";
 //#region lib/i18n/translate-material.ts
 function n(n, r, i, a) {
 	if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {

package/dist/{translator-C-_M57ZA.js → translator-38JuN_VD.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, r, t as i } from "./stored-language-B5SMR-W2.js";
+import { a as t, i as n, r, t as i } from "./stored-language-Blyb68vN.js";
 import { t as a } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function o(e, t) {

package/dist/{use-chat-composer-D_hfO99B.js → use-chat-composer-utGkZQ6X.js}

@@ -7,21 +7,21 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-uQld1gKm.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-8Ua9uuJW.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-BA70o7HC.js";
+import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-DJEeT1XT.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
-import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-BLjrk8uU.js";
+import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-D3hw7XZE.js";
 import { a as Ct, i as wt, n as Tt, o as Et, t as Dt } from "./bubble-input-B7BVd9fX.js";
 import { i as Ot } from "./dist-B7RjY7SL.js";
-import "./stored-language-B5SMR-W2.js";
-import { a as kt } from "./translator-C-_M57ZA.js";
+import "./stored-language-Blyb68vN.js";
+import { a as kt } from "./translator-38JuN_VD.js";
 import { h as At } from "./get-CTzJAwfc.js";
 import { t as jt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-CFF73jk5.js";
-import { t as Mt } from "./spinner-DLd_IHev.js";
+import { t as L } from "./use-material-translation-DLsfkMxp.js";
+import { t as Mt } from "./spinner-Dd0os4cb.js";
 import { a as Nt } from "./button-tones-BwuVvAmd.js";
-import { a as Pt, i as Ft, o as It, r as Lt, t as Rt } from "./button-CTsT_LqL.js";
+import { a as Pt, i as Ft, o as It, r as Lt, t as Rt } from "./button-b_kruV_L.js";
 import { t as R } from "./icon-button-CN9r5TNE.js";
 import { a as zt, r as Bt } from "./icon-sprites-CaYXzOL4.js";
 import { t as Vt } from "./use-ssr-media-query-C6M5m8sf.js";
@@ -35,10 +35,10 @@ import { a as tn, i as nn, o as rn } from "./escape-owner-C4W_sOAU.js";
 import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
-import { n as cn, r as ln, t as un } from "./chip-DP7EyhtT.js";
-import { n as dn, t as fn } from "./icon-badge-D_z5BGbc.js";
+import { n as cn, r as ln, t as un } from "./chip-6O3t9GXt.js";
+import { n as dn, t as fn } from "./icon-badge-Cpke1tCf.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-BzwyRX5J.js";
+import { t as mn } from "./empty-state-CrhrmNqn.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
 import { H as gn, V as _n, X as vn, bt as yn, it as bn, lt as xn, n as Sn, t as Cn, xt as wn, yt as Tn } from "./dist-moutbfbd.js";
 import { t as En } from "./markdown-Dw_uH7j7.js";
@@ -11082,7 +11082,7 @@ var RS = (e = {}) => Dn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-D_PTTZWQ.js")
+			import("./rich-code-block-KQYR0qt3.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-wElRpO2G.js → use-heading-spy-bTccmEMF.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-DkeMr5bw.js";
+import { r as e } from "./i18n-provider-hrtFm9jD.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js

package/dist/{use-material-translation-CFF73jk5.js → use-material-translation-DLsfkMxp.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-DkeMr5bw.js";
-import { t } from "./translate-material-BYRDtSEk.js";
+import { r as e } from "./i18n-provider-hrtFm9jD.js";
+import { t } from "./translate-material-CdJBbURx.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

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

@@ -17,7 +17,7 @@ either can be used alone.
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
 | <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, and `rowMenuColumn` to drop both in a table |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
-| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"` |
+| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"`; no `totalCount` for a feed with no total (no range, Previous / Next only) |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
@@ -932,6 +932,8 @@ export default function Students() {
       },
     ]}
   />
+  {/* A ConfirmDialog (or ConfirmationDialog, CustomDialog) takes the same
+      prop: onCloseAutoFocus={(e) => { e.preventDefault(); confirm?.focus(); }} */}
   <Dialog open={confirm != null} onOpenChange={(open) => !open && setConfirm(null)}>
     <DialogContent
       // Without this, the focus goes back to what Radix remembers, which is
@@ -1237,11 +1239,17 @@ import { FilterBar, PageFooter } from '@nxgt/material/components';
 
 Previous exists when the URL has a trail; Next when `pageInfo` has a next page and an `endCursor`. An end with no page is a disabled button with `aria-disabled`, not a link. Previous and Next are named "Previous" / "Next", or "Previous page" / "Next page" with `pageControls="icon"` (`material.table.pagination.*` keys, as the table's).
 
+A cursor feed whose API answers `pageInfo` and the items but no total (a news or notifications feed) leaves `totalCount` out: the footer shows no range (never a made-up total), only the controls, usually with `pageControls="icon"`, and still renders nothing for an empty first page.
+
+```tsx
+<PageFooter pageInfo={pageInfo} params={params} pageSize={20} count={items.length} pageControls="icon" />
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `params` | `URLSearchParams` | — | the page's search params: the trail is read from them and every other param is kept in the hrefs |
 | `pageInfo` | `{ hasNextPage, endCursor? }` | — | the connection's page info |
-| `totalCount` | `number` | — | items matching the query across every page |
+| `totalCount` | `number` | — | items matching the query across every page; leave it out for a cursor feed with no total: no range, only the Previous / Next controls (Next disabled once `pageInfo.hasNextPage` is false) |
 | `pageSize` | `number` | — | items per page; it places the range from the trail |
 | `count` | `number` | `pageSize` | items on this page, for a short last page |
 | `pageHref` | `(params) => string` | ``?${params}`` | a page's href |

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

@@ -963,6 +963,8 @@ import { NowIndicator } from '@nxgt/material/components';
 | `tone` | `'strong' \| 'subtle'` | `'strong'` | a line with a dot, named "Current time: 10:40"; or a faint line, hidden from assistive technology |
 | `showTime` | `boolean` | `false` | the time in a pill before the line, in the gutter at the parent's left |
 | `timeFormat` | `string` | `'HH:mm'` | the time's date-fns format |
+| `minutes` | `number` | — | the minute to draw at, counted like `startMinutes`, instead of reading `now`'s clock (a column that keeps its own time, such as a day in another time zone); `now` still gates the line |
+| `timeLabel` | `string` | `now` in `timeFormat` | the text of the `showTime` pill |
 
 `useNow()` is the clock behind it (`null` until mounted), and `nowPosition()`
 the maths.

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

@@ -226,6 +226,7 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
 | `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` restores the earlier look |
+| `onCloseAutoFocus` | `(event: Event) => void` | — | called as the dialog closes, before the focus goes back; `event.preventDefault()` places it yourself, e.g. `ctx.focusTrigger()` of a `ServerTable` bulk action whose button a redraw replaced |
 
 On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
 
@@ -234,7 +235,9 @@ it hands the focus back to what opened it, or to the menu's trigger when
 that was a `DropdownMenuItem` (gone by then); `Dialog`, `Sheet` and
 `Drawer` do the same.
 `ConfirmationDialog` is a `Dialog` and focuses its first control (its form
-field, or its first button).
+field, or its first button). `ConfirmDialog`, `ConfirmationDialog` and
+`CustomDialog` take `onCloseAutoFocus`: opened from a `ServerTable` bulk
+action, pass `onCloseAutoFocus={(e) => { e.preventDefault(); ctx.focusTrigger(); }}`.
 
 ![ConfirmationDialog](../previews/feedback-status-confirmationdialog.webp)
 
@@ -327,6 +330,7 @@ import { Atom } from 'lucide-react';
 | `title` / `description` | `ReactNode` | — | hidden when empty |
 | `footer` | `ReactNode` | — | after a separator; omitted when empty |
 | `open` / `onOpenChange` | Radix `Dialog` props | uncontrolled | control it from outside |
+| `onCloseAutoFocus` | `(event: Event) => void` | — | called as it closes, before the focus goes back; `event.preventDefault()` places it yourself |
 
 **Storybook:** `Feedback & status/CustomDialog` · **Vue:** `CustomDialog`
 

package/docs/components/rich-widgets.md

@@ -8,7 +8,7 @@ the app owns the data.
 | --- | --- | --- |
 | <img src="../previews/rich-widgets-chat-overview.webp" width="96" alt=""> | [Chat kit](#chat-kit) | Inbox, thread, grouped bubbles with receipts and replies, composer with quick replies, floating widget |
 | <img src="../previews/rich-widgets-kanban.webp" width="96" alt=""> | [Kanban](#kanban) | Board with columns, swimlanes, WIP limits and drag-and-drop |
-| <img src="../previews/rich-widgets-eventcalendar.webp" width="96" alt=""> | [EventCalendar](#eventcalendar) | Month / week / day / agenda calendar, phone to desktop |
+| <img src="../previews/rich-widgets-eventcalendar.webp" width="96" alt=""> | [EventCalendar](#eventcalendar) | Month / week / day / agenda calendar, a day view split by resource, a named time zone, phone to desktop |
 | <img src="../previews/rich-widgets-native-charts-linechart.webp" width="96" alt=""> | [Charts](#charts) | Native SVG charts (line, area, bar, pie, donut, gauge, radial, funnel, heat map, radar, scatter, combo) with keyboard, summary and View data; the Nivo ones were removed in 3.0 |
 | <img src="../previews/rich-widgets-drawing.webp" width="96" alt=""> | [Drawing](#drawing) | Vector drawing from a scene of plain data or JSX primitives: theme colours, accessible, focusable nodes, strict-CSP safe |
 | <img src="../previews/rich-widgets-emojipicker.webp" width="96" alt=""> | [EmojiPicker](#emojipicker) | Shared emoji picker and list |
@@ -243,8 +243,111 @@ function Schedule() {
 | `phoneView` | `EventCalendarView` | — | the view while 767px or narrower, until one is picked |
 | `now` | `Date` | the clock | today and the now line — fix it in tests and demos |
 | `scrollToHour` | `number` | `7` | the hour the week and day views open on when today is not shown |
+| `resources` | `EventCalendarResource[]` | — | the day view draws one column per resource, see [Resources](#eventcalendar-resources) |
+| `timeZone` | `string` | the machine's | an IANA zone the grid, today and the times follow, see [Time zone](#eventcalendar-time-zone) |
 
-**Storybook:** `Rich widgets/EventCalendar`, `Rich widgets/EventCalendar/Layouts` · **Vue:** `EventCalendar` (the new props and layouts: React only for now, #892)
+**Short events.** Events that do not overlap in time share a column and keep the
+full width. An event is drawn at least 24px tall only where there is free space
+below it (up to the next event); back-to-back short events sit flush at their
+true heights, so at 52px an hour a 20-minute event is 17px tall (13px compact).
+
+**Accessibility.** Back-to-back short events render as chips 17px tall (13px in
+compact density), under the 24px target size of WCAG 2.5.8. This is an accepted
+trade-off: each event stays reachable by keyboard (Tab and the arrow keys move
+through the events), and the agenda view lists every event in full, which is the
+accessible route.
+
+### EventCalendar resources
+
+`resources` splits the **day view** into one column per room, person or team
+(the week, workweek, month and agenda views ignore it: resources are day-view
+only, and a week keeps its days). Give each event a
+`resourceId`:
+
+```tsx
+import { EventCalendar, type CalendarEvent } from '@nxgt/material/components';
+
+const resources = [
+	{ id: 'a', label: 'Room A', description: 'Ground floor' },
+	{ id: 'b', label: 'Room B' },
+];
+const events: CalendarEvent[] = [
+	{ id: '1', title: 'Visit 1', start: '2026-03-12T09:00:00Z', end: '2026-03-12T10:00:00Z', resourceId: 'a' },
+	{ id: '2', title: 'Visit 2', start: '2026-03-12T09:00:00Z', end: '2026-03-12T09:30:00Z', resourceId: 'b' },
+];
+
+<EventCalendar
+	view="day"
+	date="2026-03-12"
+	events={events}
+	resources={resources}
+	onChange={({ event }) => save(event.id, event.resourceId)}
+	onSlotClick={(slot) => create(slot.start, slot.end, slot.resourceId)}
+/>;
+```
+
+- **Columns.** A sticky header names each resource (its `label`, and the
+  `description` under it) while the hours scroll; the columns share the width
+  and scroll sideways under 11rem each. The all-day lane is per resource too.
+- **Tone.** In the day view, a resource may take a `tone` (one of the library's tones, or one the
+  app declared, never a raw colour): a small mark beside its name in the header
+  and in the phone switcher, and the colour of that column's events that set no
+  `color` of their own.
+- **Unassigned.** An event with no `resourceId`, or one that matches no
+  resource, shares a leading "Unassigned" column. It is drawn only while such
+  an event exists, so a calendar whose events all have a resource has none.
+- **Moving.** Dragging an event into another column sets its `resourceId` (into
+  "Unassigned" removes it) and keeps the time it was dropped at, in the same
+  `onChange` as a plain move: `change.event.resourceId` is the new one,
+  `change.previous.resourceId` the old. Dragging and resizing inside a column
+  keep it. In the day view, the popover that opens on an event also has a
+  **Resource** select (the keyboard's way to reassign), and `Ctrl`+arrow moves keep the column.
+  `onSlotClick` receives the column's id as `slot.resourceId` (none for
+  "Unassigned").
+- **Phone.** At 767px or less a select (named "Resource") shows one resource
+  at a time, never squeezed columns; it starts on the first column.
+- **Accessibility.** Each column is a `group` named by the resource and the
+  date (`Room A, Thursday, March 12th, 2026`), and an event's name includes
+  its resource (`Visit 1, Room A`).
+
+### EventCalendar time zone
+
+`timeZone` (an IANA name such as `Africa/Lagos`) makes the calendar read that
+zone's wall clock. Without it, nothing changes: the machine's clock.
+
+- **What follows the zone:** the grid's hours, "today" and the date the
+  calendar opens on, the now line and its pill, the day boundaries (an event
+  that is after midnight in the zone is on the next day), the times on chips,
+  in the agenda and in the popover, and the corner of the time grid, which
+  names the zone's offset (`UTC+9`; the popover does too).
+- **What stays true:** `start` and `end` are instants and stay so. The `Date`s
+  given to `onSlotClick` and the `start` / `end` written by `onChange` are
+  real instants too; an all-day slot or event runs from the zone's midnight to
+  its next midnight. The week, month and agenda views derive their days from
+  the zone the same way.
+- **Clock changes.** The **day view** draws the day's real length: 23 hours of
+  axis on the day the clocks go forward (the hour lines skip the missing hour)
+  and 25 on the day they go back (the repeated hour is drawn twice). An event
+  is placed by elapsed time, so one that crosses the change keeps its real
+  duration. The week and workweek views keep **24 wall-clock rows** a day, so
+  the hours line up across the columns. Dragging or resizing turns the dropped
+  position into an instant with the helpers of `@nxgt/material-core/zone`: a
+  moved event keeps its wall-clock time on the other day (09:00 stays 09:00
+  across a change, though the offset differs), and a time the day skips lands
+  after the gap.
+- **Labels.** The times on chips, the agenda and the popover are read from the
+  true instants with the zone's own clock, never through the browser's date
+  maths: a wall time the browser's zone skips (its own clock change) still
+  reads as it is in the calendar's zone.
+- **Unknown zone.** A name `Intl` does not know reads `UTC`, as the other date
+  fields do, with one development warning.
+
+```tsx
+// 09:00 in Tokyo is drawn at 09:00 whatever zone the browser is in.
+<EventCalendar view="day" date="2026-03-12" timeZone="Asia/Tokyo" events={events} />
+```
+
+**Storybook:** `Rich widgets/EventCalendar`, `Rich widgets/EventCalendar/Layouts`, `Rich widgets/EventCalendar/Resources`, `Rich widgets/EventCalendar/Resources on a phone`, `Rich widgets/EventCalendar/Resources a11y`, `Rich widgets/EventCalendar/Time zone`, `Rich widgets/EventCalendar/Back to back`, `Rich widgets/EventCalendar/Resource tone`, `Rich widgets/EventCalendar/Hydration` · **Vue:** `EventCalendar` (the new props and layouts, `resources` and `timeZone`: React only for now, #892 and #1780)
 
 ---
 

package/docs/troubleshooting.md

@@ -137,6 +137,7 @@ words in your error.
 - [`defineFilterModel: field "period" scope needs a default operator taking one value`](#definefiltermodel-field-period-scope-needs-a-default-operator-taking-one-value)
 - [`errors` shows nothing on the filter bar](#errors-shows-nothing-on-the-filter-bar)
 - [`@nxgt/material-core/filter: unknown time zone "…", using the runtime's`](#nxgtmaterial-corefilter-unknown-time-zone--using-the-runtimes)
+- [`` [@nxgt/material] EventCalendar: unknown timeZone "Mars/Olympus", reading UTC instead. ``](#nxgtmaterial-eventcalendar-unknown-timezone-marsolympus-reading-utc-instead)
 - [``Filter: the autocomplete field(s) … have neither `options` nor a `search` in `fieldProps`: their editor has nothing to offer.``](#filter-the-autocomplete-fields--have-neither-options-nor-a-search-in-fieldprops-their-editor-has-nothing-to-offer)
 - [`Filter bar parts must be used inside <Filter variant="bar">`](#filter-bar-parts-must-be-used-inside-filter-variantbar)
 - [A date preset's count differs between the server and the page](#a-date-presets-count-differs-between-the-server-and-the-page)
@@ -2577,6 +2578,19 @@ const clock = {
 const conditions = resolveDateConditions(effectiveConditions(query, model, locked), model, clock);
 ```
 
+### `` [@nxgt/material] EventCalendar: unknown timeZone "Mars/Olympus", reading UTC instead. ``
+
+**When:** in development, once per name, when `EventCalendar`'s `timeZone` is not
+an IANA name `Intl` knows (`'Paris'`, `'UTC+2'`, a typo).
+**Why:** the calendar reads `UTC` instead, as the other date fields and
+`@nxgt/material-core/zone` do, so a server and a browser draw the same grid; the
+hours are then off by the zone's offset.
+**Fix:** pass an IANA name (`'Europe/Paris'`, `'Africa/Lagos'`):
+
+```tsx
+<EventCalendar view="day" timeZone="Europe/Paris" events={events} />
+```
+
 ### ``Filter: the autocomplete field(s) … have neither `options` nor a `search` in `fieldProps`: their editor has nothing to offer.``
 
 **When:** in the console in development, when `Filter variant="bar"` or

package/package.json

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