@nxgt/material 3.35.1 → 3.37.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nxgt/material
 
+## 3.37.0
+
+### Minor Changes
+
+- [#1754](https://github.com/softistx/nxgt-material/pull/1754) [`e6662f1`](https://github.com/softistx/nxgt-material/commit/e6662f19cf969b189b3440a9025262ad0926c548) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(buttons): the Cancel / Close secondary button the library draws in its footers is `tonal` by default, under a filled Confirm; a text or outlined Cancel read poorly as a button and its hit area was invisible. It covers `AlertDialogCancel` (so `ConfirmDialog` and the delete confirmation of `useDeleteRowsHandler`), `ConfirmationDialog`, the dialogs of `Contacts`, `PostalAddress`, `OpeningHours` and `Attributes`, `ImageCropper`, the `RichTextEditor` Save / Cancel row, the phone filter sheet's "Clear all", the staged facets panel's "Reset", the `FilterPresets` save dialog, the data grid's save bar "Discard" and paste "Dismiss", and the comment composer and editor of `DocumentEditor`. Icon-only close buttons, toolbar buttons and text links are unchanged. **To restore the earlier look**, pass `cancelVariant` (a `Button` `variant`: `'outlined'` or `'ghost'`) on `ConfirmDialog`, `ConfirmationDialog`, `ContactDialog`, `PostalAddressDialog`, `OpeningHoursDialog`, `AttributeDialog` and their `*FormField` / `*DialogField` wrappers, `ImageCropper`, `Filter` (`variant="bar"` and `"facets"`) and `FilterPresets`; `options.cancelVariant` on `RichTextEditor`; `useDeleteRowsHandler(onDelete, { cancelVariant })`; `variant` on `AlertDialogCancel`. The data grid's save bar and paste panel and the comment forms of `DocumentEditor` are tonal with no option (no caller-facing surface); the comment editor's Save is now filled to keep the hierarchy. `ConfirmationDialog`'s Cancel was already tonal: only its `cancelVariant` is new. New exports: the `ButtonVariant` type and `DEFAULT_CANCEL_VARIANT`. The docs' and recipes' examples now write `variant="tonal"` on their Cancel.
+
+## 3.36.0
+
+### Minor Changes
+
+- [#1742](https://github.com/softistx/nxgt-material/pull/1742) [`345d1fe`](https://github.com/softistx/nxgt-material/commit/345d1fe493bd8892f1bab2790980502c63774040) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `IconButton` takes `badge`, a count drawn on its top end corner ("99+" past 99, nothing at 0 or unset) ([#1736](https://github.com/softistx/nxgt-material/issues/1736)), in the primary colour by default (`badgeTone`: `primary`, `error` or `neutral`). It takes no room, so the button keeps its size and its 44px hit area, and it is decorative (`aria-hidden`): give the button the full accessible name, e.g. `aria-label="Publish 2 items"`. `Button` does not get one: compose a `CountBadge`.
+
 ## 3.35.1
 
 ### Patch Changes

package/README.md

@@ -502,7 +502,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/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-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; `badge` draws a decorative count ("99+") on its corner. | `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`). | — |

package/dist/{button-EMWOFSDB.js → button-CB4nSAMd.js}

@@ -323,5 +323,6 @@ function F({ tooltip: e, ...t }) {
 		children: /* @__PURE__ */ S(P, { ...t })
 	}) : /* @__PURE__ */ S(P, { ...t });
 }
+var I = "tonal";
 //#endregion
-export { w as a, D as i, N as n, A as r, F as t };
+export { D as a, A as i, I as n, w as o, N as r, F as t };

package/dist/charts.js

@@ -1,7 +1,7 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./use-material-translation-BK2YYCY3.js";
-import { t as r } from "./button-EMWOFSDB.js";
+import { t as r } from "./button-CB4nSAMd.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";

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