@open-webapp/calendar 0.8.1 → 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.js

@@ -357,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" })), _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) => {
+                                                        }, 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

@@ -343,10 +343,10 @@
   background: var(--calendar-card-background);
 }
 
+.calendar-event-join,
 .calendar-event-rsvp {
   display: inline-flex;
   flex: none;
-  margin-left: auto;
   padding: 4px;
   border: 1px solid var(--status-border);
   border-radius: 4px;
@@ -354,24 +354,32 @@
   color: var(--status-text);
 }
 
+.calendar-event-rsvp {
+  margin-left: auto;
+}
+
+.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,
 .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,
 .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,
 .calendar-event-rsvp--declined {
   --status-text: var(--calendar-status-declined-text);
   --status-background: var(--calendar-status-declined-background);
@@ -380,11 +388,20 @@
 
 .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;
@@ -468,16 +485,20 @@
 .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,

package/package.json

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