@multiplatform.one/components 7.10.0 → 7.15.0

package/src/Text.spec.tsx

@@ -21,10 +21,10 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, useAccentOnSurface } from "@multiplatform.one/theme";
 import { XStack } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
-import { Text } from "./Text";
+import { Anchor, Text } from "./Text";
 
 afterEach(cleanup);
 
@@ -181,6 +181,36 @@ describe("house Text — fontWeight and bodyFont reach the text node", () => {
   });
 });
 
+describe("house Anchor — link chrome is house Text's, in the accent (MPO-21 G11-A)", () => {
+  function AccentProbe({ onInk }: { onInk: (ink: string) => void }) {
+    onInk(useAccentOnSurface());
+    return null;
+  }
+
+  it("paints the AA-safe accent ink, not tamagui's link colour", () => {
+    let ink = "";
+    const anchor = renderTextClasses(
+      <>
+        <AccentProbe onInk={(value) => (ink = value)} />
+        <Anchor href="#">{LABEL}</Anchor>
+      </>,
+      ["_col-"],
+    );
+    expect(ink).not.toBe("");
+    const accented = renderTextClasses(<Anchor color={ink as never}>{LABEL}</Anchor>, ["_col-"]);
+    const body = renderTextClasses(<Text>{LABEL}</Text>, ["_col-"]);
+    expect(anchor).not.toHaveLength(0);
+    expect(anchor).toEqual(accented);
+    expect(anchor).not.toEqual(body);
+  });
+
+  it("a consumer colour still ejects (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(<Anchor color="$color9">{LABEL}</Anchor>, ["_col-"]);
+    const explicit = renderTextClasses(<Text color="$color9">{LABEL}</Text>, ["_col-"]);
+    expect(ejected).toEqual(explicit);
+  });
+});
+
 // The NATIVE arm lives in ./Text.native.spec.tsx. It used to sit here as a
 // `vi.resetModules()` + dynamic-import block, but that returned a SPLIT module
 // graph — a fresh `renderWithProviders` over a stale `useResolvedKnobs` — and

package/src/Text.tsx

@@ -24,10 +24,10 @@
  *    500/600 are not label weights; see tamagui-rendered-reference.md §9)
  *  - textAccent → knobProps.textAccentColor  (high $color / medium+low
  *    $color11, the AA legibility floor) on Text/SizableText/Paragraph.
- *    Anchor keeps tamagui's link ink: link chrome has no owning LC rule yet
- *    (the former registry row's ADJUDICATION-CANDIDATE stands, tracked in
- *    the MR), and painting body accent over it would silently restyle every
- *    link before that adjudication.
+ *  - link ink → Anchor paints the accent, as the most chromatic step of the
+ *    theme's accent ramp that still clears AA on both page surfaces
+ *    (`useAccentOnSurface`). House Text owns link chrome (Clay 2026-09-26,
+ *    MPO-21 G11-A); a consumer `color` still ejects.
  *
  * Default body/label ramp (tamagui-rendered-reference.md §9, the $4 / $true
  * stop): 14px / 25px / 400. createInterFont's size+10 table yields 14/24;
@@ -38,7 +38,7 @@
  * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
  * TamaguiParagraph / TamaguiAnchor (./tamagui.ts escape hatches, LC-45).
  */
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   Anchor as RawAnchor,
   type AnchorProps,
@@ -81,5 +81,6 @@ export function Paragraph(props: ParagraphProps) {
 
 export function Anchor(props: AnchorProps) {
   const { knobProps } = useResolvedKnobs();
-  return <RawAnchor {...knobProps.body} {...props} />;
+  const linkInk = useAccentOnSurface();
+  return <RawAnchor {...knobProps.body} color={linkInk} {...props} />;
 }

package/src/Toast/Toast.spec.tsx

@@ -735,6 +735,56 @@ describe("Toast data attributes reach the DOM", () => {
   });
 });
 
+describe("Toast density moves padX and gap on the host (MPO-42)", () => {
+  afterEach(cleanup);
+
+  const padX = ["_px-", "_pl-", "_pr-"];
+  const gap = ["_gap-"];
+
+  function hostAtoms(node: ReactElement) {
+    renderWithProviders(node);
+    const host = screen.getByTestId("toast");
+    const measured = {
+      density: host.getAttribute("data-density"),
+      padX: classesByPrefix(host, padX),
+      gap: classesByPrefix(host, gap),
+    };
+    cleanup();
+    return measured;
+  }
+
+  it("the density knob changes padX and gap between the two stops", () => {
+    const comfortable = hostAtoms(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const compact = hostAtoms(
+      <Preset overrides={{ density: "compact" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    expect(comfortable.density).toBe("comfortable");
+    expect(compact.density).toBe("compact");
+    expect(comfortable.padX.length).toBeGreaterThan(0);
+    expect(comfortable.gap.length).toBeGreaterThan(0);
+    expect(compact.padX).not.toEqual(comfortable.padX);
+    expect(compact.gap).not.toEqual(comfortable.gap);
+  });
+
+  it("the compact prop lands the same padX and gap as the density knob", () => {
+    const knob = hostAtoms(
+      <Preset overrides={{ density: "compact" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const prop = hostAtoms(<Toast compact title="Saved" onDismiss={() => {}} />);
+    expect(prop.density).toBe("compact");
+    expect(prop.padX).toEqual(knob.padX);
+    expect(prop.gap).toEqual(knob.gap);
+  });
+});
+
 describe("Toast action label weight and contrast (TEXT NODE)", () => {
   it("Undo is weight 400 on the TEXT NODE, never 600 (R7 / §6.1)", () => {
     const action = renderActionWeight(

package/src/Tooltip/Tooltip.spec.tsx

@@ -2,8 +2,8 @@
  * @vitest-environment jsdom
  */
 
-import { fireEvent } from "@testing-library/react";
-import { OVERLAY_ANCHOR_GAP, __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { act, fireEvent } from "@testing-library/react";
+import { OVERLAY_ANCHOR_GAP, Preset, __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Button } from "@multiplatform.one/forms";
@@ -99,6 +99,59 @@ describe("Tooltip interaction", () => {
   });
 });
 
+describe("Tooltip content rides the border, elevation and animation knobs", () => {
+  const stops = [
+    { borderWidth: "none", elevation: "none", animation: "none" },
+    { borderWidth: "small", elevation: "small", animation: "quick" },
+    { borderWidth: "large", elevation: "large", animation: "slow" },
+  ] as const;
+
+  async function measure(stop: (typeof stops)[number]) {
+    const result = renderWithProviders(
+      <Preset overrides={stop}>
+        <Tooltip content="Hint" open>
+          <Button>Edit</Button>
+        </Tooltip>
+      </Preset>,
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+    const content = document.querySelector<HTMLElement>("[data-tooltip='content']");
+    const classes = content?.className.split(/\s+/) ?? [];
+    const measured = {
+      mounted: content !== null,
+      border: classes.find((c) => c.startsWith("_btw-")),
+      shadow: classes.find((c) => c.startsWith("_bxsh-"))?.match(/^_bxsh-\d+px\d+px\d+px/)?.[0],
+      transition: content?.style.transition.match(/^all \d+ms/)?.[0],
+    };
+    result.unmount();
+    return measured;
+  }
+
+  it("follows each stop on the mounted bubble, and none carries no border, shadow or motion", async () => {
+    const none = await measure(stops[0]);
+    const small = await measure(stops[1]);
+    const large = await measure(stops[2]);
+    expect(none).toEqual({
+      mounted: true,
+      border: "_btw-0px",
+      shadow: undefined,
+      transition: undefined,
+    });
+    expect(small).toMatchObject({
+      mounted: true,
+      border: "_btw-0--5px",
+      shadow: "_bxsh-0px3px6px",
+    });
+    // Overlay large is the ladder's own $5 dialog stop, not the control $4 (MPO-99).
+    expect(large).toMatchObject({ mounted: true, border: "_btw-2px", shadow: "_bxsh-0px12px24px" });
+    expect(small.transition).toMatch(/^all \d+ms$/);
+    expect(large.transition).toMatch(/^all \d+ms$/);
+    expect(large.transition).not.toBe(small.transition);
+  });
+});
+
 describe("Tooltip native long-press open path", () => {
   beforeEach(() => {
     vi.useFakeTimers();

package/src/TreeSelect/TreeSelect.spec.tsx

@@ -84,7 +84,7 @@ describe("TreeSelect cover + width (MPO-53 AC-3)", () => {
         open
       />,
     );
-    const trigger = result.container.querySelector(
+    const trigger = result.baseElement.querySelector(
       '[data-testid="tree-select-trigger"]',
     ) as HTMLElement;
     expect(trigger).toBeTruthy();
@@ -93,7 +93,7 @@ describe("TreeSelect cover + width (MPO-53 AC-3)", () => {
 
     try {
       await waitFor(() => {
-        const panel = result.container.querySelector(
+        const panel = result.baseElement.querySelector(
           '[data-testid="tree-select-panel"]',
         ) as HTMLElement | null;
         expect(panel).toBeTruthy();
@@ -114,7 +114,7 @@ describe("TreeSelect LC-49 one tab stop", () => {
     const result = renderWithProviders(
       <TreeSelect label="Account" nodes={accounts} value="hdfc" />,
     );
-    const closedStops = tabStops(result.container);
+    const closedStops = tabStops(result.baseElement);
     expect(closedStops.length).toBe(1);
     expect(closedStops[0]?.getAttribute("data-testid")).toBe("tree-select-trigger");
 
@@ -128,7 +128,7 @@ describe("TreeSelect LC-49 one tab stop", () => {
       />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+      expect(result.baseElement.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
     });
     const openRoot = result.baseElement;
     const search = openRoot.querySelector(
@@ -169,16 +169,16 @@ describe("TreeSelect LC-21 commit vs expand", () => {
       />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector("[data-treeselect-caret]")).toBeTruthy();
+      expect(result.baseElement.querySelector("[data-treeselect-caret]")).toBeTruthy();
     });
-    const caret = result.container.querySelector("[data-treeselect-caret]") as HTMLElement;
+    const caret = result.baseElement.querySelector("[data-treeselect-caret]") as HTMLElement;
     await act(async () => {
       fireEvent.click(caret);
     });
     expect(onChange).not.toHaveBeenCalled();
     expect(onOpenChange).not.toHaveBeenCalledWith(false);
 
-    const cash = result.container.querySelector(
+    const cash = result.baseElement.querySelector(
       '[data-treeselect-row="liabilities"]',
     ) as HTMLElement;
     await act(async () => {
@@ -201,10 +201,10 @@ describe("TreeSelect sheet at <=640", () => {
       />,
     );
     await waitFor(() => {
-      expect(desktop.container.querySelector("[data-treeselect-row]")).toBeTruthy();
+      expect(desktop.baseElement.querySelector("[data-treeselect-row]")).toBeTruthy();
     });
-    const desktopTree = desktop.container.querySelector('[data-testid="tree-select-tree"]');
-    const desktopRows = [...desktop.container.querySelectorAll("[data-treeselect-row]")].map(
+    const desktopTree = desktop.baseElement.querySelector('[data-testid="tree-select-tree"]');
+    const desktopRows = [...desktop.baseElement.querySelectorAll("[data-treeselect-row]")].map(
       (el) => ({
         id: el.getAttribute("data-treeselect-row"),
         depth: el.getAttribute("data-depth"),
@@ -226,7 +226,7 @@ describe("TreeSelect sheet at <=640", () => {
     await waitFor(() => {
       expect(mobile.baseElement.querySelector("[data-treeselect-row]")).toBeTruthy();
     });
-    expect(mobile.container.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
+    expect(mobile.baseElement.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
     const mobileTree = mobile.baseElement.querySelector('[data-testid="tree-select-tree"]');
     const mobileRows = [...mobile.baseElement.querySelectorAll("[data-treeselect-row]")].map(
       (el) => ({
@@ -247,19 +247,19 @@ describe("TreeSelect empty filter", () => {
       <TreeSelect label="Account" nodes={accounts} open emptyMessage="No matching accounts" />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+      expect(result.baseElement.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
     });
-    const search = result.container.querySelector(
+    const search = result.baseElement.querySelector(
       '[data-testid="tree-select-search"] input',
     ) as HTMLInputElement;
     await act(async () => {
       fireEvent.change(search, { target: { value: "xyzzy" } });
     });
-    const empty = result.container.querySelector(
+    const empty = result.baseElement.querySelector(
       '[data-testid="tree-select-empty"]',
     ) as HTMLElement;
     expect(empty).toBeTruthy();
     expect(empty.textContent).toContain("No matching accounts");
-    expect(result.container.querySelector('[data-testid="empty-state"]')).toBeNull();
+    expect(result.baseElement.querySelector('[data-testid="empty-state"]')).toBeNull();
   });
 });

package/src/TreeSelect/index.tsx

@@ -3,6 +3,7 @@ import {
   FloatingPanel,
   formCommonColors,
   InputParts,
+  PanelPortal,
   useFloatingPanel,
   useFormField,
   useViewportGtSm,
@@ -751,59 +752,61 @@ function FloatingTreeSelect({
         accessibilityLabel={accessibilityLabel}
       />
       {panel.mounted && (
-        <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
-          <YStack
-            {...getFloatingProps({
-              ref: panel.refs.setFloating,
-            })}
-            data-testid="tree-select-panel"
-            data-cover=""
-            data-width-mode={TREE_SELECT_WIDTH_MODE}
-            data-dismiss-class="commit"
-            data-fp-panel=""
-            outlineWidth={0}
-            pointerEvents={panel.visible ? "auto" : "none"}
-            {...panel.knobProps.elevatedSurface}
-            borderRadius={panel.dropdownRadius}
-            overflow="hidden"
-            style={
-              {
-                position: "fixed",
-                top: overlayStyle.current?.top ?? 0,
-                left: 0,
-                zIndex: zIndex.dropdown,
-                opacity: panel.visible ? 1 : 0,
-                transform: panel.visible ? "scale(1)" : "scale(0.96)",
-                transition: panelTransition,
-                boxSizing: "border-box",
-              } as Record<string, unknown>
-            }
-          >
-            <SearchRow
-              value={state.filter}
-              placeholder={searchPlaceholder}
-              inputRef={searchRef}
-              onChange={state.setFilter}
-              onKeyDown={onSearchKeyDown}
-              treeId={treeId}
-              activeDescendant={activeDescendant}
-              sizeToken={sizeToken}
-            />
-            <YStack overflow="scroll" maxHeight={320} id={treeId}>
-              <TreeSelectPanelBody
-                rows={state.rows}
-                selectedId={value}
-                activeIndex={state.activeIndex}
-                keyboardRing={state.keyboardRing}
+        <PanelPortal anchor={panel.triggerRef.current}>
+          <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
+            <YStack
+              {...getFloatingProps({
+                ref: panel.refs.setFloating,
+              })}
+              data-testid="tree-select-panel"
+              data-cover=""
+              data-width-mode={TREE_SELECT_WIDTH_MODE}
+              data-dismiss-class="commit"
+              data-fp-panel=""
+              outlineWidth={0}
+              pointerEvents={panel.visible ? "auto" : "none"}
+              {...panel.knobProps.elevatedSurface}
+              borderRadius={panel.dropdownRadius}
+              overflow="hidden"
+              style={
+                {
+                  position: "fixed",
+                  top: overlayStyle.current?.top ?? 0,
+                  left: 0,
+                  zIndex: zIndex.dropdown,
+                  opacity: panel.visible ? 1 : 0,
+                  transform: panel.visible ? "scale(1)" : "scale(0.96)",
+                  transition: panelTransition,
+                  boxSizing: "border-box",
+                } as Record<string, unknown>
+              }
+            >
+              <SearchRow
+                value={state.filter}
+                placeholder={searchPlaceholder}
+                inputRef={searchRef}
+                onChange={state.setFilter}
+                onKeyDown={onSearchKeyDown}
                 treeId={treeId}
-                emptyMessage={emptyMessage}
-                loading={loading}
-                onCommit={commit}
-                onToggle={state.toggle}
+                activeDescendant={activeDescendant}
+                sizeToken={sizeToken}
               />
+              <YStack overflow="scroll" maxHeight={320} id={treeId}>
+                <TreeSelectPanelBody
+                  rows={state.rows}
+                  selectedId={value}
+                  activeIndex={state.activeIndex}
+                  keyboardRing={state.keyboardRing}
+                  treeId={treeId}
+                  emptyMessage={emptyMessage}
+                  loading={loading}
+                  onCommit={commit}
+                  onToggle={state.toggle}
+                />
+              </YStack>
             </YStack>
-          </YStack>
-        </FloatingFocusManager>
+          </FloatingFocusManager>
+        </PanelPortal>
       )}
     </>
   );

package/src/Video/PlayerChrome.tsx

@@ -2,6 +2,7 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   useResolvedKnobs,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import {
   CornersInIcon,
@@ -83,7 +84,7 @@ function ChromeButton({
       hoverStyle={{ backgroundColor: "$color4" }}
       pressStyle={{ opacity: 0.85 }}
       focusVisibleStyle={{ ...control.focusVisibleKnobProps }}
-      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+      {...transitionProps(knobProps.transition)}
       onPress={(e: { stopPropagation?: () => void }) => {
         e.stopPropagation?.();
         onPress();
@@ -205,7 +206,7 @@ function SeekBar({
           backgroundColor="$color8"
           borderRadius={radius}
           overflow="hidden"
-          {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+          {...transitionProps(knobProps.transition)}
         >
           <YStack
             height="100%"
@@ -300,7 +301,7 @@ export function PlayerChrome({
             onFocusChange(false);
           },
         } as Record<string, unknown>)}
-        {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+        {...transitionProps(knobProps.transition)}
       >
         <YStack flex={1} alignItems="center" justifyContent="center" pointerEvents="none">
           {playing ? null : (

package/src/Wheel/Wheel.spec.tsx

@@ -275,7 +275,7 @@ describe("Wheel design-law (MPO-60)", () => {
     expect("default" in mod).toBe(false);
   });
 
-  it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {
+  it("selected row type stays on the body weight channel (400/700), never 500/600 (R7 / design-audit)", () => {
     renderWithProviders(
       <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
     );
@@ -284,7 +284,7 @@ describe("Wheel design-law (MPO-60)", () => {
       .querySelector('[data-testid="wheel-item"][data-selected="true"]') as HTMLElement;
     expect(selected).toBeTruthy();
     const text = selected.querySelector("[class]") as HTMLElement;
-    expect(text.className).toMatch(/_fow-400\b/);
+    expect(text.className).toMatch(/_fow-(400|700|bold)\b/);
     expect(text.className).not.toMatch(/_fow-600\b/);
     expect(text.className).not.toMatch(/_fow-500\b/);
   });
@@ -298,7 +298,7 @@ describe("Wheel design-law (MPO-60)", () => {
     const noneFrame = none.container.querySelector('[data-testid="wheel"]') as HTMLElement;
     const noneAtoms = String(noneFrame.className)
       .split(" ")
-      .filter((c) => c.startsWith("_btlr-"));
+      .filter((c) => c.startsWith("_btlr-") && c !== "_btlr-0px");
     none.unmount();
 
     const full = renderWithProviders(
@@ -309,7 +309,7 @@ describe("Wheel design-law (MPO-60)", () => {
     const fullFrame = full.container.querySelector('[data-testid="wheel"]') as HTMLElement;
     const fullAtoms = String(fullFrame.className)
       .split(" ")
-      .filter((c) => c.startsWith("_btlr-"));
+      .filter((c) => c.startsWith("_btlr-") && c !== "_btlr-0px");
     expect(noneAtoms).toEqual([]);
     expect(fullAtoms).toEqual([]);
   });