@nxgt/material 3.87.0 → 3.88.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nxgt/material
 
+## 3.88.1
+
+### Patch Changes
+
+- [#2567](https://github.com/softistx/nxgt-material/pull/2567) [`cc14ef7`](https://github.com/softistx/nxgt-material/commit/cc14ef7254e85f4be7f53f10e8f50d247d45b26d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(button): `<Button asChild>` on an anchor keeps the button look in every variant: no link underline at rest, and `ghost` takes the foreground text colour instead of the link colour ([#2566](https://github.com/softistx/nxgt-material/issues/2566)).
+
+- [#2560](https://github.com/softistx/nxgt-material/pull/2560) [`18cf4dd`](https://github.com/softistx/nxgt-material/commit/18cf4ddafba5c0183e2bc2b37da2e627ed5060a5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - An `EmptyState`, `ListEmpty` or `ServerTable` scene (`illustration: 'no-results'`, `true`, a registered id) no longer shows an empty box while its chunk loads: the reserved box holds the built-in art until the scene replaces it, so the first paint (and a screenshot taken at once, at any width) is never blank.
+
+- [#2562](https://github.com/softistx/nxgt-material/pull/2562) [`8a68ae9`](https://github.com/softistx/nxgt-material/commit/8a68ae9b25174a8ee8b9821ce04ec2b12a60d415) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(list-tile): a button tile without `selected` no longer renders `aria-pressed="false"`; it is a toggle only once `selected` is given.
+
+- [#2572](https://github.com/softistx/nxgt-material/pull/2572) [`873b344`](https://github.com/softistx/nxgt-material/commit/873b344bd297255fc46de850d3f9fa24f7179c02) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): `surface="none"` now lines the table up flush with its container's other content: the `Table` wrapper's 4px padding is zeroed, so the header band no longer sits inset inside a Card ([#2570](https://github.com/softistx/nxgt-material/issues/2570)). The default card surface is unchanged.
+
+- [#2561](https://github.com/softistx/nxgt-material/pull/2561) [`bc2f21a`](https://github.com/softistx/nxgt-material/commit/bc2f21aeb647840997b795e43b9589441ba34f77) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Date-type fields (date, time, duration, date range, half-day range) share the bordered field box; an invalid field no longer tints its fill.
+
+## 3.88.0
+
+### Minor Changes
+
+- [#2556](https://github.com/softistx/nxgt-material/pull/2556) [`e04413f`](https://github.com/softistx/nxgt-material/commit/e04413ff7214dd57d0972bfd487c0996ec67bb31) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `HalfDayRangeField` and `HalfDayRangeFormField` (React Hook Form), exported from `@nxgt/material/components`: a range whose two ends are each a day plus a half, morning or afternoon, for absences and closures counted to the half day. The value is `{ start: { date, half }, end: { date, half } }` (`half` is `'morning' | 'afternoon'`, `date` the local midnight of the day), ordered on the half. `onValueChange` gets `undefined` while a day is missing and the range as soon as both days are set, even when the end is before the start (the field shows "The end cannot be before the start.", marks the halves `aria-invalid` and announces it; `HalfDayRangeFormField` adds a `validate` rule so the form refuses it, without a resolver: with zod, use `z.custom<HalfDayRange>().refine(isHalfDayRangeOrdered, …)`; a `rules.validate` of your own is kept beside it). Controlled (`value`) or uncontrolled (`defaultValue`); a reset of `value` to `undefined` empties the days unless the emitted value was already `undefined` (then give the field a `key` that changes). `minDate`, `maxDate` and `disabledDays` apply to both ends, and the end's calendar starts at the start's day. Labels come from `material.half-day-range.*` and `material.dates.start` / `end` (en and fr). `compareHalfDays`, `isHalfDayRangeOrdered`, `halfDaysIn` and `HALF_DAYS` are exported with the `HalfDay`, `HalfDayEnd` and `HalfDayRange` types. Not available in `@nxgt/material-vue` yet ([#2555](https://github.com/softistx/nxgt-material/issues/2555)). Fixes [#2546](https://github.com/softistx/nxgt-material/issues/2546).
+
 ## 3.87.0
 
 ### Minor Changes

package/README.md

@@ -702,6 +702,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-timefield.webp" width="120" alt="TimeField"> | [`TimeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#timefield), `TimeStringField`, `TimeFormField` | A time typed in segments, with a button that opens a `TimePicker` in a popover, or in a bottom sheet on a phone. A tonal box; `size="sm"` is compact, `TimeStringField` takes an `HH:mm` string. | `TimeField`, `TimeFormField`; `TimeStringField`: — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-timepicker.webp" width="120" alt="TimePicker"> | [`TimePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#timepicker) | Hours and minutes as big tiles with steppers, an AM / PM pair and quick minutes (columns with `variant="columns"`), 12- or 24-hour by language. | `TimePicker` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-durationfield.webp" width="120" alt="DurationField"> | [`DurationField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#durationfield) · `DurationFormField` | Hours and minutes combined into a total in minutes, typed on one line, "1 h 29 min", with one −/+ pair for the focused part (`variant="fields"` for the two number fields). | `DurationField`, `DurationFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-halfdayrangefield.webp" width="120" alt="HalfDayRangeField"> | [`HalfDayRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#halfdayrangefield) · `HalfDayRangeFormField` | A range whose two ends are each a day plus morning or afternoon, ordered on the half, for absences and closures counted to the half day. | — (later, #2555) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-minimonth.webp" width="120" alt="MiniMonth"> | [`MiniMonth`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#minimonth) | Compact month navigator: today ringed, a week band, event dots, a keyboard date grid. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/date-time-nowindicator.webp" width="120" alt="NowIndicator"> | [`NowIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/date-and-time.md#nowindicator) | The current-time line of a day schedule, moving each minute. CSP-safe. | — |
 

package/dist/{alert-dialog-DC_9MW49.js → alert-dialog-CEGs7LMN.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-BttT8j1o.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-Cqzvj9R0.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-C6XbESai.js → async-slice-CR0M95Jq.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-BwUYrek9.js";
+import { l as e, r as t, s as n, u as r } from "./translator-DoVsjUff.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-BksHtogl.js → button-DuTNpo28.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-CngjH5-n.js";
+import { n as r, t as i } from "./spinner-DcW21pN1.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";
@@ -88,7 +88,7 @@ var w = [
 	{
 		variant: "ghost",
 		color: "default",
-		class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+		class: `${s.default} ${c.default} hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`
 	},
 	{
 		variant: "ghost",
@@ -185,7 +185,7 @@ var w = [
 		color: "default",
 		class: `${s.default} ${c.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], T = a("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
+], T = a("nxgt-btn nxgt-morph-fill no-underline inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
 	variants: {
 		variant: {
 			filled: "",

package/dist/{calculator-C_dTrMWE.js → calculator-DsGk_fCw.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, r as n, t as r, u as i } from "./tabs-C0CPqX5U.js";
-import { t as a } from "./button-BksHtogl.js";
-import { t as o } from "./use-material-translation-BDVGF7-Z.js";
-import { t as s } from "./icon-button-caFcCpXV.js";
+import { n as t, r as n, t as r, u as i } from "./tabs-CdoBFtWx.js";
+import { t as a } from "./button-DuTNpo28.js";
+import { t as o } from "./use-material-translation-BdrItuwY.js";
+import { t as s } from "./icon-button-DE1EcO2-.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-QcM9WTr0.js";
+import { i as re, t as ie } from "./pos-types-CpTpT4vE.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-0Fq8HLiY.js"),
-	pos: () => import("./pos-variant-BeON2e_Q.js"),
-	programmer: () => import("./programmer-variant-3cEMiII7.js"),
-	financial: () => import("./financial-variant-0fJAMale.js"),
-	conversion: () => import("./conversion-variant-Cauk0BMS.js")
+	scientific: () => import("./scientific-variant-rfvJKxB4.js"),
+	pos: () => import("./pos-variant-Bs5BUB1L.js"),
+	programmer: () => import("./programmer-variant-B1eI1fd0.js"),
+	financial: () => import("./financial-variant-CYgRZzKT.js"),
+	conversion: () => import("./conversion-variant-DfQiOwYC.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-BksHtogl.js";
-import { t as n } from "./use-material-translation-BDVGF7-Z.js";
-import { t as r } from "./icon-button-caFcCpXV.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CVAW0t-r.js";
-import { r as l, t as u } from "./currency-field-Dy2e9kSr.js";
+import { t } from "./button-DuTNpo28.js";
+import { t as n } from "./use-material-translation-BdrItuwY.js";
+import { t as r } from "./icon-button-DE1EcO2-.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-DkfTv_ft.js";
+import { r as l, t as u } from "./currency-field-cwC7cqUE.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-C_dTrMWE.js";
+import { t as p } from "./calculator-DsGk_fCw.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-FOUl66f6.js → calculator-segment-DMFptsDf.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-BDVGF7-Z.js";
+import { t as e } from "./use-material-translation-BdrItuwY.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-C_dTrMWE.js";
+import { n as e, t } from "./calculator-DsGk_fCw.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-BksHtogl.js";
-import { t as i } from "./use-material-translation-BDVGF7-Z.js";
+import { t as r } from "./button-DuTNpo28.js";
+import { t as i } from "./use-material-translation-BdrItuwY.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-BWaC87zs.js";
+import { t as d } from "./chip-C-RAjar5.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-BWaC87zs.js → chip-C-RAjar5.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-CngjH5-n.js";
+import { n as t } from "./spinner-DcW21pN1.js";
 import { s as n } from "./use-click-lock-Bwg_caHO.js";
-import { t as r } from "./use-material-translation-BDVGF7-Z.js";
+import { t as r } from "./use-material-translation-BdrItuwY.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-ddbQ0pEc.js → code-editor-DApeIOZ3.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-DtVC2xQW.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-xUUE5X6T.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-BU5_H3UA.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-CZ1lJXZZ.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-BDVGF7-Z.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-jRlQfjAm.js";
+import { t as _ } from "./use-material-translation-BdrItuwY.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-CGtYfc1l.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-BU5_H3UA.js";
-import { t as o } from "./use-material-translation-BDVGF7-Z.js";
-import { i as s, n as c, o as l } from "./code-language-items-jRlQfjAm.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-CZ1lJXZZ.js";
+import { t as o } from "./use-material-translation-BdrItuwY.js";
+import { i as s, n as c, o as l } from "./code-language-items-CGtYfc1l.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-ddbQ0pEc.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-DApeIOZ3.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-jRlQfjAm.js → code-language-items-CGtYfc1l.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-DtVC2xQW.js";
-import { t as n } from "./use-material-translation-BDVGF7-Z.js";
+import { d as e, f as t } from "./dropdown-menu-xUUE5X6T.js";
+import { t as n } from "./use-material-translation-BdrItuwY.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/ui/dates/duration-field/duration-field-expressive.css

@@ -1,5 +1,5 @@
 /* DurationField's one-line field (`variant="segments"`, the default), over
- * the date fields' tonal box (typed-box-expressive.css) and its segments
+ * the date fields' shared bordered box (typed-box-expressive.css) and its segments
  * (segmented-input-expressive.css): "1 h 29 min", each amount followed by
  * its muted unit, then one −/+ pair. Every focus ring is drawn inside the
  * field (an inset outline), never clipped. The box keeps its focus boundary

package/dist/components/ui/dates/picker-trigger/typed-box-expressive.css

@@ -1,41 +1,23 @@
-/* The date, range and time fields' box, over the field box. A tonal box: a primary tint, no border at rest (the field is
- * named by its label, its text and its open button, WCAG 1.4.11), a 2px
- * primary boundary while a segment has focus or the picker is open, an
- * error boundary and tint when invalid, the disabled box as today. The segments are in segmented-input-expressive.css.
+/* The date, range and time fields' box, over the field box. The same box at
+ * rest as a text field (surface, hairline border, radius, hover and filled
+ * tint: the shared bordered box, #2406), with a 2px primary boundary
+ * while a segment has focus or the picker is open and an error boundary when
+ * invalid. The segments are in segmented-input-expressive.css.
  * `data-tonal` belongs to the date and time fields: the typed box and
  * the sheet entry box. No other field sets it. */
 @layer components {
 	.nxgt-field-box.nxgt-field-box[data-tonal] {
-		--_fx-fill: color-mix(in oklab, var(--primary) 7%, var(--background));
-		--_fx-fill-hover: color-mix(
-			in oklab,
-			var(--primary) 11%,
-			var(--background)
-		);
 		--_fx-tint: color-mix(in oklab, var(--primary) 14%, var(--background));
 		--_fx-pill: var(--primary);
 		--_fx-pill-fg: var(--primary-foreground);
 		--_fx-line: var(--primary-text);
 		--_fx-err: var(--error);
-		border-color: transparent;
-		background-color: var(--_fx-fill);
 	}
 	:is(.dark, [data-theme="dark"]) .nxgt-field-box.nxgt-field-box[data-tonal] {
-		--_fx-fill: color-mix(in oklab, var(--primary) 18%, var(--background));
-		--_fx-fill-hover: color-mix(
-			in oklab,
-			var(--primary) 22%,
-			var(--background)
-		);
 		--_fx-tint: color-mix(in oklab, var(--primary) 34%, var(--background));
 		--_fx-pill: var(--primary-text);
 		--_fx-pill-fg: var(--background);
 	}
-	/* Hover: the fill steps up, and the field box's hover border stays away. */
-	.nxgt-field-box.nxgt-field-box[data-tonal]:hover {
-		border-color: transparent;
-		background-color: var(--_fx-fill-hover);
-	}
 	.nxgt-field-box.nxgt-field-box[data-tonal]:is(
 		[data-focused],
 		[data-open]:not([data-open="false"])
@@ -48,7 +30,6 @@
 		[data-invalid="false"]
 	) {
 		border-color: var(--_fx-err);
-		background-color: color-mix(in oklab, var(--error) 7%, var(--background));
 	}
 	.nxgt-field-box.nxgt-field-box.nxgt-field-box[data-tonal][data-invalid]:not(
 		[data-invalid="false"]