@multiplatform.one/components 7.4.1 → 7.6.0

package/src/Tabs/Tabs.spec.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, screen } from "@testing-library/react";
 import { Text } from "tamagui";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it, vitest } from "vitest";
-import { Tabs, type TabsItem } from "./index";
+import { afterEach, describe, expect, it, vitest } from "vitest";
+import { Tabs, tabsOverflowFades, tabsScrollIntoViewX, type TabsItem } from "./index";
 
 const items: TabsItem[] = [
   { value: "one", label: "One", content: <Text>Panel one</Text> },
@@ -10,6 +10,13 @@ const items: TabsItem[] = [
   { value: "three", label: "Three", disabled: true, content: <Text>Panel three</Text> },
 ];
 
+const clearDirs = () => {
+  document.documentElement.removeAttribute("dir");
+  document.body.removeAttribute("dir");
+};
+
+afterEach(clearDirs);
+
 describe("Tabs", () => {
   it("renders a tablist with aria-selected on the active tab", () => {
     renderWithProviders(<Tabs items={items} />);
@@ -197,4 +204,75 @@ describe("Tabs", () => {
     expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
     expect(container.querySelector("[data-tabs-variant]")).toBeNull();
   });
+
+  it("is a named compound export (List / Tab / Content)", () => {
+    expect(Tabs.List).toBeDefined();
+    expect(Tabs.Tab).toBeDefined();
+    expect(Tabs.Content).toBeDefined();
+  });
+
+  it("LC-49: exactly one tab is in the page tab order", () => {
+    renderWithProviders(<Tabs items={items} />);
+    const tabs = screen.getAllByRole("tab");
+    const stops = tabs.filter((el) => (el as HTMLElement).tabIndex === 0);
+    expect(stops).toHaveLength(1);
+    expect(stops[0]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: "Three" }).tabIndex).toBe(-1);
+  });
+
+  it("ariaLabel overrides the default tablist name", () => {
+    renderWithProviders(<Tabs items={items} ariaLabel="Document sections" />);
+    expect(screen.getByRole("tablist")).toHaveAttribute("aria-label", "Document sections");
+  });
+
+  it("underline strip uses the G10 hairline (not a knob-driven border)", () => {
+    const { container } = renderWithProviders(<Tabs items={items} />);
+    expect(container.querySelector(".mp-hairline-b")).not.toBeNull();
+  });
+
+  it("contained variant does not paint the underline hairline", () => {
+    const { container } = renderWithProviders(
+      <Tabs items={items.slice(0, 3)} variant="contained" />,
+    );
+    expect(container.querySelector(".mp-hairline-b")).toBeNull();
+  });
+
+  it("declares writing direction on the root (useDirection)", () => {
+    document.documentElement.dir = "rtl";
+    const { container } = renderWithProviders(<Tabs items={items} />);
+    expect(container.querySelector("[data-tabs-dir]")?.getAttribute("data-tabs-dir")).toBe("rtl");
+  });
+});
+
+describe("tabsOverflowFades (rtl-audit U1)", () => {
+  it("LTR: rest state fades only the inline-end (right) edge", () => {
+    expect(tabsOverflowFades(0, 100, 400, "ltr")).toEqual({ left: false, right: true });
+    expect(tabsOverflowFades(50, 100, 400, "ltr")).toEqual({ left: true, right: true });
+    expect(tabsOverflowFades(300, 100, 400, "ltr")).toEqual({ left: true, right: false });
+  });
+
+  it("RTL: CSSOM scrollLeft is 0 → −range; rest (0) fades the physical left", () => {
+    expect(tabsOverflowFades(0, 100, 400, "rtl")).toEqual({ left: true, right: false });
+    expect(tabsOverflowFades(-150, 100, 400, "rtl")).toEqual({ left: true, right: true });
+    expect(tabsOverflowFades(-300, 100, 400, "rtl")).toEqual({ left: false, right: true });
+  });
+
+  it("no overflow → no fades in either direction", () => {
+    expect(tabsOverflowFades(0, 400, 400, "ltr")).toEqual({ left: false, right: false });
+    expect(tabsOverflowFades(0, 400, 400, "rtl")).toEqual({ left: false, right: false });
+  });
+});
+
+describe("tabsScrollIntoViewX", () => {
+  const layout = { x: 250, y: 0, width: 80, height: 32 };
+
+  it("LTR scrolls so a clipped tab lands inside the pad", () => {
+    expect(tabsScrollIntoViewX(layout, 0, 100, 400, "ltr")).toBe(250 + 80 - 100 + 32);
+  });
+
+  it("RTL converts the physical window back onto the negative scrollLeft range", () => {
+    const x = tabsScrollIntoViewX(layout, 0, 100, 400, "rtl");
+    expect(x).toBeLessThanOrEqual(0);
+    expect(x).toBeGreaterThanOrEqual(-300);
+  });
 });

package/src/Tabs/Tabs.stories.tsx

@@ -6,9 +6,10 @@ import {
   PaperclipIcon,
   UserIcon,
 } from "@phosphor-icons/react";
+import { Button, Input } from "@multiplatform.one/forms";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
-import { Button, Input, ScrollView, Text, XStack, YStack } from "tamagui";
+import { ScrollView, Text, XStack, YStack } from "tamagui";
 import { Chip } from "../Chip";
 import { Tabs, type TabsItem } from "./index";
 
@@ -38,6 +39,7 @@ const meta: Meta<typeof Tabs> = {
     loop: { control: "boolean" },
     disabled: { control: "boolean" },
     defaultValue: { control: "text" },
+    ariaLabel: { control: "text" },
   },
 };
 export default meta;
@@ -46,7 +48,7 @@ type Story = StoryObj<typeof Tabs>;
 
 const Panel = ({ title, body }: { title: string; body: string }) => (
   <YStack gap="$2">
-    <Text fontWeight="600">{title}</Text>
+    <Text fontWeight="700">{title}</Text>
     <Text color="$color11">{body}</Text>
   </YStack>
 );
@@ -215,7 +217,7 @@ export const LazyMountPanels: Story = {
         content: (
           <YStack gap="$2" maxWidth={320}>
             <Text color="$color11">Type here, switch away, and come back — state survives:</Text>
-            <Input placeholder="Kept alive across tab switches" />
+            <Input name="keptAlive" placeholder="Kept alive across tab switches" />
           </YStack>
         ),
       },

package/src/Tabs/index.tsx

@@ -11,19 +11,23 @@
  *   (indicator slide), elevation (thumb)
  * - intent: accent (default indicator hue) / error / warning / success
  * - overflow: horizontal scroll with web edge fades when tabs exceed width
+ *   (RTL-aware: CSSOM `scrollLeft` is 0 → −range; G10 hairline on the
+ *   underline strip, not a knob-driven border)
  * - lazyMount: panels mount on first visit and stay mounted (state preserved)
  * - fill: root + panel host grow into a bounded parent (Tabs contract,
  *   docs/theme-propagation-spec.md)
  *
  * LC-71: selected = underline or sliding fill; unselected have zero chrome;
  * keyboard ring on the focused tab only. LC-72: underline rounds only the
- * strip's outer top corners; contained clips to the track.
+ * strip's outer top corners; contained clips to the track. LC-49: one
+ * tab stop. LC-82: label strings ride Text.
  */
 
 import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   getGroupPosition,
+  hairline,
   keyboardFocusRingProps,
   pressTargetHitSlop,
   stackEdgeRadius,
@@ -36,15 +40,28 @@ import {
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
+import { useDirection } from "../hooks/useDirection";
 import { useTranslation } from "../shared/i18n";
+import { wrapBareTextChildren } from "../shared/textRidesText";
 import type { GetProps, ThemeName } from "tamagui";
-import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled } from "tamagui";
+import {
+  ScrollView,
+  Tabs as TamaguiTabs,
+  Text,
+  Theme,
+  View,
+  YStack,
+  isWeb,
+  styled,
+  withStaticProperties,
+} from "tamagui";
 import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
 
 export type TabsVariant = "underline" | "contained";
 export type TabsSize = "$2" | "$3" | "$4" | "$5";
+export type TabsDirection = "ltr" | "rtl";
 
 export interface TabsItem {
   /** Unique value identifying the tab (used for value/onChange) */
@@ -113,6 +130,8 @@ export interface TabsProps {
   loop?: boolean;
   /** Disable the whole tab strip */
   disabled?: boolean;
+  /** Accessible name of the tablist. Defaults to the translated "Tabs". */
+  ariaLabel?: string;
 }
 
 interface TabLayout {
@@ -122,6 +141,48 @@ interface TabLayout {
   height: number;
 }
 
+/**
+ * Physical overflow fades for the tab strip.
+ *
+ * CSSOM `scrollLeft` runs 0 → −(scrollWidth − clientWidth) under RTL
+ * (rtl-audit U1). Normalize so a rest-state strip still fades the inline-end
+ * edge instead of both-or-neither.
+ */
+export function tabsOverflowFades(
+  offset: number,
+  viewport: number,
+  content: number,
+  direction: TabsDirection,
+  threshold = 4,
+): { left: boolean; right: boolean } {
+  const range = Math.max(content - viewport, 0);
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  const fromRight = minScrollLeft + range - offset;
+  return { left: fromLeft > threshold, right: fromRight > threshold };
+}
+
+export function tabsScrollIntoViewX(
+  layout: TabLayout,
+  offset: number,
+  viewport: number,
+  content: number,
+  direction: TabsDirection,
+  pad = 32,
+): number | undefined {
+  const range = Math.max(content - viewport, 0);
+  if (range <= 0) return undefined;
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  let targetFromLeft: number | undefined;
+  if (layout.x < fromLeft + pad) {
+    targetFromLeft = Math.max(0, layout.x - pad);
+  } else if (layout.x + layout.width > fromLeft + viewport - pad) {
+    targetFromLeft = Math.min(range, layout.x + layout.width - viewport + pad);
+  }
+  return targetFromLeft === undefined ? undefined : targetFromLeft + minScrollLeft;
+}
+
 // Tabbing into the strip focuses the tablist container first; tamagui's
 // roving-focus group then redirects focus to the current tab from inside a
 // focusin handler. Chromium drops keyboard modality on that script focus, so
@@ -159,15 +220,6 @@ const StripWrapper = styled(View, {
   name: "MpTabsStrip",
   width: "100%",
   position: "relative",
-
-  variants: {
-    underline: {
-      true: {
-        borderBottomWidth: 1,
-        borderColor: componentColors.surface.border,
-      },
-    },
-  } as const,
 });
 
 const TabsList = styled(TamaguiTabs.List, {
@@ -210,7 +262,9 @@ const UnderlineIndicator = styled(View, {
   position: "absolute",
   bottom: 0,
   height: 2,
-  borderRadius: 1,
+  // Token scale (design-audit): 0, not a 1px radius that isn't a stop.
+  // A 2px selection mark is a rectangle sitting on the G10 hairline.
+  borderRadius: 0,
   backgroundColor: "$color9",
 });
 
@@ -237,7 +291,7 @@ const TabLabel = styled(Text, {
 
 // ── Tabs Component ────────────────────────────────────────────
 
-export function Tabs({
+function TabsRoot({
   items,
   value,
   defaultValue,
@@ -254,8 +308,10 @@ export function Tabs({
   activationMode = "automatic",
   loop = true,
   disabled = false,
+  ariaLabel,
 }: TabsProps) {
   const { t } = useTranslation();
+  const direction = useDirection();
   const intent =
     (accent && "accent") ||
     (error && "error") ||
@@ -324,27 +380,19 @@ export function Tabs({
   const [fades, setFades] = React.useState({ left: false, right: false });
   const updateFades = () => {
     const { offset, viewport, content } = scrollMetrics.current;
-    const left = offset > 4;
-    const right = content - viewport - offset > 4;
-    setFades((prev) => (prev.left === left && prev.right === right ? prev : { left, right }));
+    const next = tabsOverflowFades(offset, viewport, content, direction);
+    setFades((prev) => (prev.left === next.left && prev.right === next.right ? prev : next));
   };
 
   // Scroll the newly active tab into view when it is clipped
   React.useEffect(() => {
     if (!activeLayout) return;
     const { offset, viewport, content } = scrollMetrics.current;
-    if (content <= viewport) return;
-    const pad = 32;
-    let target: number | undefined;
-    if (activeLayout.x < offset + pad) {
-      target = Math.max(0, activeLayout.x - pad);
-    } else if (activeLayout.x + activeLayout.width > offset + viewport - pad) {
-      target = Math.min(content - viewport, activeLayout.x + activeLayout.width - viewport + pad);
-    }
+    const target = tabsScrollIntoViewX(activeLayout, offset, viewport, content, direction);
     if (target !== undefined) {
       scrollRef.current?.scrollTo({ x: target, animated: true });
     }
-  }, [activeLayout]);
+  }, [activeLayout, direction]);
 
   const isUnderline = variant === "underline";
   const indicatorTheme = (intent ?? "accent") as ThemeName;
@@ -356,7 +404,7 @@ export function Tabs({
   const slop = Math.max(0, Math.ceil((MIN_PRESS_TARGET - sizePx) / 2));
   const tabHitSlop = pressTargetHitSlop(sizePx);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const outerRadiusToken = knobProps.borderRadiusOuter.borderRadius;
+  const outerRadiusToken = knobProps.borderRadiusNested.borderRadius;
   const transition = knobProps.transition;
   const enabledCount = items.length;
   const activeIndex = items.findIndex((i) => i.value === currentValue);
@@ -384,6 +432,7 @@ export function Tabs({
         <UnderlineIndicator
           x={activeLayout.x}
           width={activeLayout.width}
+          data-tabs-indicator="underline"
           {...(transition ? { transition } : undefined)}
         />
       </Theme>
@@ -395,6 +444,7 @@ export function Tabs({
           width={activeLayout.width}
           height={activeLayout.height}
           backgroundColor={selectedTint ?? "$color4"}
+          data-tabs-indicator="thumb"
           {...thumbRadius}
           {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
           {...(transition ? { transition } : undefined)}
@@ -405,6 +455,8 @@ export function Tabs({
 
   if (items.length === 0) return null;
 
+  const tabListLabel = ariaLabel ?? t("Tabs");
+
   return (
     <TamaguiTabs
       value={currentValue}
@@ -419,11 +471,18 @@ export function Tabs({
       {...(fill ? fillProps : undefined)}
       data-tabs-variant={variant}
       data-tabs-fill={fill ? "true" : undefined}
+      data-tabs-dir={direction}
       data-size-token={visualSizeToken}
       data-density={knobProps.density}
       data-visual-px={sizePx}
     >
-      <StripWrapper underline={isUnderline}>
+      <StripWrapper
+        {...(isUnderline
+          ? { ...hairline.bottom, borderColor: componentColors.surface.border }
+          : undefined)}
+        data-fade-left={fades.left ? "true" : undefined}
+        data-fade-right={fades.right ? "true" : undefined}
+      >
         <ScrollView
           ref={scrollRef}
           horizontal
@@ -449,7 +508,7 @@ export function Tabs({
         >
           <TabsList
             loop={loop}
-            aria-label={t("Tabs")}
+            aria-label={tabListLabel}
             data-tabs-list={variant}
             data-size-token={visualSizeToken}
             data-density={knobProps.density}
@@ -463,7 +522,7 @@ export function Tabs({
                   gap: 0,
                   // Full fragment spread (AGENTS.md knob rule) so the
                   // cornerSmoothing class rides along with the radius.
-                  ...knobProps.borderRadiusOuter,
+                  ...knobProps.borderRadiusNested,
                 })}
           >
             {indicator}
@@ -574,7 +633,7 @@ export function Tabs({
                             : componentColors.text.secondary
                       }
                     >
-                      {item.label}
+                      {wrapBareTextChildren(item.label, (label) => label)}
                     </TabLabel>
                     {item.badge}
                   </View>
@@ -632,9 +691,12 @@ export function Tabs({
   );
 }
 
-// Re-export primitive parts for advanced composition
-Tabs.List = TamaguiTabs.List;
-Tabs.Tab = TamaguiTabs.Tab;
-Tabs.Content = TamaguiTabs.Content;
+TabsRoot.displayName = "Tabs";
+
+export const Tabs = withStaticProperties(TabsRoot, {
+  List: TamaguiTabs.List,
+  Tab: TamaguiTabs.Tab,
+  Content: TamaguiTabs.Content,
+});
 
 export type TabsTriggerProps = GetProps<typeof Trigger>;

package/src/Text.native.spec.tsx

@@ -0,0 +1,144 @@
+/**
+ * House Text knob wiring, NATIVE arm (MPO-20). Sibling of
+ * ./Heading.native.spec.tsx — see its header for WHY the arm is a separate
+ * file (the `vi.resetModules()` version returned a split module graph and
+ * proved nothing) and for what a `.native` spec can and cannot claim.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Paragraph, SizableText, Text } from "./Text";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+afterEach(cleanup);
+
+const LABEL = "Measure the text node";
+
+function classesByPrefix(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+/** Tamagui font-scope class on the TEXT NODE (`font_body` / `font_mono` / …). */
+function fontScopeClass(el: Element): string {
+  return (
+    String((el as HTMLElement).className || "")
+      .split(" ")
+      .find((c) => c.startsWith("font_")) ?? ""
+  );
+}
+
+/** Render, read the TEXT NODE's prefixed classes, clean up. */
+function renderTextClasses(node: React.ReactElement, prefixes: string[]): string[] {
+  renderWithProviders(node);
+  const textNode = screen.getByText(LABEL);
+  const classes = classesByPrefix(textNode, prefixes);
+  cleanup();
+  return classes;
+}
+
+describe("house Text — NATIVE environment (isWeb false)", () => {
+  it("really is running with the native platform flags", async () => {
+    const platform = await import("@multiplatform.one/platform");
+    expect(platform.isWeb).toBe(false);
+    expect(platform.isNative).toBe(true);
+  });
+
+  it("changes colour on a textAccent flip", () => {
+    const high = renderTextClasses(
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(high).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+
+  it("changes weight on a fontWeight flip, pinned to the 400/700 label law", () => {
+    const regular = renderTextClasses(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const bold = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    const explicit700 = renderTextClasses(<Text fontWeight="700">{LABEL}</Text>, ["_fow-"]);
+    expect(regular).not.toHaveLength(0);
+    expect(regular).not.toEqual(bold);
+    expect(regular).toEqual(explicit400);
+    expect(bold).toEqual(explicit700);
+  });
+
+  it("changes family on a bodyFont flip — the props channel, not the CSS rescue", () => {
+    const scope = (node: React.ReactElement) => {
+      renderWithProviders(node);
+      const cls = fontScopeClass(screen.getByText(LABEL));
+      cleanup();
+      return cls;
+    };
+    const sans = scope(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    const mono = scope(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    expect(sans).not.toBe("");
+    expect(sans).not.toBe(mono);
+    expect(mono).toBe("font_mono");
+  });
+
+  it("carries the same knobs on the sibling body voices", () => {
+    for (const Voice of [SizableText, Paragraph]) {
+      const high = renderTextClasses(
+        <Preset overrides={{ textAccent: "high" }}>
+          <Voice>{LABEL}</Voice>
+        </Preset>,
+        ["_col-"],
+      );
+      const low = renderTextClasses(
+        <Preset overrides={{ textAccent: "low" }}>
+          <Voice>{LABEL}</Voice>
+        </Preset>,
+        ["_col-"],
+      );
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    }
+  });
+
+  it("explicit consumer props still eject (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text fontWeight="400">{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    expect(ejected).toEqual(explicit400);
+  });
+});