@multiplatform.one/components 7.6.3 → 7.7.1

package/src/CardFooter.tsx

@@ -14,16 +14,19 @@ import { wrapBareTextChildren } from "./shared/textRidesText";
 export type CardFooterProps = ViewProps & { children?: ReactNode };
 
 /**
- * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
- * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ * Tamagui styled hosts drop JSX `data-*` on native (Toast gallery hole), so
+ * native needs the RN `dataSet` map. On web, spreading `dataSet` onto a DOM
+ * host is a React invalid-prop warning (`dataSet` → `dataset`). jsdom and
+ * Storybook keep kebab `data-*`, so web writes those only.
  */
 function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  if (process.env.TAMAGUI_TARGET !== "native") return attrs;
   const dataSet: Record<string, string> = {};
   for (const [key, value] of Object.entries(attrs)) {
     const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
     dataSet[camel] = value;
   }
-  return { ...attrs, dataSet };
+  return { dataSet };
 }
 
 export function CardFooter({ children, ...props }: CardFooterProps) {

package/src/CardHeader.spec.tsx

@@ -28,7 +28,7 @@ describe("CardHeader named exports", () => {
     expect(Card.Header).toBe(CardHeader);
     const mod = await import("./CardHeader");
     expect(mod.CardHeader).toBe(CardHeader);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 });
 

package/src/CardHeader.tsx

@@ -14,16 +14,19 @@ import { wrapBareTextChildren } from "./shared/textRidesText";
 export type CardHeaderProps = ViewProps & { children?: ReactNode };
 
 /**
- * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
- * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ * Tamagui styled hosts drop JSX `data-*` on native (Toast gallery hole), so
+ * native needs the RN `dataSet` map. On web, spreading `dataSet` onto a DOM
+ * host is a React invalid-prop warning (`dataSet` → `dataset`). jsdom and
+ * Storybook keep kebab `data-*`, so web writes those only.
  */
 function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  if (process.env.TAMAGUI_TARGET !== "native") return attrs;
   const dataSet: Record<string, string> = {};
   for (const [key, value] of Object.entries(attrs)) {
     const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
     dataSet[camel] = value;
   }
-  return { ...attrs, dataSet };
+  return { dataSet };
 }
 
 export function CardHeader({ children, ...props }: CardHeaderProps) {

package/src/Chip/Chip.spec.tsx

@@ -150,7 +150,7 @@ describe("Chip", () => {
     expect(mod.chipTone).toBe(chipTone);
     expect(typeof mod.chipIconSize).toBe("function");
     expect(chipIconSize("$3")).toBeGreaterThan(0);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("label TEXT NODE weight is 400, never 500/600", () => {

package/src/Pagination.spec.tsx

@@ -163,7 +163,7 @@ describe("Pagination design-law (MPO-60)", () => {
     const mod = await import("./Pagination");
     expect(mod.Pagination).toBe(Pagination);
     expect(mod.getPaginationItems).toBeTypeOf("function");
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("LC-68: animation none publishes data-animation=none (no quick fallback)", () => {

package/src/ProgressSteps/ProgressSteps.spec.tsx

@@ -52,6 +52,18 @@ describe("ProgressSteps", () => {
     expect(current.className).toContain("_bg-accentBackg");
   });
 
+  it("walks the current fill off the dark mid-solid so the numeral can clear 4.5", () => {
+    const { container } = render(
+      <TamaguiProvider config={houseConfig} defaultTheme="dark" disableInjectCSS>
+        <ProgressSteps steps={steps} current={1} />
+      </TamaguiProvider>,
+    );
+    const current = container.querySelector('[aria-current="step"]') as HTMLElement;
+    expect(current).toBeTruthy();
+    expect(current.className).toMatch(/_bg-accent/);
+    expect(current.className).not.toContain("_bg-accentBackg");
+  });
+
   it("calls onStepChange when jumping back to a completed step", () => {
     const onStepChange = vi.fn();
     const { container } = renderWithProviders(
@@ -110,10 +122,25 @@ describe("ProgressSteps", () => {
     expect(target.getAttribute("data-press-min")).toBe("44");
   });
 
-  it("steps nested marker size down under compact density", () => {
+  it("declares the marker R-PILL and tracks the borderWidth knob for the ring", () => {
+    const { container } = renderWithProviders(<ProgressSteps steps={steps} current={1} />);
+    const marker = container.querySelector("[data-nested-px]") as HTMLElement;
+    expect(marker.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(marker.getAttribute("data-radius-part")).toBe("ProgressSteps marker");
+    // Default knobs: borderWidth medium = 1. The previous 2px pin is gone.
+    const upcoming = container.querySelector('[data-step-state="upcoming"]') as HTMLElement;
+    expect(upcoming.getAttribute("data-marker-ring")).toBe("1");
+    const current = container.querySelector('[data-step-state="current"]') as HTMLElement;
+    expect(current.getAttribute("data-marker-ring")).toBe("1");
+  });
+
+  it("keeps nested marker size on the size channel under compact (LC-76)", () => {
     const { container } = renderWithProviders(<ProgressSteps steps={steps} current={0} compact />);
+    const root = container.querySelector('[role="list"]') as HTMLElement;
+    expect(root.getAttribute("data-density")).toBe("compact");
     const marker = container.querySelector("[data-nested-px]") as HTMLElement;
-    expect(marker.getAttribute("data-nested-px")).toBe("28");
+    // Compact steps space only — nestedControl follows size (medium = 32).
+    expect(marker.getAttribute("data-nested-px")).toBe("32");
   });
 
   it("hides visible step labels when labels is hidden", () => {

package/src/ProgressSteps/index.tsx

@@ -3,6 +3,8 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   pressTargetHitSlop,
+  radiusClassProps,
+  useAaSolidFill,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -76,8 +78,11 @@ const Marker = styled(View, {
   name: "ProgressStepMarker",
   alignItems: "center",
   justifyContent: "center",
-  borderWidth: 2,
   flexShrink: 0,
+  // R-PILL (D-09 / LC-60): the numbered disc is a circle at every radius
+  // stop — the knob moves size, never shape. Not K1 (Progress/Meter rails).
+  ...radiusClassProps("R-PILL", "ProgressSteps marker"),
+  borderRadius: 1000,
 });
 
 const StepButton = styled(View, {
@@ -148,14 +153,18 @@ export function ProgressSteps({
   );
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
-  // LC-05: current marker rides the accent fill; completed/error fills pick
-  // paper/ink from luminance rather than an assumed white glyph.
-  const onSelected = useReadableTextOn(componentColors.indicator.selected);
+  // LC-05: current marker rides an accent solid; completed/error fills pick
+  // paper/ink from luminance rather than an assumed white glyph. The stock
+  // dark `$accentBackground` tops out at 4.02:1 against either scheme
+  // anchor, under the in-repo 4.5 text floor, so the current fill walks to
+  // the nearest accent solid that can carry the numeral.
+  const currentFill = useAaSolidFill(componentColors.indicator.selected);
+  const onSelected = useReadableTextOn(currentFill);
   const onCompleted = useReadableTextOn(componentColors.indicator.completed);
   const onError = useReadableTextOn("$red9");
   const { px: markerPx, hitSlop, box: nestedBox } = splitNestedControl(knobProps.nestedControl);
   const markerIconSize = Math.max(12, Math.round(markerPx * 0.45));
-  const markerRadius = knobProps.pointy ? 0 : 1000;
+  const ringWidth = knobProps.borderRadius.borderWidth ?? 0;
   const connectorThickness = 2;
   const pressOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - markerPx) / 2));
   const interactive = !!onStepChange && allowJump;
@@ -192,7 +201,7 @@ export function ProgressSteps({
               : kind === "completed"
                 ? componentColors.indicator.completed
                 : kind === "current"
-                  ? componentColors.indicator.selected
+                  ? currentFill
                   : "transparent";
           const markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg =
@@ -207,15 +216,20 @@ export function ProgressSteps({
             step.description ?? (step.optional && kind !== "error" ? t("Optional") : null);
           const connectorFill =
             index < current ? componentColors.indicator.completed : componentColors.indicator.track;
+          // Upcoming is outlined-by-state: chromeless `borderWidth:none` would
+          // erase the empty disc, so it keeps the OUTLINED-HAIRLINE floor.
+          const markerRing = kind === "upcoming" ? Math.max(ringWidth, 0.5) : ringWidth;
 
           const marker = (
             <Marker
               {...nestedBox}
-              borderRadius={markerRadius}
+              borderRadius={1000}
+              borderWidth={markerRing}
               backgroundColor={markerBg}
               borderColor={markerBorder}
               data-nested-px={markerPx}
               data-step-state={kind}
+              data-marker-ring={markerRing}
               transition={knobProps.transition}
               {...(state === "current"
                 ? ({ "aria-current": "step" } as Record<string, unknown>)

package/src/SheetModal/SheetModal.spec.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { mediumDetent, minSheetHeight, resolveSheetDetents } from "./detents";
+
+/*
+ * MPO-68 AC-4 — "SheetModal's snapPoint prop either drives a detent or is
+ * removed". It drives one. These lock that in, because it has already been
+ * lost once: 184746910 (MPO-71) rewrote the detents block from a pre-MPO-68
+ * copy and dropped the snapPoint push, leaving the prop declared, documented
+ * and passed by four callers while doing nothing on device.
+ *
+ * Geometry under test is a pure height list, largest first. The component's
+ * PanResponder turns each height h into a resting translate of `travel - h`.
+ */
+
+const travel = 600;
+
+describe("resolveSheetDetents", () => {
+  it("a plain sheet has exactly one rest: fully expanded", () => {
+    expect(resolveSheetDetents({ travel })).toEqual([600]);
+  });
+
+  it("REGRESSION: snapPoint creates a detent instead of being ignored", () => {
+    // The bug this spec exists for: main returned [600] here.
+    expect(resolveSheetDetents({ travel, snapPoint: 85 })).toEqual([600, 510]);
+  });
+
+  it("reads snapPoint as a percent of the full height, matching the web Sheet", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 50 })).toEqual([600, 300]);
+    expect(resolveSheetDetents({ travel, snapPoint: 60 })).toEqual([600, 360]);
+    expect(resolveSheetDetents({ travel, snapPoint: 92 })).toEqual([600, 552]);
+  });
+
+  it("honours the four heights real callers pass", () => {
+    // CommandPalette 92, list-tools-sheet 85, ListThemePlayground 85,
+    // Toast.stories 70 — every one of these was a no-op on device.
+    for (const snapPoint of [92, 85, 70]) {
+      const detents = resolveSheetDetents({ travel, snapPoint });
+      expect(detents).toContain(Math.round(travel * (snapPoint / 100)));
+      expect(detents.length).toBeGreaterThan(1);
+    }
+  });
+
+  it("a scrollable sheet keeps its half-open detent", () => {
+    expect(resolveSheetDetents({ travel, scrollable: true })).toEqual([
+      600,
+      Math.round(travel * mediumDetent),
+    ]);
+  });
+
+  it("scrollable and snapPoint stack, largest first, no duplicates", () => {
+    // 600 expanded, 330 medium, 510 from snapPoint.
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 85 })).toEqual([
+      600, 510, 330,
+    ]);
+  });
+
+  it("dedupes a snapPoint that lands on a detent already present", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 100 })).toEqual([600]);
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 55 })).toEqual([600, 330]);
+  });
+
+  it("clamps a snapPoint above 100 to fully expanded", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 140 })).toEqual([600]);
+  });
+
+  it("drops a detent shorter than the floor rather than resting near-dismissed", () => {
+    // 600 * 0.10 = 60, well under minSheetHeight.
+    expect(resolveSheetDetents({ travel, snapPoint: 10 })).toEqual([600]);
+    expect(minSheetHeight).toBe(180);
+  });
+
+  it("a sheet shorter than the floor still keeps its own full height", () => {
+    expect(resolveSheetDetents({ travel: 120, scrollable: true, snapPoint: 85 })).toEqual([120]);
+  });
+
+  it("ignores a snapPoint that is not a usable number", () => {
+    for (const snapPoint of [0, -20, Number.NaN, Number.POSITIVE_INFINITY]) {
+      expect(resolveSheetDetents({ travel, snapPoint })).toEqual([600]);
+    }
+    expect(resolveSheetDetents({ travel, snapPoint: undefined })).toEqual([600]);
+  });
+
+  it("always returns descending heights, so the pan release can scan in order", () => {
+    const detents = resolveSheetDetents({ travel, scrollable: true, snapPoint: 40 });
+    expect(detents).toEqual([...detents].sort((a, b) => b - a));
+    expect(new Set(detents).size).toBe(detents.length);
+  });
+});

package/src/SheetModal/SheetModal.stories.spec.tsx

@@ -0,0 +1,54 @@
+/**
+ * SheetModal was the harness inside SheetFrame.stories and had no title of its
+ * own, so the gallery listed the frame and not the sheet (MPO-193). These
+ * mount every exported story so an unrenderable one fails here, not in the
+ * Kitchen Sink.
+ *
+ * Presence is asserted by accessible NAME, not by counting dialogs: tamagui's
+ * Sheet keeps its portal in the tree either side of `open`, and happy-dom runs
+ * no animation, so `role="dialog"` matches more than one node whatever the
+ * open state is.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Default, OpenOnMount, Scrollable, TallDetent } from "./SheetModal.stories";
+
+afterEach(cleanup);
+
+describe("SheetModal stories", () => {
+  it("declares the Components/SheetModal title against the component", () => {
+    expect(meta.title).toBe("Components/SheetModal");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("every exported story mounts its trigger", () => {
+    for (const story of [Default, Scrollable, TallDetent, OpenOnMount]) {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      expect(screen.getAllByText("Open sheet").length).toBeGreaterThan(0);
+      cleanup();
+    }
+  });
+
+  it("the sheet frame is a labelled modal dialog", () => {
+    renderWithProviders(<>{OpenOnMount.render?.({} as never, {} as never)}</>);
+    // tamagui renders the sheet through a portal AND inline, so the frame
+    // appears more than once with the same accessible name; every copy has to
+    // carry the modal semantics.
+    const frames = screen.getAllByRole("dialog", { name: "Move to project" });
+    expect(frames.length).toBeGreaterThan(0);
+    for (const frame of frames) expect(frame.getAttribute("aria-modal")).toBe("true");
+  });
+
+  it("the action row inside the sheet carries cancel and primary", () => {
+    renderWithProviders(<>{OpenOnMount.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Cancel").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Move").length).toBeGreaterThan(0);
+  });
+
+  it("the scrollable story fills the body with rows", () => {
+    renderWithProviders(<>{Scrollable.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Project 1").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Project 30").length).toBeGreaterThan(0);
+  });
+});

package/src/SheetModal/SheetModal.stories.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, SizableText, YStack } from "tamagui";
+import { ActionBar } from "../actions/ActionBar";
+import { SheetModal } from "./index";
+
+function Harness({
+  scrollable = false,
+  snapPoint,
+  startOpen = false,
+}: {
+  scrollable?: boolean;
+  snapPoint?: number;
+  startOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(startOpen);
+  return (
+    <YStack minHeight={480} gap="$3">
+      <Button onPress={() => setOpen(true)}>Open sheet</Button>
+      <Paragraph size="$2">
+        Dismiss by tapping the scrim, dragging to the bottom, or pressing Escape.
+      </Paragraph>
+      <SheetModal
+        open={open}
+        onOpenChange={setOpen}
+        scrollable={scrollable}
+        {...(snapPoint === undefined ? {} : { snapPoint })}
+        header={<SizableText fontWeight="600">Move to project</SizableText>}
+      >
+        {scrollable ? (
+          <YStack gap="$2">
+            {Array.from({ length: 30 }).map((_, index) => (
+              <Paragraph key={index}>Project {index + 1}</Paragraph>
+            ))}
+          </YStack>
+        ) : (
+          <YStack gap="$3">
+            <Paragraph>
+              The sheet is a dialog region, so the action row inside it caps at two actions.
+            </Paragraph>
+            <ActionBar
+              cancel={
+                <Button chromeless onPress={() => setOpen(false)}>
+                  Cancel
+                </Button>
+              }
+              primary={
+                <Button accent onPress={() => setOpen(false)}>
+                  Move
+                </Button>
+              }
+            />
+          </YStack>
+        )}
+      </SheetModal>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof SheetModal> = {
+  title: "Components/SheetModal",
+  component: SheetModal,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Modal bottom sheet. Anatomy follows the Apple HIG sheet (grabber, percent detent, swipe to dismiss) with Radix Dialog semantics: `role=dialog`, `aria-modal`, focus moved in, trapped, and returned on close, and Escape dismissal wired here because tamagui's Sheet has no key handling of its own. The frame opens a dialog region, so an ActionBar inside it inherits the two-action cap. Web renders tamagui's Sheet; the native twin is an RN Modal, because a raw Sheet cannot re-present from a trigger tap on device.",
+      },
+    },
+  },
+  argTypes: {
+    snapPoint: { control: { type: "range", min: 30, max: 95, step: 5 } },
+    scrollable: { control: "boolean" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof SheetModal>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <Harness />,
+};
+
+export const Scrollable: Story = {
+  name: "Scrollable body",
+  render: () => <Harness scrollable />,
+};
+
+export const TallDetent: Story = {
+  name: "Tall detent",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`snapPoint` is a percent of travel. 92 is the tallest height real callers pass (the command palette); every one of those was a no-op on device until the detent resolver landed.",
+      },
+    },
+  },
+  render: () => <Harness snapPoint={92} />,
+};
+
+export const OpenOnMount: Story = {
+  name: "Open",
+  render: () => <Harness startOpen />,
+};

package/src/SheetModal/detents.ts

@@ -0,0 +1,55 @@
+/**
+ * SheetModal detent geometry — the pure half, split out so it can be specced
+ * without standing up a React Native renderer.
+ *
+ * A detent is a VISIBLE HEIGHT in points. The native sheet's `translateY`
+ * measures DOWN from fully-expanded, so a detent of `h` rests at `travel - h`,
+ * and `travel` itself is the fully-expanded sheet.
+ */
+
+/** Smallest height a native sheet is ever laid out at. */
+export const minSheetHeight = 180;
+
+/**
+ * Half-open detent for a sheet that owns a scrollport, as a fraction of its
+ * full height. Mirrors FloatingPanel so both native sheets drag alike.
+ */
+export const mediumDetent = 0.55;
+
+export interface ResolveSheetDetentsOptions {
+  /** Full (expanded) height of the sheet, in points. */
+  travel: number;
+  /** The sheet owns a scrollport, so a half-open rest is meaningful. */
+  scrollable?: boolean;
+  /** Percent detent from the caller — the same prop the web Sheet takes. */
+  snapPoint?: number;
+}
+
+/**
+ * The heights the sheet is allowed to rest at, largest first.
+ *
+ * MPO-68: `snapPoint` is a percent on the web Sheet (`snapPoints={[snapPoint]}`).
+ * Native honours the same prop by turning that percent into a detent, so a
+ * caller that writes `snapPoint={85}` gets an 85%-height rest on both twins
+ * rather than the prop being silently dropped on device.
+ *
+ * Anything shorter than `minSheetHeight` is discarded, because a sheet that
+ * rests below that is indistinguishable from a dismissed one. A sheet whose
+ * full height is already under the floor keeps its own height, otherwise it
+ * would have no detents at all.
+ */
+export function resolveSheetDetents({
+  travel,
+  scrollable,
+  snapPoint,
+}: ResolveSheetDetentsOptions): number[] {
+  const points = [travel];
+  if (scrollable) {
+    points.push(Math.round(travel * mediumDetent));
+  }
+  if (typeof snapPoint === "number" && Number.isFinite(snapPoint) && snapPoint > 0) {
+    points.push(Math.round(travel * (Math.min(snapPoint, 100) / 100)));
+  }
+  const floor = Math.min(minSheetHeight, travel);
+  return Array.from(new Set(points.filter((h) => h >= floor))).sort((a, b) => b - a);
+}

package/src/SheetModal/index.native.tsx

@@ -24,6 +24,7 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { View, YStack } from "tamagui";
@@ -36,10 +37,6 @@ const sheetMaxHeightRatio = 0.85;
 const bottomInset = Platform.OS === "ios" ? 24 : 16;
 // Backdrop left visible above the sheet, so the scrim stays tappable.
 const backdropStrip = 48;
-const minSheetHeight = 180;
-// Half-open detent for a sheet that owns a scrollport, as a fraction of its
-// full height. Mirrors FloatingPanel so both native sheets drag alike.
-const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
 const IN_DIALOG_REGION = { inDialogRegion: true } as const;
@@ -49,7 +46,7 @@ export function SheetModal({
   onOpenChange,
   children,
   header,
-  snapPoint: _snapPoint,
+  snapPoint,
   scrollable,
 }: SheetModalProps) {
   const { t } = useTranslation();
@@ -95,16 +92,20 @@ export function SheetModal({
    *
    * translateY measures DOWN from fully-expanded: 0 is the sheet at full
    * height, `travel` is fully off-screen.
+   *
+   * The detent heights themselves live in ./detents.ts, pure, so the geometry
+   * is specced without a native renderer. 184746910 (MPO-71) rewrote this
+   * block from a pre-MPO-68 copy and silently dropped the `snapPoint` push,
+   * leaving the prop declared, documented and passed by four callers while
+   * doing nothing on device. Keep the math in one place so a rewrite of the
+   * animation cannot take the geometry with it again.
    */
   const [measuredHeight, setMeasuredHeight] = useState(0);
   const travel = measuredHeight || maxHeight;
-  const detents = useMemo(() => {
-    if (!scrollable) return [travel];
-    const points = [travel, Math.round(travel * mediumDetent)].filter(
-      (h) => h >= Math.min(minSheetHeight, travel),
-    );
-    return Array.from(new Set(points)).sort((a, b) => b - a);
-  }, [scrollable, travel]);
+  const detents = useMemo(
+    () => resolveSheetDetents({ travel, scrollable, snapPoint }),
+    [travel, scrollable, snapPoint],
+  );
 
   /*
    * MPO-71 — park the sheet OFF-SCREEN before the modal ever presents.

package/src/SheetModal/index.tsx

@@ -21,7 +21,7 @@ export interface SheetModalProps {
   children?: ReactNode;
   /** Fixed content above the (scrollable) body, e.g. the sheet title. */
   header?: ReactNode;
-  /** Percent snap point for the web Sheet (native sizes to content). */
+  /** Percent snap point. Web: the Sheet's snap point. Native: a drag detent. */
   snapPoint?: number;
   /** Wrap children in the sheet's scroll container. */
   scrollable?: boolean;
@@ -59,7 +59,10 @@ function useSheetFrameFocus(open: boolean, frameRef: RefObject<HTMLElement | nul
       if (!target || !target.isConnected) return;
       const ae = document.activeElement;
       const dropped =
-        !ae || ae === document.body || ae === document.documentElement || !!frameRef.current?.contains(ae);
+        !ae ||
+        ae === document.body ||
+        ae === document.documentElement ||
+        !!frameRef.current?.contains(ae);
       if (dropped) {
         target.focus({
           preventScroll: true,

package/src/Skeleton/Skeleton.spec.tsx

@@ -22,7 +22,7 @@ function radiusClasses(el: Element): string[] {
 
 describe("Skeleton named exports", () => {
   it("serves named exports only (no default) and keeps the namespace statics", () => {
-    expect(SkeletonExports.default).toBeUndefined();
+    expect("default" in SkeletonExports).toBe(false);
     expect(SkeletonExports.Skeleton).toBe(Skeleton);
     expect(SkeletonExports.SkeletonText).toBe(SkeletonText);
     expect(SkeletonExports.SkeletonCircle).toBe(SkeletonCircle);