@nxgt/material 3.10.2 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @nxgt/material
 
+## 3.11.0
+
+### Minor Changes
+
+- [#1436](https://github.com/softistx/nxgt-material/pull/1436) [`cdd7025`](https://github.com/softistx/nxgt-material/commit/cdd7025df8e581b3b04168c10c8f4afd3a5ec9a7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Button goes Material 3 Expressive. New options, no breaking type change: `size` adds `xl` (56 px) and `2xl` (96 px) to `xs`, `sm`, `default` and `lg`; `shape` is `round` (default) or `square`, and the corners spring when the button is pressed (a round one squares, a square one rounds, and the button scales to .97, .985 at `2xl`; reduced motion keeps the colour change only); `selected` makes it a toggle (`aria-pressed` and `data-selected`), takes the other shape and a solid fill of its colour (ignored with `asChild`, with a warning in development). A round button's radius is half its height, never 999px, and every corner stays at 4 px or more at the spring's overshoot. On a coarse pointer every size has a 44 px hit area. `buttonVariants` carries the same look, so Pagination, AlertDialog and the calendar's date picker follow.
+  
+  **Visual changes** (every `Button`, and what uses `buttonVariants`):
+  
+  - Padding grows: `default` 16 → 18 px, `xs` 8 → 12 px, `sm` 12 → 16 px, with an icon too. A button without a `size` keeps its content height and its 16 px padding.
+  - Labels use the type scale and are heavier: weights 560 (`xs`) to 700 (`2xl`), `lg` 14 → 16 px (`title-md`), `xl` 24 px, `2xl` 32 px. The icon follows the size (`xs` 14 px, `default` 18 px, `2xl` 44 px).
+  - The `filled` and `tonal` variants lose their `shadow-xs`.
+  - The focus is a 2 px outline in the colour, 2 px off the button, instead of a 3 px ring; `aria-invalid` focuses in the error colour.
+  - A disabled button has neutral text (40 % of the text colour), whatever the variant and colour, and a neutral fill (12 %) except `ghost` and `link`, which stay transparent, instead of 50 % opacity.
+  - The `outlined` line is 1.5 px, drawn inside the box at 55 % of the colour, instead of a 1 px border at 50 %.
+  - A `ghost` button is neutral without a `color` (and with `color="default"`); one given a `color`, `primary` included, is tinted by it (its text and hover), where `primary` was neutral.
+  - A pressed button squeezes (radius and scale).
+  - The label is what is cut with an ellipsis, not the button: the host no longer truncates (an `asChild` host still does), the children of a button are no longer all `truncate`, and a `buttonVariants` element (Pagination's links, AlertDialog's actions) no longer cuts bare text with an ellipsis.
+  - Toolbar items keep the Toolbar's own look. `IconButton` and `ButtonGroup` take the same look in this release (their own changesets).
+  - A `Banner`'s text actions (`ghost` and `link`) are pulled back by the button's own padding (`--btn-px`, less `--btn-pxi` with a leading icon) instead of a list of fixed margins per size, so they stay aligned at every size.
+  - A `Button` with a height class of your own (`h-11`) keeps the pill radius of its `size` (half of `--btn-h`, 36 px without one): set `--btn-h` with your height (`[--btn-h:44px] h-(--btn-h)`), or use `size`. The date and time pickers' OK and Cancel do this on a coarse pointer, so their pill follows their 44 px.
+  - An `asChild` button (a link) cuts its text with `overflow: clip` and a 22 px clip margin instead of `truncate`, so its 44 px hit area on a coarse pointer is not clipped.
+  - A `ghost` button given `selected` without a `color` is a neutral tint, as `IconButton`'s ghost toggle is (12 % of the text colour, label and icon in the full text colour); it is tinted by its `color` when one is set (an explicit `color="default"` selects as a solid fill of the text colour).
+  - A selected button is the system's selected item in forced colours (`SelectedItem` and `SelectedItemText`, the icon's line too).
+
+- [#1447](https://github.com/softistx/nxgt-material/pull/1447) [`452216b`](https://github.com/softistx/nxgt-material/commit/452216bec6789708831d4b490c27a3962e06e6a9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ButtonGroup` gets the Material 3 Expressive "standard" look and a shared size. `look="standard"` is an opt-in in this release (it becomes the default in the next major, with `look="legacy"` to keep the original): the buttons keep their own look, 8px apart, and a pressed one widens by 14px on each side while its neighbours give the same width back (half each, or all of it when it sits at an end), so the group never changes width; the buttons spring on `spatial-fast`, and reduced motion turns the exchange off. At `xs`, `sm` and `default` the exchange is 7, 10 and 11px per side, the most a button of that size can give back at the end of the group without its padding going below 0 in the spring's overshoot (10px without a `size`). An icon-only button keeps its icon and 2px each side, so next to a pressed button at the end of the group it may give back less than asked and the group widens by the difference. `size` (`xs`, `sm`, `default`, `lg` or `xl`) is shared by every `Button` and `IconButton` in the group through a context; a child with a `size` of its own keeps it. `data-slot="button-group"`, `data-look` and `data-size` are on the host. On a coarse pointer the gap grows to `max(8px, 44px - the size's height)` (20px at `xs`, 12px at `sm`, 8px from `default`), so every button, across and between wrapped rows, keeps a 44px hit area that touches no neighbour's.
+  
+  A `ButtonGroup` without `look` is unchanged: the original rules (tinted, rounded children, `w-full`, 8px of padding) now apply to `.nxgt-button-group:not(:where([data-look]))`, at the same specificity as before; `size` works on it too.
+  
+  `Button`'s `outlined` variant keeps its line in forced colours (a `ButtonText` outline, where the inset shadow is removed), as `IconButton`'s does.
+
+- [#1444](https://github.com/softistx/nxgt-material/pull/1444) [`9215bc1`](https://github.com/softistx/nxgt-material/commit/9215bc181f93f24cc4151b5ab168ecb40b4e790d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - IconButton goes Material 3 Expressive, on the look `Button` already has. New options and one narrow type break (see the Type note): `size` is `xs`, `sm`, `default`, `lg` or `xl` (24, 32, 36, 40 and 56 px, with icons of 14, 16, 18, 20 and 28 px), and `width` is `narrow`, `default` or `wide` (0.78, 1 and 1.45 times the height); `width` is ignored when `shape` draws the button as an expressive shape (a warning in development). A button without a `size` is exactly what it was: 36 px, a circle, a 16 px icon (an explicit `size="default"` has an 18 px icon; the ladder's icon size applies to a glyph without its own `size-*` class, and the `Icon` component is 16 px unless sized). `iconButtonVariants` takes `size` and `width` too (`ScrollToTop`'s props follow). The `morph` options (`pill`, `round`, `none`) keep their meaning; a toggle now sets `data-selected` and its fill is the one `Button` shares (`morph-fill.css`), the pill being the button's own width rather than a `::before`.
+  
+  **Visual changes** (every `IconButton`, and what uses `iconButtonVariants`: the close buttons of Dialog, Drawer and Sheet):
+  
+  - The `filled` and `tonal` variants lose their `shadow-xs`, and the `outlined` line is Button's: 1.5 px inside the box at 55 % of the colour, instead of a 1 px border at 50 %; it gives way to the fill when selected and disappears when disabled.
+  - A `ghost` toggle without a `color` is neutral when selected too (a 12 % tint of the text colour, the icon in full text colour); it is primary only when a `color` is set. Its focus outline is the text's colour.
+  - The focus is a 2 px outline in the colour, 2 px off the button, instead of a 3 px ring; `aria-invalid` focuses in the error colour.
+  - A disabled button has neutral text and icon (40 % of the text colour) and a neutral fill (12 %), except `ghost` and `link`, which stay transparent, instead of 50 % opacity; a disabled `outlined` button loses its line.
+  - An `aria-invalid` button no longer draws an error border and ring: only its focus outline (and an `outlined` line) turns to the error colour.
+  - A pill toggle's selected width follows its `size`; use `size` rather than a `size-*` class on a pill toggle.
+  - A pressed button squeezes (the corners go toward a square, and it scales to .97); reduced motion keeps the colour change only.
+  - On a coarse pointer every size has a 44 px hit area, a shaped button too.
+  - Toolbar items and shaped buttons keep their own looks.
+  - An `IconButton` without a `variant` is the `filled` one in `data-variant` too, so a disabled one no longer has an invisible icon; in an editor toolbar, a variant-less IconButton now matches `[data-variant=filled]` selectors (every shipped ToolbarIconButton passes a variant).
+  - `Sheet`'s close button merges the variant's classes with its own position and touch box through `cn`, so the size classes of the ladder do not fight the touch box's; Dialog, Sheet, Drawer, Popover and AlertDialog give their content no `ButtonGroup` size, where an overlay opened from a sized group used to pass it on.
+  
+  **Type note**: `IconButton` and `IconLinkButton` now have a typed `size`, so spreading a `Button`'s props into them no longer compiles when `size` is `icon`, `icon-xs`, `icon-sm`, `icon-lg` or `2xl`: drop `size` before spreading (`const { size, ...rest } = props`). `Button`'s `shape` (`round` or `square`) is likewise not `IconButton`'s `shape` (an expressive shape name).
+
+- [#1433](https://github.com/softistx/nxgt-material/pull/1433) [`f66606d`](https://github.com/softistx/nxgt-material/commit/f66606d86c847aefbfcef94f2c8d525ff052b510) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Typography takes the Material 3 type scale. `variant` accepts `display`, `headline`, `title`, `body` and `label`, each in `lg`, `md` and `sm` (`title-md`, `body-sm`…), `body-md` by default, and the new `emphasized` prop gives the same step a heavier weight. The scale is a set of Tailwind 4 tokens in `styles.css`, `--text-<role>-<size>` with its `--line-height`, `--letter-spacing` and `--font-weight` (and `--font-weight-em` for the emphasized weight), so `text-title-md` and `text-title-md-em` are native utilities that set size, line height, tracking and weight together. An app or a zone retunes any of them with a CSS variable on `:root` or the zone; a variable font such as Inter reads the numeric weights on its `wght` axis. There is no `defineTheme` key.
+  
+  The fifteen former variants stay, deprecated, as aliases of the scale by name, the old semibold ones on the emphasized step, so no type breaks but **their sizes change**:
+  
+  | Former variant | Now | Size before → after |
+  | --- | --- | --- |
+  | `normal`, `body-medium` | `body-md` | 14 → 14 px (weight 400, which `Typography` now sets itself instead of inheriting its parent's) |
+  | `body-small` | `body-sm` | 12 → 12 px |
+  | `caption` | `label-sm`, muted | 10 → 11 px |
+  | `title-small` | `title-sm` emphasized | 16 → 14 px |
+  | `title-medium` | `title-md` emphasized | 18 → 16 px |
+  | `title-large` | `title-lg` emphasized | 20 → 22 px |
+  | `headline-small` | `headline-sm` emphasized | 24 → 24 px |
+  | `headline-medium` | `headline-md` emphasized | 30 → 28 px |
+  | `headline-large` | `headline-lg` emphasized | 36 → 32 px |
+  | `headline-larger` | `display-sm` emphasized | 48 → 36 px |
+  | `huge-small` | `display-sm` emphasized | 60 → 36 px |
+  | `huge-medium` | `display-md` emphasized | 72 → 45 px |
+  | `huge-large`, `huge-larger` | `display-lg` emphasized | 96 → 57 px |
+  
+  The weights follow the scale too (emphasized 540 to 700 instead of 600), as do the line heights and the tracking. The bare `h1` to `h6` elements (`base.css`) read the scale too, with weight 500: `h1` is `headline-md` (24 → 28 px), `h2` `headline-sm` (20 → 24 px), `h3` `title-lg` (18 → 22 px), `h4` `title-md` (16 px), `h5` `title-sm` (14 px) and `h6` `label-md` (12 px), each with the step's line height and tracking, so retuning a step retunes the headings.
+
 ## 3.10.2
 
 ### Patch Changes

package/README.md

@@ -476,7 +476,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-accordion.webp" width="120" alt="Accordion"> | [`Accordion`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#accordion), `AccordionItem`, `AccordionTrigger`, `AccordionContent` | Collapsible sections whose content springs open, in three looks (`flush`, `separated` cards, `contained` list) and three sizes. | `Accordion` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-collapsible.webp" width="120" alt="Collapsible"> | [`Collapsible`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#collapsible), `CollapsibleTrigger`, `CollapsibleContent` | A single show / hide region that springs open, and its trigger (optionally styled: `tonal` or `text`). | `Collapsible` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-card.webp" width="120" alt="Card"> | [`Card`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#card), `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | Card surface with header, action slot, content and footer. | `Card` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-typography.webp" width="120" alt="Typography"> | [`Typography`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#typography) | Text in the Material type scale (headline, title, body, caption…). | `Typography` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-typography.webp" width="120" alt="Typography"> | [`Typography`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#typography) | Text in the Material 3 type scale: display, headline, title, body and label in three sizes, `emphasized` for the heavier weight; the former names are deprecated aliases. | `Typography` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-anchorheading.webp" width="120" alt="AnchorHeading"> | [`AnchorHeading`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#anchorheading) | Heading with a hover copy-link (always visible on the phone). | `AnchorHeading` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-label.webp" width="120" alt="Label"> | [`Label`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#label) | Form label with an optional required asterisk. | `Label` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-helpertext.webp" width="120" alt="HelperText"> | [`HelperText`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#helpertext) | Hint or error message under a field. | `HelperText` |
@@ -499,9 +499,9 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-button.webp" width="120" alt="Button"> | [`Button`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#button) | Filled, tonal, outlined, ghost or link button in seven colours, four sizes and four square icon sizes, with a loading state. | `Button` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-iconbutton.webp" width="120" alt="IconButton"> | [`IconButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#iconbutton) | Icon-only button with an optional tooltip; `shape` draws it as an expressive shape and morphs when it changes. | `IconButton` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-buttongroup.webp" width="120" alt="ButtonGroup"> | [`ButtonGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#buttongroup) | Joins adjacent buttons into one control. | `ButtonGroup` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-button.webp" width="120" alt="Button"> | [`Button`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#button) | Filled, tonal, outlined, ghost or link button in seven colours, six sizes (24 to 96 px), round or square (`shape`), a `selected` toggle and a loading state. | `Button` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-iconbutton.webp" width="120" alt="IconButton"> | [`IconButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#iconbutton) | Icon-only button in five sizes and three widths, with an optional tooltip; a toggle fills and widens; `shape` draws it as an expressive shape and morphs when it changes. | `IconButton` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-buttongroup.webp" width="120" alt="ButtonGroup"> | [`ButtonGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#buttongroup) | Joins adjacent buttons into one control; `look="standard"` widens the pressed one and `size` is shared. | `ButtonGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-splitbutton.webp" width="120" alt="SplitButton"> | [`SplitButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#splitbutton) | Main action plus a menu of related ones: two halves, five sizes, an open state that morphs. | `SplitButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-fab.webp" width="120" alt="Fab"> | [`Fab`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#fab), `FabDock` | The screen's main floating action: four sizes, tonal or filled in three tones or an app tone, extended, folds on scroll (`useScrollAway`). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-fabmenu.webp" width="120" alt="FabMenu"> | [`FabMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#fabmenu) | A FAB that opens a few related actions as pills, with a scrim. | — |

package/dist/{async-slice-DDjaJY_F.js → async-slice-4qbER86I.js}

@@ -1,5 +1,5 @@
 import { i as e, r as t, t as n } from "./stored-language-BeIKw3-K.js";
-import { r } from "./translator-DCYO4Ij3.js";
+import { r } from "./translator-Dje8HrNz.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/button-BNjw-pnE.js

@@ -0,0 +1,327 @@
+import { t as e } from "./utils-BLfntITJ.js";
+import { n as t, t as n } from "./dist-DVRQkaTK.js";
+import { o as r, t as i } from "./tooltip-CkttDIab.js";
+import { t as a } from "./is-production-GLw59WU8.js";
+import { t as o } from "./spinner-BtSIYVrC.js";
+import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
+import { t as d } from "./button-group-context-CaP0X5p_.js";
+import { t as f } from "./has-text-content-Ds2dkHX_.js";
+import { Children as p, Fragment as m, cloneElement as h, isValidElement as g, useCallback as _, useContext as v, useEffect as y, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region lib/components/ui/actions/button/busy-click-capture.ts
+function w(e, t, n) {
+	return (r) => {
+		if (e || t.isLocked()) {
+			r.preventDefault(), r.stopPropagation();
+			return;
+		}
+		t.lock(), n?.(r);
+	};
+}
+//#endregion
+//#region lib/components/ui/actions/button/button.compound-variants.ts
+var T = [
+	{
+		variant: "filled",
+		color: "primary",
+		class: "bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] [&_svg]:data-[slot=icon]:text-primary-foreground active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]"
+	},
+	{
+		variant: "filled",
+		color: "secondary",
+		class: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--color-secondary)_90%,black)] [&_svg]:data-[slot=icon]:text-secondary-foreground active:bg-[color-mix(in_oklab,var(--color-secondary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-secondary)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-secondary)_50%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "success",
+		class: "bg-success text-success-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_90%,black)] [&_svg]:data-[slot=icon]:text-success-foreground active:bg-[color-mix(in_oklab,var(--color-success)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-success)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-success)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "info",
+		class: "bg-info text-info-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_90%,black)] [&_svg]:data-[slot=icon]:text-info-foreground active:bg-[color-mix(in_oklab,var(--color-info)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-info)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-info)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "warning",
+		class: "bg-warning text-warning-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_90%,black)] [&_svg]:data-[slot=icon]:text-warning-foreground active:bg-[color-mix(in_oklab,var(--color-warning)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "error",
+		class: "bg-error text-error-foreground hover:bg-[color-mix(in_oklab,var(--color-error)_90%,black)] [&_svg]:data-[slot=icon]:text-error-foreground active:bg-[color-mix(in_oklab,var(--color-error)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-error)_85%,black)]"
+	},
+	{
+		variant: "filled",
+		color: "default",
+		class: "bg-foreground text-background hover:bg-[color-mix(in_oklab,var(--color-foreground)_90%,var(--color-background))] [&_svg]:data-[slot=icon]:text-foreground active:bg-[color-mix(in_oklab,var(--color-foreground)_70%,var(--color-background))] focus:bg-[color-mix(in_oklab,var(--color-foreground)_80%,var(--color-background))]"
+	},
+	{
+		variant: "tonal",
+		color: "primary",
+		class: `${l.primary} ${u.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+	},
+	{
+		variant: "tonal",
+		color: "secondary",
+		class: `${l.secondary} ${u.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+	},
+	{
+		variant: "tonal",
+		color: "info",
+		class: `${l.info} ${u.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+	},
+	{
+		variant: "tonal",
+		color: "success",
+		class: `${l.success} ${u.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+	},
+	{
+		variant: "tonal",
+		color: "warning",
+		class: `${l.warning} ${u.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+	},
+	{
+		variant: "tonal",
+		color: "error",
+		class: `${l.error} ${u.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+	},
+	{
+		variant: "tonal",
+		color: "default",
+		class: `${l.default} ${u.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+	},
+	{
+		variant: "ghost",
+		color: "primary",
+		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+	},
+	{
+		variant: "ghost",
+		color: "default",
+		class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+	},
+	{
+		variant: "ghost",
+		color: "secondary",
+		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+	},
+	{
+		variant: "ghost",
+		color: "success",
+		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+	},
+	{
+		variant: "ghost",
+		color: "info",
+		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+	},
+	{
+		variant: "ghost",
+		color: "warning",
+		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+	},
+	{
+		variant: "ghost",
+		color: "error",
+		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+	},
+	{
+		variant: "outlined",
+		color: "primary",
+		class: `${l.primary} ${u.primary} focus:bg-primary/10 hover:bg-primary/10`
+	},
+	{
+		variant: "outlined",
+		color: "secondary",
+		class: `${l.secondary} ${u.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
+	},
+	{
+		variant: "outlined",
+		color: "info",
+		class: `${l.info} ${u.info} focus:bg-info/10 hover:bg-info/10`
+	},
+	{
+		variant: "outlined",
+		color: "success",
+		class: `${l.success} ${u.success} focus:bg-success/10 hover:bg-success/10`
+	},
+	{
+		variant: "outlined",
+		color: "warning",
+		class: `${l.warning} ${u.warning} focus:bg-warning/10 hover:bg-warning/10`
+	},
+	{
+		variant: "outlined",
+		color: "error",
+		class: `${l.error} ${u.error} focus:bg-error/10 hover:bg-error/10`
+	},
+	{
+		variant: "outlined",
+		color: "default",
+		class: `${l.default} ${u.default} focus:bg-foreground/10 hover:bg-foreground/10`
+	},
+	{
+		variant: "link",
+		color: "primary",
+		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+	},
+	{
+		variant: "link",
+		color: "secondary",
+		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+	},
+	{
+		variant: "link",
+		color: "success",
+		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+	},
+	{
+		variant: "link",
+		color: "info",
+		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+	},
+	{
+		variant: "link",
+		color: "warning",
+		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+	},
+	{
+		variant: "link",
+		color: "error",
+		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+	},
+	{
+		variant: "link",
+		color: "default",
+		class: `${l.default} ${u.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+	}
+], E = r("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
+	variants: {
+		variant: {
+			filled: "",
+			tonal: "",
+			ghost: "nxgt-btn-bare",
+			outlined: "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--btn-line,currentColor)_55%,transparent)]",
+			link: "nxgt-btn-bare focus:underline underline-offset-4 hover:underline"
+		},
+		color: c,
+		size: {
+			xs: "h-(--btn-h) [--btn-h:24px] [--btn-px:12px] [--btn-pxi:4px] [--btn-gap:4px] [--btn-ic:14px] [--btn-sq:6px] [--btn-fs:var(--text-label-md)] [--btn-lh:var(--text-label-md--line-height)] [--btn-ls:var(--text-label-md--letter-spacing)] [--btn-fw:560]",
+			sm: "h-(--btn-h) [--btn-h:32px] [--btn-px:16px] [--btn-pxi:4px] [--btn-gap:6px] [--btn-ic:16px] [--btn-sq:8px] [--btn-fs:var(--text-label-lg)] [--btn-lh:var(--text-label-lg--line-height)] [--btn-ls:var(--text-label-lg--letter-spacing)] [--btn-fw:580]",
+			default: "h-(--btn-h) [--btn-h:36px] [--btn-px:18px] [--btn-pxi:5px] [--btn-gap:8px] [--btn-ic:18px] [--btn-sq:10px] [--btn-fs:var(--text-label-lg)] [--btn-lh:var(--text-label-lg--line-height)] [--btn-ls:var(--text-label-lg--letter-spacing)] [--btn-fw:600]",
+			lg: "h-(--btn-h) [--btn-h:40px] [--btn-px:24px] [--btn-pxi:8px] [--btn-gap:8px] [--btn-ic:20px] [--btn-sq:12px] [--btn-fs:var(--text-title-md)] [--btn-lh:var(--text-title-md--line-height)] [--btn-ls:var(--text-title-md--letter-spacing)] [--btn-fw:620]",
+			xl: "h-(--btn-h) [--btn-h:56px] [--btn-px:40px] [--btn-pxi:14px] [--btn-gap:12px] [--btn-ic:28px] [--btn-sq:16px] [--btn-fs:var(--text-headline-sm)] [--btn-lh:var(--text-headline-sm--line-height)] [--btn-ls:var(--text-headline-sm--letter-spacing)] [--btn-fw:650]",
+			"2xl": "h-(--btn-h) [--btn-h:96px] [--btn-px:64px] [--btn-pxi:20px] [--btn-gap:16px] [--btn-ic:44px] [--btn-sq:28px] [--btn-scale:0.985] [--btn-fs:var(--text-headline-lg)] [--btn-lh:var(--text-headline-lg--line-height)] [--btn-ls:var(--text-headline-lg--letter-spacing)] [--btn-fw:700]",
+			icon: "size-9 px-0 py-0 has-[>svg]:px-0 [--btn-h:36px] [--btn-sq:10px]",
+			"icon-xs": "size-6 px-0 py-0 has-[>svg]:px-0 [--btn-h:24px] [--btn-sq:6px] [--btn-ic:12px]",
+			"icon-sm": "size-8 px-0 py-0 has-[>svg]:px-0 [--btn-h:32px] [--btn-sq:8px]",
+			"icon-lg": "size-10 px-0 py-0 has-[>svg]:px-0 [--btn-h:40px] [--btn-sq:12px]"
+		}
+	},
+	defaultVariants: {
+		variant: "filled",
+		color: "primary"
+	},
+	compoundVariants: T
+}), D = ((e) => E(e?.variant === "ghost" && e.color == null ? {
+	...e,
+	color: "default"
+} : e)), O = {
+	xs: "min-h-6",
+	sm: "min-h-8",
+	default: "min-h-9",
+	lg: "min-h-10",
+	xl: "min-h-14",
+	"2xl": "min-h-24"
+};
+function k(e, t) {
+	return !e || t?.startsWith("icon") ? !1 : `h-auto ${t ? O[t] : ""} whitespace-normal **:whitespace-normal text-center`;
+}
+//#endregion
+//#region lib/components/ui/actions/button/label-text.tsx
+function A(e) {
+	let t = [], n = 0, r = [], i = () => {
+		if (r.length === 0) return;
+		let e = r.join("");
+		r = [], e.trim() === "" ? t.push(e) : t.push(/* @__PURE__ */ S("span", {
+			"data-slot": "button-label",
+			children: e
+		}, `label-${n++}`));
+	};
+	for (let n of p.toArray(e)) {
+		if (typeof n == "string" || typeof n == "number" || typeof n == "bigint") {
+			r.push(n);
+			continue;
+		}
+		i(), t.push(j(n));
+	}
+	return i(), t;
+}
+function j(e) {
+	return g(e) && e.type === m ? h(e, void 0, A(e.props.children)) : e;
+}
+//#endregion
+//#region lib/components/ui/actions/button/use-click-lock.ts
+var M = 1e3;
+function N(e, t) {
+	let n = b(!1), r = b(!1), i = b(void 0), [a, o] = x(!1), s = _(() => {
+		n.current = !1, r.current = !1, clearTimeout(i.current), o(!1);
+	}, []), c = _(() => {
+		e && (n.current = !0, o(!0), clearTimeout(i.current), i.current = setTimeout(() => {
+			r.current || s();
+		}, M));
+	}, [e, s]);
+	return y(() => {
+		n.current && (t ? r.current = !0 : r.current && s());
+	}, [t, s]), y(() => () => clearTimeout(i.current), []), {
+		locked: a,
+		lock: c,
+		isLocked: _(() => n.current, [])
+	};
+}
+//#endregion
+//#region lib/components/ui/actions/button/button.tsx
+function P({ className: r, variant: i = "filled", asChild: c = !1, children: l, color: u, size: p, loading: m = !1, lockOnClick: h, spinnerVariant: g = "2", wrap: _, shape: b, selected: x, disabled: T, onClickCapture: E, type: O = "button", ...j }) {
+	let M = c ? n : "button", P = v(d), F = p ?? P, I = c && x !== void 0;
+	y(() => {
+		I && !a() && console.warn("Button: `selected` is ignored with `asChild`; set aria-pressed on the child element.");
+	}, [I]);
+	let L = !c && x !== void 0, R = v(s) || !!(j["aria-label"] || j["aria-labelledby"]) || f(l), z = N(h, m), B = m || z.locked, V = w(B, z, E);
+	return /* @__PURE__ */ S(s, {
+		value: R,
+		children: /* @__PURE__ */ C(M, {
+			"data-slot": "button",
+			"data-variant": i,
+			"data-color": u,
+			"data-size": F,
+			"data-shape": b,
+			"data-selected": L && x ? "true" : void 0,
+			className: e("w-fit max-w-full min-w-0 justify-center", c && "nxgt-btn-as-child overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:22px]", D({
+				variant: i,
+				color: u,
+				size: F
+			}), k(_, F), r),
+			type: c ? void 0 : O,
+			disabled: T,
+			...j,
+			"aria-disabled": B || j["aria-disabled"],
+			"aria-busy": B || j["aria-busy"],
+			"aria-pressed": L ? x : j["aria-pressed"],
+			onClickCapture: V,
+			children: [B && /* @__PURE__ */ S(o, {
+				variant: g,
+				color: i === "filled" ? "light" : u,
+				className: e("starting:scale-0 duration-500", g === "4" ? "size-7.5" : "size-4.5")
+			}), /* @__PURE__ */ S(t, { children: c ? l : A(l) })]
+		})
+	});
+}
+function F({ tooltip: e, ...t }) {
+	return e ? /* @__PURE__ */ S(i, {
+		content: e,
+		children: /* @__PURE__ */ S(P, { ...t })
+	}) : /* @__PURE__ */ S(P, { ...t });
+}
+//#endregion
+export { w as a, D as i, N as n, A as r, F as t };

package/dist/button-group-context-CaP0X5p_.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region lib/components/ui/actions/button-group/button-group-context.ts
+var t = e(void 0);
+//#endregion
+export { t };

package/dist/{button-tones-BgZJ1tkD.js → button-tones-BwuVvAmd.js}

@@ -24,6 +24,14 @@ var t = e(!1), n = {
 	warning: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
 	error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:stroke-foreground"
+}, a = {
+	primary: "[--morph-on:var(--color-primary)] [--morph-on-fg:var(--color-primary-foreground)] [--btn-focus:var(--color-primary-text)] [--btn-line:var(--color-primary)]",
+	secondary: "[--morph-on:var(--color-secondary)] dark:[--morph-on:color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] [--morph-on-fg:var(--color-secondary-foreground)] [--btn-focus:var(--color-secondary)] [--btn-line:var(--color-secondary)]",
+	success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_85%,white)] [--btn-line:var(--color-success)]",
+	info: "[--morph-on:var(--color-info)] dark:[--morph-on:color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] [--morph-on-fg:var(--color-info-foreground)] [--btn-focus:var(--color-info)] [--btn-line:var(--color-info)]",
+	warning: "[--morph-on:var(--color-warning)] dark:[--morph-on:color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] [--morph-on-fg:var(--color-warning-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,white)] [--btn-line:var(--color-warning)]",
+	error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]",
+	default: "[--morph-on:var(--color-foreground)] [--morph-on-fg:var(--color-background)] [--btn-focus:var(--color-foreground)] [--btn-line:var(--color-foreground)]"
 };
 //#endregion
-export { t as i, i as n, n as r, r as t };
+export { t as a, a as i, i as n, n as r, r as t };

package/dist/{callout-view-DdJPdFrP.js → callout-view-C6voDS00.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
-import { t } from "./utils-Bcd2Z3ea.js";
+import { t } from "./utils-BLfntITJ.js";
 import { V as n } from "./youtube-node-OWSNlYCc.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/editor/viewer/callout-view.tsx

package/dist/charts.js

@@ -1,13 +1,13 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
-import { t } from "./utils-Bcd2Z3ea.js";
-import { t as n } from "./use-material-translation-DkxcLbLM.js";
-import { t as r } from "./button-DbfdITBB.js";
+import { t } from "./utils-BLfntITJ.js";
+import { t as n } from "./use-material-translation-B3V_bz-5.js";
+import { t as r } from "./button-BNjw-pnE.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { t as u } from "./warn-once-C_e47JM8.js";
-import { t as d } from "./chip-DpySRqCy.js";
-import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-BQeLQZ-P.js";
+import { t as d } from "./chip-DLgQTJBZ.js";
+import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";
 import { t as S } from "./band-ZcHOFBlS.js";

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