@nxgt/material 3.10.2 → 3.12.0

package/lib/components/ui/actions/button/button.css

@@ -0,0 +1,156 @@
+/* Button (Material 3 Expressive): the radius is a variable of the height
+ * (`--btn-h`, set by the size, 36px without one), a round button is a pill
+ * (`--btn-h / 2`, never 999px, so it can morph) and a square one has the
+ * size's `--btn-sq`. Pressed, a button squeezes toward the other shape and
+ * scales to .97 (.985 at 2xl); selected (`data-selected`) it takes the other
+ * shape, and the fill of morph-fill.css. The radius springs on `spatial-fast`
+ * (every corner stays >= 4px at the overshoot, scripts/button-radius.spec.ts);
+ * colour and outline change on `effects-fast`.
+ *
+ * Rules on `:where(.nxgt-btn)` have no specificity, so an app's utility
+ * (`rounded-md`, `text-lg`) still wins. Toolbar items keep the Toolbar's own
+ * look. `.is-press` freezes the pressed state for the stories (as the Toolbar's
+ * does). The class is on `buttonVariants` too: Pagination, AlertDialog and the
+ * calendar's date picker get the same look. */
+@layer utilities {
+	:where(.nxgt-btn) {
+		--btn-round: calc(var(--btn-h, 36px) / 2);
+		--btn-square: var(--btn-sq, 10px);
+		position: relative;
+		border-radius: var(--btn-rad, var(--btn-round));
+		font-size: var(--btn-fs, 0.875rem);
+		line-height: var(--btn-lh, 1.25rem);
+		letter-spacing: var(--btn-ls, normal);
+		font-weight: var(--btn-fw, 500);
+		transition:
+			border-radius var(--nxgt-motion-spatial-fast-duration)
+			var(--nxgt-motion-spatial-fast),
+			padding-inline var(--nxgt-motion-spatial-fast-duration)
+			var(--nxgt-motion-spatial-fast),
+			width var(--nxgt-motion-spatial-fast-duration)
+			var(--nxgt-motion-spatial-fast),
+			transform var(--nxgt-motion-spatial-fast-duration)
+			var(--nxgt-motion-spatial-fast),
+			background-color var(--nxgt-motion-effects-fast-duration)
+			var(--nxgt-motion-effects-fast),
+			color var(--nxgt-motion-effects-fast-duration)
+			var(--nxgt-motion-effects-fast),
+			box-shadow var(--nxgt-motion-effects-fast-duration)
+			var(--nxgt-motion-effects-fast),
+			outline-color var(--nxgt-motion-effects-fast-duration)
+			var(--nxgt-motion-effects-fast);
+	}
+
+	/* The label is what is cut with an ellipsis, not the button (so the
+	 * focus outline and the hit area are never clipped). */
+	:where(.nxgt-btn > [data-slot="button-label"]) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	:where(.nxgt-btn:not(.nxgt-toolbar-item, [data-toolbar-item])):focus-visible {
+		outline: 2px solid var(--btn-focus, var(--color-ring));
+		outline-offset: 2px;
+	}
+
+	/* Shape: round (default) rests as a pill, pressed it squares; square rests
+	 * square, pressed it rounds. Selected is the other shape. */
+	:where(.nxgt-btn:not(.nxgt-toolbar-item, [data-toolbar-item])) {
+		--btn-rest: var(--btn-round);
+		--btn-press: var(--btn-square);
+		--btn-flip: var(--btn-square);
+		border-radius: var(--btn-rad, var(--btn-rest));
+
+		&[data-shape="square"] {
+			--btn-rest: var(--btn-square);
+			--btn-press: var(--btn-round);
+			--btn-flip: var(--btn-round);
+		}
+		&[data-selected] {
+			--btn-rad: var(--btn-flip);
+		}
+		&:is(:active, .is-press):not(:disabled, [aria-busy="true"]) {
+			--btn-rad: var(--btn-press);
+			transform: scale(var(--btn-scale, 0.97));
+		}
+		/* A pressed selected button goes back to where a click leads. */
+		&[data-selected]:is(:active, .is-press):not(:disabled, [aria-busy="true"]) {
+			--btn-rad: var(--btn-rest);
+		}
+	}
+
+	/* Disabled: 40 % text whatever the variant and colour, and a neutral 12 %
+	 * fill except on ghost and link (`nxgt-btn-bare`), which stay transparent.
+	 * Doubled class: it beats the variant's colour utilities. */
+	.nxgt-btn.nxgt-btn:disabled:not(.nxgt-toolbar-item, [data-toolbar-item]) {
+		color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+		box-shadow: none;
+		text-decoration: none;
+	}
+	.nxgt-btn.nxgt-btn:disabled:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item],
+		.nxgt-btn-bare
+	) {
+		background-color: color-mix(
+			in oklab,
+			var(--color-foreground) 12%,
+			transparent
+		);
+	}
+	.nxgt-btn.nxgt-btn:disabled:not(.nxgt-toolbar-item, [data-toolbar-item]) svg {
+		color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+	}
+
+	/* 44px of hit area on a coarse pointer, whatever the size. */
+	@media (pointer: coarse) {
+		:where(.nxgt-btn:not(.nxgt-toolbar-item, [data-toolbar-item]))::after {
+			content: "";
+			position: absolute;
+			inset-block: min(0px, calc((100% - 44px) / 2));
+			inset-inline: min(0px, calc((100% - 44px) / 2));
+		}
+	}
+
+	/* Safari has no `overflow-clip-margin`: an `asChild` host's `overflow: clip`
+	 * would cut the 44px hit area above, so on a coarse pointer it does not
+	 * clip (and its text has no ellipsis: put a label that needs one in a span). */
+	@supports not (overflow-clip-margin: 0px) {
+		@media (pointer: coarse) {
+			.nxgt-btn.nxgt-btn-as-child {
+				overflow: visible;
+			}
+		}
+	}
+
+	/* Reduced motion: colour and fill only, no squeeze. */
+	@media (prefers-reduced-motion: reduce) {
+		:where(.nxgt-btn:not(.nxgt-toolbar-item, [data-toolbar-item])) {
+			&:is(:active, .is-press):not(:disabled, [aria-busy="true"]) {
+				--btn-rad: var(--btn-rest);
+				transform: none;
+			}
+			&[data-selected]:is(:active, .is-press):not(
+					:disabled,
+					[aria-busy="true"]
+				) {
+				--btn-rad: var(--btn-flip);
+			}
+		}
+	}
+
+	/* Forced colours: the outlined line is an inset shadow, which they remove. */
+	@media (forced-colors: active) {
+		.nxgt-btn[data-variant="outlined"]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item],
+				:disabled,
+				:focus-visible
+			) {
+			outline: 1.5px solid ButtonText;
+			outline-offset: -1.5px;
+		}
+	}
+}

package/lib/components/ui/actions/button-group/button-group-standard.css

@@ -0,0 +1,131 @@
+/* ButtonGroup `look="standard"` (Material 3 Expressive): a row of buttons 8px
+ * apart that keep their own look. A pressed one widens by `--bg-d` on each
+ * side and its neighbours give the same width back (half each with two, the
+ * whole with one), so the group's width never changes: the toggle group's
+ * connected squish (toggle-group-squish.css) with the group's own numbers.
+ * The widening is `--btn-dx`, which Button reads in its padding (button.variants)
+ * and which IconButton gets as width here; both spring on `spatial-fast`.
+ *
+ * `--bg-d` is the group's, from its `size`, and is the most a button of that
+ * size can give back at the end of the group with its padding staying above 0
+ * through the spring's ~10 % overshoot (xs 7, sm 10, default 11, 14 from lg),
+ * 10 without a `size`. A child with a `size` of its own keeps it,
+ * and then trades the group's amount, not its own. `.is-press` freezes a
+ * pressed child for the stories, as button.css does.
+ *
+ * Coarse pointer: the gap is max(8px, 44px - the size's height), so every
+ * button's 44px hit area (button.css) fits without touching its neighbour's
+ * (each reaches half the gap past its edge), across and between wrapped rows.
+ * Reduced motion: no exchange. */
+@layer utilities {
+	[data-slot="button-group"][data-look="standard"] {
+		--bg-gap: 8px;
+		--bg-d: 10px;
+		--bg-h: 36px;
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--bg-gap);
+		max-width: 100%;
+
+		&[data-size="xs"] {
+			--bg-d: 7px;
+			--bg-h: 24px;
+		}
+		&[data-size="sm"] {
+			--bg-d: 10px;
+			--bg-h: 32px;
+		}
+		&[data-size="default"] {
+			--bg-d: 11px;
+			--bg-h: 36px;
+		}
+		&[data-size="lg"] {
+			--bg-d: 14px;
+			--bg-h: 40px;
+		}
+		&[data-size="xl"] {
+			--bg-d: 14px;
+			--bg-h: 56px;
+		}
+	}
+
+	/* The pressed child widens ... */
+	[data-slot="button-group"][data-look="standard"]
+	> :is(:active, .is-press):not(:disabled, [aria-busy="true"]) {
+		--btn-dx: var(--bg-d);
+	}
+	/* ... its neighbours give half each ... */
+	[data-slot="button-group"][data-look="standard"]
+	> :has(+ :is(:active, .is-press):not(:disabled, [aria-busy="true"])),
+	[data-slot="button-group"][data-look="standard"]
+		> :is(:active, .is-press):not(:disabled, [aria-busy="true"])
+		+ * {
+		--btn-dx: calc(var(--bg-d) / -2);
+	}
+	/* ... or the whole of it when it is the only one (the pressed child is
+	 * at an end). */
+	[data-slot="button-group"][data-look="standard"]
+		> :first-child:is(:active, .is-press):not(:disabled, [aria-busy="true"])
+		+ *,
+	[data-slot="button-group"][data-look="standard"]
+		> :has(
+			+ :last-child:is(:active, .is-press):not(:disabled, [aria-busy="true"])
+		) {
+		--btn-dx: calc(var(--bg-d) * -1);
+	}
+
+	/* An IconButton, and a Button of the icon sizes, have a width of their
+	 * own (a factor of the height): the exchange is added to it. A pill toggle
+	 * keeps its extra 14px. A shaped one does not trade. */
+	[data-slot="button-group"][data-look="standard"]
+	> [data-icon-button]:not(
+		[data-shape],
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	),
+	[data-slot="button-group"][data-look="standard"]
+		> [data-slot="button"]:is([data-size="icon"], [data-size^="icon-"]) {
+		width: calc(
+			var(--btn-h, 2.25rem) *
+			var(--ib-k, 1) +
+			2 *
+			var(--btn-dx, 0px)
+		);
+		/* A neighbour never gives up so much that its icon sticks out: its
+		 * floor is the icon and 4px each side, never above its width at rest
+		 * (an icon-only one at the end of the group, which gives the whole
+		 * exchange, may then give back less than asked, and the group widens by
+		 * the difference). */
+		min-width: min(
+			calc(var(--btn-h, 2.25rem) * var(--ib-k, 1)),
+			calc(var(--btn-ic, 1rem) + 4px)
+		);
+	}
+	[data-slot="button-group"][data-look="standard"]
+		> [data-icon-button][data-morph="pill"][data-selected]:not(
+			[data-shape],
+			.nxgt-toolbar-item,
+			[data-toolbar-item]
+		) {
+		width: calc(
+			var(--btn-h, 2.25rem) *
+			var(--ib-k, 1) +
+			var(--ib-morph, 0px) +
+			2 *
+			var(--btn-dx, 0px)
+		);
+	}
+
+	@media (pointer: coarse) {
+		[data-slot="button-group"][data-look="standard"] {
+			--bg-gap: max(8px, calc(44px - var(--bg-h)));
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-slot="button-group"][data-look="standard"] {
+			--bg-d: 0px;
+		}
+	}
+}

package/lib/components/ui/actions/button-group/button-group.css

@@ -1,4 +1,7 @@
-.nxgt-button-group {
+/* ButtonGroup, the original look (no `look`): children forced to a tinted,
+ * rounded button. Scoped to `:not(:where([data-look]))` (the `:where` keeps the specificity at one class, so an app's override still wins), so `look="standard"`
+ * (button-group-standard.css) is not touched by it. */
+.nxgt-button-group:not(:where([data-look])) {
 	@apply inline-flex bg-background p-2 gap-1 transition-all **:transition-all items-center w-full;
 	:is([data-slot="button"], [data-slot="icon-button"]) {
 		@apply rounded bg-primary/15 shadow-none hover:bg-primary/10 hover:shadow w-max max-w-max;

package/lib/components/ui/actions/icon-button/icon-button.css

@@ -0,0 +1,115 @@
+/* IconButton on the shared Button look (button.css: radius from the height,
+ * press morph, 2px focus outline, disabled fill, 44px hit area; morph-fill.css:
+ * the selected fill). This file is what is IconButton's own:
+ *
+ * - a toggle (`aria-pressed`, `data-morph`): `pill` widens by `--ib-morph`
+ *   (14px from 600px wide, none below, where only the colour changes), `round`
+ *   stays a circle; both stay round when selected and square when pressed;
+ *   `none` has no `data-morph` and keeps the look its classes give it. The
+ *   widening is the host's own width, which springs on `spatial-fast`.
+ * - a disabled icon's line (`stroke`) is as dim as its text (the outlined variant's
+ *   inset line is Button's, button.css and morph-fill.css clear it).
+ *
+ * A shaped IconButton (`data-shape`, an expressive shape) and a Toolbar item
+ * keep their own looks: they have no `nxgt-btn`, or are excluded below. */
+@layer utilities {
+	/* A selected toggle stays round (the pill or the circle is its other shape). */
+	[data-icon-button][data-morph] {
+		--btn-flip: var(--btn-round);
+	}
+	@media (min-width: 600px) {
+		[data-icon-button][data-morph="pill"] {
+			--ib-morph: 14px;
+		}
+	}
+	[data-icon-button][data-morph="pill"][data-selected]:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	) {
+		width: calc(var(--btn-h) * var(--ib-k, 1) + var(--ib-morph, 0px));
+	}
+
+	/* Pressed, the corners squeeze; a selected toggle too (button.css sends it
+	 * back to the rest radius, which for a toggle is the shape it already has). */
+	[data-icon-button][data-morph][data-selected]:is(:active, .is-press):not(
+		:disabled,
+		[aria-busy="true"]
+	) {
+		--btn-rad: var(--btn-square);
+	}
+
+	/* Selected: the fill replaces the line, the icon's line follows the text. */
+	[data-icon-button][data-selected]:not(.nxgt-toolbar-item, [data-toolbar-item])
+	svg {
+		stroke: var(--morph-on-fg, var(--color-primary-foreground));
+	}
+
+	/* Disabled: the line of the icon as dim as its text. */
+	[data-icon-button]:disabled:is(
+		[data-variant="filled"],
+		[data-variant="tonal"],
+		[data-variant="outlined"],
+		[data-variant="link"],
+		[data-variant="ghost"]:is(
+			[data-color="secondary"],
+			[data-color="success"],
+			[data-color="info"],
+			[data-color="warning"],
+			[data-color="error"]
+		)
+	):not(.nxgt-toolbar-item, [data-toolbar-item]) svg {
+		stroke: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+	}
+
+	/* An IconButton slotted into a Toolbar (`data-toolbar-item`, ToolbarItemSlot)
+	 * has no `.nxgt-toolbar-item` rules of its own: it keeps the Toolbar's
+	 * focus outline and a dimmed disabled look, which the shared rules leave out. */
+	[data-icon-button][data-toolbar-item]:focus-visible {
+		outline: 2px solid var(--tb-focus, var(--color-primary-text));
+		outline-offset: 2px;
+	}
+	[data-icon-button][data-toolbar-item]:disabled {
+		opacity: 0.4;
+	}
+
+	/* Reduced motion: colour and fill only. The widening is instant and a
+	 * pressed toggle keeps its shape. */
+	@media (prefers-reduced-motion: reduce) {
+		[data-icon-button][data-morph]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			) {
+			transition:
+				background-color var(--nxgt-motion-effects-fast-duration)
+				var(--nxgt-motion-effects-fast),
+				color var(--nxgt-motion-effects-fast-duration)
+				var(--nxgt-motion-effects-fast);
+		}
+		[data-icon-button][data-morph][data-selected]:is(:active, .is-press):not(
+				:disabled,
+				[aria-busy="true"]
+			) {
+			--btn-rad: var(--btn-flip);
+		}
+	}
+
+	/* Forced colours (the selected toggle is morph-fill.css's). */
+	@media (forced-colors: active) {
+		/* The outlined line is an inset shadow, which forced colours remove. */
+		[data-icon-button][data-variant="outlined"]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item],
+				:disabled,
+				:focus-visible
+			) {
+			outline: 1.5px solid ButtonText;
+			outline-offset: -1.5px;
+		}
+		[data-icon-button]:focus-visible:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			) {
+			outline-color: Highlight;
+		}
+	}
+}

package/lib/components/ui/actions/morph-fill.css

@@ -0,0 +1,62 @@
+/* The fill of a selected morph control, shared (#1106: it was copied into
+ * Toolbar, IconButton and RichChatComposer). A host with the class
+ * `nxgt-morph-fill` and `data-selected` is filled with `--morph-on` and reads
+ * `--morph-on-fg` on it; its colour sets both (`toneVars`, button-tones.ts).
+ * Button and IconButton use it; the toggle's shape change is the host's own
+ * (button.css, icon-button.css); Toolbar items keep the Toolbar's own fill.
+ * A ghost control without a `color` (no `data-color`) is neutral when selected
+ * too, for Button and IconButton alike: a 12 % tint of the text colour, label
+ * and icon in full text colour (primary only with a `color`).
+ * Doubled class: it must beat the colour
+ * utilities of the variant (`bg-primary`, `hover:bg-…`). */
+@layer utilities {
+	.nxgt-morph-fill[data-variant="ghost"]:not([data-color]) {
+		--morph-on: color-mix(in oklab, var(--color-foreground) 12%, transparent);
+		--morph-on-fg: var(--color-foreground);
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	) {
+		background-color: var(--morph-on, var(--color-primary));
+		color: var(--morph-on-fg, var(--color-primary-foreground));
+		box-shadow: none;
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+			.nxgt-toolbar-item,
+			[data-toolbar-item]
+		)
+		svg {
+		color: var(--morph-on-fg, var(--color-primary-foreground));
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	):hover:not(:disabled) {
+		background-color: color-mix(
+			in oklab,
+			var(--morph-on-fg, var(--color-primary-foreground)) 10%,
+			var(--morph-on, var(--color-primary))
+		);
+	}
+
+	/* Forced colours: the selected control is the system's selected item. */
+	@media (forced-colors: active) {
+		.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			) {
+			background-color: SelectedItem;
+			color: SelectedItemText;
+			forced-color-adjust: none;
+		}
+		.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			)
+			svg {
+			color: SelectedItemText;
+			stroke: SelectedItemText;
+		}
+	}
+}

package/lib/components/ui/feedback/toast/toast-expressive.css

@@ -107,6 +107,23 @@
 		gap: 8px;
 		margin-inline-start: auto;
 	}
+	/* A stacked toast behind the front one (`data-expanded="false"`,
+	 * `data-front="false"`) sits under it, scaled and offset by a few pixels:
+	 * its buttons are covered, so a tap lands on the front toast, and a covered,
+	 * scaled close button fails axe's `target-size` (#1480). Its buttons are
+	 * hidden until the stack opens (sonner opens it on hover, not on focus) or
+	 * focus is inside the toaster, so a Tab from the front toast still reaches
+	 * them. Sonner's own `opacity: 0` for these does not apply to our unstyled
+	 * (`data-styled="false"`) toasts. */
+	[data-sonner-toast][data-expanded="false"][data-front="false"]
+	.nxgt-toast-buttons {
+		visibility: hidden;
+	}
+	[data-sonner-toaster]:focus-within
+		[data-sonner-toast][data-expanded="false"][data-front="false"]
+		.nxgt-toast-buttons {
+		visibility: visible;
+	}
 	.nxgt-toast-title {
 		color: var(--toast-fg);
 	}

package/lib/components/ui/layout/app-shell/activity-backdrop-shapes.css

@@ -0,0 +1,49 @@
+/* Which shapes of the backdrop show (observe-layout.ts, watch-content.ts).
+ * Plain CSS in `@layer components`, beside activity-backdrop.css. */
+@layer components {
+	/* The theme's backdrop keeps its shapes whole (keep-shapes-inside.ts):
+	 * the scene waits for the first pass, then a shape that would cross the
+	 * layer's edge or reach the header band is hidden, never cut. */
+	[data-keep-inside]:not([data-checked]) .mo,
+	[data-slot="activity-layout-backdrop"]
+		[data-background]:not([data-checked])
+		.mo {
+		visibility: hidden;
+	}
+	[data-keep-inside] .mo > [data-outside],
+	[data-slot="activity-layout-backdrop"]
+		[data-background]
+		.mo
+		> [data-outside] {
+		visibility: hidden;
+	}
+
+	/* A shape over the page's text or controls fades out and comes back once
+	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
+	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
+	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing
+	 * flashes over the content. */
+	[data-keep-inside] .mo > *,
+	[data-keep-inside] .pt,
+	[data-slot="activity-layout-backdrop"] [data-background] .mo > *,
+	[data-slot="activity-layout-backdrop"] [data-background] .pt {
+		transition: opacity 150ms ease;
+	}
+	/* Important: a preset sets its own opacity on a body (`.md`, the dark
+	 * moon's, a celestial body's); in a layer, `!important` beats every normal
+	 * declaration of those. The 150 ms transition still runs. */
+	[data-keep-inside] .mo > [data-hidden],
+	[data-keep-inside] .pt[data-hidden],
+	[data-slot="activity-layout-backdrop"] [data-background] .mo > [data-hidden],
+	[data-slot="activity-layout-backdrop"] [data-background] .pt[data-hidden] {
+		opacity: 0 !important;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		[data-keep-inside] .mo > *,
+		[data-keep-inside] .pt,
+		[data-slot="activity-layout-backdrop"] [data-background] .mo > *,
+		[data-slot="activity-layout-backdrop"] [data-background] .pt {
+			transition: none;
+		}
+	}
+}

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -77,23 +77,6 @@
 		display: none;
 	}
 
-	/* The theme's backdrop keeps its shapes whole (use-keep-shapes-inside.ts):
-	 * the scene waits for the first pass, then a shape that would cross the
-	 * layer's edge or reach the header band is hidden, never cut. */
-	[data-keep-inside]:not([data-checked]) .mo,
-	[data-slot="activity-layout-backdrop"]
-		[data-background]:not([data-checked])
-		.mo {
-		visibility: hidden;
-	}
-	[data-keep-inside] .mo > [data-outside],
-	[data-slot="activity-layout-backdrop"]
-		[data-background]
-		.mo
-		> [data-outside] {
-		visibility: hidden;
-	}
-
 	/* A preset fills the layer: the layer's size, not `100lvw x 100lvh`, which
 	 * counts the scrollbar and a phone's toolbar. */
 	[data-slot="activity-layout-backdrop"] > [data-background] {

package/lib/components/ui/layout/sidebar/sidebar-tokens.css

@@ -3,13 +3,18 @@
 :root {
 	/* The active entry of the sidebar and the navigation rail: its tint, the
 	 * tint hovered, the start bar (the label's colour), and the icon and label drawn on it. Translucent primary
-	 * (these shares, 15 % and 20 % hovered); the label is primary itself. The
+	 * (these shares, 15 % and 20 % hovered); the label is primary at 85 % of its lightness in light (a lavender of its hue in dark). The
 	 * utilities (`bg-sidebar-active`...) derive them on the element, so they
 	 * follow a `--primary` set below :root. To theme the rail set
 	 * `--sidebar-active`, `--sidebar-active-hover` and
 	 * `--sidebar-active-foreground` (all three, or the first two and the
 	 * foreground); the derived colours are not declared here, on purpose. */
 	--nxgt-sidebar-active-share: 15%;
+	/* Light: primary itself reads 4.5:1 on the page but not on its own 15 % pill
+	 * for every preset (corail 3.7:1), so the label is primary darkened to 85 %
+	 * of its lightness (4.99:1 on the worst preset, hovered). The preset spec
+	 * (sidebar-active-contrast.test.ts) reads this number back. */
+	--nxgt-sidebar-active-l: calc(l * 0.85);
 	/* The height of the app bar and of the rail's header from `md` up, so the
 	 * rail's logo and the bar's title share one centre line. Phones keep the
 	 * bar alone at this height; the menu sheet's header is unconstrained. */
@@ -24,7 +29,7 @@
 	/* The dark theme's primary is too dark to read on its surfaces (2.5:1), so
 	 * the rail's label is a saturated lavender of its hue (5.3:1: lightness
 	 * 0.72, chroma 0.15) on a denser pill (30 %, 35 % hovered). Light keeps the
-	 * lightness and chroma of primary (the `l` and `c` fallbacks). */
+	 * chroma of primary and 85 % of its lightness. */
 	--nxgt-sidebar-active-share: 30%;
 	--nxgt-sidebar-active-hover-share: 35%;
 	--nxgt-sidebar-active-l: 0.72;

package/lib/styles.css

@@ -15,6 +15,8 @@
 /* Motion tokens (--nxgt-motion-*, ease-spatial-*; generated) and corner tokens (--nxgt-shape-corner-*). */
 @import "./components/motion.css";
 @import "./components/shape-tokens.css";
+/* The type scale (text-title-md, text-title-md-em…; --text-<role>-<size>*): lib/components/type-scale.css. */
+@import "./components/type-scale.css";
 /* The animation API (animate-fade-in-up, animate-duration-300…): lib/components/animations/index.css. */
 @import "./components/animations/index.css";
 /* The base layer: elements (base.css), then editor content and the form grid. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.10.2",
+	"version": "3.12.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -465,6 +465,7 @@
 		"@vitejs/plugin-react": "6.0.4",
 		"@vitest/browser-playwright": "4.1.10",
 		"ajv": "^8.20.0",
+		"axe-core": "4.12.1",
 		"globals": "^17.7.0",
 		"hls.js": "^1.7.3",
 		"leaflet": "^1.9.4",