@12-apps/ui 6.97.0 → 6.98.0

package/dist/utility/InfiniteScroll.js

@@ -1,10 +1,10 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-7QKFMMWK.js";
-import "../chunk-PEVBSNCD.js";
+} from "../chunk-4W4C4Q46.js";
+import "../chunk-WPRQPKLV.js";
 import "../chunk-Y2X7LYIN.js";
-import "../chunk-XOXXG7Q5.js";
+import "../chunk-VWKMN3ZZ.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/utility/WorkflowStep.js

@@ -1,12 +1,12 @@
 import "../chunk-IO36MEBD.js";
 import {
   WorkflowStep
-} from "../chunk-UQ5GJPVZ.js";
-import "../chunk-CAOL4AIB.js";
-import "../chunk-IMYKJTVX.js";
-import "../chunk-UBVKMM3V.js";
+} from "../chunk-76GAXLNC.js";
+import "../chunk-SARK3GHS.js";
+import "../chunk-5J6LN2O7.js";
+import "../chunk-2A5GHOL3.js";
 import "../chunk-LL2BWQPM.js";
-import "../chunk-XOXXG7Q5.js";
+import "../chunk-VWKMN3ZZ.js";
 import "../chunk-B7ZHEOQQ.js";
 import "../chunk-BRHRK7BK.js";
 import "../chunk-25MSGLNU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.97.0",
+  "version": "6.98.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

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.

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

@@ -20,6 +20,10 @@ 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';
 
+/** Emotion's documented flag for a positional selector known safe here. */
+const NTH_CHILD_IS_SAFE =
+  ' /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+
 interface DayState extends DayRenderArgs {
   outside: boolean;
   focused: boolean;
@@ -66,9 +70,15 @@ const inDirection = (band: Exclude<DayBand, 'none'>, theme: Theme): Exclude<DayB
 const faceBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string =>
   isEndpoint(day) ? endpointFill : 'transparent';
 
-const colorFor = (day: DayRenderArgs, visible: boolean): string => {
+const colorFor = (day: DayRenderArgs, visible: boolean, locked: boolean): string => {
   if (isEndpoint(day)) return 'primary.contrastText';
-  if (day.disabled) return 'text.disabled';
+  // On a calendar shown LOCKED (`navigationDisabled`, a disabled picker) every
+  // day is disabled, and the ones inside the range are the value the grid
+  // states: on the band the disabled ink was 1.56:1, so they take the secondary
+  // ink (FUT-4482, review round 9). A live range CAN span a blocked day (a
+  // host's `isDateDisabled`: Sundays, holidays); that day keeps the disabled
+  // ink, so it still reads as the one that cannot be picked.
+  if (day.disabled) return locked && day.inRange ? 'text.secondary' : 'text.disabled';
   // Outside days that are switched off still occupy the grid, they just have
   // nothing to show.
   if (!visible) return 'transparent';
@@ -85,13 +95,59 @@ const hoverBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | st
 // is a half-round cap on a cell as tall as it is wide.
 const BAND_RADIUS = '50%';
 
+const capRadius = (side: 'start' | 'end', fill: boolean) => {
+  const radius = fill ? FILL_CAP_RADIUS : BAND_RADIUS;
+  return side === 'start'
+    ? { borderStartStartRadius: radius, borderEndStartRadius: radius }
+    : { borderStartEndRadius: radius, borderEndEndRadius: radius };
+};
+
 /**
  * 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> => ({
+/**
+ * Today's ring, opt-in (`todayIndicator="ring"`): a hairline-and-a-half inset
+ * on the face, in the primary colour. An endpoint is already filled with that
+ * colour, so it carries none.
+ */
+const todayRingFor = (day: DayRenderArgs, ring: boolean): ((theme: Theme) => string) | undefined =>
+  ring && day.today && !isEndpoint(day)
+    ? // A disabled today keeps its ring in the disabled ink, like its number:
+      // a primary ring on a dead grid reads as the one live day (round 6).
+      (theme: Theme) =>
+        `inset 0 0 0 ${rem(theme, 1.5)} ${day.disabled ? theme.palette.text.disabled : theme.palette.primary.main}`
+    : undefined;
+
+/**
+ * A filling calendar's cell (`fullWidth`): the whole column wide, so a range's
+ * band runs unbroken however far the columns spread, and exactly as tall as the
+ * 40 design px face — the face is as tall as the cell, so it keeps its size
+ * while only the spacing grows. A row's end caps round at half that height
+ * (the radius clamps on a smaller cell) rather than half a wide cell's width.
+ */
+const FILL_CELL_HEIGHT = sxRem(40);
+const FILL_CAP_RADIUS = sxRem(20);
+
+// A filling cell is 40 tall at every width, never a ratio of its column: a
+// tap target under 600 wide is 40 design px each way, and a ratio made a 36px
+// column 33 tall at 320 (FUT-4156, round 3). The frame gives the columns their
+// 40 (`DateRangePicker.frame`).
+const cellSize = (fill: boolean) =>
+  fill
+    ? { width: '100%', maxWidth: '100%', height: FILL_CELL_HEIGHT, justifySelf: 'stretch' }
+    : { width: COLUMN_SIZE, maxWidth: '100%', aspectRatio: CELL_RATIO, justifySelf: 'stretch' };
+
+const dayCellSx = (
+  day: DayRenderArgs,
+  band: DayBand,
+  visible: boolean,
+  ring: boolean,
+  fill: boolean,
+  locked: boolean,
+): SxProps<Theme> => ({
   position: 'relative',
   isolation: 'isolate',
   display: 'flex',
@@ -101,24 +157,27 @@ const dayCellSx = (day: DayRenderArgs, band: DayBand, visible: boolean): SxProps
   // 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: CELL_RATIO,
-  justifySelf: 'stretch',
+  ...cellSize(fill),
   boxSizing: 'border-box',
   padding: 0,
   border: 'none',
   background: 'none',
   backgroundImage: band === 'none' ? 'none' : (theme: Theme) => BAND_IMAGE[inDirection(band, theme)](bandColor(theme)),
   cursor: day.disabled ? 'not-allowed' : 'pointer',
-  color: colorFor(day, visible),
+  color: colorFor(day, visible, locked),
   opacity: !day.inCurrentMonth && visible ? 0.5 : 1,
   fontWeight: day.today || isEndpoint(day) ? 'bold' : 'normal',
   // `nth-child`, counting every cell of the week: a hidden outside day is an
   // inert `span` placeholder (FUT-4144), and `nth-of-type` counted only the
   // buttons, so the caps landed mid-week in a month with hidden outside days.
-  '&:nth-child(7n + 1)': { borderStartStartRadius: BAND_RADIUS, borderEndStartRadius: BAND_RADIUS },
-  '&:nth-child(7n)': { borderStartEndRadius: BAND_RADIUS, borderEndEndRadius: BAND_RADIUS },
+  //
+  // Emotion warns on `:nth-child` in development, because a server render can
+  // put its style tag between the cells and shift the count. The calendar is
+  // never server-rendered into that position, and every screen that showed one
+  // printed the warning as a console error (FUT-4156), so the selectors carry
+  // Emotion's own opt-out flag.
+  [`&:nth-child(7n + 1)${NTH_CHILD_IS_SAFE}`]: capRadius('start', fill),
+  [`&:nth-child(7n)${NTH_CHILD_IS_SAFE}`]: capRadius('end', fill),
   '&::before': {
     content: '""',
     position: 'absolute',
@@ -131,12 +190,14 @@ const dayCellSx = (day: DayRenderArgs, band: DayBand, visible: boolean): SxProps
     maxWidth: '100%',
     borderRadius: '50%',
     backgroundColor: faceBackgroundFor(day),
+    boxShadow: todayRingFor(day, ring),
   },
   '&:hover::before': {
     backgroundColor: hoverBackgroundFor(day),
   },
   '&:focus': { outline: 'none' },
-  '&:focus::before': {
+  // Keyboard focus only: a tapped day is already marked by what the tap did.
+  '&:focus-visible::before': {
     outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
     outlineOffset: sxRem(1),
@@ -158,6 +219,12 @@ export interface CalendarDayProps {
   band: DayBand;
   focused: boolean;
   showOutsideDays: boolean;
+  /** Ring today's face (`todayIndicator="ring"`). */
+  todayRing?: boolean;
+  /** Fill the column (`CalendarProps.fullWidth`). */
+  fullWidth?: boolean;
+  /** The whole calendar is shown locked (`CalendarProps.navigationDisabled`). */
+  locked?: boolean;
   dayClassName?: (args: DayRenderArgs) => string;
   onSelect: (date: Date) => void;
   onHover: (date: Date) => void;
@@ -170,6 +237,9 @@ export const CalendarDay: FC<CalendarDayProps> = ({
   band,
   focused,
   showOutsideDays,
+  todayRing = false,
+  fullWidth,
+  locked,
   dayClassName,
   onSelect,
   onHover,
@@ -187,7 +257,7 @@ export const CalendarDay: FC<CalendarDayProps> = ({
         component="span"
         aria-hidden="true"
         data-testid="calendar-outside-placeholder"
-        sx={{ width: COLUMN_SIZE, maxWidth: '100%', aspectRatio: CELL_RATIO, justifySelf: 'stretch' }}
+        sx={cellSize(fullWidth === true)}
       />
     );
   }
@@ -195,6 +265,8 @@ export const CalendarDay: FC<CalendarDayProps> = ({
   return (
     <Box
       component="button"
+      // A day picks; it never submits the form a calendar sits in (FUT-4156).
+      type="button"
       role="gridcell"
       tabIndex={focused ? 0 : -1}
       aria-selected={day.selected}
@@ -207,7 +279,7 @@ export const CalendarDay: FC<CalendarDayProps> = ({
       onClick={() => onSelect(day.date)}
       onMouseEnter={() => onHover(day.date)}
       onMouseLeave={onHoverEnd}
-      sx={dayCellSx(day, band, visible)}
+      sx={dayCellSx(day, band, visible, todayRing, fullWidth === true, locked === true)}
     >
       {day.selected && (
         <Box component="span" data-testid="calendar-selected-date" sx={{ display: 'none' }} />

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

@@ -4,7 +4,7 @@ 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';
+import type { CalendarProps, CalendarTodayIndicator, DateRange, MonthMatrixDay, SelectionMode } from './Calendar.types';
 import { CalendarDay } from './CalendarDay';
 
 // Everything a cell needs that is the same for every cell in the calendar.
@@ -18,6 +18,16 @@ export interface DayCellContext {
   focusedDate: Date;
   today: Date;
   showOutsideDays: boolean;
+  /** How today is marked (`CalendarProps.todayIndicator`). */
+  todayIndicator: CalendarTodayIndicator;
+  /** Spread the columns across the width (`CalendarProps.fullWidth`). */
+  fullWidth: boolean;
+  /**
+   * The whole calendar is shown locked (`CalendarProps.navigationDisabled`,
+   * which a disabled `DateRangePicker` sets): its in-range days keep the
+   * secondary ink. A live calendar's blocked days keep the disabled ink.
+   */
+  locked: boolean;
   isDisabled: (date: Date) => boolean;
   renderDay?: CalendarProps['renderDay'];
   dayClassName?: CalendarProps['dayClassName'];
@@ -30,6 +40,9 @@ export const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({
   day,
   focusedDate,
   showOutsideDays,
+  todayIndicator,
+  fullWidth,
+  locked,
   renderDay,
   dayClassName,
   onSelect,
@@ -49,6 +62,9 @@ export const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({
       band={bandFor({ args, ...context })}
       focused={isSameDay(args.date, focusedDate)}
       showOutsideDays={showOutsideDays}
+      todayRing={todayIndicator === 'ring'}
+      fullWidth={fullWidth}
+      locked={locked}
       dayClassName={dayClassName}
       onSelect={onSelect}
       onHover={onHover}

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

@@ -7,7 +7,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import type { CalendarLabels } from '../../../copy/labels';
-import { sxRem } from '../../../tokens/relative';
+import type { Theme } from '@mui/material/styles/index.js';
+import { rem, sxRem } from '../../../tokens/relative';
 
 import { getMonthName } from './Calendar.dates';
 import type { CalendarProps, MonthMatrix } from './Calendar.types';
@@ -35,8 +36,42 @@ const GRID_SX = {
  * (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.
+ * The basis is a theme callback: `sxRem` interpolated into the string wrote a
+ * function's source, and Emotion's whole `flex` was dropped (FUT-4486).
  */
-export const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;
+export const MONTH_SX = {
+  flex: (theme: Theme) => `1 1 ${rem(theme, 280)}`,
+  minWidth: 0,
+  maxWidth: sxRem(304),
+} as const;
+
+/**
+ * A filling month (`fullWidth`) drops the 304 ceiling and takes its share of
+ * the row; its columns spread, its day faces do not grow (`CalendarDay`).
+ */
+export const monthSx = (fullWidth: boolean) => (fullWidth ? FILL_MONTH_SX : MONTH_SX);
+
+/**
+ * The basis as a theme function: interpolated into a string, `sxRem` is a
+ * function and the whole `flex` value is dropped as invalid CSS. A filling
+ * month's cells have no intrinsic width to fall back on, so it must grow.
+ */
+const FILL_MONTH_SX = {
+  flex: (theme: Theme) => `1 1 ${rem(theme, 280)}`,
+  minWidth: 0,
+  maxWidth: 'none',
+} as const;
+
+/**
+ * The caption as a title: its first letter upper-cased in the calendar's own
+ * language ("novembro de 2026" → "Novembro de 2026"), as a heading reads in
+ * pt-BR; `Intl` writes month names lower-case there. The caption only — the
+ * grid's name and a day's name keep `Intl`'s words, which a sentence quotes.
+ */
+export const captionOf = (monthName: string, locale: string): string => {
+  const [first = '', ...rest] = [...monthName];
+  return `${first.toLocaleUpperCase(locale)}${rest.join('')}`;
+};
 
 /** The two arrows' accessible names; an icon alone names nothing. */
 export type MonthArrowLabels = Pick<CalendarLabels, 'previousMonth' | 'nextMonth'>;
@@ -48,9 +83,10 @@ const MonthNavHeader: FC<{
   showPrevious: boolean;
   showNext: boolean;
   labels?: MonthArrowLabels;
+  disabled: boolean;
   onPreviousMonth: () => void;
   onNextMonth: () => void;
-}> = ({ title, showPrevious, showNext, labels, onPreviousMonth, onNextMonth }) => (
+}> = ({ title, showPrevious, showNext, labels, disabled, onPreviousMonth, onNextMonth }) => (
   <Box
     sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}
     data-testid="calendar-header"
@@ -58,6 +94,7 @@ const MonthNavHeader: FC<{
     {showPrevious && (
       <IconButton
         onClick={onPreviousMonth}
+        disabled={disabled}
         size="small"
         aria-label={labels?.previousMonth}
         data-testid="calendar-prev-month"
@@ -77,6 +114,7 @@ const MonthNavHeader: FC<{
     {showNext && (
       <IconButton
         onClick={onNextMonth}
+        disabled={disabled}
         size="small"
         aria-label={labels?.nextMonth}
         data-testid="calendar-next-month"
@@ -149,6 +187,8 @@ export interface CalendarMonthProps {
   renderHeader?: CalendarProps['renderHeader'];
   /** The arrows' accessible names. */
   labels?: MonthArrowLabels;
+  /** `CalendarProps.navigationDisabled`. */
+  navigationDisabled?: boolean;
   onPreviousMonth: () => void;
   onNextMonth: () => void;
   dayContext: DayCellContext;
@@ -162,12 +202,14 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
   weekdayNames,
   renderHeader,
   labels,
+  navigationDisabled = false,
   onPreviousMonth,
   onNextMonth,
   dayContext,
 }) => {
-  const monthName = getMonthName(matrix.month, matrix.year, locale);
-  const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;
+  const title = renderHeader
+    ? renderHeader({ month: matrix.month, year: matrix.year })
+    : captionOf(getMonthName(matrix.month, matrix.year, locale), locale);
 
   return (
     /* The month is addressable by its position, because in a multi-month
@@ -175,12 +217,13 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
        January's 5th and February's. Without a per-month hook a test can only
        reach a day positionally, which is exactly what the flakiness gate
        refuses. Additive: `calendar-grid` below is unchanged. */
-    <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>
+    <Box sx={monthSx(dayContext.fullWidth)} data-testid={`calendar-month-${monthIndex}`}>
       <MonthNavHeader
         title={title}
         showPrevious={monthIndex === 0}
         showNext={monthIndex === monthsToShow - 1}
         labels={labels}
+        disabled={navigationDisabled}
         onPreviousMonth={onPreviousMonth}
         onNextMonth={onNextMonth}
       />

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

@@ -10,7 +10,7 @@ import type { MonthMatrix } from './Calendar.types';
 import type { DateBounds } from './Calendar.views';
 import { MONTH_INDEXES, canShiftMonth, isMonthOutOfBounds, isYearOutOfBounds, yearOptions } from './Calendar.views';
 import type { DayCellContext } from './CalendarDayCell';
-import { MONTH_SX, MonthDays } from './CalendarMonth';
+import { MonthDays, monthSx } from './CalendarMonth';
 import type { PickerOption } from './CalendarPickerGrid';
 import { CalendarPickerGrid } from './CalendarPickerGrid';
 import { CalendarSelectorsCaption } from './CalendarSelectorsCaption';
@@ -82,7 +82,7 @@ export const CalendarSelectorsMonth: FC<CalendarSelectorsMonthProps> = ({
   const picking = picker.view !== 'days';
 
   return (
-    <Box sx={MONTH_SX} data-testid="calendar-month-0">
+    <Box sx={monthSx(dayContext.fullWidth)} data-testid="calendar-month-0">
       <CalendarSelectorsCaption
         monthText={getMonthLabel(matrix.month, locale, 'long')}
         monthNames={MONTH_INDEXES.map((index) => getMonthLabel(index, locale, 'long'))}

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

@@ -2,6 +2,7 @@ export { Calendar,Calendar as default } from './Calendar';
 export type {
   CalendarCaptionLayout,
   CalendarInternalState,
+  CalendarTodayIndicator,
   CalendarProps,
   DateRange,
   DayRenderArgs,