@12-apps/ui 6.72.0 → 6.73.1

package/dist/{chunk-OBGUD2PG.js → chunk-SNWCT6JN.js}

@@ -1,16 +1,17 @@
 import {
   RailCreateMenu
-} from "./chunk-WY7FR7I4.js";
+} from "./chunk-ILJ3FXIC.js";
 import {
   Box,
   CONTROL_RESET,
   CountedIcon,
   NOT_LIVE,
   SlotIcon,
+  VISUALLY_HIDDEN,
   controlProps,
   destinationControl,
   focusRing
-} from "./chunk-WP7KPWCP.js";
+} from "./chunk-24HHUCWB.js";
 import {
   destinationState,
   isMenu
@@ -20,9 +21,33 @@ import {
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/SectionNav/SectionNav.rail.tsx
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import Typography from "@mui/material/Typography/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var ROW_WORDS_SX = { display: "flex", flexDirection: "column", minWidth: 0 };
+function railRowSx(theme, active, compact) {
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    position: compact ? "relative" : void 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: compact ? "center" : "flex-start",
+    gap: compact ? 0 : 1.5,
+    width: "100%",
+    minHeight: rem(theme, 40),
+    px: compact ? 0 : 1.25,
+    py: 0.75,
+    borderRadius: 1,
+    textAlign: "start",
+    color: active ? "primary.main" : "text.primary",
+    bgcolor: active ? "action.selected" : "transparent",
+    "&:hover": { bgcolor: active ? "action.selected" : "action.hover" },
+    "& svg": { color: "primary.main", fontSize: rem(theme, 20) },
+    [NOT_LIVE]: { color: "text.disabled", "& svg": { color: "text.disabled" } }
+  };
+}
 function RailRow({
   label,
   description,
@@ -33,7 +58,8 @@ function RailRow({
   copy,
   testId,
   control,
-  loading = false
+  loading = false,
+  compact = false
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
@@ -42,25 +68,9 @@ function RailRow({
       ...control,
       "aria-current": current ? "page" : void 0,
       "aria-busy": loading || void 0,
+      title: compact ? label : void 0,
       "data-testid": testId,
-      sx: {
-        ...CONTROL_RESET,
-        ...focusRing(theme),
-        display: "flex",
-        alignItems: "center",
-        gap: 1.5,
-        width: "100%",
-        minHeight: rem(theme, 40),
-        px: 1.25,
-        py: 0.75,
-        borderRadius: 1,
-        textAlign: "start",
-        color: active ? "primary.main" : "text.primary",
-        bgcolor: active ? "action.selected" : "transparent",
-        "&:hover": { bgcolor: active ? "action.selected" : "action.hover" },
-        "& svg": { color: "primary.main", fontSize: rem(theme, 20) },
-        [NOT_LIVE]: { color: "text.disabled", "& svg": { color: "text.disabled" } }
-      },
+      sx: railRowSx(theme, active, compact),
       children: [
         /* @__PURE__ */ jsx(
           CountedIcon,
@@ -72,7 +82,7 @@ function RailRow({
             testId: `${testId}-badge`
           }
         ),
-        /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs(Box, { component: "span", sx: compact ? VISUALLY_HIDDEN : ROW_WORDS_SX, children: [
           /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: active ? 700 : 500 }, children: label }),
           description ? /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: description }) : null
         ] })
@@ -80,19 +90,28 @@ function RailRow({
     }
   );
 }
-function RailHeading({ children }) {
-  return /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", sx: { px: 1.25, pt: 1.5, lineHeight: 1.6 }, children });
+function RailHeading({ children, compact = false }) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "overline",
+      color: "text.secondary",
+      sx: compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 1.5, lineHeight: 1.6 },
+      children
+    }
+  );
 }
 function RailMenu({
   menu,
   linkComponent,
   copy,
-  testId
+  testId,
+  compact
 }) {
   return /* @__PURE__ */ jsxs(Box, { component: "section", "data-testid": testId, sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-    /* @__PURE__ */ jsx(RailHeading, { children: menu.title }),
+    /* @__PURE__ */ jsx(RailHeading, { compact, children: menu.title }),
     menu.groups.map((group) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-      group.title ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { px: 1.25, pt: 0.5 }, children: group.title }) : null,
+      group.title ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 0.5 }, children: group.title }) : null,
       group.entries.map((entry) => /* @__PURE__ */ jsx(
         RailRow,
         {
@@ -101,6 +120,7 @@ function RailMenu({
           icon: entry.icon,
           count: entry.badge,
           active: entry.active === true,
+          compact,
           copy,
           testId: entry.dataTestId ?? `${testId}-entry-${entry.id}`,
           control: controlProps({
@@ -118,21 +138,26 @@ function RailMenu({
 function RailBack({
   back,
   linkComponent,
-  testId
+  testId,
+  compact
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
     Box,
     {
       ...controlProps({ href: back.href, linkComponent }),
+      title: compact ? back.label : void 0,
       "data-testid": testId,
       sx: {
         ...CONTROL_RESET,
         ...focusRing(theme),
+        position: compact ? "relative" : void 0,
         display: "flex",
         alignItems: "center",
-        gap: 1,
-        px: 1.25,
+        justifyContent: compact ? "center" : "flex-start",
+        gap: compact ? 0 : 1,
+        minHeight: compact ? rem(theme, 40) : void 0,
+        px: compact ? 0 : 1.25,
         py: 0.75,
         mb: 0.5,
         borderRadius: 1,
@@ -141,8 +166,8 @@ function RailBack({
         "& svg": { fontSize: rem(theme, 20) }
       },
       children: [
-        back.icon,
-        /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: 600 }, children: back.label })
+        back.icon ?? (compact ? /* @__PURE__ */ jsx(ArrowBackIcon, { "aria-hidden": true }) : null),
+        /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: compact ? VISUALLY_HIDDEN : { fontWeight: 600 }, children: back.label })
       ]
     }
   );
@@ -151,11 +176,13 @@ function RailAction({
   action,
   linkComponent,
   copy,
-  testId
+  testId,
+  compact
 }) {
   return /* @__PURE__ */ jsx(
     RailRow,
     {
+      compact,
       label: action.label,
       icon: action.icon,
       count: void 0,
@@ -177,12 +204,14 @@ function RailDestination({
   destination,
   linkComponent,
   copy,
-  testId
+  testId,
+  compact
 }) {
   const { current, lit } = destinationState(destination);
   return /* @__PURE__ */ jsx(
     RailRow,
     {
+      compact,
       label: destination.label,
       icon: destination.icon,
       count: destination.badge,
@@ -204,7 +233,8 @@ function SectionNavRail({
   heading,
   linkComponent,
   copy,
-  dataTestId
+  dataTestId,
+  compact = false
 }) {
   return /* @__PURE__ */ jsxs(
     Box,
@@ -223,21 +253,40 @@ function SectionNavRail({
         bgcolor: "background.paper"
       },
       children: [
-        back ? /* @__PURE__ */ jsx(RailBack, { back, linkComponent, testId: `${dataTestId}-back` }) : null,
-        heading ? /* @__PURE__ */ jsx(RailHeading, { children: heading }) : null,
-        isMenu(primary) ? /* @__PURE__ */ jsx(RailCreateMenu, { menu: primary, linkComponent, copy, testId: `${dataTestId}-primary` }) : null,
+        back ? /* @__PURE__ */ jsx(RailBack, { back, linkComponent, testId: `${dataTestId}-back`, compact }) : null,
+        heading ? /* @__PURE__ */ jsx(RailHeading, { compact, children: heading }) : null,
+        isMenu(primary) ? /* @__PURE__ */ jsx(
+          RailCreateMenu,
+          {
+            menu: primary,
+            linkComponent,
+            copy,
+            testId: `${dataTestId}-primary`,
+            compact
+          }
+        ) : null,
         destinations.map((destination) => /* @__PURE__ */ jsx(
           RailDestination,
           {
             destination,
             linkComponent,
             copy,
-            testId: destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`
+            testId: destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`,
+            compact
           },
           destination.id
         )),
-        primary && !isMenu(primary) ? /* @__PURE__ */ jsx(RailAction, { action: primary, linkComponent, copy, testId: `${dataTestId}-primary` }) : null,
-        more ? /* @__PURE__ */ jsx(RailMenu, { menu: more, linkComponent, copy, testId: `${dataTestId}-more` }) : null
+        primary && !isMenu(primary) ? /* @__PURE__ */ jsx(
+          RailAction,
+          {
+            action: primary,
+            linkComponent,
+            copy,
+            testId: `${dataTestId}-primary`,
+            compact
+          }
+        ) : null,
+        more ? /* @__PURE__ */ jsx(RailMenu, { menu: more, linkComponent, copy, testId: `${dataTestId}-more`, compact }) : null
       ]
     }
   );
@@ -246,4 +295,4 @@ function SectionNavRail({
 export {
   SectionNavRail
 };
-//# sourceMappingURL=chunk-OBGUD2PG.js.map
+//# sourceMappingURL=chunk-SNWCT6JN.js.map

package/dist/chunk-SNWCT6JN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"sourcesContent":["import ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport type { ElementType, ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { destinationState, isMenu } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  VISUALLY_HIDDEN,\n  controlProps,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RailCreateMenu } from './SectionNav.railCreate';\nimport type {\n  SectionNavAction,\n  SectionNavBack,\n  SectionNavDestination,\n  SectionNavMenu,\n  SectionNavProps,\n} from './SectionNav.types';\nimport type { SectionNavBadge } from './SectionNav.types';\n\n/** The row's words, stacked: the label over its description. */\nconst ROW_WORDS_SX = { display: 'flex', flexDirection: 'column', minWidth: 0 } as const;\n\n/** A rail row's look: icon and words, or the icon alone, centred, when compact. */\nfunction railRowSx(theme: Theme, active: boolean, compact: boolean): SxProps<Theme> {\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    position: compact ? 'relative' : undefined,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: compact ? 'center' : 'flex-start',\n    gap: compact ? 0 : 1.5,\n    width: '100%',\n    minHeight: rem(theme, 40),\n    px: compact ? 0 : 1.25,\n    py: 0.75,\n    borderRadius: 1,\n    textAlign: 'start',\n    color: active ? 'primary.main' : 'text.primary',\n    bgcolor: active ? 'action.selected' : 'transparent',\n    '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },\n    '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },\n    [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },\n  } as SxProps<Theme>;\n}\n\n/**\n * One rail row: icon, label, and the count at the far end.\n *\n * Destinations and menu entries draw the same row — in the rail there is room\n * for everything, so the difference between \"a place\" and \"an action\" is the\n * section it sits in, not its shape.\n *\n * `active` is the look; `current` is what `aria-current` reports, and is a\n * link's claim only — an action row that is ON says so with `aria-pressed`,\n * which arrives in `control`. Omitted, `current` follows `active`.\n */\nfunction RailRow({\n  label,\n  description,\n  icon,\n  count,\n  active,\n  current = active,\n  copy,\n  testId,\n  control,\n  loading = false,\n  compact = false,\n}: {\n  label: string;\n  description?: string;\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  active: boolean;\n  current?: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  loading?: boolean;\n  /** Icon only, centred: the label stays the row's name, out of sight, and its tooltip. */\n  compact?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-busy={loading || undefined}\n      title={compact ? label : undefined}\n      data-testid={testId}\n      sx={railRowSx(theme, active, compact)}\n    >\n      <CountedIcon\n        icon={<SlotIcon icon={icon} loading={loading} />}\n        count={count}\n        label={copy.badge}\n        attentionLabel={copy.attention}\n        testId={`${testId}-badge`}\n      />\n      <Box component=\"span\" sx={compact ? VISUALLY_HIDDEN : ROW_WORDS_SX}>\n        <Typography component=\"span\" variant=\"body2\" sx={{ fontWeight: active ? 700 : 500 }}>\n          {label}\n        </Typography>\n        {description ? (\n          <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        ) : null}\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading between the rail's sections, in the sidebar's small-caps voice. */\nfunction RailHeading({ children, compact = false }: { children: ReactNode; compact?: boolean }): React.JSX.Element {\n  return (\n    <Typography\n      variant=\"overline\"\n      color=\"text.secondary\"\n      sx={compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 1.5, lineHeight: 1.6 }}\n    >\n      {children}\n    </Typography>\n  );\n}\n\n/**\n * The `more` menu's groups, listed under its title — the rail has room for the\n * places it holds. A `disabled` menu has no trigger here to refuse, so every\n * row of it is inert instead. (`primary` folds behind one button instead —\n * `RailCreateMenu`.)\n */\nfunction RailMenu({\n  menu,\n  linkComponent,\n  copy,\n  testId,\n  compact,\n}: {\n  menu: SectionNavMenu;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  compact: boolean;\n}): React.JSX.Element {\n  return (\n    <Box component=\"section\" data-testid={testId} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      <RailHeading compact={compact}>{menu.title}</RailHeading>\n      {menu.groups.map((group) => (\n        <Box key={group.id} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {group.title ? (\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={compact ? VISUALLY_HIDDEN : { px: 1.25, pt: 0.5 }}>\n              {group.title}\n            </Typography>\n          ) : null}\n          {group.entries.map((entry) => (\n            <RailRow\n              key={entry.id}\n              label={entry.label}\n              description={entry.description}\n              icon={entry.icon}\n              count={entry.badge}\n              active={entry.active === true}\n              compact={compact}\n              copy={copy}\n              testId={entry.dataTestId ?? `${testId}-entry-${entry.id}`}\n              control={controlProps({\n                href: entry.href,\n                linkComponent,\n                inert: menu.disabled === true || entry.disabled === true,\n                onClick: () => entry.onSelect?.(),\n              })}\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/** The way back out of the section, at the top of the rail. */\nfunction RailBack({\n  back,\n  linkComponent,\n  testId,\n  compact,\n}: {\n  back: SectionNavBack;\n  linkComponent: ElementType | undefined;\n  testId: string;\n  compact: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...controlProps({ href: back.href, linkComponent })}\n      title={compact ? back.label : undefined}\n      data-testid={testId}\n      sx={{\n        ...CONTROL_RESET,\n        ...focusRing(theme),\n        position: compact ? 'relative' : undefined,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: compact ? 'center' : 'flex-start',\n        gap: compact ? 0 : 1,\n        minHeight: compact ? rem(theme, 40) : undefined,\n        px: compact ? 0 : 1.25,\n        py: 0.75,\n        mb: 0.5,\n        borderRadius: 1,\n        color: 'text.secondary',\n        '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },\n        '& svg': { fontSize: rem(theme, 20) },\n      }}\n    >\n      {/* Compact, the icon is all that is drawn: a back with none gets the arrow. */}\n      {back.icon ?? (compact ? <ArrowBackIcon aria-hidden /> : null)}\n      <Typography component=\"span\" variant=\"body2\" sx={compact ? VISUALLY_HIDDEN : { fontWeight: 600 }}>\n        {back.label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** A primary that ACTS, as one row: there is no sheet to list on a wide screen. */\nfunction RailAction({\n  action,\n  linkComponent,\n  copy,\n  testId,\n  compact,\n}: {\n  action: SectionNavAction;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  compact: boolean;\n}): React.JSX.Element {\n  return (\n    <RailRow\n      compact={compact}\n      label={action.label}\n      icon={action.icon}\n      count={undefined}\n      active={false}\n      copy={copy}\n      testId={action.dataTestId ?? testId}\n      loading={action.loading === true}\n      control={controlProps({\n        href: undefined,\n        linkComponent,\n        inert: action.disabled === true,\n        busy: action.loading === true,\n        onClick: action.onSelect,\n      })}\n    />\n  );\n}\n\n/** A destination as a row: a link, or an action (a toggle when it carries `active`). */\nfunction RailDestination({\n  destination,\n  linkComponent,\n  copy,\n  testId,\n  compact,\n}: {\n  destination: SectionNavDestination;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  compact: boolean;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <RailRow\n      compact={compact}\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      active={lit}\n      current={current}\n      copy={copy}\n      testId={testId}\n      loading={destination.loading === true}\n      control={destinationControl(destination, linkComponent, () => destination.onSelect?.())}\n    />\n  );\n}\n\n/**\n * The wide-screen layout: a vertical rail — the way back, the heading, a\n * `primary` menu as one button that opens it (FUT-3015), the destinations, a\n * `primary` action as a row, then `more` listed in full.\n *\n * It fills the column the host gives it and scrolls on its own, like the\n * sidebar it stands in for. `compact` draws every row as its icon for a\n * column 64px wide; the words stay the rows' names.\n */\nexport function SectionNavRail({\n  label,\n  destinations,\n  primary,\n  more,\n  back,\n  heading,\n  linkComponent,\n  copy,\n  dataTestId,\n  compact = false,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading' | 'compact'> & {\n    linkComponent: ElementType | undefined;\n  }): React.JSX.Element {\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={label}\n      data-testid={dataTestId}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 0.25,\n        height: '100%',\n        overflowY: 'auto',\n        px: 1,\n        py: 1.5,\n        bgcolor: 'background.paper',\n      }}\n    >\n      {back ? (\n        <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} compact={compact} />\n      ) : null}\n      {heading ? <RailHeading compact={compact}>{heading}</RailHeading> : null}\n      {isMenu(primary) ? (\n        <RailCreateMenu\n          menu={primary}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary`}\n          compact={compact}\n        />\n      ) : null}\n      {destinations.map((destination) => (\n        <RailDestination\n          key={destination.id}\n          destination={destination}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}\n          compact={compact}\n        />\n      ))}\n      {primary && !isMenu(primary) ? (\n        <RailAction\n          action={primary}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary`}\n          compact={compact}\n        />\n      ) : null}\n      {more ? (\n        <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} compact={compact} />\n      ) : null}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,9 +2,8 @@ import {
   Box,
   CONTROL_RESET,
   NOT_LIVE,
-  SlotIcon,
-  focusRing
-} from "./chunk-WP7KPWCP.js";
+  SlotIcon
+} from "./chunk-24HHUCWB.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -20,6 +19,7 @@ function RaisedActionButton({
   open,
   closeLabel,
   captioned = false,
+  compact = false,
   disabled = false,
   loading = false,
   dataTestId = "raised-action"
@@ -44,18 +44,26 @@ function RaisedActionButton({
             component: "button",
             type: "button",
             ...raisedState({ onClick, disabled, loading }),
-            "aria-label": expanded && closeLabel ? closeLabel : label,
+            ...raisedNames({ label, closeLabel, expanded, compact }),
             "aria-expanded": open,
             "data-testid": dataTestId,
-            sx: raisedSx(theme, expanded),
+            sx: raisedSx(theme, expanded, compact),
             children: /* @__PURE__ */ jsx(SlotIcon, { icon, loading })
           }
         ),
-        captioned ? /* @__PURE__ */ jsx(RaisedCaption, { label, inert: disabled || loading }) : null
+        /* @__PURE__ */ jsx(RaisedCaption, { shown: captioned && !compact, label, inert: disabled || loading })
       ]
     }
   );
 }
+function raisedNames({
+  label,
+  closeLabel,
+  expanded,
+  compact
+}) {
+  return { "aria-label": expanded && closeLabel ? closeLabel : label, title: compact ? label : void 0 };
+}
 function raisedState({
   onClick,
   disabled,
@@ -69,7 +77,8 @@ function raisedState({
     "aria-busy": loading || void 0
   };
 }
-function RaisedCaption({ label, inert }) {
+function RaisedCaption({ shown, label, inert }) {
+  if (!shown) return null;
   return /* @__PURE__ */ jsx(
     Typography,
     {
@@ -81,15 +90,22 @@ function RaisedCaption({ label, inert }) {
     }
   );
 }
-function raisedSx(theme, expanded) {
-  const size = rem(theme, 52);
+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 {
     ...CONTROL_RESET,
-    ...focusRing(theme),
+    // The ring OUTSIDE the button: the shared ring sits inside the box, in the
+    // primary colour, where this button's own fill swallowed it whole.
+    "&:focus-visible": { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },
     width: size,
     height: size,
     // Lifted half out of the bar: the one control that is not a place.
-    marginTop: rem(theme, -18),
+    marginTop: rem(theme, -raisedLift(compact)),
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
@@ -99,7 +115,7 @@ function raisedSx(theme, expanded) {
     boxShadow: theme.shadows[6],
     [NOT_LIVE]: { cursor: "default", bgcolor: "action.disabledBackground", color: "text.disabled", boxShadow: "none" },
     "& svg": {
-      fontSize: rem(theme, 26),
+      fontSize: rem(theme, compact ? 22 : 26),
       transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shorter }),
       transform: expanded ? "rotate(45deg)" : "none"
     },
@@ -108,6 +124,9 @@ function raisedSx(theme, expanded) {
 }
 
 export {
-  RaisedActionButton
+  RaisedActionButton,
+  RAISED_LIFT,
+  RAISED_LIFT_COMPACT,
+  raisedLift
 };
-//# sourceMappingURL=chunk-VI2IXBOO.js.map
+//# sourceMappingURL=chunk-UKUGSU3Y.js.map

package/dist/chunk-UKUGSU3Y.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 } 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":[]}