@nxgt/material 3.10.2 → 3.12.0

package/docs/guides/backgrounds.md

@@ -181,6 +181,8 @@ of path data; `low-poly` is about 20 KB (210 nodes); `circuit` about 9 KB (90 no
 
 <img src="../previews/backgrounds-motifs.webp" width="480" alt="The shapes preset behind a card">
 
+**Behind an `ActivityLayout`** a preset's discrete shapes are hidden wherever they would lie over the page's text or controls, and fade back when the content moves away (see [Where the shapes go](./app-shell.md#the-themes-background)). A `Background` used on its own, on a page you lay out, draws all its shapes.
+
 `shapes`, `confetti-grid`, `constellation`, `halftone`, `truchet`, `floating` and `scatter-icons` draw seeded, deterministic geometry from
 the tone's three colours: the same `seed` gives the same composition on the server and in the
 browser, and a new `seed` redraws it.

package/docs/guides/theming.md

@@ -35,6 +35,8 @@ at the top are needed is in [getting started](../getting-started.md#styles).
   `AttributeForm` and `AttributeValuesForm`, and the required-field mark drawn
   after a `Label` (the first three are dependencies, the rest ship in
   `lib/components/`);
+- the **type scale**: `--text-<role>-<size>` tokens and the `text-title-md` and
+  `text-title-md-em` utilities ([Type scale](#type-scale));
 - the **tokens**: CSS variables on `:root`, and their dark values on `.dark`
   and `[data-theme="dark"]`;
 - an `@theme inline` block that maps each token to a Tailwind colour, so
@@ -576,15 +578,16 @@ rail and menu sheet) is drawn with three tokens, in light and in dark:
 | --- | --- | --- | --- |
 | `--sidebar-active` | `bg-sidebar-active` | primary at 15 % | primary at 30 % |
 | `--sidebar-active-hover` | `bg-sidebar-active-hover` | primary at 20 % | primary at 35 % |
-| `--sidebar-active-foreground` | `text-sidebar-active-foreground` | `--primary` | `oklch(from var(--primary) 0.72 0.15 h)`, 6.3:1 or more on the pill |
+| `--sidebar-active-foreground` | `text-sidebar-active-foreground` | `oklch(from var(--primary) calc(l * 0.85) c h)`, 4.5:1 or more on the pill for every theme preset | `oklch(from var(--primary) 0.72 0.15 h)`, 6.3:1 or more on the pill |
 
 The pill is the icon's (collapsed rail) or the whole row (expanded), a pill in the collapsed rail and, in the expanded row, an `--nxgt-item-radius` (6px) shape that carries the 3px start bar every chosen row has, drawn in `--sidebar-active-foreground` (a `Highlight` bar in forced colours); the
 foreground is the label and the icon, whose duotone layers both follow it (in
 dark too: the icon of `AppSidebar` is the lifted lavender like its label). The
 label is read on the pill (expanded) or on the sidebar (collapsed rail); the
 icon, on the pill. In browsers without relative colour syntax (before Chrome
-119, Safari 18, Firefox 128) the dark foreground falls back to `--primary`
-itself, as the dark lift needs `oklch(from …)`.
+119, Safari 18, Firefox 128) the foreground falls back to `--primary`
+itself in light and dark, as both the light darkening and the dark lift need
+`oklch(from …)`.
 
 The defaults are derived where the entry is drawn, from the `--primary` it
 sits under, so a `--primary` set on a wrapper recolours the rail inside it.
@@ -664,6 +667,55 @@ does not set it: without it the title uses the body face. Set it on `:root`
 }
 ```
 
+## Type scale
+
+The text sizes are the Material 3 type scale: five roles (`display`, `headline`,
+`title`, `body`, `label`) in three sizes (`lg`, `md`, `sm`), as Tailwind 4
+tokens in `styles.css`. Each step has a size, a line height, a tracking and a
+weight, and an emphasized (heavier) weight:
+
+```css
+--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;
+```
+
+They are real Tailwind utilities, so your own markup uses the same steps as
+`Typography`, `Button` and the bare headings:
+
+```tsx
+<h2 className="text-headline-sm">Orders</h2>
+<p className="text-body-md">12 orders are waiting.</p>
+<span className="text-title-md-em">Next delivery</span>
+```
+
+`text-title-md` sets size, line height, tracking and weight; `text-title-md-em`
+keeps the first three and takes the emphasized weight. `font-bold`,
+`leading-*` and `tracking-*` still win over them. Retune a step with CSS
+variables, on `:root` for the app or on a zone for one part of the page; there
+is no `defineTheme` key:
+
+```css
+:root {
+  --text-body-md: 0.9375rem;
+  --text-body-md--line-height: 1.4rem;
+}
+
+.dense-table {
+  --text-title-md--font-weight-em: 600;
+}
+```
+
+Weights are numeric and read on a variable font's `wght` axis (Inter Variable
+covers 100 to 900); the library sets no `font-variation-settings`, and
+`font-optical-sizing` stays at the browser's `auto`. The bare `h1` to `h6` are
+`headline-md`, `headline-sm`, `title-lg`, `title-md`, `title-sm` and
+`label-md` at weight 500, so a retuned step retunes them too. The
+[Typography component](../components/primitives.md#typography) has the table of
+values and the deprecated names.
+
 ## Overriding tokens
 
 Redefine the variables **after** the import, for light and dark separately:

package/docs/roadmap.md

@@ -123,6 +123,18 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
+- **`ButtonGroup` standard look by default, and the old `Typography` names
+  removed (4.0)** — `ButtonGroup`'s Material 3 Expressive look (`look="standard"`)
+  becomes the default, with `look="legacy"` to keep the original group. The
+  fifteen deprecated `Typography` variants (`huge-*`, `headline-larger`,
+  `headline-large`... `caption`) are removed in favour of the type scale's
+  names, once the other component families read the scale
+  ([Typography](components/primitives.md#typography)).
+
+- **IconButton: `round` or `square` like Button** — a `shape` of `round` or
+  `square` on `IconButton`, with the same press morph, beside the expressive
+  shape names it takes today.
+
 - **DataGrid: row selection on phones** — the phone list gets the selection
   control the grid has with `enableRowSelection`: a checkbox per item and a
   select-all, with the same `rowSelection` state.
@@ -220,10 +232,11 @@ version they shipped in, and planned entries may name the major they target.
 - **`CircularProgress` at Material 3's size** — the default `size` becomes
   Material 3's 40 px (48 px when `wavy`) instead of 100 px. Pass `size` today
   to keep a size across the change.
-- **`Button` on the expressive size scale** — `xs` becomes 28 px (was
-  24) and `lg` 44 px (was 40), the scale `SplitButton` and `ToggleGroup`
-  already follow, so a `Button` and a `SplitButton` of the same size line
-  up.
+- **`Button` `xs` and `lg` on the `SplitButton` scale** — 3.11 keeps `Button`
+  at 24, 32, 36 and 40 px (and adds `xl` 56 and `2xl` 96); `xs` becoming 28 px
+  and `lg` 44 px, the scale `SplitButton` and `ToggleGroup` follow, so a
+  `Button` and a `SplitButton` of the same size line up, stays a possible
+  change for a major.
 - **A CSP without `style-src-attr 'unsafe-inline'`** — the four form controls'
   hidden inputs and the `Checkbox` indicator no longer need it;
   `SelectValue`, the `RadioGroup` root, `Slider` and popper positioning still
@@ -295,6 +308,42 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Display polish** — `Badge` is a status badge: a 20 px pill with the
+  `label-sm` text and no hover, a `soft` variant (the tone's container under
+  the tone's text, 4.5:1) and a `tone` prop for `soft` and `outlined`, taking
+  your own tones too; `CountBadge` keeps its own size. `ListTile` with an
+  `href` ends with a discreet chevron (`chevron={false}` opts out). `StatCard`
+  gets a compact `size="sm"` tile and `EntityHeader` a `stats` prop that shows
+  figures as these tiles. `Banner` takes `Alert`'s look. A footer `MenuItem`
+  can be `display: 'icon'`, a round icon-only button with a tooltip, 44 px on
+  a touch screen; the rail's active label is drawn in a darker primary so it
+  reads 4.5:1 on every theme preset. `breadcrumb={false}` hides the trail, and
+  so does a trail whose crumbs all render `null` (#1475). `Combobox` rows are
+  touch-sized on a touch screen (#1474). The backdrop's shapes are hidden while
+  they lie over the page's text or controls, never moved (#1478). Nothing
+  changes in core. React only; the
+  Vue port is a `vue` issue. Ships in 3.12.0.
+  ([Data display](components/data-display.md),
+  [App shell](guides/app-shell.md))
+
+- **Buttons and the type scale in Material 3 Expressive** — `Typography` takes
+  the Material 3 scale (`display`, `headline`, `title`, `body`, `label`, each
+  `lg`, `md` and `sm`, plus `emphasized`) as Tailwind tokens: `text-title-md`
+  and `text-title-md-em` are utilities, and an app or a zone retunes a step
+  with CSS variables. The former variants are deprecated aliases (their sizes
+  changed) and the bare `h1` to `h6` read the scale. `Button` gains the `xl`
+  (56 px) and `2xl` (96 px) sizes, `shape` `round` or `square` with a spring
+  press morph, and `selected` (a toggle with an inverted shape and a solid
+  fill); every button has a 2 px focus outline, a neutral disabled look and a
+  44 px hit area on a coarse pointer. `IconButton` gets `size` `xs` to `xl`
+  and `width` `narrow`, `default` or `wide`, on Button's look and the shared
+  toggle fill. `ButtonGroup` gets `look="standard"` (the pressed button widens,
+  its neighbours give the width back) and a `size` its buttons share. Nothing
+  changes in core. React only; the Vue port is a `vue` issue. 3.11.0.
+  ([Buttons & actions](components/buttons-and-actions.md),
+  [Typography](components/primitives.md#typography),
+  [Type scale](guides/theming.md#type-scale))
+
 - **Icon backgrounds, celestial presets and illustrations** — `Background
   preset="icons"` draws a pattern of icons from the packs, `iconStyle` taking
   one style or a list and `iconMotif` choosing the layout.

package/docs/troubleshooting.md

@@ -86,6 +86,10 @@ words in your error.
 - [A test of the editor's More panel finds nothing (`[data-editor-more]`)](#a-test-of-the-editors-more-panel-finds-nothing-data-editor-more)
 - [An editor, a composer or `PdfReader` looks different after upgrading, and fewer tools fit before More](#an-editor-a-composer-or-pdfreader-looks-different-after-upgrading-and-fewer-tools-fit-before-more)
 - [An `IconButton` with `aria-pressed` now widens and fills when pressed](#an-iconbutton-with-aria-pressed-now-widens-and-fills-when-pressed)
+- [Text got bigger or smaller after upgrading to 3.11 (`Typography` `huge-*`, `headline-*`, `title-*`, `caption`)](#text-got-bigger-or-smaller-after-upgrading-to-311-typography-huge--headline--title--caption)
+- [`Type '"icon"' is not assignable to type '"xs" | "sm" | "default" | "lg" | "xl"'` when spreading Button props into an `IconButton`](#type-icon-is-not-assignable-to-type-xs--sm--default--lg--xl-when-spreading-button-props-into-an-iconbutton)
+- [A pill `IconButton` toggle is the wrong width with a `size-*` class](#a-pill-iconbutton-toggle-is-the-wrong-width-with-a-size--class)
+- [A `Button` with a height class of your own has the wrong corner radius](#a-button-with-a-height-class-of-your-own-has-the-wrong-corner-radius)
 
 **Feedback**
 
@@ -105,6 +109,7 @@ words in your error.
 
 **Navigation**
 
+- [A `ListTile` link shows two chevrons](#a-listtile-link-shows-two-chevrons)
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
 - [After a link in the phone menu, the focus goes to `<main>`, not to the page's title](#after-a-link-in-the-phone-menu-the-focus-goes-to-main-not-to-the-pages-title)
 - [The phone menu needs two Escapes to close, or a tooltip shows over it](#the-phone-menu-needs-two-escapes-to-close-or-a-tooltip-shows-over-it)
@@ -975,8 +980,9 @@ your token against the page at 4.5:1:
 <Button variant="tonal" color="error">Delete</Button>
 ```
 
-A `Badge` link of your own with a hover fade such as `[a&]:hover:bg-error/90`
-in its `className` puts the fade back: darken instead, as in
+A `Badge` no longer changes on hover; a hover fade of your own such as
+`[a&]:hover:bg-error/90` in its `className` puts the fade back: darken
+instead, as in
 `[a&]:hover:bg-[color-mix(in_oklab,var(--color-error)_90%,black)]` (with
 your badge's colour in place of `error`). A
 subtitle colour of your own on a selected `ListTile` must reach 4.5:1 on
@@ -1242,7 +1248,7 @@ inside the child element is clipped without one.
 **Fix:** update. Then pick, for each long label: leave the ellipsis (give a
 `title` so a sighted user can read it whole; the accessible name already
 is), let it break onto lines with `wrap`, or give the button a width of
-your own through `className`. With `asChild`, put the label in a `<span>`:
+your own through `className`. With `asChild`, put the label in a `<span>` (on a touch screen in Safari an `asChild` host is not clipped, to keep its 44 px hit area, so only a span gets the ellipsis):
 
 ```tsx
 <Button title="Continue to the payment details">Continue to the payment details</Button>
@@ -1631,7 +1637,7 @@ screen.getByRole('button', { name: 'Bold', pressed: true });
 ### An `IconButton` with `aria-pressed` now widens and fills when pressed
 
 **When:** after upgrading, an icon toggle (an `IconButton` with `aria-pressed`) grows into a filled pill when pressed and pushes its neighbours by 14 px.
-**Fix:** `morph="round"` keeps a filled circle that does not widen. A test that read the quiet pressed item's `::after` bar should read its background instead, or query the state: `getByRole('button', { name: 'Favourite', pressed: true })`.
+**Fix:** `morph="round"` keeps a filled circle that does not widen (a pill toggle's width follows its `size`: see [the wrong width with a `size-*` class](#a-pill-iconbutton-toggle-is-the-wrong-width-with-a-size--class)). A test that read the quiet pressed item's `::after` bar should read its background instead, or query the state: `getByRole('button', { name: 'Favourite', pressed: true })`.
 
 ```tsx
 <IconButton morph="round" aria-label="Favourite" aria-pressed={on} onClick={toggle}>
@@ -1658,6 +1664,58 @@ A dialog opened from a bar button that is showing returns the focus to that butt
 
 A tool that toggles is a `menuitemcheckbox`, a plain action or a dialog a `menuitem` (a dialog's has `aria-haspopup="dialog"`), the text colour, the highlight and the emoji a `menuitem` that opens their popover at More (a `dialog` named as the tool). The block type, the font, the callout types and the image's upload are submenus; the block type and the font list `menuitemradio` rows, and the submenu's row shows the current one after its name. A folded group of two or more rows is a `group` named by its label; a group of one row lists that row alone, with no group around it; a single-choice group stays a named radio group, even with one row. The alignments are a radio group named "Alignment" of `menuitemradio` rows, the current one checked (`getByRole('menuitemradio', { name: 'Align left' })`), while the bar keeps them as `aria-pressed` buttons. The text and highlight colour pickers are now a `dialog` (the library `Popover`, named as the tool), not a `menu`, in the bar too; a test of `[data-group-id="…"]` waits for its `hidden` attribute, not for it to leave. In the rail the groups are `data-slot="toolbar-group"` (they were `editor-toolbar-group`, which only `layout="wrap"` keeps) and the separators `data-slot="toolbar-separator"`: select a group by `data-group` or `data-group-id`.
 
+### Text got bigger or smaller after upgrading to 3.11 (`Typography` `huge-*`, `headline-*`, `title-*`, `caption`)
+
+**When:** after the upgrade, a heading, a stat or a caption set with a `Typography` `variant` such as `title-medium` (18 to 16 px), `title-large` (20 to 22 px), `headline-large` (36 to 32 px), `huge-large` (96 to 57 px) or `caption` (10 to 11 px) has another size, line height and weight, and so do the bare `h1` to `h6` (`h1` 24 to 28 px, `h2` 20 to 24, `h3` 18 to 22).
+**Why:** `Typography` moved to the Material 3 type scale. The fifteen former variants are kept, deprecated, as aliases of the scale by name, so the sizes follow the scale; the headings read it too.
+**Fix:** pick the step you want by its scale name, which also silences the deprecation. The table of former names and sizes is in [Typography](components/primitives.md#typography); to keep an old size in one place, retune the step with CSS variables:
+
+```tsx
+// before
+<Typography variant="title-medium">Next delivery</Typography>
+// after: the same step, written in the scale
+<Typography variant="title-md" emphasized>Next delivery</Typography>
+```
+
+```css
+/* or keep 18 px for one zone */
+.invoice { --text-title-md: 1.125rem; --text-title-md--line-height: 1.75rem; }
+```
+
+### `Type '"icon"' is not assignable to type '"xs" | "sm" | "default" | "lg" | "xl"'` when spreading Button props into an `IconButton`
+
+**When:** a wrapper spreads a `Button`'s props (`ComponentProps<typeof Button>`, `ButtonProps`) into an `IconButton` or `IconLinkButton`, and the compiler rejects `size` after the upgrade, or `shape`.
+**Why:** `IconButton` has its own typed `size` (`xs` to `xl`), which the `Button`'s `icon`, `icon-xs`, `icon-sm`, `icon-lg` and `2xl` are not; and `Button`'s `shape` is `round` or `square` where `IconButton`'s is an expressive shape name.
+**Fix:** drop `size` and `shape` before spreading, or pass the ones `IconButton` takes:
+
+```tsx
+const { size, shape, ...rest } = props;
+return <IconButton size="lg" {...rest} />;
+```
+
+### A pill `IconButton` toggle is the wrong width with a `size-*` class
+
+**When:** an `IconButton` toggle (`aria-pressed`, `morph="pill"`) given a `size-*` class of your own (`size-12`) is as wide as its `size` says, not as your class does, when pressed.
+**Why:** the pill's pressed width follows the button's `size` (24 to 56 px, 36 px unset), so it is the same at every size without the old `::before`.
+**Fix:** give the button a `size` instead of a `size-*` class; use `width="wide"` for a longer resting button.
+
+```tsx
+<IconButton size="xl" aria-pressed={on} aria-label="Favourite">
+	<Star />
+</IconButton>
+```
+
+### A `Button` with a height class of your own has the wrong corner radius
+
+**When:** a `Button` given a height of its own (`className="h-11"`) is a pill whose corners are those of its `size`: a 44 px button with the 18 px radius of a 36 px one, or a squarer pill than expected, and the corners spring toward the wrong size when pressed.
+**Why:** a round button's radius is half of `--btn-h`, which its `size` sets (36 px without one); a height class changes the box and not that variable.
+**Fix:** set `--btn-h` with your height class, or use `size`:
+
+```tsx
+<Button className="[--btn-h:44px] h-(--btn-h)">Save</Button>
+<Button size="xl">Save</Button>
+```
+
 ## Feedback
 
 ### An `EmptyState` with no `kind` shows "No Data Found" where it showed "Something Went Wrong"
@@ -1918,6 +1976,19 @@ tree.
 
 ## Navigation
 
+### A `ListTile` link shows two chevrons
+
+**When:** a `ListTile` with an `href` and a `trailing={<ChevronRight />}` of
+your own draws a second chevron since the tile adds one.
+**Why:** a link tile ends with a decorative chevron by default.
+**Fix:** drop your own, or keep it and pass `chevron={false}`:
+
+```tsx
+<ListTile title="Notifications" href="/settings/notifications" />
+// or, with your own icon
+<ListTile title="Notifications" href="/settings/notifications" chevron={false} trailing={<MyArrow />} />
+```
+
 ### A `ListTile` link reloads the whole page
 
 **When:** a `ListTile` with an `href` is clicked inside a router app: the

package/lib/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/lib/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/lib/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);
+}