@tensor_1/react 2.34.0 → 2.35.0

package/README.md

@@ -437,6 +437,29 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
 - **A narrow month** (`monthDensity="counts"`): a cell is the date, the consumer's `days[date].count` and its markers.
   No entry is drawn and none is counted: a row's "+N" is for windows over `windowLaneCap` only. The setting does not
   touch the week.
+- **Keyboard (HAR-1527).** The month grid, the time grid and the agenda are each **one tab stop**; no item is a
+  tab stop of its own.
+  - Month: arrows move between days, Home/End go to the first/last day shown. **Enter** on a day with items moves
+    into them (ArrowUp/ArrowDown, Home, End between them; Enter calls `onSelectEntry`; **Esc** returns to the day).
+    **Space** or a click on the day number calls `onSelectDate`; so does Enter on a day with no items.
+  - Week/Day time grid: the tab stop is a day head (ArrowLeft/ArrowRight between days). Enter goes into the
+    day's items and windows. On an item, Enter selects it, or confirms a pending move (`onProposeMove`); Esc drops
+    a pending move, otherwise returns to the day head.
+  - Agenda (grouped or flat): ArrowUp/ArrowDown, Home and End walk rows, window notes and "open day", also
+    through the rows a long agenda has not mounted yet.
+  - The keys act on the calendar's own items only: a field or link you render inside a cell or an item keeps its
+    keys. A row's "+N" is reached from the day it opens. An item reached with the pointer takes the tab stop to
+    its day. Esc on an item returns to its day and is not passed on; a second Esc reaches a surrounding dialog.
+  - A day button is named with the date and `days[date].label` (the count and the highest signal), through
+    `labels.dayName` (`'{date}, {label}'`). If your labels already say the date, set `dayName: '{label}'`.
+  - To put focus back on an item after closing your own panel: `querySelector('[data-item-id="…"]')?.focus()`.
+- **Emphasis.** `entry.emphasis: 'highlight' | 'dim'` sets `data-highlight` / `data-dim` on that item in every
+  view. Highlight is a heavier edge in the text colour and a heavier weight, dim is quieter text;
+  neither changes a hue, the line style of the state, or the band's leading edge. With forced colours a
+  highlighted title is underlined and dimmed text is grey.
+- **`<List roving>`**: the items are one tab stop (ArrowUp/ArrowDown, Home, End; Enter or Space activates the
+  focused item's `onClick`). A control inside an item keeps its own tab stop and keys. Items may be wrapped or
+  rendered later by a child component.
 - **Colour.** Every calendar colour is named once at the top of `scheduling-calendar.css` (`--calendar-*`).
 - **Deprecated, still working in 2.x:** `entry.state` / `SchedulingEntryState`, `overlay.kind` /
   `SchedulingOverlayKind` and the `previous` / `next` labels. An entry with `state` is no longer tinted: the two

package/dist/{SchedulingCalendar-DSLQ6AY5.d.ts → SchedulingCalendar-B6TakO2h.d.ts}

@@ -97,6 +97,12 @@ interface SchedulingCalendarEntry {
     allDay?: boolean;
     /** `false` keeps this entry where it is when the grid allows moves (`canMove`). */
     movable?: boolean;
+    /**
+     * Draws the item with more or less weight than its neighbours, for example the partners of
+     * the item the user picked (`'highlight'`) against everything else (`'dim'`). It is a line
+     * weight and a quieter text colour, never a hue.
+     */
+    emphasis?: 'highlight' | 'dim';
 }
 interface SchedulingCalendarOverlay {
     id: string;
@@ -123,7 +129,11 @@ interface SchedulingCalendarDay {
     count: number;
     /** The "+N" of the cell. 0 shows none. */
     overflowCount: number;
-    /** The accessible text of the count, e.g. "7 items, 2 need review". */
+    /**
+     * The accessible text of the count, e.g. "7 items, 2 need review". The day's button is named
+     * with the date and this text (`labels.dayName`), so a screen reader hears the date, the count
+     * and the highest signal in one go.
+     */
     label?: string;
     markers?: SchedulingMarker[];
 }
@@ -193,6 +203,8 @@ interface SchedulingCalendarLabels {
     moreSpans?: string;
     /** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden span). */
     moreSpansLabel?: string;
+    /** The name of a day's button when `days[date].label` is given. `{date}` and `{label}` placeholders; use `'{label}'` if your labels already say the date. */
+    dayName?: string;
     /** The accessible text of a day's count when `days[date].label` is not given. `{count}` placeholder. */
     dayCount?: string;
     states: Record<SchedulingEntryState, string>;

package/dist/components/List.d.ts

@@ -3,9 +3,16 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface ListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
+    /**
+     * Makes the list one tab stop: ArrowUp and ArrowDown move between its `ListItem`s, Home and
+     * End go to the first and last, Enter and Space activate the focused item (its `onClick`).
+     * Focus stays on the same item across re-renders with the same keys. A roving list is a
+     * client component; without `roving` the list stays server-renderable.
+     */
+    roving?: boolean;
 }
 /** Bordered, rounded list container over `.uix-list`. */
-declare function List({ children, className, ...props }: ListProps): react.JSX.Element;
+declare function List({ children, className, roving, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;

package/dist/components/List.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function List({ children, className, ...props }) {
+import { RovingList } from "./ListRoving.js";
+function List({ children, className, roving, ...props }) {
+  if (roving) return /* @__PURE__ */ jsx(RovingList, { className, ...props, children });
   return /* @__PURE__ */ jsx("div", { className: cx("uix-list", className), ...props, children });
 }
 function ListItem({ title, meta, trail, leading, children, className, ...props }) {

package/dist/components/ListRoving.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * `List` with `roving`: the items of the list are one tab stop. ArrowUp and ArrowDown move
+ * between them, Home and End go to the first and last, Enter and Space activate the focused
+ * item (its `onClick`). A control inside an item keeps its own tab stop and its own keys.
+ * Internal: rendered by `List`, which stays a server component without it.
+ */
+declare function RovingList({ children, className, onKeyDown, onFocus, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { RovingList };

package/dist/components/ListRoving.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "../cx.js";
+import { syncRovingStop } from "../roving.js";
+function RovingList({ children, className, onKeyDown, onFocus, ...props }) {
+  const ref = useRef(null);
+  const stop = useRef({ node: null, index: 0 });
+  const items = () => Array.from(ref.current?.querySelectorAll(".uix-list__item") ?? []).filter((element) => element.closest(".uix-list") === ref.current);
+  const sync = (next) => {
+    const all = items();
+    for (const element of all) if (!element.hasAttribute("role")) element.setAttribute("role", "listitem");
+    stop.current = syncRovingStop(all, stop.current, next);
+  };
+  useEffect(() => {
+    sync();
+  });
+  useEffect(() => {
+    const list = ref.current;
+    if (!list || typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(() => sync());
+    observer.observe(list, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const all = items();
+    const index = all.indexOf(event.target);
+    if (index === -1) return;
+    const target = event.key === "ArrowDown" ? index + 1 : event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : null;
+    if (target !== null) {
+      event.preventDefault();
+      const next = all[Math.max(0, Math.min(all.length - 1, target))];
+      sync(next);
+      next.focus();
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      all[index].click();
+    }
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event);
+    const item = items().find((element) => element === event.target);
+    if (item) sync(item);
+  };
+  return /* @__PURE__ */ jsx("div", { ref, role: "list", ...props, className: cx("uix-list", "uix-list--roving", className), onKeyDown: handleKeyDown, onFocus: handleFocus, children });
+}
+export {
+  RovingList
+};

package/dist/components/SchedulingAgenda.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { S as SchedulingAgendaGroup, e as SchedulingCalendarLabels, i as SchedulingDatePart, d as SchedulingCalendarEntry, l as SchedulingMarker, f as SchedulingCalendarOverlay } from '../SchedulingCalendar-DSLQ6AY5.js';
+import { S as SchedulingAgendaGroup, e as SchedulingCalendarLabels, i as SchedulingDatePart, d as SchedulingCalendarEntry, l as SchedulingMarker, f as SchedulingCalendarOverlay } from '../SchedulingCalendar-B6TakO2h.js';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';
 

package/dist/components/SchedulingAgenda.js

@@ -1,10 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement, useLayoutEffect, useRef, useState } from "react";
+import { createElement, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { addCalendarDays, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
 import { itemDaySpan } from "../scheduling-calendar-model.js";
 import { useVirtualRows } from "../hooks/useVirtualRows.js";
 import { fillLabel } from "../fill-label.js";
+import { syncRovingStop } from "../roving.js";
 const AGENDA_VIRTUAL_ROW = 44;
 const AGENDA_NARROW_WIDTH = 576;
 const AGENDA_NARROW_ROW = 64;
@@ -81,6 +82,102 @@ function AgendaBody({
     box.querySelectorAll(":scope > section > .uix-scheduling-calendar__agenda-head").forEach((head) => observer.observe(head));
     return () => observer.disconnect();
   }, [groups]);
+  const stop = useRef({ node: null, index: 0 });
+  const container = () => flat ? scroller.current : grouped.current;
+  const controls = () => Array.from(container()?.querySelectorAll("button") ?? []);
+  const focusStop = (target) => {
+    if (!target) return;
+    stop.current = syncRovingStop(controls(), stop.current, target);
+    target.focus();
+  };
+  const holdsControl = (row2) => row2 !== void 0 && (row2.kind === "entry" || row2.kind === "note" || row2.kind === "hidden" && onShowMore !== void 0);
+  const controlAt = (index) => scroller.current?.querySelector(`[data-flat-index="${index}"] button`) ?? null;
+  const focusIn = (box) => {
+    const tree = box.getRootNode();
+    const active = tree.activeElement ?? null;
+    return active === document.body ? null : active;
+  };
+  const focusIsElsewhere = (box) => {
+    const active = focusIn(box);
+    if (active) return !box.contains(active);
+    const outer = document.activeElement;
+    return box.getRootNode() !== document && outer !== null && outer !== document.body && !outer.contains(box);
+  };
+  const rowHeight = narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW;
+  const scrollToRow = (box, index) => {
+    box.scrollTop = Math.max(0, index * rowHeight - (box.clientHeight - rowHeight) / 2);
+  };
+  const landing = useRef(null);
+  const land = () => {
+    const wanted = landing.current;
+    if (!wanted) return;
+    const box = container();
+    const index = flatRows[wanted.index]?.key === wanted.key ? wanted.index : flatRows.findIndex((row2) => row2.key === wanted.key);
+    if (!box || index === -1 || !holdsControl(flatRows[index]) || focusIsElsewhere(box)) {
+      landing.current = null;
+      return;
+    }
+    const target = controlAt(index);
+    if (target) {
+      landing.current = null;
+      focusStop(target);
+      return;
+    }
+    if (index !== wanted.index) {
+      landing.current = { key: wanted.key, index };
+      scrollToRow(box, index);
+    }
+  };
+  useEffect(() => {
+    const all = controls();
+    stop.current = syncRovingStop(all, stop.current);
+    const box = flat ? scroller.current : null;
+    if (box) {
+      if (all.length === 0 || focusIn(box) === box) box.tabIndex = 0;
+      else box.removeAttribute("tabindex");
+    }
+    land();
+  });
+  const onFocus = (event) => {
+    stop.current = syncRovingStop(controls(), stop.current, event.target);
+  };
+  const onBlur = (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) landing.current = null;
+    if (event.target === event.currentTarget && controls().length > 0) event.currentTarget.removeAttribute("tabindex");
+  };
+  const dropLanding = () => {
+    landing.current = null;
+  };
+  const onKeyDown = (event) => {
+    const from = event.target;
+    if (event.defaultPrevented || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || !controls().includes(from)) return;
+    event.preventDefault();
+    const box = flat ? scroller.current : null;
+    if (!box) {
+      const all = controls();
+      const to = event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : all.indexOf(from) + (event.key === "ArrowDown" ? 1 : -1);
+      focusStop(all[Math.max(0, Math.min(all.length - 1, to))]);
+      return;
+    }
+    const at = Number(from.closest("[data-flat-index]")?.getAttribute("data-flat-index"));
+    let target = -1;
+    if (event.key === "Home") target = flatRows.findIndex(holdsControl);
+    else if (event.key === "End") {
+      for (let index = flatRows.length - 1; index >= 0 && target === -1; index--) if (holdsControl(flatRows[index])) target = index;
+    } else if (Number.isFinite(at)) {
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      for (let index = at + step; index >= 0 && index < flatRows.length && target === -1; index += step) if (holdsControl(flatRows[index])) target = index;
+    }
+    if (target === -1) return;
+    const mounted = controlAt(target);
+    if (mounted) {
+      landing.current = null;
+      focusStop(mounted);
+      return;
+    }
+    landing.current = { key: flatRows[target].key, index: target };
+    scrollToRow(box, target);
+  };
   const note = (overlay) => /* @__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, 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 }),
@@ -125,7 +222,7 @@ function AgendaBody({
   const row = (entry, date) => {
     const markers = entryMarkers(entry);
     const name = entry.accessibleName ?? (entry.meta ? `${entryName(entry)}, ${entry.meta}` : entryName(entry));
-    return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__agenda-row", "data-item-id": entry.id, "data-band": entry.band ?? "none", "data-status": entryStatus(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), "aria-label": name, children: [
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__agenda-row", "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, onClick: () => onSelectEntry?.(entry), "aria-label": name, children: [
       /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": entry.band ?? "none", "data-status": entryStatus(entry) }),
       /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__agenda-time", children: timeText(entry, date) }),
       /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__agenda-main", children: [
@@ -143,9 +240,9 @@ function AgendaBody({
   const continues = (group) => /* @__PURE__ */ jsx("p", { className: "uix-scheduling-calendar__agenda-continues", children: fillLabel(labels.continuesInDay, { count: group.continuesCount ?? 0 }) });
   if (groups.length === 0) return /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) });
   if (flat) {
-    return /* @__PURE__ */ jsx("div", { ref: virtual.containerRef, className: "uix-scheduling-calendar__agenda uix-scheduling-calendar__agenda--virtual", "data-narrow": narrow || void 0, role: "region", "aria-label": labels.agenda, children: /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, children: item.kind === "heading" ? heading(item.group, false) : item.kind === "note" ? note(item.overlay) : item.kind === "entry" ? row(item.entry, item.group.date) : item.kind === "hidden" ? hidden(item.group) : continues(item.group) }, item.key)) }) });
+    return /* @__PURE__ */ jsx("div", { ref: virtual.containerRef, className: "uix-scheduling-calendar__agenda uix-scheduling-calendar__agenda--virtual", "data-narrow": narrow || void 0, role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, onBlur, onWheel: dropLanding, onPointerDown: dropLanding, children: /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item, at) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, "data-flat-index": virtual.startIndex + at, children: item.kind === "heading" ? heading(item.group, false) : item.kind === "note" ? note(item.overlay) : item.kind === "entry" ? row(item.entry, item.group.date) : item.kind === "hidden" ? hidden(item.group) : continues(item.group) }, item.key)) }) });
   }
-  return /* @__PURE__ */ jsx("div", { ref: grouped, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: groups.map((group, index) => {
+  return /* @__PURE__ */ jsx("div", { ref: grouped, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, children: groups.map((group, index) => {
     const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
     return /* @__PURE__ */ jsxs("section", { className: "uix-scheduling-calendar__agenda-group", "data-date": group.date, children: [
       heading(group, true),

package/dist/components/SchedulingCalendar.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';
-export { D as DEFAULT_SCHEDULING_CALENDAR_LABELS, S as SchedulingAgendaGroup, a as SchedulingBand, b as SchedulingCalendar, c as SchedulingCalendarDay, d as SchedulingCalendarEntry, e as SchedulingCalendarLabels, f as SchedulingCalendarOverlay, g as SchedulingCalendarProps, h as SchedulingCalendarView, i as SchedulingDatePart, j as SchedulingEntryState, k as SchedulingLegendItem, l as SchedulingMarker, m as SchedulingMarkerEmphasis, n as SchedulingOverlayKind, o as SchedulingOverlayPattern, p as SchedulingStatus } from '../SchedulingCalendar-DSLQ6AY5.js';
+export { D as DEFAULT_SCHEDULING_CALENDAR_LABELS, S as SchedulingAgendaGroup, a as SchedulingBand, b as SchedulingCalendar, c as SchedulingCalendarDay, d as SchedulingCalendarEntry, e as SchedulingCalendarLabels, f as SchedulingCalendarOverlay, g as SchedulingCalendarProps, h as SchedulingCalendarView, i as SchedulingDatePart, j as SchedulingEntryState, k as SchedulingLegendItem, l as SchedulingMarker, m as SchedulingMarkerEmphasis, n as SchedulingOverlayKind, o as SchedulingOverlayPattern, p as SchedulingStatus } from '../SchedulingCalendar-B6TakO2h.js';

package/dist/components/SchedulingCalendar.js

@@ -1,6 +1,7 @@
 "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";
@@ -37,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" },
@@ -222,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) {
@@ -233,7 +260,56 @@ 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) => {
@@ -256,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)
   });
@@ -294,13 +374,13 @@ function SchedulingCalendar({
     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 }) })
         ] }),
@@ -309,10 +389,10 @@ 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)),
-        countsOnly ? null : 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);
   };
@@ -334,7 +414,7 @@ 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 })
@@ -344,7 +424,7 @@ function SchedulingCalendar({
         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 })
       ] }))
@@ -391,9 +471,9 @@ function SchedulingCalendar({
         onSelectOverlay,
         onShowMore
       }
-    ) : 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" ? /* @__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: [
@@ -440,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, "data-density": countsOnly ? "counts" : 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 { q as SchedulingTimeGrid, r as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-DSLQ6AY5.js';
+export { q as SchedulingTimeGrid, r as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-B6TakO2h.js';
 import '../calendar-model.js';