@nxgt/material 3.92.0 → 3.94.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @nxgt/material
 
+## 3.94.0
+
+### Minor Changes
+
+- [#2734](https://github.com/softistx/nxgt-material/pull/2734) [`3bd1eab`](https://github.com/softistx/nxgt-material/commit/3bd1eabd518a0c96510af3951ec17380e110799c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(entity-header): lay the metadata out as a grid of equal columns, a small label above each value, instead of a wrapping row of label-beside-value pairs. A link or a text button in a value keeps the text's height, so every value of a row is as tall as plain text and none sits lower (its 44px tap target stays as a hit area on a touch pointer, adding no height), and a long value wraps inside its column ([#2731](https://github.com/softistx/nxgt-material/issues/2731)). The default look changes; the `dl`, `dt`, `dd` and `data-slot="entity-metadata"` markup is unchanged. A self-contained test that measured label and value on one line, or the position of a metadata item, needs its numbers updated.
+
+- [#2718](https://github.com/softistx/nxgt-material/pull/2718) [`ceafaa0`](https://github.com/softistx/nxgt-material/commit/ceafaa063f79873c8c557c2de4187883710862f6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `MarkdownTextareaField` and `MarkdownTextareaFormField` (React Hook Form) are new, exported from `@nxgt/material` and `@nxgt/material/components`: a textarea for Markdown with the usual label, helper text, error and `maxLength` counter, a Write / Preview tab list whose preview is rendered by `Markdown` (math on, `mermaid` off by default), and a collapsed formatting help. New `material.markdown-textarea-field.*` i18n keys (en, fr).
+
+- [#2717](https://github.com/softistx/nxgt-material/pull/2717) [`98f3a28`](https://github.com/softistx/nxgt-material/commit/98f3a2836acab8d685c554178a7839caa579af9e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuestionCard` takes rich content ([#2713](https://github.com/softistx/nxgt-material/issues/2713)): `question.markdown` draws the prompt, string option labels, explanation and hints as safe Markdown with math (mermaid off, raw HTML not rendered); `question.hints` are revealed one at a time ("Show hint 1 of N", the focus moves to the hint); `QuestionOption.explanation` and `question.references` appear once revealed or in a `preview`; a `code` question takes `starterCode` and `examples` (a table). The single `hint` keeps working but is deprecated in favour of `hints`. New exports: the `QuestionReference` and `QuestionExample` types; new `material.quiz.rich.*` strings (English and French).
+
+### Patch Changes
+
+- [#2725](https://github.com/softistx/nxgt-material/pull/2725) [`bccd1c0`](https://github.com/softistx/nxgt-material/commit/bccd1c0de2c1a928592743de7bf91ca5c4788b41) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Markdown`'s math renders under a strict CSP on the server too: KaTeX's inline `style="…"` attributes are replaced by `mk-<hash>` classes and one `<style>` holding their rules, which takes the nonce of the nearest `NonceProvider` (`style-src-elem 'nonce-…'` allows it), so `style-src-attr 'none'` no longer needs relaxing for math and the formula keeps its layout. Math under a nonce policy therefore needs `NonceProvider` around `Markdown` (as `ScrollArea` and `Select` already do). Only mermaid's mindmap and architecture diagrams still add an un-nonced `<style>` to `<head>`: see the CSP guide. Fixes [#2166](https://github.com/softistx/nxgt-material/issues/2166).
+
+- [#2727](https://github.com/softistx/nxgt-material/pull/2727) [`e0bdb20`](https://github.com/softistx/nxgt-material/commit/e0bdb208ce99599edfb51ba82a9dbf70317bb94f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `RecordDetails`: the « · » of the « Added on … · Updated on … » line now leads the second segment instead of standing alone, so a wrapped line never ends on a dangling separator; it still renders only between two dates.
+
+## 3.93.0
+
+### Minor Changes
+
+- [#2722](https://github.com/softistx/nxgt-material/pull/2722) [`b79a80f`](https://github.com/softistx/nxgt-material/commit/b79a80f77a12d136c557326247dce03a03c9cc25) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChoiceListField` and `ChoiceListFormField`: an opt-in `rowDetail` (`true`, or `{ label, placeholder, maxLength }`) adds a textarea under each row, stored as `ChoiceRow.explanation` (why a choice is right or wrong). It is kept through reorder, add and remove; a resolver's issue on `choices.<i>.explanation` shows under it and `setFocus` reaches it. `ChoiceListField` also takes `rowDetailErrors`, and `ChoiceRowDetail` is exported. New string `material.choice-list.detail`. Off by default: existing forms are unchanged. The Vue twin is softistx/nxgt-material#2720.
+
+- [#2682](https://github.com/softistx/nxgt-material/pull/2682) [`2c416c3`](https://github.com/softistx/nxgt-material/commit/2c416c37baa0d4f3447f7d26f72f483ee02f4ce2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - EventCalendar: a `CalendarEvent` can carry `badges`, further badges drawn after `badge` (a status, a priority, a progress count) in every view and the preview, each part of the event's accessible name and a tone dot where the box is narrow or short. `EventChip` takes the same `badges`. [#2654](https://github.com/softistx/nxgt-material/issues/2654)
+
+- [#2682](https://github.com/softistx/nxgt-material/pull/2682) [`2c416c3`](https://github.com/softistx/nxgt-material/commit/2c416c37baa0d4f3447f7d26f72f483ee02f4ce2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - EventCalendar: `readOnlyEvents` forbids dragging, resizing, key moves, and edits or deletes from the preview for every event, while events stay focusable, clickable (`onEventClick`) and drawn at full strength, `onSlotClick` still fires, and no drag instruction is announced. Adds the `material.event-calendar.label` string (English and French). [#2655](https://github.com/softistx/nxgt-material/issues/2655)
+
+- [#2682](https://github.com/softistx/nxgt-material/pull/2682) [`2c416c3`](https://github.com/softistx/nxgt-material/commit/2c416c37baa0d4f3447f7d26f72f483ee02f4ce2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EventCalendar` events take a `tone` and a `status`. `tone` draws an event in one of the library's tones (a `color` still wins, then the `tone`, then its resource's), in every view and in `mode="template"`. `status: 'cancelled'` strikes the title (`<del>`), mutes the chip with a dashed outline, and adds "Cancelled" to the event's accessible name (`material.event-calendar.cancelled`, translated in English and French); a cancelled event stays draggable. `EventChip` gains `tone` and `cancelled`, and `CalendarEventStatus` is exported.
+  
+  `EventCalendarSpan` is exported: a stretch of time (a holiday, a term, a half day off) with a `label`, a `tone` and an optional `resourceId`, where a date-only `start`/`end` means whole days read in the calendar's `timeZone` and `end` is exclusive. Spans never block a slot. `EventCalendar` takes `spans` and shades them behind the events, in the thin hatch of the Refined direction (CSS classes, no inline gradient). The week and day views draw a hatched band under the hours with its label and a bar in the all-day strip (a half day only the band; with `resources`, a span shades its own column); the month shades the cell or its half, with the label from 7rem of cell width and a dot under it; the agenda and the phone's day list add a row. The shading is `aria-hidden` (the agenda and day-list rows are plain text, not controls), takes no pointer event and no tab stop, and the label is read in the name of the day or column it falls on.
+  
+  `EventCalendar` also takes `dayBadges` and `weekBadges`: records of `{ label, tone? }` keyed by a `YYYY-MM-DD` date, the week's key being its first day per `weekStartsOn`. The week and day views draw the day's badge in its header and the week's in the gutter corner; the month draws the day's next to its number and the week's on the first cell of the row (with room below its events). On a phone a badge is a small tone bar, distinct from the event dots, and the labels are read in the name of the day header or cell (`material.event-calendar.week-badge`, translated in English and French). `EventCalendarBadges` and `EventCalendarDayMarksProps` (with `spans`) are exported.
+  
+  Behaviour change: the week view now starts its days on `weekStartsOn`; before, it always used the locale's first day, so an app whose `weekStartsOn` differs from its locale sees its week view shift.
+  
+  `EventChip` is restyled: its colour bar is a thin accent inset from the chip's edges (no border on the chip's start side), and a cancelled chip fades it. `EventChip` has its own `material.event-chip.cancelled` string (English and French).
+
+### Patch Changes
+
+- [#2710](https://github.com/softistx/nxgt-material/pull/2710) [`e0a3231`](https://github.com/softistx/nxgt-material/commit/e0a32318cc3db3e9d29cf1d69277af1093db59d5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(entity-header): align each metadata value on its label's baseline, so a value taller than its label (a link with a touch target) no longer sits lower than it ([#2709](https://github.com/softistx/nxgt-material/issues/2709))
+
+- [#2682](https://github.com/softistx/nxgt-material/pull/2682) [`2c416c3`](https://github.com/softistx/nxgt-material/commit/2c416c37baa0d4f3447f7d26f72f483ee02f4ce2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - EventCalendar: a README section and a guide for spans, day and week badges, event tones, cancelled and read-only events.
+
+- [#2704](https://github.com/softistx/nxgt-material/pull/2704) [`2cc5f19`](https://github.com/softistx/nxgt-material/commit/2cc5f19b0aea3087e65a08f3ddfea70e396521bd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `RecordDetails`'s card title is set on the type scale (`title-md` emphasized, the section-title step of `FormSection variant="heading"`) at any heading level, instead of the global `h2` size (`headline-sm`) that made it larger than the page's other section headings.
+
+## 3.92.1
+
+### Patch Changes
+
+- [#2712](https://github.com/softistx/nxgt-material/pull/2712) [`d254f1c`](https://github.com/softistx/nxgt-material/commit/d254f1c5440e71279fdb67af2fe280b69b8c9ef0) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout`: the breadcrumb trail no longer carries its own left padding, so its first crumb starts on the content column's left edge (an `ActivityContent` without `inset`).
+
+- [#2696](https://github.com/softistx/nxgt-material/pull/2696) [`7d80591`](https://github.com/softistx/nxgt-material/commit/7d8059148bcffb501305e76653611a2b010d4006) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `AttributeValuesFormFieldSet` is generic over the form values like the other `*FormField` wrappers: `control` takes the typed form's `Control<T>` and `name` a `Path<T>`, so `control as never` and `name as never` are no longer needed.
+
+- [#2705](https://github.com/softistx/nxgt-material/pull/2705) [`2a7debc`](https://github.com/softistx/nxgt-material/commit/2a7debcfb9688d7428e7ae52cf808af8eba5ac36) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DayGroupedList`, its `useDayGroups` hook, `groupByDay`, `dayGroupOf`, `DAY_GROUP_ORDER` and the `DayGroupedListProps`, `DayGroupsOptions`, `ResolvedDayGroup`, `DayGroup`, `DayGroupKey` and `DayGroupDate` types are now exported from `@nxgt/material` and `@nxgt/material/components`, as the docs describe; only `groupByDate` was reachable before.
+
+- [#2701](https://github.com/softistx/nxgt-material/pull/2701) [`a9057e8`](https://github.com/softistx/nxgt-material/commit/a9057e8e32d999ff633de37a806484a33d6316d7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `RecordDetails` takes the props of a `div` (`data-*`, `id`, `aria-*`, `className`, …) and spreads them on its root card; `className` is merged with the component's own classes.
+
 ## 3.92.0
 
 ### Minor Changes

package/README.md

@@ -664,9 +664,10 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-field.webp" width="120" alt="Field"> | [`Field`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#field) · `FormField` | Renders the field matching a config `type` (text, select, date, upload, otp…). | `Field` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#formsection) | A titled section of a form (an `h2` by default) with an optional description and actions (`variant="heading"` puts the title on the type scale), its fields in the form grid's columns, one column on a phone. | `FormSection` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-repeatablegroup.webp" width="120" alt="RepeatableGroup"> | [`RepeatableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#repeatablegroup) · `RepeatableGroupFormField` | Rows of fields a user adds, removes and reorders (`useFieldArray`), a list for assistive tech, focus that follows each change, one column on a phone. | `RepeatableGroup`, `RepeatableGroupFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-choicelistfield.webp" width="120" alt="ChoiceListField"> | [`ChoiceListField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#choicelistfield) · `ChoiceListFormField` | An editable list of answer choices with correct marks: single (radios) or multiple (checkboxes), min and max rows, reorder buttons, a stable id per row, errors per row and for the list. | not yet |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-choicelistfield.webp" width="120" alt="ChoiceListField"> | [`ChoiceListField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#choicelistfield) · `ChoiceListFormField` | An editable list of answer choices with correct marks: single (radios) or multiple (checkboxes), min and max rows, reorder buttons, a stable id per row, errors per row and for the list; `rowDetail` adds an explanation textarea under each row (`ChoiceRow.explanation`). | not yet (#2720) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-textfield.webp" width="120" alt="TextField"> | [`TextField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#textfield) · `TextFormField` | Labelled input with leading / trailing adornments and helper text. | `TextField`, `TextFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-textareafield.webp" width="120" alt="TextareaField"> | [`TextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#textareafield) · `TextareaFormField` | Labelled textarea with row sizing and a `maxLength` counter. | `TextareaField`, `TextareaFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-markdowntextareafield.webp" width="120" alt="MarkdownTextareaField"> | [`MarkdownTextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#markdowntextareafield) · `MarkdownTextareaFormField` | Textarea for Markdown and math with a Write / Preview tab list. | not yet (#2719) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-emailfield.webp" width="120" alt="EmailField"> | [`EmailField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#emailfield) · `EmailFormField` | Validates on blur; shows a `mailto:` button once the address is valid. | `EmailField`, `EmailFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-passwordfield.webp" width="120" alt="PasswordField"> | [`PasswordField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#passwordfield) · `PasswordFormField` | Show / hide toggle and an optional strength meter (`scorePassword`). | `PasswordField`, `PasswordFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-numberfield.webp" width="120" alt="NumberField"> | [`NumberField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#numberfield) · `NumberFormField` | Emits `number \| null`, with min / max / step clamping, +/− buttons and a suffix. | `NumberField`, `NumberFormField` |
@@ -911,7 +912,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-chat-overview.webp" width="120" alt="ChatInbox"> | [`ChatInbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#chat-kit), `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer`, `ChatThreadHeader`, `ChatWidget`, `ChatConversationItem`, `ChatActionProposal`, `ChatToolActivity`… | Chat kit: inbox (list + thread, container queries from `@md`), bubbles grouped by sender or flat rows, read receipts, replies, reactions and a message toolbar, a pill composer with quick replies, attachments and stop, a floating chat widget, an approval card for an assistant's proposed action and a compact tool-step row; 320 px to desktop, light and dark. | `ChatInbox`, `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer` (same parts; `ChatActionProposal` and `ChatToolActivity` not yet, [#2145](https://github.com/softistx/nxgt-material/issues/2145)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-kanban.webp" width="120" alt="Kanban"> | [`Kanban`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#kanban) | Board with columns, swimlanes, WIP limits, search, and drag-and-drop cards and columns. | `Kanban` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a recurring template week (`mode="template"`), an event preview you can route to your own edit and delete (`onEventEdit`, `onEventDelete`, `eventPreview`, `previewFields`), a now line, a mini-month side panel and a phone layout. | `EventCalendar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a recurring template week (`mode="template"`), an event preview you can route to your own edit and delete (`onEventEdit`, `onEventDelete`, `eventPreview`, `previewFields`), a now line, a mini-month side panel, a phone layout, background `spans` (closures, half days), `dayBadges` / `weekBadges`, an event `tone`, `status: 'cancelled'` and `readOnlyEvents` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/event-calendar.md)). | `EventCalendar` (without `spans`, `dayBadges`, `weekBadges`, `readOnlyEvents`, `badges`, `tone` and `status`, React only for now: [#2526](https://github.com/softistx/nxgt-material/issues/2526)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-native-charts-linechart.webp" width="120" alt="LineChart"> | [`LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`, `RadialBarChart`, `FunnelChart`, `HeatmapChart`, `RadarChart`, `ScatterChart`, `ComboChart`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#charts) from `@nxgt/material/charts` | Native SVG charts with keyboard point navigation, a screen-reader summary, a "View data" table, `patterns`, a hide/isolate legend, zoom and phone scroll (client-only entry; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)). | [not yet](https://github.com/softistx/nxgt-material/issues/1255) (#1255) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#emojipicker), `EmojiList` | Shared picker. `ChatComposer` takes `emojis`; `Markdown` expands `:shortcode:`; the RTE toolbar uses the same picker. | `EmojiPicker`, `EmojiList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. | `MentionList` |
@@ -922,7 +923,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-richtextviewer.webp" width="120" alt="RichTextViewer"> | [`RichTextViewer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#richtextviewer) | Read-only view of a saved document (HTML, JSON or Markdown) with the editor's typography; sanitised, server-safe, no editor. From `@nxgt/material/editor/viewer`. | — (a `vue` issue, not a port) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#codeeditor) · `CodeEditorFormField` | Monaco code field in theme presets (App, Moonlight, Soft, or your own `defineCodeTheme`), with a floating tool pill, a status bar, `markers` for your own problems, a `readOnly` reader look, view props, a `ref` handle, file tabs (`files`) and full screen. From `@nxgt/material/code-editor`. | `CodeEditor`, `CodeEditorFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-codeeditor-diff.webp" width="120" alt="CodeDiff"> | [`CodeDiff`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#codediff) | A Monaco diff in the code editor's frame and themes: side by side or inline (always inline on a phone), previous/next change, `+N −M` counts and copy. From `@nxgt/material/code-editor`. | `CodeDiff` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#quiz), `QuestionCard` · [`QuestionNavigator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#questionnavigator) | Exam or practice quizzes: step progress, instant feedback with explanations and hints, a time limit, keyboard shortcuts, and a results screen with a score ring, a breakdown and a retry of the misses. Container queries. | `Quiz`, `QuestionCard` (modes and results: React only for now); `QuestionNavigator` React only for now |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#quiz), `QuestionCard` · [`QuestionNavigator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#questionnavigator) | Exam or practice quizzes: step progress, instant feedback with explanations and hints, a time limit, keyboard shortcuts, `QuestionCard` rich content (Markdown and math, progressive hints, per-option explanations, references, code starter and examples), and a results screen with a score ring, a breakdown and a retry of the misses. Container queries. | `Quiz`, `QuestionCard` (modes and results: React only for now); `QuestionNavigator` React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-drawing.webp" width="120" alt="Drawing"> | [`Drawing`, `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path`, `Text`, `Group`, `Image`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#drawing) from `@nxgt/material/draw` | Vector drawings from a scene of plain data or from JSX: theme-role colours that follow light and dark, no inline style (strict CSP), a `title` or `decorative` enforced by the type, focusable nodes with `onClick` and a focus ring, text that wraps with Inter's metrics and is refined by the browser. Client-only entry. | React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-barcode.webp" width="120" alt="Barcode"> | [`Barcode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#barcode), `LabelSheet`, `Label`, `barcodeGeometry` | Code 128 and Data Matrix as accessible SVG that follows the theme and prints black on white, and a printed sheet of labels. Its own entry, `@nxgt/material/barcode`, server-safe. | React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-calculator.webp" width="120" alt="Calculator"> | [`Calculator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#calculator) | Exact decimal calculator with the usual precedence, a shaped keypad, tape, memory, keyboard, copy and paste. Its own entry, `@nxgt/material/calculator`; `CalculatorField` and `CalculatorFormField` are in `@nxgt/material/calculator-field`. | React only for now |

package/dist/{alert-dialog-Bz5PlYKp.js → alert-dialog-BaqK-rmd.js}

@@ -4,7 +4,7 @@ import { o as n } from "./dist-DVRQkaTK.js";
 import { r } from "./dist-DWZXlCZR.js";
 import { a as i } from "./dist-DHdUUM1w.js";
 import { t as a } from "./in-dialog-D61Yeaol.js";
-import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-CAAvJ6p5.js";
+import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-S7g7q_Yn.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { Fragment as y, isValidElement as b } from "react";

package/dist/{async-slice-veSVxKqt.js → async-slice-BfNpIJAH.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-CxyFsfO0.js";
+import { l as e, r as t, s as n, u as r } from "./translator-VtzVrnLm.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-a3tH3pq4.js → button-CozGHXAv.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, t as i } from "./spinner-CHWFXCfd.js";
+import { n as r, t as i } from "./spinner-D7ol2n_-.js";
 import { t as a } from "./dist-DkQbkF9T.js";
 import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-Bwg_caHO.js";
 import { t as f } from "./is-production-GLw59WU8.js";

package/dist/{calculator-BtuKV3PK.js → calculator-BIx6cwgU.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { d as t, n, r, t as i } from "./tabs-BideU0Rb.js";
-import { t as a } from "./button-a3tH3pq4.js";
-import { t as o } from "./use-material-translation-DA5ECZfA.js";
-import { t as s } from "./icon-button-BylI02aX.js";
+import { d as t, n, r, t as i } from "./tabs-DyiFTy5g.js";
+import { t as a } from "./button-CozGHXAv.js";
+import { t as o } from "./use-material-translation-Cx5u36V5.js";
+import { t as s } from "./icon-button-B9WjQ3RO.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as l } from "./useEvent-2fKq-6w8.js";
 import { t as u } from "./useLatest-C2PnQEeD.js";
@@ -11,7 +11,7 @@ import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { n as m, t as h } from "./calculator-context-BugcKuVG.js";
 import { a as g, c as _, i as v, l as y, n as b, o as ee, r as te, s as ne } from "./calculator-announce-DRd2c6Dq.js";
-import { i as re, t as ie } from "./pos-types-BNXbls3v.js";
+import { i as re, t as ie } from "./pos-types-BIeZGGAs.js";
 import { a as ae, r as oe } from "./key-layout-cR79xfGE.js";
 import { n as x, r as se, t as ce } from "./programmer-word-CNCF7DJF.js";
 import { t as le } from "./standard-layout-BuSRr3TY.js";
@@ -279,11 +279,11 @@ function Le({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var Re = {
-	scientific: () => import("./scientific-variant-Ku9feVN1.js"),
-	pos: () => import("./pos-variant-CZ3OZtPq.js"),
-	programmer: () => import("./programmer-variant-DVu-pYhB.js"),
-	financial: () => import("./financial-variant-B5iZ3pYf.js"),
-	conversion: () => import("./conversion-variant-C4t7aH9d.js")
+	scientific: () => import("./scientific-variant-CXL1ayb7.js"),
+	pos: () => import("./pos-variant-Cdn1AVoA.js"),
+	programmer: () => import("./programmer-variant-CMBybkqw.js"),
+	financial: () => import("./financial-variant-Bqo9-swy.js"),
+	conversion: () => import("./conversion-variant-aIBhul_U.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();
 };

package/dist/calculator-field.js

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./button-a3tH3pq4.js";
-import { t as n } from "./use-material-translation-DA5ECZfA.js";
-import { t as r } from "./icon-button-BylI02aX.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-BKzM6TWN.js";
-import { r as l, t as u } from "./currency-field-D0UQb5pn.js";
+import { t } from "./button-CozGHXAv.js";
+import { t as n } from "./use-material-translation-Cx5u36V5.js";
+import { t as r } from "./icon-button-B9WjQ3RO.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-D2aYI4v7.js";
+import { r as l, t as u } from "./currency-field-IcEMAcAw.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-BtuKV3PK.js";
+import { t as p } from "./calculator-BIx6cwgU.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/{calculator-segment-CyB9IhEq.js → calculator-segment-BsaxUtzL.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-DA5ECZfA.js";
+import { t as e } from "./use-material-translation-Cx5u36V5.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/calculator/partials/calculator-segment.tsx
 function n({ label: n, choices: r, value: i, nameKey: a, onChange: o }) {

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-BtuKV3PK.js";
+import { n as e, t } from "./calculator-BIx6cwgU.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./button-a3tH3pq4.js";
-import { t as i } from "./use-material-translation-DA5ECZfA.js";
+import { t as r } from "./button-CozGHXAv.js";
+import { t as i } from "./use-material-translation-Cx5u36V5.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-BwGvGx_S.js";
+import { t as d } from "./chip-DMEUGYdC.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-BwGvGx_S.js → chip-DMEUGYdC.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-CHWFXCfd.js";
+import { n as t } from "./spinner-D7ol2n_-.js";
 import { s as n } from "./use-click-lock-Bwg_caHO.js";
-import { t as r } from "./use-material-translation-DA5ECZfA.js";
+import { t as r } from "./use-material-translation-Cx5u36V5.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-BLkmEoCi.js → code-editor-BWfky-aN.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./dist-DWZXlCZR.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-B2ctUFti.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-CawkIlW8.js";
 import { a as c, i as l, n as u } from "./field-blur-context-BLGgf_3z.js";
-import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-azkXY5w2.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BpOEBsSt.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-DA5ECZfA.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-DhAC_tCs.js";
+import { t as _ } from "./use-material-translation-Cx5u36V5.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-BUaNYJuw.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-DpaP0lm1.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,13 +1,13 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DWZXlCZR.js";
-import { o as n, r, s as i, t as a } from "./toolbar-items-azkXY5w2.js";
-import { t as o } from "./use-material-translation-DA5ECZfA.js";
-import { i as s, n as c, o as l } from "./code-language-items-DhAC_tCs.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-BpOEBsSt.js";
+import { t as o } from "./use-material-translation-Cx5u36V5.js";
+import { i as s, n as c, o as l } from "./code-language-items-BUaNYJuw.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { t as f } from "./use-mobile-BDro060N.js";
 import { t as p } from "./react-node-text-Crkpfpco.js";
-import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-BLkmEoCi.js";
+import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-BWfky-aN.js";
 import { r as D, t as O } from "./field-blur-DkiZOVNV.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";

package/dist/{code-language-items-DhAC_tCs.js → code-language-items-BUaNYJuw.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-B2ctUFti.js";
-import { t as n } from "./use-material-translation-DA5ECZfA.js";
+import { d as e, f as t } from "./dropdown-menu-CawkIlW8.js";
+import { t as n } from "./use-material-translation-Cx5u36V5.js";
 import { t as r } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as i } from "./live-status-BGPaN8r8.js";
 import { useEffect as a, useRef as o, useState as s } from "react";

package/dist/components/components.css

@@ -216,5 +216,6 @@
 @import "./background-shared.css";
 @import "./ui/layout/app-search/app-search.css"; /* AppSearchBar, SearchView */
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
+@import "./ui/widgets/event-calendar/event-calendar-backdrop.css"; /* EventCalendar spans: the hatch and its label */
 @import "./ui/widgets/drawing/drawing-animate.css";
 @import "./ui/widgets/barcode/barcode.css"; /* @nxgt/material/barcode: symbol colours, label sheet */

package/dist/components/ui/widgets/event-calendar/event-calendar-backdrop.css

@@ -0,0 +1,43 @@
+/* EventCalendar spans (holidays, terms, closures): the thin hatch of direction
+ * A Refined, as CSS classes (no inline gradient, so the CSP holds). The
+ * shading is decoration under the events; the label sits on an opaque pill in
+ * the tone's text colour, which keeps it AA on the hatch. The tone comes from
+ * the nearest `data-tone`. */
+@layer components {
+	.nxgt-ec-backdrop {
+		background-image: repeating-linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-tone) 42%, transparent) 0 1px,
+			transparent 1px 7px
+		);
+	}
+	.nxgt-ec-backdrop-bar {
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--nxgt-tone) 28%, transparent);
+	}
+	.nxgt-ec-backdrop-label {
+		display: block;
+		width: fit-content;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: 2px 6px;
+		border-radius: 4px;
+		border: 1px solid var(--border);
+		background: var(--card);
+		color: var(--nxgt-tone-text);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.2;
+	}
+	.nxgt-ec-backdrop-label-css::before {
+		content: attr(data-label);
+	}
+	.nxgt-ec-backdrop-dot {
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 9999px;
+		background: var(--nxgt-tone);
+	}
+}