@12-apps/ui 6.57.0 → 6.58.0

package/src/components/data-display/DataViews/base-list-card-geometry.tsx

@@ -74,8 +74,90 @@ interface RowSxOptions {
   divider: boolean;
   interactive: boolean;
   draggable: boolean;
+  /** What the two-line layout below `STACK_BREAK` has to place by name. */
+  stack: StackPlacement;
 }
 
+/**
+ * The slots the stacked row places that the named-slot rules cannot know about.
+ *
+ * For a CONFIGURED row, `firstCell` is the cell that takes the title's place and
+ * `valueCell` the one that takes the value's (null for a named-slot row, or for
+ * a one-cell row with no value to show). `expandable` decides whether the
+ * disclosure button gets a place or, when it is only a reserved empty gutter,
+ * none at all.
+ */
+export interface StackPlacement {
+  firstCell: string | null;
+  valueCell: string | null;
+  expandable: boolean;
+}
+
+/** A `[data-slot="cell-<id>"]` child selector, quoted so any id is safe. */
+const cellSlot = (id: string): string => `& > [data-slot=${JSON.stringify(`cell-${id}`)}]`;
+
+/**
+ * A configured row, stacked, keeps the SAME two facts a named-slot row keeps:
+ * what the record is (the first cell, in the title's place on line 1) and the
+ * figure it is about (the value cell, on line 2 from under the title to the
+ * right edge, where an `end` cell sits flush right). Every other cell goes, as
+ * `meta` goes — a row is a fixed-height scanning unit, and what does not fit
+ * belongs in its expandable body.
+ *
+ * Left to auto-placement these cells had flowed into whatever track was free:
+ * a name squeezed beside the glyph, an amount clipped to "R$ …".
+ *
+ * The hide-all rule comes first and the two named cells after it: the
+ * selectors have equal specificity, so the later rule wins for those cells.
+ */
+function stackedCells(stack: StackPlacement): Record<string, unknown> {
+  if (stack.firstCell == null) return {};
+  return {
+    '& > [data-slot^="cell-"]': { display: "none" },
+    [cellSlot(stack.firstCell)]: { display: "flex", gridArea: "1 / 3" },
+    ...(stack.valueCell == null ? {} : { [cellSlot(stack.valueCell)]: { display: "flex", gridArea: "2 / 3 / 3 / 5" } }),
+  };
+}
+
+/**
+ * TWO-LINE, below the point where the shared rails stop helping.
+ *
+ * The standard mobile transaction row: what the record IS on the first line,
+ * what it COSTS under it at the right edge. Better than
+ * truncating four columns into ellipses, and the reason each slot carries a
+ * `data-slot` — the placement is explicit rather than whatever order the
+ * children happen to be in.
+ *
+ *   [ select ][ leading ][ title …………… ][   menu ]
+ *   [ (disclose) ]       [ (cells) …………… ][  value ]
+ *
+ * The MENU stays in the top-right corner at every width. It is the row's
+ * one fixed landmark — an overflow that moves to the second line on a phone
+ * is an overflow nobody finds twice.
+ */
+const stackedRowSx = (inGroup: boolean, railCount: number, stack: StackPlacement): Record<string, unknown> => ({
+  gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
+  // The GROUP's track count, which a configured list sets from its cells
+  // (`cellRailCount`) — not the named-slot RAIL_COUNT, which over-spans a
+  // configured group and adds an implicit track at its end.
+  ...(inGroup ? { gridColumn: `span ${railCount}` } : {}),
+  rowGap: 0.75,
+  columnGap: 1,
+  '& > [data-slot="drag"]': { display: "none" },
+  // The disclosure button, when there is one, under the checkbox: the head of
+  // the row, where it sits at every other width — never beside the menu, where
+  // it read as an "open" arrow. A reserved empty gutter takes no place at all.
+  '& > [data-slot="disclose"]': stack.expandable ? { gridArea: "2 / 1", justifySelf: "center" } : { display: "none" },
+  '& > [data-slot="select"]': { gridArea: "1 / 1" },
+  '& > [data-slot="leading"]': { gridArea: "1 / 2" },
+  '& > [data-slot="caption"]': { gridArea: "1 / 3" },
+  '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
+  '& > [data-slot="meta"]': { display: "none" },
+  // Second line, starting under the title rather than under the checkbox.
+  '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" },
+  ...stackedCells(stack),
+});
+
 /**
  * DIVIDER COMPOSES WITH THE VARIANT — it changes the row's SHAPE, not its
  * surface.
@@ -91,7 +173,7 @@ interface RowSxOptions {
  * {@link rowStyles}.
  */
 export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown> => {
-  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
+  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable, stack } = opts;
   return {
     position: "relative",
     borderRadius: CARD_RADIUS,
@@ -103,13 +185,14 @@ export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown>
     // computed `grid-template-columns: 1222px` on a card asking for subgrid.)
     //
     // So inside a group the GROUP is the query container and the row is the
-    // subgrid; standalone, the row is both the container and its own grid.
+    // subgrid. Standalone, the row is its own grid but NOT its own container:
+    // a container query matches an ANCESTOR, never the element itself, so a
+    // row that was its own container placed its children for two lines while
+    // its own template stayed wide. A standalone card renders inside a wrapper
+    // that is the container (`BaseListCard`).
     ...(inGroup
       ? { gridColumn: `span ${railCount}`, gridTemplateColumns: "subgrid" }
-      : {
-          containerType: "inline-size",
-          gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns),
-        }),
+      : { gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns) }),
     alignItems: "center",
     // Wide enough that the meta cluster, the value and the status read as three
     // columns rather than one run of text — the complaint that started all this
@@ -128,34 +211,8 @@ export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown>
       outlineColor: "primary.main",
       outlineOffset: rem(theme, 2),
     },
-    // TWO-LINE, below the point where the shared rails stop helping.
-    //
-    // The standard mobile transaction row: what the record IS and what it COST
-    // on the first line, the supporting detail on the second. Better than
-    // truncating four columns into ellipses, and the reason each slot carries a
-    // `data-slot` — the placement is explicit rather than whatever order the
-    // children happen to be in.
-    //
-    //   [ select ][ leading ][ title …………… ][   menu ]
-    //                        [ (cells) …………… ][  value ]
-    //
-    // The MENU stays in the top-right corner at every width. It is the row's
-    // one fixed landmark — an overflow that moves to the second line on a phone
-    // is an overflow nobody finds twice.
-    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: {
-      gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
-      ...(inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {}),
-      rowGap: 0.75,
-      columnGap: 1,
-      '& > [data-slot="drag"]': { display: "none" },
-      '& > [data-slot="select"]': { gridArea: "1 / 1" },
-      '& > [data-slot="leading"]': { gridArea: "1 / 2" },
-      '& > [data-slot="caption"]': { gridArea: "1 / 3" },
-      '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
-      '& > [data-slot="meta"]': { display: "none" },
-      // Second line, starting under the title rather than under the checkbox.
-      '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" },
-    },
+    // TWO-LINE below STACK_BREAK: see {@link stackedRowSx}.
+    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: stackedRowSx(inGroup, railCount, stack),
     ...(divider
       ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" }
       : {}),
@@ -262,23 +319,39 @@ function rowSurface(
   return { ...surface, borderBottomColor: theme.palette.divider };
 }
 
+/**
+ * Which head gutters this row renders: the ones it uses, or all three when its
+ * group reserves them. The template is built from this; the three gutter slots
+ * (`base-list-card-gutters.tsx`) apply the SAME conditions on their own — keep
+ * the two in step, because a template that disagrees with the slots is exactly
+ * how cells slid two tracks.
+ */
+export function rowGutters(
+  props: BaseListCardProps,
+  shell: ReturnType<typeof useRowShell>,
+): { disclose: boolean; drag: boolean; select: boolean } {
+  const { selectable, drag, reserve } = shell;
+  return {
+    disclose: reserve || props.children != null,
+    drag: reserve || drag.draggable,
+    select: reserve || selectable,
+  };
+}
+
 export function rowStyles(
   props: BaseListCardProps,
   shell: ReturnType<typeof useRowShell>,
   cellTemplate: string | null,
+  stack: StackPlacement,
 ): Record<string, unknown> {
-  const { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  const { theme, group, drag, pad, padY, scale, acts } = shell;
   return {
     ...rowSurface(props, shell),
     ...rowSx(theme, {
       inGroup: group !== null,
       railCount: group?.railCount ?? RAIL_COUNT,
       cellTemplate,
-      gutters: {
-        disclose: reserve || props.children != null,
-        drag: reserve || drag.draggable,
-        select: reserve || selectable,
-      },
+      gutters: rowGutters(props, shell),
       metaColumns: metaShape(props).columns,
       pad,
       padY,
@@ -286,6 +359,7 @@ export function rowStyles(
       divider: props.divider ?? false,
       interactive: acts || props.href != null,
       draggable: drag.draggable && drag.handleProps === undefined,
+      stack,
     }),
   };
 }

package/src/components/data-display/DataViews/base-list-card-layout.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import { Box } from "../../../mui/Box";
+import type { BaseListCardProps } from "./base-list-card";
+import { rowGutters, type StackPlacement, type useRowShell } from "./base-list-card-geometry";
+import { cellRailsTemplate } from "./list-card-rails";
+import { cellTracks, useCellConfig, type ListCardCellConfig } from "./list-card-cells";
+
+/**
+ * WHAT SHAPE A ROW TAKES, resolved once: its cells and their template, whether
+ * it ends in the "this opens" chevron, and what its two-line form keeps.
+ *
+ * Split from the card at the file-size gate. Everything here decides; nothing
+ * here renders but the standalone container.
+ */
+
+/**
+ * Which cell config applies, and whether this row resolves its own tracks.
+ *
+ * The list's config wins over the card's: one declaration of the list's shape is
+ * the point, so a row inside a group cannot introduce a column of its own. And
+ * the template is standalone-only — inside a group the GROUP owns it and the row
+ * is subgrid over it, because a row resolving its own tracks is exactly what
+ * stops a list from lining up.
+ */
+function useResolvedCells(
+  props: BaseListCardProps,
+  inGroup: boolean,
+  gutters: { disclose: boolean; drag: boolean; select: boolean },
+): {
+  cells: readonly ListCardCellConfig<never>[] | null;
+  configured: boolean;
+  cellTemplate: string | null;
+} {
+  const groupCells = useCellConfig();
+  const cells = groupCells ?? props.cells ?? null;
+  const configured = cells != null && cells.length > 0 && props.row != null;
+  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells), gutters) : null;
+  return { cells, configured, cellTemplate };
+}
+
+/**
+ * Whether the row ends in the "this opens" chevron: it is live and leads
+ * somewhere it can actually go — a click handler, or a link the row renders.
+ * Only a named-slot row with a title renders an anchor for `href` (the caption
+ * wraps the title), so an `href` alone does not count elsewhere: a chevron on
+ * a row that cannot open is the promise the disclosure chevron's docblock
+ * warns about. Not when the row expands either:
+ * the disclosure chevron already speaks, and a second arrow meaning something
+ * else beside it would contradict it.
+ */
+function rowOpens(
+  props: BaseListCardProps,
+  shell: ReturnType<typeof useRowShell>,
+  configured: boolean,
+  expandable: boolean,
+): boolean {
+  if (expandable) return false;
+  // The named-slot caption renders its anchor only around a title.
+  return shell.acts || (shell.actionable && props.href != null && props.title != null && !configured);
+}
+
+/**
+ * The cell that takes the VALUE's place when the row stacks: the one the config
+ * marks `strong` ("the figure the row is really about"), else the last — as
+ * long as it is not the first cell, which already holds the title's place.
+ */
+function valueCellId(cells: readonly ListCardCellConfig<never>[]): string | null {
+  const first = cells[0];
+  const candidate = cells.find((cell) => cell.strong === true && cell !== first) ?? cells[cells.length - 1];
+  return candidate != null && candidate !== first ? candidate.id : null;
+}
+
+/** Everything the row's shape depends on, resolved once. */
+export function useRowLayout(
+  props: BaseListCardProps,
+  shell: ReturnType<typeof useRowShell>,
+  expandable: boolean,
+): ReturnType<typeof useResolvedCells> & { opens: boolean; stack: StackPlacement } {
+  const resolved = useResolvedCells(props, shell.group != null, rowGutters(props, shell));
+  const cells = resolved.configured ? resolved.cells : null;
+  return {
+    ...resolved,
+    opens: rowOpens(props, shell, resolved.configured, expandable),
+    stack: {
+      firstCell: cells?.[0]?.id ?? null,
+      valueCell: cells == null ? null : valueCellId(cells),
+      expandable,
+    },
+  };
+}
+
+/**
+ * A standalone row's QUERY CONTAINER. A container query matches an ancestor,
+ * never the element itself, so the row cannot be the container its own
+ * two-line template asks about. In a group the group is the container, and the
+ * row must stay its direct child for subgrid, so no wrapper there.
+ */
+export function StandaloneContainer({ inGroup, children }: { inGroup: boolean; children: ReactNode }): React.JSX.Element {
+  if (inGroup) return <>{children}</>;
+  return <Box sx={{ containerType: "inline-size", width: "100%", minWidth: 0 }}>{children}</Box>;
+}

package/src/components/data-display/DataViews/base-list-card-slots.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import { Fragment, type ReactNode } from "react";
 
 import { DescriptionItem, type DescriptionItemProps } from "../DescriptionItem";
@@ -242,19 +243,34 @@ export function ListCardActions({
   actions,
   alwaysVisible,
   menu,
+  opens = false,
   testId,
 }: {
   actions?: ReactNode;
   alwaysVisible?: boolean;
   menu?: ReactNode;
+  /** End the row with the "this opens" chevron. */
+  opens?: boolean;
   testId: (slot: string) => string | undefined;
 }): React.JSX.Element | null {
-  if (actions == null && menu == null) return null;
+  if (actions == null && menu == null && !opens) return null;
   return (
-    // z-index 1: above the stretched link, so these stay clickable.
+    // z-index 1: above the stretched link, so these stay clickable. The box
+    // itself lets clicks through (`pointer-events: none`, re-enabled on its
+    // children): only the controls inside it are meant to catch one, and the
+    // chevron, which re-disables it, must hand its click to the row or link
+    // underneath rather than swallow it.
     <Box
       data-slot="actions"
-      sx={{ display: "flex", alignItems: "center", gap: 0.5, position: "relative", zIndex: 1 }}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        position: "relative",
+        zIndex: 1,
+        pointerEvents: "none",
+        "& > *": { pointerEvents: "auto" },
+      }}
     >
       {actions && (
         <Box
@@ -282,6 +298,31 @@ export function ListCardActions({
           {menu}
         </Box>
       )}
+      {opens && <OpenChevron testId={testId("open")} />}
+    </Box>
+  );
+}
+
+/**
+ * THE "THIS OPENS" CHEVRON, at the end of a row that leads somewhere.
+ *
+ * A row that navigates or opens a record looked exactly like a row that does
+ * nothing until a pointer hovered it, and a phone has no hover. Always visible —
+ * unlike `actions`, it is a statement about the row, not a control to reveal.
+ *
+ * Decorative to assistive tech (`aria-hidden`): the row itself is the button or
+ * the link, and already says so. It takes no click of its own for the same
+ * reason; the click falls through to the row.
+ */
+function OpenChevron({ testId }: { testId?: string }): React.JSX.Element {
+  return (
+    <Box
+      component="span"
+      aria-hidden
+      data-testid={testId}
+      sx={{ display: "flex", alignItems: "center", color: "text.secondary", pointerEvents: "none !important" }}
+    >
+      <KeyboardArrowRightIcon fontSize="small" />
     </Box>
   );
 }
@@ -293,6 +334,7 @@ export function ListCardTail({
   actions,
   actionsAlwaysVisible,
   menu,
+  opens,
   testId,
 }: {
   value?: ReactNode;
@@ -301,6 +343,7 @@ export function ListCardTail({
   actions?: ReactNode;
   actionsAlwaysVisible?: boolean;
   menu?: ReactNode;
+  opens?: boolean;
   testId: (slot: string) => string | undefined;
 }): React.JSX.Element {
   return (
@@ -319,6 +362,7 @@ export function ListCardTail({
         actions={actions}
         alwaysVisible={actionsAlwaysVisible}
         menu={menu}
+        opens={opens}
         testId={testId}
       />
     </>

package/src/components/data-display/DataViews/base-list-card.tsx

@@ -11,10 +11,10 @@ import { type CardSurfaceProps } from "./card-surface";
 import { DropIndicator } from "./data-views-drag";
 import { useDisclosure } from "./base-list-card-disclosure";
 import { actionProps, metaShape, rowStyles, useRowShell } from "./base-list-card-geometry";
+import { StandaloneContainer, useRowLayout } from "./base-list-card-layout";
 import { DiscloseSlot, DragSlot, SelectSlot } from "./base-list-card-gutters";
 import { type DataViewsDensity } from "./data-views-layout-context";
-import { cellRailsTemplate } from "./list-card-rails";
-import { ListCardCells, cellTracks, useCellConfig, type ListCardCellConfig } from "./list-card-cells";
+import { ListCardCells, type ListCardCellConfig } from "./list-card-cells";
 import {
   ListCardActions,
   ListCardCaption,
@@ -41,7 +41,16 @@ import {
  * same row renders full-bleed on a phone, in a 300px board column, and beside a
  * filter panel that opens and closes. Below `STACK_BREAK` it leaves the shared
  * rails entirely and goes two-line, which is the standard mobile transaction
- * row and beats truncating everything: title + value, then subtitle + status.
+ * row and beats truncating everything: the title (with its subtitle) on line
+ * 1, the value under it at the right edge.
+ * A CONFIGURED row keeps the same two facts — its first cell in the title's
+ * place, its `strong` (else last) cell in the value's — and drops the rest
+ * into the expandable body's job. Standalone, the card renders inside a
+ * wrapper that is the query container, since a row cannot query itself.
+ *
+ * A row that OPENS something (a click handler, or a link it renders) ends in a
+ * chevron saying so, at every width — unless it expands, where the disclosure
+ * chevron is the only arrow it carries.
  */
 
 export interface BaseListCardProps extends CardSurfaceProps {
@@ -145,33 +154,6 @@ export interface BaseListCardProps extends CardSurfaceProps {
 }
 
 
-
-
-/**
- * Which cell config applies, and whether this row resolves its own tracks.
- *
- * The list's config wins over the card's: one declaration of the list's shape is
- * the point, so a row inside a group cannot introduce a column of its own. And
- * the template is standalone-only — inside a group the GROUP owns it and the row
- * is subgrid over it, because a row resolving its own tracks is exactly what
- * stops a list from lining up.
- */
-function useResolvedCells(
-  props: BaseListCardProps,
-  inGroup: boolean,
-): {
-  cells: readonly ListCardCellConfig<never>[] | null;
-  configured: boolean;
-  cellTemplate: string | null;
-} {
-  const groupCells = useCellConfig();
-  const cells = groupCells ?? props.cells ?? null;
-  const configured = cells != null && cells.length > 0 && props.row != null;
-  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;
-  return { cells, configured, cellTemplate };
-}
-
-
 /**
  * The row's middle: either the list's configured cells, or the named slots.
  *
@@ -185,6 +167,7 @@ function RowContent({
   slot,
   actionable,
   meta,
+  opens,
 }: {
   card: BaseListCardProps;
   cells: readonly ListCardCellConfig<never>[] | null;
@@ -192,6 +175,8 @@ function RowContent({
   slot: (name: string) => string | undefined;
   actionable: boolean;
   meta: { columns: number; present: boolean };
+  /** Whether the row ends in the "this opens" chevron. */
+  opens: boolean;
 }): React.JSX.Element {
   if (configured && cells != null) {
     return (
@@ -206,6 +191,7 @@ function RowContent({
           actions={actionable ? card.actions : undefined}
           alwaysVisible={card.actionsAlwaysVisible}
           menu={card.menu}
+          opens={opens}
           testId={slot}
         />
       </>
@@ -227,6 +213,7 @@ function RowContent({
         actions={actionable ? card.actions : undefined}
         actionsAlwaysVisible={card.actionsAlwaysVisible}
         menu={card.menu}
+        opens={opens}
         testId={slot}
       />
     </>
@@ -294,46 +281,56 @@ export function BaseListCard(props: BaseListCardProps): React.JSX.Element {
   const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;
   const meta = metaShape(props);
   const disclosure = useDisclosure(props);
-  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);
+  const { cells, configured, cellTemplate, opens, stack } = useRowLayout(props, shell, disclosure.expandable);
 
   return (
-    <Card
-      variant="outlined"
-      className={props.className}
-      dataTestId={props.testId}
-      aria-label={props["aria-label"]}
-      aria-disabled={actionable ? undefined : true}
-      onContextMenu={props.onContextMenu}
-      {...(acts ? actionProps(onClick) : {})}
-      {...drag.itemProps}
-      // A PLAIN OBJECT: `Card` merges by spreading, so a function sx vanishes.
-      sx={rowStyles(props, shell, cellTemplate)}
-    >
-      {drag.dropEdge != null && <DropIndicator edge={drag.dropEdge} />}
-      <DiscloseSlot
-        expandable={disclosure.expandable}
-        expanded={disclosure.expanded}
-        reserve={reserve}
-        onToggle={disclosure.toggle}
-        controls={disclosure.regionId}
-        testId={slot("disclose")}
-      />
-      <DragSlot drag={drag} reserve={reserve} testId={slot("drag")} />
-      <SelectSlot
-        selectable={selectable}
-        selected={selected}
-        reserve={reserve}
-        onToggleSelect={props.onToggleSelect}
-        testId={slot("checkbox")}
-      />
-      <Box data-slot="leading" sx={{ display: "flex", alignItems: "center" }}>
-        {props.leading}
-      </Box>
-      <RowContent card={props} cells={cells} configured={configured} slot={slot} actionable={actionable} meta={meta} />
-      <ExpandableBody disclosure={disclosure} padY={padY} pad={pad}>
-        {props.children}
-      </ExpandableBody>
-    </Card>
+    <StandaloneContainer inGroup={shell.group != null}>
+      <Card
+        variant="outlined"
+        className={props.className}
+        dataTestId={props.testId}
+        aria-label={props["aria-label"]}
+        aria-disabled={actionable ? undefined : true}
+        onContextMenu={props.onContextMenu}
+        {...(acts ? actionProps(onClick) : {})}
+        {...drag.itemProps}
+        // A PLAIN OBJECT: `Card` merges by spreading, so a function sx vanishes.
+        sx={rowStyles(props, shell, cellTemplate, stack)}
+      >
+        {drag.dropEdge != null && <DropIndicator edge={drag.dropEdge} />}
+        <DiscloseSlot
+          expandable={disclosure.expandable}
+          expanded={disclosure.expanded}
+          reserve={reserve}
+          onToggle={disclosure.toggle}
+          controls={disclosure.regionId}
+          testId={slot("disclose")}
+        />
+        <DragSlot drag={drag} reserve={reserve} testId={slot("drag")} />
+        <SelectSlot
+          selectable={selectable}
+          selected={selected}
+          reserve={reserve}
+          onToggleSelect={props.onToggleSelect}
+          testId={slot("checkbox")}
+        />
+        <Box data-slot="leading" sx={{ display: "flex", alignItems: "center" }}>
+          {props.leading}
+        </Box>
+        <RowContent
+          card={props}
+          cells={cells}
+          configured={configured}
+          slot={slot}
+          actionable={actionable}
+          meta={meta}
+          opens={opens}
+        />
+        <ExpandableBody disclosure={disclosure} padY={padY} pad={pad}>
+          {props.children}
+        </ExpandableBody>
+      </Card>
+    </StandaloneContainer>
   );
 }
 

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -225,6 +225,13 @@ export interface DataViewsSelectionCopy {
   clearSelection: string;
   selectAll: string;
   onThisPage(count: number): string;
+  /**
+   * The toolbar's count while rows are ticked: "1 selecionado". A plural, so a
+   * function. Keep it SHORT: at 320 it shares line 1 with the clear button and
+   * has about 118px — "20 itens selecionados" (135px) wrapped and stranded the
+   * divider before it; "20 selecionados" fits.
+   */
+  selectedCount(count: number): string;
   /** One row's checkbox, which carries no visible label of its own. */
   selectRow: string;
   /**

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -16,7 +16,7 @@ import type { ListGroupConfig } from "./list-card-rails";
 import { InlineFilterControls } from "./data-views-inline-bar";
 import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-views-overflow";
 import { GridHeaderRow } from "./data-views-header-row";
-import { resolveSelectionExtra, type SelectionExtraRender } from "./data-views-selection-extra";
+import { allOnPageSelected, resolveSelectionExtra, type SelectionExtraRender } from "./data-views-selection-extra";
 import { ShellToolbar } from "./data-views-shell-toolbar";
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { DataViewExport } from "./data-views-export";
@@ -284,6 +284,7 @@ function ShellStack<T extends Record<string, unknown>>({
           rowActions={props.rowActions}
           bulkActions={props.bulkActions}
           selectionExtra={resolveSelectionExtra(props)}
+          allOnPageSelected={allOnPageSelected(c, props.getRowId)}
           toolbarRightSlot={props.toolbarRightSlot}
           compactControls={showInline && split.compactControls}
           counterHidden={showInline && split.counterHidden}

package/src/components/data-display/DataViews/data-views-selection-extra.ts

@@ -47,6 +47,15 @@ export type SelectionExtraRender<T extends Record<string, unknown>> = (
  * Returns `undefined` with nothing selected, so the toolbar renders no empty
  * slot: a widening with nothing to widen is not a control.
  */
+/** Every row the page is rendering is selected — and the page is not empty. */
+export function allOnPageSelected<T extends Record<string, unknown>>(
+  c: DataViewsController<T>,
+  getRowId: (row: T) => string | number,
+): boolean {
+  const page = c.matched;
+  return page.length > 0 && page.every((row) => c.selectedIds.has(getRowId(row)));
+}
+
 export function resolveSelectionExtra<T extends Record<string, unknown>>({
   c,
   getRowId,
@@ -61,7 +70,7 @@ export function resolveSelectionExtra<T extends Record<string, unknown>>({
   return selectionExtra({
     selectedRows: c.selectedRows,
     clearSelection: c.clearSelection,
-    allOnPageSelected: page.length > 0 && page.every((row) => c.selectedIds.has(getRowId(row))),
+    allOnPageSelected: allOnPageSelected(c, getRowId),
     pageRowCount: page.length,
   });
 }