@12-apps/ui 6.50.0 → 6.51.0

package/dist/{chunk-GLKQT2DS.js → chunk-A436VORP.js}

@@ -1,6 +1,6 @@
 import {
   shownCount
-} from "./chunk-VHVI3D4R.js";
+} from "./chunk-P3GBXE73.js";
 import {
   Badge
 } from "./chunk-AMSNWV7V.js";
@@ -10,6 +10,7 @@ import {
 
 // src/components/navigation/SectionNav/SectionNav.parts.tsx
 import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 function CountedIcon({
   icon,
@@ -48,11 +49,35 @@ function focusRing(theme) {
 function controlProps({
   href,
   onClick,
-  linkComponent
+  linkComponent,
+  inert = false,
+  busy = false,
+  dimmed = false
 }) {
+  if (inert) return { component: "button", type: "button", disabled: true };
+  if (busy) return { component: "button", type: "button", "aria-disabled": "true" };
+  if (dimmed) return { component: "button", type: "button", "aria-disabled": "true", onClick };
   if (href !== void 0) return { component: linkComponent ?? "a", href, onClick };
   return { component: "button", type: "button", onClick };
 }
+function destinationControl(destination, linkComponent, onClick) {
+  return {
+    ...controlProps({
+      href: destination.href,
+      linkComponent,
+      inert: destination.disabled === true,
+      busy: destination.loading === true,
+      dimmed: destination.dimmed === true,
+      onClick
+    }),
+    "aria-pressed": destination.href === void 0 ? destination.active : void 0
+  };
+}
+var NOT_LIVE = '&:disabled, &[aria-disabled="true"]';
+function SlotIcon({ icon, loading }) {
+  if (!loading) return /* @__PURE__ */ jsx(Fragment, { children: icon });
+  return /* @__PURE__ */ jsx(CircularProgress, { size: "1em", color: "inherit", thickness: 5, "data-testid": "section-nav-spinner" });
+}
 var CONTROL_RESET = {
   border: 0,
   background: "none",
@@ -60,7 +85,8 @@ var CONTROL_RESET = {
   color: "inherit",
   textDecoration: "none",
   cursor: "pointer",
-  margin: 0
+  margin: 0,
+  [NOT_LIVE]: { cursor: "default" }
 };
 
 export {
@@ -68,6 +94,9 @@ export {
   CountedIcon,
   focusRing,
   controlProps,
+  destinationControl,
+  NOT_LIVE,
+  SlotIcon,
   CONTROL_RESET
 };
-//# sourceMappingURL=chunk-GLKQT2DS.js.map
+//# sourceMappingURL=chunk-A436VORP.js.map

package/dist/chunk-A436VORP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/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';\nimport type { SectionNavDestination } from './SectionNav.types';\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. Whatever it would lead to,\n * a control that is not live is a BUTTON: a link cannot be disabled, and one\n * that looks dimmed but still navigates is the lie this rules out.\n *\n * - `inert` — a native `disabled` button: no focus, no click.\n * - `busy` — a write is in flight: `aria-disabled`, still focusable, and the\n *   click is dropped, so the keyboard keeps its place until the write answers.\n * - `dimmed` — `aria-disabled`, still focusable, and the click STILL runs, so\n *   the host can explain why the act cannot be done now.\n */\nexport function controlProps({\n  href,\n  onClick,\n  linkComponent,\n  inert = false,\n  busy = false,\n  dimmed = false,\n}: {\n  href: string | undefined;\n  onClick?: () => void;\n  linkComponent: ElementType | undefined;\n  inert?: boolean;\n  busy?: boolean;\n  dimmed?: boolean;\n}): Record<string, unknown> {\n  if (inert) return { component: 'button', type: 'button', disabled: true };\n  if (busy) return { component: 'button', type: 'button', 'aria-disabled': 'true' };\n  if (dimmed) return { component: 'button', type: 'button', 'aria-disabled': 'true', onClick };\n  if (href !== undefined) return { component: linkComponent ?? 'a', href, onClick };\n  return { component: 'button', type: 'button', onClick };\n}\n\n/**\n * A destination's control: `controlProps` from its own state, plus\n * `aria-pressed` when it is an action slot that is a toggle. A link reports\n * where the viewer is through `aria-current` instead — the row draws that.\n */\nexport function destinationControl(\n  destination: SectionNavDestination,\n  linkComponent: ElementType | undefined,\n  onClick: () => void,\n): Record<string, unknown> {\n  return {\n    ...controlProps({\n      href: destination.href,\n      linkComponent,\n      inert: destination.disabled === true,\n      busy: destination.loading === true,\n      dimmed: destination.dimmed === true,\n      onClick,\n    }),\n    'aria-pressed': destination.href === undefined ? destination.active : undefined,\n  };\n}\n\n/**\n * The selector for a control drawn as not live: natively disabled, or\n * `aria-disabled` (in flight, or dimmed) and still focusable.\n */\nexport const NOT_LIVE = '&:disabled, &[aria-disabled=\"true\"]';\n\n/**\n * The icon, or the spinner that stands in for it while the slot's write is in\n * flight — the same box, so the label under it does not move.\n */\nexport function SlotIcon({ icon, loading }: { icon: ReactNode; loading: boolean }): React.JSX.Element {\n  if (!loading) return <>{icon}</>;\n  return <CircularProgress size=\"1em\" color=\"inherit\" thickness={5} data-testid=\"section-nav-spinner\" />;\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  [NOT_LIVE]: { cursor: 'default' },\n} as const;\n\nexport { Box };\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AA6BK;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;AAiBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,GAO4B;AAC1B,MAAI,MAAO,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,UAAU,KAAK;AACxE,MAAI,KAAM,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,OAAO;AAChF,MAAI,OAAQ,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,QAAQ,QAAQ;AAC3F,MAAI,SAAS,OAAW,QAAO,EAAE,WAAW,iBAAiB,KAAK,MAAM,QAAQ;AAChF,SAAO,EAAE,WAAW,UAAU,MAAM,UAAU,QAAQ;AACxD;AAOO,SAAS,mBACd,aACA,eACA,SACyB;AACzB,SAAO;AAAA,IACL,GAAG,aAAa;AAAA,MACd,MAAM,YAAY;AAAA,MAClB;AAAA,MACA,OAAO,YAAY,aAAa;AAAA,MAChC,MAAM,YAAY,YAAY;AAAA,MAC9B,QAAQ,YAAY,WAAW;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,IACD,gBAAgB,YAAY,SAAS,SAAY,YAAY,SAAS;AAAA,EACxE;AACF;AAMO,IAAM,WAAW;AAMjB,SAAS,SAAS,EAAE,MAAM,QAAQ,GAA6D;AACpG,MAAI,CAAC,QAAS,QAAO,gCAAG,gBAAK;AAC7B,SAAO,oBAAC,oBAAiB,MAAK,OAAM,OAAM,WAAU,WAAW,GAAG,eAAY,uBAAsB;AACtG;AAGO,IAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,CAAC,QAAQ,GAAG,EAAE,QAAQ,UAAU;AAClC;","names":[]}

package/dist/{chunk-LWBR5U6V.js → chunk-ABPTS3XK.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HGVWYKD4.js";
 import {
   DataViewsGrid
-} from "./chunk-VOP2BXKL.js";
+} from "./chunk-QWTPK3FT.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-LWBR5U6V.js.map
+//# sourceMappingURL=chunk-ABPTS3XK.js.map

package/dist/{chunk-43EQITNF.js → chunk-BHPLHGZP.js}

@@ -1,6 +1,6 @@
 import {
   STACK_BREAK
-} from "./chunk-FHWBOOS3.js";
+} from "./chunk-TH7RBREI.js";
 import {
   CARD_RADIUS,
   cardSurfaceStyles,
@@ -16,10 +16,10 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-DFCX3FNB.js";
+} from "./chunk-5ZBFADBL.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-ZC3NEUNQ.js";
+} from "./chunk-I2LF53MJ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -189,4 +189,4 @@ export {
   actionProps,
   rowStyles
 };
-//# sourceMappingURL=chunk-43EQITNF.js.map
+//# sourceMappingURL=chunk-BHPLHGZP.js.map

package/dist/{chunk-YMW2VYGU.js → chunk-DLO5V4AV.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-YLGY3D52.js";
 import {
   useDataViewsLayout
-} from "./chunk-ZC3NEUNQ.js";
+} from "./chunk-I2LF53MJ.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -246,4 +246,4 @@ export {
   SortTab,
   DisplayTab
 };
-//# sourceMappingURL=chunk-YMW2VYGU.js.map
+//# sourceMappingURL=chunk-DLO5V4AV.js.map

package/dist/{chunk-7FQF5BC2.js → chunk-ESW4Z5I7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PL2AB5HJ.js";
 import {
   useDataViewsLayout
-} from "./chunk-ZC3NEUNQ.js";
+} from "./chunk-I2LF53MJ.js";
 
 // src/components/data-display/DataViews/data-views-scope-tabs.tsx
 import { jsx } from "react/jsx-runtime";
@@ -34,4 +34,4 @@ function ScopeTabsSlot({
 export {
   ScopeTabsSlot
 };
-//# sourceMappingURL=chunk-7FQF5BC2.js.map
+//# sourceMappingURL=chunk-ESW4Z5I7.js.map

package/dist/{chunk-ZPD6MGAO.js → chunk-FDJLYYDA.js}

@@ -8,13 +8,13 @@ import {
   metaShape,
   rowStyles,
   useRowShell
-} from "./chunk-43EQITNF.js";
+} from "./chunk-BHPLHGZP.js";
 import {
   ListCardActions,
   ListCardCaption,
   ListCardMeta,
   ListCardTail
-} from "./chunk-FHWBOOS3.js";
+} from "./chunk-TH7RBREI.js";
 import {
   useDisclosure
 } from "./chunk-2JCRNWHE.js";
@@ -23,7 +23,7 @@ import {
 } from "./chunk-K4EKTMTC.js";
 import {
   cellRailsTemplate
-} from "./chunk-DFCX3FNB.js";
+} from "./chunk-5ZBFADBL.js";
 import {
   ListCardCells,
   cellTracks,
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-ZPD6MGAO.js.map
+//# sourceMappingURL=chunk-FDJLYYDA.js.map

package/dist/{chunk-LZL6HDTZ.js → chunk-FM5RBGG7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4GGH6ZQ7.js";
 import {
   Box
-} from "./chunk-F4FOBTLJ.js";
+} from "./chunk-4BI5PCOM.js";
 
 // src/components/layout/Stack/Stack.tsx
 import * as React from "react";
@@ -16,4 +16,4 @@ Stack.displayName = "Stack";
 export {
   Stack
 };
-//# sourceMappingURL=chunk-LZL6HDTZ.js.map
+//# sourceMappingURL=chunk-FM5RBGG7.js.map

package/dist/{chunk-V2SAZOT2.js → chunk-FYTC4LOD.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-RTSK5OZT.js";
 import {
   useUiTheme
-} from "./chunk-VOF6QVCF.js";
+} from "./chunk-HF7V3RI5.js";
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
@@ -48,4 +48,4 @@ Icon.displayName = "Icon";
 export {
   Icon
 };
-//# sourceMappingURL=chunk-V2SAZOT2.js.map
+//# sourceMappingURL=chunk-FYTC4LOD.js.map

package/dist/{chunk-4ELI2MM3.js → chunk-GAXHYRX6.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-YKCAJ2TN.js";
 
 // src/tokens/density-overrides.selection.ts
-import { switchClasses } from "@mui/material/Switch/index.js";
+import generateUtilityClass from "@mui/material/generateUtilityClass/index.js";
 var checkboxRadioRootPadding = ({ theme }) => ({ padding: rem(theme, 9) });
 function checkboxRadioDensityOverrides() {
   return {
@@ -12,6 +12,9 @@ function checkboxRadioDensityOverrides() {
     MuiRadio: { styleOverrides: { root: checkboxRadioRootPadding } }
   };
 }
+var SWITCH_SWITCH_BASE = generateUtilityClass("MuiSwitch", "switchBase");
+var SWITCH_THUMB = generateUtilityClass("MuiSwitch", "thumb");
+var SWITCH_CHECKED = generateUtilityClass("MuiSwitch", "checked");
 var switchRootGeometry = ({ theme }) => ({
   width: rems(theme, 34 + 12 * 2),
   height: rems(theme, 14 + 12 * 2),
@@ -29,7 +32,7 @@ var switchSwitchBasePadding = ({ theme }) => ({
   // 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)})` }
 });
 var switchThumbSize = ({ theme }) => ({
   width: rem(theme, 20),
@@ -43,7 +46,7 @@ var switchSizeSmall = ({ theme }) => ({
   // 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`:
@@ -53,9 +56,9 @@ var switchSizeSmall = ({ theme }) => ({
     // 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) }
 });
 function switchDensityOverrides() {
   return {
@@ -74,4 +77,4 @@ export {
   checkboxRadioDensityOverrides,
   switchDensityOverrides
 };
-//# sourceMappingURL=chunk-4ELI2MM3.js.map
+//# sourceMappingURL=chunk-GAXHYRX6.js.map

package/dist/chunk-GAXHYRX6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/density-overrides.selection.ts"],"sourcesContent":["import generateUtilityClass from '@mui/material/generateUtilityClass/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 `& .${SWITCH_SWITCH_\n *   BASE}` / `& .${SWITCH_THUMB}` rules, built with `generateUtilityClass`\n *   (not a hand-typed selector string) for the same `ClassNameGenerator\n *   .configure` reason `density-overrides.ts`'s `CHIP_LABEL` is — and, unlike\n *   reading `switchClasses` off `@mui/material/Switch` itself, without\n *   putting `MuiSwitch` on the critical path of every host that imports\n *   `densityThemeOptions` (FUT-2993) — inserted as part of the SAME\n *   `sizeSmall` override object so they land AFTER `SwitchRoot`'s own baked-in\n *   small variant in the generated class's CSS text (later wins at matching\n *   two-class specificity) rather than trying to out-specificity it from a\n *   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 * `&.${SWITCH_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\n/**\n * Built with `generateUtilityClass`, not imported from `@mui/material/Switch`'s\n * own `switchClasses` — the same generated strings (`Switch.js` builds\n * `switchClasses` from this exact helper), but without pulling `MuiSwitch`\n * onto the critical path of every host that imports `densityThemeOptions`\n * (see the module doc comment, and FUT-2993). `SWITCH_CHECKED` is a GLOBAL\n * state slot (`generateUtilityClass`'s `globalStateClasses` table), so it\n * resolves to `Mui-checked`, not `MuiSwitch-checked` — the same string\n * `switchClasses.checked` gives.\n */\nconst SWITCH_SWITCH_BASE = generateUtilityClass('MuiSwitch', 'switchBase');\nconst SWITCH_THUMB = generateUtilityClass('MuiSwitch', 'thumb');\nconst SWITCH_CHECKED = generateUtilityClass('MuiSwitch', 'checked');\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  [`&.${SWITCH_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  [`& .${SWITCH_SWITCH_BASE}`]: {\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    [`&.${SWITCH_CHECKED}`]: { transform: `translateX(${rem(theme, 16)})` },\n  },\n  [`& .${SWITCH_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,OAAO,0BAA0B;AAsIjC,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;AAYA,IAAM,qBAAqB,qBAAqB,aAAa,YAAY;AACzE,IAAM,eAAe,qBAAqB,aAAa,OAAO;AAC9D,IAAM,iBAAiB,qBAAqB,aAAa,SAAS;AAElE,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,EAAE,GAAG,EAAE,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC,IAAI;AACxE;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,kBAAkB,EAAE,GAAG;AAAA,IAC5B,SAAS,IAAI,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASrB,CAAC,KAAK,cAAc,EAAE,GAAG,EAAE,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC,IAAI;AAAA,EACxE;AAAA,EACA,CAAC,MAAM,YAAY,EAAE,GAAG,EAAE,OAAO,IAAI,OAAO,EAAE,GAAG,QAAQ,IAAI,OAAO,EAAE,EAAE;AAC1E;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-CT45KNCT.js → chunk-GPTICJVN.js}

@@ -7,7 +7,7 @@ import {
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-HVZ4HF4M.js";
+} from "./chunk-5N2UJOCT.js";
 import {
   SETTING_CARD_OPEN_ATTR,
   actionsStyles,
@@ -17,7 +17,7 @@ import {
 } from "./chunk-3DO5AJCG.js";
 import {
   Icon
-} from "./chunk-V2SAZOT2.js";
+} from "./chunk-FYTC4LOD.js";
 import {
   Button
 } from "./chunk-RIZRF5XR.js";
@@ -165,4 +165,4 @@ SettingCard.displayName = "SettingCard";
 export {
   SettingCard
 };
-//# sourceMappingURL=chunk-CT45KNCT.js.map
+//# sourceMappingURL=chunk-GPTICJVN.js.map

package/dist/{chunk-URGH4673.js → chunk-H556NMKE.js}

@@ -4,11 +4,11 @@ import {
 import {
   chipDensityOverrides,
   iconButtonDensityOverrides
-} from "./chunk-XK77FY42.js";
+} from "./chunk-25MSGLNU.js";
 import {
   checkboxRadioDensityOverrides,
   switchDensityOverrides
-} from "./chunk-4ELI2MM3.js";
+} from "./chunk-GAXHYRX6.js";
 import {
   paginationItemDensityOverrides,
   sliderDensityOverrides,
@@ -16,7 +16,7 @@ import {
   tableCellDensityOverrides,
   tabsIndicatorDensityOverrides,
   toggleButtonDensityOverrides
-} from "./chunk-56TGECKZ.js";
+} from "./chunk-NP6SHLQ3.js";
 import {
   headingMetrics
 } from "./chunk-PT6TCWIW.js";
@@ -190,4 +190,4 @@ export {
   uiThemeFromMui,
   muiThemeOptionsFrom
 };
-//# sourceMappingURL=chunk-URGH4673.js.map
+//# sourceMappingURL=chunk-H556NMKE.js.map

package/dist/{chunk-VOF6QVCF.js → chunk-HF7V3RI5.js}

@@ -1,6 +1,6 @@
 import {
   uiThemeFromMui
-} from "./chunk-URGH4673.js";
+} from "./chunk-H556NMKE.js";
 
 // src/provider/use-ui-theme.ts
 import { useTheme } from "@mui/material/styles/index.js";
@@ -13,4 +13,4 @@ function useUiTheme() {
 export {
   useUiTheme
 };
-//# sourceMappingURL=chunk-VOF6QVCF.js.map
+//# sourceMappingURL=chunk-HF7V3RI5.js.map

package/dist/{chunk-NKJMOWY3.js → chunk-HJUR6ZY6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-XZTRZ3HO.js";
 import {
   muiThemeOptionsFrom
-} from "./chunk-URGH4673.js";
+} from "./chunk-H556NMKE.js";
 import {
   createUiTheme
 } from "./chunk-6WZUZHJM.js";
@@ -22,4 +22,4 @@ UiProvider.displayName = "UiProvider";
 export {
   UiProvider
 };
-//# sourceMappingURL=chunk-NKJMOWY3.js.map
+//# sourceMappingURL=chunk-HJUR6ZY6.js.map

package/dist/{chunk-RX7J6VRI.js → chunk-HKEBTPKY.js}

@@ -2,9 +2,16 @@ import {
   Box,
   CONTROL_RESET,
   CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
   controlProps,
+  destinationControl,
   focusRing
-} from "./chunk-GLKQT2DS.js";
+} from "./chunk-A436VORP.js";
+import {
+  destinationState,
+  isMenu
+} from "./chunk-P3GBXE73.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -19,16 +26,19 @@ function RailRow({
   icon,
   count,
   active,
+  current = active,
   copy,
   testId,
-  control
+  control,
+  loading = false
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
     Box,
     {
       ...control,
-      "aria-current": active ? "page" : void 0,
+      "aria-current": current ? "page" : void 0,
+      "aria-busy": loading || void 0,
       "data-testid": testId,
       sx: {
         ...CONTROL_RESET,
@@ -45,10 +55,19 @@ function RailRow({
         color: active ? "primary.main" : "text.primary",
         bgcolor: active ? "action.selected" : "transparent",
         "&:hover": { bgcolor: active ? "action.selected" : "action.hover" },
-        "& svg": { color: "primary.main", fontSize: rem(theme, 20) }
+        "& svg": { color: "primary.main", fontSize: rem(theme, 20) },
+        [NOT_LIVE]: { color: "text.disabled", "& svg": { color: "text.disabled" } }
       },
       children: [
-        /* @__PURE__ */ jsx(CountedIcon, { icon, count, label: copy.badge, testId: `${testId}-badge` }),
+        /* @__PURE__ */ jsx(
+          CountedIcon,
+          {
+            icon: /* @__PURE__ */ jsx(SlotIcon, { icon, loading }),
+            count,
+            label: copy.badge,
+            testId: `${testId}-badge`
+          }
+        ),
         /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
           /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: active ? 700 : 500 }, children: label }),
           description ? /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: description }) : null
@@ -79,14 +98,99 @@ function RailMenu({
           count: entry.badge,
           active: entry.active === true,
           copy,
-          testId: `${testId}-entry-${entry.id}`,
-          control: controlProps({ href: entry.href, linkComponent, onClick: () => entry.onSelect?.() })
+          testId: entry.dataTestId ?? `${testId}-entry-${entry.id}`,
+          control: controlProps({
+            href: entry.href,
+            linkComponent,
+            inert: menu.disabled === true || entry.disabled === true,
+            onClick: () => entry.onSelect?.()
+          })
         },
         entry.id
       ))
     ] }, group.id))
   ] });
 }
+function RailBack({
+  back,
+  linkComponent,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...controlProps({ href: back.href, linkComponent }),
+      "data-testid": testId,
+      sx: {
+        ...CONTROL_RESET,
+        ...focusRing(theme),
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.25,
+        py: 0.75,
+        mb: 0.5,
+        borderRadius: 1,
+        color: "text.secondary",
+        "&:hover": { bgcolor: "action.hover", color: "text.primary" },
+        "& svg": { fontSize: rem(theme, 20) }
+      },
+      children: [
+        back.icon,
+        /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: 600 }, children: back.label })
+      ]
+    }
+  );
+}
+function RailAction({
+  action,
+  linkComponent,
+  copy,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    RailRow,
+    {
+      label: action.label,
+      icon: action.icon,
+      count: void 0,
+      active: false,
+      copy,
+      testId: action.dataTestId ?? testId,
+      loading: action.loading === true,
+      control: controlProps({
+        href: void 0,
+        linkComponent,
+        inert: action.disabled === true,
+        busy: action.loading === true,
+        onClick: action.onSelect
+      })
+    }
+  );
+}
+function RailDestination({
+  destination,
+  linkComponent,
+  copy,
+  testId
+}) {
+  const { current, lit } = destinationState(destination);
+  return /* @__PURE__ */ jsx(
+    RailRow,
+    {
+      label: destination.label,
+      icon: destination.icon,
+      count: destination.badge,
+      active: lit,
+      current,
+      copy,
+      testId,
+      loading: destination.loading === true,
+      control: destinationControl(destination, linkComponent, () => destination.onSelect?.())
+    }
+  );
+}
 function SectionNavRail({
   label,
   destinations,
@@ -98,7 +202,6 @@ function SectionNavRail({
   copy,
   dataTestId
 }) {
-  const theme = useTheme();
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -116,46 +219,20 @@ function SectionNavRail({
         bgcolor: "background.paper"
       },
       children: [
-        back ? /* @__PURE__ */ jsxs(
-          Box,
-          {
-            ...controlProps({ href: back.href, linkComponent }),
-            "data-testid": `${dataTestId}-back`,
-            sx: {
-              ...CONTROL_RESET,
-              ...focusRing(theme),
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              px: 1.25,
-              py: 0.75,
-              mb: 0.5,
-              borderRadius: 1,
-              color: "text.secondary",
-              "&:hover": { bgcolor: "action.hover", color: "text.primary" },
-              "& svg": { fontSize: rem(theme, 20) }
-            },
-            children: [
-              back.icon,
-              /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: 600 }, children: back.label })
-            ]
-          }
-        ) : null,
+        back ? /* @__PURE__ */ jsx(RailBack, { back, linkComponent, testId: `${dataTestId}-back` }) : null,
         heading ? /* @__PURE__ */ jsx(RailHeading, { children: heading }) : null,
         destinations.map((destination) => /* @__PURE__ */ jsx(
-          RailRow,
+          RailDestination,
           {
-            label: destination.label,
-            icon: destination.icon,
-            count: destination.badge,
-            active: destination.active === true,
+            destination,
+            linkComponent,
             copy,
-            testId: `${dataTestId}-dest-${destination.id}`,
-            control: controlProps({ href: destination.href, linkComponent })
+            testId: destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`
           },
           destination.id
         )),
-        primary ? /* @__PURE__ */ jsx(RailMenu, { menu: primary, linkComponent, copy, testId: `${dataTestId}-primary` }) : null,
+        primary && !isMenu(primary) ? /* @__PURE__ */ jsx(RailAction, { action: primary, linkComponent, copy, testId: `${dataTestId}-primary` }) : null,
+        isMenu(primary) ? /* @__PURE__ */ jsx(RailMenu, { menu: primary, linkComponent, copy, testId: `${dataTestId}-primary` }) : null,
         more ? /* @__PURE__ */ jsx(RailMenu, { menu: more, linkComponent, copy, testId: `${dataTestId}-more` }) : null
       ]
     }
@@ -165,4 +242,4 @@ function SectionNavRail({
 export {
   SectionNavRail
 };
-//# sourceMappingURL=chunk-RX7J6VRI.js.map
+//# sourceMappingURL=chunk-HKEBTPKY.js.map