@tensor_1/react 2.33.0 → 2.35.0

package/dist/components/SchedulingCalendar.js

@@ -1,8 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { rovingStep, syncRovingStop } from "../roving.js";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, cachedDateTimeFormat, startOfMonth, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
 import { TOP_LANE_CROSS_MIDNIGHT_MINUTES, itemDaySpan, layoutMonthSpans } from "../scheduling-calendar-model.js";
+import { SchedulingAgenda } from "./SchedulingAgenda.js";
 import { SchedulingTimeGrid } from "./SchedulingTimeGrid.js";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
@@ -36,6 +38,7 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   fewerEntries: "Show fewer",
   moreSpans: "+{count}",
   moreSpansLabel: "{count} more spanning this week, from {date}",
+  dayName: "{date}, {label}",
   dayCount: "{count} entries",
   states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
   statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" },
@@ -45,6 +48,9 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   moreWindowsLabel: "{count} more windows, from {date}",
   topLane: "All-day and longer entries",
   continuesFrom: "from {time}",
+  allDay: "All day",
+  hiddenInDay: "{count} not shown \u2014 open day",
+  continuesInDay: "Continues: {count} listed under an earlier day",
   moveHint: "Hold Shift and press an arrow key to move it. Enter confirms, Escape cancels.",
   moveProposed: "Move to {start} \u2013 {end}. Enter confirms, Escape cancels.",
   moveCancelled: "Move cancelled.",
@@ -60,6 +66,7 @@ const INTL_PARTS = {
 };
 const EMPTY_OVERLAYS = [];
 const EMPTY_ENTRIES = [];
+const EMPTY_IDS = [];
 const DEFAULT_LANE_CAP = 2;
 const DEFAULT_CHIP_ROWS = 3;
 function coveredDays(start, end, timeZone) {
@@ -107,6 +114,10 @@ function SchedulingCalendar({
   notice,
   emptyNote,
   onSelectDate,
+  agendaGroups,
+  agendaHeadingLevel = 3,
+  virtualizeAbove = 200,
+  monthDensity = "full",
   timeGrid = false,
   now,
   canMove = false,
@@ -140,7 +151,8 @@ function SchedulingCalendar({
   const gridRef = useRef(null);
   const picksGiven = dayEntries !== void 0;
   const controlled = picksGiven || dayInfo !== void 0;
-  const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0;
+  const countsOnly = monthDensity === "counts" && view === "month";
+  const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0 || countsOnly;
   const windowCap = Math.max(0, windowLaneCap ?? (fixed ? DEFAULT_LANE_CAP : Infinity));
   const spanCap = Math.max(0, spanLaneCap ?? (fixed ? DEFAULT_LANE_CAP : Infinity));
   const visibleEntries = useMemo(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
@@ -178,13 +190,13 @@ function SchedulingCalendar({
       windowIds.add(overlay.id);
       inputs.push({ id: overlay.id, start: overlay.start, end: overlay.end, group: "window" });
     }
-    for (const { entry } of multiDay) {
+    for (const { entry } of countsOnly ? [] : multiDay) {
       if (itemIds.has(entry.id)) continue;
       itemIds.add(entry.id);
       inputs.push({ id: entry.id, start: entry.start, end: entry.end, group: "item" });
     }
     return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
-  }, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap]);
+  }, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap, countsOnly]);
   const placedByRow = useMemo(() => {
     const rows = /* @__PURE__ */ new Map();
     for (const placed of layout.placed) {
@@ -212,6 +224,31 @@ function SchedulingCalendar({
     setActiveDate(date);
     requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
   };
+  const enteredFrom = useRef(null);
+  const cellOf = (date) => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.closest(".uix-scheduling-calendar__day") ?? null;
+  const dayRing = (date) => {
+    const cell = cellOf(date);
+    const week = cell?.parentElement;
+    if (!cell || !week) return [];
+    const column = Array.from(week.children).indexOf(cell) + 1;
+    const covers = (element) => {
+      const [from, to] = element.style.gridColumn.split("/").map((part) => Number(part.trim()));
+      return from !== void 0 && to !== void 0 && from <= column && column < to;
+    };
+    const direct = Array.from(week.children);
+    return [
+      ...direct.filter((element) => element.matches("button.uix-scheduling-calendar__window, button.uix-scheduling-calendar__span") && covers(element)),
+      ...Array.from(cell.querySelectorAll(".uix-scheduling-calendar__entries button")),
+      // The row's "+N" opens one day; it is reached from that day.
+      ...direct.filter((element) => element.matches("button.uix-scheduling-calendar__rowmore") && element.getAttribute("data-more-date") === date)
+    ];
+  };
+  const dayOfItem = (item) => {
+    if (enteredFrom.current && dayRing(enteredFrom.current).includes(item)) return enteredFrom.current;
+    const week = item.closest(".uix-scheduling-calendar__week");
+    const cell = item.closest(".uix-scheduling-calendar__day") ?? (week ? Array.from(week.children)[Number(item.style.gridColumn.split("/")[0]) - 1] ?? null : null);
+    return item.getAttribute("data-more-date") ?? cell?.querySelector("[data-calendar-date]")?.getAttribute("data-calendar-date") ?? null;
+  };
   const onDayKeyDown = (event, date) => {
     const offset = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[event.key];
     if (offset) {
@@ -223,8 +260,57 @@ function SchedulingCalendar({
     } else if (event.key === "End") {
       event.preventDefault();
       focusDate(days[days.length - 1]);
+    } else if (event.key === "Enter") {
+      const [first] = dayRing(date);
+      if (!first) return;
+      event.preventDefault();
+      enteredFrom.current = date;
+      first.focus();
     }
   };
+  const onGridKeyDown = (event) => {
+    const item = event.target;
+    if (event.defaultPrevented || item.hasAttribute("data-calendar-date") || !["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(event.key)) return;
+    const date = dayOfItem(item);
+    if (!date) return;
+    const ring = dayRing(date);
+    const index = ring.indexOf(item);
+    if (index === -1) return;
+    event.preventDefault();
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      enteredFrom.current = null;
+      setActiveDate(date);
+      gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus();
+      return;
+    }
+    enteredFrom.current = date;
+    const next = event.key === "Home" ? 0 : event.key === "End" ? ring.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1);
+    ring[Math.max(0, Math.min(ring.length - 1, next))]?.focus();
+  };
+  const onGridFocus = (event) => {
+    const item = event.target;
+    if (item.hasAttribute("data-calendar-date")) return;
+    const date = dayOfItem(item);
+    if (date && dayRing(date).includes(item)) setActiveDate(date);
+  };
+  const flatAgendaRef = useRef(null);
+  const flatAgendaStop = useRef({ node: null, index: 0 });
+  const flatAgendaRows = () => Array.from(flatAgendaRef.current?.querySelectorAll(":scope > ol > li > button") ?? []);
+  useEffect(() => {
+    flatAgendaStop.current = syncRovingStop(flatAgendaRows(), flatAgendaStop.current);
+  });
+  const onFlatAgendaFocus = (event) => {
+    flatAgendaStop.current = syncRovingStop(flatAgendaRows(), flatAgendaStop.current, event.target);
+  };
+  const onFlatAgendaKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    const next = rovingStep(flatAgendaRows(), event.target, event.key);
+    if (!next) return;
+    event.preventDefault();
+    flatAgendaStop.current = syncRovingStop(flatAgendaRows(), flatAgendaStop.current, next);
+    next.focus();
+  };
   const entriesOn = (date) => coverage.filter((covered) => date >= covered.start && date < covered.end).map((covered) => covered.entry);
   const toggleMore = (date, all) => {
     if (onShowMore) {
@@ -246,12 +332,16 @@ function SchedulingCalendar({
   const stateText = (entry) => entry.state ? stateLabel[entry.state] : entry.status ? labels.statuses[entry.status] : stateLabel.scheduled;
   const entryName = (entry) => entry.accessibleName ?? [fillLabel(labels.entry, { title: entry.title, state: stateText(entry), start: formatInstant(entry.start), end: formatInstant(entry.end) }), ...(entry.markers ?? []).map((marker) => marker.label)].join(", ");
   const overlayName = (overlay) => overlay.accessibleName ?? fillLabel(labels.overlay, { title: [overlay.kindLabel, overlay.label, overlay.scopeLabel].filter(Boolean).join(", "), start: formatInstant(overlay.start), end: formatInstant(overlay.end) });
+  const emphasisOf = (entry) => ({ "data-highlight": entry.emphasis === "highlight" || void 0, "data-dim": entry.emphasis === "dim" || void 0 });
   const entryProps = (entry) => ({
     type: "button",
+    // Reached from its day with Enter, never with Tab.
+    tabIndex: -1,
     "data-item-id": entry.id,
     "data-band": entry.band ?? "none",
     "data-status": statusOf(entry),
     "data-state": entry.state,
+    ...emphasisOf(entry),
     onClick: () => onSelectEntry?.(entry),
     "aria-label": entryName(entry)
   });
@@ -273,24 +363,24 @@ function SchedulingCalendar({
     ["--uix-scheduling-calendar-lane"]: placed.group === "window" ? placed.lane : windowLanes + placed.lane
   });
   const nothingToShow = visibleEntries.length === 0 && !Object.values(dayEntries ?? {}).some((list) => list.length > 0) && !Object.values(dayInfo ?? {}).some((day) => day.count > 0);
-  const chipRows = Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
+  const chipRows = countsOnly ? -1 : Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
   const renderDay = (date, index) => {
     const info = dayInfo?.[date];
     const all = picksGiven ? dayEntries[date] ?? EMPTY_ENTRIES : singles.get(date) ?? EMPTY_ENTRIES;
     const overflowing = !picksGiven && maxEntriesPerDay !== void 0 && all.length > maxEntriesPerDay;
     const collapsed = overflowing && (controlled || onShowMore !== void 0 || !expandedDates.has(date));
-    const shown = collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
+    const shown = countsOnly ? EMPTY_ENTRIES : collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
     const hiddenCount = info ? info.overflowCount : picksGiven ? 0 : all.length - shown.length;
     const onDay = picksGiven ? all : entriesOn(date);
     const badge = renderDayBadge?.(date, onDay);
     const hasBadge = badge != null && badge !== false;
-    const dateButton = /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), onClick: onSelectDate ? () => onSelectDate(date) : void 0, "aria-label": dateText(date, "day"), children: Number(date.slice(-2)) });
+    const dateButton = /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), onClick: onSelectDate ? () => onSelectDate(date) : void 0, "aria-label": info?.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : dateText(date, "day"), children: Number(date.slice(-2)) });
     const moreText = fillLabel(labels.moreEntries, { count: hiddenCount });
     const moreName = fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") });
     return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
       hasBadge || info ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__dayhead", children: [
         hasBadge && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__badge", children: badge }),
-        info && /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__count", children: [
+        info && /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__count", "aria-hidden": info.label ? true : void 0, children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: info.count }),
           /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: info.label ?? fillLabel(labels.dayCount, { count: info.count }) })
         ] }),
@@ -299,18 +389,20 @@ function SchedulingCalendar({
       ] }) : dateButton,
       /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__entries", children: [
         shown.map((entry) => /* @__PURE__ */ jsx("button", { className: "uix-scheduling-calendar__entry", ...entryProps(entry), children: entryContent(entry) }, entry.id)),
-        controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
+        countsOnly ? null : controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
           /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
-        ] })) : overflowing && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? moreName : void 0, onClick: () => toggleMore(date, onDay), children: collapsed ? moreText : labels.fewerEntries })
+        ] })) : overflowing && /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? moreName : void 0, onClick: () => toggleMore(date, onDay), children: collapsed ? moreText : labels.fewerEntries })
       ] })
     ] }, date);
   };
   const renderWeek = (row) => {
     const rowDays = days.slice(row * 7, row * 7 + 7);
     const windowLanes = lanesUsed(row, "window");
-    const spanLanes = lanesUsed(row, "item");
-    const hidden = layout.hiddenByRow?.[row]?.length ?? 0;
+    const spanLanes = countsOnly ? 0 : lanesUsed(row, "item");
+    const hiddenIds = layout.hiddenByRow?.[row] ?? EMPTY_IDS;
+    const drawnWindows = countsOnly ? new Set((placedByRow.get(row) ?? []).filter((placed) => placed.group === "window").map((placed) => placed.id)) : void 0;
+    const hidden = countsOnly ? hiddenIds.filter((id) => overlayById.has(id) && !drawnWindows.has(id)).length : hiddenIds.length;
     const firstHiddenDay = layout.firstHiddenDayByRow?.[row] ?? rowDays[0];
     const moreText = fillLabel(labels.moreSpans, { count: hidden });
     const moreName = fillLabel(labels.moreSpansLabel, { count: hidden, date: dateText(firstHiddenDay, "day") });
@@ -322,17 +414,17 @@ function SchedulingCalendar({
         if (placed.group === "window") {
           const overlay = overlayById.get(placed.id);
           if (!overlay) return null;
-          return /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__window", "data-overlay-id": overlay.id, "data-pattern": overlay.pattern ?? "solid", "data-global": overlay.global || void 0, "data-kind": overlay.kind, ...continues, style: laneStyle(placed, windowLanes), onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__window-text", children: [
+          return /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__window", "data-overlay-id": overlay.id, "data-pattern": overlay.pattern ?? "solid", "data-global": overlay.global || void 0, "data-kind": overlay.kind, ...continues, style: laneStyle(placed, windowLanes), onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__window-text", children: [
             overlay.kindLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
             /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
             overlay.scopeLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
           ] }) }, `window-${placed.id}`);
         }
         const entry = entryById.get(placed.id);
-        if (!entry) return null;
+        if (!entry || countsOnly) return null;
         return /* @__PURE__ */ jsx("button", { className: "uix-scheduling-calendar__entry uix-scheduling-calendar__span", ...entryProps(entry), ...continues, style: laneStyle(placed, windowLanes), children: entryContent(entry, !placed.continuesBefore) }, `span-${placed.id}`);
       }),
-      hidden > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": moreName, onClick: () => onShowMore(firstHiddenDay, picksGiven ? dayEntries[firstHiddenDay] ?? EMPTY_ENTRIES : entriesOn(firstHiddenDay)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__rowmore", children: [
+      hidden > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__rowmore", "data-more-date": rowDays.includes(firstHiddenDay) ? firstHiddenDay : rowDays[0], "aria-label": moreName, onClick: () => onShowMore(firstHiddenDay, picksGiven ? dayEntries[firstHiddenDay] ?? EMPTY_ENTRIES : entriesOn(firstHiddenDay)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__rowmore", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
         /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
       ] }))
@@ -341,7 +433,7 @@ function SchedulingCalendar({
   const gridStyle = fixed ? {
     ["--uix-scheduling-calendar-chips"]: chipRows,
     ["--uix-scheduling-calendar-lane-cap"]: Math.max(
-      Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item")),
+      Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + (countsOnly ? 0 : Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item"))),
       Object.keys(layout.hiddenByRow ?? {}).length > 0 ? 1 : 0
     )
   } : void 0;
@@ -358,9 +450,30 @@ function SchedulingCalendar({
     loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
       /* @__PURE__ */ jsx("p", { children: error }),
       onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
-    ] }) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
+    ] }) : view === "agenda" && agendaGroups ? /* @__PURE__ */ jsx(
+      SchedulingAgenda,
+      {
+        groups: agendaGroups,
+        timeZone,
+        labels,
+        headingLevel: agendaHeadingLevel,
+        virtualizeAbove,
+        dateText,
+        formatInstant,
+        entryName,
+        entryStatus: statusOf,
+        entryStatusText: stateText,
+        entryMarkers: markersOf,
+        overlayName,
+        renderEntry,
+        renderMarker,
+        onSelectEntry,
+        onSelectOverlay,
+        onShowMore
+      }
+    ) : view === "agenda" ? /* @__PURE__ */ jsx("div", { ref: flatAgendaRef, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, onKeyDown: onFlatAgendaKeyDown, onFocus: onFlatAgendaFocus, children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
       const markers = markersOf(entry);
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", "data-item-id": entry.id, "data-band": entry.band ?? "none", "data-status": statusOf(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), children: [
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", "data-item-id": entry.id, "data-highlight": entry.emphasis === "highlight" || void 0, "data-dim": entry.emphasis === "dim" || void 0, "data-band": entry.band ?? "none", "data-status": statusOf(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), children: [
         /* @__PURE__ */ jsxs("span", { children: [
           /* @__PURE__ */ jsx("strong", { children: renderEntry?.(entry) ?? entry.title }),
           /* @__PURE__ */ jsxs("span", { children: [
@@ -407,7 +520,7 @@ function SchedulingCalendar({
         emptyNote,
         nothingToShow
       }
-    ) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, style: gridStyle, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
+    ) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, "data-density": countsOnly ? "counts" : void 0, style: gridStyle, onKeyDown: onGridKeyDown, onFocus: onGridFocus, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
       days.slice(0, 7).map((date) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
       Array.from({ length: days.length / 7 }, (_, row) => renderWeek(row)),
       emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__empty", children: emptyNote })

package/dist/components/SchedulingTimeGrid.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '../scheduling-calendar-model.js';
-export { p as SchedulingTimeGrid, q as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-C4XVbqZr.js';
+export { q as SchedulingTimeGrid, r as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-B6TakO2h.js';
 import '../calendar-model.js';

package/dist/components/SchedulingTimeGrid.js

@@ -39,6 +39,8 @@ const GridItem = memo(function GridItem2({ entry, segment, column, alone, name,
   ] });
   const shared = {
     className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-item",
+    "data-highlight": entry.emphasis === "highlight" || void 0,
+    "data-dim": entry.emphasis === "dim" || void 0,
     "data-band": entry.band ?? "none",
     "data-status": status,
     "data-state": entry.state,
@@ -54,6 +56,7 @@ const GridItem = memo(function GridItem2({ entry, segment, column, alone, name,
     "button",
     {
       type: "button",
+      tabIndex: -1,
       ...shared,
       "data-item-id": entry.id,
       "aria-label": name,
@@ -101,6 +104,9 @@ function SchedulingTimeGrid({
   const [widthCap, setWidthCap] = useState(Infinity);
   const [ghost, setGhost] = useState(null);
   const [announcement, setAnnouncement] = useState("");
+  const [activeDay, setActiveDay] = useState(days[0]);
+  const enteredFrom = useRef(null);
+  const tabStop = days.includes(activeDay) ? activeDay : days[0];
   const moving = canMove && onProposeMove !== void 0;
   const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
   const laneOptions = useMemo(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
@@ -334,6 +340,78 @@ function SchedulingTimeGrid({
     dragRef.current = null;
   }, []);
   const gridColumns = (span) => `${span.startCol + 2} / ${span.endCol + 3}`;
+  const headButton = (date) => rootRef.current?.querySelector(`.uix-scheduling-calendar__tg-dayhead[data-date="${date}"] [data-calendar-date]`) ?? null;
+  const dayRing = (date) => {
+    const root = rootRef.current;
+    const column = days.indexOf(date);
+    if (!root || column === -1) return [];
+    const covers = (element) => {
+      const [from, to] = element.style.gridColumn.split("/").map((part) => Number(part.trim()));
+      return from !== void 0 && to !== void 0 && from <= column + 2 && column + 2 < to;
+    };
+    const all = (selector) => Array.from(root.querySelectorAll(selector));
+    return [
+      ...all(".uix-scheduling-calendar__tg-strip > button.uix-scheduling-calendar__window").filter(covers),
+      ...all(".uix-scheduling-calendar__tg-top > button.uix-scheduling-calendar__tg-span").filter(covers),
+      ...all(`[data-tg-column="${date}"] > button[data-item-id]`),
+      ...all(`.uix-scheduling-calendar__tg-dayhead[data-date="${date}"] > button.uix-scheduling-calendar__more`),
+      // "+N windows" opens one day; it is reached from that day.
+      ...all(`.uix-scheduling-calendar__tg-strip > button.uix-scheduling-calendar__rowmore[data-more-date="${date}"]`)
+    ];
+  };
+  const dayOfItem = (item) => {
+    if (enteredFrom.current && dayRing(enteredFrom.current).includes(item)) return enteredFrom.current;
+    const inColumn = item.getAttribute("data-more-date") ?? item.closest("[data-tg-column]")?.getAttribute("data-tg-column") ?? item.closest("[data-date]")?.getAttribute("data-date");
+    if (inColumn) return inColumn;
+    const from = Number(item.style.gridColumn.split("/")[0]);
+    return Number.isFinite(from) ? days[Math.max(0, Math.min(days.length - 1, from - 2))] ?? null : days[days.length - 1] ?? null;
+  };
+  const onHeadKeyDown = (event, date) => {
+    const index = days.indexOf(date);
+    const target = event.key === "ArrowLeft" ? index - 1 : event.key === "ArrowRight" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? days.length - 1 : null;
+    if (target !== null) {
+      event.preventDefault();
+      const next = days[Math.max(0, Math.min(days.length - 1, target))];
+      setActiveDay(next);
+      headButton(next)?.focus();
+    } else if (event.key === "Enter") {
+      const [first] = dayRing(date);
+      if (!first) return;
+      event.preventDefault();
+      enteredFrom.current = date;
+      first.focus();
+    }
+  };
+  const onGridKeyDown = (event) => {
+    const item = event.target;
+    if (event.defaultPrevented || event.shiftKey || item.hasAttribute("data-calendar-date") || !["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(event.key)) return;
+    const date = dayOfItem(item);
+    if (!date) return;
+    const ring = dayRing(date);
+    const index = ring.indexOf(item);
+    if (index === -1) return;
+    event.preventDefault();
+    const to = event.key === "Escape" ? null : ring[Math.max(0, Math.min(ring.length - 1, event.key === "Home" ? 0 : event.key === "End" ? ring.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1)))];
+    if (to !== item && ghost?.source === "keys") {
+      setGhost(null);
+      setAnnouncement(labels.moveCancelled);
+    }
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      enteredFrom.current = null;
+      setActiveDay(date);
+      headButton(date)?.focus();
+      return;
+    }
+    enteredFrom.current = date;
+    to?.focus();
+  };
+  const onGridFocus = (event) => {
+    const item = event.target;
+    if (item.hasAttribute("data-calendar-date")) return;
+    const date = dayOfItem(item);
+    if (date && dayRing(date).includes(item)) setActiveDay(date);
+  };
   const nowAt = now === void 0 ? null : new Date(now).getTime();
   const nowColumn = nowAt === null || Number.isNaN(nowAt) ? -1 : days.indexOf(zonedDateKey(new Date(nowAt), timeZone));
   const topHiddenOn = (date) => top.hidden.filter((id) => {
@@ -358,6 +436,8 @@ function SchedulingTimeGrid({
       role: "group",
       "aria-label": gridLabel,
       style: vars({ "--uix-scheduling-calendar-days": days.length, "--uix-scheduling-calendar-hours": maxHours }),
+      onKeyDown: onGridKeyDown,
+      onFocus: onGridFocus,
       onClickCapture: (event) => {
         if (suppressClick.current) {
           suppressClick.current = false;
@@ -374,12 +454,25 @@ function SchedulingTimeGrid({
             const more = info ? info.overflowCount : hiddenIds.length;
             const moreText = fillLabel(labels.moreSpans, { count: more });
             const moreName = fillLabel(labels.moreEntriesLabel, { count: more, date: dateText(date, "day") });
-            const headName = info ? info.label ?? `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}` : dateText(date, "day");
+            const headName = !info ? dateText(date, "day") : info.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}`;
             return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-dayhead", role: "group", "aria-label": headName, "data-date": date, children: [
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, "aria-label": dateText(date, "day"), onClick: onSelectDate ? () => onSelectDate(date) : void 0, children: dateText(date, "column") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-scheduling-calendar__date",
+                  "data-calendar-date": date,
+                  tabIndex: tabStop === date ? 0 : -1,
+                  "aria-label": info?.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : dateText(date, "day"),
+                  onFocus: () => setActiveDay(date),
+                  onKeyDown: (event) => onHeadKeyDown(event, date),
+                  onClick: onSelectDate ? () => onSelectDate(date) : void 0,
+                  children: dateText(date, "column")
+                }
+              ),
               info && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__count", "aria-hidden": "true", children: info.count }),
               info?.markers && info.markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker, true) }, marker.id)) }),
-              more > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
+              more > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
                 /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
               ] }))
@@ -394,6 +487,7 @@ function SchedulingTimeGrid({
               "button",
               {
                 type: "button",
+                tabIndex: -1,
                 className: "uix-scheduling-calendar__window",
                 "data-overlay-id": overlay.id,
                 "data-pattern": overlay.pattern ?? "solid",
@@ -413,7 +507,7 @@ function SchedulingTimeGrid({
               placed.id
             );
           }),
-          moreWindows > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
+          moreWindows > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__rowmore", "data-more-date": firstHiddenWindowDay, "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
         ] }),
         (topLanes > 0 || ghostSpan) && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__tg-strip uix-scheduling-calendar__tg-top", role: "group", "aria-label": labels.topLane, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(topLanes, 1) }), children: [
           top.placed.map((placed) => {
@@ -425,8 +519,11 @@ function SchedulingTimeGrid({
               "button",
               {
                 type: "button",
+                tabIndex: -1,
                 className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-span",
                 "data-item-id": entry.id,
+                "data-highlight": entry.emphasis === "highlight" || void 0,
+                "data-dim": entry.emphasis === "dim" || void 0,
                 "data-band": entry.band ?? "none",
                 "data-status": entryStatus(entry),
                 "data-state": entry.state,

package/dist/components/SchedulingTimeline.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
-import { i as SchedulingEntryState } from '../SchedulingCalendar-C4XVbqZr.js';
+import { j as SchedulingEntryState } from '../SchedulingCalendar-B6TakO2h.js';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';