@12-apps/ui 6.86.0 → 6.86.2

package/src/components/data-display/RegionMap/RegionMap.labels.ts

@@ -0,0 +1,60 @@
+// How the labels over a RegionMap drawing are ranked and laid out.
+
+/** Where a label's centre may go along one axis so the whole label stays in view. */
+export function clampCentre(wanted: number, half: number, span: number, gap: number): number {
+  if (span <= 2 * (half + gap)) return span / 2;
+  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+}
+
+/** An area that may carry a label, as {@link labelOrder} ranks it. */
+interface Labelable {
+  id: string;
+  name: string;
+  excluded?: boolean;
+  geometry: { area: number };
+}
+
+/**
+ * The order labels claim their place in: highlighted first (what the person is
+ * looking for), then excluded, then the larger area, then by name. When two
+ * labels would overlap, the earlier one is drawn and the later one hidden.
+ */
+export function labelOrder<T extends Labelable>(areas: readonly T[], highlighted: ReadonlySet<string>): T[] {
+  const rank = (area: T): number => (highlighted.has(area.id) ? 0 : area.excluded ? 1 : 2);
+  return [...areas].sort(
+    (a, b) => rank(a) - rank(b) || b.geometry.area - a.geometry.area || a.name.localeCompare(b.name),
+  );
+}
+
+/** A label measured in the drawing: where it wants to be (fractions), and its size in px. */
+export interface LabelBox {
+  fractionX: number;
+  fractionY: number;
+  spanX: number;
+  spanY: number;
+}
+
+/** Where each label goes, in px, and whether it is drawn at all. */
+export interface PlacedLabel {
+  x: number;
+  y: number;
+  visible: boolean;
+}
+
+/**
+ * Lay labels out in priority order ({@link labelOrder}): each is pulled inside
+ * the drawing by its own size, and one whose box would overlap a label already
+ * drawn is hidden — the area keeps its name in its `<title>` and in the list,
+ * so hiding costs nothing but the clutter two names over each other made.
+ */
+export function placeLabels(labels: readonly LabelBox[], box: { spanX: number; spanY: number }, gap: number): PlacedLabel[] {
+  const kept: { x0: number; y0: number; x1: number; y1: number }[] = [];
+  return labels.map((label) => {
+    const x = clampCentre(label.fractionX * box.spanX, label.spanX / 2, box.spanX, gap);
+    const y = clampCentre(label.fractionY * box.spanY, label.spanY / 2, box.spanY, gap);
+    const rect = { x0: x - label.spanX / 2, y0: y - label.spanY / 2, x1: x + label.spanX / 2, y1: y + label.spanY / 2 };
+    const visible = !kept.some((o) => rect.x0 < o.x1 && o.x0 < rect.x1 && rect.y0 < o.y1 && o.y0 < rect.y1);
+    if (visible) kept.push(rect);
+    return { x, y, visible };
+  });
+}

package/src/components/data-display/RegionMap/RegionMapDrawing.tsx

@@ -7,6 +7,7 @@ import { rem, remPx } from '../../../tokens/relative';
 
 import { labelPosition, type AreaGeometry, type DrawnRegion, type PlaneBox } from './RegionMap.helpers';
 import type { RegionMapModel } from './RegionMap.hooks';
+import { labelOrder, placeLabels } from './RegionMap.labels';
 
 export interface RegionMapDrawingProps {
   model: RegionMapModel & { view: PlaneBox };
@@ -43,7 +44,11 @@ export function RegionMapDrawing({
   const { view, drawn } = model;
   const wanted = new Set(highlightedIds);
   const highlighted = drawn.filter((d) => wanted.has(d.id));
-  const labelled = [...drawn.filter((d) => d.excluded), ...highlighted.filter((d) => !d.excluded)];
+  // Highlighted, then excluded, then larger, then by name: the order labels
+  // claim their place in, so a collision hides the less important one.
+  const labelled = labelOrder(drawn.filter((d) => d.excluded || wanted.has(d.id)), wanted);
+  const boxRef = React.useRef<HTMLDivElement>(null);
+  useLabelPlacement(boxRef, labelled.map((d) => d.id).join('|'), remPx(theme, 4));
   const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
   return (
     <Box
@@ -60,6 +65,7 @@ export function RegionMapDrawing({
         bgcolor: 'background.paper',
       }}
       data-testid={`${testId}-canvas`}
+      ref={boxRef}
     >
       <svg
         viewBox={`${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`}
@@ -73,19 +79,7 @@ export function RegionMapDrawing({
         <BaseAreas areas={base} testId={testId} theme={theme} />
         <ExcludedAreas drawn={drawn} hatchId={hatchId} testId={testId} theme={theme} />
         <Circles radii={model.radii} theme={theme} />
-        {highlighted.map((d) => (
-          <path
-            key={`h-${d.id}`}
-            d={d.geometry.path}
-            fillRule="evenodd"
-            vectorEffect="non-scaling-stroke"
-            fill={alpha(theme.palette.primary.main, 0.3)}
-            stroke={theme.palette.primary.main}
-            strokeWidth={2.5}
-            pointerEvents="none"
-            data-testid={`${testId}-highlight-${d.id}`}
-          />
-        ))}
+        <Highlights areas={highlighted} testId={testId} theme={theme} />
         {showCenter && (
           <circle
             cx={0}
@@ -107,6 +101,35 @@ export function RegionMapDrawing({
   );
 }
 
+/** The highlighted areas, drawn over everything but the centre. */
+function Highlights({
+  areas,
+  testId,
+  theme,
+}: {
+  areas: readonly DrawnRegion[];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  return (
+    <>
+      {areas.map((d) => (
+        <path
+          key={`h-${d.id}`}
+          d={d.geometry.path}
+          fillRule="evenodd"
+          vectorEffect="non-scaling-stroke"
+          fill={alpha(theme.palette.primary.main, 0.3)}
+          stroke={theme.palette.primary.main}
+          strokeWidth={2.5}
+          pointerEvents="none"
+          data-testid={`${testId}-highlight-${d.id}`}
+        />
+      ))}
+    </>
+  );
+}
+
 /** The hatch an excluded area is filled with: lines, not a colour. */
 function Hatch({ id, pitch, theme }: { id: string; pitch: number; theme: Theme }): React.JSX.Element {
   return (
@@ -225,16 +248,52 @@ function Circles({ radii, theme }: { radii: readonly number[]; theme: Theme }):
   );
 }
 
-/** Where a label's centre may go along one axis so the whole label stays in view. */
-function clampCentre(wanted: number, half: number, span: number, gap: number): number {
-  if (span <= 2 * (half + gap)) return span / 2;
-  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+/**
+ * Places every label the drawing carries, in their DOM order (the priority
+ * order), and hides one that would overlap a label already drawn
+ * (`placeLabels`). Measured by a ResizeObserver, never in a layout effect: its
+ * first call comes after the browser's own layout, so mounting a label on a
+ * tap forces no synchronous reflow of the drawing.
+ */
+function useLabelPlacement(boxRef: React.RefObject<HTMLDivElement | null>, key: string, gap: number): void {
+  React.useEffect(() => {
+    const box = boxRef.current;
+    if (!box || typeof ResizeObserver === 'undefined') return undefined;
+    const labels = Array.from(box.querySelectorAll<HTMLElement>('[data-region-label]'));
+    const place = (): void => {
+      const spanX = box.clientWidth;
+      const spanY = box.clientHeight;
+      if (spanX === 0 || spanY === 0) return;
+      const placed = placeLabels(
+        labels.map((label) => ({
+          fractionX: Number(label.dataset.fractionX),
+          fractionY: Number(label.dataset.fractionY),
+          spanX: label.offsetWidth,
+          spanY: label.offsetHeight,
+        })),
+        { spanX, spanY },
+        gap,
+      );
+      placed.forEach(({ x, y, visible }, index) => {
+        const label = labels[index]!;
+        label.style.left = `${(x / spanX) * 100}%`;
+        label.style.top = `${(y / spanY) * 100}%`;
+        label.style.visibility = visible ? 'visible' : 'hidden';
+        label.dataset.hidden = visible ? 'false' : 'true';
+      });
+    };
+    const observer = new ResizeObserver(place);
+    observer.observe(box);
+    for (const label of labels) observer.observe(label);
+    return () => observer.disconnect();
+  }, [boxRef, key, gap]);
 }
 
 /**
  * An area's name over the drawing, at the theme's type size whatever the
- * width — and moved in by its own measured size, so it is never clipped at
- * the drawing's edge.
+ * width. Placed — and hidden on a collision — by {@link useLabelPlacement}.
+ * Decorative (`aria-hidden`): the area's name is its `<title>` and its row in
+ * the list.
  */
 function AreaLabel({
   area,
@@ -248,42 +307,25 @@ function AreaLabel({
   theme: Theme;
 }): React.JSX.Element {
   const at = labelPosition(area.geometry.rings, view);
-  const ref = React.useRef<HTMLSpanElement>(null);
-  const gap = remPx(theme, 4);
-  // Measured by a ResizeObserver, never in a layout effect: the observer's
-  // first call comes after the browser's own layout, so mounting a label on a
-  // tap forces no synchronous reflow of the drawing.
-  React.useEffect(() => {
-    const label = ref.current;
-    const box = label?.parentElement;
-    if (!label || !box || typeof ResizeObserver === 'undefined') return undefined;
-    const observer = new ResizeObserver(() => {
-      const width = box.clientWidth;
-      const height = box.clientHeight;
-      if (width === 0 || height === 0) return;
-      const x = clampCentre(at.fractionX * width, label.offsetWidth / 2, width, gap);
-      const y = clampCentre(at.fractionY * height, label.offsetHeight / 2, height, gap);
-      label.style.left = `${(x / width) * 100}%`;
-      label.style.top = `${(y / height) * 100}%`;
-    });
-    observer.observe(box);
-    observer.observe(label);
-    return () => observer.disconnect();
-  }, [at.fractionX, at.fractionY, gap]);
   const halo = `0 0 ${rem(theme, 3)} ${theme.palette.background.paper}`;
   return (
     <Typography
-      ref={ref}
       component="span"
       aria-hidden
       data-testid={`${testId}-label-${area.id}`}
+      data-region-label=""
+      data-fraction-x={at.fractionX}
+      data-fraction-y={at.fractionY}
       // Position as an inline style, not `sx`: a per-label class would insert
       // a new CSS rule (and a style recalculation) on every tap.
-      style={{ left: `${(at.fractionX * 100).toFixed(2)}%`, top: `${(at.fractionY * 100).toFixed(2)}%` }}
+      style={{
+        left: `${(at.fractionX * 100).toFixed(2)}%`,
+        top: `${(at.fractionY * 100).toFixed(2)}%`,
+      }}
       sx={{
         position: 'absolute',
         transform: 'translate(-50%, -50%)',
-        fontSize: rem(theme, 11),
+        fontSize: rem(theme, 12),
         fontWeight: 700,
         lineHeight: 1.1,
         textAlign: 'center',

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}