@12-apps/ui 6.89.1 → 6.90.0

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -17,14 +17,17 @@ import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
 import Popover from '@mui/material/Popover/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import React, { useState } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
+import React, { useContext } from 'react';
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { TableFilter } from '../../layout/TableFilter';
-import { DayBoundInput } from './data-views-day-input';
-import { NumberBoundInput } from './data-views-number-input';
+import { TableFilterContext } from '../../layout/TableFilter/TableFilterContext';
 import { RangePresets } from './data-views-preset-chips';
-import { useOutsideResetKey } from './data-views-range-reset';
+import { RangeBounds } from './data-views-range-bounds';
+import { RangeSummary } from './data-views-range-summary';
+import { useStillAnchor } from './data-views-still-anchor';
 import { presetsFor } from './data-views-range-presets';
 import {
   isRangeInverted,
@@ -36,126 +39,10 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
-import { sxRem } from '../../../tokens/relative';
-
-
-
-/**
- * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form
- * both the field and the backend speak) and is typed through the masked
- * `dd/mm/aaaa` field rather than a native date input — see
- * {@link DayBoundInput} for why. A number parses, and an unparseable/blank
- * entry CLEARS the bound rather than writing `NaN`.
- */
-function BoundField<T extends Record<string, unknown>>({
-  field,
-  label,
-  value,
-  onChange,
-  testId,
-}: {
-  field: RangeFieldConfig<T>;
-  label: string;
-  value: number | string | undefined;
-  onChange: (bound: number | string | undefined) => void;
-  testId: string;
-}): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  if (field.kind === 'day') {
-    return (
-      <DayBoundInput
-        mask={copy.filters.dayMask}
-        invalidMessage={copy.filters.dayInvalid}
-        label={label}
-        value={value == null ? undefined : String(value)}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-  }
-  return (
-    <NumberBoundInput
-      label={label}
-      value={value}
-      unit={field.unit}
-      onChange={onChange}
-      testId={testId}
-    />
-  );
-}
+import { rem, remPx, sxRem } from '../../../tokens/relative';
 
-
-/**
- * The `De`/`Até` pair for a range — shared by the pill's popover and the
- * slide-in panel's day fields, so the two surfaces cannot drift on what a bound
- * accepts or how it clears.
- */
-export function RangeBounds<T extends Record<string, unknown>>({
-  field,
-  value,
-  onChange,
-  testId,
-}: {
-  field: RangeFieldConfig<T>;
-  value: RangeValue;
-  onChange: (range: RangeValue) => void;
-  testId: string;
-}): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  const inverted = isRangeInverted(value);
-  const { key, emitted } = useOutsideResetKey(value);
-  return (
-    <Box data-testid={`${testId}-panel`}>
-      {/* Above the inputs, not below: the presets are the answer for most
-          merchants, and the two date pickers are the escape hatch. */}
-      <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>
-        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />
-      </Box>
-      {/* Top-aligned: a day that does not exist grows ITS field by a message
-          line, and centring would push the other box half a line down. The two
-          boxes are one height, so with no message this is the same row. */}
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
-        <BoundField
-          key={`min-${key}`}
-          field={field}
-          label={copy.filters.rangeStart}
-          value={value.min}
-          onChange={(min) => onChange(emitted({ ...value, min }))}
-          testId={`${testId}-min`}
-        />
-        <BoundField
-          key={`max-${key}`}
-          field={field}
-          label={copy.filters.rangeEnd}
-          value={value.max}
-          onChange={(max) => onChange(emitted({ ...value, max }))}
-          testId={`${testId}-max`}
-        />
-      </Box>
-      {inverted && (
-        <Typography
-          component="p"
-          data-testid={`${testId}-inverted`}
-          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
-        >
-          {copy.filters.rangeInvalid}
-        </Typography>
-      )}
-      {/* BOTH days are in the result. Saying so is FUT-668's other half: the
-          bounds compare as ISO strings precisely so `até` keeps its whole day,
-          and nothing on screen would otherwise tell the merchant that. */}
-      {field.kind === 'day' && !inverted && (
-        <Typography
-          component="p"
-          data-testid={`${testId}-inclusive`}
-          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}
-        >
-          {copy.filters.rangeInclusiveNote}
-        </Typography>
-      )}
-    </Box>
-  );
-}
+// Re-exported: the pair moved to its own file, and its importers keep their path.
+export { RangeBounds };
 
 /**
  * The pill + its popover. Bounds commit on change (the list is server-driven, so
@@ -265,6 +152,38 @@ function RangeTrigger<T extends Record<string, unknown>>({
   );
 }
 
+/**
+ * How many months the pill's calendar shows: two from the theme's `md` up,
+ * where the popover has the ~670px they take; one below it.
+ *
+ * A media query, not an `sx` breakpoint, because it decides what to RENDER —
+ * CSS cannot un-render a second month. `up('md')` so that where nothing can be
+ * measured (a test, the server) the answer is the one month that always fits.
+ */
+function useCalendarMonths(): 1 | 2 {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up('md')) ? 2 : 1;
+}
+
+/**
+ * The day popover's width. Below `sm` it takes the screen's (less the
+ * popover's own 16px margins, which its `maxWidth` already keeps), so the boxes
+ * and the month share it instead of leaving a strip of grid beside a narrow
+ * card. From `sm` to `md` it holds one month, and sized to its content the
+ * preset row alone stretched it to ~515px with the month hugging the left and
+ * a band of nothing beside it; 400 keeps the month and the boxes one width.
+ * From `md` its content — two months — sets it.
+ */
+const DAY_PAPER_SX = (theme: Theme) => ({
+  width: { xs: '100%', sm: rem(theme, 400), md: 'auto' },
+  // Below `sm` 8px from each edge and 8px of padding, so the month gets the
+  // 280px seven 40px day columns need: at 320 it had 256 and every day was a
+  // 33px target (FUT-4144 UI review).
+  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },
+  p: { xs: 1, sm: 2 },
+});
+
+
 export function RangePill<T extends Record<string, unknown>>({
   field,
   value,
@@ -279,10 +198,11 @@ export function RangePill<T extends Record<string, unknown>>({
   onOpenChange?: (open: boolean) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
-  const active = isRangeSet(value);
+  const still = useStillAnchor();
   const testId = `${testIdPrefix}-range-${field.id}`;
+  const calendarMonths = useCalendarMonths();
+  const theme = useTheme();
+  const phone = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <>
       <RangeTrigger
@@ -290,42 +210,30 @@ export function RangePill<T extends Record<string, unknown>>({
         value={value}
         onChange={onChange}
         onOpen={(element) => {
-          setAnchor(element);
+          still.open(element);
           onOpenChange?.(true);
         }}
-        open={Boolean(anchor)}
+        open={Boolean(still.anchor)}
         testId={testId}
       />
       <Popover
-        open={Boolean(anchor)}
-        anchorEl={anchor}
+        {...still.popoverProps}
         onClose={() => {
-          setAnchor(null);
+          still.close();
           onOpenChange?.(false);
         }}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}
+        // Below `sm` a day popover keeps 8px from the screen's edges instead of 16.
+        marginThreshold={field.kind === 'day' && phone ? remPx(theme, 8) : undefined}
+        slotProps={{ paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === 'day' && DAY_PAPER_SX] } }}
       >
-        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />
-        {/* An inverted window is not an error the merchant must fix before the
-            list responds — it simply matches nothing, and saying so beats an
-            empty grid with no explanation (FUT-668). */}
-        {active && (
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>
-            <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
-              {rangeChipLabel(field, value)}
-            </Typography>
-            <Button
-              variant="text"
-              size="small"
-              onClick={() => onChange({})}
-              data-testid={`${testId}-clear`}
-              sx={{ textTransform: 'none' }}
-            >
-              {copy.filters.clear}
-            </Button>
-          </Box>
-        )}
+        <RangeBounds
+          field={field}
+          value={value}
+          onChange={onChange}
+          testId={testId}
+          calendarMonths={calendarMonths}
+        />
+        <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />
       </Popover>
     </>
   );
@@ -349,13 +257,22 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   testId: string;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
+  // The slide-in panel stays mounted while closed; its calendar does not.
+  // Outside a `TableFilter` (the "Mais" sheet, a test) the pair is on screen.
+  const panel = useContext(TableFilterContext);
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
         <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }}>
           {field.label}
         </Typography>
-        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />
+        <RangeBounds
+          field={field}
+          value={value}
+          onChange={onChange}
+          testId={testId}
+          showCalendar={panel ? panel.open : true}
+        />
       </Box>
     );
   }

package/src/components/data-display/DataViews/data-views-range-summary.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import React from 'react';
+
+import { useDataViewsCopy } from './data-views-copy-context';
+import { isRangeSet, rangeChipLabel } from './data-views-range-values';
+import type { RangeFieldConfig, RangeValue } from './data-views-types';
+import { sxRem } from '../../../tokens/relative';
+
+/**
+ * The applied window in words, and "Limpar".
+ *
+ * An inverted window is not an error the merchant must fix before the list
+ * responds — it simply matches nothing, and saying so beats an empty grid with
+ * no explanation (FUT-668).
+ *
+ * A DAY filter keeps the row's height while nothing is applied: its first tap
+ * on the calendar applies a bound, and a row appearing then grew the popover
+ * 26px and moved it 32px up at 320×568, the day under the finger with it
+ * (FUT-4144 UI review round 2). The held row is invisible and inert.
+ */
+export function RangeSummary<T extends Record<string, unknown>>({
+  field,
+  value,
+  onClear,
+  testId,
+}: {
+  field: RangeFieldConfig<T>;
+  value: RangeValue;
+  onClear: () => void;
+  testId: string;
+}): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
+  const active = isRangeSet(value);
+  if (!active && field.kind !== 'day') return null;
+  return (
+    <Box
+      aria-hidden={active ? undefined : true}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 2,
+        mt: { xs: 0.5, sm: 1.5 },
+        visibility: active ? undefined : 'hidden',
+      }}
+    >
+      <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
+        {active ? rangeChipLabel(field, value) : field.label}
+      </Typography>
+      <Button
+        variant="text"
+        size="small"
+        onClick={active ? onClear : undefined}
+        tabIndex={active ? undefined : -1}
+        data-testid={active ? `${testId}-clear` : undefined}
+        sx={{ textTransform: 'none' }}
+      >
+        {copy.filters.clear}
+      </Button>
+    </Box>
+  );
+}

package/src/components/data-display/DataViews/data-views-still-anchor.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import type { PopoverActions } from '@mui/material/Popover/index.js';
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+
+/**
+ * What the popover hangs from: the trigger's box as it was when it opened —
+ * a MUI "virtual element", so the popover keeps its own anchor origin.
+ */
+interface StillElement {
+  nodeType: 1;
+  getBoundingClientRect: () => DOMRect;
+}
+
+const stillOf = (element: HTMLElement): StillElement => {
+  const box = element.getBoundingClientRect();
+  return { nodeType: 1, getBoundingClientRect: () => box };
+};
+
+/**
+ * A popover that holds STILL while it is open (FUT-4144 UI review round 2).
+ *
+ * Anchored to an element, a popover follows it. A filter applied from inside
+ * one grows the toolbar a "Limpar" and a badge, the trigger moves, and the
+ * panel jumped 55px sideways under the finger that had just tapped a day. The
+ * point it hangs from is read once, when it opens — and again only when the
+ * window itself is resized, which is the one move a reader expects it to make.
+ *
+ * The other move it makes is when its own HEIGHT changes after it was placed
+ * (a preset row settling into a select once measured, a refused day's message):
+ * MUI places a popover once, so a taller one ran off a 320×568 screen. The
+ * paper's size is watched and the popover re-placed, which moves it only when
+ * its height really changed — never on a tap that leaves it the same size.
+ *
+ * Spread `popoverProps` onto a MUI `Popover` and pass `paperRef` as the paper
+ * slot's `ref`.
+ */
+export function useStillAnchor(): {
+  anchor: HTMLElement | null;
+  open: (element: HTMLElement) => void;
+  close: () => void;
+  paperRef: (node: HTMLDivElement | null) => void;
+  popoverProps: {
+    open: boolean;
+    anchorEl: StillElement | null;
+    anchorOrigin: { vertical: 'bottom'; horizontal: 'left' };
+    action: RefObject<PopoverActions | null>;
+  };
+} {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [still, setStill] = useState<StillElement | null>(null);
+  const action = useRef<PopoverActions | null>(null);
+  const observer = useRef<ResizeObserver | null>(null);
+  const paperRef = useCallback((node: HTMLDivElement | null) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    if (!node || typeof ResizeObserver === 'undefined') return;
+    let height = node.offsetHeight;
+    observer.current = new ResizeObserver(() => {
+      if (node.offsetHeight === height) return;
+      height = node.offsetHeight;
+      action.current?.updatePosition();
+    });
+    observer.current.observe(node);
+  }, []);
+
+  useEffect(() => {
+    if (!anchor) return undefined;
+    // A trigger unmounted while its panel is open reads a zero box: keep the
+    // frozen one rather than send the panel to the corner.
+    const follow = (): void => {
+      if (anchor.isConnected) setStill(stillOf(anchor));
+    };
+    window.addEventListener('resize', follow);
+    return () => window.removeEventListener('resize', follow);
+  }, [anchor]);
+
+  return {
+    anchor,
+    open: (element) => {
+      setStill(stillOf(element));
+      setAnchor(element);
+    },
+    close: () => setAnchor(null),
+    paperRef,
+    popoverProps: {
+      open: Boolean(anchor),
+      anchorEl: anchor ? still : null,
+      anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+      action,
+    },
+  };
+}

package/src/components/data-display/DayRuler/DayRuler.styles.ts

@@ -1,8 +1,7 @@
-import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
+import { alpha, type CSSObject, type SxProps, type Theme } from '@mui/material/styles/index.js';
 
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
 import { rem, sxRem } from '../../../tokens/relative';
-import { softSignal } from '../../../tokens/surfaces';
 import { actualBarColor, blockToneStyles, breakHatch } from '../ScheduleGrid/schedule-tones';
 import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
@@ -58,21 +57,35 @@ export function coverageSx(hours: number): SxProps<Theme> {
   });
 }
 
+/**
+ * How strongly a staffed hour is filled: the prototype's tonal success step, deeper with each
+ * person on the escala (0.18 + 0.09 per person, at most 0.85). An empty hour has none.
+ */
+export function coverageStrength(count: number): number {
+  if (count <= 0) return 0;
+  return Math.min(0.85, 0.18 + count * 0.09);
+}
+
 export function coverageCellSx(count: number): SxProps<Theme> {
-  return (theme: Theme) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: rem(theme, M.coverage.font),
-    borderRadius: rem(theme, M.coverage.radius),
-    color: theme.palette.text.primary,
-    // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831): a staffed
-    // hour reads by its fill alone; the hairline stays transparent so a count never shifts its cell.
-    backgroundColor: count > 0 ? softSignal(theme, 'success') : theme.palette.action.hover,
-    border: '1px solid transparent',
-    minWidth: 0,
-    overflow: 'hidden',
-  });
+  return (theme: Theme) => {
+    const strength = coverageStrength(count);
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: rem(theme, M.coverage.font),
+      borderRadius: rem(theme, M.coverage.radius),
+      color: theme.palette.text.primary,
+      // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831). It is
+      // the success colour over the page, so a staffed hour is LIGHTER than an empty one in dark mode
+      // and plainly green in light, where the soft-signal blend read as the empty grey. The hairline
+      // stays transparent so a count never shifts its cell.
+      backgroundColor: strength > 0 ? alpha(theme.palette.success.main, strength) : theme.palette.action.hover,
+      border: '1px solid transparent',
+      minWidth: 0,
+      overflow: 'hidden',
+    };
+  };
 }
 
 export const axisSx: SxProps<Theme> = (theme: Theme) => ({

package/src/components/form/Calendar/Calendar.md

@@ -209,11 +209,26 @@ month/year buttons rather than squeezing them (`SelectorsFitA320Sheet`).
 
 ## Accessibility
 
-- Container month: `role="grid"`, labelled by month/year (e.g., `aria-labelledby="cal-2025-09"`).
+- Container month: `role="grid"`, named by its month and year in `locale`
+  (`aria-label="outubro de 2026"`). It used to point `aria-labelledby` at an id
+  nothing carried, so the grid had no name (FUT-4144).
 - Weekday headers: `role="columnheader"`, short names with `abbr` for SR if needed.
 - Day cells: `role="gridcell"`, `aria-selected` true for selected day(s). For ranges, set `aria-selected="true"` on all in range or use `aria-current="date"` for today.
+- Each visible day is named whole, in `locale`: `aria-label="1 de outubro de 2026"`
+  (`"October 1, 2026"` in en-US). The cell's text is the bare number, which in a
+  two-month range calendar names two different days (FUT-4144).
+- The arrows of the default caption carry `labels.previousMonth`/`nextMonth`
+  when the host passes `labels`; without `labels` they stay as they were.
 - Disabled days: `aria-disabled="true"`.
-- Keyboard support (roving focus within the grid):
+- With `showOutsideDays={false}` an outside day is an inert, `aria-hidden`
+  placeholder: no button, no name, no tab stop. Visible outside days are
+  unchanged.
+- Keyboard support (roving focus within the grid). When a NAVIGATION key is
+  pressed on a day (the reader tabbed or clicked onto it), focus follows the tab
+  stop to the new day in its own month (never its muted copy in the month
+  beside it), across a month change too. Enter, Space, Tab and Escape move no
+  day and never move focus; with focus on the container it stays there, as
+  before:
   - Arrow keys: move by 1 day (left/right) or 1 week (up/down).
   - Home/End: move to start/end of week.
   - PageUp/PageDown: previous/next month (with Shift for year).

package/src/components/form/Calendar/Calendar.tsx

@@ -1,7 +1,7 @@
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -9,6 +9,7 @@ import { resolveLabels } from '../../../utils/resolve-labels';
 
 import { resolveCalendarProps } from './Calendar.helpers';
 import { useCalendar } from './Calendar.hooks';
+import { navigateFocus } from './Calendar.keyboard';
 import { useCalendarPicker } from './Calendar.picker';
 import type { CalendarProps, ResolvedCalendarProps } from './Calendar.types';
 import type { DayCellContext } from './CalendarDayCell';
@@ -32,6 +33,7 @@ type CalendarState = ReturnType<typeof useCalendar>;
 
 const buildDayContext = (props: ResolvedCalendarProps, calendar: CalendarState): DayCellContext => ({
   selectionMode: props.selectionMode,
+  locale: props.locale,
   value: props.value,
   range: props.range,
   showOutsideDays: props.showOutsideDays,
@@ -60,6 +62,45 @@ const useRootRef = (forwarded: React.ForwardedRef<HTMLDivElement>) => {
   return { rootRef, setRoot };
 };
 
+/** The tab stop as a day of its OWN month — side by side, an outside copy of it comes first in the DOM. */
+const OWN_MONTH_STOP = '[role="gridcell"][tabindex="0"][data-in-month="true"]';
+const ANY_STOP = '[role="gridcell"][tabindex="0"]';
+
+/**
+ * Keeps the keyboard's place visible when it is on a DAY.
+ *
+ * The arrows move the grid's one tab stop (`focusedDate`), and that is enough
+ * while the container holds focus. But a reader who tabbed onto a day, or
+ * clicked one, has focus on that day's button: the tab stop moved and focus
+ * stayed behind on a cell that is no longer it, so the ring sat on the old day
+ * and a month change unmounted it under the reader.
+ *
+ * So a NAVIGATION key pressed on a day notes where the tab stop was, and once
+ * it has moved, focus follows it to the day in its own month. Any other key —
+ * Enter, Tab, Escape — clears the note: Enter re-sets the same day and must
+ * leave focus alone, and a stale note would pull focus into the grid on the
+ * next mouse pick.
+ */
+const useFollowDayFocus = (
+  rootRef: React.RefObject<HTMLDivElement | null>,
+  focusedDate: Date,
+  firstDayOfWeek: number,
+) => {
+  const movedFrom = useRef<number | null>(null);
+  useEffect(() => {
+    const from = movedFrom.current;
+    movedFrom.current = null;
+    if (from === null || from === focusedDate.getTime()) return;
+    const root = rootRef.current;
+    (root?.querySelector<HTMLElement>(OWN_MONTH_STOP) ?? root?.querySelector<HTMLElement>(ANY_STOP))?.focus();
+  }, [rootRef, focusedDate]);
+  return (event: React.KeyboardEvent) => {
+    const onDay = (event.target as HTMLElement).getAttribute('role') === 'gridcell';
+    const moves = navigateFocus(event.key, focusedDate, { firstDayOfWeek, shiftKey: event.shiftKey }) !== null;
+    movedFrom.current = onDay && moves ? focusedDate.getTime() : null;
+  };
+};
+
 export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {
   const props = resolveCalendarProps(componentProps);
   const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;
@@ -69,6 +110,8 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
   const bounds = { minDate: props.minDate, maxDate: props.maxDate };
   const picker = useCalendarPicker({ rootRef, bounds, ...calendar });
   const dayContext = buildDayContext(props, calendar);
+  const noteKeyTarget = useFollowDayFocus(rootRef, calendar.focusedDate, props.firstDayOfWeek);
+  const labels = resolveLabels(EN_US_UI_LABELS.calendar, props.labels);
   // The selectors caption always resolves to one month (see the helpers).
   const firstMonth = calendar.monthMatrices[0];
 
@@ -81,7 +124,14 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
       tabIndex={0}
       // The day keys belong to the days: with a month or year grid open there
       // is no focused day on screen to move.
-      onKeyDown={picker.view === 'days' ? calendar.handleKeyDown : undefined}
+      onKeyDown={
+        picker.view === 'days'
+          ? (event) => {
+              noteKeyTarget(event);
+              calendar.handleKeyDown(event);
+            }
+          : undefined
+      }
       data-testid="calendar-container"
       sx={containerSx(monthsToShow)}
     >
@@ -93,7 +143,7 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
             weekdayNames={calendar.weekdayNames}
             dayContext={dayContext}
             bounds={bounds}
-            labels={resolveLabels(EN_US_UI_LABELS.calendar, props.labels)}
+            labels={labels}
             picker={picker}
             onPreviousMonth={() => {
               picker.showDays();
@@ -114,6 +164,9 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
               locale={locale}
               weekdayNames={calendar.weekdayNames}
               renderHeader={renderHeader}
+              // Only a host that passed `labels` gets named arrows: without
+              // them the arrows caption stays exactly as it always was.
+              labels={props.labels ? labels : undefined}
               onPreviousMonth={calendar.goToPreviousMonth}
               onNextMonth={calendar.goToNextMonth}
               dayContext={dayContext}