@multiplatform.one/components 6.7.0 → 7.1.0

package/src/DropdownMenu/index.tsx

@@ -11,7 +11,11 @@
  *
  * Composable parts (DropdownMenu.Trigger/Content/Item/CheckboxItem/
  * Separator/Label) plus a convenience `items=[]` prop for the common
- * row-actions case.
+ * row-actions case. Dismissal follows LC-21: plain items COMMIT-close,
+ * checkable items COMPOSE-stay; `closeOnSelect` (entry-level, or menu-level
+ * on the root) opts a checkable single-select "radio-style" menu into
+ * close-on-pick — entries with `checked` fire BOTH `onCheckedChange` and
+ * `onSelect`.
  */
 
 import {
@@ -21,17 +25,23 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
+  useState,
   type ReactNode,
   type RefObject,
 } from "react";
 import {
-  Intent,
+  OVERLAY_ANCHOR_GAP,
   hairline,
+  keyboardFocusRingProps,
   menuRowFrame,
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
   useResolvedKnobs,
   warnBareDisabled,
+  wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
 import type { GetProps, PopoverContentProps, PopoverProps, TamaguiElement } from "tamagui";
@@ -72,8 +82,22 @@ export interface DropdownMenuItemSpec {
   destructive?: boolean;
   /** Present ⇒ renders as a checkable item (menuitemcheckbox). */
   checked?: boolean;
+  /** Toggle callback for checkable entries (fires with the next checked state). */
   onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Fires on every activation — checkable entries included (alongside
+   * `onCheckedChange`), so single-select "radio-style" menus can navigate
+   * from the same entry that carries the check mark.
+   */
   onSelect?: () => void;
+  /**
+   * Close the menu after this entry activates. Defaults per LC-21 class:
+   * plain items close (COMMIT — the pick completes the contract), checkable
+   * items stay open (COMPOSE — toggles accumulate). The menu-level
+   * `closeOnSelect` overrides the class default; this entry-level value
+   * wins over both.
+   */
+  closeOnSelect?: boolean;
 }
 
 export type DropdownMenuEntry = DropdownMenuItemSpec | { separator: true };
@@ -94,6 +118,13 @@ export interface DropdownMenuProps {
   placement?: DropdownMenuPlacement;
   /** Max menu height before the list scrolls (convenience `items` path). */
   maxHeight?: number;
+  /**
+   * Menu-level close-on-activate default for every item (entry-level
+   * `closeOnSelect` wins). Set true on single-select "radio-style" menus —
+   * view/board/sort switchers whose checked pick commits and closes
+   * (LC-21 COMMIT) — instead of controlling `open` from the consumer.
+   */
+  closeOnSelect?: boolean;
 }
 
 // ── Context ───────────────────────────────────────────────────
@@ -103,6 +134,10 @@ interface DropdownMenuContextValue {
   setOpen: (open: boolean) => void;
   triggerRef: RefObject<TamaguiElement | null>;
   close: () => void;
+  /** Menu-level closeOnSelect default (entry-level values win). */
+  closeOnSelect?: boolean;
+  /** APG: ArrowUp on the trigger focuses the last item on open. */
+  pendingFocusRef: RefObject<"first" | "last">;
 }
 
 const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);
@@ -124,13 +159,20 @@ const ItemRow = styled(XStack, {
   ...menuRowFrame,
   gap: "$2.5",
   cursor: "pointer",
+  // LC-72 CONTAINER-CLIP: rows stay square; the overlay clips outer corners.
+  // LC-71: rest and pointer-origin focus paint no ring. Keyboard ring is
+  // applied per-row via keyboardFocusRingProps (inset so overflow:hidden
+  // does not sever it) when wasKeyboardFocus().
+  outlineWidth: 0,
   hoverStyle: { backgroundColor: componentColors.interactive.hover },
   pressStyle: { backgroundColor: componentColors.interactive.active },
-  // Focus highlight doubles as the roving-focus indicator (full-width row).
-  focusStyle: { backgroundColor: componentColors.interactive.hover, outlineStyle: "none" as any },
+  focusStyle: {
+    backgroundColor: componentColors.interactive.hover,
+    outlineWidth: 0,
+  },
   focusVisibleStyle: {
     backgroundColor: componentColors.interactive.hover,
-    outlineStyle: "none" as any,
+    outlineWidth: 0,
   },
   variants: {
     disabled: {
@@ -165,6 +207,7 @@ function DropdownMenuRoot({
   onOpenChange,
   placement = "bottom-start",
   maxHeight,
+  closeOnSelect,
 }: DropdownMenuProps) {
   const [open, setOpen] = useControllableState({
     prop: openProp,
@@ -172,6 +215,7 @@ function DropdownMenuRoot({
     onChange: onOpenChange,
   });
   const triggerRef = useRef<TamaguiElement | null>(null);
+  const pendingFocusRef = useRef<"first" | "last">("first");
 
   const close = useCallback(() => {
     setOpen(false);
@@ -184,8 +228,8 @@ function DropdownMenuRoot({
   }, [setOpen]);
 
   const ctx = useMemo<DropdownMenuContextValue>(
-    () => ({ open, setOpen, triggerRef, close }),
-    [open, setOpen, close],
+    () => ({ open, setOpen, triggerRef, close, closeOnSelect, pendingFocusRef }),
+    [open, setOpen, close, closeOnSelect],
   );
 
   return (
@@ -194,7 +238,7 @@ function DropdownMenuRoot({
         open={open}
         onOpenChange={setOpen}
         placement={placement}
-        offset={4}
+        offset={OVERLAY_ANCHOR_GAP}
         stayInFrame
         allowFlip
       >
@@ -210,6 +254,8 @@ function DropdownMenuRoot({
                     key={(entry as DropdownMenuItemSpec).key ?? index}
                     checked={(entry as DropdownMenuItemSpec).checked!}
                     onCheckedChange={(entry as DropdownMenuItemSpec).onCheckedChange}
+                    onSelect={(entry as DropdownMenuItemSpec).onSelect}
+                    closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
                     disabled={(entry as DropdownMenuItemSpec).disabled}
                     disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
                     shortcut={(entry as DropdownMenuItemSpec).shortcut}
@@ -224,6 +270,7 @@ function DropdownMenuRoot({
                     disabled={(entry as DropdownMenuItemSpec).disabled}
                     disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
                     destructive={(entry as DropdownMenuItemSpec).destructive}
+                    closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
                     onSelect={(entry as DropdownMenuItemSpec).onSelect}
                   >
                     {(entry as DropdownMenuItemSpec).label}
@@ -268,13 +315,19 @@ const DropdownMenuTrigger = forwardRef<TamaguiElement, DropdownMenuTriggerProps>
     const handleKeyDown = (e: globalThis.KeyboardEvent) => {
       (onKeyDown as unknown as ((e: globalThis.KeyboardEvent) => void) | undefined)?.(e);
       if (e.repeat) return;
-      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
         swallowNextKeyUp(e.key);
         if (e.defaultPrevented) return; // composed trigger already activated
         e.preventDefault();
         if (e.key === "ArrowDown") {
+          ctx.pendingFocusRef.current = "first";
+          if (!ctx.open) ctx.setOpen(true);
+        } else if (e.key === "ArrowUp") {
+          // APG / macOS / Radix: Up opens onto the last item.
+          ctx.pendingFocusRef.current = "last";
           if (!ctx.open) ctx.setOpen(true);
         } else {
+          ctx.pendingFocusRef.current = "first";
           ctx.setOpen(!ctx.open);
         }
       }
@@ -296,17 +349,38 @@ const DropdownMenuTrigger = forwardRef<TamaguiElement, DropdownMenuTriggerProps>
 export interface DropdownMenuContentProps extends PopoverContentProps {
   /** Max height before the item list scrolls. */
   maxHeight?: number;
-  /** Minimum menu width. */
+  /**
+   * Minimum menu width. Defaults to the measured trigger width
+   * (OVERLAY_ANCHOR_GAP rule: anchored menus match the trigger width
+   * exactly and may only grow wider for content, never narrower).
+   */
   minWidth?: number;
 }
 
 const DropdownMenuContent = forwardRef<TamaguiElement, DropdownMenuContentProps>(
-  function DropdownMenuContent({ children, maxHeight, minWidth = 200, ...props }, forwardedRef) {
+  function DropdownMenuContent({ children, maxHeight, minWidth, ...props }, forwardedRef) {
     const ctx = useDropdownMenuContext("Content");
     const { knobProps } = useResolvedKnobs();
     const innerRef = useRef<TamaguiElement | null>(null);
+
+    // OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): the menu's min-width is
+    // the trigger's rendered width — measured on open, so the menu is never
+    // narrower than its trigger and content may still grow it wider.
+    const [triggerWidth, setTriggerWidth] = useState<number | undefined>(undefined);
+    useLayoutEffect(() => {
+      if (!isWeb || !ctx.open) return;
+      const node = ctx.triggerRef.current as unknown as HTMLElement | null;
+      if (node && typeof node.getBoundingClientRect === "function") {
+        // Ceil to whole CSS px: a fractional min-width could render the menu
+        // a hair narrower than the trigger; never-narrower wins over exact
+        // subpixels (and whole-px origins keep borders on device pixels).
+        setTriggerWidth(Math.ceil(node.getBoundingClientRect().width));
+      }
+    }, [ctx.open, ctx.triggerRef]);
+    const resolvedMinWidth = minWidth ?? triggerWidth;
     const composedRef = useComposedRefs(innerRef, forwardedRef);
     const typeahead = useRef({ buffer: "", at: 0 });
+    if (isWeb) ensureKeyboardModalityTracking();
 
     const getItems = useCallback((): HTMLElement[] => {
       const node = innerRef.current as unknown as HTMLElement | null;
@@ -320,13 +394,19 @@ const DropdownMenuContent = forwardRef<TamaguiElement, DropdownMenuContentProps>
       el?.focus();
     }, []);
 
-    // Menu pattern: focus lands on the first item when the menu opens.
+    // Menu pattern: focus lands on the first item when the menu opens
+    // (last item when opened with ArrowUp — APG menu-button).
     const handleOpenAutoFocus = useCallback(
       (event: Event) => {
         event.preventDefault();
-        requestAnimationFrame(() => focusItem(getItems()[0]));
+        const prefer = ctx.pendingFocusRef.current;
+        ctx.pendingFocusRef.current = "first";
+        requestAnimationFrame(() => {
+          const items = getItems();
+          focusItem(prefer === "last" ? items[items.length - 1] : items[0]);
+        });
       },
-      [focusItem, getItems],
+      [ctx, focusItem, getItems],
     );
 
     // The Popover focus scope does not restore focus to the trigger on its
@@ -419,7 +499,7 @@ const DropdownMenuContent = forwardRef<TamaguiElement, DropdownMenuContentProps>
         // row highlights to the radius knob.
         padding={0}
         overflow="hidden"
-        minWidth={minWidth}
+        minWidth={resolvedMinWidth}
         transition={knobProps.transition}
         enterStyle={{ opacity: 0, y: -4, scale: 0.97 }}
         exitStyle={{ opacity: 0, y: -4, scale: 0.97 }}
@@ -462,12 +542,18 @@ export interface DropdownMenuItemProps extends Omit<
   /** Error-intent row (destructive action). */
   destructive?: boolean;
   onSelect?: () => void;
-  /** Close the menu after selecting (default true). */
+  /**
+   * Close the menu after selecting. Class default when unset: Item closes
+   * (LC-21 COMMIT), CheckboxItem stays open (COMPOSE); a menu-level
+   * `closeOnSelect` on the root overrides the class default.
+   */
   closeOnSelect?: boolean;
 }
 
 interface ItemBodyProps extends DropdownMenuItemProps {
   leading?: ReactNode;
+  /** LC-21 class default applied when neither entry nor menu set a value. */
+  closeOnSelectDefault?: boolean;
 }
 
 const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
@@ -480,7 +566,8 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
       disabledReason,
       destructive = false,
       onSelect,
-      closeOnSelect = true,
+      closeOnSelect,
+      closeOnSelectDefault = true,
       role = "menuitem",
       leading,
       ...props
@@ -490,6 +577,9 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
     const ctx = useDropdownMenuContext("Item");
     const { knobProps } = useResolvedKnobs();
     const theme = useTheme();
+    const [kbRing, setKbRing] = useState(false);
+    const [highlighted, setHighlighted] = useState(false);
+    const pointerIntentRef = useRef(false);
     // DG-ST-03: disabled menu items explain inline or DEV-warn.
     warnBareDisabled({
       component: "DropdownMenu.Item",
@@ -503,16 +593,35 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
       | string
       | undefined;
 
+    // Entry-level closeOnSelect wins over the menu-level default, which wins
+    // over the LC-21 class default (Item COMMIT-closes, CheckboxItem
+    // COMPOSE-stays).
+    const shouldCloseOnSelect = closeOnSelect ?? ctx.closeOnSelect ?? closeOnSelectDefault;
+
     const handleSelect = () => {
       if (disabled) return;
       onSelect?.();
-      if (closeOnSelect) ctx.close();
+      if (shouldCloseOnSelect) ctx.close();
     };
 
-    // Destructive rows ride the error sub-theme: step-11 text on the neutral
-    // overlay, hover highlight from the same hue's ramp.
+    // Destructive = red text/icon (Linear / Primer / macOS). Highlight fill
+    // may tint; the LC-71 ring stays the overlay `$outlineColor`, never the
+    // error-intent outline (which reads as a red border on the row).
     const textColor = destructive ? "$red11" : componentColors.text.primary;
 
+    const highlightFill =
+      destructive && !disabled
+        ? {
+            hoverStyle: { backgroundColor: "$red3" },
+            pressStyle: { backgroundColor: "$red4" },
+          }
+        : undefined;
+    const focusFill =
+      destructive && !disabled
+        ? { backgroundColor: "$red3" as const }
+        : { backgroundColor: componentColors.interactive.hover };
+    const ring = kbRing ? keyboardFocusRingProps : { outlineWidth: 0 as const };
+
     return (
       <ItemRow
         ref={forwardedRef}
@@ -522,24 +631,42 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
         minHeight={knobProps.sizeToken}
         transition={knobProps.transition}
         onPress={handleSelect}
+        {...highlightFill}
+        {...(explainedDisable ? { paddingVertical: "$1.5" } : {})}
+        {...(props as any)}
         {...(isWeb
           ? ({
               tabIndex: -1,
               [MENU_ITEM_ATTR]: "",
-              // Enter/Space activation is handled by the menu-level native
-              // keydown listener in Content (single source, no double-fire).
+              // Radix: pointer-move moves highlight so hover and keyboard
+              // never paint two rows at once. LC-71: ring only when the
+              // focus is keyboard-origin — pointer-move sets a local flag
+              // so wasKeyboardFocus() (still true until pointerdown) does
+              // not keep the ring after the mouse takes over.
+              onFocus: () => {
+                setHighlighted(true);
+                setKbRing(wasKeyboardFocus() && !pointerIntentRef.current);
+                pointerIntentRef.current = false;
+              },
+              onBlur: () => {
+                setHighlighted(false);
+                setKbRing(false);
+              },
+              onPointerMove: (e: { pointerType?: string; currentTarget: unknown }) => {
+                if (disabled) return;
+                if (e.pointerType && e.pointerType !== "mouse") return;
+                const node = e.currentTarget as HTMLElement;
+                if (document.activeElement === node) return;
+                pointerIntentRef.current = true;
+                node.focus();
+              },
+              "data-highlighted": highlighted ? "true" : undefined,
+              "data-mp-kb-ring": kbRing ? "true" : undefined,
             } as any)
           : {})}
-        {...(destructive && !disabled
-          ? {
-              hoverStyle: { backgroundColor: "$red3" },
-              pressStyle: { backgroundColor: "$red4" },
-              focusStyle: { backgroundColor: "$red3" },
-              focusVisibleStyle: { backgroundColor: "$red3" },
-            }
-          : {})}
-        {...(explainedDisable ? { paddingVertical: "$1.5" } : {})}
-        {...(props as any)}
+        {...(kbRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
+        focusStyle={{ ...focusFill, ...ring }}
+        focusVisibleStyle={{ ...focusFill, ...ring }}
       >
         {leading}
         {icon ? (
@@ -600,13 +727,6 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
 
 const DropdownMenuItem = forwardRef<TamaguiElement, DropdownMenuItemProps>(
   function DropdownMenuItem(props, ref) {
-    if (props.destructive) {
-      return (
-        <Intent name="error">
-          <DropdownMenuItemBody ref={ref} {...props} />
-        </Intent>
-      );
-    }
     return <DropdownMenuItemBody ref={ref} {...props} />;
   },
 );
@@ -615,24 +735,30 @@ const DropdownMenuItem = forwardRef<TamaguiElement, DropdownMenuItemProps>(
 
 export interface DropdownMenuCheckboxItemProps extends Omit<
   DropdownMenuItemProps,
-  "destructive" | "icon" | "onSelect"
+  "destructive" | "icon"
 > {
   checked: boolean;
+  /** Toggle callback (fires with the next checked state on every activation). */
   onCheckedChange?: (checked: boolean) => void;
 }
 
 const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckboxItemProps>(
-  function DropdownMenuCheckboxItem(
-    { checked, onCheckedChange, closeOnSelect = false, ...props },
-    ref,
-  ) {
+  function DropdownMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }, ref) {
     return (
       <DropdownMenuItemBody
         ref={ref}
         role={"menuitemcheckbox" as any}
         aria-checked={checked}
-        closeOnSelect={closeOnSelect}
-        onSelect={() => onCheckedChange?.(!checked)}
+        // LC-21 COMPOSE class default: toggles accumulate, so the menu stays
+        // open unless the entry or the menu opts into close-on-select
+        // (single-select radio-style navigation menus do).
+        closeOnSelectDefault={false}
+        // Both callbacks fire: the toggle contract AND the activation
+        // contract — a checked entry's onSelect must never be dropped.
+        onSelect={() => {
+          onCheckedChange?.(!checked);
+          onSelect?.();
+        }}
         leading={
           <View
             width={18}

package/src/ErrorBoundary/index.tsx

@@ -1,6 +1,6 @@
 import type { ErrorInfo, ReactNode } from "react";
 import { Component } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { Button } from "@multiplatform.one/forms";
 import { H2, YStack } from "tamagui";
 

package/src/Pagination.api.spec.tsx

@@ -343,3 +343,44 @@ describe("Pagination selected mark (LC-05 / D-01)", () => {
     expect(other.closest(".t_accent")).toBeNull();
   });
 });
+
+describe("Pagination LC-71 RING-ANATOMY / 44px floor", () => {
+  it("every numbered page control paints at least 44×44", () => {
+    const { container } = renderWithProviders(
+      <Pagination variant="numbered" total={8} page={3} showFirstLast />,
+    );
+    const labels = [
+      "Go to first page",
+      "Go to previous page",
+      "Page 1",
+      "Page 3",
+      "Go to next page",
+      "Go to last page",
+    ];
+    for (const label of labels) {
+      const el = byLabel(container, label) as HTMLElement;
+      expect(el, label).toBeTruthy();
+      const style = getComputedStyle(el);
+      expect(
+        parseFloat(style.minWidth) || parseFloat(style.width),
+        `${label} minWidth`,
+      ).toBeGreaterThanOrEqual(44);
+      expect(
+        parseFloat(style.minHeight) || parseFloat(style.height),
+        `${label} minHeight`,
+      ).toBeGreaterThanOrEqual(44);
+    }
+  });
+
+  it("selected page is fill, not a ring, and unselected siblings have no outline", () => {
+    const { container } = renderWithProviders(<Pagination variant="numbered" total={5} page={3} />);
+    const current = container.querySelector('[aria-current="page"]') as HTMLElement;
+    const other = byLabel(container, "Page 2") as HTMLElement;
+    expect(current.closest(".t_accent")).toBeTruthy();
+    expect(other.closest(".t_accent")).toBeNull();
+    const currentStyle = getComputedStyle(current);
+    const otherStyle = getComputedStyle(other);
+    expect(parseFloat(currentStyle.outlineWidth) || 0).toBe(0);
+    expect(parseFloat(otherStyle.outlineWidth) || 0).toBe(0);
+  });
+});

package/src/Pagination.tsx

@@ -1,4 +1,10 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  FOCUS_VISIBLE_RING,
+  ensureKeyboardModalityTracking,
+  pressTargetStyle,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -10,9 +16,9 @@ import {
 } from "@phosphor-icons/react";
 import type React from "react";
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "./shared/i18n";
 import { Button } from "@multiplatform.one/forms";
-import { Text, XStack, type XStackProps } from "tamagui";
+import { Text, XStack, isWeb, type XStackProps } from "tamagui";
 import { DotIndicator } from "./DotIndicator";
 import { componentColors } from "./componentColors";
 import { useDirection } from "./hooks/useDirection";
@@ -78,6 +84,11 @@ const stripSteps = {
   large: { mark: "$1.5", active: "$3" },
 } as const;
 
+/** LC-54 / LC-71: every page control paints at least 44×44. */
+const pageControlFloor = pressTargetStyle();
+
+const restRing = { outlineWidth: 0 } as const;
+
 export interface PaginationProps extends Omit<XStackProps, "children" | "onChange"> {
   /** Total number of pages/steps */
   total: number;
@@ -147,6 +158,10 @@ export function Pagination({
   const { knobProps } = useResolvedKnobs();
   // LC-25: discrete page jumps tween indicator geometry/color; no continuous drag here.
   const motionTransition = (knobProps.transition as string | undefined) || "quick";
+  if (isWeb) ensureKeyboardModalityTracking();
+  // LC-71: ring rides the focused page control only, keyboard-origin, never
+  // mouse. Selected is fill (below), not this outline channel.
+  const [kbFocus, setKbFocus] = useState<string | null>(null);
 
   // Directional glyphs encode direction-of-travel (Axiom 15), so they must
   // point toward their targets in RTL too. Mechanism: swap the paired glyph
@@ -197,6 +212,27 @@ export function Pagination({
       }
     }) as unknown as () => void;
 
+  const pageControlProps = (id: string) => ({
+    ...pageControlFloor,
+    elevation: 0,
+    borderWidth: 0,
+    borderColor: "transparent",
+    shadowColor: "transparent",
+    focusStyle: restRing,
+    focusVisibleStyle: restRing,
+    ...(isWeb
+      ? {
+          onFocus: () => {
+            if (wasKeyboardFocus()) setKbFocus(id);
+          },
+          onBlur: () => {
+            setKbFocus((prev) => (prev === id ? null : prev));
+          },
+        }
+      : undefined),
+    ...(kbFocus === id ? FOCUS_VISIBLE_RING : restRing),
+  });
+
   const isNumbered = variant === "numbered";
 
   // The two idioms differ in which glyphs the controls take, whether the
@@ -246,19 +282,20 @@ export function Pagination({
       {isNumbered && showFirstLast && (
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
+          chromeless
           icon={FirstIcon}
           onPress={() => goTo(0)}
           disabled={!canPrev}
           aria-label={t("Go to first page")}
           onKeyDown={activateOnEnterSpace(() => goTo(0), canPrev)}
+          {...pageControlProps("first")}
         />
       )}
 
       <Button
         size={knobProps.sizeToken}
         circular={!isNumbered}
-        variant="outlined"
+        chromeless
         icon={isNumbered ? PrevIcon : PrevArrowIcon}
         onPress={handlePrev}
         disabled={!canPrev}
@@ -266,6 +303,7 @@ export function Pagination({
         // legacy opacity 0.3 dim stacked on top of it (double-dim).
         aria-label={isNumbered ? t("Go to previous page") : t("Previous page")}
         onKeyDown={activateOnEnterSpace(handlePrev, canPrev)}
+        {...pageControlProps("prev")}
       />
 
       {isNumbered ? (
@@ -279,6 +317,7 @@ export function Pagination({
                   userSelect="none"
                   textAlign="center"
                   minWidth="$2"
+                  minHeight={pageControlFloor.minHeight}
                   {...knobProps.body}
                   color={componentColors.text.muted}
                 >
@@ -291,7 +330,6 @@ export function Pagination({
               <Button
                 key={item}
                 size={knobProps.sizeToken}
-                minWidth={knobProps.sizeToken}
                 paddingHorizontal="$2"
                 accent={isCurrent}
                 chromeless={!isCurrent}
@@ -300,6 +338,7 @@ export function Pagination({
                 aria-label={withInterp(t("Page {{number}}"), { number: item })}
                 aria-current={isCurrent ? "page" : undefined}
                 onKeyDown={activateOnEnterSpace(() => goTo(item - 1), !disabled)}
+                {...pageControlProps(`page-${item}`)}
               >
                 {String(item)}
               </Button>
@@ -332,24 +371,26 @@ export function Pagination({
       <Button
         size={knobProps.sizeToken}
         circular={!isNumbered}
-        variant={submits ? undefined : "outlined"}
+        chromeless={!submits}
         theme={submits ? "active" : undefined}
         icon={isNumbered ? NextIcon : submits ? CheckIcon : NextArrowIcon}
         onPress={handleNext}
         disabled={!canNext}
         aria-label={isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page")}
         onKeyDown={activateOnEnterSpace(handleNext, canNext)}
+        {...pageControlProps(submits ? "submit" : "next")}
       />
 
       {isNumbered && showFirstLast && (
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
+          chromeless
           icon={LastIcon}
           onPress={() => goTo(total - 1)}
           disabled={!canNext}
           aria-label={t("Go to last page")}
           onKeyDown={activateOnEnterSpace(() => goTo(total - 1), canNext)}
+          {...pageControlProps("last")}
         />
       )}
 

package/src/PopoverContent.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { OVERLAY_ANCHOR_GAP, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Paragraph, Popover, SizableText, YStack } from "tamagui";
 import { PopoverContent } from "./surfaces";
 
@@ -19,7 +19,9 @@ function PopoverHarness({
   const [open, setOpen] = useState(startOpen);
   return (
     <YStack minHeight={320} alignItems="center" justifyContent="center">
-      <Popover open={open} onOpenChange={setOpen} placement={placement}>
+      {/* OVERLAY_ANCHOR_GAP rule: popovers keep the shared anchored-overlay
+          gap between trigger edge and content (offset lives on the root). */}
+      <Popover open={open} onOpenChange={setOpen} placement={placement} offset={OVERLAY_ANCHOR_GAP}>
         <Popover.Trigger asChild>
           <Button>Toggle popover</Button>
         </Popover.Trigger>