@open-webapp/calendar 0.5.0 → 0.6.0

package/README.md

@@ -180,6 +180,8 @@ 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), `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".
@@ -201,7 +203,7 @@ import '@open-webapp/calendar/styles.css';
 
 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 existing single-trigger layout and cross-account keyboard navigation are preserved. 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 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.
 
@@ -209,6 +211,8 @@ The exported standalone selector keeps its single-list props and behavior; Selec
 
 ### Host CSS
 
+Day ribbon styling: override `--calendar-today-accent` to recolour today's ribbon; `--calendar-day-header-height` tunes the sticky label offset.
+
 `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)
@@ -217,6 +221,19 @@ 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.6.0 (minor, additive-visual)
+
+- Each day has a thin vertical ribbon left of its events with a rotated `Mmm D` label; today's ribbon uses the new `--calendar-today-accent` token (defaults to the selected-chip colour in light and dark). The sticky day header is unchanged.
+- The RSVP status bar moved from the left edge to the right edge of event rows.
+- New helper `formatRibbonLabel`.
+
+## 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.

package/dist/core/events.d.ts

@@ -52,6 +52,8 @@ export interface DayGroup {
  * to), inserted in correct sorted position.
  */
 export declare function groupByDay(events: CalendarEvent[], todayIso?: string): DayGroup[];
+/** Short "Mmm D" label for the day ribbon: no year, no Today/Tomorrow. */
+export declare function formatRibbonLabel(dateKey: string): string;
 /**
  * "Today · Sept 26" / "Tomorrow · Sept 27" / else "Sept 28"-style.
  * Includes year only when the event's year differs from today's year.

package/dist/core/events.js

@@ -168,6 +168,10 @@ function formatMonthDay(dateKey, includeYear) {
     const base = `${monthName} ${day}`;
     return includeYear ? `${base}, ${year}` : base;
 }
+/** Short "Mmm D" label for the day ribbon: no year, no Today/Tomorrow. */
+export function formatRibbonLabel(dateKey) {
+    return formatMonthDay(dateKey, false);
+}
 function addDaysToIso(dateKey, days) {
     const { year, month, day } = parseIsoDateParts(dateKey);
     const d = new Date(Date.UTC(year, month - 1, day));

package/dist/react/CalendarPane.js

@@ -1,6 +1,6 @@
 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 { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, formatRibbonLabel, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
 import { GroupedCalendarSelector } from './CalendarSelector.js';
 function toggleRsvpStatus(selection, status) {
     const next = new Set(selection);
@@ -305,45 +305,45 @@ export function CalendarPane(props) {
                                             else {
                                                 dayHeaderRefs.current.delete(group.dateKey);
                                             }
-                                        }, children: formatDayHeader(group.dateKey, todayIso) }), group.events.map((event) => {
-                                        const eventKey = getCalendarEventKey(event);
-                                        const calendar = calendarsByKey.get(`${event.sourceId}\u0000${event.calendarId}`);
-                                        const showCalendarLabel = calendar && !calendar.primary;
-                                        const organizerLabel = getOrganizerLabel(event);
-                                        const showOrganizerLabel = multi
-                                            ? true
-                                            : organizerLabel && (!showCalendarLabel || organizerLabel !== calendar.summary);
-                                        const organizerText = multi
-                                            ? organizerLabel
-                                                ? `${organizerLabel} · ${sourceEmail(event.sourceId)}`
-                                                : sourceEmail(event.sourceId)
-                                            : organizerLabel;
-                                        const rsvpStatus = RSVP_CHIPS.some((chip) => chip.status === event.selfResponseStatus)
-                                            ? 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));
-                                        }
-                                        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) => {
-                                                if (el) {
-                                                    timedEventRefs.current.set(eventKey, el);
-                                                }
-                                                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) => {
-                                                                if (isDesktop &&
-                                                                    e.button === 0 &&
-                                                                    !e.ctrlKey &&
-                                                                    !e.metaKey &&
-                                                                    !e.shiftKey &&
-                                                                    !e.altKey) {
-                                                                    e.preventDefault();
-                                                                    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, { theme: theme, groups: calendarSources.map((s) => ({
+                                        }, children: formatDayHeader(group.dateKey, todayIso) }), group.events.length > 0 && (_jsxs("div", { className: "calendar-day-body", children: [_jsx("div", { className: "calendar-day-ribbon", "aria-hidden": "true", "data-today": group.dateKey === todayIso ? 'true' : undefined, children: _jsx("span", { className: "calendar-day-ribbon-label", children: formatRibbonLabel(group.dateKey) }) }), _jsx("div", { className: "calendar-day-events", children: group.events.map((event) => {
+                                                    const eventKey = getCalendarEventKey(event);
+                                                    const calendar = calendarsByKey.get(`${event.sourceId}\u0000${event.calendarId}`);
+                                                    const showCalendarLabel = calendar && !calendar.primary;
+                                                    const organizerLabel = getOrganizerLabel(event);
+                                                    const showOrganizerLabel = multi
+                                                        ? true
+                                                        : organizerLabel && (!showCalendarLabel || organizerLabel !== calendar.summary);
+                                                    const organizerText = multi
+                                                        ? organizerLabel
+                                                            ? `${organizerLabel} · ${sourceEmail(event.sourceId)}`
+                                                            : sourceEmail(event.sourceId)
+                                                        : organizerLabel;
+                                                    const rsvpStatus = RSVP_CHIPS.some((chip) => chip.status === event.selfResponseStatus)
+                                                        ? 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));
+                                                    }
+                                                    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) => {
+                                                            if (el) {
+                                                                timedEventRefs.current.set(eventKey, el);
+                                                            }
+                                                            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) => {
+                                                                            if (isDesktop &&
+                                                                                e.button === 0 &&
+                                                                                !e.ctrlKey &&
+                                                                                !e.metaKey &&
+                                                                                !e.shiftKey &&
+                                                                                !e.altKey) {
+                                                                                e.preventDefault();
+                                                                                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, { theme: theme, groups: calendarSources.map((s) => ({
                         id: s.id,
                         calendars: controller.getCalendars(s.id),
                         selectedIds: controller.getSelectedIds(s.id),

package/dist/react/CalendarSelector.js

@@ -1,4 +1,4 @@
-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, theme = 'system' }) {
@@ -90,11 +90,11 @@ export function GroupedCalendarSelector({ groups, theme = 'system' }) {
         ? 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", "data-calendar-theme": theme, 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

@@ -11,6 +11,7 @@
   --calendar-chip-text: #333;
   --calendar-chip-border: #ccc;
   --calendar-chip-selected: #081a59;
+  --calendar-today-accent: #081a59;
   --calendar-chip-selected-text: #ffffff;
   --calendar-badge: #e8eefb;
   --calendar-badge-text: #081a59;
@@ -193,12 +194,49 @@
   z-index: 1;
 }
 
+.calendar-day-body {
+  display: flex;
+}
+
+.calendar-day-events {
+  flex: 1;
+  min-width: 0;
+}
+
+.calendar-day-ribbon {
+  flex: 0 0 16px;
+  width: 16px;
+  min-height: 48px;
+  background: var(--calendar-header);
+  color: var(--calendar-chip-text);
+  user-select: none;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.calendar-day-ribbon[data-today='true'] {
+  background: var(--calendar-today-accent);
+  color: var(--calendar-chip-selected-text);
+}
+
+.calendar-day-ribbon-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  position: sticky;
+  top: calc(var(--chip-row-height, 44px) + var(--calendar-day-header-height, 33px));
+  white-space: nowrap;
+  padding: 6px 0;
+}
+
 .calendar-event-allday {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
-  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-right: 3px solid var(--rsvp-bar, transparent);
   border-bottom: 1px solid var(--calendar-border);
 }
 
@@ -207,7 +245,7 @@
   flex-direction: column;
   gap: 8px;
   padding: 10px 16px;
-  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-right: 3px solid var(--rsvp-bar, transparent);
   border-bottom: 1px solid var(--calendar-border);
 }
 
@@ -350,6 +388,7 @@
   --calendar-chip-text: #eee;
   --calendar-chip-border: #444;
   --calendar-chip-selected: #22d0ef;
+  --calendar-today-accent: #22d0ef;
   --calendar-chip-selected-text: #081a59;
   --calendar-badge: #081a59;
   --calendar-badge-text: #e8eefb;
@@ -391,6 +430,7 @@
     --calendar-chip-text: #eee;
     --calendar-chip-border: #444;
     --calendar-chip-selected: #22d0ef;
+  --calendar-today-accent: #22d0ef;
     --calendar-chip-selected-text: #081a59;
     --calendar-badge: #081a59;
     --calendar-badge-text: #e8eefb;
@@ -424,10 +464,48 @@
   position: relative;
 }
 
-.calendar-selector > [role='combobox'] {
-  color: var(--calendar-control-text);
-  background: var(--calendar-control-background);
-  border-color: var(--calendar-control-border);
+.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-selector-trigger:hover {
+  background: var(--calendar-hover);
+}
+
+.calendar-selector-trigger:focus {
+  outline: none;
+}
+
+.calendar-selector-trigger:focus-visible {
+  outline: 2px solid var(--calendar-focus);
+  outline-offset: 2px;
+}
+
+.calendar-selector-trigger-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-selector-chevron {
+  flex: none;
+  width: 12px;
+  height: 12px;
 }
 
 .calendar-selector-dropdown {

package/package.json

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