@open-webapp/calendar 0.6.1 → 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);
@@ -312,7 +317,7 @@ export function CalendarPane(props) {
                                             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("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) => {
+                                        }, 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,9 +218,12 @@
   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 {
@@ -395,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;
@@ -437,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.1",
+  "version": "0.7.0",
   "type": "module",
   "repository": {
     "type": "git",