@12-apps/ui 6.71.0 → 6.73.0

package/components-catalog.md

@@ -737,7 +737,7 @@ 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; 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
+**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; `compact` — both layouts as icons only, a size down (48px bar, 40px raised button, a rail for a 64px column), every label kept as the control's name, for a host that folds its chrome
 **Also exports**: `RaisedActionButton` — the raised round action alone, for a bar the host already draws
 **Types**: `SectionNavProps`, `SectionNavDestination`, `SectionNavAction`, `SectionNavMenu`, `SectionNavGroup`, `SectionNavEntry`, `SectionNavCopy`
 **Location**: `src/components/navigation/SectionNav`

package/dist/_internal/components/data-display/CardKit/card-actions-context.js

@@ -2,7 +2,7 @@
 import {
   CardActionsProvider,
   useCardActions
-} from "../../../../chunk-N7KWWIF7.js";
+} from "../../../../chunk-LY7PBZ3Z.js";
 import "../../../../chunk-NUGT7LMR.js";
 import "../../../../chunk-DQJFCVXW.js";
 import "../../../../chunk-JYAXTRNH.js";

package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useRemoveConfirm
-} from "../../../../chunk-62BY4ZUQ.js";
-import "../../../../chunk-N7KWWIF7.js";
+} from "../../../../chunk-7KAZ3B5B.js";
+import "../../../../chunk-LY7PBZ3Z.js";
 import "../../../../chunk-XCBQXSTR.js";
 import "../../../../chunk-NJMAFII4.js";
 import "../../../../chunk-GICG3XJK.js";

package/dist/_internal/components/index.js

@@ -105,17 +105,17 @@ import "../../chunk-3L5OZCGA.js";
 import "../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../chunk-LWQGIN2M.js";
-import "../../chunk-OBGUD2PG.js";
-import "../../chunk-WY7FR7I4.js";
+} from "../../chunk-NQP72RTD.js";
+import "../../chunk-SNWCT6JN.js";
+import "../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../chunk-XS4NQ6LD.js";
-import "../../chunk-2STYL5PF.js";
+} from "../../chunk-23LPXHR2.js";
+import "../../chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "../../chunk-VI2IXBOO.js";
-import "../../chunk-WP7KPWCP.js";
+} from "../../chunk-KPEKD5SG.js";
+import "../../chunk-24HHUCWB.js";
 import "../../chunk-YCCWJ5XQ.js";
 import "../../chunk-R445KMGG.js";
 import {

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

@@ -1,13 +1,14 @@
 import {
   SectionNavBar,
   sectionNavBarInset
-} from "../../../../chunk-XS4NQ6LD.js";
-import "../../../../chunk-2STYL5PF.js";
-import "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-23LPXHR2.js";
+import "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-KPEKD5SG.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -1,15 +1,16 @@
 import {
   SectionNav
-} from "../../../../chunk-LWQGIN2M.js";
-import "../../../../chunk-OBGUD2PG.js";
-import "../../../../chunk-WY7FR7I4.js";
-import "../../../../chunk-XS4NQ6LD.js";
-import "../../../../chunk-2STYL5PF.js";
-import "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-NQP72RTD.js";
+import "../../../../chunk-SNWCT6JN.js";
+import "../../../../chunk-ILJ3FXIC.js";
+import "../../../../chunk-23LPXHR2.js";
+import "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-KPEKD5SG.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -4,11 +4,14 @@ import {
   CountedIcon,
   NOT_LIVE,
   SlotIcon,
+  VISUALLY_HIDDEN,
   controlProps,
   destinationControl,
-  focusRing
-} from "../../../../chunk-WP7KPWCP.js";
+  focusRing,
+  useMounted
+} from "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";
@@ -48,8 +51,10 @@ export {
   CountedIcon,
   NOT_LIVE,
   SlotIcon,
+  VISUALLY_HIDDEN,
   controlProps,
   destinationControl,
-  focusRing
+  focusRing,
+  useMounted
 };
 //# sourceMappingURL=SectionNav.parts.js.map

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

@@ -1,8 +1,9 @@
 import {
   RaisedActionButton
-} from "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-KPEKD5SG.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -1,9 +1,10 @@
 import {
   SectionNavRail
-} from "../../../../chunk-OBGUD2PG.js";
-import "../../../../chunk-WY7FR7I4.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-SNWCT6JN.js";
+import "../../../../chunk-ILJ3FXIC.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -1,8 +1,9 @@
 import {
   RailCreateMenu
-} from "../../../../chunk-WY7FR7I4.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-ILJ3FXIC.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -1,10 +1,11 @@
 import {
   SectionNavSheet
-} from "../../../../chunk-2STYL5PF.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

@@ -29,17 +29,17 @@ import "../../../chunk-3L5OZCGA.js";
 import "../../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../../chunk-LWQGIN2M.js";
-import "../../../chunk-OBGUD2PG.js";
-import "../../../chunk-WY7FR7I4.js";
+} from "../../../chunk-NQP72RTD.js";
+import "../../../chunk-SNWCT6JN.js";
+import "../../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../../chunk-XS4NQ6LD.js";
-import "../../../chunk-2STYL5PF.js";
+} from "../../../chunk-23LPXHR2.js";
+import "../../../chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "../../../chunk-VI2IXBOO.js";
-import "../../../chunk-WP7KPWCP.js";
+} from "../../../chunk-KPEKD5SG.js";
+import "../../../chunk-24HHUCWB.js";
 import "../../../chunk-YCCWJ5XQ.js";
 import "../../../chunk-R445KMGG.js";
 import {
@@ -92,6 +92,7 @@ import "../../../chunk-5UX5QAFJ.js";
 import "../../../chunk-Z2JH5KW5.js";
 import "../../../chunk-AL5E624U.js";
 import "../../../chunk-LV7LSPBF.js";
+import "../../../chunk-PUFA7FQ7.js";
 import "../../../chunk-5AK2EZG5.js";
 import "../../../chunk-N5PVD4J5.js";
 import "../../../chunk-6C5D6O3D.js";

package/dist/{chunk-XS4NQ6LD.js → chunk-23LPXHR2.js}

@@ -1,9 +1,9 @@
 import {
   SectionNavSheet
-} from "./chunk-2STYL5PF.js";
+} from "./chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "./chunk-VI2IXBOO.js";
+} from "./chunk-KPEKD5SG.js";
 import {
   Box,
   CONTROL_RESET,
@@ -12,8 +12,9 @@ import {
   SlotIcon,
   controlProps,
   destinationControl,
-  focusRing
-} from "./chunk-WP7KPWCP.js";
+  focusRing,
+  useMounted
+} from "./chunk-24HHUCWB.js";
 import {
   barSlots,
   destinationState,
@@ -33,9 +34,9 @@ import Typography from "@mui/material/Typography/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var barHeight = (theme) => rem(theme, 60);
-function sectionNavBarInset(theme) {
-  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;
+var barHeight = (theme, compact = false) => rem(theme, compact ? 48 : 60);
+function sectionNavBarInset(theme, options = {}) {
+  return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;
 }
 function Slot({
   label,
@@ -47,19 +48,22 @@ function Slot({
   testId,
   control,
   expanded,
-  loading = false
+  loading = false,
+  compact = false
 }) {
   const theme = useTheme();
+  const animate = useMounted();
   return /* @__PURE__ */ jsxs(
     Box,
     {
       ...control,
+      title: compact ? label : void 0,
       "aria-current": current ? "page" : void 0,
       "aria-expanded": expanded,
       "aria-busy": loading || void 0,
       "data-lit": lit ? "true" : void 0,
       "data-testid": testId,
-      sx: slotSx(theme, lit),
+      sx: slotSx(theme, lit, compact),
       children: [
         /* @__PURE__ */ jsx(
           CountedIcon,
@@ -83,7 +87,8 @@ function Slot({
               whiteSpace: "nowrap",
               lineHeight: 1.3,
               fontWeight: lit ? 700 : 600,
-              color: lit ? "text.primary" : "inherit"
+              color: lit ? "text.primary" : "inherit",
+              ...labelFoldSx(theme, compact, animate)
             },
             children: label
           }
@@ -92,6 +97,14 @@ function Slot({
     }
   );
 }
+function labelFoldSx(theme, compact, animate) {
+  return {
+    maxHeight: compact ? 0 : rem(theme, 24),
+    opacity: compact ? 0 : 1,
+    transition: animate ? theme.transitions.create(["max-height", "opacity"], { duration: theme.transitions.duration.shorter }) : "none",
+    "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+  };
+}
 function pillSx(theme) {
   return {
     display: "inline-flex",
@@ -103,7 +116,7 @@ function pillSx(theme) {
     transition: theme.transitions.create("background-color", { duration: theme.transitions.duration.shorter })
   };
 }
-function slotSx(theme, lit) {
+function slotSx(theme, lit, compact) {
   return {
     ...CONTROL_RESET,
     ...focusRing(theme),
@@ -113,7 +126,7 @@ function slotSx(theme, lit) {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: 0.25,
+    gap: compact ? 0 : 0.25,
     position: "relative",
     color: lit ? "primary.main" : "text.secondary",
     // The current slot is marked by more than its colour: a tinted pill behind
@@ -135,6 +148,7 @@ function PrimarySlot({
         label: primary.label,
         icon: primary.icon,
         captioned: true,
+        compact: context.compact,
         disabled: primary.disabled,
         loading: primary.loading,
         dataTestId: testId,
@@ -152,6 +166,7 @@ function PrimarySlot({
       icon: primary.icon,
       open: context.open === "primary",
       closeLabel: context.copy.close,
+      compact: context.compact,
       disabled: primary.disabled,
       dataTestId: testId,
       onClick: () => context.toggle("primary")
@@ -171,6 +186,7 @@ function MoreSlot({ more, context }) {
       expanded: open === "more",
       copy: context.copy,
       testId: more.dataTestId ?? `${context.dataTestId}-more`,
+      compact: context.compact,
       control: controlProps({
         href: void 0,
         linkComponent: context.linkComponent,
@@ -196,6 +212,7 @@ function DestinationSlot({
       copy: context.copy,
       testId: destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`,
       loading: destination.loading === true,
+      compact: context.compact,
       control: destinationControl(destination, context.linkComponent, () => {
         context.close();
         destination.onSelect?.();
@@ -213,6 +230,30 @@ function BarSlotView({
   if (slot.kind === "more") return more ? /* @__PURE__ */ jsx(MoreSlot, { more, context }) : null;
   return /* @__PURE__ */ jsx(DestinationSlot, { destination: slot.destination, context });
 }
+function barSx(theme, sheetOpen, compact, animate) {
+  return {
+    flex: "none",
+    display: "flex",
+    alignItems: "stretch",
+    boxSizing: "border-box",
+    height: sectionNavBarInset(theme, { compact }),
+    // Folding to icons and back is a change of height the eye follows;
+    // with reduced motion it simply happens.
+    transition: animate ? theme.transitions.create("height", { duration: theme.transitions.duration.shorter }) : "none",
+    "@media (prefers-reduced-motion: reduce)": { transition: "none" },
+    paddingBottom: "env(safe-area-inset-bottom)",
+    borderTop: `1px solid ${theme.palette.divider}`,
+    bgcolor: "background.paper",
+    // Above the backdrop ONLY while one of its own sheets is open, so the
+    // primary button can close what it opened. Raised all the time it
+    // would sit over every dialog the page opens, and on a small phone a
+    // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
+    // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
+    // stacked sheet catches this bar's OWN sheets too.
+    position: "relative",
+    zIndex: sheetOpen ? stackedOverlayZIndex(theme) + 1 : "auto"
+  };
+}
 function SectionNavBar({
   label,
   destinations,
@@ -220,10 +261,12 @@ function SectionNavBar({
   more,
   linkComponent,
   copy,
-  dataTestId
+  dataTestId,
+  compact = false
 }) {
   const sheetMenu = isMenu(primary) ? primary : void 0;
   const theme = useTheme();
+  const animate = useMounted();
   const [open, setOpen] = useState(null);
   const toggle = (menu) => setOpen((current) => current === menu ? null : menu);
   const close = () => setOpen(null);
@@ -234,31 +277,14 @@ function SectionNavBar({
         component: "nav",
         "aria-label": label,
         "data-testid": dataTestId,
-        sx: {
-          flex: "none",
-          display: "flex",
-          alignItems: "stretch",
-          boxSizing: "border-box",
-          height: sectionNavBarInset(theme),
-          paddingBottom: "env(safe-area-inset-bottom)",
-          borderTop: `1px solid ${theme.palette.divider}`,
-          bgcolor: "background.paper",
-          // Above the backdrop ONLY while one of its own sheets is open, so the
-          // primary button can close what it opened. Raised all the time it
-          // would sit over every dialog the page opens, and on a small phone a
-          // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
-          // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
-          // stacked sheet catches this bar's OWN sheets too.
-          position: "relative",
-          zIndex: open === null ? "auto" : stackedOverlayZIndex(theme) + 1
-        },
+        sx: barSx(theme, open !== null, compact, animate),
         children: barSlots(destinations, more !== void 0, primary !== void 0).map((slot) => /* @__PURE__ */ jsx(
           BarSlotView,
           {
             slot,
             primary,
             more,
-            context: { open, toggle, close, linkComponent, copy, dataTestId }
+            context: { open, toggle, close, linkComponent, copy, dataTestId, compact }
           },
           slot.kind === "destination" ? `dest-${slot.destination.id}` : `menu-${slot.kind}`
         ))
@@ -273,7 +299,7 @@ function SectionNavBar({
         linkComponent,
         copy,
         testId: `${dataTestId}-primary-sheet`,
-        bottomOffset: sectionNavBarInset(theme)
+        bottomOffset: sectionNavBarInset(theme, { compact })
       }
     ) : null,
     more ? /* @__PURE__ */ jsx(
@@ -285,7 +311,7 @@ function SectionNavBar({
         linkComponent,
         copy,
         testId: `${dataTestId}-more-sheet`,
-        bottomOffset: sectionNavBarInset(theme)
+        bottomOffset: sectionNavBarInset(theme, { compact })
       }
     ) : null
   ] });
@@ -295,4 +321,4 @@ export {
   sectionNavBarInset,
   SectionNavBar
 };
-//# sourceMappingURL=chunk-XS4NQ6LD.js.map
+//# sourceMappingURL=chunk-23LPXHR2.js.map

package/dist/chunk-23LPXHR2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport { useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { rem } from '../../../tokens/scales';\n\nimport { barSlots, destinationState, isMenu, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  useMounted,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavAction, SectionNavBadge, SectionNavDestination, 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/**\n * The bar's height above the safe area — tall enough for an icon over a label;\n * a compact bar holds the icon alone.\n */\nconst barHeight = (theme: Parameters<typeof rem>[0], compact = false): string => rem(theme, compact ? 48 : 60);\n\n/** How the bar is drawn — `compact` is `SectionNavProps.compact`. */\nexport interface SectionNavBarOptions {\n  compact?: boolean;\n}\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], options: SectionNavBarOptions = {}): string {\n  return `calc(${barHeight(theme, options.compact === true)} + 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 * a link's claim only; an action slot that is ON says so with `aria-pressed`,\n * which arrives in `control`. `lit` is only how the slot looks, and goes out\n * while a sheet is open so the bar shows where the thumb is. Opening a sheet\n * is `aria-expanded`'s to say.\n *\n * A destination is a link or an action; the \"more\" slot is a button that\n * opens its sheet. Either way the whole slot is the target, so a thumb landing\n * on the label lands on the control. A `disabled` slot is a disabled button,\n * dimmed — the act is still where the hand expects it. A `loading` or\n * `dimmed` slot is drawn the same and stays focusable (`aria-disabled`).\n */\nfunction Slot({\n  label,\n  icon,\n  count,\n  current,\n  lit,\n  copy,\n  testId,\n  control,\n  expanded,\n  loading = false,\n  compact = false,\n}: {\n  label: string;\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n  loading?: boolean;\n  /** Icon only: the label stays the slot's name, out of sight, and its tooltip. */\n  compact?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  const animate = useMounted();\n  return (\n    <Box\n      {...control}\n      title={compact ? label : undefined}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      aria-busy={loading || undefined}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={slotSx(theme, lit, compact)}\n    >\n      <CountedIcon\n        icon={\n          <Box component=\"span\" data-slot-pill=\"\" sx={pillSx(theme)}>\n            <SlotIcon icon={icon} loading={loading} />\n          </Box>\n        }\n        count={count}\n        label={copy.badge}\n        attentionLabel={copy.attention}\n        testId={`${testId}-badge`}\n      />\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 : 600,\n          color: lit ? 'text.primary' : 'inherit',\n          ...labelFoldSx(theme, compact, animate),\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/**\n * The label folding away in a compact bar: it shrinks to no height and fades\n * while the bar shrinks, rather than leaving in one frame. Never `display:\n * none` — it is still the slot's accessible name. With reduced motion it\n * simply goes.\n */\nfunction labelFoldSx(theme: Theme, compact: boolean, animate: boolean): Record<string, unknown> {\n  return {\n    maxHeight: compact ? 0 : rem(theme, 24),\n    opacity: compact ? 0 : 1,\n    transition: animate\n      ? theme.transitions.create(['max-height', 'opacity'], { duration: theme.transitions.duration.shorter })\n      : 'none',\n    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n  };\n}\n\n/** The pill behind a slot's icon — tinted while the slot is lit. */\nfunction pillSx(theme: Theme): SxProps<Theme> {\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    px: 1.75,\n    py: 0.25,\n    borderRadius: rem(theme, 999),\n    transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shorter }),\n  };\n}\n\n/** A slot's look: icon over label, a pill behind the lit icon, dimmed when disabled. */\nfunction slotSx(theme: Theme, lit: boolean, compact: boolean): SxProps<Theme> {\n  return {\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: compact ? 0 : 0.25,\n    position: 'relative',\n    color: lit ? 'primary.main' : 'text.secondary',\n    // The current slot is marked by more than its colour: a tinted pill behind\n    // its icon and a bolder label, so the state survives a colour-blind reading.\n    '&[data-lit=\"true\"] [data-slot-pill]': { bgcolor: alpha(theme.palette.primary.main, 0.14) },\n    '& svg': { fontSize: rem(theme, 22) },\n    [NOT_LIVE]: { color: 'text.disabled' },\n  } as SxProps<Theme>;\n}\n\n/** What every slot kind is handed: the bar's open state and how to change it. */\ninterface SlotContext {\n  open: OpenMenu;\n  toggle: (menu: Exclude<OpenMenu, null>) => void;\n  close: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  dataTestId: string;\n  compact: boolean;\n}\n\n/** The raised button: an action runs on tap; a menu opens its sheet. */\nfunction PrimarySlot({\n  primary,\n  context,\n}: {\n  primary: SectionNavMenu | SectionNavAction;\n  context: SlotContext;\n}): React.JSX.Element {\n  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;\n  if (!isMenu(primary)) {\n    return (\n      <RaisedActionButton\n        label={primary.label}\n        icon={primary.icon}\n        captioned\n        compact={context.compact}\n        disabled={primary.disabled}\n        loading={primary.loading}\n        dataTestId={testId}\n        onClick={() => {\n          context.close();\n          primary.onSelect();\n        }}\n      />\n    );\n  }\n  return (\n    <RaisedActionButton\n      label={primary.label}\n      icon={primary.icon}\n      open={context.open === 'primary'}\n      closeLabel={context.copy.close}\n      compact={context.compact}\n      disabled={primary.disabled}\n      dataTestId={testId}\n      onClick={() => context.toggle('primary')}\n    />\n  );\n}\n\n/** The \"more\" slot: a button that opens its sheet, carrying its entries' counts. */\nfunction MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContext }): React.JSX.Element {\n  const { open } = context;\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={context.copy}\n      testId={more.dataTestId ?? `${context.dataTestId}-more`}\n      compact={context.compact}\n      control={controlProps({\n        href: undefined,\n        linkComponent: context.linkComponent,\n        inert: more.disabled === true,\n        onClick: () => context.toggle('more'),\n      })}\n    />\n  );\n}\n\n/** A destination: a link, or an action slot (a toggle when it carries `active`). */\nfunction DestinationSlot({\n  destination,\n  context,\n}: {\n  destination: SectionNavDestination;\n  context: SlotContext;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <Slot\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      current={current}\n      lit={context.open === null && lit}\n      copy={context.copy}\n      testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}\n      loading={destination.loading === true}\n      compact={context.compact}\n      control={destinationControl(destination, context.linkComponent, () => {\n        context.close();\n        destination.onSelect?.();\n      })}\n    />\n  );\n}\n\n/** One slot of the bar, whichever kind it is. */\nfunction BarSlotView({\n  slot,\n  primary,\n  more,\n  context,\n}: {\n  slot: BarSlot;\n  primary: SectionNavMenu | SectionNavAction | undefined;\n  more: SectionNavMenu | undefined;\n  context: SlotContext;\n}): React.JSX.Element | null {\n  if (slot.kind === 'primary') return primary ? <PrimarySlot primary={primary} context={context} /> : null;\n  if (slot.kind === 'more') return more ? <MoreSlot more={more} context={context} /> : null;\n  return <DestinationSlot destination={slot.destination} context={context} />;\n}\n\n/** The bar's own box: docked, a hairline on top, raised over the backdrop only while its sheet is open. */\nfunction barSx(theme: Theme, sheetOpen: boolean, compact: boolean, animate: boolean): SxProps<Theme> {\n  return {\n    flex: 'none',\n    display: 'flex',\n    alignItems: 'stretch',\n    boxSizing: 'border-box',\n    height: sectionNavBarInset(theme, { compact }),\n    // Folding to icons and back is a change of height the eye follows;\n    // with reduced motion it simply happens.\n    transition: animate ? theme.transitions.create('height', { duration: theme.transitions.duration.shorter }) : 'none',\n    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\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. `stackedOverlayZIndex`,\n    // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a\n    // stacked sheet catches this bar's OWN sheets too.\n    position: 'relative',\n    zIndex: sheetOpen ? stackedOverlayZIndex(theme) + 1 : 'auto',\n  } as SxProps<Theme>;\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  compact = false,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const sheetMenu = isMenu(primary) ? primary : undefined;\n  const theme = useTheme();\n  const animate = useMounted();\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={barSx(theme, open !== null, compact, animate)}\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            context={{ open, toggle, close, linkComponent, copy, dataTestId, compact }}\n          />\n        ))}\n      </Box>\n      {sheetMenu ? (\n        <SectionNavSheet\n          menu={sheetMenu}\n          open={open === 'primary'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary-sheet`}\n          bottomOffset={sectionNavBarInset(theme, { compact })}\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, { compact })}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-WP7KPWCP.js → chunk-24HHUCWB.js}

@@ -1,6 +1,9 @@
 import {
   shownCount
 } from "./chunk-YCCWJ5XQ.js";
+import {
+  SR_ONLY_SX
+} from "./chunk-PUFA7FQ7.js";
 import {
   Badge
 } from "./chunk-N5PVD4J5.js";
@@ -11,6 +14,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 { useEffect, useState } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 function CountedIcon({
   icon,
@@ -92,6 +96,12 @@ var CONTROL_RESET = {
   margin: 0,
   [NOT_LIVE]: { cursor: "default" }
 };
+var VISUALLY_HIDDEN = SR_ONLY_SX;
+function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
 
 export {
   Box,
@@ -101,6 +111,8 @@ export {
   destinationControl,
   NOT_LIVE,
   SlotIcon,
-  CONTROL_RESET
+  CONTROL_RESET,
+  VISUALLY_HIDDEN,
+  useMounted
 };
-//# sourceMappingURL=chunk-WP7KPWCP.js.map
+//# sourceMappingURL=chunk-24HHUCWB.js.map

package/dist/chunk-24HHUCWB.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 { useEffect, useState, type ElementType, type ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\nimport { SR_ONLY_SX } from '../../form/Label/Label.styles';\nimport { Badge } from '../../data-display/Badge';\n\nimport { shownCount } from './SectionNav.helpers';\nimport type { SectionNavBadge, 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  attentionLabel,\n}: {\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  label: (count: number) => string;\n  testId: string;\n  /** The \"!\" badge's accessible name (`SectionNavCopy.attention`). */\n  attentionLabel?: string;\n}): React.JSX.Element {\n  if (count === '!') {\n    return (\n      <Badge content=\"!\" variant=\"count\" color=\"warning\" aria-label={attentionLabel ?? label(1)} aria-live=\"off\" data-testid={testId}>\n        {icon}\n      </Badge>\n    );\n  }\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\n/**\n * Out of sight, still read: a compact nav keeps each label as its control's\n * accessible name. The same box `Label`'s `srOnly` draws.\n */\nexport const VISUALLY_HIDDEN = SR_ONLY_SX;\n\n/**\n * False on the first render, true from then on — so a fold animates when the\n * host CHANGES `compact`, never when a page simply opens folded (which drew\n * the labels sliding out over the neighbouring badges on every load).\n */\nexport function useMounted(): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  return mounted;\n}\n\nexport { Box };\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAE7B,SAAS,WAAW,gBAAkD;AAgChE,SAM4B,UAN5B;AAhBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,MAAI,UAAU,KAAK;AACjB,WACE,oBAAC,SAAM,SAAQ,KAAI,SAAQ,SAAQ,OAAM,WAAU,cAAY,kBAAkB,MAAM,CAAC,GAAG,aAAU,OAAM,eAAa,QACrH,gBACH;AAAA,EAEJ;AACA,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;AAMO,IAAM,kBAAkB;AAOxB,SAAS,aAAsB;AACpC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,YAAU,MAAM,WAAW,IAAI,GAAG,CAAC,CAAC;AACpC,SAAO;AACT;","names":[]}

package/dist/{chunk-62BY4ZUQ.js → chunk-7KAZ3B5B.js}

@@ -1,6 +1,6 @@
 import {
   useCardActions
-} from "./chunk-N7KWWIF7.js";
+} from "./chunk-LY7PBZ3Z.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -50,4 +50,4 @@ function useRemoveConfirm({
 export {
   useRemoveConfirm
 };
-//# sourceMappingURL=chunk-62BY4ZUQ.js.map
+//# sourceMappingURL=chunk-7KAZ3B5B.js.map

package/dist/{chunk-WY7FR7I4.js → chunk-ILJ3FXIC.js}

@@ -1,6 +1,6 @@
 import {
   CountedIcon
-} from "./chunk-WP7KPWCP.js";
+} from "./chunk-24HHUCWB.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -59,11 +59,19 @@ function entryItem(groupId, entry, linkComponent, copy, testId, close) {
     `${groupId}:${entry.id}`
   );
 }
+function createButtonForm(menu, compact) {
+  if (!compact) return { startIcon: menu.icon, "aria-label": void 0, title: void 0 };
+  return { startIcon: void 0, "aria-label": menu.label, title: menu.label };
+}
+function createButtonLayoutSx(compact) {
+  return compact ? { justifyContent: "center", minWidth: 0, px: 0 } : { justifyContent: "flex-start", px: 1.75 };
+}
 function RailCreateMenu({
   menu,
   linkComponent,
   copy,
-  testId
+  testId,
+  compact = false
 }) {
   const theme = useTheme();
   const menuId = useId();
@@ -81,7 +89,7 @@ function RailCreateMenu({
       {
         variant: "contained",
         fullWidth: true,
-        startIcon: menu.icon,
+        ...createButtonForm(menu, compact),
         disabled: menu.disabled === true,
         "aria-haspopup": "menu",
         "aria-expanded": open,
@@ -91,13 +99,14 @@ function RailCreateMenu({
         sx: {
           my: 1,
           minHeight: rem(theme, 40),
-          justifyContent: "flex-start",
-          px: 1.75,
+          ...createButtonLayoutSx(compact),
           fontWeight: 600,
           // A place in the rail reads in sentence case, like the rows under it.
-          textTransform: "none"
+          textTransform: "none",
+          // The ring outside the filled button, where it can be seen.
+          "&.Mui-focusVisible": { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) }
         },
-        children: menu.label
+        children: compact ? menu.icon : menu.label
       }
     ),
     /* @__PURE__ */ jsx(
@@ -124,4 +133,4 @@ function RailCreateMenu({
 export {
   RailCreateMenu
 };
-//# sourceMappingURL=chunk-WY7FR7I4.js.map
+//# sourceMappingURL=chunk-ILJ3FXIC.js.map