@12-apps/ui 6.50.1 → 6.51.0

package/dist/{chunk-32JMSHEA.js → chunk-S4ZUZ6DS.js}

@@ -4,7 +4,7 @@ import {
   CountedIcon,
   controlProps,
   focusRing
-} from "./chunk-GLKQT2DS.js";
+} from "./chunk-A436VORP.js";
 import {
   Drawer,
   DrawerContent,
@@ -26,13 +26,14 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }) {
       ...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         }
       }),
       "aria-current": entry.active ? "page" : void 0,
-      "data-testid": `${testId}-entry-${entry.id}`,
+      "data-testid": entry.dataTestId ?? `${testId}-entry-${entry.id}`,
       sx: {
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -48,7 +49,8 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }) {
         textAlign: "center",
         bgcolor: entry.active ? "action.selected" : "action.hover",
         color: entry.active ? "primary.main" : "text.primary",
-        "& svg": { color: "primary.main" }
+        "& svg": { color: "primary.main" },
+        "&:disabled": { color: "text.disabled", "& svg": { color: "text.disabled" } }
       },
       children: [
         /* @__PURE__ */ jsx(CountedIcon, { icon: entry.icon, count: entry.badge, label: copy.badge, testId: `${testId}-badge-${entry.id}` }),
@@ -65,13 +67,14 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }) {
       ...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         }
       }),
       "aria-current": entry.active ? "page" : void 0,
-      "data-testid": `${testId}-entry-${entry.id}`,
+      "data-testid": entry.dataTestId ?? `${testId}-entry-${entry.id}`,
       sx: {
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -85,7 +88,8 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }) {
         borderRadius: 1.5,
         textAlign: "start",
         bgcolor: entry.active ? "action.selected" : "action.hover",
-        "& svg": { color: "primary.main" }
+        "& svg": { color: "primary.main" },
+        "&:disabled": { color: "text.disabled", "& svg": { color: "text.disabled" } }
       },
       children: [
         /* @__PURE__ */ jsx(CountedIcon, { icon: entry.icon, count: entry.badge, label: copy.badge, testId: `${testId}-badge-${entry.id}` }),
@@ -171,4 +175,4 @@ function SectionNavSheet({
 export {
   SectionNavSheet
 };
-//# sourceMappingURL=chunk-32JMSHEA.js.map
+//# sourceMappingURL=chunk-S4ZUZ6DS.js.map

package/dist/chunk-S4ZUZ6DS.js.map

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

package/dist/{chunk-SA2ERYVV.js → chunk-VAO63IIP.js}

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

package/dist/{chunk-43Q6CVPB.js → chunk-VELGOFCL.js}

@@ -1,21 +1,26 @@
 import {
   SectionNavSheet
-} from "./chunk-32JMSHEA.js";
+} from "./chunk-S4ZUZ6DS.js";
 import {
   RaisedActionButton
-} from "./chunk-RZ4SBSLP.js";
+} from "./chunk-WNKRFMSI.js";
 import {
   Box,
   CONTROL_RESET,
   CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
   controlProps,
+  destinationControl,
   focusRing
-} from "./chunk-GLKQT2DS.js";
+} from "./chunk-A436VORP.js";
 import {
   barSlots,
+  destinationState,
+  isMenu,
   menuActive,
   menuCount
-} from "./chunk-VHVI3D4R.js";
+} from "./chunk-P3GBXE73.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -38,7 +43,8 @@ function Slot({
   copy,
   testId,
   control,
-  expanded
+  expanded,
+  loading = false
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
@@ -47,36 +53,20 @@ function Slot({
       ...control,
       "aria-current": current ? "page" : void 0,
       "aria-expanded": expanded,
+      "aria-busy": loading || void 0,
       "data-lit": lit ? "true" : void 0,
       "data-testid": testId,
-      sx: {
-        ...CONTROL_RESET,
-        ...focusRing(theme),
-        flex: 1,
-        minWidth: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 0.25,
-        position: "relative",
-        color: lit ? "primary.main" : "text.secondary",
-        // The current slot is marked by more than its colour: a short rule on
-        // its top edge, so the state survives a colour-blind reading.
-        '&[data-lit="true"]::before': {
-          content: '""',
-          position: "absolute",
-          top: 0,
-          insetInline: "22%",
-          height: rem(theme, 3),
-          borderBottomLeftRadius: rem(theme, 3),
-          borderBottomRightRadius: rem(theme, 3),
-          bgcolor: "primary.main"
-        },
-        "& svg": { fontSize: rem(theme, 22) }
-      },
+      sx: slotSx(theme, lit),
       children: [
-        /* @__PURE__ */ jsx(CountedIcon, { icon, count, label: copy.badge, testId: `${testId}-badge` }),
+        /* @__PURE__ */ jsx(
+          CountedIcon,
+          {
+            icon: /* @__PURE__ */ jsx(SlotIcon, { icon, loading }),
+            count,
+            label: copy.badge,
+            testId: `${testId}-badge`
+          }
+        ),
         /* @__PURE__ */ jsx(
           Typography,
           {
@@ -97,62 +87,125 @@ function Slot({
     }
   );
 }
-function BarSlotView({
-  slot,
+function slotSx(theme, lit) {
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 0.25,
+    position: "relative",
+    color: lit ? "primary.main" : "text.secondary",
+    // The current slot is marked by more than its colour: a short rule on
+    // its top edge, so the state survives a colour-blind reading.
+    '&[data-lit="true"]::before': {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      insetInline: "22%",
+      height: rem(theme, 3),
+      borderBottomLeftRadius: rem(theme, 3),
+      borderBottomRightRadius: rem(theme, 3),
+      bgcolor: "primary.main"
+    },
+    "& svg": { fontSize: rem(theme, 22) },
+    [NOT_LIVE]: { color: "text.disabled" }
+  };
+}
+function PrimarySlot({
   primary,
-  more,
-  open,
-  toggle,
-  close,
-  linkComponent,
-  copy,
-  dataTestId
+  context
 }) {
-  if (slot.kind === "primary" && primary) {
+  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;
+  if (!isMenu(primary)) {
     return /* @__PURE__ */ jsx(
       RaisedActionButton,
       {
         label: primary.label,
         icon: primary.icon,
-        open: open === "primary",
-        closeLabel: copy.close,
-        dataTestId: `${dataTestId}-primary`,
-        onClick: () => toggle("primary")
-      }
-    );
-  }
-  if (slot.kind === "more" && more) {
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        label: more.label,
-        icon: more.icon,
-        count: menuCount(more),
-        current: false,
-        lit: open === "more" || open === null && menuActive(more),
-        expanded: open === "more",
-        copy,
-        testId: `${dataTestId}-more`,
-        control: controlProps({ href: void 0, linkComponent, onClick: () => toggle("more") })
+        captioned: true,
+        disabled: primary.disabled,
+        loading: primary.loading,
+        dataTestId: testId,
+        onClick: () => {
+          context.close();
+          primary.onSelect();
+        }
       }
     );
   }
-  if (slot.kind !== "destination") return null;
-  const { destination } = slot;
+  return /* @__PURE__ */ jsx(
+    RaisedActionButton,
+    {
+      label: primary.label,
+      icon: primary.icon,
+      open: context.open === "primary",
+      closeLabel: context.copy.close,
+      disabled: primary.disabled,
+      dataTestId: testId,
+      onClick: () => context.toggle("primary")
+    }
+  );
+}
+function MoreSlot({ more, context }) {
+  const { open } = context;
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      label: more.label,
+      icon: more.icon,
+      count: menuCount(more),
+      current: false,
+      lit: open === "more" || open === null && menuActive(more),
+      expanded: open === "more",
+      copy: context.copy,
+      testId: more.dataTestId ?? `${context.dataTestId}-more`,
+      control: controlProps({
+        href: void 0,
+        linkComponent: context.linkComponent,
+        inert: more.disabled === true,
+        onClick: () => context.toggle("more")
+      })
+    }
+  );
+}
+function DestinationSlot({
+  destination,
+  context
+}) {
+  const { current, lit } = destinationState(destination);
   return /* @__PURE__ */ jsx(
     Slot,
     {
       label: destination.label,
       icon: destination.icon,
       count: destination.badge,
-      current: destination.active === true,
-      lit: open === null && destination.active === true,
-      copy,
-      testId: `${dataTestId}-dest-${destination.id}`,
-      control: controlProps({ href: destination.href, linkComponent, onClick: close })
+      current,
+      lit: context.open === null && lit,
+      copy: context.copy,
+      testId: destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`,
+      loading: destination.loading === true,
+      control: destinationControl(destination, context.linkComponent, () => {
+        context.close();
+        destination.onSelect?.();
+      })
     }
   );
 }
+function BarSlotView({
+  slot,
+  primary,
+  more,
+  context
+}) {
+  if (slot.kind === "primary") return primary ? /* @__PURE__ */ jsx(PrimarySlot, { primary, context }) : null;
+  if (slot.kind === "more") return more ? /* @__PURE__ */ jsx(MoreSlot, { more, context }) : null;
+  return /* @__PURE__ */ jsx(DestinationSlot, { destination: slot.destination, context });
+}
 function SectionNavBar({
   label,
   destinations,
@@ -162,6 +215,7 @@ function SectionNavBar({
   copy,
   dataTestId
 }) {
+  const sheetMenu = isMenu(primary) ? primary : void 0;
   const theme = useTheme();
   const [open, setOpen] = useState(null);
   const toggle = (menu) => setOpen((current) => current === menu ? null : menu);
@@ -195,21 +249,16 @@ function SectionNavBar({
             slot,
             primary,
             more,
-            open,
-            toggle,
-            close,
-            linkComponent,
-            copy,
-            dataTestId
+            context: { open, toggle, close, linkComponent, copy, dataTestId }
           },
           slot.kind === "destination" ? `dest-${slot.destination.id}` : `menu-${slot.kind}`
         ))
       }
     ),
-    primary ? /* @__PURE__ */ jsx(
+    sheetMenu ? /* @__PURE__ */ jsx(
       SectionNavSheet,
       {
-        menu: primary,
+        menu: sheetMenu,
         open: open === "primary",
         onClose: close,
         linkComponent,
@@ -237,4 +286,4 @@ export {
   sectionNavBarInset,
   SectionNavBar
 };
-//# sourceMappingURL=chunk-43Q6CVPB.js.map
+//# sourceMappingURL=chunk-VELGOFCL.js.map

package/dist/chunk-VELGOFCL.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 { 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 { 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  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavAction, 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/** The bar's height above the safe area — tall enough for an icon over a label. */\nconst barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);\n\n/**\n * The bar's full height on screen, the safe area included — where its sheets\n * stop, and what a host reserves at the foot of its content so nothing it\n * floats (a toast, a receipt) lands under the bar.\n */\nexport function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {\n  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;\n}\n\n/**\n * One slot: icon over label, a count on the icon.\n *\n * `current` is the page the viewer is on and is what `aria-current` reports —\n * 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}: {\n  label: string;\n  icon: ReactNode;\n  count: number | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n  loading?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      aria-busy={loading || undefined}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={slotSx(theme, lit)}\n    >\n      <CountedIcon\n        icon={<SlotIcon icon={icon} loading={loading} />}\n        count={count}\n        label={copy.badge}\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 : 400,\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** A slot's look: icon over label, the lit rule on its top edge, dimmed when disabled. */\nfunction slotSx(theme: Theme, lit: 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: 0.25,\n    position: 'relative',\n    color: lit ? 'primary.main' : 'text.secondary',\n    // The current slot is marked by more than its colour: a short rule on\n    // its top edge, so the state survives a colour-blind reading.\n    '&[data-lit=\"true\"]::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      insetInline: '22%',\n      height: rem(theme, 3),\n      borderBottomLeftRadius: rem(theme, 3),\n      borderBottomRightRadius: rem(theme, 3),\n      bgcolor: 'primary.main',\n    },\n    '& svg': { fontSize: rem(theme, 22) },\n    [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}\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        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      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      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      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 phone layout: a bottom bar, with its menus as bottom sheets. */\nexport function SectionNavBar({\n  label,\n  destinations,\n  primary,\n  more,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const sheetMenu = isMenu(primary) ? primary : undefined;\n  const theme = useTheme();\n  const [open, setOpen] = useState<OpenMenu>(null);\n  const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));\n  const close = (): void => setOpen(null);\n\n  return (\n    <>\n      <Box\n        component=\"nav\"\n        aria-label={label}\n        data-testid={dataTestId}\n        sx={{\n          flex: 'none',\n          display: 'flex',\n          alignItems: 'stretch',\n          boxSizing: 'border-box',\n          height: sectionNavBarInset(theme),\n          paddingBottom: 'env(safe-area-inset-bottom)',\n          borderTop: `1px solid ${theme.palette.divider}`,\n          bgcolor: 'background.paper',\n          // Above the backdrop ONLY while one of its own sheets is open, so the\n          // primary button can close what it opened. Raised all the time it\n          // would sit over every dialog the page opens, and on a small phone a\n          // dialog's own footer is exactly where the bar is.\n          position: 'relative',\n          zIndex: open === null ? 'auto' : theme.zIndex.modal + 1,\n        }}\n      >\n        {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (\n          <BarSlotView\n            key={slot.kind === 'destination' ? `dest-${slot.destination.id}` : `menu-${slot.kind}`}\n            slot={slot}\n            primary={primary}\n            more={more}\n            context={{ open, toggle, close, linkComponent, copy, dataTestId }}\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)}\n        />\n      ) : null}\n      {more ? (\n        <SectionNavSheet\n          menu={more}\n          open={open === 'more'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-more-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WNKRFMSI.js

@@ -0,0 +1,113 @@
+import {
+  Box,
+  CONTROL_RESET,
+  NOT_LIVE,
+  SlotIcon,
+  focusRing
+} from "./chunk-A436VORP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/SectionNav/SectionNav.primary.tsx
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RaisedActionButton({
+  label,
+  icon,
+  onClick,
+  open,
+  closeLabel,
+  captioned = false,
+  disabled = false,
+  loading = false,
+  dataTestId = "raised-action"
+}) {
+  const theme = useTheme();
+  const expanded = open === true;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        px: 0.5
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            ...raisedState({ onClick, disabled, loading }),
+            "aria-label": expanded && closeLabel ? closeLabel : label,
+            "aria-expanded": open,
+            "data-testid": dataTestId,
+            sx: raisedSx(theme, expanded),
+            children: /* @__PURE__ */ jsx(SlotIcon, { icon, loading })
+          }
+        ),
+        captioned ? /* @__PURE__ */ jsx(RaisedCaption, { label, inert: disabled || loading }) : null
+      ]
+    }
+  );
+}
+function raisedState({
+  onClick,
+  disabled,
+  loading
+}) {
+  const busy = loading && !disabled;
+  return {
+    onClick: busy ? void 0 : onClick,
+    disabled,
+    "aria-disabled": busy ? "true" : void 0,
+    "aria-busy": loading || void 0
+  };
+}
+function RaisedCaption({ label, inert }) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      variant: "caption",
+      "aria-hidden": true,
+      sx: { lineHeight: 1.3, mt: 0.25, whiteSpace: "nowrap", color: inert ? "text.disabled" : "text.primary" },
+      children: label
+    }
+  );
+}
+function raisedSx(theme, expanded) {
+  const size = rem(theme, 52);
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    width: size,
+    height: size,
+    // Lifted half out of the bar: the one control that is not a place.
+    marginTop: rem(theme, -18),
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    bgcolor: "primary.main",
+    color: "primary.contrastText",
+    boxShadow: theme.shadows[6],
+    [NOT_LIVE]: { cursor: "default", bgcolor: "action.disabledBackground", color: "text.disabled", boxShadow: "none" },
+    "& svg": {
+      fontSize: rem(theme, 26),
+      transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shorter }),
+      transform: expanded ? "rotate(45deg)" : "none"
+    },
+    "@media (prefers-reduced-motion: reduce)": { "& svg": { transition: "none" } }
+  };
+}
+
+export {
+  RaisedActionButton
+};
+//# sourceMappingURL=chunk-WNKRFMSI.js.map

package/dist/chunk-WNKRFMSI.js.map

@@ -0,0 +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, focusRing } 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  /** 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  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        aria-label={expanded && closeLabel ? closeLabel : label}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={raisedSx(theme, expanded)}\n      >\n        <SlotIcon icon={icon} loading={loading} />\n      </Box>\n      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}\n    </Box>\n  );\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. Hidden from assistive tech: the button\n * already carries the same words as its name, and reading them twice is noise.\n */\nfunction RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {\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): SxProps<Theme> {\n  const size = rem(theme, 52);\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    width: size,\n    height: size,\n    // Lifted half out of the bar: the one control that is not a place.\n    marginTop: rem(theme, -18),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bgcolor: 'primary.main',\n    color: 'primary.contrastText',\n    boxShadow: theme.shadows[6],\n    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },\n    '& svg': {\n      fontSize: rem(theme, 26),\n      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n      transform: expanded ? 'rotate(45deg)' : 'none',\n    },\n    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n  } as SxProps<Theme>;\n}\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,gBAA0C;AAkE/C,SAmBI,KAnBJ;AAdG,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AACf,GAA+C;AAC7C,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,SAAS;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,IAAI;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACJ,GAAG,YAAY,EAAE,SAAS,UAAU,QAAQ,CAAC;AAAA,YAC9C,cAAY,YAAY,aAAa,aAAa;AAAA,YAClD,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,IAAI,SAAS,OAAO,QAAQ;AAAA,YAE5B,8BAAC,YAAS,MAAY,SAAkB;AAAA;AAAA,QAC1C;AAAA,QACC,YAAY,oBAAC,iBAAc,OAAc,OAAO,YAAY,SAAS,IAAK;AAAA;AAAA;AAAA,EAC7E;AAEJ;AAMA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI4B;AAC1B,QAAM,OAAO,WAAW,CAAC;AACzB,SAAO;AAAA,IACL,SAAS,OAAO,SAAY;AAAA,IAC5B;AAAA,IACA,iBAAiB,OAAO,SAAS;AAAA,IACjC,aAAa,WAAW;AAAA,EAC1B;AACF;AAMA,SAAS,cAAc,EAAE,OAAO,MAAM,GAAyD;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,eAAW;AAAA,MACX,IAAI,EAAE,YAAY,KAAK,IAAI,MAAM,YAAY,UAAU,OAAO,QAAQ,kBAAkB,eAAe;AAAA,MAEtG;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,SAAS,OAAc,UAAmC;AACjE,QAAM,OAAO,IAAI,OAAO,EAAE;AAC1B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,KAAK;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA,IAER,WAAW,IAAI,OAAO,GAAG;AAAA,IACzB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW,MAAM,QAAQ,CAAC;AAAA,IAC1B,CAAC,QAAQ,GAAG,EAAE,QAAQ,WAAW,SAAS,6BAA6B,OAAO,iBAAiB,WAAW,OAAO;AAAA,IACjH,SAAS;AAAA,MACP,UAAU,IAAI,OAAO,EAAE;AAAA,MACvB,YAAY,MAAM,YAAY,OAAO,aAAa,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,MAClG,WAAW,WAAW,kBAAkB;AAAA,IAC1C;AAAA,IACA,2CAA2C,EAAE,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,EAC/E;AACF;","names":[]}

package/dist/navigation/SectionNav.js

@@ -1,17 +1,17 @@
 import "../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../chunk-SA2ERYVV.js";
+} from "../chunk-VAO63IIP.js";
 import {
   sectionNavBarInset
-} from "../chunk-43Q6CVPB.js";
-import "../chunk-32JMSHEA.js";
-import "../chunk-RX7J6VRI.js";
+} from "../chunk-VELGOFCL.js";
+import "../chunk-S4ZUZ6DS.js";
+import "../chunk-HKEBTPKY.js";
 import {
   RaisedActionButton
-} from "../chunk-RZ4SBSLP.js";
-import "../chunk-GLKQT2DS.js";
-import "../chunk-VHVI3D4R.js";
+} from "../chunk-WNKRFMSI.js";
+import "../chunk-A436VORP.js";
+import "../chunk-P3GBXE73.js";
 import "../chunk-TMSWLFL4.js";
 import "../chunk-KIHGTL2D.js";
 import "../chunk-5AK2EZG5.js";

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;AAGnE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAM7C,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQ1E;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AAyJD,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAAE,aAAa,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoE3G"}
+{"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;AAGnE,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAe7C,OAAO,KAAK,EAA2D,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQnH;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AA6ND,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAAE,aAAa,EAAE,WAAW,GAAG,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgE3G"}

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

@@ -1,4 +1,4 @@
-import type { SectionNavDestination, SectionNavMenu } from './SectionNav.types';
+import type { SectionNavAction, SectionNavDestination, SectionNavMenu } from './SectionNav.types';
 /** A count worth drawing: positive and finite. Zero and "unknown" draw nothing. */
 export declare function shownCount(count: number | undefined): number | undefined;
 /**
@@ -29,4 +29,15 @@ export type BarSlot = {
  * is the right one, under the thumb of a right-handed phone.
  */
 export declare function barSlots(destinations: readonly SectionNavDestination[], hasMore: boolean, hasPrimary: boolean): BarSlot[];
+/** A primary that opens a sheet, as opposed to one that acts on tap. */
+export declare function isMenu(primary: SectionNavMenu | SectionNavAction | undefined): primary is SectionNavMenu;
+/**
+ * How a destination reads. `current` is `aria-current="page"` and belongs to a
+ * LINK only — an action slot that is ON reports `aria-pressed` instead. `lit`
+ * is the look, and a `dimmed` slot is never lit: it says "not now".
+ */
+export declare function destinationState(destination: SectionNavDestination): {
+    current: boolean;
+    lit: boolean;
+};
 //# sourceMappingURL=SectionNav.helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEhF,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAExE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAM9E;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,OAAO,CAEpE;AAED,uDAAuD;AACvD,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,WAAW,EAAE,qBAAqB,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAExB;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,YAAY,EAAE,SAAS,qBAAqB,EAAE,EAC9C,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,OAAO,GAClB,OAAO,EAAE,CAKX"}
+{"version":3,"file":"SectionNav.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAElG,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAExE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAM9E;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,OAAO,CAEpE;AAED,uDAAuD;AACvD,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,WAAW,EAAE,qBAAqB,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAExB;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,YAAY,EAAE,SAAS,qBAAqB,EAAE,EAC9C,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,OAAO,GAClB,OAAO,EAAE,CAKX;AAED,wEAAwE;AACxE,wBAAgB,MAAM,CAAC,OAAO,EAAE,cAAc,GAAG,gBAAgB,GAAG,SAAS,GAAG,OAAO,IAAI,cAAc,CAExG;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,qBAAqB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,CAGvG"}