@12-apps/ui 6.72.0 → 6.73.0

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":"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"}
+{"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.72.0",
+  "version": "6.73.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

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 };

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

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';
+import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon } from './SectionNav.parts';
 
 export interface RaisedActionButtonProps {
   /**
@@ -28,6 +28,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;
   /**
@@ -58,6 +64,7 @@ export function RaisedActionButton({
   open,
   closeLabel,
   captioned = false,
+  compact = false,
   disabled = false,
   loading = false,
   dataTestId = 'raised-action',
@@ -79,18 +86,36 @@ export 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)}
       >
         <SlotIcon icon={icon} loading={loading} />
       </Box>
-      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}
+      <RaisedCaption shown={captioned && !compact} label={label} inert={disabled || loading} />
     </Box>
   );
 }
 
+/**
+ * The button's name — `closeLabel` while what it opened is open — and, on a
+ * compact bar where no word is drawn, the label as its tooltip.
+ */
+function raisedNames({
+  label,
+  closeLabel,
+  expanded,
+  compact,
+}: {
+  label: string;
+  closeLabel: string | undefined;
+  expanded: boolean;
+  compact: boolean;
+}): { 'aria-label': string; title: string | undefined } {
+  return { 'aria-label': expanded && closeLabel ? closeLabel : label, title: compact ? label : undefined };
+}
+
 /**
  * The button's operability. Only `disabled` is native: an in-flight button
  * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.
@@ -114,10 +139,11 @@ function raisedState({
 }
 
 /**
- * The label under a captioned button. Hidden from assistive tech: the button
+ * The label under a captioned button — none on a compact bar. Hidden from assistive tech: the button
  * already carries the same words as its name, and reading them twice is noise.
  */
-function RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {
+function RaisedCaption({ shown, label, inert }: { shown: boolean; label: string; inert: boolean }): React.JSX.Element | null {
+  if (!shown) return null;
   return (
     <Typography
       component="span"
@@ -131,15 +157,17 @@ function RaisedCaption({ label, inert }: { label: string; inert: boolean }): Rea
 }
 
 /** The round button: lifted half out of the bar, its icon turning while what it opened is open. */
-function raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {
-  const size = rem(theme, 52);
+function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {
+  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, compact ? -12 : -18),
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -149,7 +177,7 @@ function raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {
     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',
     },