@nxgt/material 3.35.0 → 3.36.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nxgt/material
 
+## 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
+
+- [#1739](https://github.com/softistx/nxgt-material/pull/1739) [`a816463`](https://github.com/softistx/nxgt-material/commit/a8164639f08a1667a804ac006e2662b355c1aa94) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): bulk actions count and pass the selected rows across pages ([#1735](https://github.com/softistx/nxgt-material/issues/1735), a gap in [#1717](https://github.com/softistx/nxgt-material/issues/1717)). `ServerTable` keeps the row last seen for each selected id (taken when it was ticked, refreshed each time it is on screen again, dropped when deselected, cleared or on a new query), and `appliesTo`, the "Label (n)" counts and `onClick(ids, selection, rows)` use these rows whatever page is shown: 3 archived rows ticked on page 1 and 2 live ones on page 2 read "Restore (3)" and "Archive (2)". An id selected with no row ever seen does not apply to an action that has `appliesTo`. The server-rendered markup is unchanged.
+
 ## 3.35.0
 
 ### Minor 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/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;
+		}
+	}
+}