@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/insights/InsightsLeaders.tsx

@@ -3,6 +3,7 @@ import { DataTable, type DataTableColumn, type DataTableData } from "@multiplatf
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { SizableText } from "tamagui";
 import { ImageWell } from "../list/ImageWell";
 import { topBy } from "./insightsData";
 import {
@@ -41,7 +42,7 @@ export function InsightsLeaders<TDoc>({
   testID,
 }: InsightsLeadersProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const [field, setField] = useState(metrics[0]?.field ?? "");
   const metric = metrics.find((candidate) => candidate.field === field) ?? metrics[0];
   const nestedPx = knobProps.nestedControl.px;
@@ -67,7 +68,7 @@ export function InsightsLeaders<TDoc>({
         header: t("Rank"),
         size: 64,
         cell: ({ row }) => (
-          <Text {...knobProps.label} color="$color10" fontWeight="600">
+          <Text {...knobProps.label} color="$color10">
             {`#${row.original.rank}`}
           </Text>
         ),
@@ -90,9 +91,9 @@ export function InsightsLeaders<TDoc>({
                 data-nested-px={nestedPx}
               />
               <YStack flexShrink={1} minWidth={0}>
-                <Text fontWeight="600" numberOfLines={1}>
+                <SizableText size="$4" {...knobProps.heading} numberOfLines={1}>
                   {row.original.title}
-                </Text>
+                </SizableText>
                 {code ? (
                   <Text {...knobProps.label} color="$color10">
                     {code}
@@ -113,7 +114,7 @@ export function InsightsLeaders<TDoc>({
         ),
       },
     ],
-    [t, metric, record, nestedPx, knobProps.label],
+    [t, metric, record, nestedPx, knobProps.label, knobProps.heading],
   );
 
   if (!metric) return null;
@@ -122,7 +123,7 @@ export function InsightsLeaders<TDoc>({
       {metrics.length > 1 ? (
         <Tabs
           variant="contained"
-          compact
+          size="$3"
           value={metric.field}
           onChange={setField}
           items={metrics.map((candidate) => ({ value: candidate.field, label: candidate.label }))}

package/src/insights/InsightsRecords.tsx

@@ -22,7 +22,7 @@ export interface InsightsRecordsProps<TDoc> {
  * nestedControl, not the page's 44px floor (LC-73).
  */
 export function InsightsRecords<TDoc>({ tiles, record, testID }: InsightsRecordsProps<TDoc>) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const { knobProps: pageKnobs } = useResolvedKnobs();
   const wellPx = knobProps.nestedControl.px * 2;
   return (
@@ -54,7 +54,7 @@ export function InsightsRecords<TDoc>({ tiles, record, testID }: InsightsRecords
                   {title}
                 </Text>
                 {code ? (
-                  <Text {...knobProps.label} color="$color10" fontWeight="600">
+                  <Text {...knobProps.label} color="$color10">
                     {code}
                   </Text>
                 ) : null}

package/src/insights/InsightsTable.tsx

@@ -3,6 +3,7 @@ import { DataTable, type DataTableColumn, type DataTableData } from "@multiplatf
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { SizableText } from "tamagui";
 import { FacetBadge } from "../list/FacetBadge";
 import {
   formatMetric,
@@ -44,7 +45,7 @@ export function InsightsTable<TDoc>({
   testID,
 }: InsightsTableProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const nestedPx = knobProps.nestedControl.px;
   const hasCode = rows.some((doc) => Boolean(record.code(doc)));
 
@@ -72,7 +73,7 @@ export function InsightsTable<TDoc>({
               header: t("No."),
               size: 72,
               cell: ({ row }: { row: { original: TableRow<TDoc> } }) => (
-                <Text {...knobProps.label} color="$color10" fontWeight="600">
+                <Text {...knobProps.label} color="$color10">
                   {row.original.code}
                 </Text>
               ),
@@ -93,9 +94,9 @@ export function InsightsTable<TDoc>({
               data-nested-px={nestedPx}
             />
             <YStack flexShrink={1} minWidth={0}>
-              <Text fontWeight="600" numberOfLines={1}>
+              <SizableText size="$4" {...knobProps.heading} numberOfLines={1}>
                 {row.original.title}
-              </Text>
+              </SizableText>
             </YStack>
           </XStack>
         ),
@@ -116,7 +117,7 @@ export function InsightsTable<TDoc>({
                         key={value}
                         label={record.valueLabel(value)}
                         tint={record.valueTint(value)}
-                        compact
+                        size="$3"
                       />
                     ))
                   ) : (
@@ -144,7 +145,7 @@ export function InsightsTable<TDoc>({
           }) satisfies DataTableColumn<TableRow<TDoc>>,
       ),
     ],
-    [t, hasCode, facetLabel, metrics, record, nestedPx, knobProps.label],
+    [t, hasCode, facetLabel, metrics, record, nestedPx, knobProps.label, knobProps.heading],
   );
 
   return (

package/src/list/BandFilters.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import { FacetList } from "./FacetList";
+import { FacetRail } from "./FacetRail";
+import type { FrappeListBand } from "./listState";
+import type { ListControlsResult } from "./useListControls";
+
+interface BandFilterProps {
+  band: FrappeListBand;
+  list: ListControlsResult;
+  layout?: "rail" | "list";
+  testID: string;
+}
+
+export function BandFilter({ band, list, layout = "rail", testID }: BandFilterProps) {
+  const { t } = useTranslation();
+  const counts = list.bandCounts[band.param];
+  const props = {
+    label: band.label,
+    value: list.state.bands[band.param] ?? "",
+    onChange: (value: string) => list.update({ bands: { [band.param]: value } }),
+    testID,
+    options: [
+      { value: "", label: band.allLabel ?? t("All"), count: list.total },
+      ...band.options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        count: counts ? (counts[option.value] ?? 0) : undefined,
+      })),
+    ],
+  };
+  return layout === "list" ? <FacetList {...props} columns={2} /> : <FacetRail {...props} />;
+}

package/src/list/FacetBadge.tsx

@@ -1,25 +1,27 @@
 import { Text, XStack } from "@multiplatform.one/components";
-import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairlineWidth, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { SizeTokens } from "tamagui";
 
 export interface FacetBadgeProps {
   label: string;
   /** Theme hue (`"grass"`) painting the badge from its ramp. */
   tint?: string;
-  /** A step smaller, for image wells and table cells. */
-  compact?: boolean;
+  /** Size token (Tamagui's own `size`); below `$true` the badge draws a step smaller. */
+  size?: SizeTokens;
 }
 
 /**
- * One facet value as a static badge: nested density (LC-73), the tint's
+ * One facet value as a static badge at the ambient size token, the tint's
  * step-4 fill, step-7 border and step-12 text (DF-04, AA in both schemes).
  */
-export function FacetBadge({ label, tint = "gray", compact = false }: FacetBadgeProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+export function FacetBadge({ label, tint = "gray", size }: FacetBadgeProps) {
+  const { knobProps } = useResolvedKnobs({ size });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   return (
     <XStack
       {...knobProps.borderRadius}
-      paddingHorizontal={compact ? "$1.5" : "$2"}
-      paddingVertical={compact ? "$0.5" : "$1"}
+      paddingHorizontal={small ? "$1.5" : "$2"}
+      paddingVertical={small ? "$0.5" : "$1"}
       backgroundColor={`$${tint}4` as never}
       borderColor={`$${tint}7` as never}
       borderWidth={hairlineWidth}
@@ -31,7 +33,7 @@ export function FacetBadge({ label, tint = "gray", compact = false }: FacetBadge
         textTransform="capitalize"
         fontWeight="700"
         color={`$${tint}12` as never}
-        {...(compact ? { fontSize: "$1" as const } : null)}
+        {...(small ? { fontSize: "$1" as const } : null)}
         letterSpacing={0.3}
       >
         {label}

package/src/list/FacetList.tsx

@@ -0,0 +1,172 @@
+import { Text, XStack, isWeb } from "@multiplatform.one/components";
+import {
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  transitionProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { useRef, useState } from "react";
+import type { FacetRailOption } from "./FacetRail";
+
+export interface FacetListProps {
+  /** Names the radiogroup. */
+  label: string;
+  /** Active value, or "" for none. */
+  value: string;
+  options: readonly FacetRailOption[];
+  onChange: (value: string) => void;
+  /** Values per row; the clearing option ("") always takes a full row. */
+  columns?: 1 | 2;
+  testID?: string;
+}
+
+const pipSize = "$0.75";
+
+/**
+ * A single-select facet as a vertical list: a row per value with its hue
+ * pip and record count, the active row filled from its ramp. One tap
+ * narrows, a second tap on the active row clears. One tab stop: arrows,
+ * Home and End move and select like a radiogroup.
+ */
+export function FacetList({
+  label,
+  value,
+  options,
+  onChange,
+  columns = 1,
+  testID,
+}: FacetListProps) {
+  const { knobProps } = useResolvedKnobs();
+  const refs = useRef<Record<string, { focus?: () => void } | null>>({});
+  const [focusValue, setFocusValue] = useState<string | null>(null);
+  const [kbFocus, setKbFocus] = useState<string | null>(null);
+  if (isWeb) ensureKeyboardModalityTracking();
+  const anchor =
+    focusValue !== null && options.some((option) => option.value === focusValue)
+      ? focusValue
+      : value;
+
+  const select = (next: string) => {
+    setFocusValue(next);
+    onChange(next);
+    if (isWeb) requestAnimationFrame(() => refs.current[next]?.focus?.());
+  };
+  const move = (from: string, key: string) => {
+    if (options.length === 0) return false;
+    const index = Math.max(
+      0,
+      options.findIndex((option) => option.value === from),
+    );
+    const target =
+      key === "Home"
+        ? 0
+        : key === "End"
+          ? options.length - 1
+          : key === "ArrowDown"
+            ? (index + 1) % options.length
+            : key === "ArrowUp"
+              ? (index - 1 + options.length) % options.length
+              : -1;
+    if (target < 0) return false;
+    select(options[target].value);
+    return true;
+  };
+
+  return (
+    <XStack
+      role="radiogroup"
+      aria-label={label}
+      aria-orientation="vertical"
+      flexWrap="wrap"
+      rowGap="$0.5"
+      testID={testID}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        const hue = option.tint;
+        const fill = selected ? (hue ? `$${hue}4` : "$color4") : "transparent";
+        const hoverFill = selected ? fill : hue ? `$${hue}2` : "$color2";
+        const ink = selected ? "$color12" : "$color11";
+        return (
+          <XStack
+            key={option.value || "__all"}
+            ref={(node: unknown) => {
+              refs.current[option.value] = node as { focus?: () => void } | null;
+            }}
+            role="radio"
+            aria-checked={selected}
+            width={columns === 2 && option.value !== "" ? "50%" : "100%"}
+            {...(isWeb ? { tabIndex: option.value === anchor ? 0 : -1 } : undefined)}
+            {...knobProps.borderRadius}
+            borderWidth={0}
+            backgroundColor={fill as never}
+            hoverStyle={{ backgroundColor: hoverFill as never }}
+            pressStyle={{ backgroundColor: (hue ? `$${hue}4` : "$color4") as never }}
+            {...transitionProps(knobProps.transition)}
+            minHeight="$2.5"
+            paddingHorizontal="$2"
+            gap="$2"
+            alignItems="center"
+            cursor="pointer"
+            outlineWidth={0}
+            focusVisibleStyle={{ outlineWidth: 0 }}
+            {...(kbFocus === option.value ? keyboardFocusRingProps : undefined)}
+            onPress={() => onChange(selected && option.value !== "" ? "" : option.value)}
+            {...(isWeb
+              ? {
+                  onFocus: () => {
+                    setFocusValue(option.value);
+                    if (wasKeyboardFocus()) setKbFocus(option.value);
+                  },
+                  onBlur: () => setKbFocus((prev) => (prev === option.value ? null : prev)),
+                  onKeyDown: (event: { key?: string; preventDefault?: () => void }) => {
+                    if (event.key && move(option.value, event.key)) {
+                      event.preventDefault?.();
+                      return;
+                    }
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault?.();
+                      onChange(selected && option.value !== "" ? "" : option.value);
+                    }
+                  },
+                }
+              : undefined)}
+            testID={testID ? `${testID}-${option.value || "all"}` : undefined}
+          >
+            <XStack
+              width={pipSize}
+              height={pipSize}
+              borderRadius={1000}
+              backgroundColor={(hue ? `$${hue}9` : "transparent") as never}
+              flexShrink={0}
+              aria-hidden
+            />
+            <Text
+              {...knobProps.label}
+              flex={1}
+              numberOfLines={1}
+              fontWeight={selected ? "700" : "500"}
+              color={ink}
+              textTransform="capitalize"
+              userSelect="none"
+            >
+              {option.label}
+            </Text>
+            {typeof option.count === "number" ? (
+              <Text
+                {...knobProps.label}
+                fontWeight="600"
+                color={selected ? "$color11" : "$color10"}
+                userSelect="none"
+                data-facet-count=""
+              >
+                {option.count}
+              </Text>
+            ) : null}
+          </XStack>
+        );
+      })}
+    </XStack>
+  );
+}

package/src/list/FacetRail.spec.tsx

@@ -0,0 +1,61 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  applyThemeScale,
+  createDefaultThemeConfig,
+  DEFAULT_SCALE_ID,
+  densePreset,
+  Surface,
+  sizeRecipeForToken,
+  sizeKeyBelow,
+} from "@multiplatform.one/theme";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FacetRail } from "./FacetRail";
+
+const config = createDefaultThemeConfig({ presets: { dense: densePreset } });
+afterEach(() => {
+  cleanup();
+  applyThemeScale(config.scales![DEFAULT_SCALE_ID]);
+});
+const options = [
+  { value: "", label: "All", count: 6 },
+  { value: "fire", label: "Fire", count: 2 },
+];
+
+describe("FacetRail chip recipes", () => {
+  for (const scaleId of [DEFAULT_SCALE_ID, "dense"]) {
+    for (const size of ["$true", "$3", "$5"] as const) {
+      it(`${scaleId} at ${size} paints one full step below its controls`, () => {
+        applyThemeScale(config.scales![scaleId]);
+        const token = sizeKeyBelow(size);
+        const recipe = sizeRecipeForToken(token, { family: "chip" });
+        const count = sizeRecipeForToken(sizeKeyBelow(token), { family: "chip" });
+        const result = renderWithProviders(
+          <Surface size={size}>
+            <FacetRail label="Type" value="" options={options} onChange={() => {}} />
+          </Surface>,
+        );
+        const frame = result.getByRole("radio", { name: "Fire 2" });
+        const style = getComputedStyle(frame);
+        expect(style.height).toBe(`${recipe.height}px`);
+        expect(style.paddingLeft).toBe(`${recipe.paddingHorizontal}px`);
+        expect(style.gap).toBe(`${recipe.gap}px`);
+        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${recipe.fontSize}px`);
+        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${count.fontSize}px`);
+      });
+    }
+  }
+
+  it("keeps selection, clearing and arrow-key navigation", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FacetRail label="Type" value="fire" options={options} onChange={onChange} />,
+    );
+    const fire = result.getByRole("radio", { name: "Fire 2" });
+    expect(fire.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(fire);
+    expect(onChange).toHaveBeenLastCalledWith("");
+    fireEvent.keyDown(fire, { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenLastCalledWith("");
+  });
+});

package/src/list/FacetRail.tsx

@@ -3,6 +3,8 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   pressTargetHitSlop,
+  sizeKeyBelow,
+  sizeRecipeForToken,
   transitionProps,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -40,10 +42,8 @@ interface RailChipProps {
   register: (node: { focus?: () => void } | null) => void;
 }
 
-// Chips paint a notch under the ~40px toolbar controls; hitSlop restores the
+// Chips paint one full step under the toolbar controls; hitSlop restores the
 // 44px press target (DG-LAY-04, ViewSwitcher precedent).
-const chipVisualHeight = 38;
-const chipHitSlop = pressTargetHitSlop(chipVisualHeight);
 const pipSize = "$1";
 
 /**
@@ -63,6 +63,9 @@ function RailChip({
   register,
 }: RailChipProps) {
   const { knobProps } = useResolvedKnobs();
+  const chipToken = sizeKeyBelow(knobProps.sizeToken);
+  const chip = sizeRecipeForToken(chipToken, { family: "chip" });
+  const count = sizeRecipeForToken(sizeKeyBelow(chipToken), { family: "chip" });
   const [kbFocus, setKbFocus] = useState(false);
   if (isWeb) ensureKeyboardModalityTracking();
   const hue = option.tint;
@@ -82,16 +85,16 @@ function RailChip({
       {...knobProps.borderRadius}
       backgroundColor={fill as never}
       borderWidth={0}
-      paddingHorizontal="$3"
-      minHeight={chipVisualHeight}
-      hitSlop={chipHitSlop}
+      paddingHorizontal={chip.paddingHorizontal}
+      height={chip.height}
+      hitSlop={pressTargetHitSlop(chip.height)}
       alignItems="center"
-      gap="$1.5"
+      gap={chip.gap}
       cursor="pointer"
       role="radio"
       aria-checked={selected}
       {...(isWeb ? { tabIndex: tabStop ? 0 : -1 } : undefined)}
-      {...transitionProps(knobProps.transition)}
+      {...transitionProps(knobProps.motion.control)}
       hoverStyle={{ backgroundColor: hoverFill as never }}
       pressStyle={{ backgroundColor: fill as never }}
       outlineWidth={0}
@@ -136,6 +139,7 @@ function RailChip({
       ) : null}
       <Text
         {...knobProps.label}
+        fontSize={chip.fontSize}
         fontWeight={selected ? "700" : "500"}
         color={textColor as never}
         textTransform="capitalize"
@@ -146,7 +150,7 @@ function RailChip({
       {typeof option.count === "number" ? (
         <Text
           {...knobProps.label}
-          fontSize="$1"
+          fontSize={count.fontSize}
           fontWeight="700"
           color={textColor as never}
           opacity={0.7}

package/src/list/ImageWell.tsx

@@ -6,7 +6,7 @@ import {
   isWeb,
   type YStackProps,
 } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 
 export interface ImageWellProps extends Omit<YStackProps, "children"> {
@@ -91,7 +91,7 @@ export function ImageWell({
           height={imageSize as never}
           objectFit="contain"
           opacity={revealed ? 1 : 0}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.reveal)}
           zIndex={1}
           {...((isWeb ? { loading: lazy ? "lazy" : "eager", decoding: "async" } : undefined) as
             | Record<string, unknown>

package/src/list/ListControls.spec.tsx

@@ -0,0 +1,107 @@
+// ListControls rows (§ ListControls rows): the band pivots on the house
+// compact class (< 640, useLayoutSizeClass), not Tamagui's $max-sm (800).
+// Compact is two rows — search plus a badge-counted Filters button, then the
+// first facet as the one chip row; sort, favorites, shuffle and ranges move
+// into the ListToolsSheet. Medium and up keep everything on one row.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ListControls } from "./ListControls";
+import { fixtureControls, fixtureList } from "./listControls.fixture";
+
+const initialWidth = window.innerWidth;
+
+afterEach(() => {
+  cleanup();
+  window.innerWidth = initialWidth;
+});
+
+function renderAt(width: number, state = {}, update = vi.fn()) {
+  window.innerWidth = width;
+  return renderWithProviders(
+    <ListControls
+      controls={fixtureControls}
+      list={fixtureList(state, update)}
+      searchId="roster-search"
+      showSearch
+      showFavorites
+      shuffle={{ open: false, toggle: () => {}, panelId: "roster-shuffle" }}
+      separator={false}
+      compactAccessory={<span data-testid="accessory" />}
+      testID="roster"
+    />,
+  );
+}
+
+const band = () => screen.getByTestId("roster-controls");
+const row = () => screen.getByTestId("roster-controls-row");
+
+describe("ListControls on the compact class (639)", () => {
+  it("is one control row (search + Filters) and one chip row", () => {
+    renderAt(639);
+    expect(band().getAttribute("data-controls-layout")).toBe("compact");
+    // The band's direct children: the control row and the first facet rail.
+    expect(band().children).toHaveLength(2);
+    expect(row().querySelector("#roster-search input")).not.toBeNull();
+    expect(screen.getByTestId("roster-tools")).toBeTruthy();
+    expect(row().contains(screen.getByTestId("roster-tools"))).toBe(true);
+    expect(row().contains(screen.getByTestId("accessory"))).toBe(true);
+    expect(screen.getAllByRole("radiogroup")).toHaveLength(1);
+    expect(screen.getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+  });
+
+  it("moves sort, favorites, shuffle and ranges off the band", () => {
+    renderAt(390);
+    expect(screen.queryByRole("combobox", { name: "Sort by" })).toBeNull();
+    expect(screen.queryByTestId("roster-favorites-filter")).toBeNull();
+    expect(screen.queryByTestId("roster-shuffle-toggle")).toBeNull();
+    expect(screen.queryByText("Min XP")).toBeNull();
+    expect(screen.queryByRole("radiogroup", { name: "Generation" })).toBeNull();
+    expect(screen.queryByRole("radiogroup", { name: "Region" })).toBeNull();
+  });
+
+  it("badges the Filters button with the active narrowings", () => {
+    renderAt(390, {
+      facets: { type: "fire" },
+      bands: { generation: "1" },
+      ranges: { xp: 50 },
+      favoritesOnly: true,
+    });
+    // The badge carries the count; untranslated specs see the raw key.
+    const badge = document.querySelector('[data-badge="count"]');
+    // Badge isolates the number in bidi marks.
+    expect(badge?.textContent).toContain("4");
+    expect(screen.getByTestId("roster-tools").getAttribute("aria-label")).toMatch(/^Filters \(/);
+  });
+});
+
+describe("ListControls above the compact class (700)", () => {
+  it("does not stack: search, sort, favorites and shuffle share one row", () => {
+    renderAt(700);
+    expect(band().getAttribute("data-controls-layout")).toBe("wide");
+    expect(screen.queryByTestId("roster-tools")).toBeNull();
+    expect(screen.queryByTestId("accessory")).toBeNull();
+    const r = row();
+    expect(getComputedStyle(r).flexWrap).toBe("nowrap");
+    expect(r.querySelector("#roster-search input")).not.toBeNull();
+    expect(r.contains(screen.getByTestId("roster-favorites-filter"))).toBe(true);
+    expect(r.contains(screen.getByTestId("roster-shuffle-toggle"))).toBe(true);
+    // Every facet keeps its own rail on the band.
+    expect(screen.getAllByRole("radiogroup")).toHaveLength(3);
+  });
+});
+
+describe("ListControls bands", () => {
+  it("shows counts and updates or clears a selected band above compact", () => {
+    const update = vi.fn();
+    renderAt(700, { bands: { generation: "1" } }, update);
+    const group = screen.getByRole("radiogroup", { name: "Generation" });
+    const first = within(group).getByRole("radio", { name: /Generation I\b/ });
+    expect(first.getAttribute("aria-checked")).toBe("true");
+    expect(first.textContent).toContain("8");
+    fireEvent.click(within(group).getByRole("radio", { name: /Generation II\b/ }));
+    expect(update).toHaveBeenCalledWith({ bands: { generation: "2" } });
+    fireEvent.click(within(group).getByRole("radio", { name: /All generations/ }));
+    expect(update).toHaveBeenCalledWith({ bands: { generation: "" } });
+  });
+});