@nxgt/material 3.20.0 → 3.21.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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 {