@12-apps/ui 6.86.1 → 6.87.0

package/src/components/feedback/SequenceResolver/sequence-model.ts

@@ -13,7 +13,14 @@ import type { SequenceItem, SequenceSummary } from './SequenceResolver.types';
 
 /** How a visited step was left. */
 export type Visit<I extends SequenceItem, R> =
-  | { item: I; outcome: 'resolved'; result: R; alsoResolved?: number }
+  | {
+      item: I;
+      outcome: 'resolved';
+      result: R;
+      alsoResolved?: number;
+      /** The step said `canGoBack: false` when it was answered: the answer has no inverse, so Back stops here. */
+      final?: true;
+    }
   | { item: I; outcome: 'skipped' };
 
 export interface RunState<I extends SequenceItem, R> {
@@ -47,9 +54,17 @@ function dedupe<I extends SequenceItem>(items: readonly I[], skip: ReadonlySet<s
   return out;
 }
 
-/** A fresh run over `queue` (a repeated key counts once). */
-export function startRun<I extends SequenceItem, R>(queue: readonly I[]): RunState<I, R> {
-  return { visits: [], ahead: dedupe(queue, new Set()), held: [] };
+/**
+ * A fresh run over `queue` (a repeated key counts once). With `initialKey` the
+ * run opens at that entry; the entries before it follow it, in queue order —
+ * nothing is passed over (a click on one problem's block opens the run there).
+ */
+export function startRun<I extends SequenceItem, R>(queue: readonly I[], initialKey?: string): RunState<I, R> {
+  const ahead = dedupe(queue, new Set());
+  const at = initialKey === undefined ? -1 : ahead.findIndex((item) => item.key === initialKey);
+  const first = ahead[at];
+  if (at <= 0 || !first) return { visits: [], ahead, held: [] };
+  return { visits: [], ahead: [first, ...ahead.slice(0, at), ...ahead.slice(at + 1)], held: [] };
 }
 
 /**
@@ -106,9 +121,12 @@ export function resolveRun<I extends SequenceItem, R>(
   result: R,
   item: I | undefined = state.ahead[0],
   alsoResolved = 0,
+  final = false,
 ): RunState<I, R> {
   if (!item || !state.ahead.some((entry) => entry.key === item.key)) return state;
-  const visit: Visit<I, R> = alsoResolved > 0 ? { item, outcome: 'resolved', result, alsoResolved } : { item, outcome: 'resolved', result };
+  const visit: Visit<I, R> = { item, outcome: 'resolved', result };
+  if (alsoResolved > 0) visit.alsoResolved = alsoResolved;
+  if (final) visit.final = true;
   return {
     visits: [...state.visits, visit],
     ahead: state.ahead.filter((entry) => entry.key !== item.key),
@@ -154,6 +172,49 @@ export function backRun<I extends SequenceItem, R>(state: RunState<I, R>, key?:
   };
 }
 
+/** True when Back may return from the step on screen: a previous step exists and its answer has an inverse. */
+export function canReturn<I extends SequenceItem, R>(state: RunState<I, R>): boolean {
+  const last = previousOf(state);
+  return last !== undefined && !(last.outcome === 'resolved' && last.final);
+}
+
+/**
+ * The step a jump to `keys` (one category of the overview) lands on: the
+ * first of them still AHEAD, in run order; else the first one passed over
+ * (skipped, or left by an earlier jump). An answered key is never a target.
+ */
+export function jumpTargetOf<I extends SequenceItem, R>(state: RunState<I, R>, keys: readonly string[]): string | undefined {
+  const wanted = new Set(keys);
+  const ahead = state.ahead.find((item) => wanted.has(item.key));
+  if (ahead) return ahead.key;
+  return state.visits.find((visit) => visit.outcome === 'skipped' && wanted.has(visit.item.key))?.item.key;
+}
+
+/**
+ * Jump to `key` ("Ver todos" → a category's Resolver, or `api.jumpTo`).
+ *
+ * The step on screen is recorded as PASSED OVER — Back from the target returns
+ * to it at once, with nothing to undo — and the target goes first; the rest
+ * stays in run order. A target that was passed over before is taken back out
+ * of the history. The step already on screen, an answered key or an unknown
+ * one leaves the run as it is.
+ */
+export function jumpRun<I extends SequenceItem, R>(state: RunState<I, R>, key: string): RunState<I, R> {
+  const [current] = state.ahead;
+  if (current?.key === key) return state;
+  const passed = state.visits.findIndex((visit) => visit.outcome === 'skipped' && visit.item.key === key);
+  const target = state.ahead.find((item) => item.key === key) ?? state.visits[passed]?.item;
+  if (!target) return state;
+  const visits = passed >= 0 ? state.visits.filter((_, index) => index !== passed) : [...state.visits];
+  const rest = state.ahead.filter((item) => item.key !== key && item.key !== current?.key);
+  const pins = current ? leaving(state, current.key) : { pinned: state.pinned, held: state.held };
+  return {
+    visits: current ? [...visits, { item: current, outcome: 'skipped' }] : visits,
+    ahead: [target, ...rest],
+    ...pins,
+  };
+}
+
 /** Where the run stands. */
 export function summaryOf<I extends SequenceItem, R>(state: RunState<I, R>): SequenceSummary {
   const resolved = state.visits.filter((visit) => visit.outcome === 'resolved').length;

package/src/components/feedback/SequenceResolver/useSequenceRun.ts

@@ -2,7 +2,9 @@ import { useCallback, useRef, useState } from 'react';
 
 import {
   backRun,
+  canReturn,
   currentOf,
+  jumpRun,
   pinRun,
   previousOf,
   resolveRun,
@@ -19,9 +21,16 @@ interface RunInputs<I extends SequenceItem, R> {
   /** True while the run is on screen: open, and past the intro. */
   active: boolean;
   queue: readonly I[];
+  /** The key a fresh run opens at (its step goes first; nothing is passed over). */
+  initialKey?: string;
   onBack?: (item: I, result: R) => Promise<void> | void;
   /** The message for a rejection that carries none. */
   failed: string;
+  /**
+   * Read when an answer is recorded: false when the step on screen said
+   * `canGoBack: false` (its answer has no inverse, so Back stops at it).
+   */
+  stepAllowsBack: () => boolean;
 }
 
 export interface SequenceRun<I extends SequenceItem, R> {
@@ -31,6 +40,8 @@ export interface SequenceRun<I extends SequenceItem, R> {
   resolve: (result: R | PromiseLike<R>, options?: SequenceResolveOptions) => void;
   skip: () => void;
   back: () => void;
+  /** Jump to `key`: the step on screen is passed over and the target shows (see `jumpRun`). */
+  jumpTo: (key: string) => void;
 }
 
 interface Tracked<I extends SequenceItem, R> {
@@ -138,15 +149,15 @@ function useAsyncGate(failed: string): AsyncGate {
  * no frame ever shows a step the queue has already dropped.
  */
 function useTrackedRun<I extends SequenceItem, R>(
-  inputs: { open: boolean; active: boolean; queue: readonly I[] },
+  inputs: { open: boolean; active: boolean; queue: readonly I[]; initialKey?: string },
   onRestart: () => void,
 ): { run: RunState<I, R>; update: (step: (run: RunState<I, R>) => RunState<I, R>) => void } {
-  const { open, active, queue } = inputs;
-  const [tracked, setTracked] = useState<Tracked<I, R>>(() => ({ run: startRun(queue), queue, active, open }));
+  const { open, active, queue, initialKey } = inputs;
+  const [tracked, setTracked] = useState<Tracked<I, R>>(() => ({ run: startRun(queue, initialKey), queue, active, open }));
   let current = tracked;
   if (active !== tracked.active || open !== tracked.open || queue !== tracked.queue) {
     const restart = (active && !tracked.active) || (open && !tracked.open);
-    current = { run: restart ? startRun(queue) : syncRun(tracked.run, queue), queue, active, open };
+    current = { run: restart ? startRun(queue, initialKey) : syncRun(tracked.run, queue), queue, active, open };
     if (restart) onRestart();
     setTracked(current);
   }
@@ -158,24 +169,25 @@ function useTrackedRun<I extends SequenceItem, R>(
 
 /** The run's state and its verbs — the index/back/skip/done logic, once (FUT-3671). */
 export function useSequenceRun<I extends SequenceItem, R>(inputs: RunInputs<I, R>): SequenceRun<I, R> {
-  const { open, active, queue, onBack, failed } = inputs;
+  const { open, active, queue, initialKey, onBack, failed, stepAllowsBack } = inputs;
   const gate = useAsyncGate(failed);
-  const { run, update } = useTrackedRun<I, R>({ open, active, queue }, gate.reset);
+  const { run, update } = useTrackedRun<I, R>({ open, active, queue, initialKey }, gate.reset);
   const { settle, isPending, clearError } = gate;
 
   const onScreen = currentOf(run);
   const resolve = (result: R | PromiseLike<R>, options?: SequenceResolveOptions): void => {
     const also = options?.alsoResolved ?? 0;
     if (isPending() || !onScreen) return;
+    const final = !stepAllowsBack();
     if (isThenable(result)) {
       // The host's refetch may drop the entry before its write returns: keep
       // it on screen meanwhile, and answer THIS entry when it does.
       update((prev) => pinRun(prev, onScreen.key));
-      settle(result, 'resolve', onScreen.key, (value) => update((prev) => resolveRun(prev, value, onScreen, also)));
+      settle(result, 'resolve', onScreen.key, (value) => update((prev) => resolveRun(prev, value, onScreen, also, final)));
       return;
     }
     clearError();
-    update((prev) => resolveRun(prev, result, onScreen, also));
+    update((prev) => resolveRun(prev, result, onScreen, also, final));
   };
 
   const skip = (): void => {
@@ -186,7 +198,7 @@ export function useSequenceRun<I extends SequenceItem, R>(inputs: RunInputs<I, R
 
   const back = (): void => {
     const last = previousOf(run);
-    if (isPending() || !last) return;
+    if (isPending() || !last || !canReturn(run)) return;
     if (last.outcome === 'resolved' && onBack) {
       // `new Promise` so a handler that throws synchronously lands in the same
       // rejection path as one that rejects.
@@ -198,8 +210,14 @@ export function useSequenceRun<I extends SequenceItem, R>(inputs: RunInputs<I, R
     update((prev) => backRun(prev, last.item.key));
   };
 
+  const jumpTo = (key: string): void => {
+    if (isPending()) return;
+    clearError();
+    update((prev) => jumpRun(prev, key));
+  };
+
   // An error belongs to the screen it was raised on: once a queue change (or
   // anything else) moves the run to another step, it no longer shows.
   const error = gate.error && gate.error.screen === screenOf(onScreen) ? gate.error.message : null;
-  return { run, busy: gate.busy !== null, error, resolve, skip, back };
+  return { run, busy: gate.busy !== null, error, resolve, skip, back, jumpTo };
 }

package/src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx

@@ -15,10 +15,22 @@ import {
 import type { AddressAutocompleteState } from './AddressAutocomplete.hooks';
 import { AddressInputField } from './AddressInputField';
 import { AddressOption } from './AddressOption';
-import { AddressSuggestionsPaper } from './AddressSuggestionsPaper';
+import { AddressSuggestionsPaper, type AddressSuggestionsPaperProps } from './AddressSuggestionsPaper';
 
 export type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutocompleteState;
 
+// What the open list says when it is empty. A failed lookup is not an empty
+// answer: the field's helper text and the alert below already say what went
+// wrong.
+const emptyTextFor = (
+  text: { typeToSearch: string; noAddressesFound: string },
+  inputValue: string,
+  apiError: string | null | undefined,
+): string | undefined => {
+  if (apiError) return undefined;
+  return inputValue.length <= MIN_QUERY_LENGTH ? text.typeToSearch : text.noAddressesFound;
+};
+
 // The live field, rendered once Google Maps (or the mock stand-in) is ready.
 export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
   copy,
@@ -42,6 +54,9 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
   handleGetCurrentLocation,
 }) => {
   const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy);
+  const paperProps: AddressSuggestionsPaperProps = {
+    emptyText: emptyTextFor(text, inputValue, apiError),
+  };
   return (
   <Box data-testid="address-autocomplete-container">
     <Autocomplete
@@ -57,9 +72,7 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       getOptionLabel={addressOptionLabel}
       isOptionEqualToValue={isSameAddressOption}
       PaperComponent={AddressSuggestionsPaper}
-      noOptionsText={
-        inputValue.length <= MIN_QUERY_LENGTH ? text.typeToSearch : text.noAddressesFound
-      }
+      slotProps={{ paper: paperProps }}
       renderOption={({ key, ...optionProps }, option, state) => (
         <AddressOption
           key={key}

package/src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx

@@ -1,14 +1,30 @@
 import type { PaperProps } from '@mui/material/Paper/index.js';
+import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
-import React from 'react';
+import React, { Children } from 'react';
 
 import { rem } from '../../../tokens/relative';
 
+export interface AddressSuggestionsPaperProps extends PaperProps {
+  /**
+   * Said when the list is open with nothing in it. MUI never renders its own
+   * `noOptionsText` for a `freeSolo` field, so an empty list was a blank strip
+   * (FUT-4162): the paper says it instead, exactly when MUI gave it no content
+   * (no suggestions and no loading row).
+   */
+  emptyText?: React.ReactNode;
+}
+
 // The dropdown surface, frosted to match the glass field.
-export const AddressSuggestionsPaper: FC<PaperProps> = (props) => {
+export const AddressSuggestionsPaper: FC<AddressSuggestionsPaperProps> = ({
+  emptyText,
+  children,
+  ...props
+}) => {
   const theme = useTheme();
+  const empty = Children.toArray(children).length === 0;
 
   return (
     <Paper
@@ -22,6 +38,19 @@ export const AddressSuggestionsPaper: FC<PaperProps> = (props) => {
         WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
       }}
-    />
+    >
+      {children}
+      {empty && emptyText && (
+        <Box
+          role="presentation"
+          data-testid="address-suggestions-empty"
+          // Keeps the input focused, as MUI's own no-options row does.
+          onMouseDown={(event) => event.preventDefault()}
+          sx={{ px: 2, py: 1.5, color: 'text.secondary' }}
+        >
+          {emptyText}
+        </Box>
+      )}
+    </Paper>
   );
 };

package/src/components/form/Calendar/Calendar.band.ts

@@ -0,0 +1,118 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { alpha, blend, darken, decomposeColor, getContrastRatio, getLuminance, lighten } from '../../../tokens/color';
+
+import { isSameDay } from './Calendar.dates';
+import type { DateRange, DayRenderArgs, SelectionMode } from './Calendar.types';
+
+/**
+ * WHERE A DAY SITS ON THE RANGE BAND (FUT-4162).
+ *
+ * A selected range is ONE band behind its days, not a tile per day: the grid
+ * has no column gap and each day paints its share of the band. A day strictly
+ * inside the range paints all of it (`full`); the first and last day paint the
+ * half that faces the rest of the range (`after` / `before`), so the band runs
+ * into the round endpoint and stops at its centre. A range of one day, or no
+ * range, paints none.
+ *
+ * While only the start is chosen, the hovered day stands in for the end, the
+ * same preview `isDateInRange` draws.
+ */
+export type DayBand = 'none' | 'full' | 'after' | 'before';
+
+// The other end of the range: its end, or while only the start is chosen, the
+// hovered day standing in for it.
+const otherEnd = (range: DateRange, hoveredDate: Date | null, isDisabled: (date: Date) => boolean) =>
+  range.end ?? (hoveredDate && !isDisabled(hoveredDate) ? hoveredDate : null);
+
+// The half an endpoint paints: towards the rest of the range.
+const endpointBand = (date: Date, start: Date, other: Date): DayBand => {
+  const [first, last] = start < other ? [start, other] : [other, start];
+  if (isSameDay(date, first)) return 'after';
+  if (isSameDay(date, last)) return 'before';
+  return 'none';
+};
+
+export const bandFor = ({
+  args,
+  selectionMode,
+  range,
+  hoveredDate,
+  isDisabled,
+}: {
+  args: DayRenderArgs;
+  selectionMode: SelectionMode;
+  range: DateRange;
+  hoveredDate: Date | null;
+  isDisabled: (date: Date) => boolean;
+}): DayBand => {
+  if (selectionMode !== 'range') return 'none';
+  if (args.inRange) return 'full';
+
+  const other = otherEnd(range, hoveredDate, isDisabled);
+  if (!range.start || !other || isSameDay(range.start, other)) return 'none';
+  return endpointBand(args.date, range.start, other);
+};
+
+/**
+ * The band: the brand at a quarter strength, so it reads as the brand's tint on
+ * any ground (on white it is the brand three quarters of the way to white).
+ */
+export const BAND_OPACITY = 0.25;
+
+export const bandColor = (theme: Theme): string => alpha(theme.palette.primary.main, BAND_OPACITY);
+
+/**
+ * WCAG AA for body text, plus a margin: `getLuminance` rounds to three
+ * places, which can move a ratio by about a hundredth either way.
+ */
+const ENDPOINT_MIN_CONTRAST = 4.55;
+const STEP = 0.01;
+
+// The ink as it reads ON the fill: MUI's dark ink is 87% black, so it is laid
+// over the fill before it is measured, rather than taken as solid black.
+const readsAt = (ink: string, fill: string): number => {
+  const [, , , opacity = 1] = decomposeColor(ink).values;
+  return getContrastRatio(opacity < 1 ? blend(fill, ink, opacity) : ink, fill);
+};
+
+// Light ink (white) wants a darker fill; dark ink a lighter one.
+const awayFromInk = (ink: string): ((color: string, coefficient: number) => string) =>
+  getLuminance(ink) > 0.5 ? darken : lighten;
+
+/**
+ * An endpoint's fill: the brand, moved away from its own ink JUST far enough
+ * for that ink to read at AA (FUT-4162).
+ *
+ * The ink is the palette's `primary.contrastText`, which MUI picks at 3:1, so
+ * a brand can ship an ink that reads at 3 to 4.5:1 on it — the default indigo
+ * is 4.47:1 under white. Rather than change the ink (every other component
+ * shares it), the fill gives way: darker under white ink, lighter under dark
+ * ink. A brand that already passes is returned unchanged; the default indigo
+ * moves by one percent, which no one can see.
+ */
+export const endpointFill = (theme: Theme): string => {
+  const { main, contrastText } = theme.palette.primary;
+  try {
+    if (readsAt(contrastText, main) >= ENDPOINT_MIN_CONTRAST) return main;
+    const move = awayFromInk(contrastText);
+    for (let coefficient = STEP; coefficient < 1; coefficient += STEP) {
+      const fill = move(main, coefficient);
+      if (readsAt(contrastText, fill) >= ENDPOINT_MIN_CONTRAST) return fill;
+    }
+    return move(main, 1);
+  } catch {
+    // A colour format the helpers cannot decompose: the brand as it is.
+    return main;
+  }
+};
+
+/** A hovered endpoint: one more step the same way, so it only gains contrast. */
+export const endpointHoverFill = (theme: Theme): string => {
+  const fill = endpointFill(theme);
+  try {
+    return awayFromInk(theme.palette.primary.contrastText)(fill, 0.15);
+  } catch {
+    return fill;
+  }
+};

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

@@ -5,14 +5,20 @@ import React from 'react';
 
 import { rem, sxRem } from '../../../tokens/relative';
 
+import type { DayBand } from './Calendar.band';
+import { bandColor, endpointFill, endpointHoverFill } from './Calendar.band';
 import type { DayRenderArgs } from './Calendar.types';
 
 /**
- * A day cell's LARGEST edge, 40 design px through the theme's type scale. The
- * cell is a square that fills its grid column up to this size, so the month
- * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).
+ * A column's width: the 304 design px a month asked for when its seven 40px
+ * cells sat 4px apart, shared by seven columns that now touch (FUT-4162). The
+ * cell fills its column up to this size, so the month shrinks with its
+ * container instead of holding a fixed 304px floor (FUT-3861).
  */
-const CELL_SIZE = sxRem(40);
+const COLUMN_SIZE = sxRem(304 / 7);
+
+/** 304/7 wide to 40 tall: the day's face is a 40 design px circle at full size. */
+const CELL_RATIO = '38 / 35';
 
 interface DayState extends DayRenderArgs {
   outside: boolean;
@@ -42,12 +48,24 @@ const dayClassNames = (state: DayState, custom?: string): string =>
 const isEndpoint = (day: DayRenderArgs): boolean =>
   day.selected || day.rangeStart || day.rangeEnd;
 
-const backgroundFor = (day: DayRenderArgs): string => {
-  if (isEndpoint(day)) return 'primary.main';
-  if (day.inRange || day.hovered) return 'primary.light';
-  return 'transparent';
+// The band's share of the cell (see `Calendar.band.ts`): all of it, or the
+// half that faces the rest of the range.
+const BAND_IMAGE: Record<Exclude<DayBand, 'none'>, (band: string) => string> = {
+  full: (band) => `linear-gradient(${band}, ${band})`,
+  after: (band) => `linear-gradient(to right, transparent 50%, ${band} 50%)`,
+  before: (band) => `linear-gradient(to left, transparent 50%, ${band} 50%)`,
+};
+
+// A gradient's `to right` is physical; a right-to-left grid starts a range on
+// its right, so the two halves trade places there.
+const inDirection = (band: Exclude<DayBand, 'none'>, theme: Theme): Exclude<DayBand, 'none'> => {
+  if (theme.direction !== 'rtl' || band === 'full') return band;
+  return band === 'after' ? 'before' : 'after';
 };
 
+const faceBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string =>
+  isEndpoint(day) ? endpointFill : 'transparent';
+
 const colorFor = (day: DayRenderArgs, visible: boolean): string => {
   if (isEndpoint(day)) return 'primary.contrastText';
   if (day.disabled) return 'text.disabled';
@@ -57,35 +75,65 @@ const colorFor = (day: DayRenderArgs, visible: boolean): string => {
   return 'text.primary';
 };
 
-const hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {
+const hoverBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string | undefined => {
   if (day.disabled) return undefined;
-  return day.selected ? 'primary.dark' : 'action.hover';
+  return isEndpoint(day) ? endpointHoverFill : 'action.hover';
 };
 
-const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
+// The band reaches the cell's edges so neighbouring days join; where a week
+// row ends, it rounds off instead of stopping square: half the cell each way
+// is a half-round cap on a cell as tall as it is wide.
+const BAND_RADIUS = '50%';
+
+/**
+ * One cell: the band, painted on the button across its whole column, and the
+ * day's round face, a `::before` circle behind the number. The face is a
+ * pseudo-element so the button's own content stays the bare day number a host's
+ * tests query (`getByText('27')` is the cell, as it always was).
+ */
+const dayCellSx = (day: DayRenderArgs, band: DayBand, visible: boolean): SxProps<Theme> => ({
+  position: 'relative',
+  isolation: 'isolate',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a
-  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the
-  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.
-  width: CELL_SIZE,
+  // The column it ASKS for keeps the month's intrinsic width at 304 (FUT-3861),
+  // now that the seven columns carry no gap between them; `maxWidth` and the
+  // column's `minmax(0, 1fr)` let it give way below that, and the ratio keeps
+  // it 40 tall at full size and shrinking with it.
+  width: COLUMN_SIZE,
   maxWidth: '100%',
-  aspectRatio: '1 / 1',
-  justifySelf: 'center',
+  aspectRatio: CELL_RATIO,
+  justifySelf: 'stretch',
   boxSizing: 'border-box',
   padding: 0,
   border: 'none',
-  borderRadius: 1,
+  background: 'none',
+  backgroundImage: band === 'none' ? 'none' : (theme: Theme) => BAND_IMAGE[inDirection(band, theme)](bandColor(theme)),
   cursor: day.disabled ? 'not-allowed' : 'pointer',
-  backgroundColor: backgroundFor(day),
   color: colorFor(day, visible),
   opacity: !day.inCurrentMonth && visible ? 0.5 : 1,
-  fontWeight: day.today ? 'bold' : 'normal',
-  '&:hover': {
+  fontWeight: day.today || isEndpoint(day) ? 'bold' : 'normal',
+  '&:nth-of-type(7n + 1)': { borderStartStartRadius: BAND_RADIUS, borderEndStartRadius: BAND_RADIUS },
+  '&:nth-of-type(7n)': { borderStartEndRadius: BAND_RADIUS, borderEndEndRadius: BAND_RADIUS },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    margin: 'auto',
+    zIndex: -1,
+    // A circle as tall as the cell: 40 design px at full size (FUT-3861).
+    height: '100%',
+    aspectRatio: '1 / 1',
+    maxWidth: '100%',
+    borderRadius: '50%',
+    backgroundColor: faceBackgroundFor(day),
+  },
+  '&:hover::before': {
     backgroundColor: hoverBackgroundFor(day),
   },
-  '&:focus': {
+  '&:focus': { outline: 'none' },
+  '&:focus::before': {
     outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
     outlineOffset: sxRem(1),
@@ -94,6 +142,7 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
 
 export interface CalendarDayProps {
   day: DayRenderArgs;
+  band: DayBand;
   focused: boolean;
   showOutsideDays: boolean;
   dayClassName?: (args: DayRenderArgs) => string;
@@ -104,6 +153,7 @@ export interface CalendarDayProps {
 
 export const CalendarDay: FC<CalendarDayProps> = ({
   day,
+  band,
   focused,
   showOutsideDays,
   dayClassName,
@@ -127,7 +177,7 @@ export const CalendarDay: FC<CalendarDayProps> = ({
       onClick={() => onSelect(day.date)}
       onMouseEnter={() => onHover(day.date)}
       onMouseLeave={onHoverEnd}
-      sx={dayCellSx(day, visible)}
+      sx={dayCellSx(day, band, visible)}
     >
       {day.selected && (
         <Box component="span" data-testid="calendar-selected-date" sx={{ display: 'none' }} />

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

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { bandFor } from './Calendar.band';
 import { isSameDay } from './Calendar.dates';
 import { buildDayArgs } from './Calendar.selection';
 import type { CalendarProps, DateRange, MonthMatrixDay, SelectionMode } from './Calendar.types';
@@ -41,6 +42,7 @@ export const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({
   return (
     <CalendarDay
       day={args}
+      band={bandFor({ args, ...context })}
       focused={isSameDay(args.date, focusedDate)}
       showOutsideDays={showOutsideDays}
       dayClassName={dayClassName}

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

@@ -17,12 +17,22 @@ import { CalendarDayCell } from './CalendarDayCell';
 const SPACER_WIDTH = sxRem(32);
 
 // `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its
-// content's width, which is what held the grid at 304px (FUT-3861).
-const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;
+// content's width, which is what held the grid at 304px (FUT-3861). No column
+// gap: a selected range is one band across the days, and a gap cut it into
+// tiles (FUT-4162). Rows keep theirs. Items centre in their column: the built-in
+// day stretches across it, a host's `renderDay` cell sits in its middle.
+const GRID_SX = {
+  display: 'grid',
+  justifyItems: 'center',
+  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+  columnGap: 0,
+  rowGap: 0.5,
+} as const;
 
 /**
- * A month takes the room it is given, from nothing up to seven full cells and
- * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,
+ * A month takes the room it is given, from nothing up to seven full columns
+ * (304 design px: what 7 × 40 cells and 6 × 4 gaps came to before the gaps
+ * went, FUT-4162). Months side by side keep a 280 basis,
  * so a multi-month calendar still wraps rather than squeezing every month.
  */
 export const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;

package/src/components/navigation/CommandPalette/CommandPalette.md

@@ -88,6 +88,7 @@ function App() {
 | `showRecent`       | `boolean`                    | `false`               | Whether to show recent commands section                       |
 | `recentCommands`   | `string[]`                   | -                     | Array of recent command IDs                                   |
 | `onCommandExecute` | `(command: Command) => void` | -                     | Callback fired when a command is executed                     |
+| `copy`             | `CommandPaletteCopy`         | -                     | **Required.** The palette's words (`PT_BR_COMMAND_PALETTE_COPY`, `EN_US_COMMAND_PALETTE_COPY`). `closeSearch` names the search row's ✕ for a screen reader; a pack without it falls back to "Close search" |
 
 ### Command Interface