@open-webapp/calendar 0.8.1 → 0.9.0

package/README.md

@@ -201,9 +201,11 @@ 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.
+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 and action-only styling exceptions are described here. 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.
 
@@ -223,6 +225,12 @@ The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark
 
 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.
 
+Done, Select all and Clear use the approved action-only flat styling via `.calendar-selector-actions > button` in standalone and grouped footer dropdowns: transparent resting background, zero border, no shadow, inherited font, `--calendar-selector-text` color and pointer cursor. Hover uses `--calendar-hover`; pointer focus has no decorative outline, while keyboard `:focus-visible` uses a 2px solid `--calendar-focus` outline with 2px offset. Action padding, row flex layout and 8px gap/top/bottom margins, footer/dropdown geometry, trigger/search/option styling, other native controls and all selection, callback and focus-return contracts are preserved.
+
+## 0.9.0 (BREAKING pre-1.0 minor)
+
+- User-approved replacement of the frozen native dropdown-action appearance: Done, Select all and Clear are flat and themed with hover and keyboard-focus treatment as described above. Hosts relying on the former native action appearance must adapt. Other visual, interaction, public API and storage contracts are preserved; no data migration is required.
+
 ## 0.8.0 (BREAKING pre-1.0 minor)
 
 - Unaccepted independently toggles `needsAction`, replacing the exclusive shortcut and local restoration introduced in 0.3.0. Hosts relying on pending-only callbacks or restoration must adapt to callbacks reflecting current membership.

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,
@@ -708,6 +729,28 @@
   color: var(--calendar-control-text);
 }
 
+.calendar-selector-actions > button {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--calendar-selector-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.calendar-selector-actions > button:hover {
+  background: var(--calendar-hover);
+}
+
+.calendar-selector-actions > button:focus {
+  outline: none;
+}
+
+.calendar-selector-actions > button:focus-visible {
+  outline: 2px solid var(--calendar-focus);
+  outline-offset: 2px;
+}
+
 .calendar-selector-checkbox {
   flex: none;
   margin: 0;

package/package.json

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