@12-apps/ui 6.59.0 → 6.61.0

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

@@ -12,7 +12,7 @@ import {
 import { useDragItem } from "./data-views-drag";
 import { DENSITY_ROW_PADDING } from "./data-views-layout-context";
 import { RAIL_COUNT, RAIL_GAP, railsTemplateFor, useListRails } from "./list-card-rails";
-import { STACK_BREAK } from "./base-list-card-slots";
+import { COMPACT_BREAK, STACK_BREAK } from "./base-list-card-slots";
 import type { BaseListCardProps } from "./base-list-card";
 import { rem } from "../../../tokens/relative";
 
@@ -66,6 +66,8 @@ interface RowSxOptions {
   inGroup: boolean;
   railCount: number;
   cellTemplate: string | null;
+  /** A standalone configured row's template in the compact band. */
+  compactTemplate: string | null;
   gutters: { disclose: boolean; drag: boolean; select: boolean };
   metaColumns: number;
   pad: number;
@@ -173,7 +175,7 @@ const stackedRowSx = (inGroup: boolean, railCount: number, stack: StackPlacement
  * {@link rowStyles}.
  */
 export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown> => {
-  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable, stack } = opts;
+  const { inGroup, railCount, cellTemplate, compactTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable, stack } = opts;
   return {
     position: "relative",
     borderRadius: CARD_RADIUS,
@@ -211,6 +213,15 @@ export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown>
       outlineColor: "primary.main",
       outlineOffset: rem(theme, 2),
     },
+    // COMPACT below COMPACT_BREAK: half the rail gap and, standalone, the
+    // first cell's double share. In a group the GROUP's template answers the
+    // width (`list-card-group-tracks`); the gap is the row's, since a subgrid
+    // sets its own. BEFORE the stacked rule, which overrides it below
+    // STACK_BREAK by coming later.
+    [`@container (max-width: ${rem(theme, COMPACT_BREAK)})`]: {
+      columnGap: RAIL_GAP / 2,
+      ...(compactTemplate == null ? {} : { gridTemplateColumns: compactTemplate }),
+    },
     // TWO-LINE below STACK_BREAK: see {@link stackedRowSx}.
     [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: stackedRowSx(inGroup, railCount, stack),
     ...(divider
@@ -267,8 +278,10 @@ export function useRowShell(props: BaseListCardProps) {
     slot: slotTestIds(props.testId),
     drag: useDragItem(dragIdFor(props, actionable)),
     // Standalone holds no gutter open: there is no list beside it to line up
-    // with, so a reserved-but-empty rail is pure inset.
-    reserve: group?.reserveGutters ?? false,
+    // with, so a reserved-but-empty rail is pure inset. In a group every gutter
+    // renders, empty when unused, and the GROUP decides whether its track
+    // stays (`list-card-group-tracks`): the rows cannot agree among themselves.
+    reserve: group != null,
     // 1, not 1.5. The row's contents still have to line up with the toolbar
     // above them, but 12px of card padding stacked on the checkbox's own 9px
     // and an empty drag gutter's 24px read as a row indented for no reason.
@@ -320,8 +333,9 @@ function rowSurface(
 }
 
 /**
- * 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
+ * Which head gutters this row renders: the ones it uses, or all three inside a
+ * group (empty when unused; the group decides which keep a track). 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.
@@ -341,7 +355,7 @@ export function rowGutters(
 export function rowStyles(
   props: BaseListCardProps,
   shell: ReturnType<typeof useRowShell>,
-  cellTemplate: string | null,
+  templates: { cellTemplate: string | null; compactTemplate: string | null },
   stack: StackPlacement,
 ): Record<string, unknown> {
   const { theme, group, drag, pad, padY, scale, acts } = shell;
@@ -350,7 +364,7 @@ export function rowStyles(
     ...rowSx(theme, {
       inGroup: group !== null,
       railCount: group?.railCount ?? RAIL_COUNT,
-      cellTemplate,
+      ...templates,
       gutters: rowGutters(props, shell),
       metaColumns: metaShape(props).columns,
       pad,

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

@@ -31,7 +31,7 @@ import { useDataViewsCopy } from "./data-views-copy-context";
  */
 const CHECKBOX_PAD = sxRem(-9);
 
-/** The grip. Its gutter is reserved only when the list says to reserve it. */
+/** The grip. Inside a group its slot always renders, empty when unused. */
 export function DragSlot({
   drag,
   reserve,
@@ -60,7 +60,7 @@ export function DragSlot({
   );
 }
 
-/** The select checkbox. Its gutter is reserved only when the list says to. */
+/** The select checkbox. Inside a group its slot always renders, empty when unused. */
 export function SelectSlot({
   selectable,
   selected,

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

@@ -6,7 +6,7 @@ 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";
+import { cellTracks, compactCellTracks, useCellConfig, type ListCardCellConfig } from "./list-card-cells";
 
 /**
  * WHAT SHAPE A ROW TAKES, resolved once: its cells and their template, whether
@@ -33,12 +33,15 @@ function useResolvedCells(
   cells: readonly ListCardCellConfig<never>[] | null;
   configured: boolean;
   cellTemplate: string | null;
+  compactTemplate: 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 };
+  const own = configured && !inGroup;
+  const cellTemplate = own ? cellRailsTemplate(cellTracks(cells), gutters) : null;
+  const compactTemplate = own ? cellRailsTemplate(compactCellTracks(cells), gutters) : null;
+  return { cells, configured, cellTemplate, compactTemplate };
 }
 
 /**

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

@@ -10,6 +10,9 @@ import { Text } from "../../typography/Text";
 import type { Theme } from "@mui/material/styles/index.js";
 
 import { rem, sxRem } from "../../../tokens/relative";
+import { COMPACT_BREAK, META_BREAK } from "./list-card-breaks";
+
+export { COMPACT_BREAK, META_BREAK, STACK_BREAK } from "./list-card-breaks";
 
 /**
  * WHAT SITS IN EACH RAIL.
@@ -18,11 +21,6 @@ import { rem, sxRem } from "../../../tokens/relative";
  * rails and the states; this is the content of each column.
  */
 
-/** Below this the row drops its middle columns. */
-export const META_BREAK = 520;
-/** …and below this it leaves the shared rails and goes two-line. */
-export const STACK_BREAK = 360;
-
 /** Money and dates line up only if their digits are the same width. */
 const TABULAR = { fontVariantNumeric: "tabular-nums" } as const;
 
@@ -214,6 +212,8 @@ export function ListCardMeta({
  */
 const valueFlush = (theme: Theme) => ({
   marginLeft: rem(theme, -RAIL_GAP_PX),
+  // The gap it cancels is half as wide in the compact band.
+  [`@container (max-width: ${rem(theme, COMPACT_BREAK)})`]: { marginLeft: rem(theme, -RAIL_GAP_PX / 2) },
   [`@container (max-width: ${rem(theme, META_BREAK)})`]: { marginLeft: 0 },
 });
 

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

@@ -281,7 +281,7 @@ 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, opens, stack } = useRowLayout(props, shell, disclosure.expandable);
+  const { cells, configured, cellTemplate, compactTemplate, opens, stack } = useRowLayout(props, shell, disclosure.expandable);
 
   return (
     <StandaloneContainer inGroup={shell.group != null}>
@@ -295,7 +295,7 @@ export function BaseListCard(props: BaseListCardProps): React.JSX.Element {
         {...(acts ? actionProps(onClick) : {})}
         {...drag.itemProps}
         // A PLAIN OBJECT: `Card` merges by spreading, so a function sx vanishes.
-        sx={rowStyles(props, shell, cellTemplate, stack)}
+        sx={rowStyles(props, shell, { cellTemplate, compactTemplate }, stack)}
       >
         {drag.dropEdge != null && <DropIndicator edge={drag.dropEdge} />}
         <DiscloseSlot
@@ -334,4 +334,4 @@ export function BaseListCard(props: BaseListCardProps): React.JSX.Element {
   );
 }
 
-export { META_BREAK, STACK_BREAK } from "./base-list-card-slots";
+export { COMPACT_BREAK, META_BREAK, STACK_BREAK } from "./base-list-card-slots";

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

@@ -132,6 +132,13 @@ export interface DataViewsDisplayCopy {
 export interface DataViewsExportCopy {
   /** Format labels and hints, keyed by format id. */
   formats: Readonly<Record<string, { label: string; hint: string }>>;
+  /**
+   * The panel's first line: what the export will contain. The selection when
+   * there is one (`selectedCount > 0`), otherwise every row the filters leave
+   * (`totalCount`). The whole line, verb included — it was a pt-BR literal, so
+   * an en-US host read "Exportando 3 itens selecionados".
+   */
+  scopeLine(selectedCount: number, totalCount: number): string;
   visibleColumns(columnCount: number): string;
   /** The control that opens the menu. */
   trigger: string;

package/src/components/data-display/DataViews/data-views-export.tsx

@@ -75,14 +75,6 @@ interface ExportMenuProps {
   compact?: boolean;
 }
 
-/** "Exportando 214 itens filtrados" / "3 itens selecionados" — never a guess. */
-function scopeLabel(selected: number, total: number): string {
-  if (selected > 0) {
-    return `${selected} ${selected === 1 ? "item selecionado" : "itens selecionados"}`;
-  }
-  return `${total} ${total === 1 ? "item filtrado" : "itens filtrados"}`;
-}
-
 /** The trigger. Shows a spinner while the host's export is still running. */
 function ExportTrigger({
   busy,
@@ -188,7 +180,7 @@ function ExportPanel({
       <Box sx={{ px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: "divider" }}>
         <Text variant="caption" as="p">
           <Box component="span" data-testid={`${testIdPrefix}-export-scope`}>
-            Exportando {scopeLabel(selectedCount, totalCount)}
+            {copy.export.scopeLine(selectedCount, totalCount)}
           </Box>
         </Text>
         <Text variant="caption" as="p">

package/src/components/data-display/DataViews/list-card-breaks.ts

@@ -0,0 +1,21 @@
+/**
+ * THE WIDTHS A LIST ROW ANSWERS, measured on its query container (the group, or
+ * a standalone card's wrapper) — never the viewport.
+ *
+ * Their own module because both the row (`base-list-card-*`) and the group
+ * (`list-card-group-tracks`) ask the question, and the group's rails module is
+ * already a dependency of the row's slots.
+ */
+
+/**
+ * Below this the row COMPACTS: the rail gap halves, a reserved drag track no row
+ * fills leaves the template, and a configured list's first cell takes a double
+ * share. Between `STACK_BREAK` and here the row is still one line of columns,
+ * and at 24px a gap four columns wide was spending a third of a phone-sized row
+ * on air while every name ellipsised.
+ */
+export const COMPACT_BREAK = 600;
+/** Below this the row drops its middle columns. */
+export const META_BREAK = 520;
+/** …and below this it leaves the shared rails and goes two-line. */
+export const STACK_BREAK = 360;

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

@@ -64,6 +64,22 @@ export function cellTracks(cells: readonly ListCardCellConfig<never>[] | undefin
   return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);
 }
 
+/** The first cell's track in the compact band, when it left its width to us. */
+const COMPACT_FIRST_CELL_WIDTH = "minmax(0, 2fr)";
+
+/**
+ * The tracks in the COMPACT band (`COMPACT_BREAK`): the same, except that the
+ * first cell — the one that names the record — takes a double share of the
+ * spare width. Narrow, an even share left every name at "Sab…" beside a date
+ * column with room to spare. A first cell that declared its own `width` keeps
+ * it: the list asked for that track, and only the default is ours to change.
+ */
+export function compactCellTracks(cells: readonly ListCardCellConfig<never>[] | undefined): string[] {
+  return cellTracks(cells).map((track, index) =>
+    index === 0 && cells?.[0]?.width == null ? COMPACT_FIRST_CELL_WIDTH : track,
+  );
+}
+
 /**
  * The config handed down by the list.
  *

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

@@ -0,0 +1,127 @@
+"use client";
+
+import type { Theme } from "@mui/material/styles/index.js";
+import type { ReactNode } from "react";
+
+import { Box } from "../../../mui/Box";
+import { rem } from "../../../tokens/relative";
+import { COMPACT_BREAK } from "./list-card-breaks";
+
+/**
+ * A GROUP'S TRACKS, AND WHICH OF ITS HEAD GUTTERS GET ONE.
+ *
+ * Every row of a group is subgrid over one template, so the tracks cannot vary
+ * per row — but the group does not render its rows' gutters and cannot count
+ * which of them are in use. The rows answer that for it: inside a group every
+ * gutter slot renders, as an EMPTY element when the row does not use it, and
+ * the group asks with `:has()` whether any row's slot has content. A gutter no
+ * row fills loses its track (and its rail gap) and its placeholders are hidden,
+ * so auto-placement has nothing to put in the wrong column; one any row fills
+ * is a track for every row, so the list still lines up.
+ *
+ * WHICH GUTTERS MAY LEAVE:
+ *   - `reserveGutters={false}`: any of the three, at every width.
+ *   - reserved (the default): only the drag gutter, and only in the compact
+ *     band. Held open it keeps a selectable list and a read-only one aligned
+ *     and stops drag mode shifting every row; on a phone-sized row, with no
+ *     row dragging, it is a rail gap spent on nothing.
+ *
+ * Each rule names every candidate gutter, empty or filled, so exactly one rule
+ * matches a given list and none depends on another's specificity to lose.
+ */
+
+export type Gutter = "disclose" | "drag" | "select";
+
+const GUTTERS: readonly Gutter[] = ["disclose", "drag", "select"];
+
+/** A `:has()` argument true when some row's `gutter` slot has content. */
+const filled = (gutter: Gutter): string => `> * > [data-slot="${gutter}"] > *`;
+
+/** Every non-empty subset of `gutters`, in a stable order. */
+function subsets(gutters: readonly Gutter[]): Gutter[][] {
+  const out: Gutter[][] = [];
+  for (let mask = 1; mask < 1 << gutters.length; mask += 1) {
+    out.push(gutters.filter((_, index) => (mask & (1 << index)) !== 0));
+  }
+  return out;
+}
+
+/** The template for a list with `dropped` gutters, plain or compact. */
+export type GroupTemplate = (dropped: ReadonlySet<Gutter>, compact: boolean) => string;
+
+/**
+ * The rules for one width: the template with no gutter dropped, then one rule
+ * per combination of empty candidate gutters.
+ */
+function trackRules(
+  template: GroupTemplate,
+  railCount: number,
+  candidates: readonly Gutter[],
+  compact: boolean,
+): Record<string, unknown> {
+  const rules: Record<string, unknown> = { gridTemplateColumns: template(new Set(), compact) };
+  for (const empty of subsets(candidates)) {
+    const selector = candidates
+      .map((gutter) => (empty.includes(gutter) ? `:not(:has(${filled(gutter)}))` : `:has(${filled(gutter)})`))
+      .join("");
+    rules[`&${selector}`] = {
+      gridTemplateColumns: template(new Set(empty), compact),
+      // Every row spans what is left, or it adds an implicit track at the end.
+      // `> *`: every direct child of a group's grid is a row (DataViews renders
+      // them through fragments for exactly this reason).
+      "& > *": { gridColumn: `span ${railCount - empty.length}` },
+      ...Object.fromEntries(empty.map((gutter) => [`& > * > [data-slot="${gutter}"]`, { display: "none" }])),
+    };
+  }
+  return rules;
+}
+
+/** The group grid's `grid-template-columns`, at every width it answers. */
+export function groupTracksSx(
+  theme: Theme,
+  { template, railCount, reserveGutters }: { template: GroupTemplate; railCount: number; reserveGutters: boolean },
+): Record<string, unknown> {
+  return {
+    ...trackRules(template, railCount, reserveGutters ? [] : GUTTERS, false),
+    [`@container (max-width: ${rem(theme, COMPACT_BREAK)})`]: trackRules(
+      template,
+      railCount,
+      reserveGutters ? ["drag"] : GUTTERS,
+      true,
+    ),
+  };
+}
+
+/**
+ * The group's grid, inside its query container — the container for every row
+ * in it: a row cannot be one itself and a subgrid at the same time
+ * (containment drops subgrid), and every row in a list is the same width
+ * anyway, so the group is the honest place to ask the question.
+ *
+ * A WRAPPER, not the grid: a container query matches an ancestor, never the
+ * element itself, and the grid's own template has to answer the width (the
+ * compact band, `list-card-group-tracks`). The rows stay the GRID's direct
+ * children, which subgrid needs.
+ */
+export function GroupGrid({
+  dataTestId,
+  tracks,
+  rowGap,
+  children,
+}: {
+  dataTestId?: string;
+  tracks: Parameters<typeof groupTracksSx>[1];
+  rowGap: number;
+  children: ReactNode;
+}): React.JSX.Element {
+  return (
+    <Box sx={{ containerType: "inline-size", width: "100%", minWidth: 0 }}>
+      <Box
+        data-testid={dataTestId}
+        sx={(theme) => ({ display: "grid", ...groupTracksSx(theme, tracks), alignItems: "center", rowGap })}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

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

@@ -2,9 +2,9 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 
-import { Box } from "../../../mui/Box";
 import { DENSITY_ROW_PADDING, type DataViewsDensity } from "./data-views-layout-context";
-import { CellConfigProvider, cellTracks, type ListCardCellConfig } from "./list-card-cells";
+import { CellConfigProvider, cellTracks, compactCellTracks, type ListCardCellConfig } from "./list-card-cells";
+import { GroupGrid, type GroupTemplate } from "./list-card-group-tracks";
 
 /**
  * THE LIST OWNS THE COLUMNS, NOT THE ROW.
@@ -37,7 +37,11 @@ export interface ListRails {
    * as a rendering fault rather than as a row you can open.
    */
   disclose: string;
-  /** Reserved even when nothing drags: toggling drag mode must not shift the list. */
+  /**
+   * Reserved even when nothing drags: toggling drag mode must not shift the
+   * list. The one exception is the compact band (`COMPACT_BREAK`), where a drag
+   * track no row fills leaves the template (`list-card-group-tracks`).
+   */
   drag: string;
   /** Reserved even when nothing is selectable, for the same reason. */
   select: string;
@@ -108,7 +112,11 @@ export const DEFAULT_RAILS: ListRails = {
 
 export interface ListRailsValue {
   density: DataViewsDensity;
-  /** Whether the gutters are held open even when empty. */
+  /**
+   * Whether the group holds its gutters open even when empty. The GROUP's grid
+   * acts on it (`list-card-group-tracks`); a row inside a group renders every
+   * gutter regardless, empty when unused, so the group can ask.
+   */
   reserveGutters: boolean;
   /**
    * How many tracks a row spans.
@@ -132,9 +140,10 @@ export function useListRails(): ListRailsValue | null {
  *
  * A rail set to `null` is DROPPED rather than sized to zero. The two are not the
  * same: a zero-width track still takes a `column-gap` beside it, so a gutter
- * nobody is using still pushes the row's contents inward. Only a standalone card
- * may drop one — inside a group the rails are subgrid over a shared template and
- * every row must span the same count.
+ * nobody is using still pushes the row's contents inward. A standalone card drops
+ * the ones it does not render; a group drops one only when NO row fills it
+ * (`list-card-group-tracks`), since its rows are subgrid over one template and
+ * must all span the same count.
  */
 export function railsTemplate(rails: RailOverrides): string {
   return [
@@ -172,11 +181,12 @@ export const RAIL_GAP_PX = RAIL_GAP * 8;
  *
  * The only way out is for the track NOT TO EXIST: the slot renders nothing and
  * the rail leaves the template, which is safe because grid auto-placement fills
- * the remaining tracks in DOM order. Standalone only — inside a
+ * the remaining tracks in DOM order. This is the standalone rule — inside a
  * {@link ListCardGroup} the rails are subgrid across a shared template and the
  * count cannot vary per row, which is also where `reserveGutters` earns its
  * keep: a selectable list and a read-only one still line up, and turning drag
- * mode on does not shift every row sideways.
+ * mode on does not shift every row sideways. (A group drops a gutter only when
+ * no row fills it: `list-card-group-tracks`.)
  */
 export function railsTemplateFor(
   gutters: { disclose: boolean; drag: boolean; select: boolean },
@@ -209,8 +219,9 @@ const CELL_FIXED_RAILS = 4;
 /**
  * Tracks for a cell-configured row: gutters, leading, the cells, then the menu.
  *
- * `gutters` says which of the three head gutters RENDER. A group reserves all
- * three (the default), so every row spans the same tracks. A standalone row
+ * `gutters` says which of the three head gutters RENDER. The group passes all
+ * three and drops, in CSS, any no row fills (`list-card-group-tracks`), so every
+ * row spans the same tracks. A standalone row
  * renders a gutter only when it uses it, and a track whose slot renders nothing
  * is not a reserved gap: grid auto-placement fills it with the NEXT slot. So the
  * checkbox landed in the disclosure track, the glyph in the drag track, and
@@ -262,12 +273,30 @@ export interface ListGroupConfig<T extends Record<string, unknown>> {
   /** Override individual rails; anything omitted keeps its default. */
   rails?: Partial<ListRails>;
   /**
-   * Hold the drag and select gutters open even when nothing uses them. On by
-   * default, so a selectable list and a read-only one still line up.
+   * Hold the head gutters open even when nothing uses them. On by default, so a
+   * selectable list and a read-only one still line up. Off, a gutter no row in
+   * the list uses takes no track (see `list-card-group-tracks`).
    */
   reserveGutters?: boolean;
 }
 
+/**
+ * The group's template for a given set of dropped gutters, plain or compact —
+ * from its cells when it has them, from its named-slot rails otherwise.
+ */
+function groupTemplate(cells: readonly ListCardCellConfig<never>[] | null, resolved: ListRails): GroupTemplate {
+  return (dropped, compact) => {
+    const gutters = { disclose: !dropped.has("disclose"), drag: !dropped.has("drag"), select: !dropped.has("select") };
+    if (cells != null) return cellRailsTemplate(compact ? compactCellTracks(cells) : cellTracks(cells), gutters);
+    return railsTemplate({
+      ...resolved,
+      ...(gutters.disclose ? {} : { disclose: null }),
+      ...(gutters.drag ? {} : { drag: null }),
+      ...(gutters.select ? {} : { select: null }),
+    });
+  };
+}
+
 /**
  * A list of {@link BaseListCard}s that share one set of columns.
  *
@@ -315,10 +344,18 @@ export function ListCardGroup({
   /** Override individual rails; anything omitted keeps its default. */
   rails?: Partial<ListRails>;
   /**
-   * Hold the drag and select gutters open even when nothing uses them.
+   * Hold the head gutters (disclosure, drag, select) open even when nothing
+   * uses them.
    *
    * On by default: a selectable list and a read-only one should line up, and
-   * turning drag mode on should not shift every row sideways.
+   * turning drag mode on should not shift every row sideways. The one
+   * exception is the compact band, where an empty drag track leaves.
+   *
+   * Off, a gutter that NO row in the list uses takes no track, and one that any
+   * row uses is a track for every row — the list still lines up, it just stops
+   * paying for columns nobody needs. (It used to keep all three tracks while
+   * the rows rendered nothing in the empty ones, so every cell auto-flowed into
+   * the track before its own.)
    */
   reserveGutters?: boolean;
   /** Row gap. Defaults to the density's own spacing. */
@@ -331,27 +368,18 @@ export function ListCardGroup({
     ...rails,
   };
   const configured = cells != null && cells.length > 0;
-  const template = configured ? cellRailsTemplate(cellTracks(cells)) : railsTemplate(resolved);
+  const template = groupTemplate(configured ? cells : null, resolved);
   const railCount = configured ? cellRailCount(cells.length) : RAIL_COUNT;
   return (
     <ListRailsContext.Provider value={{ density, reserveGutters, railCount }}>
      <CellConfigProvider cells={cells}>
-      <Box
-        data-testid={dataTestId}
-        sx={{
-          // The query container for every row inside it — a row cannot be one
-          // itself and a subgrid at the same time (containment drops subgrid).
-          // Every row in a list is the same width anyway, so the group is the
-          // honest place to ask the question.
-          containerType: "inline-size",
-          display: "grid",
-          gridTemplateColumns: template,
-          alignItems: "center",
-          rowGap: gap ?? DENSITY_ROW_PADDING[density],
-        }}
+      <GroupGrid
+        dataTestId={dataTestId}
+        tracks={{ template, railCount, reserveGutters }}
+        rowGap={gap ?? DENSITY_ROW_PADDING[density]}
       >
         {children}
-      </Box>
+      </GroupGrid>
      </CellConfigProvider>
     </ListRailsContext.Provider>
   );

package/src/components/data-display/Popover/Popover.tsx

@@ -123,20 +123,27 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
     maxWidth,
     dataTestId,
     children,
+    PaperProps: callerPaper,
     ...props
   }, ref) => (
       <MuiPopover
         ref={ref}
         data-testid={dataTestId || 'popover-content'}
+        {...props}
+        // After the spread, and merged rather than replaced: a caller's
+        // `PaperProps` used to land last and drop the styled paper, its variant
+        // and the width cap; and its `sx` now adds to the cap instead.
         PaperProps={{
+          ...callerPaper,
           component: StyledPaper as React.ComponentType<PaperProps>,
           customVariant: variant,
           glow,
           pulse,
-          sx: { maxWidth: popoverCap(maxWidth) },
-          ...props.PaperProps,
+          sx: [
+            { maxWidth: popoverCap(maxWidth) },
+            ...(Array.isArray(callerPaper?.sx) ? callerPaper.sx : [callerPaper?.sx ?? {}]),
+          ],
         } as PaperProps & { customVariant?: string; glow?: boolean; pulse?: boolean }}
-        {...props}
       >
         {children}
       </MuiPopover>

package/src/en-US.data-display.ts

@@ -177,6 +177,10 @@ export const EN_US_DATA_VIEWS_COPY: DataViewsCopy = {
       // disk in every language.
       json: { label: "JSON (.json)", hint: "For integrations" },
     },
+    scopeLine: (selectedCount, totalCount) =>
+      selectedCount > 0
+        ? `Exporting ${selectedCount} selected ${selectedCount === 1 ? "item" : "items"}`
+        : `Exporting ${totalCount} filtered ${totalCount === 1 ? "item" : "items"}`,
     visibleColumns: (columnCount) => `${columnCount} visible columns, in their current order`,
     trigger: "Export",
     triggerLabel: "Export",

package/src/mui/styles.ts

@@ -1,2 +1,2 @@
 export type { SxProps, Theme } from '@mui/material/styles/index.js';
-export { alpha, styled, useTheme, createTheme, ThemeProvider } from '@mui/material/styles/index.js';
+export { alpha, keyframes, styled, useTheme, createTheme, ThemeProvider } from '@mui/material/styles/index.js';

package/src/pt-BR.data-display.ts

@@ -174,6 +174,10 @@ export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
     formats: {
       json: { label: "JSON (.json)", hint: "Para integrações" },
     },
+    scopeLine: (selectedCount, totalCount) =>
+      selectedCount > 0
+        ? `Exportando ${selectedCount} ${selectedCount === 1 ? "item selecionado" : "itens selecionados"}`
+        : `Exportando ${totalCount} ${totalCount === 1 ? "item filtrado" : "itens filtrados"}`,
     visibleColumns: (columnCount) => `${columnCount} colunas visíveis, na ordem atual`,
     trigger: "Exportar",
     triggerLabel: "Exportar",