@open-webapp/calendar 0.4.0 → 0.5.1

package/README.md

@@ -38,6 +38,7 @@ void controller.refresh();   // then syncs from Google
 <CalendarPane
   sources={sources}
   controller={controller}
+  theme="system"                           // optional: 'system' | 'light' | 'dark'
   selectedRsvpStatuses={statuses}          // Set<RsvpStatus>
   onRsvpStatusesChange={setStatuses}
   connected={connected}                    // optional, see CalendarPane props
@@ -146,6 +147,7 @@ Call at top level of a vitest file; it registers a `describe('StorageAdapter con
 | --- | --- | --- |
 | `sources` | `Source[]` | shown accounts; 2+ enables multi-source UI (per-source color and email) |
 | `controller` | `CalendarController` | |
+| `theme?` | `'system' \| 'light' \| 'dark'` | defaults to `'system'`, including when `undefined`; applies to every pane state and all internal selectors |
 | `selectedRsvpStatuses` | `Set<RsvpStatus>` | filter; `DEFAULT_RSVP_STATUSES` = accepted, tentative, needsAction |
 | `onRsvpStatusesChange` | `(next) => void` | |
 | `renderEventAction?` | `(event) => ReactNode` | per-event slot |
@@ -178,15 +180,38 @@ Built-in copy (overridable only through the slots above):
 
 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.
 
+The footer and standalone `CalendarSelector` share a padded, rounded trigger with a visible decorative chevron, themed hover surface and keyboard-only focus outline. Long labels ellipsize visually while retaining the full accessible name. This is a visual-only correction to the former native trigger geometry: click, native Enter/Space activation, search, keyboard navigation, Escape/Done focus return, combobox relationships and selection callbacks/rules are unchanged. The default footer remains 64px high, with the upward dropdown 6px above the trigger.
+
 ### 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".
+`calendars: CalendarInfo[]`, `selectedIds: string[]`, `onChange(ids)`, `heading?: string` (account heading in multi-source use), `theme?: 'system' | 'light' | 'dark'` (defaults to `'system'`, including when `undefined`). 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".
+
+```tsx
+import { CalendarSelector } from '@open-webapp/calendar';
+import '@open-webapp/calendar/styles.css';
+
+<CalendarSelector
+  calendars={calendars}
+  selectedIds={selectedIds}
+  onChange={setSelectedIds}
+  heading="me@example.com"
+  theme="dark"
+/>;
+```
+
+### Theme behavior
+
+Both components follow the OS/browser `prefers-color-scheme` preference live in `'system'` mode; omitting `theme` preserves this default. Explicit `'light'` and `'dark'` ignore OS changes. Hosts can change the prop on a mounted component (including back to `'system'` or `undefined`) without remounting, closing an open dropdown, losing its search query, focus or keyboard-active option, changing selected calendars, or resetting the pane's saved RSVP selection. Theme changes do not trigger selection callbacks or controller refreshes.
+
+Each pane forwards its requested mode to its unified grouped footer selector, including both account groups, account-local actions and the shared search. The single-trigger structure and cross-account keyboard navigation are preserved; the approved trigger geometry exception is described above. Standalone selectors choose their own mode: an omitted/system selector follows the OS even inside an explicitly dark or light pane. Adjacent and nested instances can use opposite modes independently; no document/body theme switch is applied.
+
+The host owns theme-picker UI and preference persistence (for example, saving a choice and passing it back as `theme`). The package neither stores the choice nor adds it to the controller. Hosts also own styling of `emptyState`, `sourceNotice` and `renderEventAction` slot content; give custom content explicit styles where needed rather than relying on the built-in palette.
 
 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:
+`styles.css` is self-contained, using component-scoped semantic palette tokens and native-control `color-scheme`. Each pane/selector root resets the full palette; explicit dark overrides and system-only `prefers-color-scheme` rules keep instances isolated. It requires no host CSS variables. Layout/status variables:
 
 - `--calendar-footer-height` (default `64px`, set on `.calendar-pane`; override to match host footer)
 - `--chip-row-height` (fallback `44px`; host may set it to match its chip row for sticky headers)
@@ -194,6 +219,18 @@ The exported standalone selector keeps its single-list props and behavior; Selec
 
 The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark styling included in `styles.css`.
 
+The shared `.calendar-selector-trigger` uses border-box inline-flex, centered alignment, an 8px gap, 36px minimum height, 8px 12px padding, 6px radius, a 1px solid control border, inherited font and pointer cursor. `.calendar-selector-trigger-label` bounds long labels with ellipsis; `.calendar-selector-chevron` stays 12px and does not shrink or add a tab stop. Existing scoped surface/text/control-border tokens style the resting trigger, the hover token supplies its hover background, and the focus token supplies a 2px `:focus-visible` outline with 2px offset. This approved visual-only exception changes trigger geometry and its derived dropdown position, preserving surrounding layout and theme isolation. Import the shipped stylesheet for both footer and standalone use.
+
+## 0.5.1 (patch)
+
+- Corrects footer and standalone selector affordance with a padded, rounded 36px-minimum trigger, decorative chevron, themed hover and keyboard-focus treatment, and long-label containment.
+- Approved visual-only exception to native trigger geometry/surface treatment; the default 64px footer and 6px dropdown clearance are preserved. Public props, copy, accessible names/relationships, interactions, selection semantics, controller and storage/schema contracts are unchanged. No migration is required.
+
+## 0.5.0 (minor, additive)
+
+- Adds optional `theme?: 'system' | 'light' | 'dark'` to both React components, with live OS tracking by default and live per-instance overrides.
+- Themes all built-in pane states and internal/standalone selectors while preserving existing palettes, layout, copy and interaction contracts. Existing callers need no migration.
+
 ## 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.

package/dist/react/CalendarPane.d.ts

@@ -3,6 +3,7 @@ import type { CalendarEvent, RsvpStatus, Source } from '../core/types.js';
 import type { CalendarController } from '../core/controller.js';
 export type RsvpSelection = Set<RsvpStatus>;
 export interface CalendarPaneProps {
+    theme?: 'system' | 'light' | 'dark';
     sources: Source[];
     controller: CalendarController;
     selectedRsvpStatuses: RsvpSelection;

package/dist/react/CalendarPane.js

@@ -100,7 +100,7 @@ function usableUrl(url) {
 }
 export function CalendarPane(props) {
     const isDesktop = useWindowWidth() >= 960;
-    const { sources, controller, selectedRsvpStatuses } = props;
+    const { sources, controller, selectedRsvpStatuses, theme = 'system' } = props;
     const popupName = props.popupName ?? DEFAULT_POPUP_NAME;
     const [version, setVersion] = useState(0);
     useEffect(() => {
@@ -286,10 +286,10 @@ export function CalendarPane(props) {
         return () => observer.disconnect();
     }, [connected, needsReauth]);
     if (!connected) {
-        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: props.emptyState ?? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Not connected to Google Calendar." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onConnect, children: "Connect Google Calendar" })] })) }) }));
+        return (_jsx("div", { className: "calendar-pane", "data-calendar-theme": theme, children: _jsx("div", { className: "calendar-pane-prompt", children: props.emptyState ?? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Not connected to Google Calendar." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onConnect, children: "Connect Google Calendar" })] })) }) }));
     }
     if (needsReauth) {
-        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: props.sourceNotice && needsScopeSources.length > 0 ? (needsScopeSources.map((s) => _jsx("div", { children: props.sourceNotice?.(s) }, s.id))) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Calendar connection needs reauthorization." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onReconnect, children: "Reconnect to restore sync" })] })) }) }));
+        return (_jsx("div", { className: "calendar-pane", "data-calendar-theme": theme, children: _jsx("div", { className: "calendar-pane-prompt", children: props.sourceNotice && needsScopeSources.length > 0 ? (needsScopeSources.map((s) => _jsx("div", { children: props.sourceNotice?.(s) }, s.id))) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Calendar connection needs reauthorization." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onReconnect, children: "Reconnect to restore sync" })] })) }) }));
     }
     const sourcesWithEvents = new Set(filteredEvents.map((e) => e.sourceId));
     const hasErrorWithoutEvents = sources.some((s) => statuses[s.id] === 'error' && !sourcesWithEvents.has(s.id));
@@ -298,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) => (_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) => {
+    return (_jsxs("div", { className: "calendar-pane", "data-calendar-theme": theme, 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);
                                             }
@@ -343,7 +343,7 @@ 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: _jsx(GroupedCalendarSelector, { groups: calendarSources.map((s) => ({
+                                    })] }, 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, { theme: theme, groups: calendarSources.map((s) => ({
                         id: s.id,
                         calendars: controller.getCalendars(s.id),
                         selectedIds: controller.getSelectedIds(s.id),

package/dist/react/CalendarSelector.d.ts

@@ -5,12 +5,14 @@ interface CalendarSelectorProps {
     onChange: (selectedIds: string[]) => void;
     /** Optional account heading (used when several sources are shown). */
     heading?: string;
+    theme?: 'system' | 'light' | 'dark';
 }
-export declare function CalendarSelector({ calendars, selectedIds, onChange, heading }: CalendarSelectorProps): import("react").JSX.Element;
+export declare function CalendarSelector({ calendars, selectedIds, onChange, heading, theme }: CalendarSelectorProps): import("react").JSX.Element;
 /** Internal pane renderer; intentionally not re-exported from the package barrel. */
-export declare function GroupedCalendarSelector({ groups }: {
+export declare function GroupedCalendarSelector({ groups, theme }: {
     groups: (CalendarSelectorProps & {
         id: string;
     })[];
+    theme?: CalendarSelectorProps['theme'];
 }): import("react").JSX.Element;
 export {};

package/dist/react/CalendarSelector.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }] });
+export function CalendarSelector({ calendars, selectedIds, onChange, heading, theme = 'system' }) {
+    return _jsx(GroupedCalendarSelector, { theme: theme, groups: [{ id: '', calendars, selectedIds, onChange, heading }] });
 }
 /** Internal pane renderer; intentionally not re-exported from the package barrel. */
-export function GroupedCalendarSelector({ groups }) {
+export function GroupedCalendarSelector({ groups, theme = 'system' }) {
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
     const [activeIndex, setActiveIndex] = useState(0);
@@ -90,11 +90,11 @@ export function GroupedCalendarSelector({ groups }) {
         ? 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: () => {
+    return (_jsxs("div", { className: "calendar-selector", "data-calendar-theme": theme, ref: rootRef, children: [_jsxs("button", { className: "calendar-selector-trigger", 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: [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) => {
+                }, children: [_jsx("span", { className: "calendar-selector-trigger-label", children: label }), _jsx("svg", { className: "calendar-selector-chevron", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M3 4.5 6 7.5 9 4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), 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: [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

@@ -1,3 +1,55 @@
+.calendar-pane,
+.calendar-selector {
+  /* Reset the complete palette at every independent component boundary. */
+  --calendar-scheme: light;
+  --calendar-surface: #ffffff;
+  --calendar-text: #222;
+  --calendar-border: #eee;
+  --calendar-prompt: #555;
+  --calendar-accent: #00a9ce;
+  --calendar-hover: #f0f8fb;
+  --calendar-chip-text: #333;
+  --calendar-chip-border: #ccc;
+  --calendar-chip-selected: #081a59;
+  --calendar-chip-selected-text: #ffffff;
+  --calendar-badge: #e8eefb;
+  --calendar-badge-text: #081a59;
+  --calendar-header: #f5f5f5;
+  --calendar-allday: #fdf6e3;
+  --calendar-highlight: #f0f8fb;
+  --calendar-insert: #888;
+  --calendar-insert-hover: #222;
+  --calendar-insert-background: rgba(0, 0, 0, 0.06);
+  --calendar-focus: #1a73e8;
+  --calendar-rsvp-accepted: #2e7d32;
+  --calendar-rsvp-tentative: #d97706;
+  --calendar-rsvp-needsAction: #2563eb;
+  --calendar-rsvp-declined: #dc2626;
+  --calendar-selector-border: #ccc;
+  --calendar-selector-text: #1a1a1a;
+  --calendar-selector-shadow: 0 4px 14px rgb(0 0 0 / 15%);
+  --calendar-control-border: #767676;
+  --calendar-control-background: #efefef;
+  --calendar-input-background: #ffffff;
+  --calendar-control-text: #000000;
+  --calendar-control-width: 2px;
+  --calendar-button-border-style: outset;
+  --calendar-input-border-style: inset;
+  --calendar-option-hover: transparent;
+  --calendar-option-active: #e8f5f8;
+  --calendar-muted: #888;
+  --calendar-time: #666;
+  --calendar-empty: #999;
+  --calendar-chip-hover: #00a9ce;
+  --calendar-checkbox: #22a6c0;
+  color-scheme: var(--calendar-scheme);
+  color: var(--calendar-text);
+}
+
+.calendar-pane {
+  background: var(--calendar-surface);
+}
+
 .calendar-pane {
   --calendar-footer-height: 64px;
   display: flex;
@@ -23,8 +75,8 @@
   box-sizing: border-box;
   min-height: var(--calendar-footer-height);
   padding: 12px 16px;
-  border-top: 1px solid #eee;
-  background: #ffffff;
+  border-top: 1px solid var(--calendar-border);
+  background: var(--calendar-surface);
 }
 
 .calendar-pane-prompt {
@@ -37,7 +89,7 @@
 
 .calendar-pane-prompt p {
   margin: 0;
-  color: #555;
+  color: var(--calendar-prompt);
   font-size: 14px;
 }
 
@@ -45,15 +97,15 @@
   padding: 10px 16px;
   font-size: 14px;
   font-weight: 500;
-  background: #ffffff;
-  color: #00a9ce;
-  border: 1px solid #00a9ce;
+  background: var(--calendar-surface);
+  color: var(--calendar-accent);
+  border: 1px solid var(--calendar-accent);
   border-radius: 6px;
   cursor: pointer;
 }
 
 .calendar-connect-button:hover {
-  background: #f0f8fb;
+  background: var(--calendar-hover);
 }
 
 .calendar-rsvp-chips {
@@ -63,7 +115,7 @@
   flex-wrap: wrap;
   position: sticky;
   top: 0;
-  background: #ffffff;
+  background: var(--calendar-surface);
   z-index: 2;
 }
 
@@ -79,8 +131,8 @@
   gap: 4px;
   padding: 0 8px;
   background: transparent;
-  color: #333;
-  border: 1px solid #ccc;
+  color: var(--calendar-chip-text);
+  border: 1px solid var(--calendar-chip-border);
   border-radius: 999px;
   cursor: pointer;
 }
@@ -88,25 +140,25 @@
 .calendar-scroll-today-btn {
   margin-right: 4px;
   padding-right: 4px;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--calendar-chip-border);
 }
 
 .calendar-rsvp-chip:hover {
-  border-color: #00a9ce;
+  border-color: var(--calendar-chip-hover);
 }
 
 .calendar-rsvp-chip.selected {
-  background: #081a59;
-  color: #ffffff;
-  border-color: #081a59;
+  background: var(--calendar-chip-selected);
+  color: var(--calendar-chip-selected-text);
+  border-color: var(--calendar-chip-selected);
 }
 
 .calendar-rsvp-chip-badge {
   min-width: 16px;
   padding: 1px 4px;
   border-radius: 999px;
-  background: #e8eefb;
-  color: #081a59;
+  background: var(--calendar-badge);
+  color: var(--calendar-badge-text);
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
@@ -116,7 +168,7 @@
 
 .calendar-empty-state {
   padding: 24px 16px;
-  color: #999;
+  color: var(--calendar-empty);
   font-size: 14px;
 }
 
@@ -133,8 +185,8 @@
 .calendar-day-header {
   position: sticky;
   top: var(--chip-row-height, 44px);
-  background: #f5f5f5;
-  color: #333;
+  background: var(--calendar-header);
+  color: var(--calendar-chip-text);
   font-size: 13px;
   font-weight: 600;
   padding: 8px 16px;
@@ -147,7 +199,7 @@
   gap: 8px;
   padding: 10px 16px;
   border-left: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--calendar-border);
 }
 
 .calendar-event-row {
@@ -156,28 +208,28 @@
   gap: 8px;
   padding: 10px 16px;
   border-left: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--calendar-border);
 }
 
 .calendar-event-allday {
-  background: #fdf6e3;
+  background: var(--calendar-allday);
   font-style: italic;
 }
 
 .calendar-event-row--rsvp-accepted {
-  --rsvp-bar: #2e7d32;
+  --rsvp-bar: var(--calendar-rsvp-accepted);
 }
 
 .calendar-event-row--rsvp-tentative {
-  --rsvp-bar: #d97706;
+  --rsvp-bar: var(--calendar-rsvp-tentative);
 }
 
 .calendar-event-row--rsvp-needsAction {
-  --rsvp-bar: #2563eb;
+  --rsvp-bar: var(--calendar-rsvp-needsAction);
 }
 
 .calendar-event-row--rsvp-declined {
-  --rsvp-bar: #dc2626;
+  --rsvp-bar: var(--calendar-rsvp-declined);
 }
 
 .calendar-event-header {
@@ -217,36 +269,36 @@
   border: none;
   border-radius: 4px;
   background: transparent;
-  color: #888;
+  color: var(--calendar-insert);
   cursor: pointer;
 }
 
 .calendar-event-insert-link:hover {
-  color: #222;
-  background: rgba(0, 0, 0, 0.06);
+  color: var(--calendar-insert-hover);
+  background: var(--calendar-insert-background);
 }
 
 .calendar-event-insert-link:focus-visible {
-  outline: 2px solid #1a73e8;
+  outline: 2px solid var(--calendar-focus);
   outline-offset: 1px;
-  color: #222;
+  color: var(--calendar-insert-hover);
 }
 
 .calendar-event-time {
   font-size: 12px;
-  color: #666;
+  color: var(--calendar-time);
   min-width: 110px;
   flex-shrink: 0;
 }
 
 .calendar-event-title {
   font-size: 14px;
-  color: #222;
+  color: var(--calendar-text);
 }
 
 .calendar-event-organizer {
   font-size: 12px;
-  color: #888;
+  color: var(--calendar-muted);
 }
 
 .calendar-event-calendar {
@@ -254,7 +306,7 @@
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: #888;
+  color: var(--calendar-muted);
 }
 
 .calendar-event-calendar-dot {
@@ -267,135 +319,153 @@
 .calendar-event-join {
   font-size: 12px;
   font-weight: 500;
-  color: #00a9ce;
+  color: var(--calendar-accent);
   cursor: pointer;
   text-decoration: none;
   padding: 4px 8px;
-  border: 1px solid #00a9ce;
+  border: 1px solid var(--calendar-accent);
   border-radius: 4px;
 }
 
 .calendar-event-join:hover {
-  background: #f0f8fb;
+  background: var(--calendar-hover);
 }
 
 .calendar-event-row--current,
 .calendar-event-row--selected {
-  background: #f0f8fb;
+  background: var(--calendar-highlight);
+}
+
+/* Explicit dark and system-dark use exactly the same palette. The media query
+   only assigns tokens on system roots, never on their descendants. */
+.calendar-pane[data-calendar-theme='dark'],
+.calendar-selector[data-calendar-theme='dark'] {
+  --calendar-scheme: dark;
+  --calendar-surface: #1a1a1a;
+  --calendar-text: #eee;
+  --calendar-border: #333;
+  --calendar-prompt: #ccc;
+  --calendar-accent: #22d0ef;
+  --calendar-hover: #2a2a2a;
+  --calendar-chip-text: #eee;
+  --calendar-chip-border: #444;
+  --calendar-chip-selected: #22d0ef;
+  --calendar-chip-selected-text: #081a59;
+  --calendar-badge: #081a59;
+  --calendar-badge-text: #e8eefb;
+  --calendar-header: #222;
+  --calendar-allday: #2a2510;
+  --calendar-highlight: #10262b;
+  --calendar-insert: #999;
+  --calendar-insert-hover: #eee;
+  --calendar-insert-background: rgba(255, 255, 255, 0.1);
+  --calendar-focus: #22d0ef;
+  --calendar-rsvp-accepted: #4ade80;
+  --calendar-rsvp-tentative: #fbbf24;
+  --calendar-rsvp-needsAction: #60a5fa;
+  --calendar-rsvp-declined: #f87171;
+  --calendar-selector-border: #333;
+  --calendar-selector-text: #eee;
+  --calendar-selector-shadow: 0 4px 14px rgb(0 0 0 / 50%);
+  --calendar-control-border: #444;
+  --calendar-control-background: #2a2a2a;
+  --calendar-input-background: #2a2a2a;
+  --calendar-control-text: #eee;
+  --calendar-control-width: 1px;
+  --calendar-button-border-style: solid;
+  --calendar-input-border-style: solid;
+  --calendar-option-hover: #2a2a2a;
+  --calendar-option-active: #10262b;
 }
 
 @media (prefers-color-scheme: dark) {
-  .calendar-pane-prompt p {
-    color: #ccc;
-  }
-
-  .calendar-connect-button {
-    background: #1a1a1a;
-    color: #22d0ef;
-    border-color: #22d0ef;
-  }
-
-  .calendar-connect-button:hover {
-    background: #2a2a2a;
-  }
-
-  .calendar-rsvp-chips {
-    background: #1a1a1a;
-  }
-
-  .calendar-pane-footer {
-    border-top-color: #333;
-    background: #1a1a1a;
-  }
-
-  .calendar-rsvp-chip {
-    color: #eee;
-    border-color: #444;
-  }
-
-  .calendar-scroll-today-btn {
-    border-right-color: #444;
-  }
-
-  .calendar-rsvp-chip.selected {
-    background: #22d0ef;
-    color: #081a59;
-    border-color: #22d0ef;
-  }
-
-  .calendar-rsvp-chip-badge {
-    background: #081a59;
-    color: #e8eefb;
-  }
-
-  .calendar-day-header {
-    background: #222;
-    color: #eee;
-  }
-
-  .calendar-event-allday {
-    border-bottom-color: #333;
-  }
-
-  .calendar-event-row {
-    border-bottom-color: #333;
-  }
-
-  .calendar-event-allday {
-    background: #2a2510;
-  }
-
-  .calendar-event-row--rsvp-accepted {
-    --rsvp-bar: #4ade80;
-  }
-
-  .calendar-event-row--rsvp-tentative {
-    --rsvp-bar: #fbbf24;
-  }
-
-  .calendar-event-row--rsvp-needsAction {
-    --rsvp-bar: #60a5fa;
-  }
-
-  .calendar-event-row--rsvp-declined {
-    --rsvp-bar: #f87171;
-  }
-
-  .calendar-event-title {
-    color: #eee;
+  .calendar-pane[data-calendar-theme='system'],
+  .calendar-selector[data-calendar-theme='system'] {
+    --calendar-scheme: dark;
+    --calendar-surface: #1a1a1a;
+    --calendar-text: #eee;
+    --calendar-border: #333;
+    --calendar-prompt: #ccc;
+    --calendar-accent: #22d0ef;
+    --calendar-hover: #2a2a2a;
+    --calendar-chip-text: #eee;
+    --calendar-chip-border: #444;
+    --calendar-chip-selected: #22d0ef;
+    --calendar-chip-selected-text: #081a59;
+    --calendar-badge: #081a59;
+    --calendar-badge-text: #e8eefb;
+    --calendar-header: #222;
+    --calendar-allday: #2a2510;
+    --calendar-highlight: #10262b;
+    --calendar-insert: #999;
+    --calendar-insert-hover: #eee;
+    --calendar-insert-background: rgba(255, 255, 255, 0.1);
+    --calendar-focus: #22d0ef;
+    --calendar-rsvp-accepted: #4ade80;
+    --calendar-rsvp-tentative: #fbbf24;
+    --calendar-rsvp-needsAction: #60a5fa;
+    --calendar-rsvp-declined: #f87171;
+    --calendar-selector-border: #333;
+    --calendar-selector-text: #eee;
+    --calendar-selector-shadow: 0 4px 14px rgb(0 0 0 / 50%);
+    --calendar-control-border: #444;
+    --calendar-control-background: #2a2a2a;
+    --calendar-input-background: #2a2a2a;
+    --calendar-control-text: #eee;
+    --calendar-control-width: 1px;
+    --calendar-button-border-style: solid;
+    --calendar-input-border-style: solid;
+    --calendar-option-hover: #2a2a2a;
+    --calendar-option-active: #10262b;
   }
+}
 
-  .calendar-event-join {
-    color: #22d0ef;
-    border-color: #22d0ef;
-  }
+.calendar-selector {
+  position: relative;
+}
 
-  .calendar-event-join:hover {
-    background: #2a2a2a;
-  }
+.calendar-selector-trigger {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  gap: 8px;
+  max-width: 100%;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid var(--calendar-control-border);
+  border-radius: 6px;
+  background: var(--calendar-surface);
+  color: var(--calendar-text);
+  font: inherit;
+  cursor: pointer;
+}
 
-  .calendar-event-row--current,
-  .calendar-event-row--selected {
-    background: #10262b;
-  }
+.calendar-selector-trigger:hover {
+  background: var(--calendar-hover);
+}
 
-  .calendar-event-insert-link {
-    color: #999;
-  }
+.calendar-selector-trigger:focus {
+  outline: none;
+}
 
-  .calendar-event-insert-link:hover {
-    color: #eee;
-    background: rgba(255, 255, 255, 0.1);
-  }
+.calendar-selector-trigger:focus-visible {
+  outline: 2px solid var(--calendar-focus);
+  outline-offset: 2px;
+}
 
-  .calendar-event-insert-link:focus-visible {
-    outline-color: #22d0ef;
-    color: #eee;
-  }
+.calendar-selector-trigger-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.calendar-selector {
-  position: relative;
+.calendar-selector-chevron {
+  flex: none;
+  width: 12px;
+  height: 12px;
 }
 
 .calendar-selector-dropdown {
@@ -405,11 +475,11 @@
   min-width: 220px;
   max-width: min(320px, calc(100vw - 32px));
   padding: 8px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--calendar-selector-border);
   border-radius: 6px;
-  background: #fff;
-  color: #1a1a1a;
-  box-shadow: 0 4px 14px rgb(0 0 0 / 15%);
+  background: var(--calendar-surface);
+  color: var(--calendar-selector-text);
+  box-shadow: var(--calendar-selector-shadow);
 }
 
 .calendar-selector-dropdown--upward {
@@ -420,13 +490,22 @@
 .calendar-selector-dropdown input[type='search'] {
   box-sizing: border-box;
   width: 100%;
+  border: var(--calendar-control-width) var(--calendar-input-border-style) var(--calendar-control-border);
+  background: var(--calendar-input-background);
+  color: var(--calendar-control-text);
+}
+
+.calendar-selector-dropdown button {
+  border: var(--calendar-control-width) var(--calendar-button-border-style) var(--calendar-control-border);
+  background: var(--calendar-control-background);
+  color: var(--calendar-control-text);
 }
 
 .calendar-selector-checkbox {
   flex: none;
   margin: 0;
   pointer-events: none;
-  accent-color: #22a6c0;
+  accent-color: var(--calendar-checkbox);
 }
 
 .calendar-selector-actions {
@@ -450,11 +529,16 @@
   padding: 6px;
   border: 0;
   background: transparent;
+  color: var(--calendar-control-text);
   text-align: left;
 }
 
+.calendar-selector-dropdown [role='option']:hover {
+  background: var(--calendar-option-hover);
+}
+
 .calendar-selector-dropdown [role='option'][data-active='true'] {
-  background: #e8f5f8;
+  background: var(--calendar-option-active);
 }
 
 .calendar-selector-dot {
@@ -471,41 +555,6 @@
   white-space: nowrap;
 }
 
-@media (prefers-color-scheme: dark) {
-  .calendar-selector-dropdown {
-    border-color: #333;
-    background: #1a1a1a;
-    color: #eee;
-    box-shadow: 0 4px 14px rgb(0 0 0 / 50%);
-  }
-
-  .calendar-selector-dropdown input[type='search'] {
-    border: 1px solid #444;
-    background: #2a2a2a;
-    color: #eee;
-  }
-
-  .calendar-selector-dropdown button {
-    border: 1px solid #444;
-    background: #2a2a2a;
-    color: #eee;
-  }
-
-  .calendar-selector-dropdown [role='option'] {
-    border: 0;
-    background: transparent;
-    color: #eee;
-  }
-
-  .calendar-selector-dropdown [role='option']:hover {
-    background: #2a2a2a;
-  }
-
-  .calendar-selector-dropdown [role='option'][data-active='true'] {
-    background: #10262b;
-  }
-}
-
 .calendar-event-source-dot {
   display: inline-block;
   width: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-webapp/calendar",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
   ],
   "scripts": {
     "build": "tsc && cp src/react/styles.css dist/styles.css",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:theme-browser": "vitest run --config vitest.browser.config.ts"
   },
   "peerDependencies": {
     "react": "^19",
@@ -37,8 +38,10 @@
     "@testing-library/user-event": "^14.6.8",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitest/browser": "2.1.9",
     "fake-indexeddb": "^6.0.0",
     "jsdom": "^30.0.1",
+    "playwright": "1.51.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.6.0",