@12-apps/ui 6.72.0 → 6.73.1

package/components-catalog.md

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

package/dist/_internal/components/index.js

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

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

@@ -1,13 +1,15 @@
 import {
   SectionNavBar,
-  sectionNavBarInset
-} from "../../../../chunk-XS4NQ6LD.js";
-import "../../../../chunk-2STYL5PF.js";
-import "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+  sectionNavBarInset,
+  sectionNavSheetOffset
+} from "../../../../chunk-URSYEHPU.js";
+import "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-UKUGSU3Y.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";
@@ -44,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,15 +1,16 @@
 import {
   SectionNav
-} from "../../../../chunk-LWQGIN2M.js";
-import "../../../../chunk-OBGUD2PG.js";
-import "../../../../chunk-WY7FR7I4.js";
-import "../../../../chunk-XS4NQ6LD.js";
-import "../../../../chunk-2STYL5PF.js";
-import "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+} from "../../../../chunk-27F2VXS4.js";
+import "../../../../chunk-SNWCT6JN.js";
+import "../../../../chunk-ILJ3FXIC.js";
+import "../../../../chunk-URSYEHPU.js";
+import "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-UKUGSU3Y.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
 import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";

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

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

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

@@ -1,8 +1,12 @@
 import {
-  RaisedActionButton
-} from "../../../../chunk-VI2IXBOO.js";
-import "../../../../chunk-WP7KPWCP.js";
+  RAISED_LIFT,
+  RAISED_LIFT_COMPACT,
+  RaisedActionButton,
+  raisedLift
+} from "../../../../chunk-UKUGSU3Y.js";
+import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
+import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";
 import "../../../../chunk-6C5D6O3D.js";
@@ -37,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/SectionNav/SectionNav.rail.js

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

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

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

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

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

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

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

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

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

package/dist/chunk-24HHUCWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport { useEffect, useState, type ElementType, type ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\nimport { SR_ONLY_SX } from '../../form/Label/Label.styles';\nimport { Badge } from '../../data-display/Badge';\n\nimport { shownCount } from './SectionNav.helpers';\nimport type { SectionNavBadge, SectionNavDestination } from './SectionNav.types';\n\n/**\n * An icon with its count on the shoulder.\n *\n * Quiet to assistive tech on change: the count moves on a poll, and a control\n * that announces itself every minute is noise. Its NAME carries the number,\n * so it is read when the control is.\n */\nexport function CountedIcon({\n  icon,\n  count,\n  label,\n  testId,\n  attentionLabel,\n}: {\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  label: (count: number) => string;\n  testId: string;\n  /** The \"!\" badge's accessible name (`SectionNavCopy.attention`). */\n  attentionLabel?: string;\n}): React.JSX.Element {\n  if (count === '!') {\n    return (\n      <Badge content=\"!\" variant=\"count\" color=\"warning\" aria-label={attentionLabel ?? label(1)} aria-live=\"off\" data-testid={testId}>\n        {icon}\n      </Badge>\n    );\n  }\n  const shown = shownCount(count);\n  if (shown === undefined) return <>{icon}</>;\n  return (\n    // The library's corner count, in the warning role the sidebar's pill is\n    // drawn from.\n    <Badge\n      content={shown}\n      variant=\"count\"\n      color=\"warning\"\n      max={99}\n      aria-label={label(shown)}\n      aria-live=\"off\"\n      data-testid={testId}\n    >\n      {icon}\n    </Badge>\n  );\n}\n\n/** The keyboard ring every control in the nav draws, in the theme's own colour. */\nexport function focusRing(theme: Theme): SxProps<Theme> {\n  return {\n    '&:focus-visible': {\n      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n      outlineOffset: rem(theme, -2),\n    },\n  };\n}\n\n/**\n * The element an entry or destination renders as: the host's link for an\n * `href`, a button for an `onSelect`.\n *\n * Returned as props for a `Box`, so the control stays ONE interactive\n * element — never a button wrapped around a link. Whatever it would lead to,\n * a control that is not live is a BUTTON: a link cannot be disabled, and one\n * that looks dimmed but still navigates is the lie this rules out.\n *\n * - `inert` — a native `disabled` button: no focus, no click.\n * - `busy` — a write is in flight: `aria-disabled`, still focusable, and the\n *   click is dropped, so the keyboard keeps its place until the write answers.\n * - `dimmed` — `aria-disabled`, still focusable, and the click STILL runs, so\n *   the host can explain why the act cannot be done now.\n */\nexport function controlProps({\n  href,\n  onClick,\n  linkComponent,\n  inert = false,\n  busy = false,\n  dimmed = false,\n}: {\n  href: string | undefined;\n  onClick?: () => void;\n  linkComponent: ElementType | undefined;\n  inert?: boolean;\n  busy?: boolean;\n  dimmed?: boolean;\n}): Record<string, unknown> {\n  if (inert) return { component: 'button', type: 'button', disabled: true };\n  if (busy) return { component: 'button', type: 'button', 'aria-disabled': 'true' };\n  if (dimmed) return { component: 'button', type: 'button', 'aria-disabled': 'true', onClick };\n  if (href !== undefined) return { component: linkComponent ?? 'a', href, onClick };\n  return { component: 'button', type: 'button', onClick };\n}\n\n/**\n * A destination's control: `controlProps` from its own state, plus\n * `aria-pressed` when it is an action slot that is a toggle. A link reports\n * where the viewer is through `aria-current` instead — the row draws that.\n */\nexport function destinationControl(\n  destination: SectionNavDestination,\n  linkComponent: ElementType | undefined,\n  onClick: () => void,\n): Record<string, unknown> {\n  return {\n    ...controlProps({\n      href: destination.href,\n      linkComponent,\n      inert: destination.disabled === true,\n      busy: destination.loading === true,\n      dimmed: destination.dimmed === true,\n      onClick,\n    }),\n    'aria-pressed': destination.href === undefined ? destination.active : undefined,\n  };\n}\n\n/**\n * The selector for a control drawn as not live: natively disabled, or\n * `aria-disabled` (in flight, or dimmed) and still focusable.\n */\nexport const NOT_LIVE = '&:disabled, &[aria-disabled=\"true\"]';\n\n/**\n * The icon, or the spinner that stands in for it while the slot's write is in\n * flight — the same box, so the label under it does not move.\n */\nexport function SlotIcon({ icon, loading }: { icon: ReactNode; loading: boolean }): React.JSX.Element {\n  if (!loading) return <>{icon}</>;\n  return <CircularProgress size=\"1em\" color=\"inherit\" thickness={5} data-testid=\"section-nav-spinner\" />;\n}\n\n/** The base reset every clickable in the nav shares: no underline, no button chrome. */\nexport const CONTROL_RESET = {\n  border: 0,\n  background: 'none',\n  font: 'inherit',\n  color: 'inherit',\n  textDecoration: 'none',\n  cursor: 'pointer',\n  margin: 0,\n  [NOT_LIVE]: { cursor: 'default' },\n} as const;\n\n/**\n * Out of sight, still read: a compact nav keeps each label as its control's\n * accessible name. The same box `Label`'s `srOnly` draws.\n */\nexport const VISUALLY_HIDDEN = SR_ONLY_SX;\n\n/**\n * False on the first render, true from then on — so a fold animates when the\n * host CHANGES `compact`, never when a page simply opens folded (which drew\n * the labels sliding out over the neighbouring badges on every load).\n */\nexport function useMounted(): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  return mounted;\n}\n\nexport { Box };\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAE7B,SAAS,WAAW,gBAAkD;AAgChE,SAM4B,UAN5B;AAhBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,MAAI,UAAU,KAAK;AACjB,WACE,oBAAC,SAAM,SAAQ,KAAI,SAAQ,SAAQ,OAAM,WAAU,cAAY,kBAAkB,MAAM,CAAC,GAAG,aAAU,OAAM,eAAa,QACrH,gBACH;AAAA,EAEJ;AACA,QAAM,QAAQ,WAAW,KAAK;AAC9B,MAAI,UAAU,OAAW,QAAO,gCAAG,gBAAK;AACxC;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,KAAK;AAAA,QACL,cAAY,MAAM,KAAK;AAAA,QACvB,aAAU;AAAA,QACV,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA;AAEJ;AAGO,SAAS,UAAU,OAA8B;AACtD,SAAO;AAAA,IACL,mBAAmB;AAAA,MACjB,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAC7D,eAAe,IAAI,OAAO,EAAE;AAAA,IAC9B;AAAA,EACF;AACF;AAiBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,GAO4B;AAC1B,MAAI,MAAO,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,UAAU,KAAK;AACxE,MAAI,KAAM,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,OAAO;AAChF,MAAI,OAAQ,QAAO,EAAE,WAAW,UAAU,MAAM,UAAU,iBAAiB,QAAQ,QAAQ;AAC3F,MAAI,SAAS,OAAW,QAAO,EAAE,WAAW,iBAAiB,KAAK,MAAM,QAAQ;AAChF,SAAO,EAAE,WAAW,UAAU,MAAM,UAAU,QAAQ;AACxD;AAOO,SAAS,mBACd,aACA,eACA,SACyB;AACzB,SAAO;AAAA,IACL,GAAG,aAAa;AAAA,MACd,MAAM,YAAY;AAAA,MAClB;AAAA,MACA,OAAO,YAAY,aAAa;AAAA,MAChC,MAAM,YAAY,YAAY;AAAA,MAC9B,QAAQ,YAAY,WAAW;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,IACD,gBAAgB,YAAY,SAAS,SAAY,YAAY,SAAS;AAAA,EACxE;AACF;AAMO,IAAM,WAAW;AAMjB,SAAS,SAAS,EAAE,MAAM,QAAQ,GAA6D;AACpG,MAAI,CAAC,QAAS,QAAO,gCAAG,gBAAK;AAC7B,SAAO,oBAAC,oBAAiB,MAAK,OAAM,OAAM,WAAU,WAAW,GAAG,eAAY,uBAAsB;AACtG;AAGO,IAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,CAAC,QAAQ,GAAG,EAAE,QAAQ,UAAU;AAClC;AAMO,IAAM,kBAAkB;AAOxB,SAAS,aAAsB;AACpC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,YAAU,MAAM,WAAW,IAAI,GAAG,CAAC,CAAC;AACpC,SAAO;AACT;","names":[]}

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

@@ -1,9 +1,9 @@
 import {
   SectionNavRail
-} from "./chunk-OBGUD2PG.js";
+} from "./chunk-SNWCT6JN.js";
 import {
   SectionNavBar
-} from "./chunk-XS4NQ6LD.js";
+} from "./chunk-URSYEHPU.js";
 
 // src/components/navigation/SectionNav/SectionNav.tsx
 import { jsx } from "react/jsx-runtime";
@@ -17,7 +17,8 @@ function SectionNav({
   heading,
   linkComponent,
   copy,
-  dataTestId = "section-nav"
+  dataTestId = "section-nav",
+  compact = false
 }) {
   if (layout === "rail") {
     return /* @__PURE__ */ jsx(
@@ -31,7 +32,8 @@ function SectionNav({
         heading,
         linkComponent,
         copy,
-        dataTestId
+        dataTestId,
+        compact
       }
     );
   }
@@ -44,7 +46,8 @@ function SectionNav({
       more,
       linkComponent,
       copy,
-      dataTestId
+      dataTestId,
+      compact
     }
   );
 }
@@ -52,4 +55,4 @@ function SectionNav({
 export {
   SectionNav
 };
-//# sourceMappingURL=chunk-LWQGIN2M.js.map
+//# sourceMappingURL=chunk-27F2VXS4.js.map

package/dist/chunk-27F2VXS4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.tsx"],"sourcesContent":["import { SectionNavBar } from './SectionNav.bar';\nimport { SectionNavRail } from './SectionNav.rail';\nimport type { SectionNavProps } from './SectionNav.types';\n\n/**\n * A section's own navigation — the handful of screens one kind of work moves\n * between — as a bottom bar on a phone or a rail on a wide screen.\n *\n * It knows no product. The host decides every destination, label, icon,\n * count and which one is current, and renders links through its own router\n * (`linkComponent`). The nav decides only how they are drawn: the order of the\n * bar's slots, the raised primary action, the sheets, the rail's sections.\n *\n * `compact` draws either layout as icons only, a size down, for a host that\n * folds its chrome; the labels stay the controls' names.\n *\n * Which layout to use is the host's call too, because the host knows what\n * else is on screen: a bar next to a sidebar is two navigations competing for\n * one glance.\n */\nexport function SectionNav({\n  layout,\n  label,\n  destinations,\n  primary,\n  more,\n  back,\n  heading,\n  linkComponent,\n  copy,\n  dataTestId = 'section-nav',\n  compact = false,\n}: SectionNavProps): React.JSX.Element {\n  if (layout === 'rail') {\n    return (\n      <SectionNavRail\n        label={label}\n        destinations={destinations}\n        primary={primary}\n        more={more}\n        back={back}\n        heading={heading}\n        linkComponent={linkComponent}\n        copy={copy}\n        dataTestId={dataTestId}\n        compact={compact}\n      />\n    );\n  }\n  return (\n    <SectionNavBar\n      label={label}\n      destinations={destinations}\n      primary={primary}\n      more={more}\n      linkComponent={linkComponent}\n      copy={copy}\n      dataTestId={dataTestId}\n      compact={compact}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAmCM;AAfC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AACZ,GAAuC;AACrC,MAAI,WAAW,QAAQ;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

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

package/dist/chunk-ILJ3FXIC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.railCreate.tsx"],"sourcesContent":["import Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport { useId, useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { CountedIcon } from './SectionNav.parts';\nimport type { SectionNavEntry, SectionNavMenu } from './SectionNav.types';\n\n/** One entry of the open menu: a link through the host's router, or an act. */\nfunction entryItem(\n  groupId: string,\n  entry: SectionNavEntry,\n  linkComponent: ElementType | undefined,\n  copy: SectionNavCopy,\n  testId: string,\n  close: () => void,\n): ReactNode {\n  const link =\n    entry.href === undefined || entry.disabled === true\n      ? {}\n      : { component: linkComponent ?? 'a', href: entry.href };\n  const itemTestId = entry.dataTestId ?? `${testId}-entry-${entry.id}`;\n  return (\n    <MenuItem\n      key={`${groupId}:${entry.id}`}\n      {...link}\n      disabled={entry.disabled === true}\n      selected={entry.active === true}\n      aria-current={entry.active === true ? 'page' : undefined}\n      data-testid={itemTestId}\n      onClick={() => {\n        entry.onSelect?.();\n        close();\n      }}\n      sx={{ gap: 1.5, py: 1, whiteSpace: 'normal' }}\n    >\n      <ListItemIcon sx={{ minWidth: 0, color: 'primary.main' }}>\n        <CountedIcon\n          icon={entry.icon}\n          count={entry.badge}\n          label={copy.badge}\n          attentionLabel={copy.attention}\n          testId={`${itemTestId}-badge`}\n        />\n      </ListItemIcon>\n      <ListItemText\n        primary={entry.label}\n        secondary={entry.description}\n        slotProps={{\n          primary: { variant: 'body2', fontWeight: 500 },\n          secondary: { variant: 'caption' },\n        }}\n        sx={{ my: 0 }}\n      />\n    </MenuItem>\n  );\n}\n\n/** The button's icon and names: the icon in front of the label, or — compact — the icon alone, named by the label. */\nfunction createButtonForm(\n  menu: SectionNavMenu,\n  compact: boolean,\n): { startIcon: ReactNode; 'aria-label': string | undefined; title: string | undefined } {\n  if (!compact) return { startIcon: menu.icon, 'aria-label': undefined, title: undefined };\n  return { startIcon: undefined, 'aria-label': menu.label, title: menu.label };\n}\n\n/** Where the button's content sits: the label's start, or — compact — the icon centred. */\nfunction createButtonLayoutSx(compact: boolean): SxProps<Theme> {\n  return compact ? { justifyContent: 'center', minWidth: 0, px: 0 } : { justifyContent: 'flex-start', px: 1.75 };\n}\n\n/**\n * A rail's `primary` menu as ONE button at the top of the rail, opening an\n * anchored menu of its groups (FUT-3015).\n *\n * The rail lists `more` in full, but a create menu listed that way costs a\n * heading and a two-line row per entry above the fold, for acts a person takes\n * once in a while. Folded behind '+ Criar' it costs one row. The button\n * carries the menu's `label`; the open menu is named by its `title`.\n *\n * `MenuList` skips the group subheaders when the keyboard moves, and the\n * popover hands focus back to the button when it closes on Escape or an\n * outside click. Choosing an entry closes it too, and the entry's link or act\n * takes over.\n */\nexport function RailCreateMenu({\n  menu,\n  linkComponent,\n  copy,\n  testId,\n  compact = false,\n}: {\n  menu: SectionNavMenu;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  testId: string;\n  /** The button as its icon only — the label stays its name and its tooltip. */\n  compact?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  const menuId = useId();\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const open = anchor !== null;\n  const close = (): void => setAnchor(null);\n  const paperTestId: Record<string, string> = { 'data-testid': `${testId}-menu` };\n  // One flat list: MUI's MenuList walks its direct children, so a group's\n  // subheader and entries cannot sit inside a wrapper.\n  const items: ReactNode[] = menu.groups.flatMap((group) => [\n    group.title ? (\n      <ListSubheader key={`${group.id}-title`} disableSticky sx={{ lineHeight: 2.5, bgcolor: 'transparent' }}>\n        {group.title}\n      </ListSubheader>\n    ) : null,\n    ...group.entries.map((entry) => entryItem(group.id, entry, linkComponent, copy, testId, close)),\n  ]);\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        fullWidth\n        {...createButtonForm(menu, compact)}\n        disabled={menu.disabled === true}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        data-testid={menu.dataTestId ?? testId}\n        onClick={(event) => setAnchor(event.currentTarget)}\n        sx={{\n          my: 1,\n          minHeight: rem(theme, 40),\n          ...(createButtonLayoutSx(compact) as object),\n          fontWeight: 600,\n          // A place in the rail reads in sentence case, like the rows under it.\n          textTransform: 'none',\n          // The ring outside the filled button, where it can be seen.\n          '&.Mui-focusVisible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },\n        }}\n      >\n        {compact ? menu.icon : menu.label}\n      </Button>\n      <Menu\n        id={menuId}\n        anchorEl={anchor}\n        open={open}\n        onClose={close}\n        variant=\"menu\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n        slotProps={{\n          list: { 'aria-label': menu.title },\n          // A data attribute is not a declared slot prop, so it rides a spread.\n          paper: { ...paperTestId, sx: { minWidth: rem(theme, 260), maxWidth: rem(theme, 340) } },\n        }}\n      >\n        {items}\n      </Menu>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-2STYL5PF.js → chunk-NM46HQSW.js}

@@ -4,7 +4,7 @@ import {
   CountedIcon,
   controlProps,
   focusRing
-} from "./chunk-WP7KPWCP.js";
+} from "./chunk-24HHUCWB.js";
 import {
   Drawer,
   DrawerContent,
@@ -175,4 +175,4 @@ function SectionNavSheet({
 export {
   SectionNavSheet
 };
-//# sourceMappingURL=chunk-2STYL5PF.js.map
+//# sourceMappingURL=chunk-NM46HQSW.js.map