@open-webapp/calendar 0.8.0 → 0.8.2

package/README.md

@@ -201,6 +201,8 @@ import '@open-webapp/calendar/styles.css';
 
 ### Theme behavior
 
+Timed meeting headers keep the time left and `[Join] [RSVP glyph]` right, with a 4px gap; title and organizer follow below. Join retains its text and fits it at an intrinsic width, matching the RSVP glyph's 24px outer height, 1px border, 4px radius and exact status foreground/background/border for accepted, tentative, needsAction and declined in every theme. Hover underlines Join; keyboard focus has a visible theme-colored outline. Without a meeting URL only the right-aligned RSVP glyph appears. The pair stays together when a narrow header wraps. Join keeps its original URL, new-tab attributes and click propagation 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 current 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.

package/dist/react/CalendarPane.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CalendarEvent, RsvpStatus, Source } from '../core/types.js';
 import type { CalendarController } from '../core/controller.js';
 export type RsvpSelection = Set<RsvpStatus>;
@@ -21,4 +21,4 @@ export interface CalendarPaneProps {
     /** Window name used for the event popup. */
     popupName?: string;
 }
-export declare function CalendarPane(props: CalendarPaneProps): JSX.Element;
+export declare function CalendarPane(props: CalendarPaneProps): import("react").JSX.Element;

package/dist/react/CalendarPane.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, formatRibbonLabel, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
 import { GroupedCalendarSelector } from './CalendarSelector.js';
@@ -26,24 +26,31 @@ const RSVP_CHIPS = [
     {
         status: 'accepted',
         label: 'Accepted',
-        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3 7.7L6 10.7L12 4.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+        path: 'M5 13l4 4L19 7',
     },
     {
         status: 'tentative',
         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" })] })),
+        path: 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
     },
     {
         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" }) })),
+        path: 'M6 18L18 6M6 6l12 12',
     },
     {
         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" }) })),
+        path: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
     },
 ];
+function RsvpGlyph({ path, size = 16, strokeWidth = 2.2 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: path, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function RsvpStatusIcon({ status }) {
+    const glyph = RSVP_CHIPS.find((chip) => chip.status === status) ?? RSVP_CHIPS[3];
+    return (_jsx("span", { className: `calendar-event-rsvp calendar-event-rsvp--${glyph.status}`, role: "img", "aria-label": glyph.status, title: glyph.status, children: _jsx(RsvpGlyph, { path: glyph.path, size: 14, strokeWidth: 2.4 }) }));
+}
 const DEFAULT_POPUP_NAME = 'notesdiary-cal-event';
 const POPUP_W = 560;
 const POPUP_H = 760;
@@ -316,7 +323,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", "data-calendar-theme": theme, ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", ref: scrollRef, 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${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, title: chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, onClick: () => 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", ref: scrollRef, children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("div", { className: "calendar-rsvp-chip-group", role: "group", "aria-label": "RSVP Status Filters", children: RSVP_CHIPS.map((chip) => (_jsxs("button", { type: "button", className: `calendar-rsvp-chip${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, title: chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, onClick: () => handleToggle(chip.status), children: [_jsx(RsvpGlyph, { path: chip.path }), chip.status === 'needsAction' && unacceptedCount > 0 && (_jsx("span", { className: "calendar-rsvp-chip-badge", "aria-hidden": "true", children: unacceptedCount > 99 ? '99+' : unacceptedCount }))] }, chip.status))) }), _jsx("button", { type: "button", className: "calendar-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: "Today" })] }), 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);
                                             }
@@ -340,7 +347,7 @@ export function CalendarPane(props) {
                                                         ? event.selfResponseStatus
                                                         : 'needsAction';
                                                     if (event.isAllDay) {
-                                                        return (_jsxs("div", { className: `calendar-event-allday calendar-event-row--rsvp-${rsvpStatus}`, children: [_jsxs("span", { className: "calendar-event-title-wrap", children: [_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));
+                                                        return (_jsxs("div", { className: `calendar-event-allday calendar-event-row--rsvp-${rsvpStatus}`, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: "All day" }), _jsx(RsvpStatusIcon, { status: event.selfResponseStatus })] }), _jsxs("span", { className: "calendar-event-title-wrap", children: [_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));
                                                     }
                                                     const hasLink = usableUrl(event.htmlLink) !== null;
                                                     return (_jsxs("div", { className: `calendar-event-row${currentEventKeys.has(eventKey) ? ' calendar-event-row--current' : ''}${selectedEventKey === eventKey ? ' calendar-event-row--selected' : ''} calendar-event-row--rsvp-${rsvpStatus}`, ref: (el) => {
@@ -350,7 +357,7 @@ export function CalendarPane(props) {
                                                             else {
                                                                 timedEventRefs.current.delete(eventKey);
                                                             }
-                                                        }, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: formatTimeRange(event) }), event.joinUrl && (_jsx("a", { className: "calendar-event-join", href: event.joinUrl, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: "Join" }))] }), _jsxs("div", { className: "calendar-event-title-wrap", children: [hasLink ? (_jsx("a", { className: "calendar-event-title-link", href: event.htmlLink, target: "_blank", rel: "noopener noreferrer", onClick: (e) => {
+                                                        }, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: formatTimeRange(event) }), _jsxs("div", { className: "calendar-event-actions", children: [event.joinUrl && (_jsx("a", { className: "calendar-event-join", href: event.joinUrl, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: "Join" })), _jsx(RsvpStatusIcon, { status: event.selfResponseStatus })] })] }), _jsxs("div", { className: "calendar-event-title-wrap", children: [hasLink ? (_jsx("a", { className: "calendar-event-title-link", href: event.htmlLink, target: "_blank", rel: "noopener noreferrer", onClick: (e) => {
                                                                             if (isDesktop &&
                                                                                 e.button === 0 &&
                                                                                 !e.ctrlKey &&

package/dist/styles.css

@@ -44,6 +44,39 @@
   --calendar-empty: #999;
   --calendar-chip-hover: #00a9ce;
   --calendar-checkbox: #22a6c0;
+  --calendar-chip-group-background: #f1f5f9;
+  --calendar-chip-group-border: rgb(226 232 240 / 80%);
+  --calendar-chip-active-background: #ffffff;
+  --calendar-chip-selected-ring: rgb(99 102 241 / 40%);
+  --calendar-chip-icon-accepted: #10b981;
+  --calendar-chip-icon-tentative: #f59e0b;
+  --calendar-chip-icon-declined: #f43f5e;
+  --calendar-chip-icon-needsAction: #0ea5e9;
+  --calendar-chip-badge-background: #0ea5e9;
+  --calendar-chip-badge-text: #ffffff;
+  --calendar-chip-badge-border: #ffffff;
+  --calendar-today-background: #f1f5f9;
+  --calendar-today-hover: #e2e8f0;
+  --calendar-today-text: #334155;
+  --calendar-card-background: #f8fafc;
+  --calendar-card-border: #e2e8f0;
+  --calendar-card-title: #0f172a;
+  --calendar-card-time: #64748b;
+  --calendar-card-active-background: #eef2ff;
+  --calendar-card-active-border: #a5b4fc;
+  --calendar-card-active-ring: rgb(99 102 241 / 20%);
+  --calendar-status-accepted-text: #059669;
+  --calendar-status-accepted-background: #ecfdf5;
+  --calendar-status-accepted-border: #a7f3d0;
+  --calendar-status-tentative-text: #f59e0b;
+  --calendar-status-tentative-background: #fffbeb;
+  --calendar-status-tentative-border: #fde68a;
+  --calendar-status-declined-text: #f43f5e;
+  --calendar-status-declined-background: #fff1f2;
+  --calendar-status-declined-border: #fecdd3;
+  --calendar-status-needsAction-text: #0ea5e9;
+  --calendar-status-needsAction-background: #f0f9ff;
+  --calendar-status-needsAction-border: #bae6fd;
   color-scheme: var(--calendar-scheme);
   color: var(--calendar-text);
 }
@@ -112,6 +145,9 @@
 
 .calendar-rsvp-chips {
   display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 64px;
   gap: 8px;
   padding: 12px 16px;
   flex-wrap: wrap;
@@ -121,51 +157,101 @@
   z-index: 2;
 }
 
+.calendar-rsvp-chip-group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--calendar-chip-group-border);
+  border-radius: 12px;
+  background: var(--calendar-chip-group-background);
+}
+
 .calendar-rsvp-chip {
-  width: auto;
-  min-width: 32px;
-  height: 32px;
+  position: relative;
   box-sizing: border-box;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 0 8px;
+  padding: 6px;
   background: transparent;
-  color: var(--calendar-chip-text);
-  border: 1px solid var(--calendar-chip-border);
-  border-radius: 999px;
+  border: 0;
+  border-radius: 8px;
   cursor: pointer;
 }
 
-.calendar-scroll-today-btn {
-  margin-right: 4px;
-  padding-right: 4px;
-  border-right: 1px solid var(--calendar-chip-border);
+.calendar-rsvp-chip svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2.2;
+}
+
+.calendar-rsvp-chip[aria-label='Accepted'] {
+  color: var(--calendar-chip-icon-accepted);
+}
+
+.calendar-rsvp-chip[aria-label='Maybe'] {
+  color: var(--calendar-chip-icon-tentative);
+}
+
+.calendar-rsvp-chip[aria-label='Declined'] {
+  color: var(--calendar-chip-icon-declined);
+}
+
+.calendar-rsvp-chip[aria-label^='Unaccepted'] {
+  color: var(--calendar-chip-icon-needsAction);
 }
 
 .calendar-rsvp-chip:hover {
-  border-color: var(--calendar-chip-hover);
+  background: var(--calendar-chip-active-background);
 }
 
-.calendar-rsvp-chip.selected {
-  background: var(--calendar-chip-selected);
-  color: var(--calendar-chip-selected-text);
-  border-color: var(--calendar-chip-selected);
+.calendar-rsvp-chip-group .calendar-rsvp-chip.selected {
+  background: var(--calendar-chip-active-background);
+  box-shadow: 0 0 0 1px var(--calendar-chip-selected-ring);
 }
 
 .calendar-rsvp-chip-badge {
-  min-width: 16px;
-  padding: 1px 4px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 2px;
   border-radius: 999px;
-  background: var(--calendar-badge);
-  color: var(--calendar-badge-text);
+  border: 1px solid var(--calendar-chip-badge-border);
+  background: var(--calendar-chip-badge-background);
+  color: var(--calendar-chip-badge-text);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.calendar-today-btn {
+  margin-left: auto;
+  flex-shrink: 0;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--calendar-today-background);
+  color: var(--calendar-today-text);
+  font-family: inherit;
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
-  text-align: center;
-  white-space: nowrap;
+  cursor: pointer;
+}
+
+.calendar-today-btn:hover {
+  background: var(--calendar-today-hover);
 }
 
 .calendar-empty-state {
@@ -202,6 +288,10 @@
 .calendar-day-events {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
 }
 
 .calendar-day-ribbon {
@@ -242,52 +332,76 @@
   padding: 6px 0;
 }
 
-.calendar-event-allday {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-right: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid var(--calendar-border);
-}
-
+.calendar-event-allday,
 .calendar-event-row {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px 16px;
-  border-right: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid var(--calendar-border);
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--calendar-card-border);
+  border-radius: 12px;
+  background: var(--calendar-card-background);
 }
 
-.calendar-event-allday {
-  background: var(--calendar-allday);
-  font-style: italic;
+.calendar-event-join,
+.calendar-event-rsvp {
+  display: inline-flex;
+  flex: none;
+  padding: 4px;
+  border: 1px solid var(--status-border);
+  border-radius: 4px;
+  background: var(--status-background);
+  color: var(--status-text);
+}
+
+.calendar-event-rsvp {
+  margin-left: auto;
 }
 
-.calendar-event-row--rsvp-accepted {
-  --rsvp-bar: var(--calendar-rsvp-accepted);
+.calendar-event-row--rsvp-accepted,
+.calendar-event-rsvp--accepted {
+  --status-text: var(--calendar-status-accepted-text);
+  --status-background: var(--calendar-status-accepted-background);
+  --status-border: var(--calendar-status-accepted-border);
 }
 
-.calendar-event-row--rsvp-tentative {
-  --rsvp-bar: var(--calendar-rsvp-tentative);
+.calendar-event-row--rsvp-tentative,
+.calendar-event-rsvp--tentative {
+  --status-text: var(--calendar-status-tentative-text);
+  --status-background: var(--calendar-status-tentative-background);
+  --status-border: var(--calendar-status-tentative-border);
 }
 
-.calendar-event-row--rsvp-needsAction {
-  --rsvp-bar: var(--calendar-rsvp-needsAction);
+.calendar-event-row--rsvp-needsAction,
+.calendar-event-rsvp--needsAction {
+  --status-text: var(--calendar-status-needsAction-text);
+  --status-background: var(--calendar-status-needsAction-background);
+  --status-border: var(--calendar-status-needsAction-border);
 }
 
-.calendar-event-row--rsvp-declined {
-  --rsvp-bar: var(--calendar-rsvp-declined);
+.calendar-event-row--rsvp-declined,
+.calendar-event-rsvp--declined {
+  --status-text: var(--calendar-status-declined-text);
+  --status-background: var(--calendar-status-declined-background);
+  --status-border: var(--calendar-status-declined-border);
 }
 
 .calendar-event-header {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
 }
 
+.calendar-event-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
 .calendar-event-title-link {
   align-self: flex-start;
   text-decoration: none;
@@ -334,15 +448,18 @@
 }
 
 .calendar-event-time {
-  font-size: 12px;
-  color: var(--calendar-time);
-  min-width: 110px;
-  flex-shrink: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--calendar-card-time);
+  min-width: 0;
 }
 
 .calendar-event-title {
-  font-size: 14px;
-  color: var(--calendar-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--calendar-card-title);
 }
 
 .calendar-event-organizer {
@@ -368,21 +485,27 @@
 .calendar-event-join {
   font-size: 12px;
   font-weight: 500;
-  color: var(--calendar-accent);
+  line-height: 14px;
   cursor: pointer;
   text-decoration: none;
   padding: 4px 8px;
-  border: 1px solid var(--calendar-accent);
-  border-radius: 4px;
+  white-space: nowrap;
 }
 
 .calendar-event-join:hover {
-  background: var(--calendar-hover);
+  text-decoration: underline;
+}
+
+.calendar-event-join:focus-visible {
+  outline: 2px solid var(--calendar-focus);
+  outline-offset: 2px;
 }
 
 .calendar-event-row--current,
 .calendar-event-row--selected {
-  background: var(--calendar-highlight);
+  border-color: var(--calendar-card-active-border);
+  box-shadow: 0 0 0 1px var(--calendar-card-active-ring);
+  background: var(--calendar-card-active-background);
 }
 
 /* Explicit dark and system-dark use exactly the same palette. The media query
@@ -427,6 +550,32 @@
   --calendar-input-border-style: solid;
   --calendar-option-hover: #2a2a2a;
   --calendar-option-active: #10262b;
+  --calendar-chip-group-background: rgb(30 41 59 / 90%);
+  --calendar-chip-group-border: rgb(51 65 85 / 60%);
+  --calendar-chip-active-background: #334155;
+  --calendar-chip-badge-border: #1e293b;
+  --calendar-today-background: #1e293b;
+  --calendar-today-hover: #334155;
+  --calendar-today-text: #e2e8f0;
+  --calendar-card-background: rgb(30 41 59 / 80%);
+  --calendar-card-border: #334155;
+  --calendar-card-title: #ffffff;
+  --calendar-card-time: #94a3b8;
+  --calendar-card-active-background: rgb(30 27 75 / 80%);
+  --calendar-card-active-border: #3730a3;
+  --calendar-card-active-ring: rgb(129 140 248 / 30%);
+  --calendar-status-accepted-text: #34d399;
+  --calendar-status-accepted-background: rgb(2 44 34 / 80%);
+  --calendar-status-accepted-border: #065f46;
+  --calendar-status-tentative-text: #fbbf24;
+  --calendar-status-tentative-background: rgb(69 26 3 / 80%);
+  --calendar-status-tentative-border: #92400e;
+  --calendar-status-declined-text: #fb7185;
+  --calendar-status-declined-background: rgb(76 5 25 / 80%);
+  --calendar-status-declined-border: #9f1239;
+  --calendar-status-needsAction-text: #38bdf8;
+  --calendar-status-needsAction-background: rgb(8 47 73 / 80%);
+  --calendar-status-needsAction-border: #075985;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -470,6 +619,32 @@
     --calendar-input-border-style: solid;
     --calendar-option-hover: #2a2a2a;
     --calendar-option-active: #10262b;
+    --calendar-chip-group-background: rgb(30 41 59 / 90%);
+    --calendar-chip-group-border: rgb(51 65 85 / 60%);
+    --calendar-chip-active-background: #334155;
+    --calendar-chip-badge-border: #1e293b;
+    --calendar-today-background: #1e293b;
+    --calendar-today-hover: #334155;
+    --calendar-today-text: #e2e8f0;
+    --calendar-card-background: rgb(30 41 59 / 80%);
+    --calendar-card-border: #334155;
+    --calendar-card-title: #ffffff;
+    --calendar-card-time: #94a3b8;
+    --calendar-card-active-background: rgb(30 27 75 / 80%);
+    --calendar-card-active-border: #3730a3;
+    --calendar-card-active-ring: rgb(129 140 248 / 30%);
+    --calendar-status-accepted-text: #34d399;
+    --calendar-status-accepted-background: rgb(2 44 34 / 80%);
+    --calendar-status-accepted-border: #065f46;
+    --calendar-status-tentative-text: #fbbf24;
+    --calendar-status-tentative-background: rgb(69 26 3 / 80%);
+    --calendar-status-tentative-border: #92400e;
+    --calendar-status-declined-text: #fb7185;
+    --calendar-status-declined-background: rgb(76 5 25 / 80%);
+    --calendar-status-declined-border: #9f1239;
+    --calendar-status-needsAction-text: #38bdf8;
+    --calendar-status-needsAction-background: rgb(8 47 73 / 80%);
+    --calendar-status-needsAction-border: #075985;
   }
 }
 

package/package.json

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