@multiplatform.one/components 7.83.1 → 7.84.0

package/src/appShell/TabBar.tsx

@@ -10,14 +10,10 @@
  * (`useBottomChromeInset`), so the last row clears it. The bottom accessory
  * (LC-174, e.g. a pager) floats as its own smaller capsule above it. A theme
  * changes the colours only: the active item is the theme's accent as
- * readable ink on an accent-wash pill, inactive items are the secondary text
- * ink.
+ * readable ink (`useActiveTabInk`, the same pick as the system tab bar's) on
+ * an accent-wash pill, inactive items are the secondary text ink.
  */
-import {
-  useAccentOnSurface,
-  useAccentTintedSurface,
-  useGlyphColor,
-} from "@multiplatform.one/theme";
+import { useAccentTintedSurface, useActiveTabInk, useGlyphColor } from "@multiplatform.one/theme";
 import { zIndex } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
@@ -134,7 +130,7 @@ function TabBarButton({
   onPress?: () => void;
   testID: string;
 }) {
-  const accent = useAccentOnSurface();
+  const accent = useActiveTabInk();
   const wash = useAccentTintedSurface();
   const secondaryInk = useGlyphColor(tabBarInactiveInk);
   const ink = active ? accent : secondaryInk;

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

@@ -8,6 +8,12 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  BottomAccessoryHost,
+  BottomAccessoryScope,
+  BottomAccessory,
+  createBottomAccessoryStore,
+} from "../layouts/bottomAccessory";
 import { useBottomChromeInset } from "./bottomChrome";
 import type { TabBarItem } from "./TabBar";
 import {
@@ -18,7 +24,10 @@ import {
   itemsHaveNativeIcons,
   nativeIconFor,
   nativeTabBarHeight,
+  nativeTabsAccessoryComponent,
+  nativeTabsAccessoryHeight,
   nativeTabsPlatforms,
+  resolveNativeAccessory,
   resolveNativeTabs,
 } from "./TabHost.native";
 
@@ -49,9 +58,12 @@ const items: TabBarItem[] = [
 ];
 
 const fakeTabs: NativeTabs = {
-  Host: ({ children, onNativeFocusChange, tabBarHidden }) => (
+  Host: ({ children, onNativeFocusChange, tabBarHidden, bottomAccessory }) => (
     <div data-testid="native-host" data-hidden={String(Boolean(tabBarHidden))}>
       {children}
+      {bottomAccessory ? (
+        <aside data-testid="native-bottom-accessory">{bottomAccessory("regular")}</aside>
+      ) : null}
       <button
         type="button"
         data-testid="native-press-moves"
@@ -271,3 +283,99 @@ describe("TabHost fallback", () => {
     expect(screen.queryByTestId("tab-bar")).toBeNull();
   });
 });
+
+describe("bottom accessory under the system bar (FZ-7995, LC-174)", () => {
+  const registered = [...["RNSTabsHost", "RNSTabsScreen"], nativeTabsAccessoryComponent];
+
+  it("hosts it on iOS 26 when the binary carries the accessory view", () => {
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "ios",
+        "26.0",
+      ),
+    ).toBe(true);
+  });
+
+  it("keeps the page's slot before iOS 26, on a binary without the view, off iOS, or when the probe throws", () => {
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "ios",
+        "18.5",
+      ),
+    ).toBe(false);
+    expect(
+      resolveNativeAccessory(
+        sources(["RNSTabsHost", "RNSTabsScreen"], () => ({})),
+        "ios",
+        "26.1",
+      ),
+    ).toBe(false);
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "android",
+        36,
+      ),
+    ).toBe(false);
+    const throws = () => {
+      throw new Error("unavailable");
+    };
+    expect(resolveNativeAccessory({ hasComponent: throws }, "ios", "26.0")).toBe(false);
+  });
+
+  function renderWithPager(hostsAccessory: boolean, pushed = false) {
+    const activeKey = pushed ? undefined : "/moves";
+    const store = createBottomAccessoryStore();
+    return renderWithProviders(
+      <NativeTabHost
+        tabs={fakeTabs}
+        items={items}
+        activeKey={activeKey}
+        onTabPress={vi.fn()}
+        hostsAccessory={hostsAccessory}
+      >
+        <BottomAccessoryScope store={store}>
+          <div data-testid="page">
+            <BottomAccessory>
+              <span data-testid="pager">1–15 of 900</span>
+            </BottomAccessory>
+          </div>
+          <BottomAccessoryHost store={store} />
+        </BottomAccessoryScope>
+        <Inset />
+      </NativeTabHost>,
+    );
+  }
+
+  it("moves the page's pager into the system bar's accessory and clears it", () => {
+    renderWithPager(true);
+    const accessory = screen.getByTestId("native-bottom-accessory");
+    expect(accessory.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.getByTestId("native-tab-accessory")).toBeTruthy();
+    expect(document.querySelector('[data-bottom-accessory="slot"]')).toBeNull();
+    expect(Number(screen.getByTestId("inset").textContent)).toBeGreaterThanOrEqual(
+      nativeTabBarHeight + nativeTabsAccessoryHeight,
+    );
+  });
+
+  it("falls back to the page's slot, standing on the bar, where the system bar cannot host it", () => {
+    renderWithPager(false);
+    expect(screen.queryByTestId("native-bottom-accessory")).toBeNull();
+    const slot = document.querySelector('[data-bottom-accessory="slot"]');
+    expect(slot?.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.getByTestId("bottom-accessory-lift")).toBeTruthy();
+    const inset = Number(screen.getByTestId("inset").textContent);
+    expect(inset).toBeGreaterThanOrEqual(nativeTabBarHeight);
+    expect(inset).toBeLessThan(nativeTabBarHeight + nativeTabsAccessoryHeight);
+  });
+
+  it("returns the pager to the slot on a pushed screen, where the bar is hidden", () => {
+    renderWithPager(true, true);
+    expect(screen.queryByTestId("native-bottom-accessory")).toBeNull();
+    const slot = document.querySelector('[data-bottom-accessory="slot"]');
+    expect(slot?.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.queryByTestId("bottom-accessory-lift")).toBeNull();
+  });
+});

package/src/appShell/TabHost.native.tsx

@@ -15,21 +15,23 @@
  * (Material bottom navigation, PNG template icons) is built and switched off
  * until an Android build proves it (FZ-8140).
  *
+ * A page's bottom accessory (LC-174, e.g. a DataTable pager) rides the
+ * system bar too: on iOS 26, where the binary carries RNSTabsBottomAccessory,
+ * it is UITabBarController's bottom accessory, the system's own glass capsule
+ * above the bar (FZ-7995). Anywhere else it stays in the page's slot, which
+ * sits above the bar.
+ *
  * 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
  * leaves its scroll view's inset adjustment off: react-native-screens would
  * otherwise flip the first scroll view to `automatic`, and UIKit would add
  * the bar's height a second time (FZ-8640).
  */
-import {
-  useAccentTintedSurface,
-  useGlyphColor,
-  useIdentityInkOnSurface,
-} from "@multiplatform.one/theme";
+import { useAccentTintedSurface, useActiveTabInk, useGlyphColor } from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
 import { type ImageSourcePropType, Platform, UIManager } from "react-native";
-import { YStack } from "tamagui";
-import { setBottomChromeInset } from "./bottomChrome";
+import { XStack, YStack } from "tamagui";
+import { setBottomChromeInset, setFloatingBarMounted, useBottomAccessory } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
 import { type TabBarItem, tabBarInactiveInk } from "./TabBar";
 import { MpoTabHost, type TabHostProps } from "./MpoTabHost";
@@ -42,6 +44,12 @@ export const nativeTabsComponents = ["RNSTabsHost", "RNSTabsScreen"] as const;
 /** Points the system tab bar covers above the home-indicator band. */
 export const nativeTabBarHeight = 49;
 
+/** The Fabric component behind UITabBarController's bottom accessory (iOS 26). */
+export const nativeTabsAccessoryComponent = "RNSTabsBottomAccessory";
+
+/** Points the bottom accessory's capsule adds above the system bar, its gap included. */
+export const nativeTabsAccessoryHeight = 56;
+
 type ImageIcon = { type: "imageSource"; imageSource: ImageSourcePropType };
 type IconProp = { ios?: { type: "sfSymbol"; name: string }; android?: ImageIcon };
 
@@ -66,6 +74,7 @@ export interface NativeTabs {
     tabBarBackgroundColor?: string;
     tabBarItemActiveIndicatorColor?: string;
     experimentalControlNavigationStateInJS?: boolean;
+    bottomAccessory?: (environment: "regular" | "inline") => ReactNode;
     onNativeFocusChange?: (event: { nativeEvent: { tabKey: string } }) => void;
   }>;
   Screen: ComponentType<{
@@ -107,13 +116,39 @@ export function resolveNativeTabs(
   }
 }
 
+/**
+ * True when the system bar can host the page's bottom accessory: iOS 26 or
+ * later (UITabAccessory) and a binary that carries react-native-screens'
+ * accessory view. Otherwise the accessory stays in the page's slot.
+ */
+export function resolveNativeAccessory(
+  sources: Pick<NativeTabsSources, "hasComponent">,
+  os: string,
+  version: string | number,
+): boolean {
+  if (os !== "ios" || Number.parseInt(String(version), 10) < 26) return false;
+  try {
+    return sources.hasComponent(nativeTabsAccessoryComponent);
+  } catch {
+    return false;
+  }
+}
+
 let cached: NativeTabs | null | undefined;
+let cachedAccessory: boolean | undefined;
 
 function loadNativeTabs(): NativeTabs | null {
   if (cached === undefined) cached = resolveNativeTabs(appSources, Platform.OS);
   return cached;
 }
 
+function loadNativeAccessory(): boolean {
+  if (cachedAccessory === undefined) {
+    cachedAccessory = resolveNativeAccessory(appSources, Platform.OS, Platform.Version);
+  }
+  return cachedAccessory;
+}
+
 /** 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) =>
@@ -130,15 +165,31 @@ export function nativeIconFor(item: TabBarItem): IconProp {
   };
 }
 
+/** The accessory's content inside the system capsule: one centred row. */
+function NativeAccessoryContent({ children }: { children: ReactNode }) {
+  return (
+    <XStack
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="$3"
+      data-testid="native-tab-accessory"
+    >
+      {children}
+    </XStack>
+  );
+}
+
 export function NativeTabHost({
   tabs,
   items,
   activeKey,
   onTabPress,
   children,
-}: TabHostProps & { tabs: NativeTabs }) {
+  hostsAccessory = false,
+}: TabHostProps & { tabs: NativeTabs; hostsAccessory?: boolean }) {
   const { Host, Screen } = tabs;
-  const accent = useIdentityInkOnSurface();
+  const accent = useActiveTabInk();
   const ink = useGlyphColor(tabBarInactiveInk);
   const surface = useGlyphColor("$color2");
   const indicator = useAccentTintedSurface();
@@ -147,11 +198,28 @@ export function NativeTabHost({
   const lastKey = useRef(activeKey ?? items[0]?.key);
   if (activeKey) lastKey.current = activeKey;
   const focusedKey = lastKey.current;
+  const hosting = hostsAccessory && Boolean(activeKey);
+  const pageAccessory = useBottomAccessory();
+  const accessory = hosting ? pageAccessory : null;
 
   useEffect(() => {
-    setBottomChromeInset(id, activeKey ? nativeTabBarHeight + deviceInset : null);
-  }, [activeKey, deviceInset, id]);
-  useEffect(() => () => setBottomChromeInset(id, null), [id]);
+    setBottomChromeInset(
+      id,
+      activeKey
+        ? nativeTabBarHeight + deviceInset + (accessory ? nativeTabsAccessoryHeight : 0)
+        : null,
+    );
+  }, [activeKey, accessory, deviceInset, id]);
+  useEffect(() => {
+    setFloatingBarMounted(id, hosting);
+  }, [hosting, id]);
+  useEffect(
+    () => () => {
+      setBottomChromeInset(id, null);
+      setFloatingBarMounted(id, false);
+    },
+    [id],
+  );
 
   return (
     <Host
@@ -164,6 +232,9 @@ export function NativeTabHost({
       tabBarBackgroundColor={surface}
       tabBarItemActiveIndicatorColor={indicator}
       experimentalControlNavigationStateInJS
+      bottomAccessory={
+        accessory ? () => <NativeAccessoryContent>{accessory}</NativeAccessoryContent> : undefined
+      }
       onNativeFocusChange={(event) => {
         const key = event.nativeEvent.tabKey;
         if (key !== activeKey) onTabPress(key);
@@ -199,5 +270,5 @@ export function NativeTabHost({
 export function TabHost(props: TabHostProps) {
   const tabs = loadNativeTabs();
   if (!tabs || !itemsHaveNativeIcons(props.items, Platform.OS)) return <MpoTabHost {...props} />;
-  return <NativeTabHost tabs={tabs} {...props} />;
+  return <NativeTabHost tabs={tabs} hostsAccessory={loadNativeAccessory()} {...props} />;
 }

package/src/hoverTouchPath.coarse.spec.tsx

@@ -0,0 +1,166 @@
+/**
+ * LC-177 HOVER-HAS-TOUCH-PATH, the coarse-pointer probe (FZ-8031).
+ *
+ * `scripts/hover-touch-path.spec.mjs` declares every public/* file that
+ * listens for hover, and names the touch or focus path of each one that
+ * reveals something. This probe walks each declared reveal the way a phone
+ * or a keyboard does: the pointer is coarse with no hover, no hover event is
+ * ever dispatched, and the revealed thing must still be reached.
+ *
+ * happy-dom cascades no Tamagui CSS, so paint is read from the atomic
+ * classes each node asks for (`_bg-`, `_o-`, `_pe-`) and its inline style.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BarChart } from "./charts/BarChart";
+import type { ChartDatum } from "./charts/types";
+import { Video } from "./Video";
+import { GanttView, type GanttTask } from "./views/Gantt";
+
+vi.mock("expo-video", () => ({
+  useVideoPlayer: () => ({ loop: false, muted: false, play: vi.fn(), pause: vi.fn() }),
+  VideoView: () => null,
+}));
+
+const here = dirname(fileURLToPath(import.meta.url));
+const registry = readFileSync(join(here, "../../../scripts/hover-touch-path.spec.mjs"), "utf8");
+const declaredReveals = [...registry.matchAll(/"(public\/[^"]+)": \{\s*kind: "reveal"/g)].map(
+  (m) => m[1],
+);
+
+const hoverEvents = ["mouseover", "mouseenter", "pointerover", "pointerenter"] as const;
+let hovered: string[];
+const recordHover = (event: Event) => hovered.push(event.type);
+let originalMatchMedia: typeof window.matchMedia;
+
+beforeEach(() => {
+  hovered = [];
+  for (const type of hoverEvents) document.addEventListener(type, recordHover, true);
+  originalMatchMedia = window.matchMedia;
+  window.matchMedia = vi.fn((query: string) => ({
+    matches: /hover:\s*none|pointer:\s*coarse/.test(query),
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  for (const type of hoverEvents) document.removeEventListener(type, recordHover, true);
+  window.matchMedia = originalMatchMedia;
+  cleanup();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+function paint(el: Element, prefix: string, styleKey: string): string {
+  const resting = Array.from(el.classList).filter(
+    (c) => c.startsWith(prefix) && !/^_[a-zA-Z]+-\d*(hover|active|focus|press)/.test(c),
+  );
+  const inline = (el as HTMLElement).style?.getPropertyValue(styleKey) ?? "";
+  return [...resting, inline].filter(Boolean).join(" ");
+}
+
+const describeNode = (el: Element) => `class="${el.className}" style="${el.getAttribute("style")}"`;
+
+/** Each declared reveal and how a coarse pointer reaches it without hover. */
+const probes: Record<string, () => void | Promise<void>> = {
+  "public/components/src/views/Gantt.tsx": () => {
+    const tasks: GanttTask[] = [
+      {
+        id: "t1",
+        title: "Implementation",
+        start: new Date(2026, 2, 12),
+        end: new Date(2026, 2, 18),
+      },
+    ];
+    const { container } = renderWithProviders(<GanttView tasks={tasks} onItemMove={vi.fn()} />);
+    const bar = container.querySelector('[data-gantt-bar="t1"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    const handles = () =>
+      Array.from(bar.querySelectorAll("[data-gantt-resize-handle]")) as HTMLElement[];
+    expect(handles().length).toBe(2);
+    for (const handle of handles()) {
+      expect(paint(handle, "_bg-", "background-color"), describeNode(handle)).toMatch(
+        /transparent/,
+      );
+    }
+    act(() => bar.focus());
+    for (const handle of handles()) {
+      expect(paint(handle, "_bg-", "background-color"), describeNode(handle)).not.toMatch(
+        /transparent/,
+      );
+    }
+  },
+
+  "public/components/src/Video/PlayerChrome.tsx": () => {
+    vi.useFakeTimers();
+    const { container, getByTestId, getByLabelText } = renderWithProviders(
+      <Video src="https://example.com/clip.mp4" title="Demo" controls muted={false} />,
+    );
+    const video = container.querySelector("video") as HTMLVideoElement;
+    expect(video).toBeTruthy();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    const chrome = getByTestId("video-chrome");
+    const shut = () => /(^|\s)(_pe-none|none)(\s|$)/.test(paint(chrome, "_pe-", "pointer-events"));
+    expect(shut(), describeNode(chrome)).toBe(true);
+    act(() => getByLabelText("Mute").focus());
+    expect(shut(), describeNode(chrome)).toBe(false);
+  },
+
+  "public/components/src/charts/series.tsx": () => {
+    const data: ChartDatum[] = [
+      { label: "Jan", value: 400 },
+      { label: "Feb", value: 380 },
+    ];
+    const onDatumPress = vi.fn();
+    const onDatumHoverIn = vi.fn();
+    renderWithProviders(
+      <BarChart
+        data={data}
+        width={400}
+        onDatumPress={onDatumPress}
+        onDatumHoverIn={onDatumHoverIn}
+      />,
+    );
+    const target = document.querySelector('svg rect[aria-label="Feb: 380"]');
+    expect(target).toBeTruthy();
+    fireEvent.click(target as Element);
+    expect(onDatumPress).toHaveBeenCalledWith(data[1], 1);
+    expect(onDatumHoverIn).not.toHaveBeenCalled();
+  },
+};
+
+describe("LC-177: a coarse pointer reaches every hover reveal without hover", () => {
+  it("probes exactly the reveals scripts/hover-touch-path.spec.mjs declares", () => {
+    expect(declaredReveals.length).toBeGreaterThan(0);
+    expect(Object.keys(probes).sort()).toEqual([...declaredReveals].sort());
+  });
+
+  it("runs under a coarse pointer with no hover", () => {
+    expect(window.matchMedia("(hover: none)").matches).toBe(true);
+    expect(window.matchMedia("(pointer: coarse)").matches).toBe(true);
+    expect(window.matchMedia("(hover: hover)").matches).toBe(false);
+  });
+
+  for (const file of Object.keys(probes)) {
+    it(`reaches ${file.replace("public/components/src/", "")}'s reveal`, async () => {
+      await probes[file]();
+      expect(hovered, "the probe must never hover").toEqual([]);
+    });
+  }
+});

package/src/icons/themedButtonInk.spec.tsx

@@ -0,0 +1,117 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-8577: a `themed` glyph inside a Button fills with the Button's ink on
+ * web, as it does on native. Before, an accentInk icon Button painted its
+ * frame in the bar tint while the svg filled with the theme's `var(--color)`,
+ * so the SHC console's search, graph and gauge glyphs drew near-black on web
+ * and purple on iOS. The same held for an intent icon button and a disabled
+ * one (FZ-8044, LC-40: the disabled twin keeps its ink, dimmed).
+ *
+ * jsdom cascades no Tamagui CSS, so the frame's ink is read from the rule
+ * behind its `_col-` class, and the glyph's from its own fill: either that
+ * ink itself or `currentColor`, which inherits it.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { Button } from "@multiplatform.one/forms";
+import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { themed } from "./themed";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const SearchGlyph = themed(MagnifyingGlassIcon);
+
+function renderUnder(ui: ReactElement, theme: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={theme}>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function ruleValue(className: string, property: string): string | null {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  return null;
+}
+
+function frameInk(label: string): string | null {
+  const frame = screen.getByLabelText(label);
+  const cls = Array.from(frame.classList).find(
+    (c) => c.startsWith("_col-") && !/^_col-0(hover|active|focus|press)/.test(c),
+  );
+  return cls ? ruleValue(cls, "color") : null;
+}
+
+function glyphFill(label: string): string | null {
+  const svg = screen.getByLabelText(label).querySelector("svg");
+  return svg?.getAttribute("fill") ?? null;
+}
+
+/** The glyph takes the frame's ink: the same value, or currentColor, which inherits it. */
+function expectGlyphTakesFrameInk(label: string) {
+  const ink = frameInk(label);
+  const fill = glyphFill(label);
+  expect(ink, `${label} frame ink`).toBeTruthy();
+  expect(fill, `${label} glyph fill`).toBeTruthy();
+  expect(fill).not.toBe("var(--color)");
+  if (fill !== "currentColor") expect(fill?.toLowerCase()).toBe(ink?.toLowerCase());
+}
+
+describe("FZ-8577: a themed glyph in a Button fills with the Button's ink on web", () => {
+  for (const theme of ["light_purple", "dark_purple", "light_blue", "dark_blue"]) {
+    it(`${theme}: an accentInk icon button in a bar`, () => {
+      renderUnder(
+        <Surface bar>
+          <Button chromeless accentInk icon={SearchGlyph} aria-label="Search" />
+        </Surface>,
+        theme,
+      );
+      expectGlyphTakesFrameInk("Search");
+    });
+
+    it(`${theme}: an accentInk icon button in content`, () => {
+      renderUnder(<Button chromeless accentInk icon={SearchGlyph} aria-label="Find" />, theme);
+      expectGlyphTakesFrameInk("Find");
+    });
+
+    it(`${theme}: an intent icon button`, () => {
+      renderUnder(<Button error icon={SearchGlyph} aria-label="Remove" />, theme);
+      expectGlyphTakesFrameInk("Remove");
+    });
+
+    it(`${theme}: a disabled accentInk icon button keeps the enabled twin's ink`, () => {
+      renderUnder(
+        <Surface bar>
+          <Button chromeless accentInk icon={SearchGlyph} aria-label="Next" />
+          <Button chromeless accentInk disabled icon={SearchGlyph} aria-label="Previous" />
+        </Surface>,
+        theme,
+      );
+      expectGlyphTakesFrameInk("Previous");
+      expect(frameInk("Previous")).toBe(frameInk("Next"));
+    });
+  }
+
+  it("a glyph with its own colour keeps it", () => {
+    renderUnder(
+      <Surface bar>
+        <Button chromeless accentInk icon={<SearchGlyph color="red" />} aria-label="Own" />
+      </Surface>,
+      "light_purple",
+    );
+    expect(glyphFill("Own")).toBe("red");
+  });
+});

package/src/layouts/PageTemplates.tsx

@@ -32,7 +32,7 @@ import {
 } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 import { XStack, YStack, isWeb, type SizeTokens } from "tamagui";
-import { PageHeader, Screen, ScreenToolbar, type ScreenProps } from "./page";
+import { PageHeader, PushedPage, Screen, ScreenToolbar, type ScreenProps } from "./page";
 import { SupportingPaneLayout } from "./PaneScaffold";
 import { useShellSidebarPanel } from "./shellSidebarSlot";
 
@@ -266,16 +266,19 @@ export function DetailPageLayout({
   return (
     // LC-157: the toolbar is the Screen's pinned top bar, so it stays put
     // while the record scrolls and takes the title once the header scrolls away.
-    <Screen
-      data-canonical="detail-page"
-      topBar={toolbar}
-      // LC-263: one readable column; a supporting pane gets the full width.
-      maxWidth={aside == null ? DETAIL_READABLE_WIDTH : undefined}
-      {...rest}
-    >
-      {renderTemplateHeader({ title, subtitle, actions, header, nav })}
-      {body}
-    </Screen>
+    // LC-270: a detail page is pushed, so on a phone its title starts there.
+    <PushedPage>
+      <Screen
+        data-canonical="detail-page"
+        topBar={toolbar}
+        // LC-263: one readable column; a supporting pane gets the full width.
+        maxWidth={aside == null ? DETAIL_READABLE_WIDTH : undefined}
+        {...rest}
+      >
+        {renderTemplateHeader({ title, subtitle, actions, header, nav })}
+        {body}
+      </Screen>
+    </PushedPage>
   );
 }