@nxgt/material 3.35.0 → 3.36.0

package/dist/pdf-reader.js

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

package/dist/{public-CYdnlHqA.js → public-f9CBkMZP.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 { 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-C5g_Va_g.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";
@@ -22,7 +22,7 @@ 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 { 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";

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

@@ -159,6 +159,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

@@ -868,9 +868,16 @@ export default function Students() {
   archived show no "Restore". `onClick(ids, selection, rows)` receives only
   those ids and rows. An action without `appliesTo` applies to the whole
   selection: it shows the selection's size and gets every id. **Across
-  pages:** `appliesTo` sees the loaded page's rows only, so a row selected on
-  another page is neither counted nor passed by an action that has one; an
-  action without it still gets every selected id.
+  pages:** `ServerTable` keeps the row last seen for each selected id, taken
+  when the row was ticked and refreshed each time it is on screen again (so
+  after a mutation the bar sees its current state). `appliesTo`, the counts
+  and `onClick(ids, selection, rows)` use these rows for every selected id,
+  whatever page is shown: 3 archived rows ticked on page 1 and 2 live ones on
+  page 2 read "Restore (3)" and "Archive (2)" on either page. An id selected
+  with no row ever seen does not apply to an action that has `appliesTo`
+  (an action without it still gets every selected id). A row's snapshot is
+  dropped when it is deselected, when the selection is cleared and when the
+  query changes.
   ```tsx
   <ServerTable<Item>
     {...props}

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.0",
+	"version": "3.36.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"