@multiplatform.one/forms 7.47.4 → 7.49.0

package/src/Button/Button.loading.spec.tsx

@@ -5,9 +5,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Button } from "./index";
 
 /**
- * WP-c2: a loading Button renders the ONE Skeleton (forms, re-exported by
- * components) at the button's recipe height, and the bone stops pulsing for a
- * user who asked for reduced motion.
+ * FZ-7812: a loading Button keeps its label and its rest chrome; a spinner
+ * takes the leading icon slot. WP-c2's skeleton bone stays the `skeleton`
+ * placeholder (a button that has not loaded), and stops pulsing for a user
+ * who asked for reduced motion.
  */
 
 let reduced = false;
@@ -32,30 +33,76 @@ afterEach(() => {
 });
 
 function bone(container: HTMLElement): HTMLElement {
-  const el = container.querySelector("[data-button-loading] [data-skeleton]");
-  if (!el) throw new Error("no skeleton bone in the loading button");
+  const el = container.querySelector("[data-skeleton]");
+  if (!el) throw new Error("no skeleton bone in the skeleton button");
   return el as HTMLElement;
 }
 
-describe("Button loading (WP-c2 one Skeleton)", () => {
-  it("renders the shared rounded Skeleton at the recipe height in the label slot", () => {
+describe("Button loading (FZ-7812 label stays)", () => {
+  it("keeps the label and puts a spinner in the leading slot", () => {
     const { container, getByRole } = renderWithProviders(
       <Button loading size="$3">
         Save
       </Button>,
     );
+    const button = getByRole("button");
+    expect(button.getAttribute("aria-busy")).toBe("true");
+    expect(button.textContent).toContain("Save");
+    const slot = container.querySelector("[data-button-loading]");
+    expect(slot).toBeTruthy();
+    expect(slot?.getAttribute("aria-hidden")).toBe("true");
+    expect(slot?.nextElementSibling?.textContent).toBe("Save");
+    expect(container.querySelector("[data-skeleton]")).toBeNull();
+  });
+
+  it("takes an icon's slot instead of adding a second glyph", () => {
+    const Icon = () => <svg data-testid="icon" />;
+    const { container, queryByTestId } = renderWithProviders(
+      <Button loading icon={Icon}>
+        Save
+      </Button>,
+    );
+    expect(queryByTestId("icon")).toBeNull();
+    expect(container.querySelectorAll("[data-button-loading]")).toHaveLength(1);
+  });
+
+  it("keeps the rest chrome: loading is not the disabled wash", () => {
+    const rest = renderWithProviders(<Button chromeless>Log in</Button>);
+    const restStyle = getComputedStyle(rest.getByRole("button"));
+    const restBg = restStyle.backgroundColor;
+    const restInk = getComputedStyle(rest.getByText("Log in")).color;
+    rest.unmount();
+    const busy = renderWithProviders(
+      <Button chromeless loading>
+        Log in
+      </Button>,
+    );
+    expect(getComputedStyle(busy.getByRole("button")).backgroundColor).toBe(restBg);
+    expect(getComputedStyle(busy.getByText("Log in")).color).toBe(restInk);
+  });
+
+  it("swallows presses while busy", () => {
+    const onPress = vi.fn();
+    const { getByRole } = renderWithProviders(
+      <Button loading onPress={onPress}>
+        Save
+      </Button>,
+    );
+    getByRole("button").click();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});
+
+describe("Button skeleton (WP-c2 one Skeleton)", () => {
+  it("renders the shared rounded Skeleton at the recipe height", () => {
+    const { container } = renderWithProviders(<Button skeleton size="$3" />);
     const el = bone(container);
     expect(el.getAttribute("data-skeleton-variant")).toBe("rounded");
     expect(el.getAttribute("data-height")).toBe(String(sizeRecipeForToken("$3").height));
-    expect(el.getAttribute("aria-hidden")).toBe("true");
-    const button = getByRole("button");
-    expect(button.getAttribute("aria-busy")).toBe("true");
-    // The label is swapped out for the bone (busy, not narrated).
-    expect(button.textContent).not.toContain("Save");
   });
 
   it("pulses with the animation knob on", () => {
-    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const { container } = renderWithProviders(<Button skeleton />);
     const el = bone(container);
     expect(el.getAttribute("data-animate")).toBe("true");
     expect(el.className).toMatch(/mp-skeleton-pulse/);
@@ -64,7 +111,7 @@ describe("Button loading (WP-c2 one Skeleton)", () => {
 
   it("respects prefers-reduced-motion: the bone goes static", () => {
     reduced = true;
-    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const { container } = renderWithProviders(<Button skeleton />);
     const el = bone(container);
     expect(el.getAttribute("data-animate")).toBe("false");
     expect(el.className).toMatch(/mp-skeleton-static/);
@@ -74,8 +121,8 @@ describe("Button loading (WP-c2 one Skeleton)", () => {
   it("mounts one keyframe sheet that also stops motion under reduced motion", () => {
     renderWithProviders(
       <>
-        <Button loading>One</Button>
-        <Button loading>Two</Button>
+        <Button skeleton />
+        <Button skeleton />
       </>,
     );
     const sheets = document.querySelectorAll("#__mp-skeleton-pulse");

package/src/Button/index.tsx

@@ -52,6 +52,7 @@ import {
   useTheme,
 } from "tamagui";
 import { Skeleton } from "../Skeleton";
+import { Spinner } from "../Spinner";
 import type { ThemeName } from "@tamagui/web";
 import type { GestureResponderEvent } from "react-native";
 import type { AnyFormApi } from "../types";
@@ -501,7 +502,10 @@ export function Button({
     );
   }
 
-  const isDisabled = disabled || loading || (action === "submit" && resolvedForm && !isValid);
+  // Busy is not unavailable: a loading button swallows presses but keeps its
+  // rest chrome and label. Washed, it read as stuck pressed (FZ-7812).
+  const unavailable = Boolean(disabled || (action === "submit" && resolvedForm && !isValid));
+  const isDisabled = unavailable || Boolean(loading);
 
   const handlePress = (e: GestureResponderEvent) => {
     // Explained disable keeps the frame press-able (aria-disabled, focusable)
@@ -542,7 +546,7 @@ export function Button({
   // where `$color11` misses 4.5:1 (light warning 4.48, success 4.27) and the
   // hue's `$color12` text step clears it.
   const washOnHost = Boolean(
-    isDisabled && activeThemeName && solidPaletteThemes.has(activeThemeName),
+    unavailable && activeThemeName && solidPaletteThemes.has(activeThemeName),
   );
   const disabledSurface = washOnHost
     ? hostScoped(disabledState.surfaceKnobProps)
@@ -607,7 +611,7 @@ export function Button({
   ];
   const isSelected =
     selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : undefined);
-  const selectedFill = Boolean(isSelected) && !isDisabled;
+  const selectedFill = Boolean(isSelected) && !unavailable;
   const iconSize = nested
     ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45)))
     : recipe.iconSize;
@@ -647,7 +651,7 @@ export function Button({
           : undefined)}
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground for the wash's AA ink (keepLabel keeps >=4.5:1).
-      {...(isDisabled ? disabledText : undefined)}
+      {...(unavailable ? disabledText : undefined)}
       // Boards measure ink.weight on the TEXT NODE, never the frame. The
       // prop is restated after the spreads because SizableText's size
       // variant otherwise leaks 500/600 over it (MPO-125: a literal 400
@@ -669,29 +673,21 @@ export function Button({
     : flattenedChildren?.some(isBareTextChild)
       ? wrapBareTextChildren(flattenedChildren, renderLabelText)
       : resolvedChildren;
-  // Loading shows state, not a narration: the shared Skeleton bone takes the
-  // label's slot at the recipe height (the label is swapped out; hosts such as
-  // Toolbar name the busy button through `aria-label`). The frame stays, so
-  // focus never leaves the button.
-  const textContent = loading ? (
-    <View data-button-loading="">
-      <Skeleton variant="rounded" height={boneHeight} width={boneHeight * 2} aria-hidden />
-    </View>
-  ) : (
-    labelContent
-  );
-
-  const hasIcon = icon || iconAfter;
+  const hasIcon = icon || iconAfter || loading;
   const nativeIconColor =
     props.color ??
-    (isDisabled ? disabledText.color : undefined) ??
+    (unavailable ? disabledText.color : undefined) ??
     (textColor
       ? outlinedOnHost
         ? hostScoped({ color: textColor }).color
         : textColor
       : outlinedInk) ??
     "$color";
-  const iconElement = icon ? (
+  const iconElement = loading ? (
+    <View flexShrink={0} data-button-loading="" aria-hidden>
+      <Spinner px={iconSize} color={nativeIconColor as string} aria-hidden />
+    </View>
+  ) : icon ? (
     <View flexShrink={0}>
       {isWeb ? (
         normalizeButtonIcon(icon, iconSize)
@@ -710,7 +706,7 @@ export function Button({
     </View>
   ) : null;
 
-  const explainedDisable = Boolean(disabledReason?.trim()) && Boolean(isDisabled);
+  const explainedDisable = Boolean(disabledReason?.trim()) && unavailable;
   const generatedId = useId();
   const reasonId = explainedDisable
     ? `${(props as { id?: string }).id ?? generatedId}-disabled-reason`
@@ -837,7 +833,7 @@ export function Button({
       // (`color` inherits into currentColor icons); dimWhole dims the
       // button as its own assembly. Replaces the old hardcoded 0.5
       // whole-dim that dropped label contrast under AA.
-      {...(isDisabled
+      {...(unavailable
         ? {
             ...disabledSurface,
             ...disabledText,
@@ -880,7 +876,7 @@ export function Button({
       onPress={handlePress}
       {...(isWeb ? { onKeyDown: handleKeyDown as unknown as () => void } : undefined)}
       {...(tabIndex != null ? { tabIndex } : undefined)}
-      gap={hasIcon && (resolvedChildren || textContent) ? innerGap : undefined}
+      gap={hasIcon && (resolvedChildren || labelContent) ? innerGap : undefined}
       // Form actions hug their label (Clay: no stretch): a Button inside a
       // Form never takes the column's full width. A consumer width wins.
       {...(formFromHook && !grouped ? { alignSelf: "flex-start" as const } : undefined)}
@@ -897,7 +893,7 @@ export function Button({
       {...passthroughSizeProps}
       {...sizeRecipeEscapeOverride}
       {...(nested ? nestedFloor : isCircular ? circularPressFloor : pageSlop)}
-      {...(selectedFill && !isDisabled
+      {...(selectedFill && !unavailable
         ? {
             backgroundColor: restFill,
             hoverStyle: {
@@ -955,7 +951,7 @@ export function Button({
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
       {iconElement}
-      {textContent}
+      {labelContent}
       {iconAfterElement}
     </ButtonFrame>
   );

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -10,6 +10,7 @@ import { Dialog, Paragraph, XStack } from "tamagui";
 import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose } from "../shared/focusManagement";
+import { withOverlayStack } from "../shared/overlayStack";
 import { t } from "../shared/t";
 
 export interface UnsavedChangesDialogProps {
@@ -19,6 +20,8 @@ export interface UnsavedChangesDialogProps {
   onDiscard: () => void;
 }
 
+const DialogPortal = withOverlayStack(Dialog.Portal, "dropdown", "DialogPortal");
+
 /**
  * Opens on Keep editing, the least destructive action, as tamagui's
  * AlertDialog.Cancel does. Without it Chromium and WebKit's `<dialog>.show()`
@@ -67,7 +70,7 @@ export function UnsavedChangesDialog({
 
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
-      <Dialog.Portal>
+      <DialogPortal>
         <DialogOverlay key="overlay" />
         <DialogContent
           key="content"
@@ -111,7 +114,7 @@ export function UnsavedChangesDialog({
             </Button>
           </XStack>
         </DialogContent>
-      </Dialog.Portal>
+      </DialogPortal>
     </Dialog>
   );
 }

package/src/FloatingPanel/index.native.tsx

@@ -83,6 +83,8 @@ import {
   motionDurationMs,
 } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
+import { useOverlayZIndex } from "../shared/overlayStack";
+import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
@@ -143,6 +145,7 @@ export function FloatingPanel({
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
+  const windowZIndex = useOverlayZIndex("sheet");
   const children = <Surface painted={false}>{panelChildren}</Surface>;
   const slideTransition = knobProps.motion.slide.transition;
   const enterDuration = motionDurationMs(slideTransition);
@@ -522,118 +525,120 @@ export function FloatingPanel({
           onNativeShow?.();
         }}
       >
-        {atPoint && pressPoint ? (
-          <PointPanel
-            key={`${pressPoint.x},${pressPoint.y}`}
-            point={pressPoint}
-            bounds={{
-              top: topInset + panelViewportPadding,
-              left: (safeArea?.left ?? 0) + panelViewportPadding,
-              right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
-              bottom:
-                windowHeight -
-                Math.max(safeArea?.bottom ?? 0, keyboardInset) -
-                panelViewportPadding,
-            }}
-            framePadding={framePadding}
-            frameGap={frameGap}
-            onBackdropPress={handleBackdropPress}
-            onEscape={close}
-          >
-            {header}
-            {children}
-          </PointPanel>
-        ) : (
-          /*
+        <OverlayWindow zIndex={windowZIndex}>
+          {atPoint && pressPoint ? (
+            <PointPanel
+              key={`${pressPoint.x},${pressPoint.y}`}
+              point={pressPoint}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onEscape={close}
+            >
+              {header}
+              {children}
+            </PointPanel>
+          ) : (
+            /*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the
           latter pads the container while the sheet keeps its own fixed height,
           so the sheet overflows off the TOP instead of shrinking (MPO-64).
         */
-          <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
-            <Pressable
-              style={StyleSheet.absoluteFill}
-              onPress={handleBackdropPress}
-              accessibilityRole="button"
-              accessibilityLabel={t("Close")}
-            >
-              <View flex={1} backgroundColor="$shadow6" />
-            </Pressable>
-            {/*
+            <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
+              <Pressable
+                style={StyleSheet.absoluteFill}
+                onPress={handleBackdropPress}
+                accessibilityRole="button"
+                accessibilityLabel={t("Close")}
+              >
+                <View flex={1} backgroundColor="$shadow6" />
+              </Pressable>
+              {/*
             Sheet sits above the absoluteFill backdrop in z-order (later sibling).
             Do NOT claim the responder on a wrapper here — that steals presses
             from option rows / calendar days and blocks commit.
           */}
-            <Animated.View
-              testID="floating-panel-sheet"
-              onLayout={(e) => {
-                // Travel distance for a dismiss, and the basis for the detents.
-                // A content-sized picker is shorter than maxHeight, and sliding
-                // it by maxHeight would overshoot into a visible lag.
-                if (restHeightRef.current !== null) return;
-                const h = Math.round(e.nativeEvent.layout.height);
-                if (h <= 0) return;
-                naturalRef.current = h;
-                filledRef.current = h >= maxHeightRef.current - 1;
-                if (h !== measuredHeight) setMeasuredHeight(h);
-              }}
-              style={{
-                // MPO-64: a flex child defaults to flexShrink 0, so without this
-                // the sheet cannot give way to the keyboard at all.
-                flexShrink: 1,
-                minHeight: 0,
-                maxHeight: frameCap,
-                transform: [{ translateY }],
-              }}
-            >
-              <YStack
-                {...knobProps.elevatedSurface}
-                borderBottomLeftRadius={0}
-                borderBottomRightRadius={0}
-                maxHeight={maxHeight}
-                flexShrink={1}
-                minHeight={0}
-                // sheetFill opens at full sheet height (flexShrink keeps the
-                // keyboard from pushing the top of the sheet off-screen).
-                {...(sheetFill ? { height: maxHeight } : undefined)}
-                paddingTop="$2"
-                paddingBottom={sheetBottomPadding}
-                // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
-                onAccessibilityEscape={close}
+              <Animated.View
+                testID="floating-panel-sheet"
+                onLayout={(e) => {
+                  // Travel distance for a dismiss, and the basis for the detents.
+                  // A content-sized picker is shorter than maxHeight, and sliding
+                  // it by maxHeight would overshoot into a visible lag.
+                  if (restHeightRef.current !== null) return;
+                  const h = Math.round(e.nativeEvent.layout.height);
+                  if (h <= 0) return;
+                  naturalRef.current = h;
+                  filledRef.current = h >= maxHeightRef.current - 1;
+                  if (h !== measuredHeight) setMeasuredHeight(h);
+                }}
+                style={{
+                  // MPO-64: a flex child defaults to flexShrink 0, so without this
+                  // the sheet cannot give way to the keyboard at all.
+                  flexShrink: 1,
+                  minHeight: 0,
+                  maxHeight: frameCap,
+                  transform: [{ translateY }],
+                }}
               >
-                {/*
+                <YStack
+                  {...knobProps.elevatedSurface}
+                  borderBottomLeftRadius={0}
+                  borderBottomRightRadius={0}
+                  maxHeight={maxHeight}
+                  flexShrink={1}
+                  minHeight={0}
+                  // sheetFill opens at full sheet height (flexShrink keeps the
+                  // keyboard from pushing the top of the sheet off-screen).
+                  {...(sheetFill ? { height: maxHeight } : undefined)}
+                  paddingTop="$2"
+                  paddingBottom={sheetBottomPadding}
+                  // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
+                  onAccessibilityEscape={close}
+                >
+                  {/*
                 The grab ZONE, not just the 4pt pill: a 4pt tall target is
                 unhittable. The gesture lives here rather than on the whole
                 sheet so it never fights the ScrollView inside it, which is the
                 same division iOS uses.
               */}
-                <RNView
-                  {...panResponder.panHandlers}
-                  accessibilityRole="adjustable"
-                  accessibilityLabel={t("Drag to resize")}
-                  style={{
-                    alignSelf: "stretch",
-                    alignItems: "center",
-                    paddingTop: 4,
-                    paddingBottom: 12,
-                  }}
-                >
-                  <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
-                </RNView>
-                <YStack
-                  padding={framePadding}
-                  gap={frameGap}
-                  flexShrink={1}
-                  {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
-                >
-                  <Surface size="$true">
-                    {header}
-                    {content}
-                  </Surface>
+                  <RNView
+                    {...panResponder.panHandlers}
+                    accessibilityRole="adjustable"
+                    accessibilityLabel={t("Drag to resize")}
+                    style={{
+                      alignSelf: "stretch",
+                      alignItems: "center",
+                      paddingTop: 4,
+                      paddingBottom: 12,
+                    }}
+                  >
+                    <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
+                  </RNView>
+                  <YStack
+                    padding={framePadding}
+                    gap={frameGap}
+                    flexShrink={1}
+                    {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
+                  >
+                    <Surface size="$true">
+                      {header}
+                      {content}
+                    </Surface>
+                  </YStack>
                 </YStack>
-              </YStack>
-            </Animated.View>
-          </RNView>
-        )}
+              </Animated.View>
+            </RNView>
+          )}
+        </OverlayWindow>
       </Modal>
     </>
   );

package/src/FloatingPanel/index.tsx

@@ -28,7 +28,7 @@ import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManage
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
-import { zIndex } from "../shared/zIndex";
+import { OverlayStackProvider, useOverlayZIndex } from "../shared/overlayStack";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
 import {
@@ -490,6 +490,7 @@ function FloatingPanelSheet({
   escapeTarget = "window",
 }: FloatingPanelProps & { escapeTarget?: "window" | "document" }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
+  const sheetZIndex = useOverlayZIndex("sheet");
   // LC-24 / A-ENTEREXIT: honor animation=none (undefined) — do not hardcode "medium".
   const slideMotion = {
     ...knobProps.motion.slide,
@@ -585,7 +586,8 @@ function FloatingPanelSheet({
         dismissOnSnapToBottom
         position={position}
         onPositionChange={setPosition}
-        zIndex={zIndex.sheet}
+        zIndex={sheetZIndex}
+        portalProps={{ zIndex: sheetZIndex }}
         {...transitionProps(slideMotion)}
       >
         <Sheet.Overlay
@@ -608,14 +610,16 @@ function FloatingPanelSheet({
           padding={framePadding}
           gap={frameGap}
         >
-          {header}
-          {scrollable ? (
-            <Sheet.ScrollView flex={header ? 1 : undefined} {...scrollViewProps}>
-              {children}
-            </Sheet.ScrollView>
-          ) : (
-            children
-          )}
+          <OverlayStackProvider zIndex={sheetZIndex}>
+            {header}
+            {scrollable ? (
+              <Sheet.ScrollView flex={header ? 1 : undefined} {...scrollViewProps}>
+                {children}
+              </Sheet.ScrollView>
+            ) : (
+              children
+            )}
+          </OverlayStackProvider>
         </Sheet.Frame>
       </Sheet>
     </>
@@ -642,6 +646,7 @@ function FloatingPanelWeb({
   anchorRect,
   ...sheetProps
 }: FloatingPanelProps) {
+  const panelZIndex = useOverlayZIndex("dropdown");
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
@@ -1193,7 +1198,7 @@ function FloatingPanelWeb({
                 top: overlayStyleRef.current?.top ?? panel.y ?? 0,
                 left: overlayStyleRef.current?.left ?? panel.x ?? 0,
                 scrollbarWidth: "none" as any,
-                zIndex: zIndex.dropdown,
+                zIndex: panelZIndex,
                 overflow: "auto",
                 ...(cover && !isContextMenu ? { overflowX: "hidden" as const } : {}),
                 ...panel.floatingStyleRef.current,
@@ -1261,7 +1266,7 @@ function FloatingPanelWeb({
               {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
               {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
             >
-              {children}
+              <OverlayStackProvider zIndex={panelZIndex}>{children}</OverlayStackProvider>
             </View>
             <ScrollArrow
               direction="down"

package/src/Spinner/index.native.tsx

@@ -11,10 +11,10 @@ export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 const SPIN_MS = 700;
 
 /** Native Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export function Spinner({ size, color, ...props }: SpinnerProps) {
+export function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps) {
   const { knobProps } = useResolvedKnobs();
   const token = spinnerSizeToken(size, knobProps.sizeToken);
-  const px = spinnerSizePx(token);
+  const px = pxProp ?? spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
   const [reduceMotion, setReduceMotion] = useState(false);
   useEffect(() => {

package/src/Spinner/index.tsx

@@ -26,10 +26,10 @@ function ensureMotionStyles() {
 }
 
 /** Form-styled Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export function Spinner({ size, color, ...props }: SpinnerProps) {
+export function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps) {
   const { knobProps } = useResolvedKnobs();
   const token = spinnerSizeToken(size, knobProps.sizeToken);
-  const px = spinnerSizePx(token);
+  const px = pxProp ?? spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
   const animationsOff = !knobProps.motion.control.transition;
   ensureMotionStyles();

package/src/Spinner/spinnerSize.ts

@@ -6,6 +6,8 @@ export type SpinnerSize = "small" | "large";
 
 export interface SpinnerProps {
   size?: SpinnerSize;
+  /** Glyph box in px, over `size`: a host slot that already has a size (Button's icon slot). */
+  px?: number;
   color?: string;
   [key: string]: unknown;
 }

package/src/fields/Combobox/index.tsx

@@ -67,7 +67,7 @@ import {
   useViewportGtSm,
 } from "../../FloatingPanel";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
-import { zIndex } from "../../shared/zIndex";
+import { useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
@@ -518,6 +518,7 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange,
 }: FloatingComboboxCoreProps) {
+  const overlayZIndex = useOverlayZIndex("dropdown");
   const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
   const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
@@ -1498,7 +1499,7 @@ function FloatingComboboxCore({
                   position: "fixed",
                   top: 0,
                   left: 0,
-                  zIndex: zIndex.dropdown,
+                  zIndex: overlayZIndex,
                   overflow: "hidden",
                   display: "flex",
                   flexDirection: "column",