@nxgt/material 3.19.0 → 3.21.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nxgt/material
 
+## 3.21.0
+
+### Minor Changes
+
+- [#1602](https://github.com/softistx/nxgt-material/pull/1602) [`800051d`](https://github.com/softistx/nxgt-material/commit/800051ddb782564801354793fe59c3a2bf9589c3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DateField` / `DateFormField` / `DateRangeField` keep a value outside `minDate`, `maxDate`, `disablePast` or `disableFuture` (one set from the form or typed) instead of moving it onto the bound's day with its time of day, which turned a moment after midnight into one 24 hours earlier and let a form rule pass; the form refuses it and the calendar still keeps the day unpickable. The `Chip` dismiss ✕ has its own 24x24 box (44x44 on a coarse pointer), so axe `target-size` passes; the glyph and the chip height are unchanged. Fixes [#1583](https://github.com/softistx/nxgt-material/issues/1583). Fixes [#1584](https://github.com/softistx/nxgt-material/issues/1584).
+  
+  Migration: a typed date outside `minDate`/`maxDate`/`disablePast`/`disableFuture` is no longer moved to the nearest allowed day on blur. It is kept, and the form refuses it. If your schema has no min/max rule, add one (see date-and-time.md).
+
+## 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` |

package/dist/components/ui/display/chip/chip-parts.css

@@ -1,5 +1,5 @@
 /* Chip: focus, the dismiss button (drawn
- * small, a 24x24 target through ::after, its own ring), disabled, the dashed
+ * small in a 24x24 box, 44x44 on a coarse pointer, its own ring), disabled, the dashed
  * "add" chip and the tones. */
 @layer components {
 	/* Focus: the chip's ring (2px primary-text, 2px away); the ✕ its own. */
@@ -8,54 +8,41 @@
 		outline-color: var(--primary-text);
 		outline-width: 2px;
 	}
+	/* The ✕ is drawn small (--chip-x), but its own box is the target (#1584):
+	 * axe's `target-size` reads the bounding box, never a pseudo-element. The
+	 * box is 24x24 (44x44 on a coarse pointer, #1067, #1102); the padding with
+	 * `background-clip: content-box` keeps the hover disc and the focus ring at
+	 * the drawn size, and the negative margin takes the extra back, so the chip
+	 * and the glyph are unchanged. */
 	.nxgt-chip > [data-slot="chip-dismiss"] {
+		--chip-hit: 24px;
+		--chip-pad: calc((var(--chip-hit) - var(--chip-x)) / 2);
 		position: relative;
 		display: inline-grid;
 		place-items: center;
 		flex: none;
-		width: var(--chip-x);
-		height: var(--chip-x);
-		padding: 0;
+		box-sizing: border-box;
+		width: var(--chip-hit);
+		height: var(--chip-hit);
+		margin: calc(-1 * var(--chip-pad));
+		padding: var(--chip-pad);
 		border: 0;
 		border-radius: 9999px;
 		background: transparent;
+		background-clip: content-box;
 		color: color-mix(in oklab, var(--foreground) 62%, transparent);
 		cursor: pointer;
 		/* Width 0 at rest: forced colours would paint a transparent outline. */
 		outline: 0 solid transparent;
-		outline-offset: 1px;
+		outline-offset: calc(1px - var(--chip-pad));
 		transition:
 			background-color 120ms ease-out,
 			color 120ms ease-out,
 			outline-color 120ms ease-out;
 	}
-	.nxgt-chip > [data-slot="chip-dismiss"]::after {
-		content: "";
-		position: absolute;
-		inset: calc((var(--chip-x) - 24px) / 2);
-		border-radius: 9999px;
-	}
-	/* Touch (#1067, #1102): on a coarse pointer the ✕ is a real 44x44 box,
-	 * not a pseudo-element, which a tap-target check and axe do not measure.
-	 * The negative margin takes the extra back, so the chip is unchanged, and
-	 * the padding with `background-clip: content-box` keeps the hover disc
-	 * and the focus ring at the drawn size (the outline is pulled in by the
-	 * padding). */
 	@media (pointer: coarse) {
 		.nxgt-chip > [data-slot="chip-dismiss"] {
-			--chip-pad: calc((44px - var(--chip-x)) / 2);
-			box-sizing: border-box;
-			width: 44px;
-			height: 44px;
-			margin: calc(-1 * var(--chip-pad));
-			padding: var(--chip-pad);
-			background-clip: content-box;
-			outline-offset: calc(1px - var(--chip-pad));
-		}
-		/* The box is the target now: the 24px pseudo-element would reach
-		 * past it. */
-		.nxgt-chip > [data-slot="chip-dismiss"]::after {
-			inset: 0;
+			--chip-hit: 44px;
 		}
 	}
 	.nxgt-chip > [data-slot="chip-dismiss"] > svg {