@12-apps/ui 6.48.1 → 6.49.0

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,
+      },
+    },
+  };
+}

package/src/tokens/density-overrides.ts

@@ -1,8 +1,21 @@
 import { chipClasses } from '@mui/material/Chip/index.js';
-import { switchClasses } from '@mui/material/Switch/index.js';
 import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
 
-import { rem, rems } from './relative';
+import { rem } from './relative';
+
+// Re-exported so every existing import site (`./density`, `./scales`,
+// `../provider/mui-bridge`) keeps resolving `from './density-overrides'`
+// unchanged — the split below is purely a file-layout move to stay under
+// the 400-line `quality:complexity` cap, not a public-API change.
+export {
+  toggleButtonDensityOverrides,
+  tabDensityOverrides,
+  tabsIndicatorDensityOverrides,
+  tableCellDensityOverrides,
+  paginationItemDensityOverrides,
+  sliderDensityOverrides,
+} from './density-overrides.navigation';
+export { checkboxRadioDensityOverrides, switchDensityOverrides } from './density-overrides.selection';
 
 /** The `ownerState` fields `MuiChip`'s two styled slots (root, label) both receive. */
 interface ChipOwnerStateForOverrides {
@@ -176,209 +189,3 @@ export function chipDensityOverrides(): Components<Theme> {
     },
   };
 }
-
-/**
- * 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,
-      },
-    },
-  };
-}