@nxgt/material 3.10.2 → 3.12.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @nxgt/material
 
+## 3.12.0
+
+### Minor Changes
+
+- [#1472](https://github.com/softistx/nxgt-material/pull/1472) [`d01b87a`](https://github.com/softistx/nxgt-material/commit/d01b87a5be1e5b82cc46749fb67fe9193aac338f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StatCard` gets a compact `size="sm"`, `EntityHeader` a `stats` prop, and `Banner` takes `Alert`'s look.
+  
+  - `StatCard size="sm"` is a tile 40 to 56 px tall for a header band: the optional icon, then the value (tabular figures) over its label. It keeps `tone` and `variant`; `hint`, `delta` and `valueSize` are ignored. Tiles in a `flex flex-wrap` row wrap on a phone. New type `StatCardSize`.
+  - `EntityHeader` takes `stats` (`{ label, value, tone? }[]`), rendered as these tiles under `metadata`, so figures show as tiles while facts stay in `metadata`. New type `EntityStat`.
+  - `Banner` keeps its role and API (page level, `action`, `onDismiss`, default icon per tone) but now looks exactly like `Alert`: the light tone surface, the start accent bar, the tone-coloured icon, the title and description typography and the padding. It shares `Alert`'s variants, so the two cannot drift. Visual change: the solid tinted fill, the full tone border and the rounded corners are gone. `Alert` itself is unchanged, apart from its icon wrapper carrying `data-slot="alert-icon"` and its icon colour, size and margin rules now applying to the SVG inside that wrapper only, not to any SVG in its text.
+
+- [#1467](https://github.com/softistx/nxgt-material/pull/1467) [`338a8fe`](https://github.com/softistx/nxgt-material/commit/338a8fe79cb47dccaa52632da1eaa5d49bc1ef38) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Badge` becomes a status badge: a 20 px pill with the `label-sm` text, compact padding and no hover or pointer affordance (a `Badge` link no longer fades on hover). New `soft` variant, a tonal fill from the tone tokens and the recommended variant for a state, and a `tone` prop for `soft` and `outlined` (neutral by default; `BadgeTone` is the library's `Tone`, so a tone declared in `AppTones` works too); `outlined` is now a thin 1 px line at 40 % of the tone. Visual change: every Badge is 20 px high and a little smaller in text, `CountBadge` keeps its own h-4 / 10 px size and loses the hover. `ListTile` with an `href` now ends with a discreet, decorative chevron after `trailing` (flipped in right-to-left); `chevron={false}` opts out, `chevron` opts a button tile in. A tile that already passes its own `ChevronRight` as `trailing` shows two: drop yours or pass `chevron={false}`.
+
+- [#1477](https://github.com/softistx/nxgt-material/pull/1477) [`90290fd`](https://github.com/softistx/nxgt-material/commit/90290fdedb66bd7a88932e910ad810e90e83826c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` takes `breadcrumb` (default `true`): `breadcrumb={false}` hides the trail, for an error page whose matched routes would show a misleading one ([#1475](https://github.com/softistx/nxgt-material/issues/1475)). The trail is also hidden when every matched `handle.breadcrumb` renders `null`, and a crumb that renders `null` is left out with its separator. The Autocomplete and Combobox options no longer shrink below their content on a coarse pointer when the list scrolls: `ComboboxList` uses `auto-rows-max` ([#1474](https://github.com/softistx/nxgt-material/issues/1474)).
+
+- [#1465](https://github.com/softistx/nxgt-material/pull/1465) [`af31879`](https://github.com/softistx/nxgt-material/commit/af31879654725cdf62ea753b994b6e2d2aee3386) Thanks [@SteveGT96](https://github.com/SteveGT96)! - ActivityLayout and `AppSidebar`: a `MenuItem` takes `display?: 'icon'`. On a `footer` entry (a "Settings") it is drawn as a round, icon-only `IconButton` in the collapsed rail, the expanded sidebar and the phone's menu sheet: the label is its tooltip and its accessible name, it is `aria-current="page"` and tonal when active, and its target is 44 px on a coarse pointer. Entries without it keep their icon and label.
+  
+  **Visual change** (every `SidebarMenuItem`, `AppSidebar` and `ActivityLayout`): the active entry's label and icon are drawn in primary at 85 % of its lightness in light (`--sidebar-active-foreground`), so the label reads 4.5:1 or more on its pill for every theme preset (it was `--primary` itself, 3.7:1 on the corail preset's pill). The dark foreground and the pills are unchanged. A theme that sets `--sidebar-active-foreground` is unaffected.
+
+### Patch Changes
+
+- [#1479](https://github.com/softistx/nxgt-material/pull/1479) [`f8779d6`](https://github.com/softistx/nxgt-material/commit/f8779d6d56a06eff970b1676e472884a769cd4b9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout`'s backdrop no longer draws a shape over the page's text or fields ([#1478](https://github.com/softistx/nxgt-material/issues/1478)). Shapes of a theme's background or of a `backdrop` `Background` (the motif and illustrated presets) are now hidden while they lie over, or within 8px of, a line of text or a control of the content: they fade out in 150ms (none under reduced motion) and fade back once clear, on scroll, resize and when the content changes. A moon, a planet or an eclipse is hidden whole, with its halo. They are hidden, never moved, so the shapes keep their places in the empty space, and nothing shows before the first check. The check keeps the content's boxes and only shifts them on scroll (rAF-throttled). The backdrop stays below the content (`-z-10`), under dialogs, sheets and sticky headers. Visible change: on a phone, and on a page that fills the column, fewer shapes show. Docs: the app-shell guide's "Where the shapes go".
+
+- [#1481](https://github.com/softistx/nxgt-material/pull/1481) [`eff59eb`](https://github.com/softistx/nxgt-material/commit/eff59eb10fc9d272e3e84d1fc85bde0d46d18214) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Stacked toasts pass axe's `target-size` on a coarse pointer again. Fixes [#1480](https://github.com/softistx/nxgt-material/issues/1480).
+  
+  A toast behind the front one in a collapsed stack is scaled and offset under it, so its covered close button (41.8 px once scaled, overlapping the front one's hit area) failed `target-size` since 3.11. The buttons (action and close) of such a toast are now hidden (`visibility: hidden`) until the stack opens on hover, or while focus is inside the toaster, so a Tab from the front toast still reaches them. Nothing changes for a single toast or an expanded stack.
+
+## 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

@@ -420,7 +420,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) | wiring fields to React Hook Form and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link), the `<main>` landmark, the `h1` title, document scrolling, and a background preset behind the shell (`backdrop`) |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link, `breadcrumb={false}` hides the trail), the `<main>` landmark, the `h1` title, document scrolling, and a background preset behind the shell (`backdrop`) |
 | [Themes for your app](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md) | defining app themes, generating their stylesheets and types with the Vite plugin's `themes` option or the `nxgt-theme` command, the CI check |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
@@ -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. | — |
@@ -593,20 +593,19 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback`, `AvatarBase` | Image with a fallback and an optional online / offline dot; `shape` clips it to an expressive shape; `tone` colours the fallback. | `Avatar`, `AvatarImage`, `AvatarFallback` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatargroup.webp" width="120" alt="AvatarGroup"> | [`AvatarGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatargroup) | Overlapping avatars with a `+N` overflow. | `AvatarGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-shape.webp" width="120" alt="Shape"> | [`Shape`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#shape) | Material 3 Expressive's 35 shapes and a squircle as a backdrop, an icon container or a mask for a photo, with a morph; eight tones or an app tone. | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-badge.webp" width="120" alt="Badge"> | [`Badge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#badge) | Pill label: default, secondary, error, success, info, warning, outlined. | `Badge` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-badge.webp" width="120" alt="Badge"> | [`Badge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#badge) | Status pill, 20 px: default, secondary, error, success, info, warning, `soft` (tonal, for states), outlined. | `Badge` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-countbadge.webp" width="120" alt="CountBadge"> | [`CountBadge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#countbadge) | Count in the corner of its children, capped at `99+` and hidden at 0; `animated` pops it in when it changes. | `CountBadge` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-countbadge.webp" width="120" alt="CountBadge"> | [`CountBadge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#countbadge) | Count in the corner of its children, capped at `99+` and hidden at 0. | `CountBadge` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-dayseparator.webp" width="120" alt="DaySeparator"> | [`DaySeparator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#dayseparator), `isNewDay`, `formatDayLabel` | "Today", "Yesterday", the weekday or the date between two hairlines, in the provider's language; sticky if asked. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-periodcards.webp" width="120" alt="PeriodCards"> | [`PeriodCards`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#periodcards) | Consecutive date ranges (terms, sprints) as cards: a "Current" marker with `aria-current`, a link over each card, as many 14rem columns as fit (one on a phone). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-chip.webp" width="120" alt="Chip"> | [`Chip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#chip) | Compact pill in three looks (hairline, soft, tag) and a dashed add pill, with leading, avatar and trailing slots, a selected state and a dismiss button; a coloured soft chip reads as a status (the tone's container, its text colour on it). | `Chip` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value. | `StatCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`). | `StatCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-metric-cards.webp" width="120" alt="TrendCard"> | [`TrendCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#metric-cards), `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard`, `Sparkline` | Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries. A `tone` (named, or your app's) draws the accent in it; deltas and breaches stay semantic. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-card-presets.webp" width="120" alt="FeatureCard"> | [`FeatureCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#card-presets), `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` | Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, title, status, metadata and actions. | `EntityHeader` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link or button when interactive. `size="sm"` is the dense row. | `ListTile` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, title, status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles) and actions. | `EntityHeader` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron) or button when interactive. `size="sm"` is the dense row. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#eventchip) | Calendar event pill — soft, solid or outlined — with its times, all-day and continuation edges. | `EventChip` |
@@ -682,7 +681,7 @@ 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/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alert) | Callout with icon, title and description in seven tones. | `Alert` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action. | `Banner` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action, in the look of `Alert` (light surface, start bar). | `Banner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Confirm / cancel dialog with async loading. `ConfirmationDialog` adds a trigger and an optional Zod form. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-customdialog.webp" width="120" alt="CustomDialog"> | [`CustomDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#customdialog) | Ready-made dialog with trigger, icon, title, body and footer. | `CustomDialog` |

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";