@multiplatform.one/components 7.7.4 → 7.8.0

package/src/CopyField/index.tsx

@@ -12,15 +12,16 @@
 import { Input, type InputProps } from "@multiplatform.one/forms";
 import { YStack } from "tamagui";
 import { NotifyRegion } from "../feedback/NotifyHost";
-import { reportCopy } from "../feedback/copy";
+import { useCopyFeedback } from "../feedback/copy";
 
 export type CopyFieldProps = Omit<InputProps, "copy" | "onCopyResult" | "secureTextEntry">;
 
 export function CopyField(props: CopyFieldProps) {
+  const { region, report } = useCopyFeedback();
   return (
     <YStack width="100%">
-      <Input {...props} readOnly copy onCopyResult={reportCopy} />
-      <NotifyRegion scope="field" compact />
+      <Input {...props} readOnly copy onCopyResult={report} />
+      <NotifyRegion scope="field" region={region} compact />
     </YStack>
   );
 }

package/src/DropdownMenu/DropdownMenu.spec.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -509,3 +510,113 @@ describe("DropdownMenu FloatingPanel cover contract", () => {
     expect(edit.getAttribute("data-mp-ring-offset")).toBe("0");
   });
 });
+
+describe("DropdownMenu.Content onCloseAutoFocus (MPO-29)", () => {
+  for (const preventRestore of [false, true]) {
+    it(`${preventRestore ? "suppresses" : "performs"} actual delayed trigger restoration on Escape`, async () => {
+      const onCloseAutoFocus = vi.fn((event) => {
+        if (preventRestore) event.preventDefault();
+      });
+      const result = renderWithProviders(
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button>Heading</Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+            <DropdownMenu.Item>H1</DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>,
+      );
+      const trigger = result.getByText("Heading").closest("button")!;
+      trigger.focus();
+      fireEvent.click(trigger);
+      await waitFor(() => expect(document.querySelector('[role="menuitem"]')).toBeTruthy());
+      const item = document.querySelector('[role="menuitem"]') as HTMLElement;
+      item.focus();
+      fireEvent.keyDown(item, { key: "Escape" });
+      await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeFalsy());
+      await act(() => new Promise((resolve) => setTimeout(resolve, 400)));
+      expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+      if (preventRestore) expect(document.activeElement).not.toBe(trigger);
+      else expect(document.activeElement).toBe(trigger);
+    });
+  }
+
+  it("fires once when an item select closes the menu", async () => {
+    const onCloseAutoFocus = vi.fn();
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>Actions</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+          <DropdownMenu.Item>Edit</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitem"]') as HTMLElement);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+    expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+    const event = onCloseAutoFocus.mock.calls[0][0] as {
+      preventDefault: () => void;
+      defaultPrevented: boolean;
+    };
+    expect(event.defaultPrevented).toBe(false);
+    event.preventDefault();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("fires once when a closeOnSelect=false item closes via the parent open state", async () => {
+    // HeadingPicker / ListPicker / MoreDropdown: they keep closeOnSelect
+    // false so the item does not ctx.close(), then they setOpen(false)
+    // themselves after executeCommand. That is a controlled close, not
+    // ctx.close() and not FloatingPanel dismissing on its own.
+    const onCloseAutoFocus = vi.fn();
+    function Harness() {
+      const [open, setOpen] = useState(true);
+      return (
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenu.Trigger asChild>
+            <Button>Heading</Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+            <DropdownMenu.Item closeOnSelect={false} onSelect={() => setOpen(false)}>
+              H1
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      );
+    }
+    renderWithProviders(<Harness />);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitem"]') as HTMLElement);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+    expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it("puts Content aria-label on the role=menu node", async () => {
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>Status</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content aria-label="Status">
+          <DropdownMenu.Item>Open</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[role="menu"]')?.getAttribute("aria-label")).toBe("Status");
+  });
+});

package/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -220,9 +220,7 @@ export const Controlled: Story = {
           >
             <Button>Controlled menu</Button>
           </DropdownMenu>
-          <Button variant="outlined" onPress={() => setOpen(!open)}>
-            Toggle from outside
-          </Button>
+          <Button onPress={() => setOpen(!open)}>Toggle from outside</Button>
         </XStack>
         <Text color="$color11" fontSize="$2">
           {last ? `Last action: ${last}` : "No action selected yet"}

package/src/DropdownMenu/index.tsx

@@ -23,6 +23,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -290,10 +291,38 @@ function DropdownMenuRoot({
   });
   const pendingFocusRef = useRef<"first" | "last">("first");
 
+  // Content's onCloseAutoFocus, read off the Content child below during the
+  // same render. A ref because the child scan happens after these callbacks
+  // are defined, and both close paths have to reach the same handler.
+  const closeAutoFocusRef = useRef<DropdownMenuContentProps["onCloseAutoFocus"]>(undefined);
+  // Notify on the actual state transition, including parent-controlled closes.
+  // A rejected controlled close request must not move focus out of an open menu.
+  const wasOpenRef = useRef(false);
+  const skipReturnFocusRef = useRef(false);
+
+  const fireCloseAutoFocus = useCallback(() => {
+    const handler = closeAutoFocusRef.current;
+    if (!handler) return;
+    handler({
+      preventDefault: () => {
+        skipReturnFocusRef.current = true;
+      },
+      get defaultPrevented() {
+        return skipReturnFocusRef.current;
+      },
+    });
+  }, []);
+
   const close = useCallback(() => {
     setOpen(false);
   }, [setOpen]);
 
+  useLayoutEffect(() => {
+    if (wasOpenRef.current && !open) fireCloseAutoFocus();
+    wasOpenRef.current = !!open;
+    if (open) skipReturnFocusRef.current = false;
+  }, [open, fireCloseAutoFocus]);
+
   const ctx = useMemo<DropdownMenuContextValue>(
     () => ({ open, setOpen, close, closeOnSelect, pendingFocusRef }),
     [open, setOpen, close, closeOnSelect],
@@ -311,6 +340,8 @@ function DropdownMenuRoot({
   let body: ReactNode = null;
   let contentMaxHeight = maxHeight;
   let contentMaxWidth: number | undefined;
+  let contentAriaLabel: string | undefined;
+  closeAutoFocusRef.current = undefined;
   if (items) {
     body = renderEntries(items);
   } else if (Array.isArray(children) || isValidElement(children)) {
@@ -326,14 +357,13 @@ function DropdownMenuRoot({
       if (type === DropdownMenuTrigger) {
         triggerParts.push((child.props as { children?: ReactNode }).children);
       } else if (type === DropdownMenuContent) {
-        const contentProps = child.props as {
-          children?: ReactNode;
-          maxHeight?: number;
-          maxWidth?: number;
-        };
+        const contentProps = child.props as DropdownMenuContentProps;
         contentParts.push(contentProps.children);
         if (contentProps.maxHeight != null) contentMaxHeight = contentProps.maxHeight;
         if (contentProps.maxWidth != null) contentMaxWidth = contentProps.maxWidth;
+        if (contentProps.onCloseAutoFocus)
+          closeAutoFocusRef.current = contentProps.onCloseAutoFocus;
+        if (contentProps["aria-label"] != null) contentAriaLabel = contentProps["aria-label"];
       } else {
         triggerParts.push(child);
       }
@@ -347,12 +377,17 @@ function DropdownMenuRoot({
       <FloatingPanel
         open={open}
         onOpenChange={setOpen}
+        skipReturnFocusRef={skipReturnFocusRef}
         trigger={decorateTrigger(trigger, open, onArrow)}
         contentPadding="none"
         {...coverContract}
         {...(placement ? { placement } : {})}
       >
-        <DropdownMenuList maxHeight={contentMaxHeight} maxWidth={contentMaxWidth}>
+        <DropdownMenuList
+          maxHeight={contentMaxHeight}
+          maxWidth={contentMaxWidth}
+          aria-label={contentAriaLabel}
+        >
           {body}
         </DropdownMenuList>
       </FloatingPanel>
@@ -387,6 +422,29 @@ export interface DropdownMenuContentProps {
    * owns this now — kept so existing callers type-check.
    */
   minWidth?: number;
+  /**
+   * Fired as the menu closes, before focus would return to the trigger.
+   * Call `preventDefault()` to keep the trigger from taking focus back —
+   * the rich-text toolbars do exactly that and hand focus to the editor
+   * instead, so the user can keep typing after picking a heading or a list.
+   */
+  onCloseAutoFocus?: (event: DropdownMenuCloseAutoFocusEvent) => void;
+  /**
+   * Accessible name for the menu. Lands on the `role="menu"` element, which
+   * is the node a screen reader announces — a facet menu whose trigger is an
+   * icon has no other name. DataTableFacetMenu passes its column label.
+   */
+  "aria-label"?: string;
+}
+
+/**
+ * The minimal preventable event `onCloseAutoFocus` receives. Deliberately not
+ * a DOM event: the close can originate from a native sheet or a keyboard
+ * dismissal where there is no DOM event to forward.
+ */
+export interface DropdownMenuCloseAutoFocusEvent {
+  preventDefault: () => void;
+  readonly defaultPrevented: boolean;
 }
 
 function DropdownMenuContent({ children }: DropdownMenuContentProps) {
@@ -397,10 +455,12 @@ function DropdownMenuList({
   children,
   maxHeight,
   maxWidth,
+  "aria-label": ariaLabel,
 }: {
   children?: ReactNode;
   maxHeight?: number;
   maxWidth?: number;
+  "aria-label"?: string;
 }) {
   const ctx = useDropdownMenuContext("Content");
   const innerRef = useRef<TamaguiElement | null>(null);
@@ -494,6 +554,7 @@ function DropdownMenuList({
     <YStack
       ref={innerRef}
       role="menu"
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
       data-dismiss-class="commit"
       data-mp-width-mode="at-least-trigger"
       width="100%"

package/src/LinearGradient.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
-import { LinearGradient } from "./tamagui";
+import { Text } from "./Text";
+import { LinearGradient, YStack } from "./tamagui";
 
 const meta: Meta<typeof LinearGradient> = {
   title: "Components/LinearGradient",

package/src/Meter/Meter.spec.tsx

@@ -8,7 +8,7 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, resolveRadiusClass } from "@multiplatform.one/theme";
+import { Preset, resolveRadiusClass, type Knobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
@@ -36,7 +36,7 @@ const BATTERY = { min: 0, max: 100, low: 10, high: 20, optimum: 100 } as const;
 function renderMeter(
   ui: ReactElement,
   scheme: "light" | "dark" = "light",
-  knobs?: { borderRadius?: "none" | "small" | "medium" | "large" | "full" },
+  knobs?: Partial<Pick<Knobs, "borderRadius" | "fillStyle" | "borderWidth">>,
 ) {
   return renderWithProviders(
     <Theme name={scheme}>
@@ -192,6 +192,63 @@ describe("Meter a11y and the Progress semantic line", () => {
     expect(formatMeterValue({ value: 78, min: 0, max: 100, format: "percent" })).toMatch(/%$/);
     expect(formatMeterValue({ value: undefined, min: 0, max: 8, format: "number" })).toBe("\u2014");
   });
+
+  it("outlined chrome spreads inputSurface — borderWidth is the knob, not a hardcoded 1", () => {
+    const { container: filled } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "filled", borderWidth: "large" },
+    );
+    expect(rail(filled).getAttribute("data-meter-border-width")).toBe("0");
+
+    cleanup();
+    const { container: hairline } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "none" },
+    );
+    // LC-86: outlined + none still draws the small hairline, not 0.
+    expect(rail(hairline).getAttribute("data-meter-border-width")).toBe("0.5");
+
+    cleanup();
+    const { container: large } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "large" },
+    );
+    expect(rail(large).getAttribute("data-meter-border-width")).toBe("2");
+  });
+
+  it("loading is a skeleton, not an indeterminate meter", () => {
+    const { container } = renderMeter(<Meter label="Disk usage" min={0} max={8} loading />);
+    expect(container.querySelector("[role='meter']")).toBeNull();
+    expect(container.querySelector("[role='progressbar']")).toBeNull();
+  });
+
+  for (const discrete of [0, 5]) {
+    for (const [borderWidth, expected] of [
+      ["none", "0.5px"],
+      ["small", "0.5px"],
+      ["large", "2px"],
+    ] as const) {
+      it(`paints ${borderWidth} outline on ${discrete ? "every segment" : "the continuous rail"}`, () => {
+        const { container } = renderMeter(
+          <Meter label="Disk" value={5} min={0} max={8} segments={discrete} />,
+          "light",
+          { fillStyle: "outlined", borderWidth },
+        );
+        const parts = discrete
+          ? Array.from(container.querySelector("[data-meter-segments]")!.children)
+          : [rail(container)];
+        expect(parts).toHaveLength(discrete || 1);
+        for (const part of parts) expect(getComputedStyle(part).borderTopWidth).toBe(expected);
+        if (discrete) {
+          expect(getComputedStyle(parts[0]).backgroundColor).not.toBe("transparent");
+          expect(getComputedStyle(parts.at(-1)!).backgroundColor).toBe("transparent");
+        }
+      });
+    }
+  }
 });
 
 describe("barrel exports (the ProgressCard export gap)", () => {

package/src/Meter/Meter.stories.tsx

@@ -117,3 +117,41 @@ export const Unknown: Story = {
     unit: "GB",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    label: "Disk usage",
+    min: 0,
+    max: 8,
+    unit: "GB",
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    unit: "GB",
+    disabled: true,
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    format: "percent",
+    layout: "inline",
+  },
+};

package/src/Meter/index.tsx

@@ -149,6 +149,11 @@ export function Meter({
   const outlined = knobProps.outlined;
   const trackH = meterTrackHeightPx(size);
   const railRadius = resolveMeterRailRadius(stop);
+  // Spread the fragment (AGENTS.md). Hardcoded 1px ignored the borderWidth knob.
+  const outlineChrome = outlined
+    ? { ...knobProps.inputSurface, borderColor: "$color6" as const }
+    : { borderWidth: 0 };
+  const paintedBorder = outlined ? knobProps.inputSurface.borderWidth : 0;
   const known = value != null && Number.isFinite(value);
   const zone = known
     ? resolveMeterZone({ value: value as number, min, max, low, high, optimum })
@@ -209,9 +214,8 @@ export function Meter({
           width={19}
           height={trackH}
           borderRadius={railRadius}
+          {...outlineChrome}
           backgroundColor={i < filledCount ? paint.fill : outlined ? "transparent" : METER_TRACK}
-          borderWidth={outlined ? 1 : 0}
-          borderColor={outlined ? "$color6" : undefined}
         />
       ))}
     </XStack>
@@ -220,9 +224,8 @@ export function Meter({
       height={trackH}
       minHeight={trackH}
       borderRadius={railRadius}
+      {...outlineChrome}
       backgroundColor={outlined ? "transparent" : METER_TRACK}
-      borderWidth={outlined ? 1 : 0}
-      borderColor={outlined ? "$color6" : undefined}
       opacity={disabled ? 0.5 : 1}
       role="meter"
       aria-label={label}
@@ -232,6 +235,7 @@ export function Meter({
       aria-valuetext={valuetext}
       data-meter-radius-class={METER_RADIUS_CLASS}
       data-meter-rail-radius={railRadius}
+      data-meter-border-width={paintedBorder}
       data-meter-zone={zone}
       data-meter-fill={known && ratio != null ? paint.fill : undefined}
       data-meter-track-height={trackH}
@@ -261,6 +265,7 @@ export function Meter({
         aria-valuetext={valuetext}
         data-meter-radius-class={METER_RADIUS_CLASS}
         data-meter-rail-radius={railRadius}
+        data-meter-border-width={paintedBorder}
         data-meter-zone={zone}
         data-meter-fill={known ? paint.fill : undefined}
         data-meter-track-height={trackH}

package/src/Pagination.simple.spec.tsx

@@ -0,0 +1,23 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Pagination } from "./Pagination";
+
+describe("simple page navigation", () => {
+  it("keeps page context without a numbered window and navigates once", () => {
+    const change = vi.fn();
+    renderWithProviders(
+      <Pagination variant="simple" total={100} page={50} onPageChange={change} />,
+    );
+    expect(screen.getByText(/50.*100/)).toBeInTheDocument();
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+    fireEvent.click(screen.getByLabelText("Go to next page"));
+    expect(change).toHaveBeenCalledExactlyOnceWith(51);
+  });
+  it("disables backward navigation on the first page and forward on the last", () => {
+    const { rerender } = renderWithProviders(<Pagination variant="simple" total={3} page={1} />);
+    expect(screen.getByLabelText("Go to previous page")).toHaveAttribute("aria-disabled", "true");
+    rerender(<Pagination variant="simple" total={3} page={3} />);
+    expect(screen.getByLabelText("Go to next page")).toHaveAttribute("aria-disabled", "true");
+  });
+});

package/src/Pagination.stories.tsx

@@ -236,3 +236,11 @@ export const AllStates: Story = {
     </YStack>
   ),
 };
+
+export const Simple: Story = {
+  render: () => (
+    <YStack width={249}>
+      <Pagination variant="simple" total={100} defaultPage={50} />
+    </YStack>
+  ),
+};

package/src/Pagination.tsx

@@ -118,7 +118,7 @@ export interface PaginationProps extends Omit<XStackProps, "children" | "onChang
    * step) at the pager's large step — see `DotVariant` for the one rule that
    * governs a strip mark's size.
    */
-  variant?: "dots" | "bars" | "numbered";
+  variant?: "dots" | "bars" | "numbered" | "simple";
   /** Total number of items across all pages (numbered summary slot) */
   totalItems?: number;
   /** Items per page (numbered summary slot) */
@@ -235,17 +235,19 @@ export function Pagination({
     ...(kbFocus === id ? FOCUS_VISIBLE_RING : restRing),
   });
 
+  const isSimple = variant === "simple";
   const isNumbered = variant === "numbered";
+  const isPageNavigation = isNumbered || isSimple;
 
   // The two idioms differ in which glyphs the controls take, whether the
   // control is circular, and whether the last step submits — not in structure.
   const canPrev = !disabled && index > 0;
-  const canNext = isNumbered
+  const canNext = isPageNavigation
     ? !disabled && currentPage < total
     : // dots/bars: an onSubmit makes the last step actionable, so the forward
       // control is not dead there.
       !(disabled || (!isLastStep && index >= total - 1 && !onSubmit));
-  const submits = !isNumbered && isLastStep;
+  const submits = !isPageNavigation && isLastStep;
 
   const items = isNumbered
     ? getPaginationItems(total, currentPage, siblingCount, boundaryCount)
@@ -282,6 +284,7 @@ export function Pagination({
       data-pad="panel"
       {...knobProps.panelPadding}
       {...knobProps.gap}
+      {...(isSimple ? { paddingHorizontal: 0, minWidth: 0, flexShrink: 1 } : undefined)}
       {...stackProps}
     >
       {isNumbered && showFirstLast && (
@@ -299,19 +302,31 @@ export function Pagination({
 
       <Button
         size={knobProps.sizeToken}
-        circular={!isNumbered}
+        circular={!isPageNavigation}
         chromeless
-        icon={isNumbered ? PrevIcon : PrevArrowIcon}
+        icon={isPageNavigation ? PrevIcon : PrevArrowIcon}
         onPress={handlePrev}
         disabled={!canPrev}
         // LC-40: the Button's own disabled wash owns the treatment — the
         // legacy opacity 0.3 dim stacked on top of it (double-dim).
-        aria-label={isNumbered ? t("Go to previous page") : t("Previous page")}
+        aria-label={isPageNavigation ? t("Go to previous page") : t("Previous page")}
         onKeyDown={activateOnEnterSpace(handlePrev, canPrev)}
         {...pageControlProps("prev")}
       />
 
-      {isNumbered ? (
+      {isSimple ? (
+        <Text
+          {...knobProps.body}
+          color={componentColors.text.primary}
+          aria-live="polite"
+          userSelect="none"
+          numberOfLines={1}
+          flexShrink={1}
+          minWidth={0}
+        >
+          {bidiIsolate(withInterp(t("{{page}} of {{total}}"), { page: currentPage, total }))}
+        </Text>
+      ) : isNumbered ? (
         <XStack alignItems="center" {...knobProps.gap}>
           {items.map((item) => {
             if (typeof item !== "number") {
@@ -374,13 +389,15 @@ export function Pagination({
 
       <Button
         size={knobProps.sizeToken}
-        circular={!isNumbered}
+        circular={!isPageNavigation}
         chromeless={!submits}
         theme={submits ? "active" : undefined}
-        icon={isNumbered ? NextIcon : submits ? CheckIcon : NextArrowIcon}
+        icon={isPageNavigation ? NextIcon : submits ? CheckIcon : NextArrowIcon}
         onPress={handleNext}
         disabled={!canNext}
-        aria-label={isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page")}
+        aria-label={
+          isPageNavigation ? t("Go to next page") : submits ? t("Submit") : t("Next page")
+        }
         onKeyDown={activateOnEnterSpace(handleNext, canNext)}
         {...pageControlProps(submits ? "submit" : "next")}
       />

package/src/Panel.stories.tsx

@@ -52,7 +52,7 @@ export const InteractiveContent: Story = {
       <SizableText fontWeight="600">Interactive content</SizableText>
       <Input placeholder="Focus me" inputProps={{ "aria-label": "Focus demo" }} />
       <XStack gap="$2">
-        <Button variant="outlined">Cancel</Button>
+        <Button>Cancel</Button>
         <Button>Submit</Button>
       </XStack>
     </Panel>

package/src/SortableList/SortableList.spec.tsx

@@ -138,10 +138,10 @@ describe("SortableList", () => {
 
   it("renders emptyMessage when there are no rows (board 04)", () => {
     const { container } = renderWithProviders(
-      <SortableList
+      <SortableList<{ id: string; label: string }>
         items={[]}
-        getId={(item: { id: string }) => item.id}
-        getLabel={(item: { label: string }) => item.label}
+        getId={(item) => item.id}
+        getLabel={(item) => item.label}
         emptyMessage="No rows yet"
       />,
     );

package/src/Tabs/Tabs.bandColor.spec.tsx

@@ -0,0 +1,23 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
+  useReadableTextOn: () => "#fff",
+}));
+
+describe("selected tab ink follows its painted surface", () => {
+  it("uses page-surface ink for the band even when contained tint needs white ink", () => {
+    const result = renderWithProviders(
+      <Tabs variant="band" value="one" items={[{ value: "one", label: "Selected" }]} />,
+    );
+    expect(result.getByText("Selected").className).toContain("_col-color");
+  });
+  it("keeps contrasting tint ink for the contained indicator", () => {
+    const result = renderWithProviders(
+      <Tabs variant="contained" value="one" items={[{ value: "one", label: "Selected" }]} />,
+    );
+    expect(result.getByText("Selected").className).not.toContain("_col-color");
+  });
+});