@12-apps/ui 6.71.0 → 6.73.0

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

@@ -1,14 +1,18 @@
 import { type ElementType } from 'react';
 import { rem } from '../../../tokens/scales';
 import type { SectionNavProps } from './SectionNav.types';
+/** How the bar is drawn — `compact` is `SectionNavProps.compact`. */
+export interface SectionNavBarOptions {
+    compact?: boolean;
+}
 /**
  * The bar's full height on screen, the safe area included — where its sheets
  * stop, and what a host reserves at the foot of its content so nothing it
  * floats (a toast, a receipt) lands under the bar.
  */
-export declare function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string;
+export declare function sectionNavBarInset(theme: Parameters<typeof rem>[0], options?: SectionNavBarOptions): string;
 /** The phone layout: a bottom bar, with its menus as bottom sheets. */
-export declare function SectionNavBar({ label, destinations, primary, more, linkComponent, copy, dataTestId, }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> & Pick<SectionNavProps, 'primary' | 'more'> & {
+export declare function SectionNavBar({ label, destinations, primary, more, linkComponent, copy, dataTestId, compact, }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> & Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & {
     linkComponent: ElementType | undefined;
 }): React.JSX.Element;
 //# sourceMappingURL=SectionNav.bar.d.ts.map

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

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

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

@@ -8,9 +8,12 @@ import type { SectionNavProps } from './SectionNav.types';
  * (`linkComponent`). The nav decides only how they are drawn: the order of the
  * bar's slots, the raised primary action, the sheets, the rail's sections.
  *
+ * `compact` draws either layout as icons only, a size down, for a host that
+ * folds its chrome; the labels stay the controls' names.
+ *
  * Which layout to use is the host's call too, because the host knows what
  * else is on screen: a bar next to a sidebar is two navigations competing for
  * one glance.
  */
-export declare function SectionNav({ layout, label, destinations, primary, more, back, heading, linkComponent, copy, dataTestId, }: SectionNavProps): React.JSX.Element;
+export declare function SectionNav({ layout, label, destinations, primary, more, back, heading, linkComponent, copy, dataTestId, compact, }: SectionNavProps): React.JSX.Element;
 //# sourceMappingURL=SectionNav.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAA0B,GAC3B,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2BrC"}
+{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAA0B,EAC1B,OAAe,GAChB,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6BrC"}

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

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
-import type { ElementType, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import type { SectionNavBadge, SectionNavDestination } from './SectionNav.types';
 /**
  * An icon with its count on the shoulder.
@@ -74,5 +74,16 @@ export declare const CONTROL_RESET: {
         readonly cursor: "default";
     };
 };
+/**
+ * Out of sight, still read: a compact nav keeps each label as its control's
+ * accessible name. The same box `Label`'s `srOnly` draws.
+ */
+export declare const VISUALLY_HIDDEN: SxProps<Theme>;
+/**
+ * False on the first render, true from then on — so a fold animates when the
+ * host CHANGES `compact`, never when a page simply opens folded (which drew
+ * the labels sliding out over the neighbouring badges on every load).
+ */
+export declare function useMounted(): boolean;
 export { Box };
 //# sourceMappingURL=SectionNav.parts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpD,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEjF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,cAAc,GACf,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBpB;AAED,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAOtD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAa,EACb,IAAY,EACZ,MAAc,GACf,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAM1B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,qBAAqB,EAClC,aAAa,EAAE,WAAW,GAAG,SAAS,EACtC,OAAO,EAAE,MAAM,IAAI,GAClB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAYzB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0CAAwC,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGpG;AAED,wFAAwF;AACxF,eAAO,MAAM,aAAa;;;;;;;;;;;CAShB,CAAC;AAEX,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SectionNav.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAuB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEjF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,cAAc,GACf,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBpB;AAED,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAOtD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAa,EACb,IAAY,EACZ,MAAc,GACf,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAM1B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,qBAAqB,EAClC,aAAa,EAAE,WAAW,GAAG,SAAS,EACtC,OAAO,EAAE,MAAM,IAAI,GAClB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAYzB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0CAAwC,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGpG;AAED,wFAAwF;AACxF,eAAO,MAAM,aAAa;;;;;;;;;;;CAShB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,eAAe,gBAAa,CAAC;AAE1C;;;;GAIG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAIpC;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

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

@@ -21,6 +21,12 @@ export interface RaisedActionButtonProps {
      * bar of places can leave its one action to the icon.
      */
     captioned?: boolean;
+    /**
+     * A size down — 40px rather than 52, lifted less — for a compact bar. It
+     * draws no caption: a compact bar is icons only, and the name stays the
+     * button's `aria-label`.
+     */
+    compact?: boolean;
     /** Dimmed and not operable: a native `disabled` button. */
     disabled?: boolean;
     /**
@@ -43,5 +49,5 @@ export interface RaisedActionButtonProps {
  * `SectionNav` draws it for its `primary` menu. It is exported on its own for
  * a bar the host already draws — drop it between two tabs, in a flex row.
  */
-export declare function RaisedActionButton({ label, icon, onClick, open, closeLabel, captioned, disabled, loading, dataTestId, }: RaisedActionButtonProps): React.JSX.Element;
+export declare function RaisedActionButton({ label, icon, onClick, open, closeLabel, captioned, compact, disabled, loading, dataTestId, }: RaisedActionButtonProps): React.JSX.Element;
 //# sourceMappingURL=SectionNav.primary.d.ts.map

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

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

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

@@ -6,9 +6,10 @@ import type { SectionNavProps } from './SectionNav.types';
  * `primary` action as a row, then `more` listed in full.
  *
  * It fills the column the host gives it and scrolls on its own, like the
- * sidebar it stands in for.
+ * sidebar it stands in for. `compact` draws every row as its icon for a
+ * column 64px wide; the words stay the rows' names.
  */
-export declare function SectionNavRail({ label, destinations, primary, more, back, heading, linkComponent, copy, dataTestId, }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> & Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {
+export declare function SectionNavRail({ label, destinations, primary, more, back, heading, linkComponent, copy, dataTestId, compact, }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> & Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading' | 'compact'> & {
     linkComponent: ElementType | undefined;
 }): React.JSX.Element;
 //# sourceMappingURL=SectionNav.rail.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.rail.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAiBpD,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAkP5B;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,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,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC/D,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;CACxC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqCtB"}
+{"version":3,"file":"SectionNav.rail.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAkBpD,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAoR5B;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAe,GAChB,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC,GAAG;IAC3E,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;CACxC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsDtB"}

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

@@ -15,10 +15,12 @@ import type { SectionNavMenu } from './SectionNav.types';
  * outside click. Choosing an entry closes it too, and the entry's link or act
  * takes over.
  */
-export declare function RailCreateMenu({ menu, linkComponent, copy, testId, }: {
+export declare function RailCreateMenu({ menu, linkComponent, copy, testId, compact, }: {
     menu: SectionNavMenu;
     linkComponent: ElementType | undefined;
     copy: SectionNavCopy;
     testId: string;
+    /** The button as its icon only — the label stays its name and its tooltip. */
+    compact?: boolean;
 }): React.JSX.Element;
 //# sourceMappingURL=SectionNav.railCreate.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.railCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.railCreate.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAmB,KAAK,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAoD1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2DpB"}
+{"version":3,"file":"SectionNav.railCreate.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.railCreate.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAmB,KAAK,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAkE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,MAAM,EACN,OAAe,GAChB,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4DpB"}

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

@@ -178,5 +178,17 @@ export interface SectionNavProps {
     copy: SectionNavCopy;
     /** Prefix for every `data-testid`. Defaults to `"section-nav"`. */
     dataTestId?: string;
+    /**
+     * Icons only, a size down — for a host that folds its chrome so the content
+     * gets the screen (a "focus mode"). Every label stays its control's
+     * accessible name and `title`; nothing is removed, only drawn smaller.
+     *
+     * `bar` — 48px instead of 60, the raised button 40px instead of 52, no
+     * captions; `sectionNavBarInset(theme, { compact: true })` is its inset.
+     * `rail` — every row, the way back and the create button as their icon only,
+     * headings out of sight, for a column 64px wide (the host sets the width).
+     * Defaults to `false`.
+     */
+    compact?: boolean;
 }
 //# sourceMappingURL=SectionNav.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,iFAAiF;AACjF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,GAAG,CAAC;AAE3C;;;;;;;;GAQG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;OAOG;IACH,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IAC5C,6EAA6E;IAC7E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 export { SectionNav } from './SectionNav';
 export { sectionNavBarInset } from './SectionNav.bar';
+export type { SectionNavBarOptions } from './SectionNav.bar';
 export { RaisedActionButton } from './SectionNav.primary';
 export type { RaisedActionButtonProps } from './SectionNav.primary';
 export type { SectionNavAction, SectionNavBack, SectionNavBadge, SectionNavDestination, SectionNavEntry, SectionNavGroup, SectionNavMenu, SectionNavProps, } from './SectionNav.types';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/package.json

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

package/src/components/data-display/CardKit/CardKit.md

@@ -33,6 +33,9 @@ language shipped as a finished-looking silence:
   verbatim by a screen reader.
 - `CardActionsProvider`'s **`errorTitle`** — the one sentence the provider
   renders on its own. The message beside it comes from whatever failed.
+  An app with one toast channel passes **`onError(title, message)`** instead of
+  living with the provider's bottom snackbar: given, the provider draws
+  nothing of its own and the failure lands with every other toast.
 - Both hooks' **`confirmText`** — the verb. `ConfirmOptions` already refuses to
   default one, for the same reason: a confirm button reading "OK" tells the
   operator nothing about what is about to happen.

package/src/components/data-display/CardKit/card-actions-context.tsx

@@ -39,6 +39,7 @@ export function CardActionsProvider({
   errorTitle,
   errorDismissLabel,
   autoHideMs = 6_000,
+  onError,
   children,
 }: {
   tenantSlug: string;
@@ -55,14 +56,27 @@ export function CardActionsProvider({
   errorDismissLabel: string;
   /** How long the snackbar stays up. */
   autoHideMs?: number;
+  /**
+   * Hand a failure to the HOST's own toast channel instead of this provider's
+   * snackbar. Given, the provider draws nothing of its own: an app with one
+   * toast column (every toast in one place, in one look) passes its `toast`
+   * here, so a card's failure lands with every other toast rather than in a
+   * corner of its own. It receives the same heading and message the snackbar
+   * would have shown.
+   */
+  onError?: (title: string, message: string) => void;
   children: ReactNode;
 }): JSX.Element {
   const [error, setError] = useState<string | null>(null);
-  const notifyError = useCallback((message: string) => setError(message), []);
+  const notifyError = useCallback(
+    (message: string) => (onError ? onError(errorTitle, message) : setError(message)),
+    [onError, errorTitle],
+  );
 
   return (
     <CardActionsContext.Provider value={{ tenantSlug, onRefresh, notifyError }}>
       {children}
+      {onError === undefined && (
       <Snackbar
         open={error !== null}
         autoHideDuration={autoHideMs}
@@ -81,6 +95,7 @@ export function CardActionsProvider({
           />
         </span>
       </Snackbar>
+      )}
     </CardActionsContext.Provider>
   );
 }

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

@@ -14,6 +14,7 @@ import {
   NOT_LIVE,
   SlotIcon,
   controlProps,
+  useMounted,
   destinationControl,
   focusRing,
 } from './SectionNav.parts';
@@ -24,16 +25,24 @@ import type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionN
 /** Which of the bar's two menus is open, if any. */
 type OpenMenu = 'primary' | 'more' | null;
 
-/** The bar's height above the safe area — tall enough for an icon over a label. */
-const barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);
+/**
+ * The bar's height above the safe area — tall enough for an icon over a label;
+ * a compact bar holds the icon alone.
+ */
+const barHeight = (theme: Parameters<typeof rem>[0], compact = false): string => rem(theme, compact ? 48 : 60);
+
+/** How the bar is drawn — `compact` is `SectionNavProps.compact`. */
+export interface SectionNavBarOptions {
+  compact?: boolean;
+}
 
 /**
  * The bar's full height on screen, the safe area included — where its sheets
  * stop, and what a host reserves at the foot of its content so nothing it
  * floats (a toast, a receipt) lands under the bar.
  */
-export function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {
-  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;
+export function sectionNavBarInset(theme: Parameters<typeof rem>[0], options: SectionNavBarOptions = {}): string {
+  return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;
 }
 
 /**
@@ -62,6 +71,7 @@ function Slot({
   control,
   expanded,
   loading = false,
+  compact = false,
 }: {
   label: string;
   icon: ReactNode;
@@ -73,17 +83,21 @@ function Slot({
   control: Record<string, unknown>;
   expanded?: boolean;
   loading?: boolean;
+  /** Icon only: the label stays the slot's name, out of sight, and its tooltip. */
+  compact?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
+  const animate = useMounted();
   return (
     <Box
       {...control}
+      title={compact ? label : undefined}
       aria-current={current ? 'page' : undefined}
       aria-expanded={expanded}
       aria-busy={loading || undefined}
       data-lit={lit ? 'true' : undefined}
       data-testid={testId}
-      sx={slotSx(theme, lit)}
+      sx={slotSx(theme, lit, compact)}
     >
       <CountedIcon
         icon={
@@ -107,6 +121,7 @@ function Slot({
           lineHeight: 1.3,
           fontWeight: lit ? 700 : 600,
           color: lit ? 'text.primary' : 'inherit',
+          ...labelFoldSx(theme, compact, animate),
         }}
       >
         {label}
@@ -115,6 +130,23 @@ function Slot({
   );
 }
 
+/**
+ * The label folding away in a compact bar: it shrinks to no height and fades
+ * while the bar shrinks, rather than leaving in one frame. Never `display:
+ * none` — it is still the slot's accessible name. With reduced motion it
+ * simply goes.
+ */
+function labelFoldSx(theme: Theme, compact: boolean, animate: boolean): Record<string, unknown> {
+  return {
+    maxHeight: compact ? 0 : rem(theme, 24),
+    opacity: compact ? 0 : 1,
+    transition: animate
+      ? theme.transitions.create(['max-height', 'opacity'], { duration: theme.transitions.duration.shorter })
+      : 'none',
+    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
+  };
+}
+
 /** The pill behind a slot's icon — tinted while the slot is lit. */
 function pillSx(theme: Theme): SxProps<Theme> {
   return {
@@ -129,7 +161,7 @@ function pillSx(theme: Theme): SxProps<Theme> {
 }
 
 /** A slot's look: icon over label, a pill behind the lit icon, dimmed when disabled. */
-function slotSx(theme: Theme, lit: boolean): SxProps<Theme> {
+function slotSx(theme: Theme, lit: boolean, compact: boolean): SxProps<Theme> {
   return {
     ...CONTROL_RESET,
     ...focusRing(theme),
@@ -139,7 +171,7 @@ function slotSx(theme: Theme, lit: boolean): SxProps<Theme> {
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 0.25,
+    gap: compact ? 0 : 0.25,
     position: 'relative',
     color: lit ? 'primary.main' : 'text.secondary',
     // The current slot is marked by more than its colour: a tinted pill behind
@@ -158,6 +190,7 @@ interface SlotContext {
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   dataTestId: string;
+  compact: boolean;
 }
 
 /** The raised button: an action runs on tap; a menu opens its sheet. */
@@ -175,6 +208,7 @@ function PrimarySlot({
         label={primary.label}
         icon={primary.icon}
         captioned
+        compact={context.compact}
         disabled={primary.disabled}
         loading={primary.loading}
         dataTestId={testId}
@@ -191,6 +225,7 @@ function PrimarySlot({
       icon={primary.icon}
       open={context.open === 'primary'}
       closeLabel={context.copy.close}
+      compact={context.compact}
       disabled={primary.disabled}
       dataTestId={testId}
       onClick={() => context.toggle('primary')}
@@ -211,6 +246,7 @@ function MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContex
       expanded={open === 'more'}
       copy={context.copy}
       testId={more.dataTestId ?? `${context.dataTestId}-more`}
+      compact={context.compact}
       control={controlProps({
         href: undefined,
         linkComponent: context.linkComponent,
@@ -240,6 +276,7 @@ function DestinationSlot({
       copy={context.copy}
       testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}
       loading={destination.loading === true}
+      compact={context.compact}
       control={destinationControl(destination, context.linkComponent, () => {
         context.close();
         destination.onSelect?.();
@@ -265,6 +302,32 @@ function BarSlotView({
   return <DestinationSlot destination={slot.destination} context={context} />;
 }
 
+/** The bar's own box: docked, a hairline on top, raised over the backdrop only while its sheet is open. */
+function barSx(theme: Theme, sheetOpen: boolean, compact: boolean, animate: boolean): SxProps<Theme> {
+  return {
+    flex: 'none',
+    display: 'flex',
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    height: sectionNavBarInset(theme, { compact }),
+    // Folding to icons and back is a change of height the eye follows;
+    // with reduced motion it simply happens.
+    transition: animate ? theme.transitions.create('height', { duration: theme.transitions.duration.shorter }) : 'none',
+    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
+    paddingBottom: 'env(safe-area-inset-bottom)',
+    borderTop: `1px solid ${theme.palette.divider}`,
+    bgcolor: 'background.paper',
+    // Above the backdrop ONLY while one of its own sheets is open, so the
+    // primary button can close what it opened. Raised all the time it
+    // would sit over every dialog the page opens, and on a small phone a
+    // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
+    // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
+    // stacked sheet catches this bar's OWN sheets too.
+    position: 'relative',
+    zIndex: sheetOpen ? stackedOverlayZIndex(theme) + 1 : 'auto',
+  } as SxProps<Theme>;
+}
+
 /** The phone layout: a bottom bar, with its menus as bottom sheets. */
 export function SectionNavBar({
   label,
@@ -274,10 +337,12 @@ export function SectionNavBar({
   linkComponent,
   copy,
   dataTestId,
+  compact = false,
 }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &
-  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {
+  Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & { linkComponent: ElementType | undefined }): React.JSX.Element {
   const sheetMenu = isMenu(primary) ? primary : undefined;
   const theme = useTheme();
+  const animate = useMounted();
   const [open, setOpen] = useState<OpenMenu>(null);
   const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));
   const close = (): void => setOpen(null);
@@ -288,24 +353,7 @@ export function SectionNavBar({
         component="nav"
         aria-label={label}
         data-testid={dataTestId}
-        sx={{
-          flex: 'none',
-          display: 'flex',
-          alignItems: 'stretch',
-          boxSizing: 'border-box',
-          height: sectionNavBarInset(theme),
-          paddingBottom: 'env(safe-area-inset-bottom)',
-          borderTop: `1px solid ${theme.palette.divider}`,
-          bgcolor: 'background.paper',
-          // Above the backdrop ONLY while one of its own sheets is open, so the
-          // primary button can close what it opened. Raised all the time it
-          // would sit over every dialog the page opens, and on a small phone a
-          // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
-          // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
-          // stacked sheet catches this bar's OWN sheets too.
-          position: 'relative',
-          zIndex: open === null ? 'auto' : stackedOverlayZIndex(theme) + 1,
-        }}
+        sx={barSx(theme, open !== null, compact, animate)}
       >
         {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (
           <BarSlotView
@@ -313,7 +361,7 @@ export function SectionNavBar({
             slot={slot}
             primary={primary}
             more={more}
-            context={{ open, toggle, close, linkComponent, copy, dataTestId }}
+            context={{ open, toggle, close, linkComponent, copy, dataTestId, compact }}
           />
         ))}
       </Box>
@@ -325,7 +373,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-primary-sheet`}
-          bottomOffset={sectionNavBarInset(theme)}
+          bottomOffset={sectionNavBarInset(theme, { compact })}
         />
       ) : null}
       {more ? (
@@ -336,7 +384,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-more-sheet`}
-          bottomOffset={sectionNavBarInset(theme)}
+          bottomOffset={sectionNavBarInset(theme, { compact })}
         />
       ) : null}
     </>

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

@@ -50,6 +50,26 @@ screen.
   carries no words. `PT_BR_SECTION_NAV_COPY` and `EN_US_SECTION_NAV_COPY` are
   named packs; `SECTION_NAV_COPY` is the locale pack.
 - **dataTestId**: the prefix for every test id (`section-nav`).
+- **compact**: `boolean`, default `false`. Icons only, a size down, for a host
+  that folds its chrome so the content gets the screen. See *Compact*.
+
+## Compact
+
+`compact` draws the same navigation as icons only. Nothing is removed: every
+label stays its control's accessible name (out of sight) and its `title`
+tooltip, every count stays on its icon, every menu still opens.
+
+| `layout` | compact draws |
+|---|---|
+| `bar` | 48px instead of 60; each slot its icon, its label folding away (shrinking and fading) as the bar shrinks; the raised button 40px instead of 52, lifted less, with its label as a tooltip and no caption under an action. Height and labels animate (200ms) unless the reader asked for reduced motion. |
+| `rail` | each row, the way back (an arrow when it brings no icon) and a `primary` menu's button as their icon, centred; the heading, `more`'s title and its group titles out of sight. Made for a column 64px wide; the host sets the width. |
+
+`sectionNavBarInset(theme, { compact: true })` is the compact bar's full
+height, so a host's reserved foot follows the bar as it folds.
+
+A slot's name includes its count ("Board, 3 pending") while its tooltip is the
+label alone, so a screen reader may read the label a second time as the
+description; the tooltip is there for a pointer, which sees no words otherwise.
 
 ## A bar of verbs
 
@@ -103,8 +123,8 @@ every label is semibold.
 
 ## Docking the bar
 
-Dock the bar at the foot of a flex column. `sectionNavBarInset(theme)` is its
-full height, the phone's safe area included. Reserve it at the foot of the
+Dock the bar at the foot of a flex column. `sectionNavBarInset(theme)` (with
+`{ compact: true }` for the compact bar) is its full height, the phone's safe area included. Reserve it at the foot of the
 content, so nothing the page floats (a toast, a receipt) lands under the bar.
 
 The bar rises above a modal backdrop only while one of its OWN sheets is open,
@@ -123,7 +143,8 @@ the slot reports the sheet through `aria-expanded`.
 The raised round button on its own, for a host that already draws its own bar:
 drop it between two tabs in a flex row. Without `open` it is a plain action.
 With `captioned` its label is drawn under it, hidden from assistive tech so
-the button is named once. `disabled` is native; `loading` keeps it focusable
+the button is named once. `compact` draws it 40px rather than 52, with no
+caption. `disabled` is native; `loading` keeps it focusable
 with `aria-busy` and `aria-disabled`, and drops the click.
 With `open` it reports `aria-expanded`, takes `closeLabel` as its name, and its
 icon turns 45° while open.

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

@@ -1,9 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
-import type { ElementType, ReactNode } from 'react';
+import { useEffect, useState, type ElementType, type ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
+import { SR_ONLY_SX } from '../../form/Label/Label.styles';
 import { Badge } from '../../data-display/Badge';
 
 import { shownCount } from './SectionNav.helpers';
@@ -153,4 +154,21 @@ export const CONTROL_RESET = {
   [NOT_LIVE]: { cursor: 'default' },
 } as const;
 
+/**
+ * Out of sight, still read: a compact nav keeps each label as its control's
+ * accessible name. The same box `Label`'s `srOnly` draws.
+ */
+export const VISUALLY_HIDDEN = SR_ONLY_SX;
+
+/**
+ * False on the first render, true from then on — so a fold animates when the
+ * host CHANGES `compact`, never when a page simply opens folded (which drew
+ * the labels sliding out over the neighbouring badges on every load).
+ */
+export function useMounted(): boolean {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
 export { Box };