@nxgt/material 3.10.2 → 3.12.0

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;