@12-apps/ui 6.48.0 → 6.49.0

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

@@ -191,15 +191,44 @@ wrapping element, rounded to match the image:
 > - A **DEFINITE** set axis (a plain design-px number, or an absolute CSS
 >   length string) borrows straight onto the unset one: a square in real
 >   px/rem — e.g. `width={120}` alone gives the skeleton `120×120`.
-> - A **RELATIVE** set axis (a fraction in `(0, 1]`, or a `%` string) cannot
->   be copied onto the other one the same way — a width-percentage and a
->   height-percentage measure against two different boxes, so copying the
->   value would re-create the exact 0-height/0-width collapse this default
->   exists to fix. Instead, the set axis keeps its own value and the box
->   squares up through CSS `aspectRatio: '1 / 1'`, with the other axis left
->   `auto` — e.g. `width="100%"` alone gives the skeleton `width: 100%;
->   height: auto; aspect-ratio: 1 / 1`, a square exactly as wide as its
->   (now non-collapsing) container.
+> - A **RELATIVE** set axis cannot be copied onto the other one the same way —
+>   a width-percentage and a height-percentage measure against two different
+>   boxes, so copying the value would re-create the exact 0-height/0-width
+>   collapse this default exists to fix. Instead, the set axis keeps its own
+>   value and the box squares up through CSS `aspectRatio: '1 / 1'`, with the
+>   other axis left `auto` — e.g. `width="100%"` alone gives the skeleton
+>   `width: 100%; height: auto; aspect-ratio: 1 / 1`, a square exactly as wide
+>   as its (now non-collapsing) container. A length is RELATIVE when:
+>   - it is a fraction in `(0, 1]`, or
+>   - it has a `%` **anywhere** in the string — not only a bare trailing `%`,
+>     but a `%` nested inside `calc()`/`min()`/`max()`/`clamp()` too (FUT-2869:
+>     `width="calc(100% - 8px)"` alone squares, exactly like `width="100%"`
+>     alone — a `%` still measures against the containing block no matter what
+>     it is wrapped in, and borrowing it onto the other axis still collapses
+>     to 0 against an auto-height parent), or
+>   - it has a viewport unit — `vw`/`vh`/`vmin`/`vmax`, or the small/large/
+>     dynamic variants `svw`/`svh`/`svmin`/`svmax`, `lvw`/`lvh`/`lvmin`/
+>     `lvmax`, `dvw`/`dvh`/`dvmin`/`dvmax`, or the logical `vi`/`vb` — anywhere
+>     in the string (FUT-2869: `width="50vw"` alone squares too — see below for
+>     why), or
+>   - it has a container-query unit — `cqw`/`cqh`/`cqi`/`cqb`/`cqmin`/`cqmax` —
+>     anywhere in the string: it depends on the nearest queried container, not
+>     the length itself, exactly the reasoning below.
+>
+>   **Why viewport and container-query units square instead of borrow
+>   (FUT-2869's Decision).** Neither collapses to 0 the way a borrowed `%`
+>   does — a viewport unit resolves against the viewport, a container-query
+>   unit against its queried container, so a literally-borrowed `height: 50vw`
+>   is merely some non-zero length. But it is still wrong: the component's own
+>   promise for a single set axis is a SQUARE placeholder, and a length
+>   borrowed onto the other axis is a square only when the thing it measures
+>   against (the viewport, or the queried container) happens to be exactly the
+>   SAME size as `LazyImage`'s own container — the moment it isn't (any
+>   padding, sidebar, or max-width layout — the ordinary case), `width: 50vw`
+>   next to a borrowed `height: 50vw` is visibly not square. Squaring costs
+>   nothing extra (the same `aspectRatio` mechanism `%` already uses) and keeps
+>   one rule — "does this length depend on anything outside itself" — for
+>   every relative unit, instead of a different rule per unit family.
 > - With **neither** axis set, both take the theme's field height
 >   (`theme.fieldHeight`, through `fieldHeight()`/`rem()` — never a raw px).
 > - With **both** set, nothing above applies: the placeholder renders exactly

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

@@ -104,13 +104,13 @@ const emptyToUnset = (value: Length): Length => (value === '' ? undefined : valu
 /** A length, already resolved to CSS — {@link innerLength} or {@link sxLength}. */
 type LengthResolver = (theme: Theme, value: Length) => string | undefined;
 
-/**
- * Whether a length is a PERCENTAGE (a numeric {@link isFraction} or a `%`
- * string) — copying it onto the OTHER axis re-creates this ticket's own
- * collapse either way (width%/height% measure different boxes; Chromium-confirmed).
- */
+// A number + `%`, a (small/large/dynamic) viewport unit, or a container-query
+// unit, anywhere in a string, even nested in `calc()`/`min()`/`max()`/`clamp()`.
+const RELATIVE_LENGTH_UNIT = /[\d.]+(?:%|[dsl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max))(?![a-zA-Z])/;
+// RELATIVE: {@link isFraction}, or that unit anywhere — borrowing it onto the
+// OTHER axis re-creates this collapse (all these units square, `LazyImage.md`).
 const isRelativeLength = (value: Length): boolean =>
-  isFraction(value) || (typeof value === 'string' && value.trim().endsWith('%'));
+  isFraction(value) || (typeof value === 'string' && RELATIVE_LENGTH_UNIT.test(value));
 
 /** A resolved axis pair; `aspectRatio` is set when the OTHER axis comes from CSS, not a length. */
 type AxisPair = { width: string | undefined; height: string | undefined; aspectRatio?: string };

package/src/provider/mui-bridge.ts

@@ -5,7 +5,13 @@ import {
   checkboxRadioDensityOverrides,
   chipDensityOverrides,
   iconButtonDensityOverrides,
+  paginationItemDensityOverrides,
+  sliderDensityOverrides,
   switchDensityOverrides,
+  tabDensityOverrides,
+  tableCellDensityOverrides,
+  tabsIndicatorDensityOverrides,
+  toggleButtonDensityOverrides,
 } from '../tokens/density-overrides';
 import { densityFontSize, resolveDensityFactor } from '../tokens/density';
 import { resolveFieldHeight } from '../tokens/field-height.core';
@@ -150,15 +156,21 @@ export function muiThemeOptionsFrom(ui: UiTheme): ThemeOptions {
     shape: { borderRadius: ui.radius.md },
     fieldRadius: ui.radius.field,
     fieldHeight: ui.fieldHeight,
-    // Additive: child 4 (FUT-2768) adds one more source here as its own
-    // geometry overrides land — FUT-2766 added IconButton's and Chip's, this
-    // PR (FUT-2767) adds Checkbox/Radio's and Switch's.
+    // Additive: FUT-2766 added IconButton's/Chip's overrides, FUT-2767 added
+    // Checkbox/Radio's and Switch's, and this PR (FUT-2768) adds
+    // ToggleButton/Tab/Tabs' indicator/TableCell/PaginationItem/Slider's.
     components: mergeMuiComponents(
       fieldOverrides(ui.radius.field, ui.fieldHeight),
       iconButtonDensityOverrides(),
       chipDensityOverrides(),
       checkboxRadioDensityOverrides(),
       switchDensityOverrides(),
+      toggleButtonDensityOverrides(),
+      tabDensityOverrides(),
+      tabsIndicatorDensityOverrides(),
+      tableCellDensityOverrides(),
+      paginationItemDensityOverrides(),
+      sliderDensityOverrides(),
     ),
     spacing: ui.spacingUnit,
     density: ui.density,

package/src/tokens/density-overrides.navigation.ts

@@ -0,0 +1,226 @@
+import { tableCellClasses } from '@mui/material/TableCell/index.js';
+import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { rem, rems } from './relative';
+
+/**
+ * TOGGLEBUTTON / TAB / TABLECELL / PAGINATIONITEM / SLIDER GEOMETRY,
+ * DENSITY-AWARE (FUT-2768).
+ *
+ * The remainder of the fixed-px geometry the density audit catalogued, none
+ * of it hard-coded in `@12-apps/ui`'s own source. Verified against the
+ * installed `@mui/material@6.5.0` source; each goes through the SAME
+ * per-size/per-slot `overridesResolver` key MUI itself resolves
+ * (`iconButtonDensityOverrides`/`chipDensityOverrides`'s own mechanism), so a
+ * theme value composes with MUI's baked-in `variants` instead of replacing
+ * them outright:
+ *
+ * - `ToggleButton`: `padding: 11/7/15` at medium(root)/small/large — same
+ *   `root`/`sizeSmall`/`sizeLarge` shape as `iconButtonDensityOverrides`.
+ * - `Tab`: `minHeight: 48`, `padding: '12px 16px'` on the root (via `rems()`).
+ *   The icon+label combo (`minHeight: 72`, `paddingTop`/`Bottom: 9`) is a
+ *   SEPARATE MUI variant, exposed as the `labelIcon` key.
+ * - `TableCell`: `padding: 16` on the root, `'6px 16px'` at small, nested
+ *   inside it `'0 12px 0 16px'` on the small+checkbox combo — all gated on
+ *   `ownerState.padding === 'normal'` (MUI's default): `checkbox`/`none` are
+ *   separate variants with their OWN unscaled padding (`'0 0 0 4px'`/`0`) an
+ *   unconditional rule clobbered at every size but small (FUT-2861 review —
+ *   the SAME Lesson-1 clobber the ellipsis fix above avoids, missed here).
+ *   `@12-apps/ui`'s own `Table` (FUT-2769) wins regardless (two classes deep
+ *   under its styled root); this reaches a BARE `<TableCell>`.
+ * - `PaginationItem`: `minWidth/height: 32/26/40` at medium(root)/small/large.
+ *   The ellipsis shares the SAME slot and `minWidth` but has NO `height` of
+ *   its own (`'auto'`), gated on `ownerState.type` being neither
+ *   `'start-ellipsis'` nor `'end-ellipsis'` — skipping it would force a
+ *   height onto the ellipsis (Lesson 1).
+ * - `Slider`: rail `height: 4/2` at `orientation="horizontal"`/`size="small"`
+ *   — gated on `ownerState.orientation` since the SAME key answers for either
+ *   axis (MUI sets `height` horizontal / `width` vertical, leaving the other
+ *   `'100%'`). Thumb `20×20`/`12×12` needs no gate. `@12-apps/ui`'s own
+ *   `Slider` already sets rail/thumb size through `rem()` and never forwards
+ *   `size` — a no-op THERE, reaches a BARE `<Slider>`. The thumb's ring and
+ *   the value-label offset were checked and left OUT — that story's own doc.
+ *
+ * `Avatar` is NOT in this file: `@12-apps/ui`'s own `Avatar` wraps `MuiAvatar`
+ * in a `StyledAvatar` that ALREADY sets `width`/`height` through
+ * `rem(theme, boxPx(size))` (`40` at `md`) — higher specificity than any
+ * `MuiAvatar.styleOverrides.root`, dead code here, so it ships none.
+ *
+ * Geometry-neutral at `normal`; each slot a MODULE-LEVEL function, as above.
+ */
+
+const toggleButtonRootPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 11) });
+const toggleButtonSmallPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 7) });
+const toggleButtonLargePadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 15) });
+
+/** `MuiToggleButton`'s own padding, at every size MUI has. */
+export function toggleButtonDensityOverrides(): Components<Theme> {
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: toggleButtonRootPadding,
+        sizeSmall: toggleButtonSmallPadding,
+        sizeLarge: toggleButtonLargePadding,
+      },
+    },
+  };
+}
+
+const tabRootGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
+  minHeight: rem(theme, 48),
+  padding: rems(theme, 12, 16),
+});
+const tabLabelIconGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
+  minHeight: rem(theme, 72),
+  paddingTop: rem(theme, 9),
+  paddingBottom: rem(theme, 9),
+});
+
+/** `MuiTab`'s own root height/padding, and the icon+label combo's taller box. */
+export function tabDensityOverrides(): Components<Theme> {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: tabRootGeometry,
+        labelIcon: tabLabelIconGeometry,
+      },
+    },
+  };
+}
+
+interface TableCellOwnerStateForOverrides {
+  padding?: 'normal' | 'checkbox' | 'none';
+}
+type TableCellStyleFn = (props: { theme: Theme; ownerState?: TableCellOwnerStateForOverrides }) => CSSObject;
+const isDefaultTableCellPadding = (padding: TableCellOwnerStateForOverrides['padding']): boolean =>
+  padding === undefined || padding === 'normal';
+
+const tableCellRootPadding: TableCellStyleFn = ({ theme, ownerState }) =>
+  isDefaultTableCellPadding(ownerState?.padding) ? { padding: rem(theme, 16) } : {};
+
+const tableCellSmallPadding: TableCellStyleFn = ({ theme, ownerState }) => {
+  const style: CSSObject = {
+    [`&.${tableCellClasses.paddingCheckbox}`]: { padding: rems(theme, 0, 12, 0, 16) },
+  };
+  if (isDefaultTableCellPadding(ownerState?.padding)) style.padding = rems(theme, 6, 16);
+  return style;
+};
+
+/** Reaches a BARE `<TableCell>` only — module doc comment above. */
+export function tableCellDensityOverrides(): Components<Theme> {
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        root: tableCellRootPadding,
+        sizeSmall: tableCellSmallPadding,
+      },
+    },
+  };
+}
+
+/** The `ownerState` field that tells the ellipsis item apart from a real button. */
+interface PaginationItemOwnerStateForOverrides {
+  type?: 'page' | 'first' | 'last' | 'start-ellipsis' | 'end-ellipsis' | 'previous' | 'next';
+}
+type PaginationItemStyleFn = (props: {
+  theme: Theme;
+  ownerState?: PaginationItemOwnerStateForOverrides;
+}) => CSSObject;
+
+const isPaginationEllipsis = (type: PaginationItemOwnerStateForOverrides['type']): boolean =>
+  type === 'start-ellipsis' || type === 'end-ellipsis';
+
+/** `minWidth` always; `height` only off the ellipsis, which has none of its own. */
+function paginationItemGeometryAt(px: number): PaginationItemStyleFn {
+  return ({ theme, ownerState }) => {
+    const style: CSSObject = { minWidth: rem(theme, px) };
+    if (!isPaginationEllipsis(ownerState?.type)) style.height = rem(theme, px);
+    return style;
+  };
+}
+const paginationItemRootGeometry = paginationItemGeometryAt(32);
+const paginationItemSmallGeometry = paginationItemGeometryAt(26);
+const paginationItemLargeGeometry = paginationItemGeometryAt(40);
+
+/**
+ * `MuiPaginationItem`'s own `minWidth`/`height`, at every size MUI has —
+ * `height` skipped on the ellipsis item, which has none of its own (`auto`).
+ */
+export function paginationItemDensityOverrides(): Components<Theme> {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: paginationItemRootGeometry,
+        sizeSmall: paginationItemSmallGeometry,
+        sizeLarge: paginationItemLargeGeometry,
+      },
+    },
+  };
+}
+
+/** The `ownerState` field that tells which axis the rail's `height`/`4` reads as. */
+interface SliderOwnerStateForOverrides {
+  orientation?: 'horizontal' | 'vertical';
+}
+type SliderStyleFn = (props: { theme: Theme; ownerState?: SliderOwnerStateForOverrides }) => CSSObject;
+
+/** The rail's `4`/`2` reads as `height` for a horizontal slider, `width` for a vertical one. */
+function sliderRailAxisAt(px: number): SliderStyleFn {
+  return ({ theme, ownerState }) =>
+    ownerState?.orientation === 'vertical' ? { width: rem(theme, px) } : { height: rem(theme, px) };
+}
+const sliderRootGeometry = sliderRailAxisAt(4);
+const sliderSmallGeometry = sliderRailAxisAt(2);
+const sliderThumbGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
+  width: rem(theme, 20),
+  height: rem(theme, 20),
+});
+const sliderThumbSmallGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
+  width: rem(theme, 12),
+  height: rem(theme, 12),
+});
+
+/** `MuiSlider`'s own rail thickness (root/sizeSmall) and thumb box (thumb/thumbSizeSmall). */
+export function sliderDensityOverrides(): Components<Theme> {
+  return {
+    MuiSlider: {
+      styleOverrides: {
+        root: sliderRootGeometry,
+        sizeSmall: sliderSmallGeometry,
+        thumb: sliderThumbGeometry,
+        thumbSizeSmall: sliderThumbSmallGeometry,
+      },
+    },
+  };
+}
+
+/**
+ * `MuiTabs`' own indicator thickness (`height: 2` horizontal, `width: 2`
+ * vertical) — one short of `Tab` in the ticket's own literal list, added
+ * after a FUT-2767-review pass over state/orientation-gated literals; same
+ * orientation gate as the Slider rail. `@12-apps/ui`'s own `Tabs` draws its
+ * OWN 3px indicator through `rem()` already, blocking THIS override there —
+ * `tabDensityOverrides` reaches `Tab.root`'s `minHeight` instead (both
+ * measured in `density-wrapper-reach.test.stories.tsx`).
+ */
+interface TabsIndicatorOwnerStateForOverrides {
+  orientation?: 'horizontal' | 'vertical';
+}
+type TabsIndicatorStyleFn = (props: {
+  theme: Theme;
+  ownerState?: TabsIndicatorOwnerStateForOverrides;
+}) => CSSObject;
+
+const tabsIndicatorAxisAt: TabsIndicatorStyleFn = ({ theme, ownerState }) =>
+  ownerState?.orientation === 'vertical' ? { width: rem(theme, 2) } : { height: rem(theme, 2) };
+
+/** `MuiTabs`' own indicator thickness, by orientation. */
+export function tabsIndicatorDensityOverrides(): Components<Theme> {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: tabsIndicatorAxisAt,
+      },
+    },
+  };
+}

package/src/tokens/density-overrides.selection.ts

@@ -0,0 +1,210 @@
+import { switchClasses } from '@mui/material/Switch/index.js';
+import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { rem, rems } from './relative';
+
+/**
+ * CHECKBOX / RADIO / SWITCH GEOMETRY, DENSITY-AWARE (FUT-2767).
+ *
+ * `Checkbox`/`Radio`/`Switch` are MUI's own components, unwrapped — but
+ * **only two of the three `@12-apps/ui` wrappers actually forward their
+ * geometry to MUI**, corrected here after an earlier revision of this doc
+ * comment claimed all three did.
+ *
+ * - `Checkbox.tsx`'s `StyledCheckbox` and `RadioGroup.variants.tsx`'s
+ *   `DefaultRadios` (the ONLY variant rendering a raw `<Radio>` — `cards`/
+ *   `buttons`/`segments` draw custom controls, outside this ticket) set NO
+ *   `padding` of their own, so `checkboxRadioDensityOverrides()` reaches
+ *   both directly — confirmed by a real render, same computed padding as
+ *   raw `MuiCheckbox`/`MuiRadio` at both densities
+ *   (`density-overrides.test.stories.tsx`'s `ui-checkbox`/`ui-radio-group`).
+ * - `Switch.styles.ts`'s `switchSx` is DIFFERENT: it draws root/switchBase/
+ *   thumb geometry itself, per instance, from its own `SWITCH_SIZES` table
+ *   (`Switch.metrics.ts`), every number already through `rem(theme, px)`.
+ *   `Switch.parts.tsx`'s `StyledSwitch = styled(MuiSwitch, {...})(...)`
+ *   composes these as an OUTER wrapper class whose nested `& .MuiSwitch-
+ *   switchBase`/`& .MuiSwitch-thumb` selectors are a TWO-class compound —
+ *   higher specificity than this file's `MuiSwitch.styleOverrides.
+ *   switchBase`/`thumb`, which compose onto a single-class generated class.
+ *   `switchDensityOverrides()` therefore has **NO effect on `@12-apps/ui`'s
+ *   own `<Switch>`** — it only reaches a raw `@mui/material/Switch` consumer
+ *   (a host's own `Table.tsx` density-toggle column, say). Not a gap:
+ *   `switchSx` already reacts to `theme.typography.fontSize` on its own —
+ *   including the CHECKED thumb's own travel distance, computed as
+ *   `rem(theme, width - thumbSize - padding * 2)` from the SAME per-instance
+ *   geometry, so it moves consistently with no help from this file.
+ *   Confirmed by measurement, both sizes, both states, both densities
+ *   (`ui-switch-*` cases); documented at `Switch.md`'s "Density" section.
+ *
+ * **The ticket's open question — does a `MuiSwitchBase` theme override reach
+ * `Checkbox`/`Radio` at all? — is NO, verified two ways.** `Checkbox`/`Radio`
+ * both render through `internal/SwitchBase.js`'s `SwitchBaseRoot`, which is
+ * `styled(ButtonBase, { name: 'MuiSwitchBase' })({ padding: 9, ... })` — with
+ * NO `slot` key. `@mui/system`'s `createStyled.js` computes
+ * `overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(slot))`,
+ * and `defaultOverridesResolver` (`if (!slot) return null`) returns `null`
+ * for an absent slot; the styled call itself then only pushes its
+ * `styleThemeOverrides` expression `if (componentName && overridesResolver)`
+ * — `null` is falsy, so for THIS styled call `theme.components.MuiSwitchBase
+ * .styleOverrides` is never read at all. (`variants` is a SEPARATE check,
+ * gated on `skipVariantsResolver` rather than `overridesResolver`, which is
+ * why the ticket's own two-part specificity proof for Chip's label — probing
+ * with `variants` — does not transfer here; `styleOverrides` is what dies.)
+ * A render-level probe confirms it: a theme with `components.MuiSwitchBase
+ * .styleOverrides.root = { padding: '999px' }`, rendering `<Switch />`,
+ * `<Checkbox />` and `<Radio />` through it, leaves EVERY ONE of `.MuiSwitch-
+ * switchBase`, `.MuiCheckbox-root` and `.MuiRadio-root` at their unthemed
+ * padding (`9px`/`4px` — see below), never `999px`. The Decision's own
+ * suggested `MuiSwitchBase` route is therefore the ticket's documented
+ * fallback in disguise: this file skips straight to duplicating the override
+ * under `MuiCheckbox` and `MuiRadio`, each independently confirmed LIVE by
+ * the same probe (`components.MuiCheckbox.styleOverrides.root.padding` DOES
+ * reach `.MuiCheckbox-root`, and the same for `MuiRadio`).
+ *
+ * - `Checkbox`/`Radio` (`internal/SwitchBase.js`, `Checkbox.js`, `Radio.js`):
+ *   `padding: 9` — constant across `size="small"`/`"medium"` today (neither
+ *   `CheckboxRoot` nor `RadioRoot` carries a size-conditional padding rule),
+ *   so ONE `root` override, no `sizeSmall`/`sizeMedium` split, covers both
+ *   sizes without disturbing the glyph-driven size difference FUT-2585 left
+ *   alone.
+ * - `Switch` (`Switch.js`): root (the track) `width: 34+12*2`, `height:
+ *   14+12*2`, `padding: 12` (medium); `switchBase` (the thumb's absolutely-
+ *   positioned wrapper) — its OWN literal is NOT the `12` the ticket's
+ *   Decision sketch names (that `12` is `SwitchRoot`'s own padding, a
+ *   DIFFERENT slot); `switchBase` inherits `internal/SwitchBase.js`'s generic
+ *   `padding: 9` unmodified at medium (`SwitchSwitchBase`'s own styles never
+ *   set `padding`), confirmed by the same render probe with NO theme
+ *   override at all (`.MuiSwitch-switchBase` computed padding: `9px`). This
+ *   file overrides `MuiSwitch.styleOverrides.switchBase` (a LIVE key —
+ *   `SwitchSwitchBase = styled(SwitchBase, { name: 'MuiSwitch', slot:
+ *   'SwitchBase', ... })` DOES pass a `slot`) with `rem(theme, 9)`, the
+ *   MEASURED default, not the ticket's `12` — using `12` here would move
+ *   today's real 9px to 12px at `density: 'normal'`, failing the Done-when's
+ *   own pixel-identical requirement, so the number is corrected against the
+ *   probe rather than the sketch. `thumb`: `20×20`, unconditional.
+ * - `Switch` `size="small"` (`:82-100`, a `variants` entry on `SwitchRoot`
+ *   itself): root `width: 40`, `height: 24`, `padding: 7`; a NESTED `&
+ *   .${switchClasses.switchBase}` selector sets `padding: 4` (not 9); a
+ *   NESTED `& .${switchClasses.thumb}` selector sets `20×20` down to
+ *   `16×16`. Both nested rules are baked into `SwitchRoot`'s OWN generated
+ *   class at TWO-class specificity (the size-small instance's unique class,
+ *   plus `.MuiSwitch-switchBase`/`.MuiSwitch-thumb`) — exactly the Chip
+ *   outlined-label shape this file already has above, and the SAME failure
+ *   mode Lesson 1 warns about: a FLAT `styleOverrides.switchBase`/`thumb`
+ *   (one class) cannot out-specificity it, so at `size="small"` it would
+ *   silently keep rendering MUI's unthemed `4px`/`16×16` at every density,
+ *   the click target and thumb staying full-size while the track around them
+ *   shrank. Fixed the same way: `sizeSmall`'s OWN nested `& .${switchClasses
+ *   .switchBase}` / `& .${switchClasses.thumb}` rules, read through
+ *   `switchClasses` (not a hand-typed selector string) for the same
+ *   `ClassNameGenerator.configure` reason `chipClasses` is above, inserted
+ *   as part of the SAME `sizeSmall` override object so they land AFTER
+ *   `SwitchRoot`'s own baked-in small variant in the generated class's CSS
+ *   text (later wins at matching two-class specificity) rather than trying
+ *   to out-specificity it from a different slot.
+ *
+ * **The checked thumb's own travel distance is a FOURTH literal, found only
+ * on adversarial review of the PR this doc comment first shipped in.**
+ * `SwitchSwitchBase`'s base style bakes in `&.Mui-checked { transform:
+ * translateX(20px) }` (medium), and `SwitchRoot`'s `size: 'small'` variant
+ * nests the same at `16px` — both bare, never run through `pxToRem`, so at
+ * `density: 'compact'` the checked thumb kept travelling the FULL, unscaled
+ * distance while the track around it shrank ×0.9 — a visible overshoot.
+ * `switchSwitchBasePadding`/`switchSizeSmall` each now carry their own
+ * `&.${switchClasses.checked}` rule (`translateX(rem(theme, 20))`/`rem(theme,
+ * 16)`), composed onto the SAME generated class, in the SAME position
+ * `padding` already occupies — so it wins by the identical mechanism, not a
+ * new one. Proven at the pixel level, both sizes/densities: `switch-md-
+ * checked`/`switch-sm-checked` measure the thumb's final position against
+ * the track's own edge, not just the transform string.
+ *
+ * At `density: 'normal'` every number above computes back to the literal it
+ * replaces (`rem(theme, 9)` is `0.5625rem`, `9px` at the 16px root — no
+ * visible change), the same geometry-neutral guarantee `iconButtonDensity
+ * Overrides`/`chipDensityOverrides` give above. The same non-default-
+ * `fontSize` caveat those two give applies here unchanged: `rem()` only ever
+ * reads `theme.typography.fontSize`, so a host adopting
+ * `checkboxRadioDensityOverrides`/`switchDensityOverrides` standalone moves
+ * every number here by that one coefficient, same as everything else `rem()`
+ * touches.
+ */
+
+const checkboxRadioRootPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 9) });
+
+/**
+ * `MuiCheckbox`/`MuiRadio`'s own padding — duplicated under both component
+ * keys, the ticket's own documented fallback, since `MuiSwitchBase` cannot
+ * reach either (see the module doc comment above). One module-level function
+ * shared by both keys, and by `checkboxRadioDensityOverrides()`'s own two
+ * calls across the two theme-build paths, for the same identity reason the
+ * rest of this file's slots are module-level.
+ */
+export function checkboxRadioDensityOverrides(): Components<Theme> {
+  return {
+    MuiCheckbox: { styleOverrides: { root: checkboxRadioRootPadding } },
+    MuiRadio: { styleOverrides: { root: checkboxRadioRootPadding } },
+  };
+}
+
+const switchRootGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
+  width: rems(theme, 34 + 12 * 2),
+  height: rems(theme, 14 + 12 * 2),
+  padding: rem(theme, 12),
+});
+const switchSwitchBasePadding = ({ theme }: { theme: Theme }): CSSObject => ({
+  padding: rem(theme, 9),
+  // FUT-2767 (adversarial-review fix) — `SwitchSwitchBase`'s OWN base style
+  // (`Switch.js`, medium) bakes in `&.Mui-checked { transform:
+  // translateX(20px) }`, a bare literal never run through `pxToRem` — at
+  // `density: 'compact'` the track/padding/thumb above all shrink ×0.9 but
+  // this offset stayed at a full 20px, so the checked thumb overshot the now-
+  // smaller track. Composed onto the SAME generated class as that base style,
+  // AFTER it (`createStyled` composes `styleThemeOverrides` after a slot's
+  // own base/variants — see the module doc comment), so this nested rule
+  // wins at the SAME (two-class, `.<hash>.Mui-checked`) specificity, the same
+  // mechanism this function's own `padding` line already relies on.
+  [`&.${switchClasses.checked}`]: { transform: `translateX(${rem(theme, 20)})` },
+});
+const switchThumbSize = ({ theme }: { theme: Theme }): CSSObject => ({
+  width: rem(theme, 20),
+  height: rem(theme, 20),
+});
+const switchSizeSmall = ({ theme }: { theme: Theme }): CSSObject => ({
+  width: rem(theme, 40),
+  height: rem(theme, 24),
+  padding: rem(theme, 7),
+  // Higher (two-class) specificity than the flat `switchBase`/`thumb`
+  // overrides above, inserted as part of THIS SAME generated class — see the
+  // module doc comment for why a flat override cannot reach these at
+  // `size="small"` on its own.
+  [`& .${switchClasses.switchBase}`]: {
+    padding: rem(theme, 4),
+    // Same overshoot as medium's, at `size="small"`'s OWN literal
+    // (`SwitchRoot`'s baked-in `size: 'small'` variant, `Switch.js`:
+    // `translateX(16px)`). Nested one level deeper so the compiled selector
+    // is `.<root-hash> .MuiSwitch-switchBase.Mui-checked` — the same THREE-
+    // class descendant compound MUI's own baked-in small variant uses for
+    // this rule, composed after it in the same generated class, so it wins
+    // at matching specificity the same way the sibling `padding: rem(theme,
+    // 4)` line above already does.
+    [`&.${switchClasses.checked}`]: { transform: `translateX(${rem(theme, 16)})` },
+  },
+  [`& .${switchClasses.thumb}`]: { width: rem(theme, 16), height: rem(theme, 16) },
+});
+
+/**
+ * `MuiSwitch`'s own track (root), thumb wrapper (switchBase) and thumb
+ * (thumb) geometry, at both sizes MUI has.
+ */
+export function switchDensityOverrides(): Components<Theme> {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        root: switchRootGeometry,
+        switchBase: switchSwitchBasePadding,
+        thumb: switchThumbSize,
+        sizeSmall: switchSizeSmall,
+      },
+    },
+  };
+}