@nxgt/material 3.35.1 → 3.37.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-CYdnlHqA.js";
+import { t as e } from "./public-BdJCVnGS.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/{public-CYdnlHqA.js → public-BdJCVnGS.js}

@@ -6,12 +6,12 @@ import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.
 import { a as u, o as d } from "./tooltip-CkttDIab.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-Cdv9IXVo.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-DR9rACzY.js";
 import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-CpSnRXd-.js";
 import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-B1W-uVHS.js";
 import { t as N } from "./use-material-translation-BK2YYCY3.js";
-import { t as _e } from "./button-EMWOFSDB.js";
-import { n as ve, t as ye } from "./icon-button-ifTpXt0A.js";
+import { t as _e } from "./button-CB4nSAMd.js";
+import { n as ve, t as ye } from "./icon-button-CN9r5TNE.js";
 import { t as be } from "./useEvent-2fKq-6w8.js";
 import { n as xe, t as Se } from "./toggle-group-BMJNcFAC.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.js";

package/dist/{sortable-provider-CY_YD3Ee.js → sortable-provider-BshacF8v.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
 import { t as n } from "./use-material-translation-BK2YYCY3.js";
-import { t as r } from "./icon-button-ifTpXt0A.js";
+import { t as r } from "./icon-button-CN9r5TNE.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import { GripVertical as a } from "lucide-react";
 import o, { cloneElement as s, createContext as c, forwardRef as l, memo as u, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";

package/dist/{use-chat-composer-CoyqPKbt.js → use-chat-composer-C82hvxm4.js}

@@ -7,7 +7,7 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-Cdv9IXVo.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-DR9rACzY.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
 import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-CpSnRXd-.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
@@ -21,8 +21,8 @@ import { t as jt } from "./isEmpty-F_g3jLf8.js";
 import { t as L } from "./use-material-translation-BK2YYCY3.js";
 import { t as Mt } from "./spinner-CKlDba5I.js";
 import { a as Nt } from "./button-tones-BwuVvAmd.js";
-import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-EMWOFSDB.js";
-import { t as R } from "./icon-button-ifTpXt0A.js";
+import { a as Pt, i as Ft, o as It, r as Lt, t as Rt } from "./button-CB4nSAMd.js";
+import { t as R } from "./icon-button-CN9r5TNE.js";
 import { a as zt, r as Bt } from "./icon-sprites-CaYXzOL4.js";
 import { t as Vt } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as Ht, t as Ut } from "./util-4heV2LPI.js";
@@ -36,7 +36,7 @@ import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
 import { n as cn, r as ln, t as un } from "./chip-B6m3yagf.js";
-import { n as dn, t as fn } from "./icon-badge-BFScQnp9.js";
+import { n as dn, t as fn } from "./icon-badge-DXEBeS1y.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as mn } from "./empty-state-DMr94lsF.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
@@ -1232,18 +1232,18 @@ var _u = function(e, t, n) {
 //#endregion
 //#region lib/components/ui/actions/split-button/split-button-action.tsx
 function vu({ children: e, loading: t = !1, lockOnClick: r, tooltip: i, filled: a, onClickCapture: o, type: s = "button", className: c, ...l }) {
-	let u = It(r, t), d = t || u.locked, f = /* @__PURE__ */ K("button", {
+	let u = Lt(r, t), d = t || u.locked, f = /* @__PURE__ */ K("button", {
 		"data-slot": "split-button-action",
 		type: s,
 		...l,
 		className: n("nxgt-split-button-part", c),
 		"aria-disabled": d || l["aria-disabled"],
 		"aria-busy": d || l["aria-busy"],
-		onClickCapture: Pt(d, u, o),
+		onClickCapture: It(d, u, o),
 		children: [d ? /* @__PURE__ */ G(Mt, {
 			color: a ? "light" : "primary",
 			className: "nxgt-split-button-spinner size-(--sb-icon)"
-		}) : null, Lt(e)]
+		}) : null, Ft(e)]
 	});
 	return i ? /* @__PURE__ */ G(S, {
 		content: i,
@@ -7283,7 +7283,7 @@ function Rv({ className: e, ...t }) {
 }
 function zv({ className: e, ...t }) {
 	return /* @__PURE__ */ G(Kc, {
-		className: n(Ft({
+		className: n(Pt({
 			variant: t.variant,
 			color: t.color
 		}), e),
@@ -7292,8 +7292,9 @@ function zv({ className: e, ...t }) {
 }
 function Bv({ className: e, ...t }) {
 	return /* @__PURE__ */ G(qc, {
-		className: n(Ft({
-			variant: t.variant ?? "outlined",
+		"data-variant": t.variant ?? "tonal",
+		className: n(Pt({
+			variant: t.variant ?? "tonal",
 			color: t.color
 		}), e),
 		...t

package/docs/components/buttons-and-actions.md

@@ -65,7 +65,7 @@ import { Mail } from 'lucide-react';
 | `asChild` | `boolean` | `false` | styles its only child instead of rendering a `<button>` |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | not `submit` by default — pass it inside a form |
 
-The classes are exported as `buttonVariants` for styling your own element (Pagination, AlertDialog and the calendar's date picker use them).
+The `ButtonVariant` type (one `variant` value) is exported too, to type a `cancelVariant` you forward. The classes are exported as `buttonVariants` for styling your own element (Pagination, AlertDialog and the calendar's date picker use them).
 
 **The look.** The label is set in the type scale and is heavier than before (weights 560 at `xs` to 700 at `2xl`). The focus is a 2 px outline in the button's colour, 2 px off the button (the error colour with `aria-invalid`). A disabled button has neutral text (40 % of the text colour) and a neutral 12 % fill, none on `ghost` and `link`. `outlined` is a 1.5 px line inside the box at 55 % of the colour, and keeps a `ButtonText` outline in forced colours, where the inset shadow is removed. A `ghost` button is neutral without a `color`, and takes the tone of one it is given. On a coarse pointer every size has a 44 px hit area.
 
@@ -79,6 +79,24 @@ const [on, setOn] = useState(false);
 <Button size="2xl" shape="square" variant="tonal">Start</Button>;
 ```
 
+**Footer buttons.** In a footer (a dialog, a sheet, a form, an inline editor),
+the confirming action is `filled` and the Cancel, Close or Discard beside it
+is `tonal`: two clear buttons, one weight apart, where a text or outlined
+Cancel read poorly and left its hit area invisible. The library draws its own
+Cancel buttons that way (`AlertDialogCancel`, `ConfirmDialog`,
+`ConfirmationDialog`, the field dialogs, `ImageCropper`, the filter sheet…),
+and each takes `cancelVariant` (a `Button` `variant`, default `'tonal'`) to
+restore `'outlined'` or `'ghost'`. Write yours the same way. An icon-only ✕ in
+a corner, a toolbar button and a text link stay as they are; a destructive
+confirm keeps its own variant and `color="error"`.
+
+```tsx
+<DialogFooter>
+	<Button variant="tonal" onClick={close}>Cancel</Button>
+	<Button type="submit">Save</Button>
+</DialogFooter>;
+```
+
 **On a phone.** A button is never wider than its container, and keeps its
 content's width in a column: a label too
 long for it (a card on a phone) is cut with “…” on one line, and its
@@ -159,6 +177,16 @@ import { Pencil, Trash2 } from 'lucide-react';
 | `aria-label` | `string` | the tooltip, if a string | give one when there is no string tooltip |
 | `shape` | `ShapeName` | — | draws the button as one of the expressive shapes (`cookie-9`, `sunny`, `squircle`…) instead of a circle; changing it morphs. Unset: the round button, unchanged |
 | `morph` | `'round' \| 'pill' \| 'none'` | `'pill'` | what a **toggle** (`aria-pressed` set) does when pressed: `pill` fills with its colour and widens by 14 px into a pill, `round` fills and stays a circle, `none` keeps the look your classes give it. Not set on a button without `aria-pressed`, one with a `shape`, or a Toolbar item (the Toolbar's own look) |
+| `badge` | `number` | — | a count on the top end corner (top left in a right-to-left page): "99+" past 99, nothing at 0 or unset. It takes no room, so the box and the 44 px hit area are unchanged. It is **decorative** (`aria-hidden`): put the number in the accessible name yourself, e.g. `aria-label="Publish 2 items"` |
+| `badgeTone` | `'primary' \| 'error' \| 'neutral'` | `'primary'` | the badge's colour: a count is not an alert, so `primary`; `error` for a notification; `neutral` is the page's text colour on its background |
+
+**A count badge** (`badge`) is a primary pill (`badgeTone="error"` is the menu-item badge's red), ringed in the page background so it reads over any variant, and sits half outside the corner, over the neighbours' gap (leave 4 px; a `Toolbar` clips 4 px outside its items, so leave room there too). It does not dim when the button is disabled. It never names itself: `<IconButton badge={2} aria-label="Publish 2 items">`. `Button` has no `badge`: its label can be cut with an ellipsis and an `asChild` one clips, so compose a `CountBadge` around it.
+
+```tsx
+<IconButton badge={count} aria-label={`Publish ${count} items`}>
+	<Send />
+</IconButton>
+```
 
 **A toggle button** fills with the button's `color` (`primary` by default) through `data-selected` and the fill `Button` shares, and a pointer down squeezes the corners; `pill` widens the button itself by 14 px (its neighbours move by the 14 px), at any `size` (give the button a `size`, not a `size-*` class: the pressed width follows the `size`, see [troubleshooting](../troubleshooting.md#a-pill-iconbutton-toggle-is-the-wrong-width-with-a-size--class)). Below 600 px wide only the colour changes, so a phone row never reflows; `prefers-reduced-motion` keeps the colour change only; in forced colours the pressed fill is `SelectedItem`. The pressed fill and corners are the button's own (a `bg-*` or `rounded-*` class on a pressed toggle does not apply); a ghost toggle without a `color` is neutral when selected (a tint of the text colour), and primary only with a `color`. The focus is a 2 px outline 2 px off the button, a disabled button has a neutral 12 % fill (none on `ghost` and `link`), and on a coarse pointer every size has a 44 px hit area. The morph works with a `tooltip` too (the styles match `data-icon-button`, which the tooltip trigger does not replace). The date picker's input-mode switch uses `morph="round"`; `PasswordField`'s eye, which sits inside its field, and `RichChatComposer`'s format toggle, which draws its own pressed look, use `morph="none"`; the mini player's move button and the Gallery viewer's repeat are pills too, white with a black icon on their dark chrome. `CodeEditor`'s word-wrap pill takes the editor theme's tint.
 

package/docs/components/data-table-filter-and-lists.md

@@ -83,7 +83,9 @@ truncates with an ellipsis and carries its full text as a `title`); `DataTablePa
 "Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`, under a
 visually hidden header "Expand", `material.table.labels.expand`);
 `useDeleteRowsHandler(onDelete)` returns a `handleDelete(rows)` click
-handler and the `confirmDialog` to render.
+handler and the `confirmDialog` to render; its Cancel button is `tonal`
+(`useDeleteRowsHandler(onDelete, { cancelVariant: 'outlined' })` restores the
+earlier look).
 `dataTableFeatures` / `DataTableFeatures` are the TanStack v9 features the
 table enables, for typing your own column defs.
 
@@ -1402,6 +1404,13 @@ and `errors` shows a server's refusal of a condition (see
 [A refused condition](#a-refused-condition)). A locked chip is a focusable group named by its text ("Year is 2026-2027"), with "Locked: <reason>" as its description. The other variants
 and `FilterProps` are unchanged.
 
+#### The sheet's and the staged panel's secondary button
+
+"Clear all" in the phone sheet's footer and "Reset" in the staged panel's are
+`tonal`, beside a filled "Show N results" / "Apply". `cancelVariant` on
+`Filter variant="bar"` or `"facets"` (a `Button` `variant`) restores
+`'outlined'`. `FilterPresets` takes the same prop for its save dialog's Cancel.
+
 #### A compact band for a list inside a page section
 
 `bandDensity="compact"` is `ServerTable`'s prop, with the same values and the

package/docs/components/feedback-and-status.md

@@ -167,7 +167,7 @@ Parts: `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`,
 `AlertDialogFooter`, `AlertDialogAction`, `AlertDialogCancel`,
 `AlertDialogOverlay`, `AlertDialogPortal`. `AlertDialogAction` and
 `AlertDialogCancel` take the `Button` `variant` and `color` (cancel defaults
-to `outlined`; a `ghost` one in a colour shows it, as a ghost `Button` does). Radix props (`open`, `defaultOpen`, `onOpenChange`) go on
+to `tonal`, under a filled action; `variant="outlined"` restores the earlier look; a `ghost` one in a colour shows it, as a ghost `Button` does). Radix props (`open`, `defaultOpen`, `onOpenChange`) go on
 `AlertDialog`.
 On open, `AlertDialogContent` focuses `AlertDialogCancel`, the least
 destructive action (its first control when there is no Cancel, the content
@@ -225,6 +225,7 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `confirmDisabled` | `boolean` | `false` | disables the confirm button, for example while an error of yours stands |
 | `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` restores the earlier look |
 
 On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
 
@@ -272,6 +273,7 @@ const schema = z.object({ reason: z.string().min(3) });
 | `icon` | `ReactNode` | info icon | the glyph alone (not an `IconButton`): it is shown in a decorative, `aria-hidden` badge |
 | `iconProps` | `IconButtonProps` | — | the badge's `variant`, `color`, `className` |
 | `confirmText` / `cancelText` | `ReactNode` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` or `'ghost'` restores an earlier look |
 
 **Several steps, one dialog.** Confirm closes it; to show the next step, change
 its `title` (and `description`) and set `open` back to `true`, at once (from

package/docs/components/form-fields.md

@@ -1324,7 +1324,7 @@ Three parts, each for one job:
 
 | Part | Use it for |
 | --- | --- |
-| `AttributesField` · `AttributesFormField` | the field, and its React Hook Form wrapper. Inline by default; `editing="dialog"` keeps the list and dialog |
+| `AttributesField` · `AttributesFormField` | the field, and its React Hook Form wrapper. Inline by default; `editing="dialog"` keeps the list and dialog, whose Cancel button is `tonal` (`cancelVariant` restores `'outlined'`) |
 | `AttributesEditor` | the same inline editor, controlled (`value`, `onValueChange`), outside a form |
 | `AttributesSummary` | the read-only display: type icons, labels and default values |
 
@@ -1536,8 +1536,9 @@ only, and a value that fails its check is shown without a link.
 `ContactsEditor` takes `value`, `onValueChange`, `label`, `headingLevel` (`3`
 by default; the type headings sit one below it), `variant` and `disabled`. A
 wrong format is said once the field was left, a duplicate at once. `ContactsFormField` takes `editing` (`'inline' \| 'dialog'`,
-default `'inline'`) and `variant` (inline only). `Contacts` takes `data`,
-`onAdd`, `onEdit` and `disabled`.
+default `'inline'`), `variant` (inline only) and `cancelVariant` (dialog only,
+the Cancel button's `Button` variant, default `'tonal'`; `'outlined'` restores
+the earlier look). `Contacts` takes `data`, `onAdd`, `onEdit` and `disabled`.
 
 `contactsListSchema()` is the zod schema of a whole list, with the editor's
 own rules (the same functions): the value's format by type (an email, an
@@ -1592,6 +1593,10 @@ Parts: `PostalAddress` (the card), `PostalAddressDialog` (the edit form).
 | `onEdit` | `() => void` | — | shows the edit button |
 | `disabled` | `boolean` | — | hides it |
 
+`PostalAddressFormField` and `PostalAddressDialog` take `cancelVariant` (the
+dialog's Cancel button, a `Button` `variant`, default `'tonal'`; `'outlined'`
+restores the earlier look).
+
 **Emits:** `PostalAddressFormField` stores a `PostalAddressFieldValue`
 object, and `{}` when the address is removed.
 **Form wrapper:** `PostalAddressFormField` — `control` and `name`, see
@@ -1671,7 +1676,8 @@ summary shows a quiet "Hours not set" (`empty` replaces the text,
 `OpeningHoursEditor` takes `value`, `onValueChange`, `label`, `headingLevel` (`3` by default), `weekStartsOn`,
 `locale` and `disabled`. `OpeningHoursFormField` takes `editing`
 (`'inline' \| 'dialog'`, default `'inline'`), `weekStartsOn` and `locale`
-(inline), and `showAddAllDays` (dialog, default `false`).
+(inline), and `showAddAllDays` (dialog, default `false`) and `cancelVariant`
+(dialog, the Cancel button's `Button` variant, default `'tonal'`).
 
 `openingHoursSchema()` returns the zod schema of one `OpeningHour`
 (`dayOfWeek` coerced from a string), built on the first call. It is unchanged.

package/docs/components/media-and-files.md

@@ -429,6 +429,7 @@ after `onCrop`).
 | `cropShape` | `'rect' \| 'round'` | `'rect'` | round mask for avatars |
 | `fileName` | `string` | — | name of the produced `File` |
 | `onCancel` | `() => void` | — | `ImageCropper`: shows a Cancel button |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | `ImageCropper`: the Cancel button's variant; `'ghost'` restores the earlier look |
 | `open` / `onOpenChange` / `trigger` | | — | `ImageCropperDialog`: controlled or trigger-opened |
 
 **Storybook:** `Media & files/ImageCropper` · **Vue:** `ImageCropper`, `ImageCropperDialog`

package/docs/components/primitives.md

@@ -151,7 +151,7 @@ import {
 	</CardHeader>
 	<CardContent>Pick a name and a framework.</CardContent>
 	<CardFooter className="justify-end gap-2">
-		<Button variant="outlined">Cancel</Button>
+		<Button variant="tonal">Cancel</Button>
 		<Button>Deploy</Button>
 	</CardFooter>
 </Card>;

package/docs/components/rich-widgets.md

@@ -1728,7 +1728,7 @@ function Reply({ onSubmit }: { onSubmit: (html: string) => void }) {
 			mentions={['Ada', 'Grace']}
 			actions={
 				<>
-					<Button variant="ghost" onClick={() => setHtml('')}>
+					<Button variant="tonal" onClick={() => setHtml('')}>
 						Cancel
 					</Button>
 					<Button onClick={() => onSubmit(html)}>Reply</Button>
@@ -1965,7 +1965,7 @@ function Comment() {
 | `editable` | `boolean` | `true` | read-only when `false` (toolbar hidden) |
 | `options.features` | `RichTextEditorFeatures` | all `true` | turn off tables, images, YouTube, slash commands, custom blocks… |
 | `options.mentions.suggestions` | `(string \| MentionItem)[]` | — | enables `@` mentions; a `MentionItem` (as `MentionList` / `ChatComposer` take) shows its avatar and handle in the list and inserts its `id` with its `label` as text |
-| `options.onSave` / `onCancel` | `() => void` | — | adds Save / Cancel buttons |
+| `options.onSave` / `onCancel` | `() => void` | — | adds Save / Cancel buttons; Cancel is `tonal`, `options.cancelVariant` restores `'ghost'` |
 | `characterLimit` | `number` | — | caps the text and shows the count |
 | `placeholder` | `string` | "Write something …" (translated, `material['rich-text-editor'].placeholder`) | shown in an empty editor; a change shows at once |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on the editable area |

package/lib/components/ui/actions/icon-button/icon-button.css

@@ -113,3 +113,61 @@
 		}
 	}
 }
+
+/* The `badge` count: on the top end corner (logical edges, so a right-to-left
+ * page mirrors it), outside the box so the button keeps its size, and
+ * `pointer-events: none` so the 44px hit area (button.css) stays the button's.
+ * Fill and text follow `badgeTone` (primary by default; error is the menu-item badge's `bg-error` under `text-error-foreground`);
+ * a ring in the page background detaches it from the fill of any variant. It
+ * does not follow the button's hover, focus, disabled or pressed look. */
+@layer utilities {
+	.nxgt-icon-button-badge {
+		position: absolute;
+		inset-block-start: -0.25rem;
+		inset-inline-end: -0.25rem;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		block-size: 1rem;
+		min-inline-size: 1rem;
+		padding-inline: 0.25rem;
+		border-radius: 9999px;
+		/* The text-safe primary (AA on the page, light and dark) under the page
+		 * colour: the plain fill is 2.7:1 against the dark page's ring. */
+		background: var(--color-primary-text);
+		color: var(--color-background);
+		box-shadow: 0 0 0 2px var(--color-background);
+		font-size: 10px;
+		font-weight: 500;
+		line-height: 1;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+		pointer-events: none;
+		z-index: 1;
+	}
+	.nxgt-icon-button-badge[data-tone="error"] {
+		background: var(--color-error);
+		color: var(--color-error-foreground);
+	}
+	.nxgt-icon-button-badge[data-tone="neutral"] {
+		background: var(--color-foreground);
+		color: var(--color-background);
+	}
+	/* The 24px button: a smaller badge, further out, so it leaves the icon. */
+	[data-size="xs"] > .nxgt-icon-button-badge {
+		block-size: 0.875rem;
+		min-inline-size: 0.875rem;
+		padding-inline: 0.1875rem;
+		inset-block-start: -0.4375rem;
+		inset-inline-end: -0.4375rem;
+	}
+	@media (forced-colors: active) {
+		.nxgt-icon-button-badge {
+			border: 1px solid CanvasText;
+			background: Highlight;
+			color: HighlightText;
+			forced-color-adjust: none;
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.35.1",
+	"version": "3.37.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"