@12-apps/ui 6.50.0 → 6.51.0

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

@@ -31,10 +31,13 @@ screen.
 - **layout**: `'bar' | 'rail'`.
 - **label**: the navigation landmark's accessible name.
 - **destinations**: `SectionNavDestination[]`, each with `id`, `label`, `icon`,
-  `href`, `badge?` and `active?`.
-- **primary**: a `SectionNavMenu` (`label`, `icon`, `title`, `groups`). In the
-  bar it is the raised button, whose name becomes `copy.close` while its sheet
-  is open.
+  `href` OR `onSelect`, `badge?`, `active?`, `disabled?`, `dimmed?`,
+  `loading?` and `dataTestId?`.
+- **primary**: a `SectionNavMenu` (`label`, `icon`, `title`, `groups`) or a
+  `SectionNavAction` (`label`, `icon`, `onSelect`, `disabled?`, `loading?`). In
+  the bar it is the raised button. A menu opens its sheet, and the button's name
+  becomes `copy.close` while it is open. An action runs on tap and its label is
+  drawn under the button.
 - **more**: a `SectionNavMenu`. In the bar it is the last slot, and its badge
   is the sum of its entries' badges.
 - **back**, **heading**: the rail only.
@@ -48,6 +51,36 @@ screen.
   named packs; `SECTION_NAV_COPY` is the locale pack.
 - **dataTestId**: the prefix for every test id (`section-nav`).
 
+## A bar of verbs
+
+The same bar pins a SCREEN's actions at its foot: give destinations an
+`onSelect` instead of an `href`, and `primary` a `SectionNavAction`. A bar of
+places and a bar of verbs are one component, so they cannot drift into two
+looks one tap apart.
+
+- `disabled` draws the slot dimmed and makes it a native disabled button, even
+  when it carries an `href`: a link cannot be disabled, and one that looks
+  dimmed but still navigates is a lie. A tap does nothing; `onSelect` is not
+  called.
+- `dimmed` is for an act the screen cannot do now but should EXPLAIN when
+  tapped. It is drawn exactly like `disabled` (the `text.disabled` colour) and
+  reports `aria-disabled="true"`, but it is NOT natively disabled: it stays
+  focusable, its `onSelect` still fires, and the host answers with a message
+  (why not, and what would make it possible). It is never lit.
+- `loading` replaces the icon with a spinner and reports `aria-busy` and
+  `aria-disabled="true"` until the write it started answers. It stays
+  focusable, so the keyboard keeps its place, and a tap is ignored. The same
+  holds for a loading action `primary`. Native `disabled` is used only for
+  `disabled`.
+- `active` on an action slot marks a TOGGLE that is on: it lights the slot and
+  reports `aria-pressed="true"` (`false` when `active: false`). Only a link
+  reports `aria-current="page"`; an action is not a page.
+- A menu entry, and a whole menu, can be `disabled` too. In the bar a disabled
+  menu's trigger is inert and opens no sheet; in the rail, where the menu is
+  listed rather than behind a trigger, every row of it is inert.
+- `dataTestId` on a destination, entry, action or menu replaces the id the nav
+  would derive, for a host whose suites already drive their own.
+
 A menu's **groups** carry `entries`. Each entry has an `href` (a link) or an
 `onSelect` (an action). `layout: 'grid'` draws three tiles across in the sheet;
 `list` (the default) draws one row per entry with its `description`. Choosing
@@ -81,6 +114,9 @@ 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
+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,4 +1,5 @@
 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';
 
@@ -6,6 +7,7 @@ import { rem } from '../../../tokens/scales';
 import { Badge } from '../../data-display/Badge';
 
 import { shownCount } from './SectionNav.helpers';
+import type { SectionNavDestination } from './SectionNav.types';
 
 /**
  * An icon with its count on the shoulder.
@@ -59,21 +61,76 @@ export function focusRing(theme: Theme): SxProps<Theme> {
  * `href`, a button for an `onSelect`.
  *
  * Returned as props for a `Box`, so the control stays ONE interactive
- * element — never a button wrapped around a link.
+ * element — never a button wrapped around a link. Whatever it would lead to,
+ * a control that is not live is a BUTTON: a link cannot be disabled, and one
+ * that looks dimmed but still navigates is the lie this rules out.
+ *
+ * - `inert` — a native `disabled` button: no focus, no click.
+ * - `busy` — a write is in flight: `aria-disabled`, still focusable, and the
+ *   click is dropped, so the keyboard keeps its place until the write answers.
+ * - `dimmed` — `aria-disabled`, still focusable, and the click STILL runs, so
+ *   the host can explain why the act cannot be done now.
  */
 export function controlProps({
   href,
   onClick,
   linkComponent,
+  inert = false,
+  busy = false,
+  dimmed = false,
 }: {
   href: string | undefined;
   onClick?: () => void;
   linkComponent: ElementType | undefined;
+  inert?: boolean;
+  busy?: boolean;
+  dimmed?: boolean;
 }): Record<string, unknown> {
+  if (inert) return { component: 'button', type: 'button', disabled: true };
+  if (busy) return { component: 'button', type: 'button', 'aria-disabled': 'true' };
+  if (dimmed) return { component: 'button', type: 'button', 'aria-disabled': 'true', onClick };
   if (href !== undefined) return { component: linkComponent ?? 'a', href, onClick };
   return { component: 'button', type: 'button', onClick };
 }
 
+/**
+ * A destination's control: `controlProps` from its own state, plus
+ * `aria-pressed` when it is an action slot that is a toggle. A link reports
+ * where the viewer is through `aria-current` instead — the row draws that.
+ */
+export function destinationControl(
+  destination: SectionNavDestination,
+  linkComponent: ElementType | undefined,
+  onClick: () => void,
+): Record<string, unknown> {
+  return {
+    ...controlProps({
+      href: destination.href,
+      linkComponent,
+      inert: destination.disabled === true,
+      busy: destination.loading === true,
+      dimmed: destination.dimmed === true,
+      onClick,
+    }),
+    'aria-pressed': destination.href === undefined ? destination.active : undefined,
+  };
+}
+
+/**
+ * The selector for a control drawn as not live: natively disabled, or
+ * `aria-disabled` (in flight, or dimmed) and still focusable.
+ */
+export const NOT_LIVE = '&:disabled, &[aria-disabled="true"]';
+
+/**
+ * The icon, or the spinner that stands in for it while the slot's write is in
+ * flight — the same box, so the label under it does not move.
+ */
+export function SlotIcon({ icon, loading }: { icon: ReactNode; loading: boolean }): React.JSX.Element {
+  if (!loading) return <>{icon}</>;
+  return <CircularProgress size="1em" color="inherit" thickness={5} data-testid="section-nav-spinner" />;
+}
+
 /** The base reset every clickable in the nav shares: no underline, no button chrome. */
 export const CONTROL_RESET = {
   border: 0,
@@ -83,6 +140,7 @@ export const CONTROL_RESET = {
   textDecoration: 'none',
   cursor: 'pointer',
   margin: 0,
+  [NOT_LIVE]: { cursor: 'default' },
 } as const;
 
 export { Box };

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

@@ -1,12 +1,17 @@
-import { useTheme } from '@mui/material/styles/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import type { ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, focusRing } from './SectionNav.parts';
+import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';
 
 export interface RaisedActionButtonProps {
-  /** The button's accessible name — it has no visible label. */
+  /**
+   * The button's accessible name. Drawn under the button only when
+   * `captioned`; the caption is hidden from assistive tech, so the name is
+   * read once either way.
+   */
   label: string;
   icon: ReactNode;
   onClick: () => void;
@@ -18,6 +23,19 @@ export interface RaisedActionButtonProps {
   open?: boolean;
   /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */
   closeLabel?: string;
+  /**
+   * Draw `label` under the button. A bar of VERBS names the act it is for; a
+   * bar of places can leave its one action to the icon.
+   */
+  captioned?: boolean;
+  /** Dimmed and not operable: a native `disabled` button. */
+  disabled?: boolean;
+  /**
+   * A write it started is in flight: a spinner replaces the icon, it reports
+   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,
+   * so the keyboard does not lose its place while the write answers.
+   */
+  loading?: boolean;
   dataTestId?: string;
 }
 
@@ -26,8 +44,9 @@ export interface RaisedActionButtonProps {
  * the row that is an ACTION rather than a place.
  *
  * Lifted half out of the bar so it reads as different in kind from the tabs
- * beside it, and unlabelled so it costs the row less width than a tab: that
- * width is what lets a bar keep four labelled tabs AND this button at 320px.
+ * beside it. Uncaptioned it costs the row less width than a tab: that width is
+ * what lets a bar keep four labelled tabs AND this button at 320px. A bar of
+ * verbs captions it, naming the act under the button.
  *
  * `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.
@@ -38,44 +57,102 @@ export function RaisedActionButton({
   onClick,
   open,
   closeLabel,
+  captioned = false,
+  disabled = false,
+  loading = false,
   dataTestId = 'raised-action',
 }: RaisedActionButtonProps): React.JSX.Element {
   const theme = useTheme();
-  const size = rem(theme, 52);
   const expanded = open === true;
   return (
-    <Box sx={{ flex: 'none', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', px: 0.5 }}>
+    <Box
+      sx={{
+        flex: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        px: 0.5,
+      }}
+    >
       <Box
         component="button"
         type="button"
-        onClick={onClick}
+        {...raisedState({ onClick, disabled, loading })}
         aria-label={expanded && closeLabel ? closeLabel : label}
         aria-expanded={open}
         data-testid={dataTestId}
-        sx={{
-          ...CONTROL_RESET,
-          ...focusRing(theme),
-          width: size,
-          height: size,
-          // Lifted half out of the bar: the one control that is not a place.
-          marginTop: rem(theme, -18),
-          borderRadius: '50%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          bgcolor: 'primary.main',
-          color: 'primary.contrastText',
-          boxShadow: theme.shadows[6],
-          '& svg': {
-            fontSize: rem(theme, 26),
-            transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),
-            transform: expanded ? 'rotate(45deg)' : 'none',
-          },
-          '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },
-        }}
+        sx={raisedSx(theme, expanded)}
       >
-        {icon}
+        <SlotIcon icon={icon} loading={loading} />
       </Box>
+      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}
     </Box>
   );
 }
+
+/**
+ * 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.
+ */
+function raisedState({
+  onClick,
+  disabled,
+  loading,
+}: {
+  onClick: () => void;
+  disabled: boolean;
+  loading: boolean;
+}): Record<string, unknown> {
+  const busy = loading && !disabled;
+  return {
+    onClick: busy ? undefined : onClick,
+    disabled,
+    'aria-disabled': busy ? 'true' : undefined,
+    'aria-busy': loading || undefined,
+  };
+}
+
+/**
+ * The label under a captioned button. 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 {
+  return (
+    <Typography
+      component="span"
+      variant="caption"
+      aria-hidden
+      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}
+    >
+      {label}
+    </Typography>
+  );
+}
+
+/** 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);
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    width: size,
+    height: size,
+    // Lifted half out of the bar: the one control that is not a place.
+    marginTop: rem(theme, -18),
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    bgcolor: 'primary.main',
+    color: 'primary.contrastText',
+    boxShadow: theme.shadows[6],
+    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },
+    '& svg': {
+      fontSize: rem(theme, 26),
+      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),
+      transform: expanded ? 'rotate(45deg)' : 'none',
+    },
+    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },
+  } as SxProps<Theme>;
+}

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

@@ -5,8 +5,24 @@ import type { ElementType, ReactNode } from 'react';
 import type { SectionNavCopy } from '../../../copy';
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';
-import type { SectionNavMenu, SectionNavProps } from './SectionNav.types';
+import { destinationState, isMenu } from './SectionNav.helpers';
+import {
+  Box,
+  CONTROL_RESET,
+  CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
+  controlProps,
+  destinationControl,
+  focusRing,
+} from './SectionNav.parts';
+import type {
+  SectionNavAction,
+  SectionNavBack,
+  SectionNavDestination,
+  SectionNavMenu,
+  SectionNavProps,
+} from './SectionNav.types';
 
 /**
  * One rail row: icon, label, and the count at the far end.
@@ -14,6 +30,10 @@ import type { SectionNavMenu, SectionNavProps } from './SectionNav.types';
  * Destinations and menu entries draw the same row — in the rail there is room
  * for everything, so the difference between "a place" and "an action" is the
  * section it sits in, not its shape.
+ *
+ * `active` is the look; `current` is what `aria-current` reports, and is a
+ * link's claim only — an action row that is ON says so with `aria-pressed`,
+ * which arrives in `control`. Omitted, `current` follows `active`.
  */
 function RailRow({
   label,
@@ -21,24 +41,29 @@ function RailRow({
   icon,
   count,
   active,
+  current = active,
   copy,
   testId,
   control,
+  loading = false,
 }: {
   label: string;
   description?: string;
   icon: ReactNode;
   count: number | undefined;
   active: boolean;
+  current?: boolean;
   copy: SectionNavCopy;
   testId: string;
   control: Record<string, unknown>;
+  loading?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   return (
     <Box
       {...control}
-      aria-current={active ? 'page' : undefined}
+      aria-current={current ? 'page' : undefined}
+      aria-busy={loading || undefined}
       data-testid={testId}
       sx={{
         ...CONTROL_RESET,
@@ -56,9 +81,15 @@ function RailRow({
         bgcolor: active ? 'action.selected' : 'transparent',
         '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
         '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },
+        [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
-      <CountedIcon icon={icon} count={count} label={copy.badge} testId={`${testId}-badge`} />
+      <CountedIcon
+        icon={<SlotIcon icon={icon} loading={loading} />}
+        count={count}
+        label={copy.badge}
+        testId={`${testId}-badge`}
+      />
       <Box component="span" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
         <Typography component="span" variant="body2" sx={{ fontWeight: active ? 700 : 500 }}>
           {label}
@@ -82,7 +113,11 @@ function RailHeading({ children }: { children: ReactNode }): React.JSX.Element {
   );
 }
 
-/** A menu's groups, listed under its title — nothing folded away on a wide screen. */
+/**
+ * A menu's groups, listed under its title — nothing folded away on a wide
+ * screen. A `disabled` menu has no trigger here to refuse, so every row of it
+ * is inert instead.
+ */
 function RailMenu({
   menu,
   linkComponent,
@@ -113,8 +148,13 @@ function RailMenu({
               count={entry.badge}
               active={entry.active === true}
               copy={copy}
-              testId={`${testId}-entry-${entry.id}`}
-              control={controlProps({ href: entry.href, linkComponent, onClick: () => entry.onSelect?.() })}
+              testId={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
+              control={controlProps({
+                href: entry.href,
+                linkComponent,
+                inert: menu.disabled === true || entry.disabled === true,
+                onClick: () => entry.onSelect?.(),
+              })}
             />
           ))}
         </Box>
@@ -123,6 +163,104 @@ function RailMenu({
   );
 }
 
+/** The way back out of the section, at the top of the rail. */
+function RailBack({
+  back,
+  linkComponent,
+  testId,
+}: {
+  back: SectionNavBack;
+  linkComponent: ElementType | undefined;
+  testId: string;
+}): React.JSX.Element {
+  const theme = useTheme();
+  return (
+    <Box
+      {...controlProps({ href: back.href, linkComponent })}
+      data-testid={testId}
+      sx={{
+        ...CONTROL_RESET,
+        ...focusRing(theme),
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        px: 1.25,
+        py: 0.75,
+        mb: 0.5,
+        borderRadius: 1,
+        color: 'text.secondary',
+        '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },
+        '& svg': { fontSize: rem(theme, 20) },
+      }}
+    >
+      {back.icon}
+      <Typography component="span" variant="body2" sx={{ fontWeight: 600 }}>
+        {back.label}
+      </Typography>
+    </Box>
+  );
+}
+
+/** A primary that ACTS, as one row: there is no sheet to list on a wide screen. */
+function RailAction({
+  action,
+  linkComponent,
+  copy,
+  testId,
+}: {
+  action: SectionNavAction;
+  linkComponent: ElementType | undefined;
+  copy: SectionNavCopy;
+  testId: string;
+}): React.JSX.Element {
+  return (
+    <RailRow
+      label={action.label}
+      icon={action.icon}
+      count={undefined}
+      active={false}
+      copy={copy}
+      testId={action.dataTestId ?? testId}
+      loading={action.loading === true}
+      control={controlProps({
+        href: undefined,
+        linkComponent,
+        inert: action.disabled === true,
+        busy: action.loading === true,
+        onClick: action.onSelect,
+      })}
+    />
+  );
+}
+
+/** A destination as a row: a link, or an action (a toggle when it carries `active`). */
+function RailDestination({
+  destination,
+  linkComponent,
+  copy,
+  testId,
+}: {
+  destination: SectionNavDestination;
+  linkComponent: ElementType | undefined;
+  copy: SectionNavCopy;
+  testId: string;
+}): React.JSX.Element {
+  const { current, lit } = destinationState(destination);
+  return (
+    <RailRow
+      label={destination.label}
+      icon={destination.icon}
+      count={destination.badge}
+      active={lit}
+      current={current}
+      copy={copy}
+      testId={testId}
+      loading={destination.loading === true}
+      control={destinationControl(destination, linkComponent, () => destination.onSelect?.())}
+    />
+  );
+}
+
 /**
  * The wide-screen layout: a vertical rail — the way back, the destinations,
  * then every menu's entries.
@@ -144,7 +282,6 @@ export function SectionNavRail({
   Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {
     linkComponent: ElementType | undefined;
   }): React.JSX.Element {
-  const theme = useTheme();
   return (
     <Box
       component="nav"
@@ -161,45 +298,21 @@ export function SectionNavRail({
         bgcolor: 'background.paper',
       }}
     >
-      {back ? (
-        <Box
-          {...controlProps({ href: back.href, linkComponent })}
-          data-testid={`${dataTestId}-back`}
-          sx={{
-            ...CONTROL_RESET,
-            ...focusRing(theme),
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            px: 1.25,
-            py: 0.75,
-            mb: 0.5,
-            borderRadius: 1,
-            color: 'text.secondary',
-            '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },
-            '& svg': { fontSize: rem(theme, 20) },
-          }}
-        >
-          {back.icon}
-          <Typography component="span" variant="body2" sx={{ fontWeight: 600 }}>
-            {back.label}
-          </Typography>
-        </Box>
-      ) : null}
+      {back ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}
       {heading ? <RailHeading>{heading}</RailHeading> : null}
       {destinations.map((destination) => (
-        <RailRow
+        <RailDestination
           key={destination.id}
-          label={destination.label}
-          icon={destination.icon}
-          count={destination.badge}
-          active={destination.active === true}
+          destination={destination}
+          linkComponent={linkComponent}
           copy={copy}
-          testId={`${dataTestId}-dest-${destination.id}`}
-          control={controlProps({ href: destination.href, linkComponent })}
+          testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}
         />
       ))}
-      {primary ? (
+      {primary && !isMenu(primary) ? (
+        <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
+      ) : null}
+      {isMenu(primary) ? (
         <RailMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
       ) : null}
       {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}

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

@@ -25,13 +25,14 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
       {...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         },
       })}
       aria-current={entry.active ? 'page' : undefined}
-      data-testid={`${testId}-entry-${entry.id}`}
+      data-testid={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
       sx={{
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -48,6 +49,7 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
         bgcolor: entry.active ? 'action.selected' : 'action.hover',
         color: entry.active ? 'primary.main' : 'text.primary',
         '& svg': { color: 'primary.main' },
+        '&:disabled': { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
       <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />
@@ -66,13 +68,14 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
       {...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         },
       })}
       aria-current={entry.active ? 'page' : undefined}
-      data-testid={`${testId}-entry-${entry.id}`}
+      data-testid={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
       sx={{
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -87,6 +90,7 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
         textAlign: 'start',
         bgcolor: entry.active ? 'action.selected' : 'action.hover',
         '& svg': { color: 'primary.main' },
+        '&:disabled': { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
       <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />