@tensor_1/react 2.34.0 → 2.36.0

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/Radio.d.ts

@@ -5,12 +5,33 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
     label?: ReactNode;
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+interface RadioCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'title'> {
+    /** The choice's name. */
+    title: ReactNode;
+    /** One or two lines that explain the choice. */
+    description?: ReactNode;
+    /** A preview, an illustration or an icon above the text (decorative: the title names the choice). */
+    media?: ReactNode;
+}
+/**
+ * A radio as a card (HAR-1373; TENSOR C17/B14): for a choice whose options need a preview or
+ * a description (appearance, plan, mode). It is a native radio inside a label, so the group's
+ * keyboard, form value and `required` work as for `Radio`. The selected card shows a check
+ * mark and a stronger border, never colour alone. Put the cards in
+ * `<RadioGroup variant="card" label="…">` and give them one `name`.
+ */
+declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLInputElement>>;
 interface RadioGroupProps {
     children: ReactNode;
     className?: string;
     /** Group name; when set the group renders as fieldset/legend so it's announced with each radio. */
     label?: ReactNode;
+    /**
+     * `'list'` (default): radios in a column. `'card'`: a grid of `RadioCard`s that wraps to one
+     * column on a phone.
+     */
+    variant?: 'list' | 'card';
 }
-declare function RadioGroup({ children, className, label }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ children, className, label, variant }: RadioGroupProps): react.JSX.Element;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+export { Radio, RadioCard, type RadioCardProps, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/components/Radio.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
+import { CheckIcon } from "../icons/components.js";
 const Radio = forwardRef(
   ({ label, className, ...props }, ref) => /* @__PURE__ */ jsxs("label", { className: cx("uix-radio", className), children: [
     /* @__PURE__ */ jsx("input", { type: "radio", ref, ...props }),
@@ -9,14 +10,28 @@ const Radio = forwardRef(
   ] })
 );
 Radio.displayName = "Radio";
-function RadioGroup({ children, className, label }) {
-  if (label == null) return /* @__PURE__ */ jsx("div", { className: cx("uix-radio-group", className), children });
-  return /* @__PURE__ */ jsxs("fieldset", { className: cx("uix-radio-group", className), children: [
+const RadioCard = forwardRef(
+  ({ title, description, media, className, ...props }, ref) => /* @__PURE__ */ jsxs("label", { className: cx("uix-radio-card", className), children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", ref, ...props }),
+    media != null && /* @__PURE__ */ jsx("span", { className: "uix-radio-card__media", "aria-hidden": "true", children: media }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-radio-card__body", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-radio-card__title", children: title }),
+      description != null && /* @__PURE__ */ jsx("span", { className: "uix-radio-card__desc", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-radio-card__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) })
+  ] })
+);
+RadioCard.displayName = "RadioCard";
+function RadioGroup({ children, className, label, variant = "list" }) {
+  const classes = cx("uix-radio-group", variant === "card" && "uix-radio-group--cards", className);
+  if (label == null) return /* @__PURE__ */ jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsxs("fieldset", { className: classes, children: [
     /* @__PURE__ */ jsx("legend", { className: "uix-radio-group__legend", children: label }),
     children
   ] });
 }
 export {
   Radio,
+  RadioCard,
   RadioGroup
 };

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';