@nxgt/material-vue 0.39.0 → 0.40.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @nxgt/material-vue
 
+## 0.40.1
+
+### Patch Changes
+
+- [#614](https://github.com/softistx/nxgt-material/pull/614) [`a97d148`](https://github.com/softistx/nxgt-material/commit/a97d14807b15c5508faa369b78d68167ef9bbc02) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DropdownMenuItem`, `ContextMenuItem` and `MenubarItem` with `asChild` (a link item) work again ([#611](https://github.com/softistx/nxgt-material/issues/611)). Since 2.21.0 the React items handed their Slot a list (the `loading` spinner beside the children), so a menu with an `asChild` item threw "Primitive.div failed to slot onto its children" when it opened. The child is now the item, and a busy one shows its spinner inside it. In Vue, an `as-child` item that is `loading` had the spinner take the item's attributes in place of the link; the spinner now goes inside the link too, and the link is `aria-disabled` while busy.
+
+## 0.40.0
+
+### Minor Changes
+
+- [#600](https://github.com/softistx/nxgt-material/pull/600) [`dc87227`](https://github.com/softistx/nxgt-material/commit/dc8722706540ffb87af8e6da003ef86e48f5279c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `FacetGroup`, a collapsible facet for a filter panel: a header button (a disclosure with `aria-expanded` and `aria-controls`, inside a heading) showing the `title`, a count Badge of the `activeCount` (hidden at 0) and a chevron that turns over unless the user prefers reduced motion, over the values, typically a `CheckboxGroup` with option counts. It is open by default (`defaultOpen`), controlled with `open` / `onOpenChange` (React) or `v-model:open` (Vue). With active values the toggle is named "Level, 2 selected" (`material.facet-group.name`, an ICU plural; "Level, 2 sélectionnés" in French); `onClear` (React) / `@clear` (Vue) shows a "Clear" button named "Clear Level" (`material.facet-group.clear` and `clear-label`), a sibling of the toggle that hands the focus to the toggle as it disappears. `density` is `'comfortable'` (40px header) or `'compact'` (28px), as DataTable's, with every target at least 24px; `headingLevel` sets the heading (default 3). Exported from `/components` with the `FacetGroupProps` and `FacetGroupDensity` types. The facets panel built from it comes later.
+  
+  Nothing to change in an existing app.
+
+- [#603](https://github.com/softistx/nxgt-material/pull/603) [`79a3e81`](https://github.com/softistx/nxgt-material/commit/79a3e8157d066d39136c2aa1b06361a4d3a818c3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DropdownMenuItem`, `ContextMenuItem` and `MenubarItem` take `loading`: a busy item (a sign-out in flight) stays focusable and in the arrow-key order, is `aria-busy` and `aria-disabled`, shows a spinner in place of its leading icon, and ignores a selection (`onSelect` / `@select` does not fire and the menu stays open). It is not `disabled`, which would take the item out of the focus.
+
+- [#602](https://github.com/softistx/nxgt-material/pull/602) [`202ff81`](https://github.com/softistx/nxgt-material/commit/202ff8116abbcc9fe231f64d4c7483c14550ecc6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the contrast of a DataTable on a Card and the warning tone, so apps can drop their axe `color-contrast` exclusions for the DataTable header and its selected rows ([#597](https://github.com/softistx/nxgt-material/issues/597), [#598](https://github.com/softistx/nxgt-material/issues/598)).
+  
+  - **Selected rows** are a light primary tint (15 %) with `foreground` text, a bar on the inline-start edge of the first cell (a `before:` pseudo-element: it follows right-to-left and keeps the cell's own shadow) and the checkbox. Cell text and links read at 15.9:1 in light; in dark 17.5:1 on a page, 17.1:1 in a DataTable on a Card and 15.4:1 for a bare TableRow on a Card. A `text-muted-foreground` text is drawn at 70 % foreground (7.0:1 in light, 8.15:1 in dark for a bare row on a Card). The bar is 5.9:1 in light and 8.2:1 or more in dark against the row, and the checked checkbox (lightened in the dark theme, `Checkbox` in both packages) is 3:1 or more. The tint is 1.2:1 from its neighbour in light and 1.06 to 1.11:1 in dark: the bar and the checkbox are what mark the row. Vue's selected rows get the same look (they were `muted`).
+  - **Header labels** already read `foreground` (14.4:1 or more); a new "On a card" story keeps them measured. `TableCaption` (React) is `text-muted-foreground`, as in Vue, instead of near-white. The focus outline of a linked row and of its link is `foreground` (it was `ring`, 2.6:1).
+  - **`--warning`** is amber (`oklch(0.52 0.13 62)` light, `oklch(0.7 0.15 70)` dark) instead of a red-orange next to `--error`, so a warning `Alert`, `Banner`, `Badge`, `Button` or toast no longer reads as an error. As text, dark is 7.3:1 on `--background` and 6.5:1 on `--card`; light is 5.5:1 under its foreground. Alert text stays at 5:1 or more, icons at 3:1 or more. `--warning-foreground` is unchanged.
+  
+  Migration:
+  
+  - Cells that put `text-primary-foreground` on a selected row, or relied on `Typography`, `HelperText` or `Checkbox` switching colour inside one: search `text-primary-foreground` in your row and cell renderers and use the default text colour. The switch is gone.
+  - Apps that keep the shipped `--warning`: their `bg-warning` and `text-warning` surfaces and visual baselines change hue to amber, so re-check custom colour pairs. An app that sets its own `--warning` is unaffected.
+  - Drop the contrast exclusions for the DataTable header and `tr[data-state="selected"] td`.
+
+### Patch Changes
+
+- [#603](https://github.com/softistx/nxgt-material/pull/603) [`d41d407`](https://github.com/softistx/nxgt-material/commit/d41d40700a137d8a37e55f70668e8d88c6a5019e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Banner`: with an `action`, the action drops below the title and description on a phone (under `sm`), in line with the text, instead of squeezing them to one word per line; from `sm` up it stays beside the text. `icon={false}` shows no icon, and the action lines up with the text either way.
+
+- [#601](https://github.com/softistx/nxgt-material/pull/601) [`0c016bc`](https://github.com/softistx/nxgt-material/commit/0c016bc46e72317910906b367d0a45ea5b7d798e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - DateField, DateRangeField and the event calendar's date picker: the calendar popover is capped at the room the viewport leaves it and scrolls inside, so its month navigation stays reachable ([#599](https://github.com/softistx/nxgt-material/issues/599)). A field low in a Dialog opens its calendar above the field; a six-week month made the popover taller than the room above and its top (the caption and the previous and next month buttons) left the viewport, so the mouse could no longer change month. No API change.
+
+- [#591](https://github.com/softistx/nxgt-material/pull/591) [`5b6470e`](https://github.com/softistx/nxgt-material/commit/5b6470e1044b631538a0edad5451b5674aa963fc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Checkbox`, `Switch`, `RadioGroup` and `Select` no longer render their hidden form input on the server. Radix (React) and Reka (Vue) rendered it there with a hard-coded inline `style`, which a strict `style-src-attr` blocked: a CSP report fired and the native box showed until hydration. The input is now created after mount, so it is still there for a form to submit. In `@nxgt/material-vue` the same happened whenever the control has a `name`.
+  
+  A native form post before hydration no longer carries these four controls' values. The indicator of a checked `Checkbox`, `SelectValue` and the `RadioGroup` root still carry an inline style (`pointer-events:none`, `outline:none`), so the recommended policy keeps `style-src-attr 'unsafe-inline'` (softistx/nxgt-material#596).
+
+- [#592](https://github.com/softistx/nxgt-material/pull/592) [`b4d55f6`](https://github.com/softistx/nxgt-material/commit/b4d55f6a70b27b752416b45c5ef9d7fa36fd7e37) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CodeEditor` and `CodeDiff` cancel Monaco's load when they unmount and catch its rejection, so a failed or cancelled load shows a message instead of an unhandled rejection.
+
+- [#607](https://github.com/softistx/nxgt-material/pull/607) [`3b671a5`](https://github.com/softistx/nxgt-material/commit/3b671a5b8d0109fa645d0de52bc716104f7f8831) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Two fixes seen on a phone and on the collapsed sidebar (softistx/nxgt-material#605).
+  
+  - **`SidebarMenuItem` no tooltip beside a visible label.** The collapsed rail showed each label under its icon and also opened a tooltip repeating it, above the entry, over the entry above it (the selected pill). An entry that shows its label, collapsed or expanded, now has no tooltip; its accessible name is the label. A `tooltip` you pass is still shown, now to the right of the entry (`side="right"`) so it never covers a neighbour, and an icon-only entry (no label, an `aria-label`) shows its `aria-label` there. Keyboard focus shows it as before. `Tooltip` (React) takes a `side` prop. In `@nxgt/material-vue`, `SidebarMenuItem` now binds its attributes (`aria-label`, `onClick`...) to the link or button itself.
+  - **`Toaster` on a phone starts below the app bar.** Under 600px with no `position`, toasts sat at the very top and covered the app shell's sticky bar (menu button, title, account control), which could not be reached while a toast showed. They now start 80px down (`mobileOffset` `{ top: 80 }`, from `@nxgt/material-core/touch-hover`). Desktop is unchanged, and a `position` or a `mobileOffset` you pass is kept as is.
+  
+  Migration: an app that relied on the toast at the very top of a phone, or on the collapsed rail's label tooltip, sets `<Toaster mobileOffset={{ top: 16 }} />` (Vue: `:mobile-offset="{ top: 16 }"`) or passes `tooltip` on the entry.
+- Updated dependencies [[`3b671a5`](https://github.com/softistx/nxgt-material/commit/3b671a5b8d0109fa645d0de52bc716104f7f8831)]:
+  - @nxgt/material-core@0.11.1
+
 ## 0.39.0
 
 ### Minor Changes

package/README.md

@@ -499,6 +499,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filter) · `FilterFormField`, `FilterProvider`, `FilterTrigger`, `FilterChips`, `FilterContent`, `FilterGroups`, `FilterGroup`, `FilterField`, `FilterActions`, `FilterPresets` | Schema-driven filters with chips, presets, validation, and URL or storage persistence. | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterDialog`, `FilterSheet`, `FilterDrawer`, `FilterPopover` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-facetgroup.webp" width="120" alt="FacetGroup"> | [`FacetGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#facetgroup) | A collapsible facet: a header button with the title, a count Badge of the active values, Clear and a chevron, over the values (typically a `CheckboxGroup` with counts). | `FacetGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` + parts | Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-tree.webp" width="120" alt="Tree"> | [`Tree`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#tree), `TreeItem` | Expandable tree with none, single or multiple selection and keyboard navigation. | `Tree`, `TreeItem`, `useTree` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-drag-and-drop.webp" width="120" alt="Drag and drop"> | [`DndProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#drag-and-drop), `Draggable`, `Droppable`, `DraggableDroppable`, `SortableProvider`, `Sortable`, `DragHandle`, `DndOverlay` | Drag-and-drop primitives; see [dnd](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md#nxgtmaterial-vuednd). | `DndProvider`, `Draggable`, `Droppable`, `Sortable`, `DragHandle` |

package/dist/{Button-DVeAQorb.js → Button-teS2p_af.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-C6xccbic.js";
+import { t } from "./use-material-translation-DxU51--g.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as b, ref as x, renderSlot as S, shallowRef as C, unref as w, useAttrs as te, useSlots as ne, watch as T, withCtx as E } from "vue";
 import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as re, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";
@@ -725,4 +725,4 @@ var he = /* @__PURE__ */ d({
 	}
 });
 //#endregion
-export { ce as a, G as c, H as d, z as f, J as i, W as l, L as m, X as n, q as o, R as p, Y as r, K as s, he as t, U as u };
+export { J as a, K as c, U as d, H as f, L as h, Y as i, G as l, R as m, $ as n, ce as o, z as p, X as r, q as s, he as t, W as u };

package/dist/{HoverCardTrigger-VvXPswRz.js → HoverCardTrigger-BEzEsgBo.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-C6xccbic.js";
-import { t as n } from "./Button-DVeAQorb.js";
+import { t } from "./use-material-translation-DxU51--g.js";
+import { t as n } from "./Button-teS2p_af.js";
 import { r, t as i } from "./in-dialog-Blhwwbyb.js";
 import { t as a } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, isRef as g, mergeProps as _, normalizeClass as v, normalizeProps as y, onMounted as ee, onUpdated as b, openBlock as x, renderSlot as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useTemplateRef as D, vModelText as O, withCtx as k, withDirectives as A } from "vue";
@@ -29,7 +29,7 @@ var J = /* @__PURE__ */ p({
 		return (r, i) => (x(), l("div", {
 			"data-slot": "helper-text",
 			"data-test": "typography",
-			class: v(w(e)("overflow-auto in-[[data-state=selected]]:text-primary-foreground text-[10px] text-muted-foreground flex pl-0.5 truncate text-wrap", { "text-error-text": t.error }, n.class))
+			class: v(w(e)("overflow-auto text-[10px] text-muted-foreground flex pl-0.5 truncate text-wrap", { "text-error-text": t.error }, n.class))
 		}, [S(r.$slots, "default")], 2));
 	}
 }), de = {

package/dist/{camera-CG6WfZNc.js → camera-1QRTmpnM.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { _r as t, hr as n, mr as r } from "./components-B2kSyBK0.js";
-import { t as i } from "./use-material-translation-C6xccbic.js";
-import { t as a } from "./Button-DVeAQorb.js";
-import { t as o } from "./icon-button-CSPfP615.js";
+import { _r as t, hr as n, mr as r } from "./components-XJ95qxB1.js";
+import { t as i } from "./use-material-translation-DxU51--g.js";
+import { t as a } from "./Button-teS2p_af.js";
+import { t as o } from "./icon-button-Vz4NECf1.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts

package/dist/components/theme-tokens.css

@@ -38,7 +38,9 @@
 	--success-foreground: oklch(0.984 0.003 247.858);
 	--info: oklch(0.5 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.54 0.222 41.116);
+	/* Amber, a hue apart from --error (27): a warning must not read as a
+	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
+	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: var(--error);
 	--border: oklch(0.929 0.013 255.508);
@@ -94,7 +96,10 @@
 	--success-foreground: oklch(0.984 0.003 247.858);
 	--info: oklch(0.707 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.646 0.222 41.116);
+	/* Amber too, as text: 7.3:1 on --background and 6.5:1 on --card, 6.6:1 and
+	   5.8:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   6.0:1 on a page and 5.6:1 on a Card. */
+	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);