@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/features/scheduler/shared/scheduler-event-popover.js

@@ -1,5 +1,5 @@
 import { html, nothing } from "lit";
-import { GUEST_STATUS_ICON, isMultiDay, PRIORITY_SEMANTIC_STATE, } from "./scheduler.utils.js";
+import { GUEST_STATUS_ICON, isMultiDay, PRIORITY_SEMANTIC_STATE, resolveEventColor, } from "./scheduler.utils.js";
 /**
  * Renders the read-only event detail popover (consultation mode) : the
  * default result of clicking an event chip — full details (title,
@@ -7,7 +7,9 @@ import { GUEST_STATUS_ICON, isMultiDay, PRIORITY_SEMANTIC_STATE, } from "./sched
  * shared guests, each with a status icon — check/hourglass/cross for
  * confirmed/pending/declined), plus
  * Edit/Delete actions to actually enter the editor and a close (✕) button
- * to dismiss it without acting on the event at all. Deliberately not
+ * to dismiss it without acting on the event at all. Delete asks for a
+ * confirmation in place first, swapping the actions for a question and a
+ * Cancel/Delete pair. Deliberately not
  * `eun-tooltip` : that component is non-interactive (`role="tooltip"`,
  * closes on blur) by ARIA convention, the wrong fit for a panel that needs
  * to hold focusable buttons — this is a small popover instead, positioned
@@ -19,11 +21,11 @@ import { GUEST_STATUS_ICON, isMultiDay, PRIORITY_SEMANTIC_STATE, } from "./sched
  * @returns the rendered template.
  */
 export function renderEventPopover(props) {
-    const { event, locale, editLabel, deleteLabel, closeLabel, priorityLabels, readonly, onEdit, onDelete, onClose, } = props;
+    const { event, locale, closeLabel, allDayLabel, priorityLabels, onClose } = props;
     return html `
     <div
       class="event-popover-bar"
-      style="--_accent: var(--eun-color-${event.color}-600);"
+      style=${`--_accent: ${resolveEventColor(event.color)?.accent ?? "var(--eun-color-blue-600)"};`}
     ></div>
     <eun-button
       id="event-popover-close"
@@ -39,7 +41,7 @@ export function renderEventPopover(props) {
       <h3 class="event-popover-title">${event.title}</h3>
       <div class="event-popover-row">
         <eun-icon name="schedule" size="16"></eun-icon>
-        <span>${formatEventPopoverDate(event, locale)}</span>
+        <span>${formatEventPopoverDate(event, allDayLabel, locale)}</span>
       </div>
       ${event.location
         ? html `
@@ -99,54 +101,87 @@ export function renderEventPopover(props) {
           `
         : nothing}
     </div>
-    ${readonly
-        ? nothing
-        : html `
-          <div class="event-popover-actions">
-            <eun-button
-              color="critical"
-              size="s"
-              appearance="outline"
-              rounded
-              @click=${onDelete}
-              >${deleteLabel}</eun-button
-            >
-            <eun-button color="primary" size="s" rounded @click=${onEdit}
-              >${editLabel}</eun-button
-            >
-          </div>
-        `}
+    ${renderEventPopoverActions(props)}
+  `;
+}
+/**
+ * Renders the popover's Delete/Edit actions, or the delete confirmation
+ * that replaces them once Delete was pressed. Nothing in readonly mode.
+ * @private
+ */
+function renderEventPopoverActions(props) {
+    if (props.readonly) {
+        return nothing;
+    }
+    if (props.confirmingDelete) {
+        return html `
+      <div
+        class="event-popover-actions event-popover-confirm"
+        role="group"
+        aria-labelledby="event-popover-confirm-text"
+      >
+        <span id="event-popover-confirm-text">${props.deleteConfirmLabel}</span>
+        <eun-button
+          id="event-popover-confirm-cancel"
+          appearance="ghost"
+          rounded
+          @click=${props.onCancelDelete}
+          >${props.cancelLabel}</eun-button
+        >
+        <eun-button
+          id="event-popover-confirm-delete"
+          color="critical"
+          rounded
+          @click=${props.onConfirmDelete}
+          >${props.deleteLabel}</eun-button
+        >
+      </div>
+    `;
+    }
+    return html `
+    <div class="event-popover-actions">
+      <eun-button
+        id="event-popover-delete"
+        color="critical"
+        appearance="outline"
+        rounded
+        @click=${props.onDelete}
+        >${props.deleteLabel}</eun-button
+      >
+      <eun-button color="primary" rounded @click=${props.onEdit}
+        >${props.editLabel}</eun-button
+      >
+    </div>
   `;
 }
 /**
  * Formats an event's date/time for the popover's detail line : an
- * `"All day · "`-prefixed date (or date range, if it spans multiple days)
- * for an {@link EunomiaSchedulerEvent.allDay} event, a plain date range for
- * a multi-day *timed* one (no prefix — {@link isMultiDay} is also true
- * here, but nothing in `event` itself claims "all day"), or a full date +
- * start–end time range otherwise.
+ * `allDayLabel`-prefixed date (or date range, if it spans multiple days)
+ * for an {@link EunomiaSchedulerEvent.allDay} event, each end's own date
+ * and time for a multi-day *timed* one, or a full date + start–end time
+ * range otherwise.
  * @private
  */
-function formatEventPopoverDate(event, locale) {
+function formatEventPopoverDate(event, allDayLabel, locale) {
     const dateOptions = {
         weekday: "long",
         day: "numeric",
         month: "long",
     };
-    if (isMultiDay(event)) {
-        const startLabel = event.start.toLocaleDateString(locale, dateOptions);
-        const endLabel = event.end.toLocaleDateString(locale, dateOptions);
-        const range = startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;
-        return event.allDay ? `All day · ${range}` : range;
-    }
-    const dayLabel = event.start.toLocaleDateString(locale, dateOptions);
-    const startTime = event.start.toLocaleTimeString(locale, {
-        hour: "numeric",
-        minute: "2-digit",
-    });
-    const endTime = event.end.toLocaleTimeString(locale, {
+    const timeOptions = {
         hour: "numeric",
         minute: "2-digit",
-    });
-    return `${dayLabel} · ${startTime} – ${endTime}`;
+    };
+    const startDate = event.start.toLocaleDateString(locale, dateOptions);
+    const endDate = event.end.toLocaleDateString(locale, dateOptions);
+    if (event.allDay) {
+        const range = startDate === endDate ? startDate : `${startDate} – ${endDate}`;
+        return `${allDayLabel} · ${range}`;
+    }
+    const startTime = event.start.toLocaleTimeString(locale, timeOptions);
+    const endTime = event.end.toLocaleTimeString(locale, timeOptions);
+    if (isMultiDay(event)) {
+        return `${startDate} · ${startTime} – ${endDate} · ${endTime}`;
+    }
+    return `${startDate} · ${startTime} – ${endTime}`;
 }

package/dist/features/scheduler/shared/scheduler-event-popover.styles.js

@@ -83,13 +83,13 @@ const base = css `
     align-items: flex-start;
     gap: var(--eun-space-s, 8px);
     font-size: 13px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .event-popover-row eun-icon {
     flex: 0 0 auto;
     margin-top: 1px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .event-popover-guests {
@@ -110,7 +110,7 @@ const base = css `
   .event-popover-guest eun-icon {
     flex: 0 0 auto;
     margin-top: 0;
-    color: var(--_guestStatusColor, var(--eun-text-secondary, #484e61));
+    color: var(--_guestStatusColor, var(--eun-text-secondary, #666e8a));
   }
 
   .event-popover-guest[data-status="confirmed"] {
@@ -129,5 +129,16 @@ const base = css `
     gap: var(--eun-space-s, 8px);
     padding: 0 var(--eun-space-m, 16px) var(--eun-space-m, 16px);
   }
+
+  .event-popover-confirm {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  #event-popover-confirm-text {
+    flex: 1 1 100%;
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: 600;
+  }
 `;
 export const schedulerEventPopoverStyles = base;

package/dist/features/scheduler/shared/scheduler-hour-grid.d.ts

@@ -16,11 +16,12 @@ export interface HourGridProps {
     onSlotClick: (start: Date) => void;
     onEventClick: (event: EunomiaSchedulerEvent, domEvent: MouseEvent) => void;
     draggingEventId?: string | null;
+    hideDayHeader?: boolean;
     onEventDragStart?: (event: EunomiaSchedulerEvent, domEvent: PointerEvent) => void;
 }
 /**
- * Renders the day/week/work-week grid : a sticky day-header row, an
- * optional all-day/multi-day event row beneath it (via
+ * Renders the day/week/work-week grid : a sticky day-header row and an
+ * optional all-day/multi-day event row beneath it, pinned together (via
  * `layoutAllDayEvents`), and the scrollable timed hour grid below that —
  * one shared horizontal+vertical scroll container, with the header row and
  * the hour gutter each independently `position: sticky` (top and left

package/dist/features/scheduler/shared/scheduler-hour-grid.js

@@ -19,8 +19,8 @@ const CONDENSED_HEIGHT_THRESHOLD = 34;
  */
 const ALL_DAY_BAR_HEIGHT = 22;
 /**
- * Renders the day/week/work-week grid : a sticky day-header row, an
- * optional all-day/multi-day event row beneath it (via
+ * Renders the day/week/work-week grid : a sticky day-header row and an
+ * optional all-day/multi-day event row beneath it, pinned together (via
  * `layoutAllDayEvents`), and the scrollable timed hour grid below that —
  * one shared horizontal+vertical scroll container, with the header row and
  * the hour gutter each independently `position: sticky` (top and left
@@ -56,63 +56,67 @@ export function renderHourGrid(props) {
     const allDayRowCount = allDaySlots.reduce((max, slot) => Math.max(max, slot.row + 1), 0);
     return html `
     <div id="hour-grid-scroll">
-      <div class="hour-grid-header">
-        <div class="hour-grid-gutter-spacer"></div>
-        ${days.map((day) => html `
-            <div
-              class=${classMap({
-        "hour-grid-day-header": true,
-        today: isToday(day),
-    })}
-            >
-              ${day.toLocaleDateString(locale, { weekday: "short" })}
-              <br />
-              ${day.toLocaleDateString(locale, {
-        day: "numeric",
-        month: "short",
-    })}
-            </div>
-          `)}
-      </div>
-      ${allDayRowCount > 0
+      <div class="hour-grid-top">
+        ${props.hideDayHeader
+        ? null
+        : html `<div class="hour-grid-header">
+              <div class="hour-grid-gutter-spacer"></div>
+              ${days.map((day) => html `
+                  <div
+                    class=${classMap({
+            "hour-grid-day-header": true,
+            today: isToday(day),
+        })}
+                  >
+                    ${day.toLocaleDateString(locale, { weekday: "short" })}
+                    <br />
+                    ${day.toLocaleDateString(locale, {
+            day: "numeric",
+            month: "short",
+        })}
+                  </div>
+                `)}
+            </div>`}
+        ${allDayRowCount > 0
         ? html `
-            <div
-              class="hour-grid-allday-row"
-              style=${styleMap({
+              <div
+                class="hour-grid-allday-row"
+                style=${styleMap({
             height: `${allDayRowCount * ALL_DAY_BAR_HEIGHT}px`,
         })}
-            >
-              <div class="hour-grid-gutter-spacer"></div>
-              <div class="hour-grid-allday-days">
-                ${allDaySlots.map((slot) => {
+              >
+                <div class="hour-grid-gutter-spacer"></div>
+                <div class="hour-grid-allday-days">
+                  ${allDaySlots.map((slot) => {
             const span = slot.endIndex - slot.startIndex + 1;
             const left = (slot.startIndex / days.length) * 100;
             const width = (span / days.length) * 100;
             return html `
-                    <div
-                      class="hour-grid-allday-event"
-                      style=${styleMap({
+                      <div
+                        class="hour-grid-allday-event"
+                        style=${styleMap({
                 top: `${slot.row * ALL_DAY_BAR_HEIGHT}px`,
                 left: `${left}%`,
                 width: `${width}%`,
             })}
-                    >
-                      <eun-scheduler-event
-                        .label=${slot.event.title}
-                        .start=${slot.event.start}
-                        .end=${slot.event.end}
-                        color=${slot.event.color}
-                        appearance=${props.eventAppearance}
-                        hide-time
-                        @click=${(domEvent) => props.onEventClick(slot.event, domEvent)}
-                      ></eun-scheduler-event>
-                    </div>
-                  `;
+                      >
+                        <eun-scheduler-event
+                          .label=${slot.event.title}
+                          .start=${slot.event.start}
+                          .end=${slot.event.end}
+                          color=${slot.event.color}
+                          appearance=${props.eventAppearance}
+                          hide-time
+                          @click=${(domEvent) => props.onEventClick(slot.event, domEvent)}
+                        ></eun-scheduler-event>
+                      </div>
+                    `;
         })}
+                </div>
               </div>
-            </div>
-          `
+            `
         : null}
+      </div>
       <div
         class="hour-grid-body"
         style=${styleMap({ "--_slotsPerHour": String(slotsPerHour) })}
@@ -184,7 +188,10 @@ function renderDayColumn(day, props, now, hourCount) {
         : null}
       ${slots.map((slot) => {
         const startMinutes = Math.max(slot.event.start.getHours() * 60 + slot.event.start.getMinutes(), gridStartMinutes);
-        const endMinutes = Math.min(slot.event.end.getHours() * 60 + slot.event.end.getMinutes(), gridEndMinutes);
+        // A same-day event can still end at the next midnight, read as 24:00.
+        const endMinutes = Math.min(isSameDay(slot.event.start, slot.event.end)
+            ? slot.event.end.getHours() * 60 + slot.event.end.getMinutes()
+            : 24 * 60, gridEndMinutes);
         if (endMinutes <= gridStartMinutes || startMinutes >= gridEndMinutes) {
             return null;
         }

package/dist/features/scheduler/shared/scheduler-hour-grid.styles.js

@@ -14,9 +14,10 @@ import { cssBelow } from "../../../utils/media.styles.js";
  * One shared scroll container (`#hour-grid-scroll`) holds the header, the
  * optional all-day row, and the timed body — scrolling both horizontally
  * (so narrow viewports keep every day column at a legible minimum width
- * instead of squeezing them illegibly) and vertically. The header row and
- * the hour gutter are each independently `position: sticky` (top / left
- * respectively), so both stay in view while scrolling in either direction.
+ * instead of squeezing them illegibly) and vertically. The header and
+ * all-day rows (`.hour-grid-top`) and the hour gutter are each
+ * independently `position: sticky` (top / left respectively), so both stay
+ * in view while scrolling in either direction.
  *
  * `#hour-grid-scroll` reacts to `:host`'s own rendered width via
  * `@container`, not `@media`, since a scheduler embedded in a narrow
@@ -42,12 +43,17 @@ const base = css `
     touch-action: pan-y;
   }
 
-  .hour-grid-header {
-    display: flex;
+  .hour-grid-top {
     position: sticky;
     top: 0;
     z-index: 3;
+    width: max-content;
+    min-width: 100%;
     background: var(--eun-surface-color, #ffffff);
+  }
+
+  .hour-grid-header {
+    display: flex;
     border-bottom: 1px solid var(--eun-border-color, #dee0e7);
   }
 
@@ -68,7 +74,7 @@ const base = css `
     border-left: 1px solid var(--eun-divider-color, #dee0e7);
     text-align: center;
     font-size: 12px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .hour-grid-day-header.today {
@@ -119,7 +125,7 @@ const base = css `
     padding-right: var(--eun-space-xs, 4px);
     text-align: center;
     font-size: 11px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
     transform: translateY(-0.5em);
     border-top: none;
   }

package/dist/features/scheduler/shared/scheduler-month-view.js

@@ -122,7 +122,7 @@ function renderMonthWeek(week, props) {
             color=${slot.event.color}
             appearance=${isMultiDay(slot.event) ? "default" : "ghost"}
             direction=${desktop ? "row" : "column"}
-            ?hide-time=${!desktop || !!slot.event.allDay}
+            ?hide-time=${!desktop || isMultiDay(slot.event)}
             @click=${(domEvent) => onEventClick(slot.event, domEvent)}
           ></eun-scheduler-event>
         `)}

package/dist/features/scheduler/shared/scheduler-month-view.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 import { cssBelow } from "../../../utils/media.styles.js";
 const base = css `
   .month-scroll {
-    max-height: var(--scheduler-body-max-height, 640px);
+    max-height: var(--scheduler-body-max-height, none);
     overflow-y: auto;
   }
 
@@ -28,7 +28,7 @@ const base = css `
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     text-align: center;
     font-size: 12px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .month-week {
@@ -51,7 +51,7 @@ const base = css `
   .month-cell.outside {
     background: color-mix(
       in srgb,
-      var(--eun-text-secondary, #484e61) 4%,
+      var(--eun-text-secondary, #666e8a) 4%,
       transparent
     );
   }
@@ -70,7 +70,7 @@ const base = css `
   }
 
   .month-cell.outside .month-cell-day {
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .month-cell-day.today {
@@ -87,7 +87,10 @@ const base = css `
 
   .month-cell-day:focus-visible {
     outline: 2px solid
-      var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff));
+      var(
+        --scheduler-focus-outline-color,
+        var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff))
+      );
     outline-offset: 2px;
   }
 
@@ -108,7 +111,7 @@ const base = css `
     padding: 1px 4px;
     cursor: pointer;
     font-size: 11px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
     z-index: 1;
   }
 
@@ -119,7 +122,10 @@ const base = css `
 
   .month-week-more:focus-visible {
     outline: 2px solid
-      var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff));
+      var(
+        --scheduler-focus-outline-color,
+        var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff))
+      );
     outline-offset: -2px;
   }
 `;

package/dist/features/scheduler/shared/scheduler-year-view.d.ts

@@ -13,11 +13,12 @@ export interface YearViewProps {
     onMonthLabelClick: (month: Date) => void;
 }
 /**
- * Renders the `year` view : the 12 months of the year stacked in a single
- * scrollable column — one full-width 7-column grid per month, so
- * scrolling down moves from month to month — with a single weekday-label
- * header (`position: sticky`, shared across every month rather than
- * repeated 12 times) pinned at the top of that same scroll. Each day is
+ * Renders the `year` view : the 12 months of the year as mini-month grids,
+ * several per row from the `tablet` container width, each with its own
+ * weekday labels. Narrower, they stack in a single scrollable column of
+ * full-width grids, with a single weekday-label header (`position:
+ * sticky`, shared across every month rather than repeated 12 times)
+ * pinned at the top of that same scroll. Each day is
  * marked with a plain dot when it has ≥1 event (not color-coded —
  * illegible at this scale, unlike the month view's own real chips).
  * Clicking a day switches to `day` view for that date ; clicking a month

package/dist/features/scheduler/shared/scheduler-year-view.js

@@ -3,11 +3,12 @@ import { classMap } from "lit/directives/class-map.js";
 import { addDays, getCalendarMonthMatrix, isSameMonth, isToday, } from "../../../utils/date.utils.js";
 import { eventsOnDay } from "./scheduler.utils.js";
 /**
- * Renders the `year` view : the 12 months of the year stacked in a single
- * scrollable column — one full-width 7-column grid per month, so
- * scrolling down moves from month to month — with a single weekday-label
- * header (`position: sticky`, shared across every month rather than
- * repeated 12 times) pinned at the top of that same scroll. Each day is
+ * Renders the `year` view : the 12 months of the year as mini-month grids,
+ * several per row from the `tablet` container width, each with its own
+ * weekday labels. Narrower, they stack in a single scrollable column of
+ * full-width grids, with a single weekday-label header (`position:
+ * sticky`, shared across every month rather than repeated 12 times)
+ * pinned at the top of that same scroll. Each day is
  * marked with a plain dot when it has ≥1 event (not color-coded —
  * illegible at this scale, unlike the month view's own real chips).
  * Clicking a day switches to `day` view for that date ; clicking a month
@@ -26,12 +27,12 @@ export function renderSchedulerYearView(props) {
       <div class="year-weekday-header" role="row">
         ${weekdayLabels.map((label) => html `<span role="columnheader">${label}</span>`)}
       </div>
-      ${months.map((month) => renderYearMonth(month, weekStartsOn, locale, props))}
+      ${months.map((month) => renderYearMonth(month, weekStartsOn, weekdayLabels, locale, props))}
     </div>
   `;
 }
 /** @private */
-function renderYearMonth(month, weekStartsOn, locale, props) {
+function renderYearMonth(month, weekStartsOn, weekdayLabels, locale, props) {
     const weeks = getCalendarMonthMatrix(month, weekStartsOn);
     return html `
     <div class="year-month-section">
@@ -43,6 +44,9 @@ function renderYearMonth(month, weekStartsOn, locale, props) {
         ${month.toLocaleDateString(locale, { month: "long", year: "numeric" })}
       </button>
       <div class="year-month-grid" role="grid">
+        <div class="year-month-weekdays" role="row">
+          ${weekdayLabels.map((label) => html `<span role="columnheader">${label}</span>`)}
+        </div>
         ${weeks.map((week) => html `
             <div class="year-month-row" role="row">
               ${week.map((day) => renderYearDay(day, month, locale, props))}

package/dist/features/scheduler/shared/scheduler-year-view.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { cssBelow } from "../../../utils/media.styles.js";
+import { cssBelow, cssFrom } from "../../../utils/media.styles.js";
 const base = css `
   .year-scroll {
     max-height: var(--scheduler-body-max-height, 640px);
@@ -31,7 +31,7 @@ const base = css `
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     text-align: center;
     font-size: 12px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .year-month-section {
@@ -72,6 +72,18 @@ const base = css `
     grid-template-columns: repeat(7, 1fr);
   }
 
+  .year-month-weekdays {
+    display: none;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .year-month-weekdays span {
+    padding: var(--eun-space-xs, 4px) 0;
+    text-align: center;
+    font-size: 11px;
+    color: var(--eun-text-secondary, #666e8a);
+  }
+
   .year-day {
     all: unset;
     box-sizing: border-box;
@@ -111,7 +123,10 @@ const base = css `
 
   .year-day:focus-visible {
     outline: 2px solid
-      var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff));
+      var(
+        --scheduler-focus-outline-color,
+        var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff))
+      );
     outline-offset: 1px;
   }
 
@@ -122,5 +137,44 @@ const base = css `
     border-radius: 999px;
     background: currentColor;
   }
+
+  @container ${cssFrom("tablet")} {
+    .year-scroll {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      align-content: start;
+      gap: var(--eun-space-m, 16px) var(--eun-space-l, 24px);
+      padding: var(--eun-space-m, 16px);
+    }
+
+    .year-weekday-header {
+      display: none;
+    }
+
+    .year-month-section {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    .year-month-label {
+      position: static;
+      margin: 0 0 var(--eun-space-xs, 4px);
+      padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    }
+
+    .year-month-weekdays {
+      display: grid;
+    }
+
+    .year-day {
+      aspect-ratio: auto;
+      height: 32px;
+      font-size: 12px;
+    }
+
+    .year-day-number {
+      width: 26px;
+    }
+  }
 `;
 export const schedulerYearViewStyles = base;

package/dist/features/scheduler/shared/scheduler.types.d.ts

@@ -3,15 +3,11 @@
  */
 export type EunomiaSchedulerView = "day" | "week" | "work-week" | "month" | "year";
 /**
- * An event's accent color, as a `#rrggbb` hex string picked through
- * `eun-color-picker` in the editor. `scheduler-event.styles.ts` still gives
- * its own six preset names (red/purple/yellow/blue/green/pink — the
- * library's decorative token scale, see
- * `src/foundations/color/decorative.md`) byte-identical, tuned two-tone
- * CSS whenever `color` matches one of their hex values exactly, so existing
- * events keep rendering pixel-identically ; any other hex drives both the
- * accent and tint shades from that single value instead (see
- * `EunomiaSchedulerEvent`'s own doc comment).
+ * An event's accent color, as a `#rrggbb` hex string, which is what the
+ * editor saves. The six preset hex values (see `EVENT_COLOR_PRESETS` in
+ * `scheduler.utils.ts`) keep their own tuned two-tone shades, and their
+ * names (red/purple/yellow/blue/green/pink) are accepted as aliases. Any
+ * other hex drives both shades from that single value.
  */
 export type EunomiaSchedulerEventColor = string;
 /**