@12-apps/ui 6.50.1 → 6.51.1

package/components-catalog.md

@@ -723,9 +723,9 @@ Components for site and app navigation.
 ### SectionNav
 **Purpose**: A section's own navigation — the few screens one kind of work moves between
 **Use Cases**: A phone bottom bar for a work area (a shift, a till, a field app); the same destinations as a rail on a wide screen
-**Features**: `bar` (destinations with counts, a `more` sheet, a raised `primary` action in the middle opening its own sheet) and `rail` (a way back, destinations, every menu listed); router-agnostic links via `linkComponent`; copy as a required prop
+**Features**: `bar` (destinations with counts, a `more` sheet, a raised `primary` action in the middle opening its own sheet) and `rail` (a way back, destinations, every menu listed); router-agnostic links via `linkComponent`; copy as a required prop; also a bar of VERBS pinned at a screen's foot — action slots (`onSelect`, `disabled`, `dimmed` — looks disabled but still answers a tap, `loading` — focusable and busy, `active` as a pressed toggle), a raised `primary` that acts on tap with its label under it, disabled menu entries, host-owned `dataTestId`s
 **Also exports**: `RaisedActionButton` — the raised round action alone, for a bar the host already draws
-**Types**: `SectionNavProps`, `SectionNavDestination`, `SectionNavMenu`, `SectionNavGroup`, `SectionNavEntry`, `SectionNavCopy`
+**Types**: `SectionNavProps`, `SectionNavDestination`, `SectionNavAction`, `SectionNavMenu`, `SectionNavGroup`, `SectionNavEntry`, `SectionNavCopy`
 **Location**: `src/components/navigation/SectionNav`
 **Docs**: `src/components/navigation/SectionNav/SectionNav.md`
 

package/dist/_internal/components/index.js

@@ -97,17 +97,17 @@ import "../../chunk-3AIRFAI3.js";
 import "../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../chunk-SA2ERYVV.js";
+} from "../../chunk-5GQYTB3K.js";
 import {
   sectionNavBarInset
-} from "../../chunk-43Q6CVPB.js";
-import "../../chunk-32JMSHEA.js";
-import "../../chunk-RX7J6VRI.js";
+} from "../../chunk-WNZBUR76.js";
+import "../../chunk-S4ZUZ6DS.js";
+import "../../chunk-HKEBTPKY.js";
 import {
   RaisedActionButton
-} from "../../chunk-RZ4SBSLP.js";
-import "../../chunk-GLKQT2DS.js";
-import "../../chunk-VHVI3D4R.js";
+} from "../../chunk-WNKRFMSI.js";
+import "../../chunk-A436VORP.js";
+import "../../chunk-P3GBXE73.js";
 import "../../chunk-R445KMGG.js";
 import {
   Tabs

package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js

@@ -1,11 +1,11 @@
 import {
   SectionNavBar,
   sectionNavBarInset
-} from "../../../../chunk-43Q6CVPB.js";
-import "../../../../chunk-32JMSHEA.js";
-import "../../../../chunk-RZ4SBSLP.js";
-import "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-WNZBUR76.js";
+import "../../../../chunk-S4ZUZ6DS.js";
+import "../../../../chunk-WNKRFMSI.js";
+import "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-KIHGTL2D.js";
 import "../../../../chunk-5AK2EZG5.js";
@@ -39,6 +39,7 @@ import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";
+import "../../../../chunk-MFU4Y25U.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   SectionNavBar,

package/dist/_internal/components/navigation/SectionNav/SectionNav.helpers.js

@@ -1,12 +1,16 @@
 import {
   barSlots,
+  destinationState,
+  isMenu,
   menuActive,
   menuCount,
   shownCount
-} from "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   barSlots,
+  destinationState,
+  isMenu,
   menuActive,
   menuCount,
   shownCount

package/dist/_internal/components/navigation/SectionNav/SectionNav.js

@@ -1,12 +1,12 @@
 import {
   SectionNav
-} from "../../../../chunk-SA2ERYVV.js";
-import "../../../../chunk-43Q6CVPB.js";
-import "../../../../chunk-32JMSHEA.js";
-import "../../../../chunk-RX7J6VRI.js";
-import "../../../../chunk-RZ4SBSLP.js";
-import "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-5GQYTB3K.js";
+import "../../../../chunk-WNZBUR76.js";
+import "../../../../chunk-S4ZUZ6DS.js";
+import "../../../../chunk-HKEBTPKY.js";
+import "../../../../chunk-WNKRFMSI.js";
+import "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-KIHGTL2D.js";
 import "../../../../chunk-5AK2EZG5.js";
@@ -40,6 +40,7 @@ import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";
+import "../../../../chunk-MFU4Y25U.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   SectionNav

package/dist/_internal/components/navigation/SectionNav/SectionNav.parts.js

@@ -2,10 +2,13 @@ import {
   Box,
   CONTROL_RESET,
   CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
   controlProps,
+  destinationControl,
   focusRing
-} from "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-AMSNWV7V.js";
 import "../../../../chunk-6C5D6O3D.js";
@@ -42,7 +45,10 @@ export {
   Box,
   CONTROL_RESET,
   CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
   controlProps,
+  destinationControl,
   focusRing
 };
 //# sourceMappingURL=SectionNav.parts.js.map

package/dist/_internal/components/navigation/SectionNav/SectionNav.primary.js

@@ -1,8 +1,8 @@
 import {
   RaisedActionButton
-} from "../../../../chunk-RZ4SBSLP.js";
-import "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-WNKRFMSI.js";
+import "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-AMSNWV7V.js";
 import "../../../../chunk-6C5D6O3D.js";

package/dist/_internal/components/navigation/SectionNav/SectionNav.rail.js

@@ -1,8 +1,8 @@
 import {
   SectionNavRail
-} from "../../../../chunk-RX7J6VRI.js";
-import "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-HKEBTPKY.js";
+import "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-AMSNWV7V.js";
 import "../../../../chunk-6C5D6O3D.js";

package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js

@@ -1,8 +1,8 @@
 import {
   SectionNavSheet
-} from "../../../../chunk-32JMSHEA.js";
-import "../../../../chunk-GLKQT2DS.js";
-import "../../../../chunk-VHVI3D4R.js";
+} from "../../../../chunk-S4ZUZ6DS.js";
+import "../../../../chunk-A436VORP.js";
+import "../../../../chunk-P3GBXE73.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-KIHGTL2D.js";
 import "../../../../chunk-5AK2EZG5.js";

package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js

@@ -119,9 +119,21 @@ function PhoneFrame({ children }) {
 function RailFrame({ children }) {
   return /* @__PURE__ */ jsx(Box, { sx: { width: sxRem(240), height: sxRem(560), border: 1, borderColor: "divider" }, children });
 }
+var ACTIONS = [
+  { id: "split", label: "Split", icon: /* @__PURE__ */ jsx(ReceiptLongOutlinedIcon, {}), onSelect: () => void 0, dimmed: true },
+  { id: "equal", label: "Equally", icon: /* @__PURE__ */ jsx(GroupsOutlinedIcon, {}), onSelect: () => void 0, active: true },
+  { id: "person", label: "Person", icon: /* @__PURE__ */ jsx(AddIcon, {}), onSelect: () => void 0 }
+];
+var PAY_ALL = {
+  label: "Pay all",
+  icon: /* @__PURE__ */ jsx(StorefrontOutlinedIcon, {}),
+  onSelect: () => void 0
+};
 export {
+  ACTIONS,
   DESTINATIONS,
   MORE,
+  PAY_ALL,
   PRIMARY,
   PhoneFrame,
   RailFrame

package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/SectionNav/__stories__/fixtures.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport AppsIcon from '@mui/icons-material/Apps';\nimport CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined';\nimport DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';\nimport DeliveryDiningOutlinedIcon from '@mui/icons-material/DeliveryDiningOutlined';\nimport GridViewOutlinedIcon from '@mui/icons-material/GridViewOutlined';\nimport GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';\nimport PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';\nimport ReceiptLongOutlinedIcon from '@mui/icons-material/ReceiptLongOutlined';\nimport RoomServiceOutlinedIcon from '@mui/icons-material/RoomServiceOutlined';\nimport ShoppingBagOutlinedIcon from '@mui/icons-material/ShoppingBagOutlined';\nimport StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';\nimport TableRestaurantOutlinedIcon from '@mui/icons-material/TableRestaurantOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { sxRem } from '../../../../tokens/scales';\n\nimport type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';\n\n/**\n * The stories' example section, shared by the showcase and the interaction\n * tests. Kept out of the `*.stories.tsx` files because Storybook reads every\n * named export there as a story.\n */\n\n/** A restaurant's shift, as the example section: the floor, the board, the waiter's round. */\nexport const DESTINATIONS: SectionNavDestination[] = [\n  { id: 'floor', label: 'Floor', icon: <GridViewOutlinedIcon />, href: '#floor' },\n  { id: 'board', label: 'Board', icon: <DashboardOutlinedIcon />, href: '#board', badge: 3, active: true },\n  { id: 'serve', label: 'Serve', icon: <TableRestaurantOutlinedIcon />, href: '#serve', badge: 2 },\n];\n\nexport const PRIMARY: SectionNavMenu = {\n  label: 'Create',\n  icon: <AddIcon />,\n  title: 'Create now',\n  groups: [\n    {\n      id: 'order',\n      title: 'New order',\n      layout: 'grid',\n      entries: [\n        { id: 'delivery', label: 'Delivery', icon: <DeliveryDiningOutlinedIcon />, onSelect: () => undefined },\n        { id: 'pickup', label: 'Pickup', icon: <ShoppingBagOutlinedIcon />, onSelect: () => undefined },\n        { id: 'counter', label: 'Counter', icon: <StorefrontOutlinedIcon />, onSelect: () => undefined },\n      ],\n    },\n    {\n      id: 'menu',\n      title: 'Menu',\n      entries: [\n        {\n          id: 'pause',\n          label: 'Pause an item',\n          description: 'Take it off sale until it is back',\n          icon: <PauseCircleOutlineIcon />,\n          onSelect: () => undefined,\n        },\n      ],\n    },\n  ],\n};\n\nexport const MORE: SectionNavMenu = {\n  label: 'More',\n  icon: <AppsIcon />,\n  title: 'More',\n  groups: [\n    {\n      id: 'rest',\n      layout: 'grid',\n      entries: [\n        { id: 'queue', label: 'Queue', icon: <GroupsOutlinedIcon />, href: '#queue', badge: 1 },\n        { id: 'pass', label: 'Pass', icon: <RoomServiceOutlinedIcon />, href: '#pass' },\n        { id: 'runs', label: 'Deliveries', icon: <DeliveryDiningOutlinedIcon />, href: '#runs' },\n        { id: 'booked', label: 'Bookings', icon: <CalendarMonthOutlinedIcon />, href: '#booked' },\n        { id: 'orders', label: 'Orders', icon: <ReceiptLongOutlinedIcon />, href: '#orders' },\n      ],\n    },\n  ],\n};\n\n/** A phone-sized frame with the bar at its foot, the way a host docks it. */\nexport function PhoneFrame({ children }: { children: React.ReactNode }): React.ReactElement {\n  return (\n    <Box\n      sx={{\n        width: sxRem(360),\n        maxWidth: '100%',\n        height: sxRem(640),\n        display: 'flex',\n        flexDirection: 'column',\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: 3,\n        overflow: 'hidden',\n        bgcolor: 'background.default',\n      }}\n    >\n      <Box sx={{ flex: 1, p: 2 }} />\n      {children}\n    </Box>\n  );\n}\n\n\n/** A desktop-column-sized frame for the rail. */\nexport function RailFrame({ children }: { children: React.ReactNode }): React.ReactElement {\n  return <Box sx={{ width: sxRem(240), height: sxRem(560), border: 1, borderColor: 'divider' }}>{children}</Box>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../../src/components/navigation/SectionNav/__stories__/fixtures.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport AppsIcon from '@mui/icons-material/Apps';\nimport CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined';\nimport DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';\nimport DeliveryDiningOutlinedIcon from '@mui/icons-material/DeliveryDiningOutlined';\nimport GridViewOutlinedIcon from '@mui/icons-material/GridViewOutlined';\nimport GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';\nimport PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';\nimport ReceiptLongOutlinedIcon from '@mui/icons-material/ReceiptLongOutlined';\nimport RoomServiceOutlinedIcon from '@mui/icons-material/RoomServiceOutlined';\nimport ShoppingBagOutlinedIcon from '@mui/icons-material/ShoppingBagOutlined';\nimport StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';\nimport TableRestaurantOutlinedIcon from '@mui/icons-material/TableRestaurantOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { sxRem } from '../../../../tokens/scales';\n\nimport type { SectionNavAction, SectionNavDestination, SectionNavMenu } from '../SectionNav.types';\n\n/**\n * The stories' example section, shared by the showcase and the interaction\n * tests. Kept out of the `*.stories.tsx` files because Storybook reads every\n * named export there as a story.\n */\n\n/** A restaurant's shift, as the example section: the floor, the board, the waiter's round. */\nexport const DESTINATIONS: SectionNavDestination[] = [\n  { id: 'floor', label: 'Floor', icon: <GridViewOutlinedIcon />, href: '#floor' },\n  { id: 'board', label: 'Board', icon: <DashboardOutlinedIcon />, href: '#board', badge: 3, active: true },\n  { id: 'serve', label: 'Serve', icon: <TableRestaurantOutlinedIcon />, href: '#serve', badge: 2 },\n];\n\nexport const PRIMARY: SectionNavMenu = {\n  label: 'Create',\n  icon: <AddIcon />,\n  title: 'Create now',\n  groups: [\n    {\n      id: 'order',\n      title: 'New order',\n      layout: 'grid',\n      entries: [\n        { id: 'delivery', label: 'Delivery', icon: <DeliveryDiningOutlinedIcon />, onSelect: () => undefined },\n        { id: 'pickup', label: 'Pickup', icon: <ShoppingBagOutlinedIcon />, onSelect: () => undefined },\n        { id: 'counter', label: 'Counter', icon: <StorefrontOutlinedIcon />, onSelect: () => undefined },\n      ],\n    },\n    {\n      id: 'menu',\n      title: 'Menu',\n      entries: [\n        {\n          id: 'pause',\n          label: 'Pause an item',\n          description: 'Take it off sale until it is back',\n          icon: <PauseCircleOutlineIcon />,\n          onSelect: () => undefined,\n        },\n      ],\n    },\n  ],\n};\n\nexport const MORE: SectionNavMenu = {\n  label: 'More',\n  icon: <AppsIcon />,\n  title: 'More',\n  groups: [\n    {\n      id: 'rest',\n      layout: 'grid',\n      entries: [\n        { id: 'queue', label: 'Queue', icon: <GroupsOutlinedIcon />, href: '#queue', badge: 1 },\n        { id: 'pass', label: 'Pass', icon: <RoomServiceOutlinedIcon />, href: '#pass' },\n        { id: 'runs', label: 'Deliveries', icon: <DeliveryDiningOutlinedIcon />, href: '#runs' },\n        { id: 'booked', label: 'Bookings', icon: <CalendarMonthOutlinedIcon />, href: '#booked' },\n        { id: 'orders', label: 'Orders', icon: <ReceiptLongOutlinedIcon />, href: '#orders' },\n      ],\n    },\n  ],\n};\n\n/** A phone-sized frame with the bar at its foot, the way a host docks it. */\nexport function PhoneFrame({ children }: { children: React.ReactNode }): React.ReactElement {\n  return (\n    <Box\n      sx={{\n        width: sxRem(360),\n        maxWidth: '100%',\n        height: sxRem(640),\n        display: 'flex',\n        flexDirection: 'column',\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: 3,\n        overflow: 'hidden',\n        bgcolor: 'background.default',\n      }}\n    >\n      <Box sx={{ flex: 1, p: 2 }} />\n      {children}\n    </Box>\n  );\n}\n\n\n/** A desktop-column-sized frame for the rail. */\nexport function RailFrame({ children }: { children: React.ReactNode }): React.ReactElement {\n  return <Box sx={{ width: sxRem(240), height: sxRem(560), border: 1, borderColor: 'divider' }}>{children}</Box>;\n}\n\n/**\n * A screen's ACTIONS pinned at its foot — the same bar, drawn with verbs: a\n * bill being settled, one person at a time.\n *\n * `split` is DIMMED — it cannot be done yet, and a tap still reaches the host\n * so it can say why. `equal` is a TOGGLE that is on: `aria-pressed`, never\n * `aria-current`, because an action is not a page.\n */\nexport const ACTIONS: SectionNavDestination[] = [\n  { id: 'split', label: 'Split', icon: <ReceiptLongOutlinedIcon />, onSelect: () => undefined, dimmed: true },\n  { id: 'equal', label: 'Equally', icon: <GroupsOutlinedIcon />, onSelect: () => undefined, active: true },\n  { id: 'person', label: 'Person', icon: <AddIcon />, onSelect: () => undefined },\n];\n\nexport const PAY_ALL: SectionNavAction = {\n  label: 'Pay all',\n  icon: <StorefrontOutlinedIcon />,\n  onSelect: () => undefined,\n};\n"],"mappings":"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","names":[]}

package/dist/_internal/components/navigation/index.js

@@ -24,17 +24,17 @@ import "../../../chunk-3AIRFAI3.js";
 import "../../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../../chunk-SA2ERYVV.js";
+} from "../../../chunk-5GQYTB3K.js";
 import {
   sectionNavBarInset
-} from "../../../chunk-43Q6CVPB.js";
-import "../../../chunk-32JMSHEA.js";
-import "../../../chunk-RX7J6VRI.js";
+} from "../../../chunk-WNZBUR76.js";
+import "../../../chunk-S4ZUZ6DS.js";
+import "../../../chunk-HKEBTPKY.js";
 import {
   RaisedActionButton
-} from "../../../chunk-RZ4SBSLP.js";
-import "../../../chunk-GLKQT2DS.js";
-import "../../../chunk-VHVI3D4R.js";
+} from "../../../chunk-WNKRFMSI.js";
+import "../../../chunk-A436VORP.js";
+import "../../../chunk-P3GBXE73.js";
 import "../../../chunk-R445KMGG.js";
 import {
   Tabs
@@ -128,6 +128,7 @@ import "../../../chunk-FQ6UW7IY.js";
 import "../../../chunk-6JAIFIPW.js";
 import "../../../chunk-N3GAFIXG.js";
 import "../../../chunk-YKCAJ2TN.js";
+import "../../../chunk-MFU4Y25U.js";
 import "../../../chunk-PZ5AY32C.js";
 export {
   AppHeader,

package/dist/{chunk-SA2ERYVV.js → chunk-5GQYTB3K.js}

@@ -1,9 +1,9 @@
 import {
   SectionNavBar
-} from "./chunk-43Q6CVPB.js";
+} from "./chunk-WNZBUR76.js";
 import {
   SectionNavRail
-} from "./chunk-RX7J6VRI.js";
+} from "./chunk-HKEBTPKY.js";
 
 // src/components/navigation/SectionNav/SectionNav.tsx
 import { jsx } from "react/jsx-runtime";
@@ -52,4 +52,4 @@ function SectionNav({
 export {
   SectionNav
 };
-//# sourceMappingURL=chunk-SA2ERYVV.js.map
+//# sourceMappingURL=chunk-5GQYTB3K.js.map

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-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

package/dist/chunk-HKEBTPKY.js.map

@@ -0,0 +1 @@
+{"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 { destinationState, isMenu } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport type {\n  SectionNavAction,\n  SectionNavBack,\n  SectionNavDestination,\n  SectionNavMenu,\n  SectionNavProps,\n} 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 *\n * `active` is the look; `current` is what `aria-current` reports, and is a\n * link's claim only — an action row that is ON says so with `aria-pressed`,\n * which arrives in `control`. Omitted, `current` follows `active`.\n */\nfunction RailRow({\n  label,\n  description,\n  icon,\n  count,\n  active,\n  current = active,\n  copy,\n  testId,\n  control,\n  loading = false,\n}: {\n  label: string;\n  description?: string;\n  icon: ReactNode;\n  count: number | undefined;\n  active: boolean;\n  current?: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  loading?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-busy={loading || 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        [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },\n      }}\n    >\n      <CountedIcon\n        icon={<SlotIcon icon={icon} loading={loading} />}\n        count={count}\n        label={copy.badge}\n        testId={`${testId}-badge`}\n      />\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/**\n * A menu's groups, listed under its title — nothing folded away on a wide\n * screen. A `disabled` menu has no trigger here to refuse, so every row of it\n * is inert instead.\n */\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={entry.dataTestId ?? `${testId}-entry-${entry.id}`}\n              control={controlProps({\n                href: entry.href,\n                linkComponent,\n                inert: menu.disabled === true || entry.disabled === true,\n                onClick: () => entry.onSelect?.(),\n              })}\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/** The way back out of the section, at the top of the rail. */\nfunction RailBack({\n  back,\n  linkComponent,\n  testId,\n}: {\n  back: SectionNavBack;\n  linkComponent: ElementType | undefined;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...controlProps({ href: back.href, linkComponent })}\n      data-testid={testId}\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  );\n}\n\n/** A primary that ACTS, as one row: there is no sheet to list on a wide screen. */\nfunction RailAction({\n  action,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  action: SectionNavAction;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <RailRow\n      label={action.label}\n      icon={action.icon}\n      count={undefined}\n      active={false}\n      copy={copy}\n      testId={action.dataTestId ?? testId}\n      loading={action.loading === true}\n      control={controlProps({\n        href: undefined,\n        linkComponent,\n        inert: action.disabled === true,\n        busy: action.loading === true,\n        onClick: action.onSelect,\n      })}\n    />\n  );\n}\n\n/** A destination as a row: a link, or an action (a toggle when it carries `active`). */\nfunction RailDestination({\n  destination,\n  linkComponent,\n  copy,\n  testId,\n}: {\n  destination: SectionNavDestination;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <RailRow\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      active={lit}\n      current={current}\n      copy={copy}\n      testId={testId}\n      loading={destination.loading === true}\n      control={destinationControl(destination, linkComponent, () => destination.onSelect?.())}\n    />\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  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 ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}\n      {heading ? <RailHeading>{heading}</RailHeading> : null}\n      {destinations.map((destination) => (\n        <RailDestination\n          key={destination.id}\n          destination={destination}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}\n        />\n      ))}\n      {primary && !isMenu(primary) ? (\n        <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />\n      ) : null}\n      {isMenu(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":[]}