@nxgt/material 3.80.0 → 3.81.0

package/docs/troubleshooting.md

@@ -78,6 +78,8 @@ words in your error.
 - [`ActivityLayout`'s `backdrop` shows nothing, or the blobs are still there](#activitylayouts-backdrop-shows-nothing-or-the-blobs-are-still-there)
 - [Shapes of an `ActivityLayout` `backdrop` run behind the text of the chrome or a list](#shapes-of-an-activitylayout-backdrop-run-behind-the-text-of-the-chrome-or-a-list)
 - [Shaped Gallery tiles are plain rounded squares](#shaped-gallery-tiles-are-plain-rounded-squares)
+- [ChoiceCardGroup shows 2+2 instead of 3+1](#choicecardgroup-shows-22-instead-of-31)
+- [A `ChoiceCardGroup` collapses to nothing in an inline-flex or centred parent](#a-choicecardgroup-collapses-to-nothing-in-an-inline-flex-or-centred-parent)
 - [A component with my own tone (Shape, Fab, Avatar, StatCard, a metric card) shows no colour, or `tone` is a type error](#a-component-with-my-own-tone-shape-fab-avatar-statcard-a-metric-card-shows-no-colour-or-tone-is-a-type-error)
 - [A test expects the old `bg-muted` Avatar fallback, or a filled fallback shows a grey ring](#a-test-expects-the-old-bg-muted-avatar-fallback-or-a-filled-fallback-shows-a-grey-ring)
 
@@ -341,6 +343,8 @@ words in your error.
 - [An `Autocomplete` list covers its helper text, or a chip test no longer finds its markup](#an-autocomplete-list-covers-its-helper-text-or-a-chip-test-no-longer-finds-its-markup)
 - [A `CountryField` lost its chip, or its `renderOption` or `filter` does nothing](#a-countryfield-lost-its-chip-or-its-renderoption-or-filter-does-nothing)
 - [A `CountryField` or `TimezoneField` test no longer finds its field or its options](#a-countryfield-or-timezonefield-test-no-longer-finds-its-field-or-its-options)
+- [A test that queries a `SortableList` by `listbox` or `option` finds nothing](#a-test-that-queries-a-sortablelist-by-listbox-or-option-finds-nothing)
+- [axe reports `nested-interactive` on a list whose rows hold buttons](#axe-reports-nested-interactive-on-a-list-whose-rows-hold-buttons)
 - [A `SearchField` lost the height, radius or fill set through `[&_input]`](#a-searchfield-lost-the-height-radius-or-fill-set-through-_input)
 - [`ComboboxEmpty`'s text shows under the options of a `Combobox`](#comboboxemptys-text-shows-under-the-options-of-a-combobox)
 - [`ConfirmDialog` buttons stay in English](#confirmdialog-buttons-stay-in-english)
@@ -1744,6 +1748,23 @@ page.locator('[data-slot=chip]').getByRole('button', { name: 'Remove Design' });
 **Why:** the shapes live in an opt-in stylesheet, `@nxgt/material/galleries.css`, which `styles.css` does not import. Without it a shaped tile keeps the `xl` corner (`--nxgt-shape-corner-xl`, 28px). The same fallback shows in a browser without CSS [`shape()`](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape) (Chromium-based and Safari today), which drops the `clip-path`. Under `prefers-reduced-motion` the shapes show but do not morph, by design. Also check that nothing overrides `clip-path` on `[data-slot=gallery-tile-media]`.
 **Fix:** import it once, next to `styles.css`: `@import "@nxgt/material/galleries.css";` (or `import '@nxgt/material/galleries.css'`). For a browser without `shape()`, accept the rounded fallback, or use a non-shaped preset and pass `shape` only where you want it.
 
+
+### ChoiceCardGroup shows 2+2 instead of 3+1
+
+**When:** a `ChoiceCardGroup` with `columns={3}` (or 4) and 4 cards (or any count that leaves one card alone on the last row) draws two rows of two, where it used to draw three and one.
+**Why:** rows are balanced by default (`balance`, `true`): when the last row would hold one orphan card and fewer columns avoid it, the group draws fewer columns. It is decided by CSS container queries on the group's own width, so the server and the client print the same markup.
+**Fix:** keep it, or restore the old fill with `balance={false}`:
+
+```tsx
+<ChoiceCardGroup label="Size" columns={3} balance={false} options={options} />
+```
+
+### A `ChoiceCardGroup` collapses to nothing in an inline-flex or centred parent
+
+**When:** the group sits in an `inline-flex` box, a float or a `w-fit` column and its cards are squeezed to zero width or the label shows alone.
+**Why:** a balanced group (the default, horizontal) is an inline-size container (`@container`), so that it can balance its rows; a container's width does not come from its content, so a shrink-to-fit parent gives it none. With `balance={false}`, or `orientation="vertical"`, there is no container.
+**Fix:** give the parent a width (`w-full`, a `max-w-*` or a fixed width), centring it with margins rather than shrink-to-fit, or pass `balance={false}` to restore the previous layout.
+
 ### A component with my own tone (Shape, Fab, Avatar, StatCard, a metric card) shows no colour, or `tone` is a type error
 
 **When:** `<Shape tone="maths" />`, `<Fab tone="maths" />`, an `Avatar`, a `StatCard` or a metric card with `tone="maths"` draws no colour, or TypeScript reports:
@@ -3272,6 +3293,9 @@ only in the browser reads the real answer from its first render, as before.
 `Stepper` logged this line until 2.2.0, and a desktop hydrating its server
 HTML showed the mismatch (it asks whether the screen is wide); upgrade and
 drop any `clientOnly(Stepper)` you added for it.
+For a breakpoint of your own, use
+[`useSsrMediaQuery(query, serverValue)`](guides/helpers.md#usessrmediaquery)
+instead of `useMedia` or a hand-written `useSyncExternalStore`.
 
 ### `useMatches must be used within a data router`
 
@@ -5105,7 +5129,7 @@ append({ name: '' }, { shouldFocus: false });
 `aria-disabled`, still focusable, and does nothing by design; the reason, if
 `removeDisabledReason` gave one, is its tooltip, shown on hover, focus, tap and
 click, and its description), or `min` is
-reached (the button is `disabled`).
+reached (the button is `disabled`, or absent with `removeAtMin="hide"`).
 **Fix:** return `true` from `removable` for a row that may go, and say why for
 the others, so a user is told instead of left guessing:
 
@@ -5202,7 +5226,8 @@ The `*` is now drawn by a CSS pseudo-element with an empty `content`
 field's own `required` / `aria-required` says it is required, and every field
 of this library sets it on the element a screen reader lands on (the input, the
 picker's combobox, the select's trigger, the slider thumbs, the rating's
-radiogroup, the editor's textbox, the list's listbox, or, for a file picker,
+radiogroup, the editor's textbox, the `TransferList`'s listbox (a `SortableList` is a `list`
+and only draws the asterisk, with no `aria-required`), or, for a file picker,
 a group described as "This field is required."). A `SelectField`'s trigger is
 now named by its label (`aria-labelledby`), so `getByRole('combobox', { name:
 'Framework' })` finds it.
@@ -6353,6 +6378,29 @@ expect(screen.getByRole('combobox', { name: 'Time zone' })).toHaveValue('Paris')
 screen.getByRole('option', { name: 'Paris GMT+2' });
 ```
 
+### A test that queries a `SortableList` by `listbox` or `option` finds nothing
+
+**When:** a test queries a `SortableList` by `listbox`, `option` or `aria-selected`, after upgrading.
+**Why:** a row holds buttons of its own (grip, move, remove), which an `option`
+may not, so axe reported `nested-interactive`. The list is now a `role="list"`
+of `listitem` rows; `aria-selected`, `aria-activedescendant` and `aria-required`
+are gone (`aria-disabled` stays on a disabled row).
+**Fix:**
+
+```ts
+const list = screen.getByRole('list', { name: 'Ranking' });
+const rows = within(list).getAllByRole('listitem');
+```
+
+### axe reports `nested-interactive` on a list whose rows hold buttons
+
+**When:** axe flags a list whose rows hold buttons or other controls.
+**Why:** a row with `role="option"` (or `button`, `tab`...) may not contain
+focusable controls: assistive technology reads its children as text.
+**Fix:** make the row a `listitem` of a `list` (a roving tab stop on the row,
+the buttons keep their own names), as `SortableList` does. Do not exclude the
+list from the axe run.
+
 ### An input inside an `InputGroup` lost a class or a style of `Input`
 
 **When:** a test or a style relies on a class of `Input` or `Textarea`

package/lib/components/base-content.css

@@ -162,6 +162,17 @@
 		[data-slot="form-actions"] {
 			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/80 border-t-8 border-transparent px-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
 		}
+		/* `data-padding="none"`: the form sits flush in a container that
+		   already pads it (a page, a card, a sheet): no inset on the fields or
+		   the actions, so both align with the container's content edge. */
+		&[data-padding="none"] {
+			[data-slot="form-fields"] {
+				@apply p-0;
+			}
+			[data-slot="form-actions"] {
+				@apply px-0;
+			}
+		}
 	}
 
 	/* No height cap and no scroll of its own: the page (or the overlay) is

package/lib/components/components.css

@@ -144,6 +144,8 @@
 @import "./ui/display/seat-ring/seat-ring-ring.css";
 /* VoteTally: ranked bars with counts, shares and voters. */
 @import "./ui/display/vote-tally/vote-tally.css";
+/* TubeCap: a specimen tube chip, cap colours fixed by the tube convention. */
+@import "./ui/display/tube-cap/tube-cap.css";
 /* SecretCard: a face that is not rendered until it is revealed. */
 @import "./ui/display/secret-card/secret-card.css";
 /* Alert and Banner span the row in the form grids (#1497). */

package/lib/components/ui/collections/data-table/data-table-items-tiles.css

@@ -65,8 +65,34 @@
 		) {
 		outline-offset: -2px;
 	}
-	/* The checkbox is centred on the tile, not pinned to its corner. */
+	/* The checkbox sits on the tile's title row (#2391): its centre on the
+	 * title's first line (1rem at 1.4, so 0.7rem under the tile's padding), not
+	 * the tile's middle, which a multi-line tile moves down to the body text.
+	 * The 36px box (44px on a coarse pointer) then starts at the padding minus
+	 * the half-box plus the half-line. The tile's content starts at the top so
+	 * the title is where the box expects it. */
+	[data-slot="data-table-tiles"]
+	> [data-slot="data-table-item"]:not(:has([data-slot="data-table-record"])) {
+		align-content: start;
+	}
 	[data-slot="data-table-tiles"] [data-slot="data-table-item-select"] {
+		inset-block-start: 0.325rem;
+	}
+	[data-slot="data-table-tiles"][data-density="compact"]
+		[data-slot="data-table-item-select"] {
+		inset-block-start: 0.075rem;
+	}
+	@media (pointer: coarse) {
+		[data-slot="data-table-tiles"] [data-slot="data-table-item-select"],
+		[data-slot="data-table-tiles"][data-density="compact"]
+			[data-slot="data-table-item-select"] {
+			inset-block-start: 0.075rem;
+		}
+	}
+	/* A record row is one dense line: its box stays centred on it. */
+	[data-slot="data-table-tiles"]
+		> [data-slot="data-table-item"]:has([data-slot="data-table-record"])
+		[data-slot="data-table-item-select"] {
 		inset-block-start: 50%;
 		translate: 0 -50%;
 	}

package/lib/components/ui/display/tube-cap/tube-cap.css

@@ -0,0 +1,87 @@
+/* TubeCap: a specimen tube's chip. The cap colours are the international tube
+ * convention, so they are fixed values, not theme tokens: the same in light
+ * and dark and in every theme. The swatch carries no text; the name beside it
+ * keeps the theme's foreground (AA by the theme), and a hairline in the
+ * foreground colour keeps a black or pale cap visible on either scheme. */
+@layer components {
+	.nxgt-tube-cap {
+		--tube-cap: oklch(0.92 0 0);
+		--tube-cap-size: 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		max-inline-size: 100%;
+		min-inline-size: 0;
+		padding: 0.25rem 0.625rem 0.25rem 0.25rem;
+		border: 1px solid var(--border);
+		border-radius: 9999px;
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		font-size: 0.875rem;
+		line-height: 1.25;
+	}
+	.nxgt-tube-cap[data-size="sm"] {
+		--tube-cap-size: 1.25rem;
+		font-size: 0.8125rem;
+	}
+	.nxgt-tube-cap[data-size="lg"] {
+		--tube-cap-size: 2.5rem;
+		font-size: 1rem;
+	}
+	.nxgt-tube-cap[data-kind="edta"] {
+		--tube-cap: oklch(0.62 0.13 300);
+	}
+	.nxgt-tube-cap[data-kind="heparin"] {
+		--tube-cap: oklch(0.62 0.17 145);
+	}
+	.nxgt-tube-cap[data-kind="citrate"] {
+		--tube-cap: oklch(0.8 0.1 230);
+	}
+	.nxgt-tube-cap[data-kind="esr"] {
+		--tube-cap: oklch(0.22 0 0);
+	}
+	.nxgt-tube-cap[data-kind="serum"] {
+		--tube-cap: oklch(0.55 0.21 27);
+	}
+	.nxgt-tube-cap[data-kind="gel"] {
+		--tube-cap: oklch(0.82 0.15 85);
+	}
+	.nxgt-tube-cap[data-kind="fluoride"] {
+		--tube-cap: oklch(0.68 0.01 260);
+	}
+	.nxgt-tube-cap[data-kind="trace"] {
+		--tube-cap: oklch(0.45 0.18 262);
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-swatch"] {
+		flex: none;
+		box-sizing: border-box;
+		inline-size: var(--tube-cap-size);
+		block-size: var(--tube-cap-size);
+		border-radius: 9999px;
+		background: var(--tube-cap);
+		box-shadow: 0 0 0 1px
+			color-mix(in oklab, var(--foreground) 45%, transparent);
+		forced-color-adjust: none;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-text"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		column-gap: 0.5rem;
+		min-inline-size: 0;
+		overflow-wrap: anywhere;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-label"] {
+		font-weight: 600;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-volume"],
+	.nxgt-tube-cap [data-slot="tube-cap-accession"] {
+		color: var(--muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-action"] {
+		display: inline-flex;
+		flex: none;
+		margin-inline-start: 0.125rem;
+	}
+}

package/lib/themes/ambre.css

@@ -1,6 +1,6 @@
 /* Theme "ambre", generated.
  * Seeds: primary oklch(0.52 0.13 48), secondary oklch(0.5 0.09 95), tertiary oklch(0.5 0.14 350), neutral hue 65, tint 0.85.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * hue-near-status: The primary's hue 48 is 14° from warning (62): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="ambre"] {

package/lib/themes/ardoise.css

@@ -1,6 +1,6 @@
 /* Theme "ardoise", generated.
  * Seeds: primary oklch(0.45 0.065 252), secondary oklch(0.48 0.05 215), tertiary oklch(0.48 0.1 290), neutral hue 250, tint 0.7.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;

package/lib/themes/bleumono.css

@@ -1,6 +1,6 @@
 /* Theme "bleumono", generated.
  * Seeds: primary oklch(0.46 0.13 255), secondary oklch(0.55 0.06 255), tertiary oklch(0.38 0.17 255), neutral hue 255, tint 1.1.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * chroma-lowered: tertiary: chroma 0.170 to 0.125 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 255 is 0° from info (254.624): they may read alike. Keep an icon and a word with every status.

package/lib/themes/bluemoon.css

@@ -1,6 +1,6 @@
 /* Theme "bluemoon", generated.
  * Seeds: primary oklch(0.45 0.12 265), secondary oklch(0.55 0.02 250), tertiary oklch(0.62 0.08 290), neutral hue 265, tint 1.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * lightness-moved: tertiary: lightness 0.620 to 0.563 for AA.
  * hue-near-status: The primary's hue 265 is 10° from info (254.624): they may read alike. Keep an icon and a word with every status.

package/lib/themes/corail.css

@@ -1,6 +1,6 @@
 /* Theme "corail", generated.
  * Seeds: primary oklch(0.58 0.17 35), secondary oklch(0.52 0.1 70), tertiary oklch(0.5 0.1 200), neutral hue 30, tint 0.8.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * lightness-moved: primary: lightness 0.580 to 0.575 for AA.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 35 is 8° from error (27.325): they may read alike. Keep an icon and a word with every status.
@@ -17,7 +17,7 @@
 	--popover-foreground: oklch(0.227 0.0136 30);
 	--primary: oklch(0.575 0.17 35);
 	--primary-foreground: oklch(0.984 0.003 30);
-	--primary-text: color-mix(in oklab, var(--primary) 89%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 88%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.52 0.1 70);
 	--secondary-foreground: oklch(0.984 0.003 30);

package/lib/themes/foret.css

@@ -1,6 +1,6 @@
 /* Theme "foret", generated.
  * Seeds: primary oklch(0.48 0.1 152), secondary oklch(0.5 0.08 118), tertiary oklch(0.5 0.1 55), neutral hue 140, tint 0.8.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;

package/lib/themes/lavande.css

@@ -1,6 +1,6 @@
 /* Theme "lavande", generated.
  * Seeds: primary oklch(46% 0.1135 276.35), secondary oklch(48% 0.1135 245.65), tertiary oklch(45.91% 0.1864 310.75), neutral hue 292, tint 1.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="lavande"] {
 	--radius: 0.625rem;

package/lib/themes/menthe.css

@@ -1,6 +1,6 @@
 /* Theme "menthe", generated.
  * Seeds: primary oklch(0.5 0.105 168), secondary oklch(0.5 0.09 205), tertiary oklch(0.52 0.11 120), neutral hue 170, tint 0.8.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.101 (lowered to fit sRGB or AA).
  * chroma-lowered: secondary: chroma 0.090 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 168 is 17° from success (184.704): they may read alike. Keep an icon and a word with every status.
@@ -17,7 +17,7 @@
 	--popover-foreground: oklch(0.227 0.0136 170);
 	--primary: oklch(0.5 0.1013 168);
 	--primary-foreground: oklch(0.984 0.003 170);
-	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 95%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.5 0.0854 205);
 	--secondary-foreground: oklch(0.984 0.003 170);

package/lib/themes/ocean.css

@@ -1,6 +1,6 @@
 /* Theme "ocean", generated.
  * Seeds: primary oklch(0.5 0.12 228), secondary oklch(0.52 0.09 192), tertiary oklch(0.5 0.13 268), neutral hue 230, tint 0.9.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.120 to 0.098 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.505 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).

package/lib/themes/pink.css

@@ -1,6 +1,6 @@
 /* Theme "pink", generated.
  * Seeds: primary oklch(0.55 0.2 345), secondary oklch(0.5 0.14 320), tertiary oklch(0.5 0.1 200), neutral hue 345, tint 0.7.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
@@ -15,7 +15,7 @@
 	--popover-foreground: oklch(0.227 0.0119 345);
 	--primary: oklch(0.55 0.2 345);
 	--primary-foreground: oklch(0.984 0.003 345);
-	--primary-text: color-mix(in oklab, var(--primary) 94%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 92%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.5 0.14 320);
 	--secondary-foreground: oklch(0.984 0.003 345);

package/lib/themes/prune.css

@@ -1,6 +1,6 @@
 /* Theme "prune", generated.
  * Seeds: primary oklch(0.42 0.15 330), secondary oklch(0.5 0.1 355), tertiary oklch(0.55 0.1 85), neutral hue 330, tint 1.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="prune"] {
 	--radius: 0.5rem;

package/lib/themes/sable.css

@@ -1,6 +1,6 @@
 /* Theme "sable", generated.
  * Seeds: primary oklch(0.5 0.06 70), secondary oklch(0.5 0.05 45), tertiary oklch(0.5 0.07 150), neutral hue 75, tint 0.5.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="sable"] {
 	--radius: 0.5rem;

package/lib/themes/slate.css

@@ -1,6 +1,6 @@
 /* Theme "slate", generated.
  * Seeds: primary oklch(0.4 0.025 258), secondary oklch(0.48 0.02 230), tertiary oklch(0.46 0.045 275), neutral hue 258, tint 0.35.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  */
 [data-nxgt-theme="slate"] {
 	--radius: 0.25rem;

package/lib/themes/teal.css

@@ -1,6 +1,6 @@
 /* Theme "teal", generated.
  * Seeds: primary oklch(0.5 0.105 185), secondary oklch(0.52 0.09 215), tertiary oklch(0.52 0.12 60), neutral hue 190, tint 0.8.
- * Contrast: 66 pairs, 0 failing.
+ * Contrast: 67 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.088 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.490 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -19,7 +19,7 @@
 	--popover-foreground: oklch(0.227 0.0136 190);
 	--primary: oklch(0.5 0.0881 185);
 	--primary-foreground: oklch(0.984 0.003 190);
-	--primary-text: color-mix(in oklab, var(--primary) 94%, black);
+	--primary-text: color-mix(in oklab, var(--primary) 92%, black);
 	--primary-indicator: var(--primary);
 	--secondary: oklch(0.49 0.0866 215);
 	--secondary-foreground: oklch(0.984 0.003 190);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.80.0",
+	"version": "3.81.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.49.1",
+		"@nxgt/material-core": "^0.49.2",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",