@12-apps/ui 6.97.1 → 6.98.1

package/src/components/data-display/Alert/Alert.ink.ts

@@ -0,0 +1,106 @@
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { absoluteInk } from '../../../tokens/ink';
+
+import { ACTIVE, ALERT_EASING, POINTER_INK_STEP, seconds } from './Alert.metrics';
+
+/**
+ * THE INK HALF OF THE POINTER STATES (FUT-4506, option C).
+ *
+ * The hover and press tint (`pointerShadow` in `Alert.tsx`) moves the SURFACE
+ * toward an absolute. On every surface that tracks the mode that is the side
+ * the ink is on, so the gap the message is read across closed under the
+ * pointer — a host summary at 4.71:1 idle fell to 3.17:1 pressed. These rules
+ * move the INK further the same way, by {@link POINTER_INK_STEP}, so it
+ * re-opens.
+ */
+
+/** The summary's class, so the pointer states can reach it without a test id. */
+export const ALERT_DESCRIPTION_CLASS = 'alert-description';
+/**
+ * The wrapper `AlertContent` puts around `children`, at `display: contents`:
+ * no box of its own, so the column's flex layout is what it was, and a bare
+ * text node still inherits its colour.
+ */
+export const ALERT_CHILDREN_CLASS = 'alert-children';
+
+/**
+ * What steps: the WORDS of the message — the title, the description and
+ * whatever the caller passed as `children` — each one step, none nested in
+ * another. Stepping only the title and the description left a children-only
+ * alert (about one in six in the first host measured) at its rest ink under
+ * the press tint.
+ *
+ * Not the whole message column, because the column is not only words: with
+ * `iconPlacement: 'title'` the icon sits in it, on the title's row, beside
+ * `.MuiAlertTitle-root` rather than inside it. The icon is the variant's
+ * meaning, not an affordance, so it stays still in both placements; the close
+ * button (`.MuiAlert-action`) is outside the column altogether. A control
+ * inside `children` keeps its own colour, because it declares one; only a
+ * `color="inherit"` one follows the step, on the same tinted surface as the
+ * words around it.
+ */
+const MESSAGE_INK = `& .MuiAlertTitle-root, & .${ALERT_DESCRIPTION_CLASS}, & .${ALERT_CHILDREN_CLASS}`;
+
+export type PointerInkState = keyof typeof POINTER_INK_STEP;
+export type InkAbsolute = 'black' | 'white';
+
+/**
+ * The absolute the ink steps toward — the mode's, the side the ink is on — or
+ * `null` for `gradient`, which does not step at all.
+ *
+ * Every other variant's surface tracks the mode: a dark ink on a light tint,
+ * a light ink on a dark one, so the step is toward black in light mode and
+ * toward white in dark, the same absolute the tint layer moves the surface to.
+ *
+ * `gradient` is the one surface where the package cannot know which side its
+ * ink is on. Its own ink is `getContrastText` of the hue, but a host that
+ * repaints alerts repaints the gradient too: a light pane and a dark ink under
+ * the variant's BLACK layer. Stepping by the package's own ink then moved that
+ * dark ink toward white — 1.02:1 pressed. A step that reads `currentColor` for
+ * its amount but not for its direction is only safe where the direction is the
+ * mode's, so `gradient` keeps today's ink. Its rest contrast and its dark ink
+ * on dark mode's light hues are FUT-4516's.
+ */
+export function inkAbsolute(theme: Theme, variant: string | undefined): InkAbsolute | null {
+  if (variant === 'gradient') return null;
+  return theme.palette.mode === 'dark' ? 'white' : 'black';
+}
+
+/**
+ * The CSS for the ink at one pointer state: the ink actually painted
+ * (`currentColor`, inherited from the root — a host's repaint included) mixed
+ * toward the absolute by the state's step.
+ *
+ * `currentColor` in a `color` declaration is the PARENT's colour, which is why
+ * this sits on the message's parts and never on the root: on the root it would
+ * read the page's text colour instead of the alert's ink. None of the three
+ * parts is nested in another, so nothing steps twice.
+ */
+export function steppedInkCss(absolute: string, step: number): string {
+  return `color-mix(in srgb, currentColor ${Math.round((1 - step) * 100)}%, ${absolute})`;
+}
+
+/**
+ * The three pieces of the ink's pointer behaviour, spread into the root's
+ * blocks by `Alert.tsx`:
+ *
+ * - `rest` eases the ink on the box-shadow's own clock, so ink and tint arrive
+ *   together rather than the ink snapping while the surface eases;
+ * - `hover` and `press` step it. The press declares `transition: none` for the
+ *   same reason the root's `:active` does: a click's `:active` is too short to
+ *   ease into. A `:hover` block declares no transition, ever (see `ACTIVE`).
+ *
+ * All three are empty for a variant that does not step.
+ */
+export function pointerInkStyles(theme: Theme, variant: string | undefined): Record<'rest' | PointerInkState, CSSObject> {
+  const side = inkAbsolute(theme, variant);
+  if (side === null) return { rest: {}, hover: {}, press: {} };
+  const absolute = absoluteInk(theme)[side];
+  const at = (state: PointerInkState): string => steppedInkCss(absolute, POINTER_INK_STEP[state][side]);
+  return {
+    rest: { [MESSAGE_INK]: { transition: `color ${seconds(ACTIVE.ms)} ${ALERT_EASING}` } },
+    hover: { [MESSAGE_INK]: { color: at('hover') } },
+    press: { [MESSAGE_INK]: { color: at('press'), transition: 'none' } },
+  };
+}

package/src/components/data-display/Alert/Alert.md

@@ -145,6 +145,46 @@ The Alert component implements comprehensive accessibility features:
 - High contrast colors meeting WCAG guidelines
 - Screen reader compatible content structure
 
+### Hover and press keep the words at 4.5:1
+
+An alert answers a pointer with a flat tint layer (`HOVER.tintAlpha` 0.06,
+`ACTIVE.tintAlpha` 0.2, eased back over `ACTIVE.ms`), and nothing moves. That
+layer moves the surface toward the mode's absolute — black in light mode, white
+in dark — which is the side the ink is on, so on its own it CLOSED the gap the
+words are read across: a summary at 4.71:1 idle fell to 3.17:1 pressed in
+light mode and 2.68:1 in dark (FUT-4506).
+
+So while the tint is on, the **message** — title, description and whatever
+is passed as `children` — steps its ink toward
+that same absolute (`POINTER_INK_STEP`; both states' tint and step are
+exported as `ALERT_POINTER_STATES` for a theme that asserts its own tones):
+
+| state | toward black (light mode) | toward white (dark mode) |
+|---|---|---|
+| hover | 0.15 | 0.2 |
+| press | 0.35 | 0.6 |
+
+The message holds 4.5:1 at rest, hovered and pressed — the title too, since
+16.8px/600 is not WCAG "large" text. The step sits on the title
+(`.MuiAlertTitle-root`), the description (`.alert-description`) and the
+children (wrapped in `.alert-children` at `display: contents`, so the layout
+does not change), each one step. It is a `color-mix()` over `currentColor`:
+its amount lands on whatever ink is actually painted, so a theme that repaints
+a semantic or `glass` alert's `color` gets the same step on its own ink. It
+eases on the tint's clock and lands at once on a press, like the tint.
+
+The icon does not step, in either placement: in the gutter (`.MuiAlert-icon`)
+and on the title's row (`iconPlacement: 'title'`), where it sits in the
+message column beside the title rather than inside it. The close button
+(`.MuiAlert-action`), the focus ring and any control in `children` that
+declares its own colour keep their colours and states; a `color="inherit"`
+control in `children` steps with the words around it.
+
+`gradient` is not stepped. The step's direction is the mode's, and a host that
+repaints a gradient to a light pane with a dark ink would have had that ink
+stepped toward white under the variant's black layer. Its rest contrast is
+FUT-4516's.
+
 ### `announce` — whether the alert interrupts
 
 `role` and `aria-live` are two attributes with one meaning between them, and by

package/src/components/data-display/Alert/Alert.metrics.ts

@@ -94,9 +94,12 @@ export const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;
  * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,
  * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)
  * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the
- * same on an opaque tint, a translucent wash and a gradient, and because it
- * paints above the background and below the content the ink keeps its own
- * contrast.
+ * same on an opaque tint, a translucent wash and a gradient.
+ *
+ * Painting above the background and below the content keeps the layer off the
+ * INK, but not off the ink's CONTRAST: the layer moves the surface toward the
+ * mode's absolute, which is the side the ink is on, so the two close in. That
+ * is what {@link POINTER_INK_STEP} answers (FUT-4506).
  */
 export const HOVER = { tintAlpha: 0.06 } as const;
 
@@ -117,8 +120,11 @@ export const HOVER = { tintAlpha: 0.06 } as const;
  *
  * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,
  * so it reads the same on an opaque tint, a translucent wash and a gradient;
- * painted above the background and below the content, so the ink keeps its
- * own contrast; and animatable, which `background-image` is not.
+ * painted above the background and below the content, so it never dims the
+ * ink itself; and animatable, which `background-image` is not. It DOES dim the
+ * ink's contrast, because it darkens a light surface toward a dark ink (and
+ * lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}
+ * is the other half of the press.
  *
  * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE
  * property carries both states. CSS runs a transition from the DESTINATION
@@ -133,6 +139,52 @@ export const HOVER = { tintAlpha: 0.06 } as const;
  */
 export const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;
 
+/**
+ * How far the MESSAGE ink — title, description and children — steps toward the
+ * absolute on its own side while the alert is hovered or pressed (FUT-4506,
+ * option C).
+ *
+ * The tint layer above moves the surface toward the mode's absolute — black in
+ * light mode, white in dark — which is the side the ink sits on, so every
+ * pointer state CLOSED the gap the ink is read across. Measured on a host pane
+ * whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,
+ * and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG
+ * "large" text, so it is held to 4.5:1 as well.
+ *
+ * The answer keeps the layer (the pointer still gets its feedback) and moves
+ * the ink FURTHER the same way, so the gap re-opens. The amounts are the
+ * prototype's measured steps on that host pane, the worst case in reach: they
+ * hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this
+ * package's default palette in both modes. White needs the bigger step because
+ * a light ink has less room above it than a dark ink has below it, and dark
+ * mode's pressed step needs at least 0.55.
+ *
+ * Keyed by the absolute the ink moves TOWARD, which is the mode's: black in
+ * light mode, white in dark. The web applies the step as `color-mix()` over
+ * `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a
+ * host's repaint of a semantic or `glass` alert included. Its DIRECTION is the
+ * mode's, which is only safe where the surface tracks the mode, so `gradient`
+ * is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that
+ * repaints it to a light pane and a dark ink would otherwise have its ink
+ * stepped toward white under a black layer. DOM only; native has no pointer
+ * states. `Banner` paints the same tint and does not step yet.
+ */
+export const POINTER_INK_STEP = {
+  hover: { black: 0.15, white: 0.2 },
+  press: { black: 0.35, white: 0.6 },
+} as const;
+
+/**
+ * Both pointer states as a host reads them: the tint layer's alpha and the ink
+ * step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that
+ * repaints the alert's pane and ink can assert its own tones still clear 4.5:1
+ * hovered and pressed, against the numbers the package actually draws with.
+ */
+export const POINTER_STATES = {
+  hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },
+  press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press },
+} as const;
+
 export const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;
 
 /** `neutral` has no palette slot; the web has always drawn it from three greys. */

package/src/components/data-display/Alert/Alert.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { absoluteInk, modeInk } from '../../../tokens/ink';
 
 import { AlertContent } from './Alert.content';
+import { pointerInkStyles } from './Alert.ink';
 import { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';
 import { resolveIconPlacement, type AlertIconPlacement } from './Alert.placement';
 import type { AlertPalette } from './Alert.metrics';
@@ -48,9 +49,11 @@ const transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
  *
  * The tint is an inset spread at 100vmax, which always exceeds the element, so
  * it covers the surface edge to edge. It paints ABOVE the background and BELOW
- * the content, which is what keeps the ink's own contrast out of these states
- * entirely — see `ACTIVE` in `Alert.metrics.ts` for why a layer replaced the
- * opacity dip and the brightness multiplier that each preceded it.
+ * the content, so it never dims the ink itself — see `ACTIVE` in
+ * `Alert.metrics.ts` for why a layer replaced the opacity dip and the
+ * brightness multiplier that each preceded it. It does move the surface toward
+ * the ink's side, which is the contrast `pointerInkStyles` (`Alert.ink.ts`)
+ * wins back by stepping the message's words the same way.
  *
  * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps
  * its glow; `glowStyles` gave up its `!important` for this.
@@ -61,15 +64,19 @@ function pointerShadow(
   glow: boolean,
   variant: string | undefined,
 ): (alpha_: number) => string {
-  // The tint moves the surface AWAY from its own ink, which is why this reads
-  // the variant and not only the mode.
+  // The tint's colour reads the variant and not only the mode. On every
+  // surface that tracks the mode it moves the surface TOWARD its ink's side —
+  // the contrast cost `pointerInkStyles` pays back.
   //
   // `gradient` is the one variant where the two disagree: it paints a
   // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the
   // mode-keyed answer tinted it white in dark mode — toward the text. Measured:
   // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1
   // floor and below its own idle. Every other variant's surface tracks the mode,
-  // so for them the two rules agree.
+  // so for them the two rules agree. (Not quite WHITE in both modes: dark
+  // mode's light hues get a dark `getContrastText` ink, which this black layer
+  // closes on. That ink is not stepped (`inkAbsolute`); its rest contrast is
+  // FUT-4516's.)
   const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);
   const glowShadow = glow
     ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`
@@ -91,6 +98,7 @@ const StyledAlert = styled(MuiAlert, {
   const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');
 
   const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);
+  const ink = pointerInkStyles(theme, customVariant);
 
   return {
     borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
@@ -101,13 +109,15 @@ const StyledAlert = styled(MuiAlert, {
     willChange: 'transform, opacity',
 
     ...alertLayoutStyles(theme, colorPalette, animate),
+    ...ink.rest,
 
     // Hover: one tint step, and nothing that moves. An alert is a surface
     // rather than a control, so the pointer only needs telling it is here. The
     // icon keeps its own place for the same reason — it is the variant's
-    // meaning, not an affordance to animate.
+    // meaning, not an affordance to animate. The message's ink steps too.
     '&:hover': {
       boxShadow: withTint(HOVER.tintAlpha),
+      ...ink.hover,
 
       '&::before': {
         opacity: 1,
@@ -136,6 +146,7 @@ const StyledAlert = styled(MuiAlert, {
     '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
       boxShadow: withTint(ACTIVE.tintAlpha),
       transition: 'none',
+      ...ink.press,
     },
 
     // Focus: `:focus-visible`, not `:focus-within`.

package/src/components/data-display/Alert/index.ts

@@ -6,3 +6,4 @@ export type {
   AlertVariant,
   UiAlertTheme,
 } from './Alert.types';
+export { POINTER_STATES as ALERT_POINTER_STATES } from './Alert.metrics';

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -245,6 +245,8 @@ interface DayBoundInputProps {
    * calendar's width instead of leaving a gap beside them (FUT-4144).
    */
   fill?: boolean;
+  /** Shown, never editable. Default: false. */
+  disabled?: boolean;
 }
 
 /** What {@link useDayText} hands the field: its text, its verdict and its handlers. */
@@ -333,6 +335,7 @@ export function DayBoundInput({
   mask,
   invalidMessage,
   fill = false,
+  disabled = false,
 }: DayBoundInputProps): React.JSX.Element {
   const id = useId();
   const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(
@@ -351,6 +354,7 @@ export function DayBoundInput({
       error={error || impossible}
       helperText={impossible ? invalidMessage : undefined}
       placeholder={mask}
+      disabled={disabled}
       value={text}
       onChange={handleChange}
       onPaste={handlePaste}

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

@@ -49,6 +49,9 @@ export const bandFor = ({
   if (selectionMode !== 'range') return 'none';
   if (args.inRange) return 'full';
 
+  // A chosen end before the start is a pair being fixed, not a range: its
+  // inside is not filled, so neither end reaches towards the other.
+  if (range.start && range.end && range.end < range.start) return 'none';
   const other = otherEnd(range, hoveredDate, isDisabled);
   if (!range.start || !other || isSameDay(range.start, other)) return 'none';
   return endpointBand(args.date, range.start, other);

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

@@ -11,6 +11,8 @@ const CALENDAR_DEFAULTS = {
   allowSameDayRange: true,
   autoFocus: false,
   captionLayout: 'arrows',
+  todayIndicator: 'bold',
+  fullWidth: false,
 } as const satisfies Partial<CalendarProps>;
 
 // Strips explicitly-undefined props before the merge, so `prop={undefined}` still

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

@@ -8,11 +8,13 @@ import type { MonthMatrix, ResolvedCalendarProps } from './Calendar.types';
 
 const startOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth(), 1);
 
-// Which day the calendar opens on: whatever is already chosen, else the first
-// of `defaultMonth`, else today.
+// Which day the calendar opens on: whatever is already chosen — a range's
+// start, or its end when only the end is (FUT-4156) — else the first of
+// `defaultMonth`, else today.
 const initialFocus = (props: ResolvedCalendarProps, today: Date): Date => {
   if (props.selectionMode === 'single' && props.value) return normalizeDate(props.value);
   if (props.selectionMode === 'range' && props.range.start) return normalizeDate(props.range.start);
+  if (props.selectionMode === 'range' && props.range.end) return normalizeDate(props.range.end);
   if (props.defaultMonth) return normalizeDate(startOfMonth(props.defaultMonth));
   return today;
 };

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

@@ -18,7 +18,10 @@ A reusable calendar that supports **single date selection** and **date range sel
 - **Month grid** (role `grid`) with weekday headers and day cells (role `gridcell`).
 - **Range hover preview**: when a start date is chosen, hovering days previews the end.
 - **Dual month** layout for range mode (configurable).
-- **Disabled/unavailable days** visibly blocked and non-interactive.
+- **Disabled/unavailable days** visibly blocked and non-interactive, in the disabled ink — a
+  blocked day inside a live range included (a range CAN span one: Sundays, holidays). Only a
+  calendar shown locked (`navigationDisabled`, which a disabled `DateRangePicker` sets) draws its
+  in-range days in the secondary ink, so the period it states stays legible on the band.
 - Optional **footer** with Clear/Apply.
 
 ---
@@ -49,6 +52,9 @@ export interface CalendarProps {
   firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6; // default: locale
   locale?: string; // e.g. 'en-US'
   showOutsideDays?: boolean; // days from prev/next month
+  todayIndicator?: 'bold' | 'ring'; // default 'bold'; 'ring' adds a primary-colour ring
+  fullWidth?: boolean; // default false; months fill the width, columns spread, faces stay 40
+  navigationDisabled?: boolean; // default false; the month arrows are disabled (a calendar whose days are all disabled)
   showWeekNumbers?: boolean;
   captionLayout?: 'arrows' | 'selectors'; // default: 'arrows'; 'selectors' shows one month
   defaultMonth?: Date; // month shown while nothing is chosen; default: today's month
@@ -219,10 +225,15 @@ month/year buttons rather than squeezing them (`SelectorsFitA320Sheet`).
   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.
+- The default caption is a title: its first letter upper-cased in `locale`
+  (`"Novembro de 2026"`, FUT-4156). The grid's own name keeps `Intl`'s words
+  (`aria-label="novembro de 2026"`).
 - Disabled days: `aria-disabled="true"`.
 - With `showOutsideDays={false}` an outside day is an inert, `aria-hidden`
   placeholder: no button, no name, no tab stop. Visible outside days are
   unchanged.
+- The focus ring (2px, primary) shows on KEYBOARD focus only
+  (`:focus-visible`) — on the container or a day — never after a tap.
 - 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

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

@@ -16,17 +16,34 @@ import type { DayCellContext } from './CalendarDayCell';
 import { CalendarMonth } from './CalendarMonth';
 import { CalendarSelectorsMonth } from './CalendarSelectorsMonth';
 
-const containerSx = (monthsToShow: number): SxProps<Theme> => ({
+const KEYBOARD_RING = {
+  outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+  outlineColor: 'primary.main',
+  outlineOffset: sxRem(2),
+} as const;
+
+const containerSx = (monthsToShow: number, fullWidth: boolean): SxProps<Theme> => ({
   p: 3,
+  ...(fullWidth ? { width: '100%', boxSizing: 'border-box' } : {}),
   display: 'flex',
   flexDirection: monthsToShow > 1 ? 'row' : 'column',
   gap: 3,
   outline: 'none',
-  '&:focus-within': {
-    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
-    outlineColor: 'primary.main',
-    outlineOffset: sxRem(2),
-  },
+  // The ring is for a KEYBOARD reader's place, so it shows on keyboard focus
+  // only — on the container, or on a day inside it — and never after a tap.
+  // Two rules, not one list: a browser without `:has` drops a whole selector
+  // list it cannot parse, and would lose the container's own ring with it.
+  '&:focus-visible': KEYBOARD_RING,
+  '&:has(:focus-visible)': KEYBOARD_RING,
+});
+
+// The months' row. Filling, it takes the container's whole width even where
+// the container lays it out in a row (two months or more).
+const monthsSx = (fullWidth: boolean): SxProps<Theme> => ({
+  display: 'flex',
+  gap: 3,
+  flexWrap: 'wrap',
+  ...(fullWidth ? { flex: '1 1 auto', minWidth: 0 } : {}),
 });
 
 type CalendarState = ReturnType<typeof useCalendar>;
@@ -37,6 +54,9 @@ const buildDayContext = (props: ResolvedCalendarProps, calendar: CalendarState):
   value: props.value,
   range: props.range,
   showOutsideDays: props.showOutsideDays,
+  todayIndicator: props.todayIndicator,
+  fullWidth: props.fullWidth,
+  locked: props.navigationDisabled === true,
   renderDay: props.renderDay,
   dayClassName: props.dayClassName,
   hoveredDate: calendar.hoveredDate,
@@ -133,9 +153,9 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
           : undefined
       }
       data-testid="calendar-container"
-      sx={containerSx(monthsToShow)}
+      sx={containerSx(monthsToShow, props.fullWidth)}
     >
-      <Box ref={calendar.gridRef} sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+      <Box ref={calendar.gridRef} sx={monthsSx(props.fullWidth)}>
         {props.captionLayout === 'selectors' && firstMonth ? (
           <CalendarSelectorsMonth
             matrix={firstMonth}
@@ -164,11 +184,11 @@ 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.
+              // Only a host that passed `labels` gets named arrows; without them the caption is as it was.
               labels={props.labels ? labels : undefined}
               onPreviousMonth={calendar.goToPreviousMonth}
               onNextMonth={calendar.goToNextMonth}
+              navigationDisabled={props.navigationDisabled === true}
               dayContext={dayContext}
             />
           ))

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

@@ -27,6 +27,9 @@ export interface DayRenderArgs {
  */
 export type CalendarCaptionLayout = 'arrows' | 'selectors';
 
+/** How today's day is marked — see `CalendarProps.todayIndicator`. */
+export type CalendarTodayIndicator = 'bold' | 'ring';
+
 export interface HeaderRenderContext {
   month: number;
   year: number;
@@ -55,7 +58,28 @@ export interface CalendarProps {
   firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6; // default: locale
   locale?: string; // e.g. 'en-US'
   showOutsideDays?: boolean; // days from prev/next month
+  /**
+   * How today is marked. `'bold'` (the default) is the bold number it always
+   * was; `'ring'` adds a hairline ring in the primary colour around the day's
+   * face, for a calendar a reader must place a period against today on.
+   */
+  todayIndicator?: CalendarTodayIndicator;
   showWeekNumbers?: boolean;
+  /**
+   * Fill the width the calendar is given instead of stopping at a month's
+   * intrinsic 304 design px. The seven columns spread across it and the day
+   * faces keep their size (40 design px at most): only the spacing grows, and a
+   * range's band still runs unbroken across the columns. For a calendar laid
+   * into a page section whose edges it must meet. Default: false.
+   */
+  fullWidth?: boolean;
+  /**
+   * The month arrows are disabled (`'arrows'` caption): for a calendar shown
+   * for a period that cannot change right now, whose days are all disabled
+   * too — a live arrow beside a dead grid reads as the one control left.
+   * Default: false.
+   */
+  navigationDisabled?: boolean;
   /** default: 'arrows'. `'selectors'` always shows one month. */
   captionLayout?: CalendarCaptionLayout;
   /**
@@ -103,7 +127,9 @@ type CalendarDefaultedKeys =
   | 'minRangeLength'
   | 'allowSameDayRange'
   | 'autoFocus'
-  | 'captionLayout';
+  | 'captionLayout'
+  | 'todayIndicator'
+  | 'fullWidth';
 
 // CalendarProps with the defaults already applied, plus the month count resolved
 // from numberOfMonths and the selection mode.