@multiplatform.one/components 7.80.0 → 7.81.1

package/src/ContextMenu/ContextMenu.spec.tsx

@@ -2,7 +2,8 @@ import { fireEvent, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Button } from "@multiplatform.one/forms";
-import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+import { SunIcon } from "@phosphor-icons/react";
+import { menuRowCheckGlyph, menuRowIconGlyph, OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
 import { ContextMenu } from "./index";
 
 function renderOpen(onSelect = vi.fn()) {
@@ -73,6 +74,50 @@ describe("ContextMenu", () => {
     expect(selected?.lastElementChild).toBe(check);
   });
 
+  it("draws a check beside row icons at their glyph, so it shares their stroke (FZ-8557 r3)", async () => {
+    renderWithProviders(
+      <ContextMenu
+        defaultOpen
+        items={[
+          {
+            label: "Light",
+            icon: <SunIcon size={menuRowIconGlyph.size} weight={menuRowIconGlyph.weight} />,
+            checked: true,
+          },
+          { label: "Pinned", checked: true },
+        ]}
+      >
+        <Button>Target</Button>
+      </ContextMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelectorAll('[role="menuitemcheckbox"]')).toHaveLength(2);
+    });
+    const [iconRow, textRow] = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitemcheckbox"]'),
+    );
+    const checkOf = (row: HTMLElement | undefined) =>
+      row?.querySelector("[data-mp-check] svg")?.getAttribute("width");
+    expect(checkOf(iconRow)).toBe(String(menuRowIconGlyph.size));
+    expect(checkOf(textRow)).toBe(String(menuRowCheckGlyph.size));
+  });
+
+  it("sits a trailing check on the row's padding, with no X column (FZ-8665)", async () => {
+    renderWithProviders(
+      <ContextMenu defaultOpen anchor="trigger" items={[{ label: "Pinned", checked: true }]}>
+        <Button>Target</Button>
+      </ContextMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    const row = document.querySelector<HTMLElement>('[role="menuitemcheckbox"]') as HTMLElement;
+    const check = row.querySelector<HTMLElement>("[data-mp-check]") as HTMLElement;
+    expect(row.lastElementChild).toBe(check);
+    expect(check.className).not.toMatch(/_(mr|me|mie|marginInlineEnd)-/);
+    expect(check.style.marginInlineEnd).toBe("");
+  });
+
   it("selects a plain item and closes (LC-21 COMMIT)", async () => {
     const onSelect = vi.fn();
     renderOpen(onSelect);

package/src/ContextMenu/index.tsx

@@ -22,11 +22,11 @@ import { IconSlot } from "@multiplatform.one/theme";
  * Sheet at ≤640 via FloatingPanel's overlay family pivot.
  */
 
+import { MenuCheckColumn } from "../CheckGlyph/MenuCheckColumn";
 import {
   transitionProps,
   hairline,
   keyboardFocusRingProps,
-  useMenuRowCheckInk,
   menuRowChecked,
   menuRowFrame,
   useResolvedKnobs,
@@ -49,7 +49,6 @@ import {
   type RefObject,
 } from "react";
 
-import { CheckIcon } from "@phosphor-icons/react";
 import { FloatingPanel } from "@multiplatform.one/forms";
 import type { GetProps, TamaguiElement } from "tamagui";
 import {
@@ -257,16 +256,15 @@ function ContextMenuRoot({
         contentPadding="none"
         triggerSizing={triggerSizing}
         {...freeOverlay}
-        // LC-112 (FZ-8480 Round 37): a bar button's menu opens ON the button
-        // at every width and draws the button again in place as an X, so
-        // pressing the button's spot closes the menu.
+        // LC-112 (FZ-8665 Round 45): a bar button's menu opens ON the button
+        // at every width, and its rows start at its top edge.
         {...(anchor === "trigger"
           ? {
               compactFace: "menu" as const,
               anchorMode: "cover-trigger" as const,
               coverAlign: "auto" as const,
               triggerEcho: false,
-              iconEcho: "menu" as const,
+              iconCover: true,
             }
           : null)}
       >
@@ -618,7 +616,6 @@ export interface ContextMenuCheckboxItemProps extends Omit<ContextMenuItemProps,
 
 const ContextMenuCheckboxItem = forwardRef<TamaguiElement, ContextMenuCheckboxItemProps>(
   function ContextMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }, ref) {
-    const checkInk = useMenuRowCheckInk();
     return (
       <ContextMenuItemBody
         ref={ref}
@@ -630,21 +627,7 @@ const ContextMenuCheckboxItem = forwardRef<TamaguiElement, ContextMenuCheckboxIt
           onCheckedChange?.(!checked);
           onSelect?.();
         }}
-        trailing={
-          <View
-            width={18}
-            flexShrink={0}
-            alignItems="center"
-            justifyContent="center"
-            opacity={checked ? 1 : 0}
-            data-mp-check="trailing"
-            {...(isWeb && checkInk
-              ? ({ style: { color: checkInk } } as Record<string, unknown>)
-              : {})}
-          >
-            <IconSlot icon={<CheckIcon size={14} weight="bold" color={checkInk} />} />
-          </View>
-        }
+        trailing={<MenuCheckColumn checked={checked} iconRow={props.icon != null} />}
         {...props}
       />
     );

package/src/DropdownMenu/DropdownMenu.avatarTrigger.spec.tsx

@@ -1,9 +1,8 @@
 /**
  * FZ-8220, LC-112, LC-262: an avatar trigger is an icon trigger. The account
  * menu opens on it (FZ-8438) with no text echo row, the avatar alone or inside
- * the press boxes an app wraps around it, and draws the avatar again in its
- * own spot as an X in the avatar's circle, where a press closes the menu
- * (FZ-8480 Round 37).
+ * the press boxes an app wraps around it. It covers the avatar and repeats
+ * nothing: no X, and the rows start at the panel's top edge (FZ-8665 Round 45).
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { waitFor } from "@testing-library/react";
@@ -62,7 +61,7 @@ describe("DropdownMenu avatar trigger (FZ-8220)", () => {
     expect(identity?.textContent).toContain("clayrisser@gmail.com");
   });
 
-  it("draws the avatar again in place as an X at phone width, a menu and not a sheet (FZ-8480)", async () => {
+  it("covers the avatar at phone width, a menu and not a sheet, with no X (FZ-8665)", async () => {
     const width = window.innerWidth;
     Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 390 });
     try {
@@ -81,11 +80,9 @@ describe("DropdownMenu avatar trigger (FZ-8220)", () => {
         expect(found?.querySelector('[role="menu"]')).toBeTruthy();
         return found as HTMLElement;
       });
-      const echo = panel.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-      expect(echo?.getAttribute("aria-label")).toBe("Close");
-      // The avatar turns into an X: no initials, an X glyph.
-      expect(echo?.textContent).toBe("");
-      expect(echo?.querySelector("svg")).toBeTruthy();
+      expect(panel.querySelector('[aria-label="Close"]')).toBeNull();
+      // The avatar's initials stay on the page, under the panel.
+      expect(panel.textContent).not.toContain("CR");
     } finally {
       Object.defineProperty(window, "innerWidth", {
         configurable: true,

package/src/DropdownMenu/index.tsx

@@ -21,12 +21,12 @@ import { IconSlot } from "@multiplatform.one/theme";
  * `onCheckedChange` and `onSelect`.
  */
 
+import { MenuCheckColumn } from "../CheckGlyph/MenuCheckColumn";
 import {
   transitionProps,
   Surface,
   hairline,
   keyboardFocusRingProps,
-  useMenuRowCheckInk,
   menuRowChecked,
   menuRowFrame,
   useResolvedKnobs,
@@ -53,7 +53,6 @@ import {
   type RefObject,
 } from "react";
 
-import { CheckIcon } from "@phosphor-icons/react";
 import { FloatingPanel, type PanelWidth } from "@multiplatform.one/forms";
 import type { GetProps, SizeTokens, TamaguiElement } from "tamagui";
 import {
@@ -457,9 +456,9 @@ function DropdownMenuRoot({
           anchorMode={resolvedAnchorMode}
           triggerEcho={!iconTrigger}
           coverAlign={iconTrigger ? "auto" : "start"}
-          // LC-112 (FZ-8480 Round 37): the menu covers its button and draws
-          // it again in place as an X that closes the menu.
-          iconEcho={iconTrigger ? "menu" : undefined}
+          // LC-112 (FZ-8665 Round 45): the menu covers its button, and its
+          // rows start at its top edge.
+          iconCover={iconTrigger}
           triggerRow={triggerRow}
           contentPadding="none"
           triggerSizing={triggerSizing}
@@ -906,7 +905,6 @@ export interface DropdownMenuCheckboxItemProps extends Omit<DropdownMenuItemProp
 
 const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckboxItemProps>(
   function DropdownMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }, ref) {
-    const checkInk = useMenuRowCheckInk();
     return (
       <DropdownMenuItemBody
         ref={ref}
@@ -918,18 +916,7 @@ const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckbox
           onCheckedChange?.(!checked);
           onSelect?.();
         }}
-        trailing={
-          <View
-            width={18}
-            flexShrink={0}
-            alignItems="center"
-            justifyContent="center"
-            opacity={checked ? 1 : 0}
-            data-mp-check="trailing"
-          >
-            <IconSlot icon={<CheckIcon size={14} weight="bold" color={checkInk} />} />
-          </View>
-        }
+        trailing={<MenuCheckColumn checked={checked} iconRow={props.icon != null} />}
         {...props}
       />
     );

package/src/Popover.coverTrigger.spec.tsx

@@ -97,7 +97,7 @@ describe("Popover cover-trigger adapter", () => {
     fireEvent.click(result.getByRole("button", { name: "Apply filters" }));
     await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
   });
-  it("an icon trigger's panel covers the button and draws it again as an X that closes it (FZ-8480)", async () => {
+  it("an icon trigger's panel covers the button with no X, a press outside closing it (FZ-8665)", async () => {
     const result = renderWithProviders(
       <Popover anchorMode="cover-trigger">
         <Popover.Trigger asChild>
@@ -112,8 +112,8 @@ describe("Popover cover-trigger adapter", () => {
     const panel = await result.findByTestId("floating-panel-viewport");
     expect(within(panel).queryByRole("button", { name: "Add node" })).toBeNull();
     expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
-    const close = within(panel).getByRole("button", { name: "Close" });
-    fireEvent.click(close);
+    expect(within(panel).queryByRole("button", { name: "Close" })).toBeNull();
+    fireEvent.click(document.body);
     await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
   });
 });

package/src/Popover.tsx

@@ -143,9 +143,9 @@ const CoverPopover = forwardRef<Popover, PopoverProps>(function CoverPopover(
     }
   }, [content.length, unsupportedContent]);
   const trigger = triggerPart?.props.children ?? triggerRow;
-  // LC-112 (FZ-8480): a glyph trigger (the "+") is covered by its panel and
-  // drawn again in its spot as an X that closes it, the iOS + to X morph. The
-  // panel stays a panel at phone width, sized by its content.
+  // LC-112 (FZ-8665): a glyph trigger (the "+") is covered by its panel, and a
+  // press outside closes it. The panel stays a panel at phone width, sized by
+  // its content.
   const iconTrigger = triggerRow == null && isIconTrigger(trigger);
   const decorated = isValidElement(trigger)
     ? cloneElement(trigger as ReactElement<Record<string, unknown>>, {
@@ -168,7 +168,7 @@ const CoverPopover = forwardRef<Popover, PopoverProps>(function CoverPopover(
         {...(iconTrigger
           ? {
               triggerEcho: false,
-              iconEcho: "close" as const,
+              iconCover: true,
               coverAlign: "auto" as const,
               compactFace: "menu" as const,
               widthMode: "fit-content" as const,
@@ -220,7 +220,7 @@ export const Popover = withStaticProperties(PopoverRoot, {
   Trigger: TamaguiPopover.Trigger,
   Content: StackedPopoverContent,
   Close: PopoverClose,
-  /** A panel's title row; over a + panel it shares the X's line (LC-112). */
+  /** A panel's title row, on the panel's padding (LC-112). */
   Header: PanelHeader,
   Anchor: TamaguiPopover.Anchor,
   Adapt: TamaguiPopover.Adapt,

package/src/SchemeToggle/SchemeToggle.spec.tsx

@@ -1,4 +1,4 @@
-import { CircleHalfIcon, MoonIcon, SunIcon, XIcon } from "@phosphor-icons/react";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -43,7 +43,7 @@ describe("SchemeToggle (FZ-8158)", () => {
     expect(set).toHaveBeenCalledWith("system");
   });
 
-  it("opens its menu on the button and draws the button again in place as an X, a press there closing it (FZ-8480)", async () => {
+  it("opens its menu on the button with no X, a press outside closing it (FZ-8665)", async () => {
     const { useUserScheme } = preference("dark", "dark");
     const { getByRole } = renderWithProviders(<SchemeToggle useUserScheme={useUserScheme} />);
     const live = getByRole("button", { name: "Appearance: Dark" });
@@ -53,15 +53,9 @@ describe("SchemeToggle (FZ-8158)", () => {
       expect(found?.querySelector('[role="menu"]')).toBeTruthy();
       return found as HTMLElement;
     });
-    const echo = panel.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-    expect(echo?.getAttribute("aria-label")).toBe("Close");
-    const pathOf = (node: ParentNode | null | undefined) =>
-      node?.querySelector("svg path")?.getAttribute("d");
-    const x = render(<XIcon weight="bold" />);
-    expect(pathOf(echo)).toBe(pathOf(x.container));
-    expect(pathOf(echo)).not.toBe(pathOf(live));
-    x.unmount();
-    fireEvent.click(echo as HTMLElement);
+    expect(panel.querySelector('[aria-label="Close"]')).toBeNull();
+    expect(panel.querySelector(`[aria-label="${live.getAttribute("aria-label")}"]`)).toBeNull();
+    fireEvent.click(document.body);
     await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeFalsy());
   });
 

package/src/SchemeToggle/SchemeToggle.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { XStack } from "tamagui";
+import { SchemeToggle } from "./index";
+
+const meta: Meta<typeof SchemeToggle> = {
+  title: "Components/SchemeToggle",
+  component: SchemeToggle,
+  parameters: { status: { type: "beta" } },
+};
+
+export default meta;
+type Story = StoryObj<typeof SchemeToggle>;
+
+/** A tap flips light and dark; a right-click (long-press on native) opens System, Light and Dark. */
+export const Default: Story = {
+  render: () => (
+    <XStack padding="$4" justifyContent="flex-end">
+      <SchemeToggle />
+    </XStack>
+  ),
+};

package/src/SchemeToggle/index.tsx

@@ -1,6 +1,7 @@
 import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { IconButton, type IconButtonProps } from "@multiplatform.one/forms";
 import {
+  menuRowIconGlyph,
   useSchemePreference,
   type SchemePreference,
   type ThemeScheme,
@@ -60,7 +61,7 @@ export function SchemeToggle({
         const Glyph = schemeGlyphs[value];
         return {
           label: name(value),
-          icon: <Glyph size={18} weight="bold" />,
+          icon: <Glyph size={menuRowIconGlyph.size} weight={menuRowIconGlyph.weight} />,
           checked: scheme.setting === value,
           onSelect: () => scheme.set(value),
         };

package/src/ScrollView/ScrollView.native.spec.tsx

@@ -206,6 +206,15 @@ describe("catalog scroll owners (MPO-457)", () => {
       });
     expect(offenders).toEqual([]);
   });
+
+  it("reads a type argument as no tag, so a ref typed by the RN ScrollView owns no scroll", () => {
+    const code = [
+      "const scrollRef = useRef<RNScrollView | null>(null);",
+      "const Scroller = forwardRef<RNScrollView, Props>(render);",
+      "return <RNScrollView ref={scrollRef} />;",
+    ].join("\n");
+    expect(openingTags(code, "RNScrollView").map((tag) => tag.line)).toEqual([3]);
+  });
 });
 
 function sourceFiles(dir: string): string[] {
@@ -245,10 +254,13 @@ function aliasesOf(code: string, local: string): string[] {
   return [...code.matchAll(re)].map((match) => match[1]!);
 }
 
-/** Every JSX opening tag of `name`, props included, with its line. */
+/**
+ * Every JSX opening tag of `name`, props included, with its line. A `<` right
+ * after an identifier or a closing bracket opens a type argument, not a tag.
+ */
 function openingTags(code: string, name: string): Array<{ text: string; line: number }> {
   const out: Array<{ text: string; line: number }> = [];
-  for (const match of code.matchAll(new RegExp(`<${name}(?![\\w.])`, "g"))) {
+  for (const match of code.matchAll(new RegExp(`(?<![\\w$.)\\]])<${name}(?![\\w.])`, "g"))) {
     let depth = 0;
     let end = match.index + match[0].length;
     for (; end < code.length; end++) {

package/src/SheetFrame.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useEffect, useState } from "react";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
+import { sheetGrabber } from "@multiplatform.one/theme";
 import { isWeb, Sheet, YStack } from "tamagui";
 import { ScrollView } from "./ScrollView";
 import { SheetModal } from "./SheetModal";
@@ -81,14 +82,7 @@ function TabsInSheetHarness() {
         onPositionChange={setPosition}
         dismissOnSnapToBottom={false}
       >
-        <Sheet.Handle
-          backgroundColor="$color8"
-          opacity={0.45}
-          height={5}
-          width={36}
-          borderRadius={100}
-          aria-label="Resize"
-        />
+        <Sheet.Handle {...sheetGrabber} aria-label="Resize" />
         <SheetFrame borderBottomLeftRadius={0} borderBottomRightRadius={0}>
           <SizableText fontWeight="600">Stack</SizableText>
           <Tabs

package/src/SheetModal/SheetModal.grabber.spec.tsx

@@ -0,0 +1,51 @@
+/**
+ * FZ-8648: one grabber. SheetModal draws the theme's `sheetGrabber` on the web
+ * and on native, with no local transform or margin, the recipe the
+ * FloatingPanel sheet draws too (`public/forms/.../sheetGrabber.spec.tsx`).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sheetGrabber } from "@multiplatform.one/theme";
+import { describe, expect, it, vi } from "vitest";
+import { Text, View } from "tamagui";
+import { SheetModal as NativeSheetModal } from "./index.native";
+import { SheetModal } from "./index";
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+}));
+
+const atoms = (node: Element) => String(node.className).split(/\s+/).filter(Boolean);
+
+function recipeAtoms() {
+  const view = renderWithProviders(<View testID="recipe" {...sheetGrabber} />);
+  const list = atoms(view.getByTestId("recipe"));
+  view.unmount();
+  return list;
+}
+
+describe("SheetModal grabber (FZ-8648)", () => {
+  it("draws the recipe on native", () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <NativeSheetModal open onOpenChange={() => {}}>
+        <Text>Body</Text>
+      </NativeSheetModal>,
+    );
+    const capsule = result.getByTestId("sheet-modal-grabber").firstElementChild as Element;
+    expect(atoms(capsule)).toEqual(expect.arrayContaining(recipe));
+  });
+
+  it("draws the recipe on the web, with no transform", async () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <SheetModal open onOpenChange={() => {}}>
+        <Text>Body</Text>
+      </SheetModal>,
+    );
+    const handle = await result.findByLabelText("Resize");
+    expect(atoms(handle)).toEqual(expect.arrayContaining(recipe));
+    expect(handle.getAttribute("style") ?? "").not.toMatch(/transform/);
+  });
+});

package/src/SheetModal/index.native.tsx

@@ -28,6 +28,9 @@ import {
   useResolvedKnobs,
   type MotionStop,
   nativeAnimationConfig as animationConfig,
+  overlayScrim,
+  sheetGrabber,
+  sheetGrabberZone,
 } from "@multiplatform.one/theme";
 import {
   useCallback,
@@ -424,7 +427,7 @@ export function SheetModal({
             accessibilityRole="button"
             accessibilityLabel={t("Close")}
           >
-            <View flex={1} backgroundColor="$shadow6" />
+            <View flex={1} backgroundColor={overlayScrim} />
           </Pressable>
           <Animated.View
             onLayout={(e) => {
@@ -456,12 +459,19 @@ export function SheetModal({
               {...knobProps.borderRadius}
               borderBottomLeftRadius={0}
               borderBottomRightRadius={0}
-              {...(regular ? { borderBottomWidth: 0 } : { elevation: knobProps.elevation })}
+              // A compact sheet spans the screen: only its top edge meets the page.
+              {...(regular
+                ? { borderBottomWidth: 0 }
+                : {
+                    elevation: knobProps.elevation,
+                    borderLeftWidth: 0,
+                    borderRightWidth: 0,
+                    borderBottomWidth: 0,
+                  })}
               maxHeight={maxHeight}
               flexShrink={1}
               minHeight={0}
               {...(fill ? fillSlot : null)}
-              paddingTop="$2"
               paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
               // No focus or press pseudo on this surface: on native tamagui
               // turns one into a touch-responder claim, and a responder here
@@ -489,22 +499,9 @@ export function SheetModal({
                   accessibilityRole="adjustable"
                   accessibilityLabel={t("Drag to resize")}
                   testID="sheet-modal-grabber"
-                  style={{
-                    alignSelf: "stretch",
-                    alignItems: "center",
-                    paddingTop: 3,
-                    paddingBottom: 11,
-                    ...(fill ? nonShrinking : null),
-                  }}
+                  style={{ ...sheetGrabberZone, ...(fill ? nonShrinking : null) }}
                 >
-                  <View
-                    width={36}
-                    height={5}
-                    borderRadius={100}
-                    backgroundColor="$color8"
-                    opacity={0.45}
-                    accessible={false}
-                  />
+                  <View {...sheetGrabber} accessible={false} />
                 </RNView>
                 <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
                   <Surface elevated={regular || undefined}>

package/src/SheetModal/index.tsx

@@ -9,7 +9,12 @@
  * on device). Dismissal: overlay tap / snap-to-bottom / Escape (LC-21).
  */
 
-import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  overlayScrim,
+  sheetGrabber,
+  transitionProps,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { OverlayStackProvider, useOverlayZIndex } from "@multiplatform.one/forms";
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { isWeb, Sheet, View, useWindowDimensions } from "tamagui";
@@ -128,24 +133,13 @@ export function SheetModal({
       portalProps={{ zIndex: sheetZIndex }}
     >
       <Sheet.Overlay
-        backgroundColor="$shadow6"
+        backgroundColor={overlayScrim}
         {...transitionProps(knobProps.motion.scrim)}
         enterStyle={{ opacity: 0 }}
         exitStyle={{ opacity: 0 }}
       />
-      {/* Apple grabber: 36×5 capsule, muted fill, VoiceOver resize affordance. */}
-      <Sheet.Handle
-        backgroundColor="$color8"
-        opacity={0.45}
-        height={5}
-        width={36}
-        borderRadius={100}
-        marginBottom={0}
-        marginHorizontal={0}
-        alignSelf="center"
-        y={10}
-        aria-label="Resize"
-      />
+      {/* VoiceOver resize affordance. */}
+      <Sheet.Handle {...sheetGrabber} aria-label="Resize" />
       <SheetFrame
         ref={frameRef as never}
         {...({
@@ -160,6 +154,9 @@ export function SheetModal({
           : null)}
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
+        borderLeftWidth={0}
+        borderRightWidth={0}
+        borderBottomWidth={0}
         overflow="hidden"
         {...frameRingReset}
       >

package/src/TreeSelect/index.tsx

@@ -11,11 +11,11 @@ import {
   panelViewportPadding,
   useOverlayZIndex,
 } from "@multiplatform.one/forms";
+import { CheckGlyph } from "../CheckGlyph";
 import {
   CaretDownIcon,
   CaretLeftIcon,
   CaretRightIcon,
-  CheckIcon,
   FileIcon,
   FolderIcon,
   FolderOpenIcon,
@@ -27,7 +27,6 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   listHeightForRows,
-  useMenuRowCheckInk,
   menuRowChecked,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -110,7 +109,6 @@ function TreeSelectRows({
 }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const checkInk = useMenuRowCheckInk();
   const checkedFill = menuRowChecked(knobProps.scheme);
   const nestedPx = knobProps.nestedControl.px;
   const indentStep = 16;
@@ -271,7 +269,7 @@ function TreeSelectRows({
             ) : null}
             {isSelected ? (
               <View flexShrink={0} width={14} height={14}>
-                <CheckIcon size={14} weight="bold" color={checkInk} />
+                <CheckGlyph />
               </View>
             ) : null}
           </XStack>