@nxgt/material 3.10.2 → 3.12.0

package/dist/{chip-DpySRqCy.js → chip-DLgQTJBZ.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./utils-Bcd2Z3ea.js";
-import { t } from "./tooltip-rhbqNmr3.js";
-import { t as n } from "./use-material-translation-DkxcLbLM.js";
-import { i as r } from "./button-tones-BgZJ1tkD.js";
+import { t as e } from "./utils-BLfntITJ.js";
+import { t } from "./tooltip-CkttDIab.js";
+import { t as n } from "./use-material-translation-B3V_bz-5.js";
+import { a as r } from "./button-tones-BwuVvAmd.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { Check as a, X as o } from "lucide-react";
 import { cloneElement as s, isValidElement as c } from "react";

package/dist/{code-editor-BiA14xua.js → code-editor-BZbaYLvo.js}

@@ -1,15 +1,15 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
-import { t } from "./utils-Bcd2Z3ea.js";
+import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-BC5Tbhb9.js";
-import { a as c, i as l, n as u } from "./field-blur-context-1ZwJgsHE.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-CqHvlTU8.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-BsH9W_3C.js";
+import { a as c, i as l, n as u } from "./field-blur-context-Cft9s7Hg.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-rUHdVqAq.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-DkxcLbLM.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-C_dJ6GVs.js";
+import { t as _ } from "./use-material-translation-B3V_bz-5.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-BT5BO5w6.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { n as C, t as w } from "./escape-owner-CripBce_.js";
-import { t as T } from "./skeleton-Bmp4gWAH.js";
+import { n as C, t as w } from "./escape-owner-C4W_sOAU.js";
+import { t as T } from "./skeleton-DSdtr2qc.js";
 import { t as E } from "./react-node-text-Crkpfpco.js";
 import { Check as D, ChevronDown as O, CircleAlert as ee, Copy as k, FileCode2 as te, Lock as ne, Maximize2 as re, Minimize2 as A, Search as ie, TriangleAlert as ae, WandSparkles as oe, WrapText as se } from "lucide-react";
 import j, { memo as ce, useCallback as le, useEffect as M, useId as ue, useImperativeHandle as de, useMemo as fe, useRef as N, useState as P } from "react";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
-import { t as e } from "./utils-Bcd2Z3ea.js";
+import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-CqHvlTU8.js";
-import { t as o } from "./use-material-translation-DkxcLbLM.js";
-import { i as s, n as c, o as l } from "./code-language-items-C_dJ6GVs.js";
-import { r as u, t as d } from "./field-blur-DPLsMufs.js";
-import { t as f } from "./skeleton-Bmp4gWAH.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-rUHdVqAq.js";
+import { t as o } from "./use-material-translation-B3V_bz-5.js";
+import { i as s, n as c, o as l } from "./code-language-items-BT5BO5w6.js";
+import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
+import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BiA14xua.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BZbaYLvo.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-C_dJ6GVs.js → code-language-items-BT5BO5w6.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-BC5Tbhb9.js";
-import { t as n } from "./use-material-translation-DkxcLbLM.js";
+import { d as e, f as t } from "./dropdown-menu-BsH9W_3C.js";
+import { t as n } from "./use-material-translation-B3V_bz-5.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/components/base.css

@@ -31,28 +31,43 @@
 			@apply dark:fill-foreground;
 		}
 
+		/* h1 to h6 read the type scale (type-scale.css); the fallbacks keep the
+		   old sizes where the scale is not loaded (this file is shared with
+		   @nxgt/material-vue, which has no scale yet). */
 		h1 {
-			font-size: var(--text-2xl);
+			font-size: var(--text-headline-md, var(--text-2xl));
+			line-height: var(--text-headline-md--line-height, inherit);
+			letter-spacing: var(--text-headline-md--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		h2 {
-			font-size: var(--text-xl);
+			font-size: var(--text-headline-sm, var(--text-xl));
+			line-height: var(--text-headline-sm--line-height, inherit);
+			letter-spacing: var(--text-headline-sm--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		h3 {
-			font-size: var(--text-lg);
+			font-size: var(--text-title-lg, var(--text-lg));
+			line-height: var(--text-title-lg--line-height, inherit);
+			letter-spacing: var(--text-title-lg--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		h4 {
-			font-size: var(--text-base);
+			font-size: var(--text-title-md, var(--text-base));
+			line-height: var(--text-title-md--line-height, inherit);
+			letter-spacing: var(--text-title-md--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		h5 {
-			font-size: var(--text-sm);
+			font-size: var(--text-title-sm, var(--text-sm));
+			line-height: var(--text-title-sm--line-height, inherit);
+			letter-spacing: var(--text-title-sm--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		h6 {
-			font-size: var(--text-xs);
+			font-size: var(--text-label-md, var(--text-xs));
+			line-height: var(--text-label-md--line-height, inherit);
+			letter-spacing: var(--text-label-md--letter-spacing, inherit);
 			font-weight: var(--font-weight-medium);
 		}
 		/* A sidebar entry is a link styled as a menu entry: the prose link style

package/dist/components/components.css

@@ -51,9 +51,11 @@
 @import "./ui/widgets/editor/extensions/code/code-block.css";
 @import "./ui/widgets/editor/extensions/code/code-block-head.css";
 @import "./ui/actions/button-group/button-group.css";
+@import "./ui/actions/button-group/button-group-standard.css";
 /* ActivityLayout: the route transition (cross-fade, none under reduced motion). */
 @import "./ui/layout/app-shell/route-transition.css";
 @import "./ui/layout/app-shell/activity-backdrop.css";
+@import "./ui/layout/app-shell/activity-backdrop-shapes.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
 @import "./ui/collections/data-table/data-table-items.css";
 @import "./ui/collections/data-table/data-table-items-compact.css";
@@ -79,8 +81,10 @@
 @import "./ui/actions/split-button/split-button-sizes.css";
 @import "./ui/actions/split-button/split-button-colors.css";
 @import "./ui/actions/split-button/split-button-states.css";
-@import "./ui/actions/icon-button/icon-button-morph.css";
-@import "./ui/actions/icon-button/icon-button-morph-media.css";
+/* Button (sizes, shape morph, selected), the selected fill it shares with IconButton, and IconButton's own rules. */
+@import "./ui/actions/morph-fill.css";
+@import "./ui/actions/button/button.css";
+@import "./ui/actions/icon-button/icon-button.css";
 @import "./ui/actions/fab/fab.css";
 @import "./ui/actions/fab/fab-tones.css";
 @import "./ui/actions/fab/fab-menu.css";

package/dist/components/type-scale.css

@@ -0,0 +1,194 @@
+/* The type scale of @nxgt/material (Material 3 Expressive), imported by
+ * lib/styles.css: display, headline, title, body and label, each large, medium
+ * and small, as Tailwind tokens. Each role-size has a size, a line height, a
+ * tracking and a weight, so `text-title-md` sets all four; `text-title-md-em`
+ * keeps the size, line height and tracking and takes the emphasized (heavier)
+ * weight. The weights are numbers, so a variable font (Inter) reads them on
+ * its wght axis; `font-optical-sizing: auto` (the browser default) picks the
+ * opsz axis from the size. No font-variation-settings, no new font.
+ *
+ * Retune a token with a CSS variable on :root or on a zone, after importing
+ * the stylesheet; the utilities read the variable where they are used:
+ *   :root { --text-title-md: 1.125rem; --text-title-md--line-height: 1.5rem; }
+ * The emphasized variants read the base size, line height and tracking, so an
+ * override of the base reaches them; their weight is
+ * `--text-<role>-<size>--font-weight-em`.
+ *
+ * Typography (variant="title-md", emphasized) is the component for it. Static:
+ * every token is on :root even when no utility uses it. Not shared with
+ * @nxgt/material-vue. scripts/type-scale.spec.ts keeps the values. */
+@theme static {
+	--text-display-lg: 3.5625rem;
+	--text-display-lg--line-height: 4rem;
+	--text-display-lg--letter-spacing: -0.0044em;
+	--text-display-lg--font-weight: 400;
+	--text-display-lg--font-weight-em: 540;
+
+	--text-display-md: 2.8125rem;
+	--text-display-md--line-height: 3.25rem;
+	--text-display-md--letter-spacing: 0em;
+	--text-display-md--font-weight: 400;
+	--text-display-md--font-weight-em: 540;
+
+	--text-display-sm: 2.25rem;
+	--text-display-sm--line-height: 2.75rem;
+	--text-display-sm--letter-spacing: 0em;
+	--text-display-sm--font-weight: 400;
+	--text-display-sm--font-weight-em: 540;
+
+	--text-headline-lg: 2rem;
+	--text-headline-lg--line-height: 2.5rem;
+	--text-headline-lg--letter-spacing: 0em;
+	--text-headline-lg--font-weight: 400;
+	--text-headline-lg--font-weight-em: 560;
+
+	--text-headline-md: 1.75rem;
+	--text-headline-md--line-height: 2.25rem;
+	--text-headline-md--letter-spacing: 0em;
+	--text-headline-md--font-weight: 400;
+	--text-headline-md--font-weight-em: 560;
+
+	--text-headline-sm: 1.5rem;
+	--text-headline-sm--line-height: 2rem;
+	--text-headline-sm--letter-spacing: 0em;
+	--text-headline-sm--font-weight: 400;
+	--text-headline-sm--font-weight-em: 560;
+
+	--text-title-lg: 1.375rem;
+	--text-title-lg--line-height: 1.75rem;
+	--text-title-lg--letter-spacing: 0em;
+	--text-title-lg--font-weight: 400;
+	--text-title-lg--font-weight-em: 580;
+
+	--text-title-md: 1rem;
+	--text-title-md--line-height: 1.5rem;
+	--text-title-md--letter-spacing: 0.0094em;
+	--text-title-md--font-weight: 500;
+	--text-title-md--font-weight-em: 680;
+
+	--text-title-sm: 0.875rem;
+	--text-title-sm--line-height: 1.25rem;
+	--text-title-sm--letter-spacing: 0.0071em;
+	--text-title-sm--font-weight: 500;
+	--text-title-sm--font-weight-em: 680;
+
+	--text-body-lg: 1rem;
+	--text-body-lg--line-height: 1.5rem;
+	--text-body-lg--letter-spacing: 0.031em;
+	--text-body-lg--font-weight: 400;
+	--text-body-lg--font-weight-em: 520;
+
+	--text-body-md: 0.875rem;
+	--text-body-md--line-height: 1.25rem;
+	--text-body-md--letter-spacing: 0.0179em;
+	--text-body-md--font-weight: 400;
+	--text-body-md--font-weight-em: 520;
+
+	--text-body-sm: 0.75rem;
+	--text-body-sm--line-height: 1rem;
+	--text-body-sm--letter-spacing: 0.0333em;
+	--text-body-sm--font-weight: 400;
+	--text-body-sm--font-weight-em: 520;
+
+	--text-label-lg: 0.875rem;
+	--text-label-lg--line-height: 1.25rem;
+	--text-label-lg--letter-spacing: 0.0071em;
+	--text-label-lg--font-weight: 500;
+	--text-label-lg--font-weight-em: 700;
+
+	--text-label-md: 0.75rem;
+	--text-label-md--line-height: 1rem;
+	--text-label-md--letter-spacing: 0.0417em;
+	--text-label-md--font-weight: 500;
+	--text-label-md--font-weight-em: 700;
+
+	--text-label-sm: 0.6875rem;
+	--text-label-sm--line-height: 1rem;
+	--text-label-sm--letter-spacing: 0.0455em;
+	--text-label-sm--font-weight: 500;
+	--text-label-sm--font-weight-em: 700;
+}
+
+/* Emphasized: the base size, line height and tracking, read where used, and the heavier weight. */
+@theme inline {
+	--text-display-lg-em: var(--text-display-lg);
+	--text-display-lg-em--line-height: var(--text-display-lg--line-height);
+	--text-display-lg-em--letter-spacing: var(--text-display-lg--letter-spacing);
+	--text-display-lg-em--font-weight: var(--text-display-lg--font-weight-em);
+
+	--text-display-md-em: var(--text-display-md);
+	--text-display-md-em--line-height: var(--text-display-md--line-height);
+	--text-display-md-em--letter-spacing: var(--text-display-md--letter-spacing);
+	--text-display-md-em--font-weight: var(--text-display-md--font-weight-em);
+
+	--text-display-sm-em: var(--text-display-sm);
+	--text-display-sm-em--line-height: var(--text-display-sm--line-height);
+	--text-display-sm-em--letter-spacing: var(--text-display-sm--letter-spacing);
+	--text-display-sm-em--font-weight: var(--text-display-sm--font-weight-em);
+
+	--text-headline-lg-em: var(--text-headline-lg);
+	--text-headline-lg-em--line-height: var(--text-headline-lg--line-height);
+	--text-headline-lg-em--letter-spacing: var(
+		--text-headline-lg--letter-spacing
+	);
+	--text-headline-lg-em--font-weight: var(--text-headline-lg--font-weight-em);
+
+	--text-headline-md-em: var(--text-headline-md);
+	--text-headline-md-em--line-height: var(--text-headline-md--line-height);
+	--text-headline-md-em--letter-spacing: var(
+		--text-headline-md--letter-spacing
+	);
+	--text-headline-md-em--font-weight: var(--text-headline-md--font-weight-em);
+
+	--text-headline-sm-em: var(--text-headline-sm);
+	--text-headline-sm-em--line-height: var(--text-headline-sm--line-height);
+	--text-headline-sm-em--letter-spacing: var(
+		--text-headline-sm--letter-spacing
+	);
+	--text-headline-sm-em--font-weight: var(--text-headline-sm--font-weight-em);
+
+	--text-title-lg-em: var(--text-title-lg);
+	--text-title-lg-em--line-height: var(--text-title-lg--line-height);
+	--text-title-lg-em--letter-spacing: var(--text-title-lg--letter-spacing);
+	--text-title-lg-em--font-weight: var(--text-title-lg--font-weight-em);
+
+	--text-title-md-em: var(--text-title-md);
+	--text-title-md-em--line-height: var(--text-title-md--line-height);
+	--text-title-md-em--letter-spacing: var(--text-title-md--letter-spacing);
+	--text-title-md-em--font-weight: var(--text-title-md--font-weight-em);
+
+	--text-title-sm-em: var(--text-title-sm);
+	--text-title-sm-em--line-height: var(--text-title-sm--line-height);
+	--text-title-sm-em--letter-spacing: var(--text-title-sm--letter-spacing);
+	--text-title-sm-em--font-weight: var(--text-title-sm--font-weight-em);
+
+	--text-body-lg-em: var(--text-body-lg);
+	--text-body-lg-em--line-height: var(--text-body-lg--line-height);
+	--text-body-lg-em--letter-spacing: var(--text-body-lg--letter-spacing);
+	--text-body-lg-em--font-weight: var(--text-body-lg--font-weight-em);
+
+	--text-body-md-em: var(--text-body-md);
+	--text-body-md-em--line-height: var(--text-body-md--line-height);
+	--text-body-md-em--letter-spacing: var(--text-body-md--letter-spacing);
+	--text-body-md-em--font-weight: var(--text-body-md--font-weight-em);
+
+	--text-body-sm-em: var(--text-body-sm);
+	--text-body-sm-em--line-height: var(--text-body-sm--line-height);
+	--text-body-sm-em--letter-spacing: var(--text-body-sm--letter-spacing);
+	--text-body-sm-em--font-weight: var(--text-body-sm--font-weight-em);
+
+	--text-label-lg-em: var(--text-label-lg);
+	--text-label-lg-em--line-height: var(--text-label-lg--line-height);
+	--text-label-lg-em--letter-spacing: var(--text-label-lg--letter-spacing);
+	--text-label-lg-em--font-weight: var(--text-label-lg--font-weight-em);
+
+	--text-label-md-em: var(--text-label-md);
+	--text-label-md-em--line-height: var(--text-label-md--line-height);
+	--text-label-md-em--letter-spacing: var(--text-label-md--letter-spacing);
+	--text-label-md-em--font-weight: var(--text-label-md--font-weight-em);
+
+	--text-label-sm-em: var(--text-label-sm);
+	--text-label-sm-em--line-height: var(--text-label-sm--line-height);
+	--text-label-sm-em--letter-spacing: var(--text-label-sm--letter-spacing);
+	--text-label-sm-em--font-weight: var(--text-label-sm--font-weight-em);
+}

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