@multiplatform.one/forms 7.7.6 → 7.8.0

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -40,12 +40,16 @@ function Harness({
   sheet,
   onOpenChange,
   extra,
+  openOn,
+  sizing,
 }: {
   trigger: ReactNode;
   disabled?: boolean;
   sheet?: boolean;
   onOpenChange?: (open: boolean) => void;
   extra?: ReactNode;
+  openOn?: "press" | "contextmenu";
+  sizing?: "grow" | "fill";
 }) {
   const [open, setOpen] = useState(false);
   return (
@@ -64,6 +68,8 @@ function Harness({
         trigger={trigger}
         disabled={disabled}
         sheet={sheet}
+        openOn={openOn}
+        sizing={sizing}
       >
         <Text>panel body</Text>
         {extra}
@@ -79,6 +85,75 @@ const isOpen = (result: { container: HTMLElement }) =>
 
 const floatingViewport = () => document.querySelector('[data-testid="floating-panel-viewport"]');
 
+describe("FloatingPanel nested actions", () => {
+  it("does not require a marked DOM button to stop propagation", () => {
+    const action = vi.fn();
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <Harness
+        onOpenChange={onOpenChange}
+        trigger={
+          <button type="button" data-floating-panel-action="true" onClick={action}>
+            Clear selection
+          </button>
+        }
+      />,
+    );
+    fireEvent.click(result.getByRole("button", { name: "Clear selection" }), { detail: 0 });
+    expect(action).toHaveBeenCalledOnce();
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  for (const sheet of [true, false]) {
+    for (const activation of ["pointer", "keyboard"] as const) {
+      it(`lets a marked ${activation} action run without opening ${sheet ? "sheet" : "float"}`, () => {
+        const action = vi.fn();
+        const onOpenChange = vi.fn();
+        const result = renderWithProviders(
+          <Harness
+            sheet={sheet}
+            onOpenChange={onOpenChange}
+            trigger={
+              <Button
+                data-floating-panel-action="true"
+                onPress={(event) => {
+                  event.stopPropagation();
+                  action();
+                }}
+              >
+                Clear selection
+              </Button>
+            }
+          />,
+        );
+        const button = result.getByRole("button", { name: "Clear selection" });
+        if (activation === "pointer") pointerPress(button);
+        else {
+          fireEvent.keyDown(button, { key: "Enter" });
+          fireEvent.keyUp(button, { key: "Enter" });
+        }
+        expect(action).toHaveBeenCalledOnce();
+        expect(onOpenChange).not.toHaveBeenCalled();
+        expect(isOpen(result)).toBe(false);
+      });
+    }
+
+    it(`preserves context-menu opening from a marked action in ${sheet ? "sheet" : "float"}`, () => {
+      const onOpenChange = vi.fn();
+      const result = renderWithProviders(
+        <Harness
+          sheet={sheet}
+          openOn="contextmenu"
+          onOpenChange={onOpenChange}
+          trigger={<Button data-floating-panel-action="true">Context action</Button>}
+        />,
+      );
+      fireEvent.contextMenu(result.getByRole("button", { name: "Context action" }));
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  }
+});
+
 /** The DEEPEST node carrying the whole label — several ancestors report the
  *  same `textContent`, and pressing one of those would sidestep the very
  *  swallow these cases exist to catch. */
@@ -260,4 +335,38 @@ describe("FloatingPanel trigger — floating mode", () => {
       expect(document.activeElement).toBe(trigger);
     });
   });
+
+  it("disconnects fill content observation on close and unmount", async () => {
+    const observers: { target: Element; disconnected: boolean }[] = [];
+    class TrackingResizeObserver {
+      private tracked?: { target: Element; disconnected: boolean };
+      observe(target: Element) {
+        if (target.parentElement?.getAttribute("data-testid") !== "floating-panel-viewport") return;
+        this.tracked = { target, disconnected: false };
+        observers.push(this.tracked);
+      }
+      unobserve() {}
+      disconnect() {
+        if (this.tracked) this.tracked.disconnected = true;
+      }
+    }
+    vi.stubGlobal("ResizeObserver", TrackingResizeObserver);
+    const result = renderWithProviders(
+      <Harness sizing="fill" trigger={<Button>Open Panel</Button>} />,
+    );
+    try {
+      const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      fireEvent.keyDown(document, { key: "Escape" });
+      await waitFor(() => expect(observers.every((observer) => observer.disconnected)).toBe(true));
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      result.unmount();
+      expect(observers.every((observer) => observer.disconnected)).toBe(true);
+    } finally {
+      result.unmount();
+      vi.unstubAllGlobals();
+    }
+  });
 });

package/src/FloatingPanel/index.native.tsx

@@ -76,6 +76,7 @@ export {
 } from "./useFloatingPanel";
 export type { UseFloatingPanelOptions, UseFloatingPanelReturn } from "./useFloatingPanel";
 export type { FloatingPanelProps } from "./index";
+export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
 /** Native never has a >sm web viewport; AdaptivePopup uses this to pick Sheet mode. */
 export function useViewportGtSm() {
@@ -103,8 +104,10 @@ const enterDuration = 280;
 export function FloatingPanel({
   open,
   onOpenChange,
+  onNativeShow,
   trigger,
   triggerEnd,
+  triggerSizing = "stretch",
   children,
   scrollable,
   disabled,
@@ -355,7 +358,13 @@ export function FloatingPanel({
 
   return (
     <>
-      <RNView style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+      <RNView
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          width: triggerSizing === "content" ? undefined : "100%",
+        }}
+      >
         <Pressable
           {...(isContextMenu
             ? { onLongPress: handleTriggerLongPress, delayLongPress: 500 }
@@ -368,18 +377,22 @@ export function FloatingPanel({
             ? { accessibilityValue: { text: triggerA11y.value } }
             : undefined)}
           {...(triggerA11y?.hint ? { accessibilityHint: triggerA11y.hint } : undefined)}
-          // Stretch to the cell/row width — content-sized triggers (~70pt) make
-          // most of the edit box look tappable but miss the Pressable.
+          // Whole-field triggers stretch; composite adornments hug their
+          // content so sibling inputs retain their editable space.
           style={{
-            flex: 1,
+            flex: triggerSizing === "content" ? undefined : 1,
             minWidth: 0,
             alignSelf: "stretch",
-            width: "100%",
+            width: triggerSizing === "content" ? undefined : "100%",
             opacity: disabled ? 0.5 : 1,
           }}
         >
           {/* Own the hit target — see file header for why pointerEvents="none". */}
-          <RNView pointerEvents="none" collapsable={false} style={{ width: "100%" }}>
+          <RNView
+            pointerEvents="none"
+            collapsable={false}
+            style={{ width: triggerSizing === "content" ? undefined : "100%" }}
+          >
             {trigger}
           </RNView>
         </Pressable>
@@ -391,7 +404,11 @@ export function FloatingPanel({
         animationType="fade"
         statusBarTranslucent
         onRequestClose={close}
-        onShow={enter}
+        onShow={() => {
+          if (!activeRef.current) return;
+          enter();
+          onNativeShow?.();
+        }}
       >
         {/*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the

package/src/FloatingPanel/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, UIEvent } from "react";
+import type { ReactNode, RefObject, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   OVERLAY_ATTACH_GAP,
@@ -15,6 +15,9 @@ import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
+import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
+
+export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
 // Re-export hook for Select / Combobox / external consumers
 export {
@@ -37,6 +40,10 @@ export type {
 export interface FloatingPanelProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Native only: the modal is presented and its inputs can receive focus. */
+  onNativeShow?: () => void;
+  /** Suppress delayed trigger focus when a consumer handles close focus itself. Web only. */
+  skipReturnFocusRef?: RefObject<boolean>;
   trigger: ReactNode;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
@@ -120,6 +127,11 @@ export interface FloatingPanelProps {
    * the strings must live on the Pressable itself. Web ignores this.
    */
   triggerA11y?: { label?: string; value?: string; hint?: string };
+  /**
+   * Stretch keeps the whole field pressable by default. Content lets an
+   * adornment trigger hug its content inside a composite field.
+   */
+  triggerSizing?: "stretch" | "content";
   /**
    * How the trigger opens the panel. `"press"` (default) is click/tap.
    * `"contextmenu"` is the ContextMenu gesture: web `contextmenu` (right-click
@@ -231,8 +243,10 @@ export function FloatingPanel(props: FloatingPanelProps) {
 function FloatingPanelSheet({
   open,
   onOpenChange,
+  skipReturnFocusRef,
   trigger,
   triggerEnd,
+  triggerSizing = "stretch",
   children,
   scrollable,
   disabled,
@@ -260,7 +274,7 @@ function FloatingPanelSheet({
   // DG-A11Y-04 / Axiom 7: Sheet has no focus scope — move focus into the
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
-  useSheetModalFocus(open, sheetFrameRef);
+  useSheetModalFocus(open, sheetFrameRef, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open, sheetFrameRef);
 
   const framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
@@ -283,7 +297,10 @@ function FloatingPanelSheet({
   // shut the sheet it had just opened. Nothing is lost: the sheet is modal, so
   // its overlay covers the trigger and the toggle could only ever have run
   // with `open === false`.
-  const openFromTrigger = () => handleOpenChange(true);
+  const openFromTrigger = (event?: PanelActionEvent) => {
+    if (event && isNestedPanelAction(event)) return;
+    handleOpenChange(true);
+  };
   const isContextMenu = openOn === "contextmenu";
   const triggerActivation = isWeb
     ? isContextMenu
@@ -298,9 +315,13 @@ function FloatingPanelSheet({
 
   return (
     <>
-      <View flexDirection="row" alignItems="center" width="100%">
+      <View
+        flexDirection="row"
+        alignItems="center"
+        width={triggerSizing === "content" ? "auto" : "100%"}
+      >
         <View
-          flex={1}
+          flex={triggerSizing === "content" ? undefined : 1}
           minWidth={0}
           {...(isContextMenu ? undefined : { onPress: openFromTrigger })}
           cursor={disabled ? "not-allowed" : "pointer"}
@@ -361,6 +382,7 @@ function FloatingPanelSheet({
 function FloatingPanelWeb({
   open,
   onOpenChange,
+  skipReturnFocusRef,
   trigger,
   children,
   disabled,
@@ -379,6 +401,7 @@ function FloatingPanelWeb({
   const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
   const keyboardOpenRef = useRef(false);
+  const contentRef = useRef<HTMLElement | null>(null);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
@@ -405,7 +428,7 @@ function FloatingPanelWeb({
   // Escape (or outside click on empty space) closes the panel while focus is
   // inside it, focus falls to <body>. Return it to the pre-open element
   // (the trigger's focusable). Deliberate focus moves elsewhere are kept.
-  useReturnFocusOnClose(open);
+  useReturnFocusOnClose(open, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
   useEffect(() => {
     if (!open) keyboardOpenRef.current = false;
@@ -573,6 +596,29 @@ function FloatingPanelWeb({
     repositionOverlay();
   }, [open, panel.mounted, repositionOverlay, panel.y]);
 
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    if (!open || !panel.mounted || !isFill || !content || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    // Matching the trigger width can rewrap content after the panel's first
+    // height measurement. Observe the content, not the clamped viewport, so a
+    // later open or result change uses its actual height without a resize loop.
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      if (frame) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        repositionOverlay();
+      });
+    });
+    observer.observe(content);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [open, panel.mounted, isFill, repositionOverlay]);
+
   const handleScroll = useCallback(
     (event: UIEvent) => {
       const el = event.target as HTMLElement;
@@ -633,8 +679,8 @@ function FloatingPanelWeb({
   // (`p-results/trigger-slot/detail.json`): a pointer click carries the click
   // count, `element.click()` and native keyboard activation carry 0.
   const openFromSynthesizedClick = useCallback(
-    (event: { detail: number }) => {
-      if (disabled || isContextMenu || event.detail !== 0) return;
+    (event: { detail: number } & PanelActionEvent) => {
+      if (disabled || isContextMenu || event.detail !== 0 || isNestedPanelAction(event)) return;
       // detail 0 is keyboard/programmatic activation (LC-50). Count it as
       // keyboard-origin so the first inner control rings (LC-71).
       keyboardOpenRef.current = true;
@@ -652,14 +698,26 @@ function FloatingPanelWeb({
     [disabled, onOpenChange],
   );
 
+  const referenceProps = getReferenceProps({
+    ref: panel.setReferenceRef,
+    onClickCapture: openFromSynthesizedClick,
+    ...(isContextMenu ? { onContextMenu: openFromContextMenu } : {}),
+  });
+  // Guard the composed floating-ui openers, after hook handlers are merged.
+  // Declining leaves each action's own events and focus defaults intact.
+  for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"] as const) {
+    const handler = referenceProps[name];
+    if (typeof handler === "function") {
+      referenceProps[name] = (event: PanelActionEvent) => {
+        if (!isNestedPanelAction(event)) handler(event);
+      };
+    }
+  }
+
   return (
     <>
       <View
-        {...getReferenceProps({
-          ref: panel.setReferenceRef,
-          onClickCapture: openFromSynthesizedClick,
-          ...(isContextMenu ? { onContextMenu: openFromContextMenu } : {}),
-        })}
+        {...referenceProps}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
         // The cover contract is stated as a relation between the panel's top
@@ -693,6 +751,14 @@ function FloatingPanelWeb({
               transformOrigin: panelTransformOrigin(panel.placement),
             },
             onScroll: handleScroll,
+            onTransitionEnd: (event) => {
+              if (
+                event.target === event.currentTarget &&
+                (event.propertyName === "height" || event.propertyName === "max-height")
+              ) {
+                panel.updateArrows(event.currentTarget);
+              }
+            },
           })}
           data-testid="floating-panel-viewport"
           data-fp-panel=""
@@ -714,6 +780,7 @@ function FloatingPanelWeb({
             arrowScrollDirRef={panel.arrowScrollDirRef}
           />
           <View
+            ref={contentRef as any}
             {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
             {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
           >

package/src/FloatingPanel/nestedAction.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { isNestedPanelAction } from "./nestedAction";
+
+describe("independent actions inside panel triggers", () => {
+  it("recognizes an SVG descendant of a marked action", () => {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = '<button data-floating-panel-action="true"><svg><path /></svg></button>';
+    expect(
+      isNestedPanelAction({
+        nativeEvent: { target: wrapper.querySelector("path") },
+        currentTarget: wrapper,
+      }),
+    ).toBe(true);
+  });
+
+  it("does not let a marker above the wrapper suppress an ordinary opener", () => {
+    const outer = document.createElement("div");
+    outer.setAttribute("data-floating-panel-action", "true");
+    outer.innerHTML = "<div><button>Open</button></div>";
+    expect(
+      isNestedPanelAction({
+        target: outer.querySelector("button"),
+        currentTarget: outer.firstElementChild,
+      }),
+    ).toBe(false);
+  });
+
+  it("keeps unmarked buttons and non-DOM events as ordinary trigger presses", () => {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = "<button>Open</button>";
+    expect(isNestedPanelAction({ target: wrapper.firstElementChild, currentTarget: wrapper })).toBe(
+      false,
+    );
+    expect(isNestedPanelAction({})).toBe(false);
+  });
+});

package/src/FloatingPanel/nestedAction.ts

@@ -0,0 +1,15 @@
+export const floatingPanelActionProps = { "data-floating-panel-action": "true" } as const;
+
+export interface PanelActionEvent {
+  target?: unknown;
+  currentTarget?: unknown;
+  nativeEvent?: { target?: unknown };
+}
+
+/** Marked actions inside a trigger keep their own press and keyboard behavior. */
+export function isNestedPanelAction(event: PanelActionEvent): boolean {
+  const target = (event.nativeEvent?.target ?? event.target) as Element | null;
+  const wrapper = event.currentTarget as Element | null;
+  const action = target?.closest?.('[data-floating-panel-action="true"]');
+  return !!action && !!wrapper?.contains?.(action);
+}

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -1,6 +1,5 @@
 /**
- * MPO-38 AC: no FloatingPanel consumer renders a panel narrower than its
- * trigger.
+ * Text listboxes match the field width; intrinsic editors size to their content.
  *
  * The runtime half is covered in `useFloatingPanel.spec.tsx`. This is the
  * source half, and it exists because the defect it guards is invisible at
@@ -8,11 +7,9 @@
  * DatePicker measured 262px of calendar under a 289px trigger purely because
  * the call site said `fitContent`.
  *
- * A FIELD-shaped trigger (a control the user reads a value out of) takes
- * `at-least-trigger`. A BUTTON-shaped trigger — an icon, a toolbar chip —
- * legitimately keeps `fit-content`, because matching a 32px button would be
- * absurd; those are listed explicitly so the exemption is a decision rather
- * than an oversight.
+ * Calendar grids take fit-content (MPO-262): a full-width field wrapper is
+ * unrelated to seven day columns and must not create a mostly empty popup.
+ * Text listboxes retain at-least-trigger; icon/button launchers may also hug.
  */
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
@@ -22,13 +19,9 @@ import { describe, expect, it } from "vitest";
 const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields");
 
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
-const fieldShapedPickers = [
-  "DatePicker/parts.tsx",
-  "DatePicker/DatetimePicker.catalog.tsx",
-  "TimePicker/catalog.tsx",
-  "ColorPicker/parts.tsx",
-  "Icon/index.tsx",
-];
+const fieldShapedPickers = ["TimePicker/catalog.tsx", "ColorPicker/parts.tsx", "Icon/index.tsx"];
+
+const intrinsicGridPickers = ["DatePicker/parts.tsx", "DatePicker/DatetimePicker.catalog.tsx"];
 
 /** Panels opened from an icon/button trigger, where fit-content is correct. */
 const buttonShapedPickers = ["Geolocation/index.tsx"];
@@ -37,7 +30,11 @@ function read(relative: string): string {
   return readFileSync(resolve(fieldsDir, relative), "utf8");
 }
 
-describe("FloatingPanel width contract (MPO-38)", () => {
+describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
+  it.each(intrinsicGridPickers)("%s hugs its calendar grid", (relative) => {
+    expect(read(relative)).toContain('widthMode="fit-content"');
+  });
+
   it.each(fieldShapedPickers)("%s declares at-least-trigger", (relative) => {
     const source = read(relative);
     expect(source).toContain('widthMode="at-least-trigger"');

package/src/FormsIntegration.stories.tsx

@@ -212,9 +212,7 @@ export const multiStepRegistration: Story = {
         />
 
         <FormActions>
-          <Button variant="outlined" onPress={() => setStep("personal")}>
-            Back
-          </Button>
+          <Button onPress={() => setStep("personal")}>Back</Button>
           <Button onPress={() => setStep("verification")}>Next: Verification</Button>
         </FormActions>
       </FormSection>
@@ -240,9 +238,7 @@ export const multiStepRegistration: Story = {
         />
 
         <FormActions>
-          <Button variant="outlined" onPress={() => setStep("contact")}>
-            Back
-          </Button>
+          <Button onPress={() => setStep("contact")}>Back</Button>
           <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
             {([canSubmit, isSubmitting]) => (
               <Button action="submit" disabled={!canSubmit || isSubmitting}>

package/src/InputParts/index.tsx

@@ -1,6 +1,6 @@
 import { getFontSized } from "@tamagui/get-font-sized";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
-import { useEffect, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
 import { Pressable as RNPressable } from "react-native";
 import type {
@@ -1035,6 +1035,16 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     size: knobProps.controlIcon.width,
     color: paint as never,
   });
+  const decorativeRef = useCallback(
+    (node: TamaguiElement | null) => {
+      // Tamagui 2.7.6 Button stamps tabIndex=0 after consumer props.
+      // Correct the host at hydration; decorative caps share the field stop.
+      if (isWeb && node && "tabIndex" in node) node.tabIndex = tabIndexProp ?? -1;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref, tabIndexProp],
+  );
 
   if (glyphRing) {
     // A real tab stop must square off the token it was HANDED, not the
@@ -1077,7 +1087,7 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   const square = knobProps.control.height;
   return (
     <InputButton
-      ref={ref}
+      ref={decorativeRef}
       size={size}
       height={square}
       width={square}
@@ -1166,9 +1176,8 @@ export const InputContainerFrame = styled(View, {
 
   variants: {
     size: {
-      "...size": (val, { tokens }) => ({
-        gap: (tokens.space[val] as any)?.val * 0.3,
-      }),
+      // Size is shared with the child parts; layout spacing belongs to space.
+      "...size": () => ({}),
     },
     color: {
       "...color": () => ({}),
@@ -1194,6 +1203,7 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
       ref={forwardedRef}
       size={knobProps.sizeToken}
       {...knobProps.body}
+      {...knobProps.gap}
       // LC-06/LC-10 (UX-P12): inside a table cell the field root must adopt
       // the cell width — the raw web <input> carries an intrinsic width that
       // otherwise floors the whole column at ~200px and lays out past the

package/src/InputParts/layoutGap.spec.tsx

@@ -0,0 +1,43 @@
+import { createRef } from "react";
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, it } from "vitest";
+import { Input } from "./index";
+
+afterEach(cleanup);
+
+function measure(size: "small" | "medium", space: "small" | "large", gap?: number) {
+  const ref = createRef<HTMLElement>();
+  const { getByTestId } = renderWithProviders(
+    <Preset overrides={{ size, space }}>
+      <Input testID="root" ref={ref as never} {...(gap === undefined ? {} : { gap })}>
+        <Input.Label>Location</Input.Label>
+        <Input.Box>
+          <Input.Area placeholder="Location" />
+        </Input.Box>
+      </Input>
+    </Preset>,
+  );
+  const root = getByTestId("root");
+  expect(ref.current).toBe(root);
+  // Happy DOM leaves token-backed CSS gaps unresolved; browser coverage reads
+  // the actual pixels. Keep this test checking the rendered gap owner.
+  const value =
+    getComputedStyle(root).gap || [...root.classList].find((name) => name.startsWith("_gap-"));
+  expect(value).toBeTruthy();
+  cleanup();
+  return value;
+}
+
+it("lets space change the multi-slot layout gap at a fixed control size", () => {
+  expect(measure("medium", "small")).not.toBe(measure("medium", "large"));
+});
+
+it("keeps the layout gap stable when only control size changes", () => {
+  expect(measure("small", "small")).toBe(measure("medium", "small"));
+});
+
+it("preserves the consumer gap eject and forwarded root ref", () => {
+  expect(measure("medium", "large", 11)).toBe("11px");
+});

package/src/Wheel/Wheel.spec.tsx

@@ -7,6 +7,22 @@ import { Wheel } from "./index";
 afterEach(cleanup);
 
 describe("Wheel contrast contract", () => {
+  it("uses the selected-text weight and keeps rounding on the selection band", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Wheel items={[1, 2, 3, 4, 5]} value={3} visibleItems={5} />
+      </Preset>,
+    );
+    const wheel = screen.getByTestId("wheel");
+    const selected = wheel.querySelector('[data-selected="true"]')?.firstElementChild;
+    expect(selected).toBeTruthy();
+    expect(["700", "bold"]).toContain(getComputedStyle(selected as Element).fontWeight);
+    expect(["", "0px"]).toContain(getComputedStyle(wheel).borderTopLeftRadius);
+    expect(getComputedStyle(screen.getByTestId("wheel-selection")).borderStartStartRadius).not.toBe(
+      "0px",
+    );
+  });
+
   it("keeps inactive item text on the AA $color11 ramp (not opacity-dimmed)", () => {
     renderWithProviders(
       <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,