@12-apps/ui 6.73.0 → 6.73.1

package/dist/_internal/components/index.js

@@ -105,16 +105,16 @@ import "../../chunk-3L5OZCGA.js";
 import "../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../chunk-NQP72RTD.js";
+} from "../../chunk-27F2VXS4.js";
 import "../../chunk-SNWCT6JN.js";
 import "../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../chunk-23LPXHR2.js";
+} from "../../chunk-URSYEHPU.js";
 import "../../chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "../../chunk-KPEKD5SG.js";
+} from "../../chunk-UKUGSU3Y.js";
 import "../../chunk-24HHUCWB.js";
 import "../../chunk-YCCWJ5XQ.js";
 import "../../chunk-R445KMGG.js";

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

@@ -1,9 +1,10 @@
 import {
   SectionNavBar,
-  sectionNavBarInset
-} from "../../../../chunk-23LPXHR2.js";
+  sectionNavBarInset,
+  sectionNavSheetOffset
+} from "../../../../chunk-URSYEHPU.js";
 import "../../../../chunk-NM46HQSW.js";
-import "../../../../chunk-KPEKD5SG.js";
+import "../../../../chunk-UKUGSU3Y.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
@@ -45,6 +46,7 @@ import "../../../../chunk-MFU4Y25U.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   SectionNavBar,
-  sectionNavBarInset
+  sectionNavBarInset,
+  sectionNavSheetOffset
 };
 //# sourceMappingURL=SectionNav.bar.js.map

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

@@ -1,11 +1,11 @@
 import {
   SectionNav
-} from "../../../../chunk-NQP72RTD.js";
+} from "../../../../chunk-27F2VXS4.js";
 import "../../../../chunk-SNWCT6JN.js";
 import "../../../../chunk-ILJ3FXIC.js";
-import "../../../../chunk-23LPXHR2.js";
+import "../../../../chunk-URSYEHPU.js";
 import "../../../../chunk-NM46HQSW.js";
-import "../../../../chunk-KPEKD5SG.js";
+import "../../../../chunk-UKUGSU3Y.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";

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

@@ -1,6 +1,9 @@
 import {
-  RaisedActionButton
-} from "../../../../chunk-KPEKD5SG.js";
+  RAISED_LIFT,
+  RAISED_LIFT_COMPACT,
+  RaisedActionButton,
+  raisedLift
+} from "../../../../chunk-UKUGSU3Y.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-PUFA7FQ7.js";
@@ -38,6 +41,9 @@ import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
-  RaisedActionButton
+  RAISED_LIFT,
+  RAISED_LIFT_COMPACT,
+  RaisedActionButton,
+  raisedLift
 };
 //# sourceMappingURL=SectionNav.primary.js.map

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

@@ -29,16 +29,16 @@ import "../../../chunk-3L5OZCGA.js";
 import "../../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../../chunk-NQP72RTD.js";
+} from "../../../chunk-27F2VXS4.js";
 import "../../../chunk-SNWCT6JN.js";
 import "../../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../../chunk-23LPXHR2.js";
+} from "../../../chunk-URSYEHPU.js";
 import "../../../chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "../../../chunk-KPEKD5SG.js";
+} from "../../../chunk-UKUGSU3Y.js";
 import "../../../chunk-24HHUCWB.js";
 import "../../../chunk-YCCWJ5XQ.js";
 import "../../../chunk-R445KMGG.js";

package/dist/{chunk-NQP72RTD.js → chunk-27F2VXS4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SNWCT6JN.js";
 import {
   SectionNavBar
-} from "./chunk-23LPXHR2.js";
+} from "./chunk-URSYEHPU.js";
 
 // src/components/navigation/SectionNav/SectionNav.tsx
 import { jsx } from "react/jsx-runtime";
@@ -55,4 +55,4 @@ function SectionNav({
 export {
   SectionNav
 };
-//# sourceMappingURL=chunk-NQP72RTD.js.map
+//# sourceMappingURL=chunk-27F2VXS4.js.map

package/dist/{chunk-KPEKD5SG.js → chunk-UKUGSU3Y.js}

@@ -90,6 +90,11 @@ function RaisedCaption({ shown, label, inert }) {
     }
   );
 }
+var RAISED_LIFT = 18;
+var RAISED_LIFT_COMPACT = 12;
+function raisedLift(compact) {
+  return compact ? RAISED_LIFT_COMPACT : RAISED_LIFT;
+}
 function raisedSx(theme, expanded, compact) {
   const size = rem(theme, compact ? 40 : 52);
   return {
@@ -100,7 +105,7 @@ function raisedSx(theme, expanded, compact) {
     width: size,
     height: size,
     // Lifted half out of the bar: the one control that is not a place.
-    marginTop: rem(theme, compact ? -12 : -18),
+    marginTop: rem(theme, -raisedLift(compact)),
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
@@ -119,6 +124,9 @@ function raisedSx(theme, expanded, compact) {
 }
 
 export {
-  RaisedActionButton
+  RaisedActionButton,
+  RAISED_LIFT,
+  RAISED_LIFT_COMPACT,
+  raisedLift
 };
-//# sourceMappingURL=chunk-KPEKD5SG.js.map
+//# sourceMappingURL=chunk-UKUGSU3Y.js.map

package/dist/{chunk-KPEKD5SG.js.map → chunk-UKUGSU3Y.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, NOT_LIVE, SlotIcon } from './SectionNav.parts';\n\nexport interface RaisedActionButtonProps {\n  /**\n   * The button's accessible name. Drawn under the button only when\n   * `captioned`; the caption is hidden from assistive tech, so the name is\n   * read once either way.\n   */\n  label: string;\n  icon: ReactNode;\n  onClick: () => void;\n  /**\n   * Whether what the button opens is open. Omit for a button that opens\n   * nothing (a plain action): it then carries no `aria-expanded` and its icon\n   * never turns.\n   */\n  open?: boolean;\n  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */\n  closeLabel?: string;\n  /**\n   * Draw `label` under the button. A bar of VERBS names the act it is for; a\n   * bar of places can leave its one action to the icon.\n   */\n  captioned?: boolean;\n  /**\n   * A size down — 40px rather than 52, lifted less — for a compact bar. It\n   * draws no caption: a compact bar is icons only, and the name stays the\n   * button's `aria-label`.\n   */\n  compact?: boolean;\n  /** Dimmed and not operable: a native `disabled` button. */\n  disabled?: boolean;\n  /**\n   * A write it started is in flight: a spinner replaces the icon, it reports\n   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,\n   * so the keyboard does not lose its place while the write answers.\n   */\n  loading?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The raised round button in the middle of a bottom bar — the one control in\n * the row that is an ACTION rather than a place.\n *\n * Lifted half out of the bar so it reads as different in kind from the tabs\n * beside it. Uncaptioned it costs the row less width than a tab: that width is\n * what lets a bar keep four labelled tabs AND this button at 320px. A bar of\n * verbs captions it, naming the act under the button.\n *\n * `SectionNav` draws it for its `primary` menu. It is exported on its own for\n * a bar the host already draws — drop it between two tabs, in a flex row.\n */\nexport function RaisedActionButton({\n  label,\n  icon,\n  onClick,\n  open,\n  closeLabel,\n  captioned = false,\n  compact = false,\n  disabled = false,\n  loading = false,\n  dataTestId = 'raised-action',\n}: RaisedActionButtonProps): React.JSX.Element {\n  const theme = useTheme();\n  const expanded = open === true;\n  return (\n    <Box\n      sx={{\n        flex: 'none',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'flex-start',\n        px: 0.5,\n      }}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        {...raisedState({ onClick, disabled, loading })}\n        {...raisedNames({ label, closeLabel, expanded, compact })}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={raisedSx(theme, expanded, compact)}\n      >\n        <SlotIcon icon={icon} loading={loading} />\n      </Box>\n      <RaisedCaption shown={captioned && !compact} label={label} inert={disabled || loading} />\n    </Box>\n  );\n}\n\n/**\n * The button's name — `closeLabel` while what it opened is open — and, on a\n * compact bar where no word is drawn, the label as its tooltip.\n */\nfunction raisedNames({\n  label,\n  closeLabel,\n  expanded,\n  compact,\n}: {\n  label: string;\n  closeLabel: string | undefined;\n  expanded: boolean;\n  compact: boolean;\n}): { 'aria-label': string; title: string | undefined } {\n  return { 'aria-label': expanded && closeLabel ? closeLabel : label, title: compact ? label : undefined };\n}\n\n/**\n * The button's operability. Only `disabled` is native: an in-flight button\n * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.\n */\nfunction raisedState({\n  onClick,\n  disabled,\n  loading,\n}: {\n  onClick: () => void;\n  disabled: boolean;\n  loading: boolean;\n}): Record<string, unknown> {\n  const busy = loading && !disabled;\n  return {\n    onClick: busy ? undefined : onClick,\n    disabled,\n    'aria-disabled': busy ? 'true' : undefined,\n    'aria-busy': loading || undefined,\n  };\n}\n\n/**\n * The label under a captioned button — none on a compact bar. Hidden from assistive tech: the button\n * already carries the same words as its name, and reading them twice is noise.\n */\nfunction RaisedCaption({ shown, label, inert }: { shown: boolean; label: string; inert: boolean }): React.JSX.Element | null {\n  if (!shown) return null;\n  return (\n    <Typography\n      component=\"span\"\n      variant=\"caption\"\n      aria-hidden\n      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}\n    >\n      {label}\n    </Typography>\n  );\n}\n\n/** The round button: lifted half out of the bar, its icon turning while what it opened is open. */\nfunction raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {\n  const size = rem(theme, compact ? 40 : 52);\n  return {\n    ...CONTROL_RESET,\n    // The ring OUTSIDE the button: the shared ring sits inside the box, in the\n    // primary colour, where this button's own fill swallowed it whole.\n    '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },\n    width: size,\n    height: size,\n    // Lifted half out of the bar: the one control that is not a place.\n    marginTop: rem(theme, compact ? -12 : -18),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bgcolor: 'primary.main',\n    color: 'primary.contrastText',\n    boxShadow: theme.shadows[6],\n    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },\n    '& svg': {\n      fontSize: rem(theme, compact ? 22 : 26),\n      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n      transform: expanded ? 'rotate(45deg)' : 'none',\n    },\n    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n  } as SxProps<Theme>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, NOT_LIVE, SlotIcon } from './SectionNav.parts';\n\nexport interface RaisedActionButtonProps {\n  /**\n   * The button's accessible name. Drawn under the button only when\n   * `captioned`; the caption is hidden from assistive tech, so the name is\n   * read once either way.\n   */\n  label: string;\n  icon: ReactNode;\n  onClick: () => void;\n  /**\n   * Whether what the button opens is open. Omit for a button that opens\n   * nothing (a plain action): it then carries no `aria-expanded` and its icon\n   * never turns.\n   */\n  open?: boolean;\n  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */\n  closeLabel?: string;\n  /**\n   * Draw `label` under the button. A bar of VERBS names the act it is for; a\n   * bar of places can leave its one action to the icon.\n   */\n  captioned?: boolean;\n  /**\n   * A size down — 40px rather than 52, lifted less — for a compact bar. It\n   * draws no caption: a compact bar is icons only, and the name stays the\n   * button's `aria-label`.\n   */\n  compact?: boolean;\n  /** Dimmed and not operable: a native `disabled` button. */\n  disabled?: boolean;\n  /**\n   * A write it started is in flight: a spinner replaces the icon, it reports\n   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,\n   * so the keyboard does not lose its place while the write answers.\n   */\n  loading?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The raised round button in the middle of a bottom bar — the one control in\n * the row that is an ACTION rather than a place.\n *\n * Lifted half out of the bar so it reads as different in kind from the tabs\n * beside it. Uncaptioned it costs the row less width than a tab: that width is\n * what lets a bar keep four labelled tabs AND this button at 320px. A bar of\n * verbs captions it, naming the act under the button.\n *\n * `SectionNav` draws it for its `primary` menu. It is exported on its own for\n * a bar the host already draws — drop it between two tabs, in a flex row.\n */\nexport function RaisedActionButton({\n  label,\n  icon,\n  onClick,\n  open,\n  closeLabel,\n  captioned = false,\n  compact = false,\n  disabled = false,\n  loading = false,\n  dataTestId = 'raised-action',\n}: RaisedActionButtonProps): React.JSX.Element {\n  const theme = useTheme();\n  const expanded = open === true;\n  return (\n    <Box\n      sx={{\n        flex: 'none',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'flex-start',\n        px: 0.5,\n      }}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        {...raisedState({ onClick, disabled, loading })}\n        {...raisedNames({ label, closeLabel, expanded, compact })}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={raisedSx(theme, expanded, compact)}\n      >\n        <SlotIcon icon={icon} loading={loading} />\n      </Box>\n      <RaisedCaption shown={captioned && !compact} label={label} inert={disabled || loading} />\n    </Box>\n  );\n}\n\n/**\n * The button's name — `closeLabel` while what it opened is open — and, on a\n * compact bar where no word is drawn, the label as its tooltip.\n */\nfunction raisedNames({\n  label,\n  closeLabel,\n  expanded,\n  compact,\n}: {\n  label: string;\n  closeLabel: string | undefined;\n  expanded: boolean;\n  compact: boolean;\n}): { 'aria-label': string; title: string | undefined } {\n  return { 'aria-label': expanded && closeLabel ? closeLabel : label, title: compact ? label : undefined };\n}\n\n/**\n * The button's operability. Only `disabled` is native: an in-flight button\n * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.\n */\nfunction raisedState({\n  onClick,\n  disabled,\n  loading,\n}: {\n  onClick: () => void;\n  disabled: boolean;\n  loading: boolean;\n}): Record<string, unknown> {\n  const busy = loading && !disabled;\n  return {\n    onClick: busy ? undefined : onClick,\n    disabled,\n    'aria-disabled': busy ? 'true' : undefined,\n    'aria-busy': loading || undefined,\n  };\n}\n\n/**\n * The label under a captioned button — none on a compact bar. Hidden from assistive tech: the button\n * already carries the same words as its name, and reading them twice is noise.\n */\nfunction RaisedCaption({ shown, label, inert }: { shown: boolean; label: string; inert: boolean }): React.JSX.Element | null {\n  if (!shown) return null;\n  return (\n    <Typography\n      component=\"span\"\n      variant=\"caption\"\n      aria-hidden\n      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}\n    >\n      {label}\n    </Typography>\n  );\n}\n\n/**\n * How far the round button stands out of the bar's top edge, in design px — what\n * the bar's sheets must clear so the button never draws over one (FUT-3399).\n * The compact bar's smaller button stands out less.\n */\nexport const RAISED_LIFT = 18;\nexport const RAISED_LIFT_COMPACT = 12;\n\n/** The lift of the round button on a bar of this form. */\nexport function raisedLift(compact: boolean): number {\n  return compact ? RAISED_LIFT_COMPACT : RAISED_LIFT;\n}\n\n/** The round button: lifted half out of the bar, its icon turning while what it opened is open. */\nfunction raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {\n  const size = rem(theme, compact ? 40 : 52);\n  return {\n    ...CONTROL_RESET,\n    // The ring OUTSIDE the button: the shared ring sits inside the box, in the\n    // primary colour, where this button's own fill swallowed it whole.\n    '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },\n    width: size,\n    height: size,\n    // Lifted half out of the bar: the one control that is not a place.\n    marginTop: rem(theme, -raisedLift(compact)),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bgcolor: 'primary.main',\n    color: 'primary.contrastText',\n    boxShadow: theme.shadows[6],\n    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },\n    '& svg': {\n      fontSize: rem(theme, compact ? 22 : 26),\n      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n      transform: expanded ? 'rotate(45deg)' : 'none',\n    },\n    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n  } as SxProps<Theme>;\n}\n"],"mappings":"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","names":[]}

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

@@ -2,8 +2,9 @@ import {
   SectionNavSheet
 } from "./chunk-NM46HQSW.js";
 import {
-  RaisedActionButton
-} from "./chunk-KPEKD5SG.js";
+  RaisedActionButton,
+  raisedLift
+} from "./chunk-UKUGSU3Y.js";
 import {
   Box,
   CONTROL_RESET,
@@ -38,6 +39,10 @@ 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 sectionNavSheetOffset(theme, raised, options = {}) {
+  const inset = sectionNavBarInset(theme, options);
+  return raised ? `calc(${inset} + ${rem(theme, raisedLift(options.compact === true))})` : inset;
+}
 function Slot({
   label,
   icon,
@@ -299,7 +304,7 @@ function SectionNavBar({
         linkComponent,
         copy,
         testId: `${dataTestId}-primary-sheet`,
-        bottomOffset: sectionNavBarInset(theme, { compact })
+        bottomOffset: sectionNavSheetOffset(theme, primary !== void 0, { compact })
       }
     ) : null,
     more ? /* @__PURE__ */ jsx(
@@ -311,7 +316,7 @@ function SectionNavBar({
         linkComponent,
         copy,
         testId: `${dataTestId}-more-sheet`,
-        bottomOffset: sectionNavBarInset(theme, { compact })
+        bottomOffset: sectionNavSheetOffset(theme, primary !== void 0, { compact })
       }
     ) : null
   ] });
@@ -319,6 +324,7 @@ function SectionNavBar({
 
 export {
   sectionNavBarInset,
+  sectionNavSheetOffset,
   SectionNavBar
 };
-//# sourceMappingURL=chunk-23LPXHR2.js.map
+//# sourceMappingURL=chunk-URSYEHPU.js.map

package/dist/chunk-URSYEHPU.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 { raisedLift, 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/** Where the bar's sheets stop: clear of the raised button's {@link raisedLift}, which drew over their last row (FUT-3399). */\nexport function sectionNavSheetOffset(theme: Parameters<typeof rem>[0], raised: boolean, options: SectionNavBarOptions = {}): string {\n  const inset = sectionNavBarInset(theme, options);\n  return raised ? `calc(${inset} + ${rem(theme, raisedLift(options.compact === true))})` : inset;\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={sectionNavSheetOffset(theme, primary !== undefined, { 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={sectionNavSheetOffset(theme, primary !== undefined, { compact })}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAA0C;AAC1D,SAAS,gBAAkD;AA+FvD,SAmQA,UAtPQ,KAbR;AAlEJ,IAAM,YAAY,CAAC,OAAkC,UAAU,UAAkB,IAAI,OAAO,UAAU,KAAK,EAAE;AAYtG,SAAS,mBAAmB,OAAkC,UAAgC,CAAC,GAAW;AAC/G,SAAO,QAAQ,UAAU,OAAO,QAAQ,YAAY,IAAI,CAAC;AAC3D;AAGO,SAAS,sBAAsB,OAAkC,QAAiB,UAAgC,CAAC,GAAW;AACnI,QAAM,QAAQ,mBAAmB,OAAO,OAAO;AAC/C,SAAO,SAAS,QAAQ,KAAK,MAAM,IAAI,OAAO,WAAW,QAAQ,YAAY,IAAI,CAAC,CAAC,MAAM;AAC3F;AAiBA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AACZ,GAasB;AACpB,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,WAAW;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,UAAU,QAAQ;AAAA,MACzB,gBAAc,UAAU,SAAS;AAAA,MACjC,iBAAe;AAAA,MACf,aAAW,WAAW;AAAA,MACtB,YAAU,MAAM,SAAS;AAAA,MACzB,eAAa;AAAA,MACb,IAAI,OAAO,OAAO,KAAK,OAAO;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MACE,oBAAC,OAAI,WAAU,QAAO,kBAAe,IAAG,IAAI,OAAO,KAAK,GACtD,8BAAC,YAAS,MAAY,SAAkB,GAC1C;AAAA,YAEF;AAAA,YACA,OAAO,KAAK;AAAA,YACZ,gBAAgB,KAAK;AAAA,YACrB,QAAQ,GAAG,MAAM;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,IAAI;AAAA,cACF,UAAU;AAAA,cACV,UAAU;AAAA,cACV,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,YAAY,MAAM,MAAM;AAAA,cACxB,OAAO,MAAM,iBAAiB;AAAA,cAC9B,GAAG,YAAY,OAAO,SAAS,OAAO;AAAA,YACxC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAQA,SAAS,YAAY,OAAc,SAAkB,SAA2C;AAC9F,SAAO;AAAA,IACL,WAAW,UAAU,IAAI,IAAI,OAAO,EAAE;AAAA,IACtC,SAAS,UAAU,IAAI;AAAA,IACvB,YAAY,UACR,MAAM,YAAY,OAAO,CAAC,cAAc,SAAS,GAAG,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC,IACpG;AAAA,IACJ,2CAA2C,EAAE,YAAY,OAAO;AAAA,EAClE;AACF;AAGA,SAAS,OAAO,OAA8B;AAC5C,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,cAAc,IAAI,OAAO,GAAG;AAAA,IAC5B,YAAY,MAAM,YAAY,OAAO,oBAAoB,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,EAC3G;AACF;AAGA,SAAS,OAAO,OAAc,KAAc,SAAkC;AAC5E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,KAAK;AAAA,IAClB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,UAAU,IAAI;AAAA,IACnB,UAAU;AAAA,IACV,OAAO,MAAM,iBAAiB;AAAA;AAAA;AAAA,IAG9B,uCAAuC,EAAE,SAAS,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,EAAE;AAAA,IAC1F,SAAS,EAAE,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,IACpC,CAAC,QAAQ,GAAG,EAAE,OAAO,gBAAgB;AAAA,EACvC;AACF;AAcA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,SAAS,QAAQ,cAAc,GAAG,QAAQ,UAAU;AAC1D,MAAI,CAAC,OAAO,OAAO,GAAG;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,QAAQ;AAAA,QACf,MAAM,QAAQ;AAAA,QACd,WAAS;AAAA,QACT,SAAS,QAAQ;AAAA,QACjB,UAAU,QAAQ;AAAA,QAClB,SAAS,QAAQ;AAAA,QACjB,YAAY;AAAA,QACZ,SAAS,MAAM;AACb,kBAAQ,MAAM;AACd,kBAAQ,SAAS;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,QAAQ;AAAA,MACf,MAAM,QAAQ;AAAA,MACd,MAAM,QAAQ,SAAS;AAAA,MACvB,YAAY,QAAQ,KAAK;AAAA,MACzB,SAAS,QAAQ;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,YAAY;AAAA,MACZ,SAAS,MAAM,QAAQ,OAAO,SAAS;AAAA;AAAA,EACzC;AAEJ;AAGA,SAAS,SAAS,EAAE,MAAM,QAAQ,GAAsE;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,OAAO,UAAU,IAAI;AAAA,MACrB,SAAS;AAAA,MACT,KAAK,SAAS,UAAW,SAAS,QAAQ,WAAW,IAAI;AAAA,MACzD,UAAU,SAAS;AAAA,MACnB,MAAM,QAAQ;AAAA,MACd,QAAQ,KAAK,cAAc,GAAG,QAAQ,UAAU;AAAA,MAChD,SAAS,QAAQ;AAAA,MACjB,SAAS,aAAa;AAAA,QACpB,MAAM;AAAA,QACN,eAAe,QAAQ;AAAA,QACvB,OAAO,KAAK,aAAa;AAAA,QACzB,SAAS,MAAM,QAAQ,OAAO,MAAM;AAAA,MACtC,CAAC;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,EAAE,SAAS,IAAI,IAAI,iBAAiB,WAAW;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,KAAK,QAAQ,SAAS,QAAQ;AAAA,MAC9B,MAAM,QAAQ;AAAA,MACd,QAAQ,YAAY,cAAc,GAAG,QAAQ,UAAU,SAAS,YAAY,EAAE;AAAA,MAC9E,SAAS,YAAY,YAAY;AAAA,MACjC,SAAS,QAAQ;AAAA,MACjB,SAAS,mBAAmB,aAAa,QAAQ,eAAe,MAAM;AACpE,gBAAQ,MAAM;AACd,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,MAAI,KAAK,SAAS,UAAW,QAAO,UAAU,oBAAC,eAAY,SAAkB,SAAkB,IAAK;AACpG,MAAI,KAAK,SAAS,OAAQ,QAAO,OAAO,oBAAC,YAAS,MAAY,SAAkB,IAAK;AACrF,SAAO,oBAAC,mBAAgB,aAAa,KAAK,aAAa,SAAkB;AAC3E;AAGA,SAAS,MAAM,OAAc,WAAoB,SAAkB,SAAkC;AACnG,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ,mBAAmB,OAAO,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,IAG7C,YAAY,UAAU,MAAM,YAAY,OAAO,UAAU,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC,IAAI;AAAA,IAC7G,2CAA2C,EAAE,YAAY,OAAO;AAAA,IAChE,eAAe;AAAA,IACf,WAAW,aAAa,MAAM,QAAQ,OAAO;AAAA,IAC7C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOT,UAAU;AAAA,IACV,QAAQ,YAAY,qBAAqB,KAAK,IAAI,IAAI;AAAA,EACxD;AACF;AAGO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GACyH;AACvH,QAAM,YAAY,OAAO,OAAO,IAAI,UAAU;AAC9C,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAC/C,QAAM,SAAS,CAAC,SAAwC,QAAQ,CAAC,YAAa,YAAY,OAAO,OAAO,IAAK;AAC7G,QAAM,QAAQ,MAAY,QAAQ,IAAI;AAEtC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,IAAI,MAAM,OAAO,SAAS,MAAM,SAAS,OAAO;AAAA,QAE/C,mBAAS,cAAc,SAAS,QAAW,YAAY,MAAS,EAAE,IAAI,CAAC,SACtE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,EAAE,MAAM,QAAQ,OAAO,eAAe,MAAM,YAAY,QAAQ;AAAA;AAAA,UAJpE,KAAK,SAAS,gBAAgB,QAAQ,KAAK,YAAY,EAAE,KAAK,QAAQ,KAAK,IAAI;AAAA,QAKtF,CACD;AAAA;AAAA,IACH;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ,GAAG,UAAU;AAAA,QACrB,cAAc,sBAAsB,OAAO,YAAY,QAAW,EAAE,QAAQ,CAAC;AAAA;AAAA,IAC/E,IACE;AAAA,IACH,OACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ,GAAG,UAAU;AAAA,QACrB,cAAc,sBAAsB,OAAO,YAAY,QAAW,EAAE,QAAQ,CAAC;AAAA;AAAA,IAC/E,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/navigation/SectionNav.js

@@ -1,16 +1,16 @@
 import "../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../chunk-NQP72RTD.js";
+} from "../chunk-27F2VXS4.js";
 import "../chunk-SNWCT6JN.js";
 import "../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../chunk-23LPXHR2.js";
+} from "../chunk-URSYEHPU.js";
 import "../chunk-NM46HQSW.js";
 import {
   RaisedActionButton
-} from "../chunk-KPEKD5SG.js";
+} from "../chunk-UKUGSU3Y.js";
 import "../chunk-24HHUCWB.js";
 import "../chunk-YCCWJ5XQ.js";
 import "../chunk-TMSWLFL4.js";

package/dist/types/components/navigation/SectionNav/SectionNav.bar.d.ts

@@ -11,6 +11,8 @@ export interface SectionNavBarOptions {
  * floats (a toast, a receipt) lands under the bar.
  */
 export declare function sectionNavBarInset(theme: Parameters<typeof rem>[0], options?: SectionNavBarOptions): string;
+/** Where the bar's sheets stop: clear of the raised button's {@link raisedLift}, which drew over their last row (FUT-3399). */
+export declare function sectionNavSheetOffset(theme: Parameters<typeof rem>[0], raised: boolean, options?: SectionNavBarOptions): string;
 /** The phone layout: a bottom bar, with its menus as bottom sheets. */
 export declare function SectionNavBar({ label, destinations, primary, more, linkComponent, copy, dataTestId, compact, }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> & Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & {
     linkComponent: ElementType | undefined;

package/dist/types/components/navigation/SectionNav/SectionNav.bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.bar.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,WAAW,EAAkB,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAgB7C,OAAO,KAAK,EAA4E,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAWpI,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAE/G;AA6RD,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAe,GAChB,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAAE,aAAa,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkDvH"}
+{"version":3,"file":"SectionNav.bar.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,WAAW,EAAkB,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAgB7C,OAAO,KAAK,EAA4E,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAWpI,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAE/G;AAED,+HAA+H;AAC/H,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAGnI;AA6RD,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAe,GAChB,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAAE,aAAa,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkDvH"}

package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts

@@ -50,4 +50,13 @@ export interface RaisedActionButtonProps {
  * a bar the host already draws — drop it between two tabs, in a flex row.
  */
 export declare function RaisedActionButton({ label, icon, onClick, open, closeLabel, captioned, compact, disabled, loading, dataTestId, }: RaisedActionButtonProps): React.JSX.Element;
+/**
+ * How far the round button stands out of the bar's top edge, in design px — what
+ * the bar's sheets must clear so the button never draws over one (FUT-3399).
+ * The compact bar's smaller button stands out less.
+ */
+export declare const RAISED_LIFT = 18;
+export declare const RAISED_LIFT_COMPACT = 12;
+/** The lift of the round button on a bar of this form. */
+export declare function raisedLift(compact: boolean): number;
 //# sourceMappingURL=SectionNav.primary.d.ts.map

package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.primary.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,OAAe,EACf,QAAgB,EAChB,OAAe,EACf,UAA4B,GAC7B,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4B7C"}
+{"version":3,"file":"SectionNav.primary.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,OAAe,EACf,QAAgB,EAChB,OAAe,EACf,UAA4B,GAC7B,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4B7C;AA4DD;;;;GAIG;AACH,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,0DAA0D;AAC1D,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEnD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.73.0",
+  "version": "6.73.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/navigation/SectionNav/SectionNav.bar.tsx

@@ -18,7 +18,7 @@ import {
   destinationControl,
   focusRing,
 } from './SectionNav.parts';
-import { RaisedActionButton } from './SectionNav.primary';
+import { raisedLift, RaisedActionButton } from './SectionNav.primary';
 import { SectionNavSheet } from './SectionNav.sheet';
 import type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';
 
@@ -45,6 +45,12 @@ export function sectionNavBarInset(theme: Parameters<typeof rem>[0], options: Se
   return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;
 }
 
+/** Where the bar's sheets stop: clear of the raised button's {@link raisedLift}, which drew over their last row (FUT-3399). */
+export function sectionNavSheetOffset(theme: Parameters<typeof rem>[0], raised: boolean, options: SectionNavBarOptions = {}): string {
+  const inset = sectionNavBarInset(theme, options);
+  return raised ? `calc(${inset} + ${rem(theme, raisedLift(options.compact === true))})` : inset;
+}
+
 /**
  * One slot: icon over label, a count on the icon.
  *
@@ -373,7 +379,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-primary-sheet`}
-          bottomOffset={sectionNavBarInset(theme, { compact })}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
       {more ? (
@@ -384,7 +390,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-more-sheet`}
-          bottomOffset={sectionNavBarInset(theme, { compact })}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
     </>

package/src/components/navigation/SectionNav/SectionNav.md

@@ -19,7 +19,7 @@ action, the sheets, and the rail's sections.
 
 | `layout` | draws | menus |
 |---|---|---|
-| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar |
+| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar — and above the raised `primary` when there is one, so it never draws over a sheet |
 | `rail` | a vertical list: `back`, `heading`, a `primary` menu as one button, the destinations, then `more` | `primary` opens as a menu anchored to its button (named by `title`); `more` is listed under its `title` |
 
 Which layout to use is the HOST's call. A bar beside a sidebar is two

package/src/components/navigation/SectionNav/SectionNav.primary.tsx

@@ -156,6 +156,19 @@ function RaisedCaption({ shown, label, inert }: { shown: boolean; label: string;
   );
 }
 
+/**
+ * How far the round button stands out of the bar's top edge, in design px — what
+ * the bar's sheets must clear so the button never draws over one (FUT-3399).
+ * The compact bar's smaller button stands out less.
+ */
+export const RAISED_LIFT = 18;
+export const RAISED_LIFT_COMPACT = 12;
+
+/** The lift of the round button on a bar of this form. */
+export function raisedLift(compact: boolean): number {
+  return compact ? RAISED_LIFT_COMPACT : RAISED_LIFT;
+}
+
 /** The round button: lifted half out of the bar, its icon turning while what it opened is open. */
 function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {
   const size = rem(theme, compact ? 40 : 52);
@@ -167,7 +180,7 @@ function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Th
     width: size,
     height: size,
     // Lifted half out of the bar: the one control that is not a place.
-    marginTop: rem(theme, compact ? -12 : -18),
+    marginTop: rem(theme, -raisedLift(compact)),
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { 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":[]}