@nxgt/material 3.19.0 → 3.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nxgt/material
 
+## 3.20.0
+
+### Minor Changes
+
+- [#1600](https://github.com/softistx/nxgt-material/pull/1600) [`edc806b`](https://github.com/softistx/nxgt-material/commit/edc806b3c0966c973d4c50d5cdc5696aab79a599) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EntityHeader` takes `leading`, a slot for an interactive control at the band's start (a `Switcher`, either variant): drawn at its natural size beside the title, with no badge and no `aria-hidden`, so axe no longer reports `aria-hidden-focus`; on a phone it takes the band's width above the title. It replaces `icon` when both are given, with a development warning. `Switcher`'s option subtitle, cut by an ellipsis in the trigger, the menu or the panel, now carries its full text like the title does (`aria-label`, plus `title` in the options and the trigger's tooltip). `Switcher` in link mode now closes its panel (popover or phone sheet) when a link option is activated and no longer hands focus back to the trigger, so the new page's own focus runs; it also takes controlled `open` and `onOpenChange`. Fixes [#1590](https://github.com/softistx/nxgt-material/issues/1590), Fixes [#1591](https://github.com/softistx/nxgt-material/issues/1591) and Fixes [#1594](https://github.com/softistx/nxgt-material/issues/1594).
+
 ## 3.19.0
 
 ### Minor Changes

package/README.md

@@ -586,7 +586,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-transferlist.webp" width="120" alt="TransferList"> | [`TransferList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#transferlist) · `TransferListFormField` | Two-pane picker with search, counts, select-all, Shift-range checks, drag-and-drop between panes, reordering and a `max`; avatar and badge slots, a `compact` density, and panes that stack in a narrow container. | `TransferList`, `TransferListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-sortablelist.webp" width="120" alt="SortableList"> | [`SortableList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#sortablelist) · `SortableListFormField` | Searchable list you reorder by dragging (row or grip) or with the keyboard (Space to pick up, arrows, Space to drop, Escape to cancel), each step announced; `numbered`, `removable`, locked rows, `cards` or `plain`, `compact`. | `SortableList`, `SortableListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-treeselectfield.webp" width="120" alt="TreeSelectField"> | [`TreeSelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#treeselectfield) · `TreeSelectFormField` | A field that opens a `Tree` in a popover: pick one node, or several as chips, with an optional filter. | `TreeSelectField`, `TreeSelectFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#switcher) | Switches the active workspace, establishment or class: a menu, or a searchable panel with groups and links; an expressive variant. | `Switcher` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#switcher) | Switches the active workspace, establishment or class: a menu, or a searchable panel with groups and links; an expressive variant; a clipped subtitle keeps its full text; `open`/`onOpenChange`, and a link pick closes it. | `Switcher` |
 
 ### Data display
 
@@ -606,7 +606,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, a `leading` control slot (a Switcher at the band's start), title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |