@multiplatform.one/components 7.79.0 → 7.81.0

package/src/appShell/ScopeMenu.tsx

@@ -14,13 +14,16 @@
  *   side, never one menu with two sections.
  *
  * Narrow viewports and native get FloatingPanel's sheet (phones take
- * sheets); the first-row contract holds there too.
+ * sheets). A sheet isn't over its trigger, so it drops the first row for a
+ * sheet title, the picker's label (FZ-8557).
  */
-import { FloatingPanel, type PanelWidth } from "@multiplatform.one/forms";
-import { useMenuRowCheckInk, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
-import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import { CheckGlyph } from "../CheckGlyph";
+import { FloatingPanel, type PanelWidth, useInPanelSheet } from "@multiplatform.one/forms";
+import { menuRowCheckGlyph, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useState } from "react";
-import { XStack, YStack } from "tamagui";
+import { View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "../actions/StandardAction";
 import { SizableText } from "../Text";
 
 export interface ScopeMenuOption {
@@ -60,8 +63,8 @@ function ScopeRow({
   ariaLabel?: string;
 }) {
   const { knobProps, control } = useResolvedKnobs();
+  const inSheet = useInPanelSheet();
   const iconSize = Number(knobProps.controlIcon?.width) || undefined;
-  const checkInk = useMenuRowCheckInk();
   const Chevron = chevron === "up" ? CaretUpIcon : CaretDownIcon;
   return (
     <XStack
@@ -71,8 +74,11 @@ function ScopeRow({
       {...(role === "menuitemradio" ? { "aria-checked": !!checked } : {})}
       alignItems="center"
       gap="$2"
-      minHeight="$3"
-      paddingHorizontal="$2.5"
+      // A menu row is the menu row recipe's height, a touch target on a phone
+      // (44pt, HIG); the bar trigger and its echo keep the bar's size.
+      minHeight={role === "menuitemradio" ? knobProps.menuRow.minHeight : "$3"}
+      // A phone sheet's rows keep HIG's 16pt gutter; a bar menu's hug the trigger.
+      paddingHorizontal={inSheet ? "$4" : "$2.5"}
       cursor="pointer"
       onPress={onPress}
       // The echo row is the trigger itself, laid on the panel (LC-112): the
@@ -91,8 +97,8 @@ function ScopeRow({
       {...(chevron === "down" ? { borderRadius: knobProps.borderRadius.borderRadius } : undefined)}
     >
       {role === "menuitemradio" ? (
-        <YStack width={iconSize} alignItems="center" aria-hidden>
-          {checked ? <CheckIcon size={iconSize} weight="bold" color={checkInk} /> : null}
+        <YStack width={menuRowCheckGlyph.size} alignItems="center" aria-hidden>
+          {checked ? <CheckGlyph /> : null}
         </YStack>
       ) : null}
       <SizableText size="$2" fontWeight={chevron ? "500" : "400"} numberOfLines={1}>
@@ -103,6 +109,42 @@ function ScopeRow({
   );
 }
 
+/**
+ * Over its trigger, the menu's first row is the pressed item with its chevron
+ * flipped (LC-112). A phone sheet isn't over its trigger, so it takes a sheet
+ * title, the picker's label, and a close (HIG, FZ-8557 Round 40).
+ */
+function ScopeMenuHead({
+  label,
+  currentLabel,
+  onClose,
+  testID,
+}: {
+  label: string;
+  currentLabel: string;
+  onClose: () => void;
+  testID: string;
+}) {
+  const inSheet = useInPanelSheet();
+  if (inSheet) {
+    return (
+      <View paddingHorizontal="$4" paddingBottom="$2">
+        <OverlayHeader title={label} onClose={onClose} testID={`${testID}-sheet-header`} />
+      </View>
+    );
+  }
+  return (
+    <ScopeRow
+      role="button"
+      label={currentLabel}
+      chevron="up"
+      ariaLabel={`${label}: ${currentLabel}`}
+      onPress={onClose}
+      testID={`${testID}-first-row`}
+    />
+  );
+}
+
 export function ScopeMenu({
   label,
   options,
@@ -144,14 +186,11 @@ export function ScopeMenu({
       }
     >
       <YStack role="menu" aria-label={label} data-testid={`${testID}-panel`}>
-        {/* The pressed item, kept as the first row with its chevron flipped. */}
-        <ScopeRow
-          role="button"
-          label={currentLabel}
-          chevron="up"
-          ariaLabel={`${label}: ${currentLabel}`}
-          onPress={() => setOpen(false)}
-          testID={`${testID}-first-row`}
+        <ScopeMenuHead
+          label={label}
+          currentLabel={currentLabel}
+          onClose={() => setOpen(false)}
+          testID={testID}
         />
         {options.map((option) => (
           <ScopeRow

package/src/appShell/TabBar.tsx

@@ -21,6 +21,7 @@ import {
 import { zIndex } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
+import type { ImageSourcePropType } from "react-native";
 import { XStack, YStack } from "tamagui";
 import { materials, useMaterial } from "../Material";
 import { MaterialBlurFill } from "../Material/blur";
@@ -41,10 +42,19 @@ export interface TabBarItem {
   label: string;
   icon: TabBarIcon;
   /**
-   * The SF Symbols the system tab bar draws on iOS (TabHost). Without them
-   * on every item, iOS keeps the MPO TabBar.
+   * The glyphs the system tab bar draws (TabHost): SF Symbols on iOS, a
+   * raster template image on Android (Material's bar draws no SF Symbol or
+   * SVG; a bundled PNG, so an OTA can carry it). A platform keeps the MPO
+   * TabBar unless every item names its glyph.
    */
-  nativeIcon?: { sfSymbol: string; sfSymbolSelected?: string };
+  nativeIcon?: TabBarNativeIcon;
+}
+
+export interface TabBarNativeIcon {
+  sfSymbol?: string;
+  sfSymbolSelected?: string;
+  /** A monochrome PNG (24dp, @2x and @3x beside it); the bar tints it. */
+  android?: ImageSourcePropType;
 }
 
 export interface TabBarProps {

package/src/appShell/TabHost.native.spec.tsx

@@ -16,23 +16,36 @@ import {
   NativeTabHost,
   TabHost,
   itemsHaveNativeIcons,
+  nativeIconFor,
   nativeTabBarHeight,
+  nativeTabsPlatforms,
   resolveNativeTabs,
 } from "./TabHost.native";
 
 afterEach(cleanup);
 
 const Glyph = () => null;
+const png = (name: string) => ({ uri: `${name}.png`, width: 24, height: 24 });
 
 const items: TabBarItem[] = [
   {
     key: "/",
     label: "Home",
     icon: Glyph,
-    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill" },
+    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill", android: png("house") },
+  },
+  {
+    key: "/pokemon",
+    label: "Pokemon",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "sparkles", android: png("sparkle") },
+  },
+  {
+    key: "/moves",
+    label: "Moves",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "bolt", android: png("lightning") },
   },
-  { key: "/pokemon", label: "Pokemon", icon: Glyph, nativeIcon: { sfSymbol: "sparkles" } },
-  { key: "/moves", label: "Moves", icon: Glyph, nativeIcon: { sfSymbol: "bolt" } },
 ];
 
 const fakeTabs: NativeTabs = {
@@ -58,7 +71,8 @@ const fakeTabs: NativeTabs = {
       data-testid={`native-screen-${tabKey}`}
       data-focused={String(Boolean(isFocused))}
       data-inset-adjust={String(overrideScrollViewContentInsetAdjustmentBehavior)}
-      data-symbol={icon?.ios.name}
+      data-symbol={icon?.ios?.name}
+      data-android-icon={(icon?.android?.imageSource as { uri?: string } | undefined)?.uri}
       aria-label={title}
     >
       {children}
@@ -113,19 +127,49 @@ describe("native tabs detection", () => {
     expect(resolveNativeTabs(sources(["RNSTabsHost", "RNSTabsScreen"], throws), "ios")).toBeNull();
   });
 
-  it("keeps the MPO TabBar on Android and the web", () => {
+  it("keeps the MPO TabBar on Android and the web by default", () => {
     const screens = vi.fn(() => ({ Tabs: fakeTabs }));
     const all = sources(["RNSTabsHost", "RNSTabsScreen"], screens);
+    expect(nativeTabsPlatforms).toEqual({ ios: true, android: false });
     expect(resolveNativeTabs(all, "android")).toBeNull();
     expect(resolveNativeTabs(all, "web")).toBeNull();
     expect(screens).not.toHaveBeenCalled();
   });
 
-  it("needs an SF Symbol on every item", () => {
+  it("picks the Material bar on Android once the platform is switched on (FZ-8140)", () => {
+    const on = { ios: true, android: true };
+    expect(
+      resolveNativeTabs(
+        sources(["RNSTabsHost", "RNSTabsScreen"], () => ({ Tabs: fakeTabs })),
+        "android",
+        on,
+      ),
+    ).toBe(fakeTabs);
+    const screens = vi.fn(() => ({ Tabs: fakeTabs }));
+    expect(resolveNativeTabs(sources([], screens), "android", on)).toBeNull();
+    expect(screens).not.toHaveBeenCalled();
+  });
+
+  it("needs this platform's glyph on every item: an SF Symbol on iOS, a PNG on Android", () => {
     expect(itemsHaveNativeIcons(items)).toBe(true);
+    expect(itemsHaveNativeIcons(items, "android")).toBe(true);
     expect(itemsHaveNativeIcons([...items, { key: "/x", label: "X", icon: Glyph }])).toBe(false);
+    const symbolsOnly = items.map(({ nativeIcon, ...item }) => ({
+      ...item,
+      nativeIcon: { sfSymbol: nativeIcon?.sfSymbol },
+    }));
+    expect(itemsHaveNativeIcons(symbolsOnly, "ios")).toBe(true);
+    expect(itemsHaveNativeIcons(symbolsOnly, "android")).toBe(false);
     expect(itemsHaveNativeIcons([])).toBe(false);
   });
+
+  it("hands react-native-screens each platform's glyph from the one item", () => {
+    expect(nativeIconFor(items[0]!)).toEqual({
+      ios: { type: "sfSymbol", name: "house" },
+      android: { type: "imageSource", imageSource: png("house") },
+    });
+    expect(nativeIconFor({ key: "/x", label: "X", icon: Glyph })).toEqual({});
+  });
 });
 
 describe("NativeTabHost", () => {
@@ -136,6 +180,9 @@ describe("NativeTabHost", () => {
     expect(pokemon.contains(screen.getByTestId("page"))).toBe(true);
     expect(screen.getByTestId("native-screen-/").getAttribute("data-focused")).toBe("false");
     expect(screen.getByTestId("native-screen-/").getAttribute("data-symbol")).toBe("house");
+    expect(screen.getByTestId("native-screen-/").getAttribute("data-android-icon")).toBe(
+      "house.png",
+    );
     expect(screen.getByTestId("native-host").getAttribute("data-hidden")).toBe("false");
     expect(screen.queryByTestId("tab-bar")).toBeNull();
   });

package/src/appShell/TabHost.native.tsx

@@ -10,9 +10,10 @@
  *
  * The native view ships in react-native-screens' binary half, so it is
  * feature-detected before react-native-screens' Tabs is required: a binary
- * without RNSTabsHost, a platform other than iOS, or an item without an SF
- * Symbol keeps the MPO TabBar. Android stays on the MPO TabBar until the
- * items carry image icons the Material bar can draw.
+ * without RNSTabsHost, a platform switched off in `nativeTabsPlatforms`, or
+ * an item without its platform's glyph keeps the MPO TabBar. Android's arm
+ * (Material bottom navigation, PNG template icons) is built and switched off
+ * until an Android build proves it (FZ-8140).
  *
  * The bar's clearance is the inset this host publishes, as with the MPO
  * TabBar, so a Screen pads by it whether or not it scrolls. Each tab screen
@@ -20,9 +21,13 @@
  * otherwise flip the first scroll view to `automatic`, and UIKit would add
  * the bar's height a second time (FZ-8640).
  */
-import { useGlyphColor, useIdentityInkOnSurface } from "@multiplatform.one/theme";
+import {
+  useAccentTintedSurface,
+  useGlyphColor,
+  useIdentityInkOnSurface,
+} from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
-import { Platform, UIManager } from "react-native";
+import { type ImageSourcePropType, Platform, UIManager } from "react-native";
 import { setBottomChromeInset } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
 import { type TabBarItem, tabBarInactiveInk } from "./TabBar";
@@ -36,7 +41,17 @@ export const nativeTabsComponents = ["RNSTabsHost", "RNSTabsScreen"] as const;
 /** Points the system tab bar covers above the home-indicator band. */
 export const nativeTabBarHeight = 49;
 
-type IconProp = { ios: { type: "sfSymbol"; name: string } };
+type ImageIcon = { type: "imageSource"; imageSource: ImageSourcePropType };
+type IconProp = { ios?: { type: "sfSymbol"; name: string }; android?: ImageIcon };
+
+/**
+ * The platforms whose system tab bar TabHost draws. Android stays off until
+ * an emulator build shows the Material bar in light and dark (FZ-8140).
+ */
+export const nativeTabsPlatforms: Readonly<Record<string, boolean>> = {
+  ios: true,
+  android: false,
+};
 
 export interface NativeTabs {
   Host: ComponentType<{
@@ -47,6 +62,8 @@ export interface NativeTabs {
     tabBarItemIconColorActive?: string;
     tabBarItemTitleFontColor?: string;
     tabBarItemTitleFontColorActive?: string;
+    tabBarBackgroundColor?: string;
+    tabBarItemActiveIndicatorColor?: string;
     experimentalControlNavigationStateInJS?: boolean;
     onNativeFocusChange?: (event: { nativeEvent: { tabKey: string } }) => void;
   }>;
@@ -56,7 +73,7 @@ export interface NativeTabs {
     title?: string;
     isFocused?: boolean;
     icon?: IconProp;
-    selectedIcon?: IconProp["ios"];
+    selectedIcon?: { type: "sfSymbol"; name: string };
     tabBarItemAccessibilityLabel?: string;
     tabBarItemTestID?: string;
     overrideScrollViewContentInsetAdjustmentBehavior?: boolean;
@@ -74,8 +91,12 @@ const appSources: NativeTabsSources = {
 };
 
 /** react-native-screens' Tabs, or null when this platform or binary cannot draw them. */
-export function resolveNativeTabs(sources: NativeTabsSources, os: string): NativeTabs | null {
-  if (os !== "ios") return null;
+export function resolveNativeTabs(
+  sources: NativeTabsSources,
+  os: string,
+  platforms: Readonly<Record<string, boolean>> = nativeTabsPlatforms,
+): NativeTabs | null {
+  if (!platforms[os]) return null;
   try {
     if (!nativeTabsComponents.every((name) => sources.hasComponent(name))) return null;
     const tabs = sources.screens().Tabs;
@@ -92,9 +113,20 @@ function loadNativeTabs(): NativeTabs | null {
   return cached;
 }
 
-/** True when every item names the SF Symbol the system bar draws. */
-export function itemsHaveNativeIcons(items: readonly TabBarItem[]): boolean {
-  return items.length > 0 && items.every((item) => Boolean(item.nativeIcon?.sfSymbol));
+/** True when every item names the glyph this platform's system bar draws. */
+export function itemsHaveNativeIcons(items: readonly TabBarItem[], os = "ios"): boolean {
+  const glyph = (item: TabBarItem) =>
+    os === "android" ? item.nativeIcon?.android : item.nativeIcon?.sfSymbol;
+  return items.length > 0 && items.every((item) => Boolean(glyph(item)));
+}
+
+/** The item's glyphs in react-native-screens' per-platform icon shape. */
+export function nativeIconFor(item: TabBarItem): IconProp {
+  const { sfSymbol, android } = item.nativeIcon ?? {};
+  return {
+    ...(sfSymbol ? { ios: { type: "sfSymbol" as const, name: sfSymbol } } : {}),
+    ...(android ? { android: { type: "imageSource" as const, imageSource: android } } : {}),
+  };
 }
 
 export function NativeTabHost({
@@ -107,6 +139,8 @@ export function NativeTabHost({
   const { Host, Screen } = tabs;
   const accent = useIdentityInkOnSurface();
   const ink = useGlyphColor(tabBarInactiveInk);
+  const surface = useGlyphColor("$color2");
+  const indicator = useAccentTintedSurface();
   const deviceInset = useBottomInset();
   const [id] = useState(() => Symbol("native-tab-host"));
   const lastKey = useRef(activeKey ?? items[0]?.key);
@@ -126,6 +160,8 @@ export function NativeTabHost({
       tabBarItemIconColorActive={accent}
       tabBarItemTitleFontColor={ink}
       tabBarItemTitleFontColorActive={accent}
+      tabBarBackgroundColor={surface}
+      tabBarItemActiveIndicatorColor={indicator}
       experimentalControlNavigationStateInJS
       onNativeFocusChange={(event) => {
         const key = event.nativeEvent.tabKey;
@@ -138,7 +174,7 @@ export function NativeTabHost({
           tabKey={item.key}
           title={item.label}
           isFocused={item.key === focusedKey}
-          icon={{ ios: { type: "sfSymbol", name: item.nativeIcon!.sfSymbol } }}
+          icon={nativeIconFor(item)}
           selectedIcon={
             item.nativeIcon?.sfSymbolSelected
               ? { type: "sfSymbol", name: item.nativeIcon.sfSymbolSelected }
@@ -157,6 +193,6 @@ export function NativeTabHost({
 
 export function TabHost(props: TabHostProps) {
   const tabs = loadNativeTabs();
-  if (!tabs || !itemsHaveNativeIcons(props.items)) return <MpoTabHost {...props} />;
+  if (!tabs || !itemsHaveNativeIcons(props.items, Platform.OS)) return <MpoTabHost {...props} />;
   return <NativeTabHost tabs={tabs} {...props} />;
 }

package/src/appShell/TabHost.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { HouseIcon, LightningIcon, SparkleIcon, SquaresFourIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { Screen } from "../layouts/page";
+import { Text } from "../Text";
+import type { TabBarItem } from "./TabBar";
+import { TabHost } from "./TabHost";
+
+const meta: Meta<typeof TabHost> = {
+  title: "Components/TabHost",
+  component: TabHost,
+  parameters: { status: { type: "beta" }, layout: "fullscreen" },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabHost>;
+
+const items: TabBarItem[] = [
+  {
+    key: "/",
+    label: "Home",
+    icon: HouseIcon,
+    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill" },
+  },
+  { key: "/pokemon", label: "Pokemon", icon: SparkleIcon, nativeIcon: { sfSymbol: "sparkles" } },
+  {
+    key: "/moves",
+    label: "Moves",
+    icon: LightningIcon,
+    nativeIcon: { sfSymbol: "bolt", sfSymbolSelected: "bolt.fill" },
+  },
+  {
+    key: "/backoffice",
+    label: "Backoffice",
+    icon: SquaresFourIcon,
+    nativeIcon: { sfSymbol: "square.grid.2x2", sfSymbolSelected: "square.grid.2x2.fill" },
+  },
+];
+
+const rows = Array.from({ length: 30 }, (_, index) => `Row ${index + 1}`);
+
+function Sections({ initial, outside }: { initial: string; outside?: boolean }) {
+  const [active, setActive] = useState(initial);
+  const label = items.find((item) => item.key === active)?.label;
+  return (
+    <TabHost items={items} activeKey={outside ? undefined : active} onTabPress={setActive}>
+      <Screen>
+        <Text>{outside ? "A route under no tab" : label}</Text>
+        {rows.map((row) => (
+          <Text key={row}>{row}</Text>
+        ))}
+      </Screen>
+    </TabHost>
+  );
+}
+
+/**
+ * One tab config: the system tab bar on an iPhone whose binary carries
+ * native tabs, the MPO floating TabBar on the web, GNOME, Android and an
+ * older binary.
+ */
+export const Default: Story = {
+  render: () => <Sections initial="/pokemon" />,
+};
+
+/**
+ * A route under no tab (no `activeKey`): no bar on any platform, and the
+ * screen keeps its place. AppShell keeps the bar on routes below a tab.
+ */
+export const OutsideTabs: Story = {
+  render: () => <Sections initial="/pokemon" outside />,
+};

package/src/appShell/index.ts

@@ -6,4 +6,5 @@ export { TabHost, type TabHostProps } from "./TabHost";
 export * from "./Springboard";
 export type { AppEntry } from "./appTile";
 export * from "./SettingsSplit";
+export * from "./AppShell";
 export { useBottomChromeInset } from "./bottomChrome";

package/src/layouts/PageHeader.stories.tsx

@@ -191,9 +191,9 @@ function Meter({ label, value, detail }: { label: string; value: number; detail:
   );
 }
 
-// FZ-8480 LC-112 (Round 37): each icon trigger's panel covers its button and
-// draws it again in place as an X that closes the panel. The join panel's
-// header shares the X's line.
+// LC-112 (FZ-8665 Round 45): each icon trigger's panel covers its button with
+// no X, and a press outside closes it. The join panel's title sits on the
+// panel's padding.
 function AddNode() {
   return (
     <Popover anchorMode="cover-trigger">

package/src/layouts/Sidebar.spec.tsx

@@ -1,7 +1,17 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { Sidebar } from "./sidebar";
 
+const surface = vi.hoisted(() => ({ touch: false }));
+vi.mock("@multiplatform.one/theme", async (original) => ({
+  ...(await original<typeof import("@multiplatform.one/theme")>()),
+  useTouchSurface: () => surface.touch,
+}));
+
+afterEach(() => {
+  surface.touch = false;
+});
+
 describe("Sidebar selection tier", () => {
   it("paints active row labels and metadata with selection ink", () => {
     const result = renderWithProviders(
@@ -120,3 +130,84 @@ describe("Sidebar footer", () => {
     expect(result.getByTestId("rail").querySelector("[data-sidebar-footer]")).toBeNull();
   });
 });
+
+describe("Sidebar rows on touch (FZ-8649)", () => {
+  const sections = [{ items: [{ value: "a", label: "Alpha", onPress: () => {} }] }];
+
+  it("holds a row to the 44pt floor on a touch surface", () => {
+    surface.touch = true;
+    const result = renderWithProviders(<Sidebar sections={sections} />);
+    expect(result.container.querySelector("[data-sidebar-row]")!.className).toContain("_mih-44px");
+  });
+
+  it("keeps a pointer rail at its token height", () => {
+    const result = renderWithProviders(<Sidebar sections={sections} />);
+    expect(result.container.querySelector("[data-sidebar-row]")!.className).not.toContain(
+      "_mih-44px",
+    );
+  });
+});
+
+describe("Sidebar hug (FZ-8649)", () => {
+  const sections = [{ items: [{ value: "a", label: "Alpha" }] }];
+  // Rows sit directly in the rail's first child unless a scroller wraps them.
+  const rowsAreDirect = (rail: HTMLElement) =>
+    Array.from(rail.firstElementChild!.children).some(
+      (child) => child.getAttribute("role") === "group",
+    );
+
+  it("fills its column by default and scrolls its rows", () => {
+    const result = renderWithProviders(
+      <Sidebar sections={sections} testID="rail" footer={<span>Account</span>} />,
+    );
+    const rail = result.getByTestId("rail");
+    expect(rail.className).toContain("_fg-1");
+    expect(rail.className).toContain("_h-10037");
+    expect(rail.querySelector("[data-sidebar-footer]")!.className).toContain("_mah-5037");
+    expect(rowsAreDirect(rail)).toBe(false);
+  });
+
+  it("takes the height of its rows and leaves scrolling to the container", () => {
+    const result = renderWithProviders(
+      <Sidebar sections={sections} testID="rail" hug footer={<span>Account</span>} />,
+    );
+    const rail = result.getByTestId("rail");
+    expect(rail.className).not.toContain("_fg-1");
+    expect(rail.className).not.toContain("_h-10037");
+    expect(rail.querySelector("[data-sidebar-footer]")!.className).not.toContain("_mah-5037");
+    expect(rowsAreDirect(rail)).toBe(true);
+    expect(result.getByText("Alpha")).toBeTruthy();
+    expect(result.getByText("Account")).toBeTruthy();
+  });
+});
+
+describe("Sidebar on the shell material (FZ-7996)", () => {
+  const sections = [
+    {
+      items: [
+        { value: "home", label: "Home", active: true, onPress: () => {} },
+        { value: "pokemon", label: "Pokemon", onPress: () => {} },
+        { value: "moves", label: "Moves", onPress: () => {} },
+      ],
+    },
+  ];
+
+  it("sets every row as a rounded pill with no rule between rows", () => {
+    const result = renderWithProviders(<Sidebar material sections={sections} />);
+    const rows = [...result.container.querySelectorAll("[data-sidebar-row]")];
+    expect(rows).toHaveLength(3);
+    for (const row of rows) {
+      expect(row.className).toMatch(/_btlr-/);
+      expect(row.className).toMatch(/_bbrr-/);
+    }
+    expect(rows[1]!.previousElementSibling).toBe(rows[0]);
+    expect(rows[2]!.previousElementSibling).toBe(rows[1]);
+  });
+
+  it("keeps the stacked group with rules between rows off the material", () => {
+    const result = renderWithProviders(<Sidebar sections={sections} />);
+    const rows = [...result.container.querySelectorAll("[data-sidebar-row]")];
+    expect(rows[1]!.previousElementSibling).not.toBe(rows[0]);
+    expect(rows[1]!.previousElementSibling?.hasAttribute("data-sidebar-row")).toBe(false);
+  });
+});

package/src/layouts/page.tsx

@@ -67,6 +67,7 @@ import {
   ScreenScrollScope,
   TopBarSlot,
   useLargeTitle,
+  useReportScreenScroll,
   useScreenScroll,
   useScreenScrollController,
   useTopBarSlot,
@@ -97,6 +98,12 @@ function negateSpaceToken(token: string): `$-${string}` {
  */
 export const CONTENT_MAX_WIDTH = layoutBreakpoints.xl;
 
+/**
+ * The readable column an app shell centres its content in at regular width
+ * (UIKit's readableContentGuide): the two-pane budget breakpoint.
+ */
+export const READABLE_MAX_WIDTH = layoutBreakpoints.expanded;
+
 export interface ScreenProps extends YStackProps {
   /** Wrap content in a ScrollView. Default: true. */
   scroll?: boolean;
@@ -271,6 +278,7 @@ function PageShell({
 }: ScreenProps) {
   const { knobProps } = useResolvedKnobs({ component: "Screen" });
   const scrollState = useScreenScrollController();
+  useReportScreenScroll(scrollState.state, Boolean(topBar));
   const [accessories] = useState(createBottomAccessoryStore);
   const chromeInset = useBottomChromeInset();
   const inset = noPadding ? null : (knobProps.panelPadding.padding as string);

package/src/layouts/pageActionButton.spec.tsx

@@ -57,11 +57,15 @@ describe("PageActionButton (LC-128, LC-172)", () => {
 
   it("inks its glyph with the accent and keeps the back control's recipe", () => {
     const { action, menu } = renderBar();
-    // The glyph is currentColor: the frame's colour is the accent ink on the
-    // bar. The "…" beside it takes the bar tint too (LC-145, FZ-7993).
+    // The glyph carries the bar tint on its fill and its stroke, one ink
+    // (FZ-8649). The "…" beside it takes the bar tint too (LC-145, FZ-7993).
     expect(rest(action, "_col-")).toHaveLength(1);
     expect(rest(menu, "_col-")).toHaveLength(1);
-    expect(action.querySelector("svg")?.getAttribute("fill")).toBe("currentColor");
+    const glyph = action.querySelector("svg");
+    const ink = glyph?.getAttribute("fill");
+    expect(ink).toBeTruthy();
+    expect(ink).not.toBe("currentColor");
+    if (glyph?.hasAttribute("stroke")) expect(glyph.getAttribute("stroke")).toBe(ink);
     expect(action.getAttribute("data-size-token")).toBe(menu.getAttribute("data-size-token"));
     expect(action.getAttribute("data-mp-button-height")).toBe(
       menu.getAttribute("data-mp-button-height"),