@nxgt/material 3.84.1 → 3.85.0

package/docs/components/data-display.md

@@ -1530,9 +1530,10 @@ import { EventChip } from '@nxgt/material/components';
 | `allDay` | `boolean` | `false` | no time |
 | `compact` | `boolean` | `false` | one line, the time before the title, for month cells |
 | `continuesBefore`, `continuesAfter` | `boolean` | `false` | square edges for a multi-day event |
+| `badge` | `{ label: string; tone?: Tone }` | — | a small tinted label after the title (neutral without a `tone`); cut with an ellipsis, and hidden visually yet still read in a box under 20px tall or 4.5rem wide. `EventCalendar` sets it from `CalendarEvent.badge` |
 | `selected`, `disabled` | `boolean` | `false` | state |
 
-**Storybook:** `Data display/EventChip` · **Vue:** `EventChip` (`variant`, `endTime`: React only for now, #892)
+**Storybook:** `Data display/EventChip` · **Vue:** `EventChip` (`variant`, `endTime`: React only for now, #892; `badge`: #2526)
 
 ---
 

package/docs/components/rich-widgets.md

@@ -339,6 +339,37 @@ trade-off: each event stays reachable by keyboard (Tab and the arrow keys move
 through the events), and the agenda view lists every event in full, which is the
 accessible route.
 
+### EventCalendar event badge
+
+An event takes an optional `badge` (`CalendarEventBadge`: `{ label, tone? }`): a
+small tinted label that marks it, such as a category or a follow-up. `tone` is a
+tone of the library or one your app declared (neutral when omitted). The same
+prop is on [`EventChip`](data-display.md).
+
+```tsx
+import { EventCalendar, type CalendarEvent } from '@nxgt/material/components';
+
+const events: CalendarEvent[] = [
+	{
+		id: '1',
+		title: 'Visit',
+		start: '2026-03-12T09:00:00Z',
+		end: '2026-03-12T10:00:00Z',
+		badge: { label: 'Follow-up', tone: 'info' },
+	},
+];
+
+<EventCalendar events={events} />;
+```
+
+- **Where.** After the title in the day, week, workweek, month and agenda
+  views, and in the preview popover.
+- **Accessibility.** The label is part of the event's name (`Visit, Follow-up`),
+  and the tone is never the only signal.
+- **Small boxes.** A long label is cut with an ellipsis inside its chip. In a
+  box under 20px tall or 4.5rem wide it is hidden visually and still read by a
+  screen reader.
+
 ### EventCalendar resources
 
 `resources` splits the **day view** into one column per room, person or team

package/package.json

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