@12-apps/ui 6.50.0 → 6.51.0

package/src/components/navigation/SectionNav/SectionNav.types.ts

@@ -3,21 +3,61 @@ import type { ElementType, ReactNode } from 'react';
 import type { SectionNavCopy } from '../../../copy';
 
 /**
- * One place the section leads to — a bar slot on a phone, a row in the rail.
+ * One slot of the section — a bar slot on a phone, a row in the rail.
+ *
+ * A slot either LEADS somewhere (`href`, rendered through `linkComponent`) or
+ * DOES something (`onSelect`), the way a menu entry does. A bar of places is a
+ * section's navigation; a bar of verbs is a screen's actions pinned at its
+ * foot, and it is the same bar, so the two cannot be drawn two ways. Give a
+ * slot one or the other.
  */
 export interface SectionNavDestination {
   /** Stable key. Also the suffix of the slot's `data-testid`. */
   id: string;
   label: string;
   icon: ReactNode;
-  href: string;
+  href?: string;
+  /**
+   * What the slot does, for an action slot. Ignored while `disabled` or
+   * `loading`; still called while `dimmed`.
+   */
+  onSelect?: () => void;
+  /**
+   * Drawn dimmed and not operable: the act exists here, and cannot be done
+   * now. A native `disabled` button — a tap does nothing, and `onSelect` is
+   * not called.
+   */
+  disabled?: boolean;
+  /**
+   * Drawn exactly like `disabled`, but still TAPPABLE: for an act the screen
+   * cannot do now and should EXPLAIN when tapped. It reports
+   * `aria-disabled="true"`, stays focusable, never lights up, and its
+   * `onSelect` still fires so the host can answer with a message (why not,
+   * and what would make it possible).
+   */
+  dimmed?: boolean;
+  /**
+   * A write this slot started is in flight — a spinner replaces the icon, the
+   * slot reports `aria-busy` and `aria-disabled`, and a tap is ignored. It
+   * stays focusable, so the keyboard does not lose its place mid-write.
+   */
+  loading?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
   /**
    * How many things behind this destination wait on the viewer. `0` and
    * `undefined` render no badge — "nothing waiting" and "not known yet" are
    * different claims and neither is a number.
    */
   badge?: number;
-  /** The destination the viewer is on. The host decides; the nav never reads the URL. */
+  /**
+   * For a link: the destination the viewer is on (`aria-current="page"`). For
+   * an action slot: a toggle that is ON (`aria-pressed`). The host decides;
+   * the nav never reads the URL.
+   */
   active?: boolean;
 }
 
@@ -37,6 +77,13 @@ export interface SectionNavEntry {
   onSelect?: () => void;
   badge?: number;
   active?: boolean;
+  /** Drawn dimmed and not operable — a print already on its way, an act this state refuses. */
+  disabled?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
 }
 
 /** A titled run of entries inside a menu. */
@@ -67,6 +114,33 @@ export interface SectionNavMenu {
   /** The sheet's heading, and the rail section's. */
   title: string;
   groups: SectionNavGroup[];
+  /** The trigger is drawn dimmed and does not open; in the rail every row of it is inert. */
+  disabled?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
+}
+
+/**
+ * The raised primary as a plain ACTION rather than a menu: one act, done on
+ * tap. Its label is drawn under the button, because a bar of verbs names the
+ * act it is for rather than leaving it to an icon.
+ */
+export interface SectionNavAction {
+  label: string;
+  icon: ReactNode;
+  onSelect: () => void;
+  /** A native `disabled` button: a tap does nothing. */
+  disabled?: boolean;
+  /** In flight: a spinner, `aria-busy`, `aria-disabled`; focusable, and a tap is ignored. */
+  loading?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
 }
 
 /** The way out of the section, drawn at the top of the rail. */
@@ -88,8 +162,11 @@ export interface SectionNavProps {
   /** The navigation landmark's accessible name. */
   label: string;
   destinations: SectionNavDestination[];
-  /** The raised action in the middle of the bar. */
-  primary?: SectionNavMenu;
+  /**
+   * The raised button in the middle of the bar: a menu it opens as a sheet,
+   * or an action it does on tap (drawn with its label under it).
+   */
+  primary?: SectionNavMenu | SectionNavAction;
   /** The last slot of the bar. Its badge is the sum of its entries' badges. */
   more?: SectionNavMenu;
   /** Rail only: the way back out of the section. */

package/src/components/navigation/SectionNav/__stories__/fixtures.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { sxRem } from '../../../../tokens/scales';
 
-import type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
+import type { SectionNavAction, SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
 
 /**
  * The stories' example section, shared by the showcase and the interaction
@@ -109,3 +109,23 @@ export function PhoneFrame({ children }: { children: React.ReactNode }): React.R
 export function RailFrame({ children }: { children: React.ReactNode }): React.ReactElement {
   return <Box sx={{ width: sxRem(240), height: sxRem(560), border: 1, borderColor: 'divider' }}>{children}</Box>;
 }
+
+/**
+ * A screen's ACTIONS pinned at its foot — the same bar, drawn with verbs: a
+ * bill being settled, one person at a time.
+ *
+ * `split` is DIMMED — it cannot be done yet, and a tap still reaches the host
+ * so it can say why. `equal` is a TOGGLE that is on: `aria-pressed`, never
+ * `aria-current`, because an action is not a page.
+ */
+export const ACTIONS: SectionNavDestination[] = [
+  { id: 'split', label: 'Split', icon: <ReceiptLongOutlinedIcon />, onSelect: () => undefined, dimmed: true },
+  { id: 'equal', label: 'Equally', icon: <GroupsOutlinedIcon />, onSelect: () => undefined, active: true },
+  { id: 'person', label: 'Person', icon: <AddIcon />, onSelect: () => undefined },
+];
+
+export const PAY_ALL: SectionNavAction = {
+  label: 'Pay all',
+  icon: <StorefrontOutlinedIcon />,
+  onSelect: () => undefined,
+};

package/src/components/navigation/SectionNav/index.ts

@@ -3,6 +3,7 @@ export { sectionNavBarInset } from './SectionNav.bar';
 export { RaisedActionButton } from './SectionNav.primary';
 export type { RaisedActionButtonProps } from './SectionNav.primary';
 export type {
+  SectionNavAction,
   SectionNavBack,
   SectionNavDestination,
   SectionNavEntry,

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

@@ -1,4 +1,4 @@
-import { tableCellClasses } from '@mui/material/TableCell/index.js';
+import generateUtilityClass from '@mui/material/generateUtilityClass/index.js';
 import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldRadius } from './field-radius';
@@ -123,9 +123,22 @@ const isDefaultTableCellPadding = (padding: TableCellOwnerStateForOverrides['pad
 const tableCellRootPadding: TableCellStyleFn = ({ theme, ownerState }) =>
   isDefaultTableCellPadding(ownerState?.padding) ? { padding: rem(theme, 16) } : {};
 
+/**
+ * Built with `generateUtilityClass`, not imported from
+ * `@mui/material/TableCell`'s own `tableCellClasses` — the same generated
+ * string (`TableCell.js` builds `tableCellClasses` from this exact helper),
+ * but without pulling `MuiTableCell` onto the critical path of every host
+ * that imports `densityThemeOptions`, the same reason `density-overrides.ts`'s
+ * `CHIP_LABEL` and `density-overrides.selection.ts`'s `SWITCH_*` constants
+ * are built this way instead of read off the component's own classes module
+ * (FUT-2993). It also honours a host's own `ClassNameGenerator.configure`,
+ * which a hand-typed `.MuiTableCell-paddingCheckbox` string would not.
+ */
+const TABLE_CELL_PADDING_CHECKBOX = generateUtilityClass('MuiTableCell', 'paddingCheckbox');
+
 const tableCellSmallPadding: TableCellStyleFn = ({ theme, ownerState }) => {
   const style: CSSObject = {
-    [`&.${tableCellClasses.paddingCheckbox}`]: { padding: rems(theme, 0, 12, 0, 16) },
+    [`&.${TABLE_CELL_PADDING_CHECKBOX}`]: { padding: rems(theme, 0, 12, 0, 16) },
   };
   if (isDefaultTableCellPadding(ownerState?.padding)) style.padding = rems(theme, 6, 16);
   return style;

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

@@ -1,4 +1,4 @@
-import { switchClasses } from '@mui/material/Switch/index.js';
+import generateUtilityClass from '@mui/material/generateUtilityClass/index.js';
 import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { rem, rems } from './relative';
@@ -94,14 +94,17 @@ import { rem, rems } from './relative';
  *   (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.
+ *   shrank. Fixed the same way: `sizeSmall`'s OWN nested `& .${SWITCH_SWITCH_
+ *   BASE}` / `& .${SWITCH_THUMB}` rules, built with `generateUtilityClass`
+ *   (not a hand-typed selector string) for the same `ClassNameGenerator
+ *   .configure` reason `density-overrides.ts`'s `CHIP_LABEL` is — and, unlike
+ *   reading `switchClasses` off `@mui/material/Switch` itself, without
+ *   putting `MuiSwitch` on the critical path of every host that imports
+ *   `densityThemeOptions` (FUT-2993) — 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.**
@@ -111,7 +114,7 @@ import { rem, rems } from './relative';
  * `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,
+ * `&.${SWITCH_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-
@@ -146,6 +149,20 @@ export function checkboxRadioDensityOverrides(): Components<Theme> {
   };
 }
 
+/**
+ * Built with `generateUtilityClass`, not imported from `@mui/material/Switch`'s
+ * own `switchClasses` — the same generated strings (`Switch.js` builds
+ * `switchClasses` from this exact helper), but without pulling `MuiSwitch`
+ * onto the critical path of every host that imports `densityThemeOptions`
+ * (see the module doc comment, and FUT-2993). `SWITCH_CHECKED` is a GLOBAL
+ * state slot (`generateUtilityClass`'s `globalStateClasses` table), so it
+ * resolves to `Mui-checked`, not `MuiSwitch-checked` — the same string
+ * `switchClasses.checked` gives.
+ */
+const SWITCH_SWITCH_BASE = generateUtilityClass('MuiSwitch', 'switchBase');
+const SWITCH_THUMB = generateUtilityClass('MuiSwitch', 'thumb');
+const SWITCH_CHECKED = generateUtilityClass('MuiSwitch', 'checked');
+
 const switchRootGeometry = ({ theme }: { theme: Theme }): CSSObject => ({
   width: rems(theme, 34 + 12 * 2),
   height: rems(theme, 14 + 12 * 2),
@@ -163,7 +180,7 @@ const switchSwitchBasePadding = ({ theme }: { theme: Theme }): CSSObject => ({
   // 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)})` },
+  [`&.${SWITCH_CHECKED}`]: { transform: `translateX(${rem(theme, 20)})` },
 });
 const switchThumbSize = ({ theme }: { theme: Theme }): CSSObject => ({
   width: rem(theme, 20),
@@ -177,7 +194,7 @@ const switchSizeSmall = ({ theme }: { theme: Theme }): CSSObject => ({
   // 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}`]: {
+  [`& .${SWITCH_SWITCH_BASE}`]: {
     padding: rem(theme, 4),
     // Same overshoot as medium's, at `size="small"`'s OWN literal
     // (`SwitchRoot`'s baked-in `size: 'small'` variant, `Switch.js`:
@@ -187,9 +204,9 @@ const switchSizeSmall = ({ theme }: { theme: Theme }): CSSObject => ({
     // 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)})` },
+    [`&.${SWITCH_CHECKED}`]: { transform: `translateX(${rem(theme, 16)})` },
   },
-  [`& .${switchClasses.thumb}`]: { width: rem(theme, 16), height: rem(theme, 16) },
+  [`& .${SWITCH_THUMB}`]: { width: rem(theme, 16), height: rem(theme, 16) },
 });
 
 /**

package/src/tokens/density-overrides.ts

@@ -1,4 +1,4 @@
-import { chipClasses } from '@mui/material/Chip/index.js';
+import generateUtilityClass from '@mui/material/generateUtilityClass/index.js';
 import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { rem } from './relative';
@@ -81,8 +81,13 @@ interface ChipOwnerStateForOverrides {
  * own single-class rule (`0,1,0`), so it wins regardless of source order —
  * the same technique `ChipRoot`'s OWN style already uses for its avatar/
  * icon/delete-icon sub-parts (`& .${chipClasses.avatar}`, etc., in
- * `Chip.js`), and read through the SAME `chipClasses` MUI's own `Chip.js`
- * generates the real DOM class from, not a hand-typed copy of it.
+ * `Chip.js`), and built the same way `Chip.js` itself builds that class:
+ * `generateUtilityClass('MuiChip', 'label')`, MUI's own public helper
+ * (`@mui/material/generateUtilityClass`), not a hand-typed copy of it and not
+ * `chipClasses` — importing `chipClasses` pulls in `@mui/material/Chip`
+ * itself, which puts `MuiChip` on the critical path of every host that
+ * imports `densityThemeOptions`, including one that never renders a density
+ * at all (FUT-2993).
  *
  * **That same higher specificity also outranks a HOST's own theming.** A
  * host writing `theme.components.MuiChip.styleOverrides.label` for its own
@@ -121,6 +126,15 @@ interface ChipOwnerStateForOverrides {
  * make them differ on nothing but identity.
  */
 
+/**
+ * Built with `generateUtilityClass`, not imported from `@mui/material/Chip`'s
+ * own `chipClasses` — the same generated string (`Chip.js` builds
+ * `chipClasses` from this exact helper), but without pulling `MuiChip` onto
+ * the critical path of every host that imports `densityThemeOptions` (see the
+ * module doc comment, and FUT-2993).
+ */
+const CHIP_LABEL = generateUtilityClass('MuiChip', 'label');
+
 const iconButtonRootPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 8) });
 const iconButtonSmallPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 5) });
 const iconButtonLargePadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 12) });
@@ -155,14 +169,16 @@ const chipRootHeight = ({
     // (two classes vs one) — wins over `chipLabelPadding`/`chipLabelSmallPadding`
     // below regardless of stylesheet insertion order. See the module doc
     // comment for why this must live here and not on the label slot itself.
-    // `chipClasses.label`, not a hand-typed `.MuiChip-label` string — the same
-    // module `Chip.js`'s own root style reads for its avatar/icon/delete-icon
-    // selectors, so this tracks whatever `Chip.js` itself puts on the label
-    // element rather than a separately-maintained copy of it. A host that
-    // calls `ClassNameGenerator.configure` before any `MuiChip` module loads
-    // renames the real class; a literal string would silently stop matching
-    // it, `chipClasses.label` cannot.
-    style[`& .${chipClasses.label}`] = { paddingLeft: rem(theme, px), paddingRight: rem(theme, px) };
+    // `CHIP_LABEL` (`generateUtilityClass('MuiChip', 'label')`), not a
+    // hand-typed `.MuiChip-label` string — the same helper `Chip.js`'s own
+    // root style reads for its avatar/icon/delete-icon selectors (via
+    // `chipClasses`), so this tracks whatever `Chip.js` itself puts on the
+    // label element rather than a separately-maintained copy of it. A host
+    // that calls `ClassNameGenerator.configure` before any `MuiChip` module
+    // loads renames the real class; a literal string would silently stop
+    // matching it, `generateUtilityClass` cannot — and unlike `chipClasses`,
+    // it does so without importing `@mui/material/Chip` at all (FUT-2993).
+    style[`& .${CHIP_LABEL}`] = { paddingLeft: rem(theme, px), paddingRight: rem(theme, px) };
   }
   return style;
 };

package/dist/chunk-32JMSHEA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.sheet.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { ElementType } from 'react';\n\nimport { rem } from '../../../tokens/scales';\nimport { Drawer, DrawerContent, DrawerHeader } from '../../layout/Drawer';\n\nimport { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';\nimport type { SectionNavEntry, SectionNavGroup, SectionNavMenu } from './SectionNav.types';\nimport type { SectionNavCopy } from '../../../copy';\n\ninterface EntryProps {\n  entry: SectionNavEntry;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  onDone: () => void;\n}\n\n/** A tile in a `grid` group: icon over a short label. */\nfunction GridEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...controlProps({\n        href: entry.href,\n        linkComponent,\n        onClick: () => {\n          entry.onSelect?.();\n          onDone();\n        },\n      })}\n      aria-current={entry.active ? 'page' : undefined}\n      data-testid={`${testId}-entry-${entry.id}`}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 0.75,\n        minHeight: rem(theme, 76),\n        px: 0.5,\n        py: 1,\n        borderRadius: 1.5,\n        textAlign: 'center',\n        bgcolor: entry.active ? 'action.selected' : 'action.hover',\n        color: entry.active ? 'primary.main' : 'text.primary',\n        '& svg': { color: 'primary.main' },\n      }}\n    >\n      <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />\n      <Typography component=\"span\" variant=\"caption\" sx={{ lineHeight: 1.2, fontWeight: entry.active ? 700 : 500 }}>\n        {entry.label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** A row in a `list` group: icon, label, and the description under it. */\nfunction ListEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...controlProps({\n        href: entry.href,\n        linkComponent,\n        onClick: () => {\n          entry.onSelect?.();\n          onDone();\n        },\n      })}\n      aria-current={entry.active ? 'page' : undefined}\n      data-testid={`${testId}-entry-${entry.id}`}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1.5,\n        width: '100%',\n        minHeight: rem(theme, 52),\n        px: 1.5,\n        py: 1,\n        borderRadius: 1.5,\n        textAlign: 'start',\n        bgcolor: entry.active ? 'action.selected' : 'action.hover',\n        '& svg': { color: 'primary.main' },\n      }}\n    >\n      <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />\n      <Box component=\"span\" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>\n        <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: 600 }}>\n          {entry.label}\n        </Typography>\n        {entry.description ? (\n          <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">\n            {entry.description}\n          </Typography>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n\n/** One titled run of entries, as tiles or rows. */\nfunction SheetGroup({\n  group,\n  linkComponent,\n  copy,\n  testId,\n  onDone,\n}: Omit<EntryProps, 'entry'> & { group: SectionNavGroup }): React.JSX.Element {\n  const grid = group.layout === 'grid';\n  const Entry = grid ? GridEntry : ListEntry;\n  return (\n    <Box component=\"section\" data-testid={`${testId}-group-${group.id}`} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n      {group.title ? (\n        <Typography variant=\"overline\" color=\"text.secondary\" sx={{ lineHeight: 1.6 }}>\n          {group.title}\n        </Typography>\n      ) : null}\n      <Box\n        sx={\n          grid\n            ? { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 1 }\n            : { display: 'flex', flexDirection: 'column', gap: 0.75 }\n        }\n      >\n        {group.entries.map((entry) => (\n          <Entry key={entry.id} entry={entry} linkComponent={linkComponent} copy={copy} testId={testId} onDone={onDone} />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A menu opened from the bar: a bottom sheet over the page.\n *\n * Choosing an entry closes it — a link has somewhere to go and an action has\n * something to do, and neither wants the sheet still covering the screen.\n */\nexport function SectionNavSheet({\n  menu,\n  open,\n  onClose,\n  linkComponent,\n  copy,\n  testId,\n  bottomOffset,\n}: {\n  menu: SectionNavMenu;\n  open: boolean;\n  onClose: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  /** How far above the viewport's foot the sheet stops — the bar's own height, so the bar stays visible. */\n  bottomOffset: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Drawer\n      open={open}\n      onClose={onClose}\n      anchor=\"bottom\"\n      height=\"auto\"\n      dataTestId={testId}\n      paperSx={{\n        borderTopLeftRadius: rem(theme, Number(theme.shape.borderRadius) * 3),\n        borderTopRightRadius: rem(theme, Number(theme.shape.borderRadius) * 3),\n        maxHeight: `calc(85dvh - ${bottomOffset})`,\n        bottom: bottomOffset,\n      }}\n    >\n      {/* The library Drawer names nothing: the dialog role and its name live\n          here, around everything the focus trap holds. */}\n      <Box\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={menu.title}\n        sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}\n      >\n        <DrawerHeader onClose={onClose} closeLabel={copy.close} dataTestId={`${testId}-header`}>\n          {menu.title}\n        </DrawerHeader>\n        <DrawerContent>\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n            {menu.groups.map((group) => (\n              <SheetGroup\n                key={group.id}\n                group={group}\n                linkComponent={linkComponent}\n                copy={copy}\n                testId={testId}\n                onDone={onClose}\n              />\n            ))}\n          </Box>\n        </DrawerContent>\n      </Box>\n    </Drawer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-43Q6CVPB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport { useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { barSlots, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';\nimport { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavMenu, SectionNavProps } from './SectionNav.types';\n\n/** Which of the bar's two menus is open, if any. */\ntype OpenMenu = 'primary' | 'more' | null;\n\n/** The bar's height above the safe area — tall enough for an icon over a label. */\nconst barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);\n\n/**\n * The bar's full height on screen, the safe area included — where its sheets\n * stop, and what a host reserves at the foot of its content so nothing it\n * floats (a toast, a receipt) lands under the bar.\n */\nexport function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {\n  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;\n}\n\n/**\n * One slot: icon over label, a count on the icon.\n *\n * `current` is the page the viewer is on and is what `aria-current` reports;\n * `lit` is only how the slot looks, and goes out while a sheet is open so the\n * bar shows where the thumb is. Opening a sheet is `aria-expanded`'s to say.\n *\n * A destination is a link; the \"more\" slot is a button that opens its sheet.\n * Either way the whole slot is the target, so a thumb landing on the label\n * lands on the control.\n */\nfunction Slot({\n  label,\n  icon,\n  count,\n  current,\n  lit,\n  copy,\n  testId,\n  control,\n  expanded,\n}: {\n  label: string;\n  icon: ReactNode;\n  count: number | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        flex: 1,\n        minWidth: 0,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 0.25,\n        position: 'relative',\n        color: lit ? 'primary.main' : 'text.secondary',\n        // The current slot is marked by more than its colour: a short rule on\n        // its top edge, so the state survives a colour-blind reading.\n        '&[data-lit=\"true\"]::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          insetInline: '22%',\n          height: rem(theme, 3),\n          borderBottomLeftRadius: rem(theme, 3),\n          borderBottomRightRadius: rem(theme, 3),\n          bgcolor: 'primary.main',\n        },\n        '& svg': { fontSize: rem(theme, 22) },\n      }}\n    >\n      <CountedIcon icon={icon} count={count} label={copy.badge} testId={`${testId}-badge`} />\n      <Typography\n        component=\"span\"\n        variant=\"caption\"\n        sx={{\n          maxWidth: '100%',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          lineHeight: 1.3,\n          fontWeight: lit ? 700 : 400,\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** One slot of the bar, whichever kind it is. */\nfunction BarSlotView({\n  slot,\n  primary,\n  more,\n  open,\n  toggle,\n  close,\n  linkComponent,\n  copy,\n  dataTestId,\n}: {\n  slot: BarSlot;\n  primary: SectionNavMenu | undefined;\n  more: SectionNavMenu | undefined;\n  open: OpenMenu;\n  toggle: (menu: Exclude<OpenMenu, null>) => void;\n  close: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  dataTestId: string;\n}): React.JSX.Element | null {\n  if (slot.kind === 'primary' && primary) {\n    return (\n      <RaisedActionButton\n        label={primary.label}\n        icon={primary.icon}\n        open={open === 'primary'}\n        closeLabel={copy.close}\n        dataTestId={`${dataTestId}-primary`}\n        onClick={() => toggle('primary')}\n      />\n    );\n  }\n  if (slot.kind === 'more' && more) {\n    return (\n      <Slot\n        label={more.label}\n        icon={more.icon}\n        count={menuCount(more)}\n        current={false}\n        lit={open === 'more' || (open === null && menuActive(more))}\n        expanded={open === 'more'}\n        copy={copy}\n        testId={`${dataTestId}-more`}\n        control={controlProps({ href: undefined, linkComponent, onClick: () => toggle('more') })}\n      />\n    );\n  }\n  if (slot.kind !== 'destination') return null;\n  const { destination } = slot;\n  return (\n    <Slot\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      current={destination.active === true}\n      lit={open === null && destination.active === true}\n      copy={copy}\n      testId={`${dataTestId}-dest-${destination.id}`}\n      control={controlProps({ href: destination.href, linkComponent, onClick: close })}\n    />\n  );\n}\n\n/** The phone layout: a bottom bar, with its menus as bottom sheets. */\nexport function SectionNavBar({\n  label,\n  destinations,\n  primary,\n  more,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const theme = useTheme();\n  const [open, setOpen] = useState<OpenMenu>(null);\n  const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));\n  const close = (): void => setOpen(null);\n\n  return (\n    <>\n      <Box\n        component=\"nav\"\n        aria-label={label}\n        data-testid={dataTestId}\n        sx={{\n          flex: 'none',\n          display: 'flex',\n          alignItems: 'stretch',\n          boxSizing: 'border-box',\n          height: sectionNavBarInset(theme),\n          paddingBottom: 'env(safe-area-inset-bottom)',\n          borderTop: `1px solid ${theme.palette.divider}`,\n          bgcolor: 'background.paper',\n          // Above the backdrop ONLY while one of its own sheets is open, so the\n          // primary button can close what it opened. Raised all the time it\n          // would sit over every dialog the page opens, and on a small phone a\n          // dialog's own footer is exactly where the bar is.\n          position: 'relative',\n          zIndex: open === null ? 'auto' : theme.zIndex.modal + 1,\n        }}\n      >\n        {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (\n          <BarSlotView\n            key={slot.kind === 'destination' ? `dest-${slot.destination.id}` : `menu-${slot.kind}`}\n            slot={slot}\n            primary={primary}\n            more={more}\n            open={open}\n            toggle={toggle}\n            close={close}\n            linkComponent={linkComponent}\n            copy={copy}\n            dataTestId={dataTestId}\n          />\n        ))}\n      </Box>\n      {primary ? (\n        <SectionNavSheet\n          menu={primary}\n          open={open === 'primary'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n      {more ? (\n        <SectionNavSheet\n          menu={more}\n          open={open === 'more'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-more-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-4ELI2MM3.js.map

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

package/dist/chunk-56TGECKZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/density-overrides.navigation.ts"],"sourcesContent":["import { tableCellClasses } from '@mui/material/TableCell/index.js';\nimport type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldRadius } from './field-radius';\nimport { rem, rems } from './relative';\n\n/**\n * TOGGLEBUTTON / TAB / TABLECELL / PAGINATIONITEM / SLIDER GEOMETRY,\n * DENSITY-AWARE (FUT-2768).\n *\n * The remainder of the fixed-px geometry the density audit catalogued, none\n * of it hard-coded in `@12-apps/ui`'s own source. Verified against the\n * installed `@mui/material@6.5.0` source; each goes through the SAME\n * per-size/per-slot `overridesResolver` key MUI itself resolves\n * (`iconButtonDensityOverrides`/`chipDensityOverrides`'s own mechanism), so a\n * theme value composes with MUI's baked-in `variants` instead of replacing\n * them outright:\n *\n * - `ToggleButton`: `padding: 11/7/15` at medium(root)/small/large — same\n *   `root`/`sizeSmall`/`sizeLarge` shape as `iconButtonDensityOverrides`. The\n *   `root` slot ALSO carries `theme.fieldRadius` (FUT-2967, `field-radius.ts`)\n *   — see the note at the end of this docblock.\n * - `Tab`: `minHeight: 48`, `padding: '12px 16px'` on the root (via `rems()`).\n *   The icon+label combo (`minHeight: 72`, `paddingTop`/`Bottom: 9`) is a\n *   SEPARATE MUI variant, exposed as the `labelIcon` key.\n * - `TableCell`: `padding: 16` on the root, `'6px 16px'` at small, nested\n *   inside it `'0 12px 0 16px'` on the small+checkbox combo — all gated on\n *   `ownerState.padding === 'normal'` (MUI's default): `checkbox`/`none` are\n *   separate variants with their OWN unscaled padding (`'0 0 0 4px'`/`0`) an\n *   unconditional rule clobbered at every size but small (FUT-2861 review —\n *   the SAME Lesson-1 clobber the ellipsis fix above avoids, missed here).\n *   `@12-apps/ui`'s own `Table` (FUT-2769) wins regardless (two classes deep\n *   under its styled root); this reaches a BARE `<TableCell>`.\n * - `PaginationItem`: `minWidth/height: 32/26/40` at medium(root)/small/large.\n *   The ellipsis shares the SAME slot and `minWidth` but has NO `height` of\n *   its own (`'auto'`), gated on `ownerState.type` being neither\n *   `'start-ellipsis'` nor `'end-ellipsis'` — skipping it would force a\n *   height onto the ellipsis (Lesson 1).\n * - `Slider`: rail `height: 4/2` at `orientation=\"horizontal\"`/`size=\"small\"`\n *   — gated on `ownerState.orientation` since the SAME key answers for either\n *   axis (MUI sets `height` horizontal / `width` vertical, leaving the other\n *   `'100%'`). Thumb `20×20`/`12×12` needs no gate. `@12-apps/ui`'s own\n *   `Slider` already sets rail/thumb size through `rem()` and never forwards\n *   `size` — a no-op THERE, reaches a BARE `<Slider>`. The thumb's ring and\n *   the value-label offset were checked and left OUT — that story's own doc.\n *\n * `Avatar` is NOT in this file: `@12-apps/ui`'s own `Avatar` wraps `MuiAvatar`\n * in a `StyledAvatar` that ALREADY sets `width`/`height` through\n * `rem(theme, boxPx(size))` (`40` at `md`) — higher specificity than any\n * `MuiAvatar.styleOverrides.root`, dead code here, so it ships none.\n *\n * PADDING is geometry-neutral at `normal` — the same 11/7/15 literals\n * `ToggleButton.js` hard-codes; each slot a MODULE-LEVEL function, as above.\n *\n * `MuiToggleButton.root` is the one exception, and it is NOT neutral even at\n * `normal` (FUT-2967): `fieldRadiusOverrides` (`field-radius.ts`) and this\n * callback both style `MuiToggleButton.root` — the radius override's own\n * `{ borderRadius }` and this one's `{ padding }` — and a `styleOverrides`\n * slot two sources touch is replaced WHOLESALE by whichever is spread last\n * (`mergeMuiComponents`), so a theme built with density silently dropped the\n * field radius off a bare `<ToggleButton>` the moment density's `root`\n * callback (this one) was the later source. Fixed AT THE SOURCE rather than\n * in the merge: this MODULE-LEVEL callback (still a single, stable reference,\n * so two builds still compare equal) reads `theme.fieldRadius` itself and\n * returns the corner alongside the padding, so there is no second `root`\n * value for a later merge to lose. The consequence is deliberate and worth\n * naming: a host that applies ONLY `toggleButtonDensityOverrides()` to a\n * plain MUI theme now gets the FIELD radius (8px, `DEFAULT_FIELD_RADIUS`) on\n * `<ToggleButton>`, not MUI's own `shape.borderRadius` (4px) — matching the\n * fields beside it, not a MUI default nothing else in this package still\n * draws with.\n */\n\nconst toggleButtonRootPadding = ({ theme }: { theme: Theme }): CSSObject => ({\n  padding: rem(theme, 11),\n  borderRadius: fieldRadius(theme),\n});\nconst toggleButtonSmallPadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 7) });\nconst toggleButtonLargePadding = ({ theme }: { theme: Theme }): CSSObject => ({ padding: rem(theme, 15) });\n\n/** `MuiToggleButton`'s own padding, at every size MUI has. */\nexport function toggleButtonDensityOverrides(): Components<Theme> {\n  return {\n    MuiToggleButton: {\n      styleOverrides: {\n        root: toggleButtonRootPadding,\n        sizeSmall: toggleButtonSmallPadding,\n        sizeLarge: toggleButtonLargePadding,\n      },\n    },\n  };\n}\n\nconst tabRootGeometry = ({ theme }: { theme: Theme }): CSSObject => ({\n  minHeight: rem(theme, 48),\n  padding: rems(theme, 12, 16),\n});\nconst tabLabelIconGeometry = ({ theme }: { theme: Theme }): CSSObject => ({\n  minHeight: rem(theme, 72),\n  paddingTop: rem(theme, 9),\n  paddingBottom: rem(theme, 9),\n});\n\n/** `MuiTab`'s own root height/padding, and the icon+label combo's taller box. */\nexport function tabDensityOverrides(): Components<Theme> {\n  return {\n    MuiTab: {\n      styleOverrides: {\n        root: tabRootGeometry,\n        labelIcon: tabLabelIconGeometry,\n      },\n    },\n  };\n}\n\ninterface TableCellOwnerStateForOverrides {\n  padding?: 'normal' | 'checkbox' | 'none';\n}\ntype TableCellStyleFn = (props: { theme: Theme; ownerState?: TableCellOwnerStateForOverrides }) => CSSObject;\nconst isDefaultTableCellPadding = (padding: TableCellOwnerStateForOverrides['padding']): boolean =>\n  padding === undefined || padding === 'normal';\n\nconst tableCellRootPadding: TableCellStyleFn = ({ theme, ownerState }) =>\n  isDefaultTableCellPadding(ownerState?.padding) ? { padding: rem(theme, 16) } : {};\n\nconst tableCellSmallPadding: TableCellStyleFn = ({ theme, ownerState }) => {\n  const style: CSSObject = {\n    [`&.${tableCellClasses.paddingCheckbox}`]: { padding: rems(theme, 0, 12, 0, 16) },\n  };\n  if (isDefaultTableCellPadding(ownerState?.padding)) style.padding = rems(theme, 6, 16);\n  return style;\n};\n\n/** Reaches a BARE `<TableCell>` only — module doc comment above. */\nexport function tableCellDensityOverrides(): Components<Theme> {\n  return {\n    MuiTableCell: {\n      styleOverrides: {\n        root: tableCellRootPadding,\n        sizeSmall: tableCellSmallPadding,\n      },\n    },\n  };\n}\n\n/** The `ownerState` field that tells the ellipsis item apart from a real button. */\ninterface PaginationItemOwnerStateForOverrides {\n  type?: 'page' | 'first' | 'last' | 'start-ellipsis' | 'end-ellipsis' | 'previous' | 'next';\n}\ntype PaginationItemStyleFn = (props: {\n  theme: Theme;\n  ownerState?: PaginationItemOwnerStateForOverrides;\n}) => CSSObject;\n\nconst isPaginationEllipsis = (type: PaginationItemOwnerStateForOverrides['type']): boolean =>\n  type === 'start-ellipsis' || type === 'end-ellipsis';\n\n/** `minWidth` always; `height` only off the ellipsis, which has none of its own. */\nfunction paginationItemGeometryAt(px: number): PaginationItemStyleFn {\n  return ({ theme, ownerState }) => {\n    const style: CSSObject = { minWidth: rem(theme, px) };\n    if (!isPaginationEllipsis(ownerState?.type)) style.height = rem(theme, px);\n    return style;\n  };\n}\nconst paginationItemRootGeometry = paginationItemGeometryAt(32);\nconst paginationItemSmallGeometry = paginationItemGeometryAt(26);\nconst paginationItemLargeGeometry = paginationItemGeometryAt(40);\n\n/**\n * `MuiPaginationItem`'s own `minWidth`/`height`, at every size MUI has —\n * `height` skipped on the ellipsis item, which has none of its own (`auto`).\n */\nexport function paginationItemDensityOverrides(): Components<Theme> {\n  return {\n    MuiPaginationItem: {\n      styleOverrides: {\n        root: paginationItemRootGeometry,\n        sizeSmall: paginationItemSmallGeometry,\n        sizeLarge: paginationItemLargeGeometry,\n      },\n    },\n  };\n}\n\n/** The `ownerState` field that tells which axis the rail's `height`/`4` reads as. */\ninterface SliderOwnerStateForOverrides {\n  orientation?: 'horizontal' | 'vertical';\n}\ntype SliderStyleFn = (props: { theme: Theme; ownerState?: SliderOwnerStateForOverrides }) => CSSObject;\n\n/** The rail's `4`/`2` reads as `height` for a horizontal slider, `width` for a vertical one. */\nfunction sliderRailAxisAt(px: number): SliderStyleFn {\n  return ({ theme, ownerState }) =>\n    ownerState?.orientation === 'vertical' ? { width: rem(theme, px) } : { height: rem(theme, px) };\n}\nconst sliderRootGeometry = sliderRailAxisAt(4);\nconst sliderSmallGeometry = sliderRailAxisAt(2);\nconst sliderThumbGeometry = ({ theme }: { theme: Theme }): CSSObject => ({\n  width: rem(theme, 20),\n  height: rem(theme, 20),\n});\nconst sliderThumbSmallGeometry = ({ theme }: { theme: Theme }): CSSObject => ({\n  width: rem(theme, 12),\n  height: rem(theme, 12),\n});\n\n/** `MuiSlider`'s own rail thickness (root/sizeSmall) and thumb box (thumb/thumbSizeSmall). */\nexport function sliderDensityOverrides(): Components<Theme> {\n  return {\n    MuiSlider: {\n      styleOverrides: {\n        root: sliderRootGeometry,\n        sizeSmall: sliderSmallGeometry,\n        thumb: sliderThumbGeometry,\n        thumbSizeSmall: sliderThumbSmallGeometry,\n      },\n    },\n  };\n}\n\n/**\n * `MuiTabs`' own indicator thickness (`height: 2` horizontal, `width: 2`\n * vertical) — one short of `Tab` in the ticket's own literal list, added\n * after a FUT-2767-review pass over state/orientation-gated literals; same\n * orientation gate as the Slider rail. `@12-apps/ui`'s own `Tabs` draws its\n * OWN 3px indicator through `rem()` already, blocking THIS override there —\n * `tabDensityOverrides` reaches `Tab.root`'s `minHeight` instead (both\n * measured in `density-wrapper-reach.test.stories.tsx`).\n */\ninterface TabsIndicatorOwnerStateForOverrides {\n  orientation?: 'horizontal' | 'vertical';\n}\ntype TabsIndicatorStyleFn = (props: {\n  theme: Theme;\n  ownerState?: TabsIndicatorOwnerStateForOverrides;\n}) => CSSObject;\n\nconst tabsIndicatorAxisAt: TabsIndicatorStyleFn = ({ theme, ownerState }) =>\n  ownerState?.orientation === 'vertical' ? { width: rem(theme, 2) } : { height: rem(theme, 2) };\n\n/** `MuiTabs`' own indicator thickness, by orientation. */\nexport function tabsIndicatorDensityOverrides(): Components<Theme> {\n  return {\n    MuiTabs: {\n      styleOverrides: {\n        indicator: tabsIndicatorAxisAt,\n      },\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-GLKQT2DS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { ElementType, ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\nimport { Badge } from '../../data-display/Badge';\n\nimport { shownCount } from './SectionNav.helpers';\n\n/**\n * An icon with its count on the shoulder.\n *\n * Quiet to assistive tech on change: the count moves on a poll, and a control\n * that announces itself every minute is noise. Its NAME carries the number,\n * so it is read when the control is.\n */\nexport function CountedIcon({\n  icon,\n  count,\n  label,\n  testId,\n}: {\n  icon: ReactNode;\n  count: number | undefined;\n  label: (count: number) => string;\n  testId: string;\n}): React.JSX.Element {\n  const shown = shownCount(count);\n  if (shown === undefined) return <>{icon}</>;\n  return (\n    // The library's corner count, in the warning role the sidebar's pill is\n    // drawn from.\n    <Badge\n      content={shown}\n      variant=\"count\"\n      color=\"warning\"\n      max={99}\n      aria-label={label(shown)}\n      aria-live=\"off\"\n      data-testid={testId}\n    >\n      {icon}\n    </Badge>\n  );\n}\n\n/** The keyboard ring every control in the nav draws, in the theme's own colour. */\nexport function focusRing(theme: Theme): SxProps<Theme> {\n  return {\n    '&:focus-visible': {\n      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n      outlineOffset: rem(theme, -2),\n    },\n  };\n}\n\n/**\n * The element an entry or destination renders as: the host's link for an\n * `href`, a button for an `onSelect`.\n *\n * Returned as props for a `Box`, so the control stays ONE interactive\n * element — never a button wrapped around a link.\n */\nexport function controlProps({\n  href,\n  onClick,\n  linkComponent,\n}: {\n  href: string | undefined;\n  onClick?: () => void;\n  linkComponent: ElementType | undefined;\n}): Record<string, unknown> {\n  if (href !== undefined) return { component: linkComponent ?? 'a', href, onClick };\n  return { component: 'button', type: 'button', onClick };\n}\n\n/** The base reset every clickable in the nav shares: no underline, no button chrome. */\nexport const CONTROL_RESET = {\n  border: 0,\n  background: 'none',\n  font: 'inherit',\n  color: 'inherit',\n  textDecoration: 'none',\n  cursor: 'pointer',\n  margin: 0,\n} as const;\n\nexport { Box };\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AA4BkB;AAZ3B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKsB;AACpB,QAAM,QAAQ,WAAW,KAAK;AAC9B,MAAI,UAAU,OAAW,QAAO,gCAAG,gBAAK;AACxC;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,KAAK;AAAA,QACL,cAAY,MAAM,KAAK;AAAA,QACvB,aAAU;AAAA,QACV,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA;AAEJ;AAGO,SAAS,UAAU,OAA8B;AACtD,SAAO;AAAA,IACL,mBAAmB;AAAA,MACjB,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAC7D,eAAe,IAAI,OAAO,EAAE;AAAA,IAC9B;AAAA,EACF;AACF;AASO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAI4B;AAC1B,MAAI,SAAS,OAAW,QAAO,EAAE,WAAW,iBAAiB,KAAK,MAAM,QAAQ;AAChF,SAAO,EAAE,WAAW,UAAU,MAAM,UAAU,QAAQ;AACxD;AAGO,IAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AACV;","names":[]}

package/dist/chunk-RX7J6VRI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { ElementType, ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';\nimport type { SectionNavMenu, SectionNavProps } from './SectionNav.types';\n\n/**\n * One rail row: icon, label, and the count at the far end.\n *\n * Destinations and menu entries draw the same row — in the rail there is room\n * for everything, so the difference between \"a place\" and \"an action\" is the\n * section it sits in, not its shape.\n */\nfunction RailRow({\n  label,\n  description,\n  icon,\n  count,\n  active,\n  copy,\n  testId,\n  control,\n}: {\n  label: string;\n  description?: string;\n  icon: ReactNode;\n  count: number | undefined;\n  active: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={active ? 'page' : undefined}\n      data-testid={testId}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1.5,\n        width: '100%',\n        minHeight: rem(theme, 40),\n        px: 1.25,\n        py: 0.75,\n        borderRadius: 1,\n        textAlign: 'start',\n        color: active ? 'primary.main' : 'text.primary',\n        bgcolor: active ? 'action.selected' : 'transparent',\n        '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },\n        '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },\n      }}\n    >\n      <CountedIcon icon={icon} count={count} label={copy.badge} testId={`${testId}-badge`} />\n      <Box component=\"span\" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>\n        <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: active ? 700 : 500 }}>\n          {label}\n        </Typography>\n        {description ? (\n          <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading between the rail's sections, in the sidebar's small-caps voice. */\nfunction RailHeading({ children }: { children: ReactNode }): React.JSX.Element {\n  return (\n    <Typography variant=\"overline\" color=\"text.secondary\" sx={{ px: 1.25, pt: 1.5, lineHeight: 1.6 }}>\n      {children}\n    </Typography>\n  );\n}\n\n/** A menu's groups, listed under its title — nothing folded away on a wide screen. */\nfunction RailMenu({\n  menu,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  menu: SectionNavMenu;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box component=\"section\" data-testid={testId} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      <RailHeading>{menu.title}</RailHeading>\n      {menu.groups.map((group) => (\n        <Box key={group.id} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {group.title ? (\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={{ px: 1.25, pt: 0.5 }}>\n              {group.title}\n            </Typography>\n          ) : null}\n          {group.entries.map((entry) => (\n            <RailRow\n              key={entry.id}\n              label={entry.label}\n              description={entry.description}\n              icon={entry.icon}\n              count={entry.badge}\n              active={entry.active === true}\n              copy={copy}\n              testId={`${testId}-entry-${entry.id}`}\n              control={controlProps({ href: entry.href, linkComponent, onClick: () => entry.onSelect?.() })}\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/**\n * The wide-screen layout: a vertical rail — the way back, the destinations,\n * then every menu's entries.\n *\n * It fills the column the host gives it and scrolls on its own, like the\n * sidebar it stands in for.\n */\nexport function SectionNavRail({\n  label,\n  destinations,\n  primary,\n  more,\n  back,\n  heading,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {\n    linkComponent: ElementType | undefined;\n  }): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={label}\n      data-testid={dataTestId}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 0.25,\n        height: '100%',\n        overflowY: 'auto',\n        px: 1,\n        py: 1.5,\n        bgcolor: 'background.paper',\n      }}\n    >\n      {back ? (\n        <Box\n          {...controlProps({ href: back.href, linkComponent })}\n          data-testid={`${dataTestId}-back`}\n          sx={{\n            ...CONTROL_RESET,\n            ...focusRing(theme),\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1,\n            px: 1.25,\n            py: 0.75,\n            mb: 0.5,\n            borderRadius: 1,\n            color: 'text.secondary',\n            '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },\n            '& svg': { fontSize: rem(theme, 20) },\n          }}\n        >\n          {back.icon}\n          <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: 600 }}>\n            {back.label}\n          </Typography>\n        </Box>\n      ) : null}\n      {heading ? <RailHeading>{heading}</RailHeading> : null}\n      {destinations.map((destination) => (\n        <RailRow\n          key={destination.id}\n          label={destination.label}\n          icon={destination.icon}\n          count={destination.badge}\n          active={destination.active === true}\n          copy={copy}\n          testId={`${dataTestId}-dest-${destination.id}`}\n          control={controlProps({ href: destination.href, linkComponent })}\n        />\n      ))}\n      {primary ? (\n        <RailMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />\n      ) : null}\n      {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-RZ4SBSLP.js

@@ -1,62 +0,0 @@
-import {
-  Box,
-  CONTROL_RESET,
-  focusRing
-} from "./chunk-GLKQT2DS.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/navigation/SectionNav/SectionNav.primary.tsx
-import { useTheme } from "@mui/material/styles/index.js";
-import { jsx } from "react/jsx-runtime";
-function RaisedActionButton({
-  label,
-  icon,
-  onClick,
-  open,
-  closeLabel,
-  dataTestId = "raised-action"
-}) {
-  const theme = useTheme();
-  const size = rem(theme, 52);
-  const expanded = open === true;
-  return /* @__PURE__ */ jsx(Box, { sx: { flex: "none", display: "flex", alignItems: "flex-start", justifyContent: "center", px: 0.5 }, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: "button",
-      type: "button",
-      onClick,
-      "aria-label": expanded && closeLabel ? closeLabel : label,
-      "aria-expanded": open,
-      "data-testid": dataTestId,
-      sx: {
-        ...CONTROL_RESET,
-        ...focusRing(theme),
-        width: size,
-        height: size,
-        // Lifted half out of the bar: the one control that is not a place.
-        marginTop: rem(theme, -18),
-        borderRadius: "50%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        bgcolor: "primary.main",
-        color: "primary.contrastText",
-        boxShadow: theme.shadows[6],
-        "& svg": {
-          fontSize: rem(theme, 26),
-          transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shorter }),
-          transform: expanded ? "rotate(45deg)" : "none"
-        },
-        "@media (prefers-reduced-motion: reduce)": { "& svg": { transition: "none" } }
-      },
-      children: icon
-    }
-  ) });
-}
-
-export {
-  RaisedActionButton
-};
-//# sourceMappingURL=chunk-RZ4SBSLP.js.map

package/dist/chunk-RZ4SBSLP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, focusRing } from './SectionNav.parts';\n\nexport interface RaisedActionButtonProps {\n  /** The button's accessible name — it has no visible label. */\n  label: string;\n  icon: ReactNode;\n  onClick: () => void;\n  /**\n   * Whether what the button opens is open. Omit for a button that opens\n   * nothing (a plain action): it then carries no `aria-expanded` and its icon\n   * never turns.\n   */\n  open?: boolean;\n  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */\n  closeLabel?: string;\n  dataTestId?: string;\n}\n\n/**\n * The raised round button in the middle of a bottom bar — the one control in\n * the row that is an ACTION rather than a place.\n *\n * Lifted half out of the bar so it reads as different in kind from the tabs\n * beside it, and unlabelled so it costs the row less width than a tab: that\n * width is what lets a bar keep four labelled tabs AND this button at 320px.\n *\n * `SectionNav` draws it for its `primary` menu. It is exported on its own for\n * a bar the host already draws — drop it between two tabs, in a flex row.\n */\nexport function RaisedActionButton({\n  label,\n  icon,\n  onClick,\n  open,\n  closeLabel,\n  dataTestId = 'raised-action',\n}: RaisedActionButtonProps): React.JSX.Element {\n  const theme = useTheme();\n  const size = rem(theme, 52);\n  const expanded = open === true;\n  return (\n    <Box sx={{ flex: 'none', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', px: 0.5 }}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onClick}\n        aria-label={expanded && closeLabel ? closeLabel : label}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={{\n          ...CONTROL_RESET,\n          ...focusRing(theme),\n          width: size,\n          height: size,\n          // Lifted half out of the bar: the one control that is not a place.\n          marginTop: rem(theme, -18),\n          borderRadius: '50%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          bgcolor: 'primary.main',\n          color: 'primary.contrastText',\n          boxShadow: theme.shadows[6],\n          '& svg': {\n            fontSize: rem(theme, 26),\n            transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n            transform: expanded ? 'rotate(45deg)' : 'none',\n          },\n          '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n        }}\n      >\n        {icon}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,gBAAgB;AA+CnB;AAbC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAA+C;AAC7C,QAAM,QAAQ,SAAS;AACvB,QAAM,OAAO,IAAI,OAAO,EAAE;AAC1B,QAAM,WAAW,SAAS;AAC1B,SACE,oBAAC,OAAI,IAAI,EAAE,MAAM,QAAQ,SAAS,QAAQ,YAAY,cAAc,gBAAgB,UAAU,IAAI,IAAI,GACpG;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,cAAY,YAAY,aAAa,aAAa;AAAA,MAClD,iBAAe;AAAA,MACf,eAAa;AAAA,MACb,IAAI;AAAA,QACF,GAAG;AAAA,QACH,GAAG,UAAU,KAAK;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,QAER,WAAW,IAAI,OAAO,GAAG;AAAA,QACzB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW,MAAM,QAAQ,CAAC;AAAA,QAC1B,SAAS;AAAA,UACP,UAAU,IAAI,OAAO,EAAE;AAAA,UACvB,YAAY,MAAM,YAAY,OAAO,aAAa,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,UAClG,WAAW,WAAW,kBAAkB;AAAA,QAC1C;AAAA,QACA,2CAA2C,EAAE,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,MAC/E;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/chunk-VHVI3D4R.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.helpers.ts"],"sourcesContent":["import type { SectionNavDestination, SectionNavMenu } from './SectionNav.types';\n\n/** A count worth drawing: positive and finite. Zero and \"unknown\" draw nothing. */\nexport function shownCount(count: number | undefined): number | undefined {\n  return count !== undefined && Number.isFinite(count) && count > 0 ? count : undefined;\n}\n\n/**\n * The \"more\" slot's badge: its entries' counts, rolled up.\n *\n * The same reason a folded sidebar parent shows its children's counts — the\n * sheet starts closed, so a count only visible once it is opened is one nobody\n * sees.\n */\nexport function menuCount(menu: SectionNavMenu | undefined): number | undefined {\n  if (!menu) return undefined;\n  const total = menu.groups\n    .flatMap((group) => group.entries)\n    .reduce((sum, entry) => sum + (shownCount(entry.badge) ?? 0), 0);\n  return shownCount(total);\n}\n\n/** Is the viewer on one of this menu's entries? Then its slot reads as current. */\nexport function menuActive(menu: SectionNavMenu | undefined): boolean {\n  return menu?.groups.some((group) => group.entries.some((entry) => entry.active === true)) ?? false;\n}\n\n/** What one bar slot holds, in left-to-right order. */\nexport type BarSlot =\n  | { kind: 'destination'; destination: SectionNavDestination }\n  | { kind: 'more' }\n  | { kind: 'primary' };\n\n/**\n * The bar's slots: the destinations, then `more`, with `primary` in the MIDDLE.\n *\n * The middle is where a thumb rests and where a raised button reads as the\n * one thing this bar is for. With four slots it lands between the second and\n * the third; with an odd count it takes the lower middle, so the heavier side\n * is the right one, under the thumb of a right-handed phone.\n */\nexport function barSlots(\n  destinations: readonly SectionNavDestination[],\n  hasMore: boolean,\n  hasPrimary: boolean,\n): BarSlot[] {\n  const slots: BarSlot[] = destinations.map((destination) => ({ kind: 'destination', destination }));\n  if (hasMore) slots.push({ kind: 'more' });\n  if (hasPrimary) slots.splice(Math.floor(slots.length / 2), 0, { kind: 'primary' });\n  return slots;\n}\n"],"mappings":";AAGO,SAAS,WAAW,OAA+C;AACxE,SAAO,UAAU,UAAa,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC9E;AASO,SAAS,UAAU,MAAsD;AAC9E,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,QAAQ,KAAK,OAChB,QAAQ,CAAC,UAAU,MAAM,OAAO,EAChC,OAAO,CAAC,KAAK,UAAU,OAAO,WAAW,MAAM,KAAK,KAAK,IAAI,CAAC;AACjE,SAAO,WAAW,KAAK;AACzB;AAGO,SAAS,WAAW,MAA2C;AACpE,SAAO,MAAM,OAAO,KAAK,CAAC,UAAU,MAAM,QAAQ,KAAK,CAAC,UAAU,MAAM,WAAW,IAAI,CAAC,KAAK;AAC/F;AAgBO,SAAS,SACd,cACA,SACA,YACW;AACX,QAAM,QAAmB,aAAa,IAAI,CAAC,iBAAiB,EAAE,MAAM,eAAe,YAAY,EAAE;AACjG,MAAI,QAAS,OAAM,KAAK,EAAE,MAAM,OAAO,CAAC;AACxC,MAAI,WAAY,OAAM,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC,GAAG,GAAG,EAAE,MAAM,UAAU,CAAC;AACjF,SAAO;AACT;","names":[]}