@open-webapp/calendar 0.2.1 → 0.4.0

package/README.md

@@ -158,6 +158,14 @@ Call at top level of a vitest file; it registers a `describe('StorageAdapter con
 | `onClose?` | `() => void` | |
 | `popupName?` | `string` | `window.open` name for the event popup (default `notesdiary-cal-event`) |
 
+#### RSVP chips
+
+The chips appear in order: Accepted, Maybe, Declined, Unaccepted. Accepted, Maybe, and Declined toggle individual statuses; an empty selection falls back to `DEFAULT_RSVP_STATUSES` (accepted, tentative, needsAction).
+
+Unaccepted is an exclusive shortcut: clicking it selects only `needsAction`, saving the previous selection locally in the pane. Clicking it again restores that selection, or the defaults when no saved selection is available. Toggling another chip while exclusive mode is active applies that toggle to the saved selection (or defaults). An external nonexclusive selection clears the saved selection. Unaccepted is pressed only when the selection is exactly `needsAction`; a mixed selection containing `needsAction` does not press it.
+
+The Unaccepted badge is always visible, including at zero. It counts `needsAction` events from the controller's selected-calendar, rolling ±30-day snapshot before RSVP filtering. Visible counts cap at `99+`; the chip's `aria-label` and `title` expose the full count.
+
 Built-in copy (overridable only through the slots above):
 
 - Not connected: "Not connected to Google Calendar." with "Connect Google Calendar".
@@ -166,10 +174,16 @@ Built-in copy (overridable only through the slots above):
 - Loading: "Loading calendar…".
 - Empty: "No matching events in the next 30 days".
 
+#### Footer calendar selection
+
+One footer combobox opens a shared searchable dropdown, with calendars grouped under account headings in multi-source use. Each account has its own Clear (primary, else first calendar) and filtered Select all, which adds matching calendars while retaining existing selections. Actions affect only their account; its last selected calendar cannot be deselected, including a non-primary selection.
+
 ### CalendarSelector props
 
 `calendars: CalendarInfo[]`, `selectedIds: string[]`, `onChange(ids)`, `heading?: string` (account heading in multi-source use). It has no slot props or `popupName`. At least one calendar stays selected (deselecting the last one is ignored). "Clear" resets to the primary calendar. Built-in copy: "Search calendars", "Select all", "Clear", "Done", "No calendars found", "No calendars available".
 
+The exported standalone selector keeps its single-list props and behavior; Select all adds only search matches while retaining existing selections.
+
 ### Host CSS
 
 `styles.css` is self-contained (plain colors, dark mode via `prefers-color-scheme`). It requires no host CSS variables. Variables it reads, all with defaults:
@@ -178,6 +192,18 @@ Built-in copy (overridable only through the slots above):
 - `--chip-row-height` (fallback `44px`; host may set it to match its chip row for sticky headers)
 - `--rsvp-bar` (set internally per RSVP status; do not override)
 
+The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark styling included in `styles.css`.
+
+## 0.4.0 (BREAKING pre-1.0 minor)
+
+- CalendarPane replaces per-account footer triggers with one shared dropdown grouped by account. Hosts relying on multiple footer triggers must adapt. Account-local selection rules and the exported standalone CalendarSelector remain compatible.
+
+## 0.3.0 (minor, additive)
+
+- Adds the Unaccepted exclusive shortcut after Accepted, Maybe, and Declined, with local selection restoration and default fallback as described above.
+- Adds an always-visible Unaccepted count badge, including zero, computed before RSVP filtering from the controller's selected-calendar ±30-day snapshot. Counts above 99 display `99+`, with the full count in the chip's `aria-label` and `title`.
+- Adds the `.calendar-rsvp-chip-badge` host styling hook. Public props and default RSVP statuses remain compatible.
+
 ## 0.2.1 (patch)
 
 Fixes only, no behavior contract change: `getState().loading` is now published while a sync pass is in flight; a selection-change (partial) pass no longer clears `deferred` set by an earlier full pass; `CalendarPane` tolerates controllers without `getState`/`hydrate`.

package/dist/react/CalendarPane.js

@@ -1,7 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
-import { CalendarSelector } from './CalendarSelector.js';
+import { GroupedCalendarSelector } from './CalendarSelector.js';
+function toggleRsvpStatus(selection, status) {
+    const next = new Set(selection);
+    if (next.has(status)) {
+        next.delete(status);
+    }
+    else {
+        next.add(status);
+    }
+    return next.size === 0 ? new Set(DEFAULT_RSVP_STATUSES) : next;
+}
 function useWindowWidth() {
     const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
     useEffect(() => {
@@ -23,16 +33,16 @@ const RSVP_CHIPS = [
         label: 'Maybe',
         icon: (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("path", { d: "M5.2 5.6C5.2 4.2 6.2 3.2 7.5 3.2C8.8 3.2 9.8 4.2 9.8 5.4C9.8 6.8 7.6 6.9 7.6 8.8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "7.6", cy: "11.2", r: "0.9", fill: "currentColor" })] })),
     },
-    {
-        status: 'needsAction',
-        label: 'Unaccepted',
-        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("circle", { cx: "7.5", cy: "7.5", r: "4.3", stroke: "currentColor", strokeWidth: "1.4" }) })),
-    },
     {
         status: 'declined',
         label: 'Declined',
         icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M4 4L11 11M11 4L4 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })),
     },
+    {
+        status: 'needsAction',
+        label: 'Unaccepted',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("circle", { cx: "7.5", cy: "7.5", r: "4.3", stroke: "currentColor", strokeWidth: "1.4" }) })),
+    },
 ];
 const DEFAULT_POPUP_NAME = 'notesdiary-cal-event';
 const POPUP_W = 560;
@@ -122,6 +132,13 @@ export function CalendarPane(props) {
     const chipsRef = useRef(null);
     const popupRef = useRef(null);
     const [now, setNow] = useState(() => new Date());
+    const [savedSelection, setSavedSelection] = useState(null);
+    const isExclusive = selectedRsvpStatuses.size === 1 && selectedRsvpStatuses.has('needsAction');
+    useEffect(() => {
+        if (!isExclusive && savedSelection !== null)
+            setSavedSelection(null);
+    }, [isExclusive, savedSelection]);
+    const unacceptedCount = useMemo(() => events.filter((event) => event.selfResponseStatus === 'needsAction').length, [events]);
     const filteredEvents = useMemo(() => filterByRsvp(events, selectedRsvpStatuses), [events, selectedRsvpStatuses]);
     const calendarsByKey = useMemo(() => {
         const map = new Map();
@@ -143,19 +160,21 @@ export function CalendarPane(props) {
     const nextUpcomingEvent = findNextUpcomingEvent(filteredEvents, now);
     const selectedEventKey = currentEventKeys.values().next().value ??
         (nextUpcomingEvent ? getCalendarEventKey(nextUpcomingEvent) : undefined);
-    function handleToggle(status) {
-        const next = new Set(selectedRsvpStatuses);
-        if (next.has(status)) {
-            next.delete(status);
-            if (next.size === 0) {
-                props.onRsvpStatusesChange(new Set(DEFAULT_RSVP_STATUSES));
-                return;
-            }
+    function handleUnaccepted() {
+        if (isExclusive) {
+            props.onRsvpStatusesChange(savedSelection ?? new Set(DEFAULT_RSVP_STATUSES));
+            setSavedSelection(null);
         }
         else {
-            next.add(status);
+            setSavedSelection(new Set(selectedRsvpStatuses));
+            props.onRsvpStatusesChange(new Set(['needsAction']));
         }
-        props.onRsvpStatusesChange(next);
+    }
+    function handleToggle(status) {
+        const base = isExclusive ? savedSelection ?? DEFAULT_RSVP_STATUSES : selectedRsvpStatuses;
+        if (isExclusive)
+            setSavedSelection(null);
+        props.onRsvpStatusesChange(toggleRsvpStatus(base, status));
     }
     const dayGroups = groupByDay(filteredEvents, todayIso);
     function scrollToToday(behavior = 'auto') {
@@ -279,7 +298,7 @@ export function CalendarPane(props) {
     const loading = ctrlState.loading && filteredEvents.length === 0;
     const emptyStateText = 'No matching events in the next 30 days';
     const showCalendarSelector = calendarSources.length > 0;
-    return (_jsxs("div", { className: "calendar-pane", ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("button", { type: "button", className: "calendar-rsvp-chip calendar-scroll-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: _jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("rect", { x: "2", y: "3", width: "11", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M2 6H13", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M5 2V4M10 2V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("circle", { cx: "7.5", cy: "9.5", r: "1.3", fill: "currentColor" })] }) }), RSVP_CHIPS.map((chip) => (_jsx("button", { type: "button", className: `calendar-rsvp-chip${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.label, title: chip.label, onClick: () => handleToggle(chip.status), children: chip.icon }, chip.status)))] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), error && (_jsx("div", { className: "empty-state calendar-empty-state", role: "alert", children: _jsx("p", { children: "Couldn't load calendar events. Try again shortly." }) })), !(error && filteredEvents.length === 0) && (_jsxs("div", { className: "calendar-day-groups", children: [dayGroups.map((group) => (_jsxs("div", { className: "calendar-day-group", children: [_jsx("div", { className: "calendar-day-header", ref: (el) => {
+    return (_jsxs("div", { className: "calendar-pane", ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("button", { type: "button", className: "calendar-rsvp-chip calendar-scroll-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: _jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("rect", { x: "2", y: "3", width: "11", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M2 6H13", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M5 2V4M10 2V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("circle", { cx: "7.5", cy: "9.5", r: "1.3", fill: "currentColor" })] }) }), RSVP_CHIPS.map((chip) => (_jsxs("button", { type: "button", className: `calendar-rsvp-chip${(chip.status === 'needsAction' ? isExclusive : selectedRsvpStatuses.has(chip.status)) ? ' selected' : ''}`, "aria-pressed": chip.status === 'needsAction' ? isExclusive : selectedRsvpStatuses.has(chip.status), "aria-label": chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, title: chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, onClick: () => chip.status === 'needsAction' ? handleUnaccepted() : handleToggle(chip.status), children: [chip.icon, chip.status === 'needsAction' && (_jsx("span", { className: "calendar-rsvp-chip-badge", "aria-hidden": "true", children: unacceptedCount > 99 ? '99+' : unacceptedCount }))] }, chip.status)))] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), error && (_jsx("div", { className: "empty-state calendar-empty-state", role: "alert", children: _jsx("p", { children: "Couldn't load calendar events. Try again shortly." }) })), !(error && filteredEvents.length === 0) && (_jsxs("div", { className: "calendar-day-groups", children: [dayGroups.map((group) => (_jsxs("div", { className: "calendar-day-group", children: [_jsx("div", { className: "calendar-day-header", ref: (el) => {
                                             if (el) {
                                                 dayHeaderRefs.current.set(group.dateKey, el);
                                             }
@@ -324,7 +343,13 @@ export function CalendarPane(props) {
                                                                     openEventPopup(event.htmlLink, popupRef, popupName);
                                                                 }
                                                             }, children: _jsx("span", { className: "calendar-event-title", children: event.summary }) })) : (_jsx("span", { className: "calendar-event-title", children: event.summary })), props.renderEventAction?.(event)] }), showCalendarLabel && (_jsxs("span", { className: "calendar-event-calendar", children: [_jsx("span", { className: "calendar-event-calendar-dot", style: { backgroundColor: calendar.backgroundColor } }), calendar.summary] })), showOrganizerLabel && (_jsxs("span", { className: "calendar-event-organizer", children: [multi && (_jsx("span", { className: "calendar-event-source-dot", style: { backgroundColor: sourceColor(event.sourceId) } })), organizerText] }))] }, eventKey));
-                                    })] }, group.dateKey))), loading && _jsx("p", { className: "calendar-empty-state-text", children: "Loading calendar\u2026" }), filteredEvents.length === 0 && !loading && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: calendarSources.map((s) => (_jsx(CalendarSelector, { calendars: controller.getCalendars(s.id), selectedIds: controller.getSelectedIds(s.id), onChange: (ids) => {
-                        void controller.setSelectedIds(s.id, ids);
-                    }, heading: multi ? s.email : undefined }, s.id))) }))] }));
+                                    })] }, group.dateKey))), loading && _jsx("p", { className: "calendar-empty-state-text", children: "Loading calendar\u2026" }), filteredEvents.length === 0 && !loading && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: _jsx(GroupedCalendarSelector, { groups: calendarSources.map((s) => ({
+                        id: s.id,
+                        calendars: controller.getCalendars(s.id),
+                        selectedIds: controller.getSelectedIds(s.id),
+                        onChange: (ids) => {
+                            void controller.setSelectedIds(s.id, ids);
+                        },
+                        heading: multi ? s.email : undefined,
+                    })) }) }))] }));
 }

package/dist/react/CalendarSelector.d.ts

@@ -7,4 +7,10 @@ interface CalendarSelectorProps {
     heading?: string;
 }
 export declare function CalendarSelector({ calendars, selectedIds, onChange, heading }: CalendarSelectorProps): import("react").JSX.Element;
+/** Internal pane renderer; intentionally not re-exported from the package barrel. */
+export declare function GroupedCalendarSelector({ groups }: {
+    groups: (CalendarSelectorProps & {
+        id: string;
+    })[];
+}): import("react").JSX.Element;
 export {};

package/dist/react/CalendarSelector.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
 import { filterCalendarsByName, summarizeCalendarSelection } from '../core/events.js';
 export function CalendarSelector({ calendars, selectedIds, onChange, heading }) {
+    return _jsx(GroupedCalendarSelector, { groups: [{ id: '', calendars, selectedIds, onChange, heading }] });
+}
+/** Internal pane renderer; intentionally not re-exported from the package barrel. */
+export function GroupedCalendarSelector({ groups }) {
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
     const [activeIndex, setActiveIndex] = useState(0);
@@ -9,8 +13,9 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
     const searchRef = useRef(null);
     const rootRef = useRef(null);
     const listboxId = useId();
-    const visibleCalendars = filterCalendarsByName(calendars, query);
-    const primaryId = calendars.find((calendar) => calendar.primary)?.id ?? calendars[0]?.id;
+    const visibleGroups = groups.map((group) => ({ ...group, visible: filterCalendarsByName(group.calendars, query) }));
+    const visibleCalendars = visibleGroups.flatMap((group) => group.visible.map((calendar) => ({ calendar, group })));
+    const optionId = (sourceId, calendarId) => `${listboxId}-${encodeURIComponent(JSON.stringify([sourceId, calendarId]))}`;
     useEffect(() => {
         if (open)
             searchRef.current?.focus();
@@ -37,7 +42,8 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
         setOpen(false);
         buttonRef.current?.focus();
     }
-    function toggle(id) {
+    function toggle(group, id) {
+        const { selectedIds, onChange } = group;
         if (selectedIds.includes(id)) {
             if (selectedIds.length === 1)
                 return;
@@ -46,11 +52,13 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
         }
         onChange([...selectedIds, id]);
     }
-    function selectAll() {
-        const visibleIds = visibleCalendars.map((calendar) => calendar.id);
+    function selectAll(group) {
+        const { selectedIds, onChange } = group;
+        const visibleIds = group.visible.map((calendar) => calendar.id);
         onChange([...selectedIds, ...visibleIds.filter((id) => !selectedIds.includes(id))]);
     }
-    function clear() {
+    function clear({ calendars, onChange }) {
+        const primaryId = calendars.find((calendar) => calendar.primary)?.id ?? calendars[0]?.id;
         onChange(primaryId ? [primaryId] : []);
     }
     function handleListboxKeyDown(event) {
@@ -75,16 +83,19 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
             event.preventDefault();
             const activeCalendar = visibleCalendars[activeIndex];
             if (activeCalendar)
-                toggle(activeCalendar.id);
+                toggle(activeCalendar.group, activeCalendar.calendar.id);
         }
     }
-    const label = summarizeCalendarSelection(selectedIds, calendars);
+    const label = groups.length === 1
+        ? summarizeCalendarSelection(groups[0].selectedIds, groups[0].calendars)
+        : `${groups.reduce((count, group) => count + group.selectedIds.length, 0)} calendars selected`;
+    const activeCalendar = visibleCalendars[activeIndex];
     return (_jsxs("div", { className: "calendar-selector", ref: rootRef, children: [_jsx("button", { ref: buttonRef, type: "button", role: "combobox", "aria-label": label, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", onClick: () => {
                     setOpen((isOpen) => !isOpen);
                     setQuery('');
                     setActiveIndex(0);
-                }, children: label }), open && (_jsxs("div", { className: "calendar-selector-dropdown calendar-selector-dropdown--upward", onKeyDown: handleListboxKeyDown, children: [heading && (_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: heading })), _jsx("input", { ref: searchRef, type: "search", role: "searchbox", "aria-label": "Search calendars", value: query, onChange: (event) => {
+                }, children: label }), open && (_jsxs("div", { className: "calendar-selector-dropdown calendar-selector-dropdown--upward", onKeyDown: handleListboxKeyDown, children: [groups.length === 1 && groups[0].heading && (_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: groups[0].heading })), _jsx("input", { ref: searchRef, type: "search", role: "searchbox", "aria-label": "Search calendars", value: query, onChange: (event) => {
                             setQuery(event.target.value);
                             setActiveIndex(0);
-                        } }), _jsxs("div", { className: "calendar-selector-actions", children: [_jsx("button", { type: "button", onClick: selectAll, children: "Select all" }), _jsx("button", { type: "button", onClick: clear, children: "Clear" }), _jsx("button", { type: "button", onClick: close, children: "Done" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-multiselectable": "true", "aria-activedescendant": visibleCalendars[activeIndex] ? `${listboxId}-${visibleCalendars[activeIndex].id}` : undefined, tabIndex: -1, children: calendars.length === 0 ? (_jsx("p", { children: "No calendars available" })) : visibleCalendars.length === 0 ? (_jsx("p", { children: "No calendars found" })) : (visibleCalendars.map((calendar, index) => (_jsxs("button", { type: "button", id: `${listboxId}-${calendar.id}`, role: "option", title: calendar.summary, "aria-selected": selectedIds.includes(calendar.id), "data-active": index === activeIndex || undefined, onClick: () => toggle(calendar.id), children: [_jsx("input", { type: "checkbox", className: "calendar-selector-checkbox", checked: selectedIds.includes(calendar.id), readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true", className: "calendar-selector-dot", "data-testid": `calendar-color-${calendar.id}`, style: { backgroundColor: calendar.backgroundColor } }), _jsx("span", { className: "calendar-selector-name", title: calendar.summary, children: calendar.summary })] }, calendar.id)))) })] }))] }));
+                        } }), _jsxs("div", { className: "calendar-selector-actions", children: [groups.length === 1 && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => selectAll(visibleGroups[0]), children: "Select all" }), _jsx("button", { type: "button", onClick: () => clear(groups[0]), children: "Clear" })] }), _jsx("button", { type: "button", onClick: close, children: "Done" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-multiselectable": "true", "aria-activedescendant": activeCalendar ? optionId(activeCalendar.group.id, activeCalendar.calendar.id) : undefined, tabIndex: -1, children: visibleGroups.map((group) => (_jsxs("div", { role: groups.length > 1 ? 'group' : undefined, "aria-label": group.heading, children: [groups.length > 1 && _jsxs(_Fragment, { children: [_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: group.heading }), _jsxs("div", { className: "calendar-selector-actions", children: [_jsx("button", { type: "button", onClick: () => selectAll(group), children: "Select all" }), _jsx("button", { type: "button", onClick: () => clear(group), children: "Clear" })] })] }), group.calendars.length === 0 ? (_jsx("p", { children: "No calendars available" })) : group.visible.length === 0 ? (_jsx("p", { children: "No calendars found" })) : (group.visible.map((calendar) => (_jsxs("button", { type: "button", id: optionId(group.id, calendar.id), role: "option", title: calendar.summary, "aria-selected": group.selectedIds.includes(calendar.id), "data-active": (activeCalendar?.group.id === group.id && activeCalendar.calendar.id === calendar.id) || undefined, onClick: () => toggle(group, calendar.id), children: [_jsx("input", { type: "checkbox", className: "calendar-selector-checkbox", checked: group.selectedIds.includes(calendar.id), readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true", className: "calendar-selector-dot", "data-testid": `calendar-color-${calendar.id}`, style: { backgroundColor: calendar.backgroundColor } }), _jsx("span", { className: "calendar-selector-name", title: calendar.summary, children: calendar.summary })] }, optionId(group.id, calendar.id)))))] }, group.id))) })] }))] }));
 }

package/dist/styles.css

@@ -68,12 +68,16 @@
 }
 
 .calendar-rsvp-chip {
-  width: 32px;
+  width: auto;
+  min-width: 32px;
   height: 32px;
+  box-sizing: border-box;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  gap: 4px;
+  padding: 0 8px;
   background: transparent;
   color: #333;
   border: 1px solid #ccc;
@@ -97,6 +101,19 @@
   border-color: #081a59;
 }
 
+.calendar-rsvp-chip-badge {
+  min-width: 16px;
+  padding: 1px 4px;
+  border-radius: 999px;
+  background: #e8eefb;
+  color: #081a59;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+}
+
 .calendar-empty-state {
   padding: 24px 16px;
   color: #999;
@@ -306,6 +323,11 @@
     border-color: #22d0ef;
   }
 
+  .calendar-rsvp-chip-badge {
+    background: #081a59;
+    color: #e8eefb;
+  }
+
   .calendar-day-header {
     background: #222;
     color: #eee;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-webapp/calendar",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "type": "module",
   "repository": {
     "type": "git",