@open-webapp/calendar 0.6.0 → 0.7.0

package/README.md

@@ -211,7 +211,7 @@ 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.
+Day ribbon styling: each day's ribbon alternates between two tones by day parity (`data-parity="even|odd"`), set with `--calendar-day-ribbon-a` and `--calendar-day-ribbon-b`. Parity is stable across scroll, filtering and month boundaries, and the ribbon does not mark today. `--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:
 
@@ -223,9 +223,15 @@ 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.
 
+## 0.7.0 (minor, breaking-visual)
+
+- Day ribbons alternate between two tones by day parity (`data-parity="even|odd"`, days since 1970 of the date key mod 2) instead of highlighting today. Parity is stable across scroll, filter and month boundaries.
+- "Today" is now the browser's local date (previously UTC, which could be off by a day for users away from UTC). Sticky day header text ("Today · Oct 26") is unchanged.
+- Migration: `--calendar-today-accent` was removed in 0.7.0; use `--calendar-day-ribbon-a` / `--calendar-day-ribbon-b`. The ribbon no longer marks today (`data-today` is now `data-parity`).
+
 ## 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.
+- Each day has a thin vertical ribbon left of its events with a rotated `Mmm D` label; ribbons alternate tones by day parity (see 0.7.0). 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`.
 

package/dist/core/events.js

@@ -39,9 +39,6 @@ export function getRollingWindow(now) {
     const end = new Date(now.getTime() + 30 * MS_PER_DAY);
     return { start: start.toISOString(), end: end.toISOString() };
 }
-function toIsoDate(d) {
-    return d.toISOString().slice(0, 10);
-}
 /**
  * Returns events whose `selfResponseStatus` is a member of `selected` —
  * declined is a normal, independently-selectable status now, not hard-excluded.
@@ -176,7 +173,8 @@ function addDaysToIso(dateKey, days) {
     const { year, month, day } = parseIsoDateParts(dateKey);
     const d = new Date(Date.UTC(year, month - 1, day));
     d.setUTCDate(d.getUTCDate() + days);
-    return toIsoDate(d);
+    // d is built from pure UTC parts (not "now"), so the UTC date is the right one.
+    return d.toISOString().slice(0, 10);
 }
 /**
  * "Today · Sept 26" / "Tomorrow · Sept 27" / else "Sept 28"-style.

package/dist/react/CalendarPane.js

@@ -76,7 +76,12 @@ function openEventPopup(url, popupRef, popupName) {
     popup.focus();
 }
 function toIsoDate(d) {
-    return d.toISOString().slice(0, 10);
+    const p = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+function dayParity(dateKey) {
+    const [y, m, d] = dateKey.split('-').map(Number);
+    return Math.floor(Date.UTC(y, m - 1, d) / 86400000) % 2 === 0 ? 'even' : 'odd';
 }
 function formatTimeOfDay(dateTime) {
     const d = new Date(dateTime);
@@ -130,6 +135,7 @@ export function CalendarPane(props) {
     const hasScrolledForEventsRef = useRef(false);
     const paneRef = useRef(null);
     const chipsRef = useRef(null);
+    const scrollRef = useRef(null);
     const popupRef = useRef(null);
     const [now, setNow] = useState(() => new Date());
     const [savedSelection, setSavedSelection] = useState(null);
@@ -274,15 +280,21 @@ export function CalendarPane(props) {
         if (!chipsEl || !paneEl)
             return;
         const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry)
-                return;
-            // contentRect excludes padding; the sticky day-header offset needs the
-            // chip row's full border-box height (chips have vertical padding).
-            const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
-            paneEl.style.setProperty('--chip-row-height', `${height}px`);
+            for (const entry of entries) {
+                if (entry.target === scrollRef.current) {
+                    // The day ribbon centers its label in the visible scroll area, so it needs that height.
+                    paneEl.style.setProperty('--calendar-scroll-height', `${entry.target.getBoundingClientRect().height}px`);
+                    continue;
+                }
+                // contentRect excludes padding; the sticky day-header offset needs the
+                // chip row's full border-box height (chips have vertical padding).
+                const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+                paneEl.style.setProperty('--chip-row-height', `${height}px`);
+            }
         });
         observer.observe(chipsEl);
+        if (scrollRef.current)
+            observer.observe(scrollRef.current);
         return () => observer.disconnect();
     }, [connected, needsReauth]);
     if (!connected) {
@@ -298,14 +310,14 @@ 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", 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", 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${(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);
                                             }
                                             else {
                                                 dayHeaderRefs.current.delete(group.dateKey);
                                             }
-                                        }, 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) => {
+                                        }, 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-parity": dayParity(group.dateKey), children: _jsx("div", { className: "calendar-day-ribbon-window", 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;

package/dist/styles.css

@@ -11,7 +11,8 @@
   --calendar-chip-text: #333;
   --calendar-chip-border: #ccc;
   --calendar-chip-selected: #081a59;
-  --calendar-today-accent: #081a59;
+  --calendar-day-ribbon-a: #e4e8ef;
+  --calendar-day-ribbon-b: #c8d6f0;
   --calendar-chip-selected-text: #ffffff;
   --calendar-badge: #e8eefb;
   --calendar-badge-text: #081a59;
@@ -217,16 +218,26 @@
   align-items: flex-start;
 }
 
-.calendar-day-ribbon[data-today='true'] {
-  background: var(--calendar-today-accent);
-  color: var(--calendar-chip-selected-text);
+.calendar-day-ribbon[data-parity='even'] {
+  background: var(--calendar-day-ribbon-a);
+}
+
+.calendar-day-ribbon[data-parity='odd'] {
+  background: var(--calendar-day-ribbon-b);
+}
+
+.calendar-day-ribbon-window {
+  position: sticky;
+  top: calc(var(--chip-row-height, 44px) + var(--calendar-day-header-height, 33px));
+  /* Visible part of the ribbon: as tall as the scroll area below the sticky headers, capped at the ribbon. */
+  height: min(100%, calc(var(--calendar-scroll-height, 100vh) - var(--chip-row-height, 44px) - var(--calendar-day-header-height, 33px)));
+  display: flex;
+  align-items: center;
 }
 
 .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;
 }
@@ -388,7 +399,8 @@
   --calendar-chip-text: #eee;
   --calendar-chip-border: #444;
   --calendar-chip-selected: #22d0ef;
-  --calendar-today-accent: #22d0ef;
+  --calendar-day-ribbon-a: #2b3342;
+  --calendar-day-ribbon-b: #1c3a5e;
   --calendar-chip-selected-text: #081a59;
   --calendar-badge: #081a59;
   --calendar-badge-text: #e8eefb;
@@ -430,7 +442,8 @@
     --calendar-chip-text: #eee;
     --calendar-chip-border: #444;
     --calendar-chip-selected: #22d0ef;
-  --calendar-today-accent: #22d0ef;
+    --calendar-day-ribbon-a: #2b3342;
+    --calendar-day-ribbon-b: #1c3a5e;
     --calendar-chip-selected-text: #081a59;
     --calendar-badge: #081a59;
     --calendar-badge-text: #e8eefb;

package/package.json

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