@multiplatform.one/components 7.7.6 → 7.10.0

package/src/Pagination.tsx

@@ -339,7 +339,7 @@ export function Pagination({
                   minWidth="$2"
                   minHeight={pageControlFloor.minHeight}
                   {...knobProps.body}
-                  color={componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                 >
                   …
                 </Text>
@@ -418,7 +418,7 @@ export function Pagination({
       {summary && (
         <Text
           {...knobProps.body}
-          color={componentColors.text.muted}
+          color={knobProps.textAccentColor}
           aria-live="polite"
           userSelect="none"
         >

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/ProgressSteps/index.tsx

@@ -206,7 +206,7 @@ export function ProgressSteps({
           const markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg =
             kind === "upcoming"
-              ? componentColors.text.muted
+              ? knobProps.textAccentColor
               : kind === "error"
                 ? (onError ?? "$color1")
                 : kind === "completed"
@@ -293,7 +293,7 @@ export function ProgressSteps({
                   kind === "error"
                     ? "$red11"
                     : state === "upcoming"
-                      ? componentColors.text.muted
+                      ? knobProps.textAccentColor
                       : componentColors.text.primary
                 }
                 textAlign={horizontal ? "center" : undefined}
@@ -305,7 +305,7 @@ export function ProgressSteps({
                 <SizableText
                   {...knobProps.body}
                   fontSize="$1"
-                  color={kind === "error" ? "$red11" : componentColors.text.muted}
+                  color={kind === "error" ? "$red11" : knobProps.textAccentColor}
                   textAlign={horizontal ? "center" : undefined}
                   numberOfLines={2}
                 >

package/src/Quote/index.tsx

@@ -66,8 +66,6 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
     compact === undefined ? { component: "Quote" } : { component: "Quote", compact },
   );
   const railWidth = quoteRailWidth(knobProps.borderRadius.borderWidth);
-  const citeColor =
-    knobProps.textAccentColor === "$color" ? componentColors.text.muted : knobProps.textAccentColor;
 
   return (
     <QuoteFrame
@@ -106,7 +104,7 @@ export function Quote({ children, cite, compact, ...props }: QuoteProps) {
                 key={key}
                 render="cite"
                 {...knobProps.label}
-                color={citeColor}
+                color={knobProps.textAccentColor}
                 fontStyle="normal"
               >
                 — {label}

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.spec.tsx

@@ -246,6 +246,48 @@ describe("Tabs", () => {
     expect(two).toHaveAttribute("aria-selected", "true");
   });
 
+  it("selects the focused tab automatically when navigating with arrows", async () => {
+    renderWithProviders(<Tabs items={items} variant="band" />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "ArrowRight" });
+    await waitFor(() => expect(two).toHaveFocus());
+    expect(two).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Panel two")).toBeVisible();
+  });
+
+  it("reverses horizontal arrow navigation in RTL", async () => {
+    document.documentElement.dir = "rtl";
+    renderWithProviders(<Tabs items={items} defaultValue="two" />);
+    const two = screen.getByRole("tab", { name: "Two" });
+    const one = screen.getByRole("tab", { name: "One" });
+    two.focus();
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    await waitFor(() => expect(one).toHaveFocus());
+    expect(one).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("stops at the last enabled tab when looping is disabled", async () => {
+    renderWithProviders(<Tabs items={items} loop={false} />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "End" });
+    await waitFor(() => expect(two).toHaveFocus());
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    expect(two).toHaveFocus();
+    expect(two).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("removes every tab from the page tab order when the strip is disabled", () => {
+    renderWithProviders(<Tabs items={items} disabled />);
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab.tabIndex).toBe(-1);
+      expect(tab).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
   it("keeps an enabled entry point when the selected tab is disabled", () => {
     renderWithProviders(<Tabs items={items} value="three" />);
     const stops = screen.getAllByRole("tab").filter((tab) => tab.tabIndex === 0);
@@ -261,13 +303,11 @@ describe("Tabs", () => {
     expect(container.querySelector("[data-tabs-indicator]")).toBeNull();
   });
 
-  it("lets equal-band chrome shrink inside each allocated tab without horizontal insets", () => {
+  it("lets equal-band chrome shrink inside each allocated tab", () => {
     renderWithProviders(<Tabs items={items} variant="band" />);
     const chrome = screen.getByRole("tab", { name: "One" }).firstElementChild!;
     expect(chrome.className).toContain("_fs-1");
     expect(chrome.className).toContain("_fb-0px");
-    expect(chrome.className).toContain("_pl-0px");
-    expect(chrome.className).toContain("_pr-0px");
   });
 
   it("ariaLabel overrides the default tablist name", () => {

package/src/Tabs/Tabs.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<typeof Tabs> = {
   },
   argTypes: {
     variant: { control: "select", options: ["underline", "contained", "band"] },
+    distribution: { control: "select", options: ["content", "equal"] },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     accent: { control: "boolean" },
     error: { control: "boolean" },
@@ -348,8 +349,16 @@ export const EqualBand: Story = {
 
 export const IntrinsicHorizontalHost: Story = {
   render: () => (
-    <ScrollView horizontal width={390}>
+    <ScrollView horizontal width={390} maxWidth="100%">
       <Tabs items={baseItems} ariaLabel="Intrinsic tabs" />
     </ScrollView>
   ),
 };
+
+export const EqualSmall: Story = {
+  render: () => (
+    <YStack width={390} maxWidth="100%">
+      <Tabs items={baseItems} distribution="equal" size="$2" ariaLabel="Compact equal sections" />
+    </YStack>
+  ),
+};

package/src/Tabs/index.tsx

@@ -534,6 +534,12 @@ function TabsRoot({
           item.value === anchorValue &&
           itemIndex === items.findIndex((i) => i.value === anchorValue);
         const kbRing = kbFocusValue === item.value;
+        const feedbackBackground =
+          pressValue === item.value
+            ? componentColors.interactive.hover
+            : hoverValue === item.value
+              ? componentColors.interactive.background
+              : "transparent";
         return (
           <Trigger
             key={item.value}
@@ -545,7 +551,7 @@ function TabsRoot({
             }}
             flex={equalDistribution ? 1 : undefined}
             minWidth={0}
-            minHeight={isBand ? MIN_PRESS_TARGET : undefined}
+            minHeight={equalDistribution ? MIN_PRESS_TARGET : undefined}
             borderEndWidth={isBand && itemIndex < items.length - 1 ? 1 : 0}
             borderColor={isBand ? componentColors.surface.border : undefined}
             disabled={isDisabled}
@@ -573,7 +579,13 @@ function TabsRoot({
             onInteraction={handleInteraction}
             cursor={isDisabled ? "not-allowed" : "pointer"}
             backgroundColor={
-              isBand && isActive ? componentColors.surface.background : "transparent"
+              isBand
+                ? isActive
+                  ? componentColors.surface.background
+                  : isDisabled
+                    ? "transparent"
+                    : feedbackBackground
+                : "transparent"
             }
             borderRadius={0}
             {...(isDisabled
@@ -608,8 +620,8 @@ function TabsRoot({
               // (spreading the recipe there too doubled the horizontal
               // padding).
               {...knobProps.control}
-              // Equal columns own band spacing; extra inset can exceed a narrow column.
-              paddingHorizontal={isBand ? 0 : knobProps.control.paddingHorizontal}
+              // Band columns share width; a minimal inset keeps labels off the edges.
+              paddingHorizontal={isBand ? "$1" : knobProps.control.paddingHorizontal}
               alignSelf="stretch"
               flexGrow={equalDistribution ? 1 : undefined}
               flexShrink={equalDistribution ? 1 : undefined}
@@ -619,32 +631,26 @@ function TabsRoot({
               alignItems="center"
               justifyContent="center"
               backgroundColor={
-                isActive || isDisabled
-                  ? "transparent"
-                  : pressValue === item.value
-                    ? componentColors.interactive.hover
-                    : hoverValue === item.value
-                      ? componentColors.interactive.background
-                      : "transparent"
+                isBand || isActive || isDisabled ? "transparent" : feedbackBackground
               }
               {...(kbRing ? keyboardFocusRingProps : undefined)}
             >
               {item.icon}
               <TabLabel
-                minWidth={equalDistribution ? 0 : undefined}
-                flexShrink={equalDistribution ? 1 : undefined}
                 active={isActive}
+                flexShrink={1}
+                minWidth={0}
                 {...knobProps.controlType}
                 fontFamily={knobProps.label.fontFamily}
                 fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}
                 color={
                   isDisabled
-                    ? componentColors.text.muted
+                    ? disabledState.textKnobProps.color
                     : isActive
                       ? variant === "contained" && onSelectedTint
                         ? onSelectedTint
                         : componentColors.text.primary
-                      : componentColors.text.secondary
+                      : knobProps.textAccentColor
                 }
               >
                 {wrapBareTextChildren(item.label, (label) => label)}

package/src/Toast/Toast.spec.tsx

@@ -1,18 +1,22 @@
 import { fireEvent, screen, act, cleanup } from "@testing-library/react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Button, SizableText, Theme, useTheme, YStack } from "tamagui";
+import { Button, SizableText, TamaguiProvider, useTheme, YStack } from "tamagui";
 import {
   __resetDevWarnSeen,
   aaTextContrastRatio,
-  contrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
   normalizeToHex,
   Preset,
-  relativeLuminance,
   useAccentOnSurface,
 } from "@multiplatform.one/theme";
-import { Toast, ToastViewport, useToast } from "./index";
+import { Toast, ToastViewport, useToast, nativeToastA11y, nativeToastControlA11y } from "./index";
 import {
   __resetToastViewportRegistry,
   dismissToast,
@@ -39,6 +43,40 @@ function Trigger(props: Parameters<ReturnType<typeof useToast>["show"]>[0]) {
   return <Button onPress={() => toast.show(props)}>fire</Button>;
 }
 
+describe("native toast accessibility", () => {
+  it("groups text-only content while leaving action and dismiss controls reachable", () => {
+    expect(nativeToastA11y("Saved", false, false)).toEqual({
+      accessible: true,
+      accessibilityLabel: "Saved",
+    });
+    expect(nativeToastA11y("Saved", true, false)).toEqual({ accessible: false });
+  });
+
+  it("does not wire a second native announcement channel or web grouping", () => {
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("accessibilityLiveRegion");
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("aria-live");
+    expect(nativeToastA11y("Saved", false, true)).toEqual({});
+    expect(nativeToastA11y(undefined, false, false)).toEqual({ accessible: false });
+  });
+
+  it("makes native action and dismiss controls accessibility elements without leaking to web", () => {
+    expect(nativeToastControlA11y(false)).toEqual({ accessible: true });
+    expect(nativeToastControlA11y(true)).toEqual({});
+  });
+
+  it("records the library grouping default and keeps native control props off the DOM", () => {
+    renderWithProviders(
+      <>
+        <Trigger title="Saved" dismissible />
+        <ToastViewport />
+      </>,
+    );
+    fireEvent.click(screen.getByText("fire"));
+    expect(screen.getByTestId("toast")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByLabelText("Dismiss notification")).not.toHaveAttribute("accessible");
+  });
+});
+
 describe("Toast (standalone)", () => {
   it("renders title, description and role=status", () => {
     renderWithProviders(
@@ -49,6 +87,15 @@ describe("Toast (standalone)", () => {
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
 
+  it("names CopyField confirm for assistive tech (DG-FB-03)", () => {
+    renderWithProviders(<Toast title="Copied to clipboard." intent="success" />);
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "polite");
+    expect(status).toHaveAttribute("aria-label", "Copied to clipboard.");
+    expect(status).toHaveTextContent("Copied to clipboard.");
+    expect(status).toHaveAttribute("aria-atomic");
+  });
+
   it("fires onDismiss from the close button", () => {
     const onDismiss = vi.fn();
     renderWithProviders(<Toast title="Saved" onDismiss={onDismiss} />);
@@ -198,6 +245,18 @@ describe("useToast + ToastViewport (imperative)", () => {
     expect(getToasts()).toHaveLength(2);
   });
 
+  it("viewport announce region carries Copied to clipboard.", async () => {
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Copied to clipboard.", intent: "success" });
+    });
+    expect(await screen.findByText("Copied to clipboard.")).toBeInTheDocument();
+    await vi.waitFor(() => {
+      const live = document.querySelector("[aria-live]:not([aria-live='off'])");
+      expect(live?.textContent ?? "").toMatch(/Copied to clipboard/);
+    });
+  });
+
   it("dismisses via the close button", async () => {
     vi.useFakeTimers();
     try {
@@ -459,35 +518,91 @@ function tokenVal(theme: ReturnType<typeof useTheme>, key: string): string {
   return typeof raw === "string" ? raw : "";
 }
 
-function ContrastProbe({ intent }: { intent: "accent" | "success" | "warning" | "error" }) {
-  const onSurface = useAccentOnSurface();
-  const theme = useTheme();
-  const paper = tokenVal(theme, "background") || tokenVal(theme, "color1");
-  const color11 = tokenVal(theme, "color11");
-  const fg =
-    intent === "accent"
-      ? onSurface.startsWith("$")
-        ? tokenVal(theme, onSurface.slice(1)) || onSurface
-        : onSurface
-      : color11;
+const TOAST_INTENTS = ["accent", "success", "warning", "error"] as const;
+const CONTRAST_SCHEMES = ["light", "dark"] as const;
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+/**
+ * The HOUSE config, not the stock one `renderWithProviders` mounts. The
+ * intent sub-themes the Toast wraps in (`light_warning`, ...) exist only
+ * there; under stock the wrap falls back to the base ramp and the arm
+ * certifies a pair the product never paints.
+ */
+function ContrastScheme({
+  scheme,
+  children,
+}: {
+  scheme: (typeof CONTRAST_SCHEMES)[number];
+  children: ReactNode;
+}) {
   return (
-    <>
-      <span data-testid="contrast-probe" data-fg={fg} data-bg={paper} />
-      <Toast
-        title="Archived"
-        intent={intent}
-        action={{ label: ACTION, onPress: () => {} }}
-        onDismiss={() => {}}
-      />
-    </>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{children}</YStack>
+    </TamaguiProvider>
   );
 }
 
-function measuredRatio(fg: string, bg: string): number {
-  const f = normalizeToHex(fg);
-  const b = normalizeToHex(bg);
-  if (!f || !b) return Number.NaN;
-  return contrastRatio(relativeLuminance(f), relativeLuminance(b));
+/**
+ * Accent toasts stay on the BASE theme and take their ink from
+ * `useAccentOnSurface()` -- a picked value, not a token the label can name in
+ * a class. Stamp it from inside the theme the Toast mounts in.
+ */
+function AccentInkProbe() {
+  const onSurface = useAccentOnSurface();
+  const theme = useTheme();
+  const ink = onSurface.startsWith("$")
+    ? tokenVal(theme, onSurface.slice(1)) || onSurface
+    : onSurface;
+  return <span data-testid="accent-ink" data-fg={ink} />;
+}
+
+/**
+ * The RESTING atom for a prefix. Tamagui spells state atoms `_o-0hover-1` /
+ * `_bg-0active-color5`, so a bare prefix read picks up hover paint and
+ * certifies a surface nobody rests on.
+ */
+function restAtom(node: Element, prefix: string): string | undefined {
+  for (const cls of Array.from(node.classList)) {
+    if (!cls.startsWith(prefix)) continue;
+    const value = cls.slice(prefix.length);
+    if (/^\d*(hover|active|focus|press|disabled)/.test(value)) continue;
+    return value;
+  }
+  return undefined;
+}
+
+/** `_o-0--9` is Tamagui's atom for 0.9; no resting atom means no rest dim. */
+function restOpacity(node: Element): number {
+  const atom = restAtom(node, "_o-");
+  if (atom === undefined) return 1;
+  const value = Number(atom.replaceAll("--", "."));
+  return Number.isFinite(value) ? value : 1;
+}
+
+/**
+ * The ink as PAINTED. An opacity on the press target multiplies the label
+ * toward the fill under it, so the token pair is not what a reader sees:
+ * MPO-128's warning action measures 4.66:1 as tokens and 3.88:1 as pixels.
+ */
+function paintedInk(ink: string, ground: string, alpha: number): string {
+  const f = normalizeToHex(ink);
+  const b = normalizeToHex(ground);
+  if (!f || !b) return ink;
+  if (alpha >= 1) return f;
+  const channel = (offset: number) =>
+    Math.round(
+      Number.parseInt(f.slice(offset, offset + 2), 16) * alpha +
+        Number.parseInt(b.slice(offset, offset + 2), 16) * (1 - alpha),
+    )
+      .toString(16)
+      .padStart(2, "0");
+  return `#${channel(1)}${channel(3)}${channel(5)}`;
 }
 
 describe("Toast overlay shadow (standalone === viewport)", () => {
@@ -639,28 +754,40 @@ describe("Toast action label weight and contrast (TEXT NODE)", () => {
     expect(screen.getByTestId("toast").contains(textNode)).toBe(true);
   });
 
-  it.each(["accent", "success", "warning", "error"] as const)(
-    "%s action label clears 4.5:1 vs its pill in light and dark",
+  it.each(TOAST_INTENTS)(
+    "%s action label clears the AA floor AS PAINTED, in light and dark",
     (intent) => {
-      for (const scheme of ["light", "dark"] as const) {
+      for (const scheme of CONTRAST_SCHEMES) {
         renderWithProviders(
-          <Theme name={scheme}>
-            <ContrastProbe intent={intent} />
-          </Theme>,
-        );
-        const probe = screen.getByTestId("contrast-probe");
-        const fg = probe.getAttribute("data-fg") ?? "";
-        const bg = probe.getAttribute("data-bg") ?? "";
-        const label = screen.getByText(ACTION);
-        const pill = label.parentElement as HTMLElement;
-        const labelColor = (label as HTMLElement).style.color;
-        const pillBg = (pill as HTMLElement).style.backgroundColor;
-        const fromProbe = measuredRatio(fg, bg);
-        const fromNodes = measuredRatio(labelColor || fg, pillBg || bg);
-        const ratio = Number.isFinite(fromNodes) ? fromNodes : fromProbe;
-        expect(ratio, `${scheme} ${intent} ${fg} on ${bg}`).toBeGreaterThanOrEqual(
-          aaTextContrastRatio,
+          <ContrastScheme scheme={scheme}>
+            <AccentInkProbe />
+            <Toast
+              title="Archived"
+              intent={intent}
+              action={{ label: ACTION, onPress: () => {} }}
+              onDismiss={() => {}}
+            />
+          </ContrastScheme>,
         );
+        // Non-accent intents ride their hue sub-theme; accent stays on base.
+        const theme = houseThemes[intent === "accent" ? scheme : `${scheme}_${intent}`];
+        const groundToken = restAtom(screen.getByTestId("toast"), "_bg-");
+        const inkToken = restAtom(screen.getByText(ACTION), "_col-");
+        const ground = theme?.[groundToken ?? ""] ?? "";
+        const ink =
+          intent === "accent"
+            ? (screen.getByTestId("accent-ink").getAttribute("data-fg") ?? "")
+            : (theme?.[inkToken ?? ""] ?? "");
+        const where = `${scheme} ${intent}: ${inkToken ?? "?"} on ${groundToken ?? "?"}`;
+        expect(ground, `${where} -- the toast frame paints no resting fill`).toBeTruthy();
+        expect(ink, `${where} -- the action label emits no resting ink`).toBeTruthy();
+        const alpha = restOpacity(screen.getByLabelText(ACTION));
+        const report = measureContrast({
+          foreground: paintedInk(ink, ground, alpha),
+          background: ground,
+          label: `${where} at rest opacity ${alpha}`,
+        });
+        expect(report.ratio, report.label).toBeGreaterThanOrEqual(aaTextContrastRatio);
         cleanup();
       }
     },