@multiplatform.one/components 7.4.0 → 7.5.0

package/src/SheetModal/index.native.tsx

@@ -10,18 +10,22 @@
  * height with a large-detent cap. LC-71: the frame is not a control.
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-  KeyboardAvoidingView,
+  Animated,
+  Easing,
   Modal,
+  PanResponder,
   Platform,
   Pressable,
   ScrollView as RNScrollView,
   StyleSheet,
+  View as RNView,
   useWindowDimensions,
 } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n";
+import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { View, YStack } from "tamagui";
 import { DialogRegionContext } from "../surfaces";
 
@@ -30,6 +34,14 @@ export type { SheetModalProps } from "./index";
 
 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;
 
 export function SheetModal({
@@ -43,6 +55,7 @@ export function SheetModal({
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const { height: windowHeight } = useWindowDimensions();
+  const keyboardInset = useKeyboardInset();
   const [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -52,11 +65,6 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  const handleModalShow = useCallback(() => {
-    if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
-  }, []);
-
   useEffect(() => {
     if (!open) {
       setBackdropArmed(false);
@@ -70,21 +78,162 @@ export function SheetModal({
     };
   }, [open]);
 
-  const maxHeight = Math.round(windowHeight * sheetMaxHeightRatio);
+  // MPO-64: the sheet ends above the keyboard rather than running under it.
+  const available = Math.max(0, windowHeight - keyboardInset);
+  const maxHeight = Math.max(
+    minSheetHeight,
+    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - backdropStrip)),
+  );
+
+  /*
+   * MPO-68 — drag and detents, the same machinery as FloatingPanel so the two
+   * native sheets behave identically under a finger.
+   *
+   * PanResponder rather than react-native-gesture-handler: gesture-handler
+   * gestures inside a core RN Modal need their own GestureHandlerRootView
+   * within the modal before they fire at all.
+   *
+   * translateY measures DOWN from fully-expanded: 0 is the sheet at full
+   * height, `travel` is fully off-screen.
+   */
+  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]);
+
+  /*
+   * MPO-71 — park the sheet OFF-SCREEN before the modal ever presents.
+   *
+   * `animationType="fade"` is a cross-dissolve on iOS and `onShow` fires in the
+   * COMPLETION block of presentViewController, so it runs AFTER the ~300ms
+   * dissolve. With translateY resting at 0 the sheet dissolved in AT REST
+   * (entrance one), onShow then snapped it off-screen in a single frame (the
+   * close), and the slide brought it back (entrance two).
+   *
+   * `travel` is fully off-screen and is known on the first render (maxHeight is
+   * window-derived), so the very first present is already primed; the effect
+   * below re-parks after every close for the ones after that.
+   */
+  const translateY = useRef(new Animated.Value(travel)).current;
+  const restRef = useRef(travel);
+  const travelRef = useRef(travel);
+  const detentsRef = useRef(detents);
+  travelRef.current = travel;
+  detentsRef.current = detents;
+
+  useEffect(() => {
+    if (open) return;
+    translateY.setValue(travelRef.current);
+    restRef.current = travelRef.current;
+  }, [open, translateY]);
+
+  const settleTo = useCallback(
+    (toValue: number, velocity = 0) => {
+      restRef.current = toValue;
+      Animated.spring(translateY, {
+        toValue,
+        velocity,
+        damping: 32,
+        stiffness: 320,
+        mass: 0.9,
+        overshootClamping: true,
+        useNativeDriver: true,
+      }).start();
+    },
+    [translateY],
+  );
+
+  const dismiss = useCallback(
+    (velocity = 0) => {
+      restRef.current = travelRef.current;
+      Animated.spring(translateY, {
+        toValue: travelRef.current,
+        velocity,
+        damping: 40,
+        stiffness: 400,
+        mass: 0.9,
+        overshootClamping: true,
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) close();
+      });
+    },
+    [close, translateY],
+  );
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dy) > 2,
+        onPanResponderGrant: () => {
+          translateY.stopAnimation((value) => {
+            if (typeof value === "number" && Number.isFinite(value)) restRef.current = value;
+          });
+        },
+        onPanResponderMove: (_evt, g) => {
+          const next = restRef.current + g.dy;
+          translateY.setValue(next < 0 ? next / 3 : next);
+        },
+        onPanResponderRelease: (_evt, g) => {
+          const points = detentsRef.current;
+          const tvl = travelRef.current;
+          const current = Math.max(0, restRef.current + g.dy);
+          const projected = current + g.vy * 120;
+          const smallestRest = tvl - points[points.length - 1];
+          if (projected > smallestRest + dismissThreshold || g.vy > 1.1) {
+            dismiss(g.vy);
+            return;
+          }
+          let best = points[0];
+          let bestDelta = Number.POSITIVE_INFINITY;
+          for (const height of points) {
+            const delta = Math.abs(projected - (tvl - height));
+            if (delta < bestDelta) {
+              bestDelta = delta;
+              best = height;
+            }
+          }
+          settleTo(tvl - best, g.vy);
+        },
+        onPanResponderTerminate: () => settleTo(restRef.current),
+      }),
+    [dismiss, settleTo, translateY],
+  );
+
+  const handleModalShow = useCallback(() => {
+    if (armTimerRef.current) clearTimeout(armTimerRef.current);
+    armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
+    // MPO-62: the modal fades (backdrop dims IN PLACE); only the panel slides.
+    // MPO-71: the sheet is already parked off-screen before the present, so
+    // this setValue only normalises the start to exactly `travel` once the
+    // sheet has measured. Priming it here ALONE is the open-close-open bug:
+    // by the time onShow runs the dissolve has already shown the sheet.
+    translateY.setValue(travelRef.current);
+    restRef.current = 0;
+    Animated.timing(translateY, {
+      toValue: 0,
+      duration: 280,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [translateY]);
 
   return (
     <Modal
       visible={open}
       transparent
-      animationType="slide"
+      animationType="fade"
       statusBarTranslucent
       onRequestClose={close}
       onShow={handleModalShow}
     >
-      <KeyboardAvoidingView
-        style={{ flex: 1, justifyContent: "flex-end" }}
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-      >
+      <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
         <Pressable
           style={StyleSheet.absoluteFill}
           onPress={handleBackdropPress}
@@ -93,50 +242,81 @@ export function SheetModal({
         >
           <View flex={1} backgroundColor="$shadow6" />
         </Pressable>
-        <YStack
-          {...knobProps.surface}
-          {...knobProps.borderRadius}
-          borderBottomLeftRadius={0}
-          borderBottomRightRadius={0}
-          elevation={knobProps.elevation}
-          maxHeight={maxHeight}
-          paddingTop="$2"
-          paddingBottom={bottomInset}
-          overflow="hidden"
-          outlineWidth={0}
-          focusStyle={{ outlineWidth: 0 }}
-          focusVisibleStyle={{ outlineWidth: 0 }}
-          accessibilityViewIsModal
-          onAccessibilityEscape={close}
+        <Animated.View
+          onLayout={(e) => {
+            const h = Math.round(e.nativeEvent.layout.height);
+            if (h > 0 && h !== measuredHeight) setMeasuredHeight(h);
+          }}
+          style={{
+            // MPO-64: flex children default to flexShrink 0, so without this
+            // the sheet cannot give way to the keyboard.
+            flexShrink: 1,
+            minHeight: 0,
+            maxHeight,
+            transform: [{ translateY }],
+          }}
         >
-          <View
-            alignSelf="center"
-            width={36}
-            height={5}
-            borderRadius={100}
-            backgroundColor="$color8"
-            opacity={0.45}
-            marginBottom="$2"
-            accessible={false}
-          />
-          <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
-            <YStack
-              padding={knobProps.panelPadding.padding}
-              gap={knobProps.gap.gap}
-              flexShrink={1}
+          <YStack
+            {...knobProps.surface}
+            {...knobProps.borderRadius}
+            borderBottomLeftRadius={0}
+            borderBottomRightRadius={0}
+            elevation={knobProps.elevation}
+            maxHeight={maxHeight}
+            paddingTop="$2"
+            paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
+            overflow="hidden"
+            outlineWidth={0}
+            focusStyle={{ outlineWidth: 0 }}
+            focusVisibleStyle={{ outlineWidth: 0 }}
+            accessibilityViewIsModal
+            onAccessibilityEscape={close}
+          >
+            {/*
+              The grabber is the grab ZONE, not the 5pt pill inside it. LC-71
+              says the frame is not a control; the grabber is the one part of
+              it that is, so it is the only thing that takes the gesture, and
+              it never fights the ScrollView below.
+            */}
+            <RNView
+              {...panResponder.panHandlers}
+              accessibilityRole="adjustable"
+              accessibilityLabel={t("Drag to resize")}
+              style={{
+                alignSelf: "stretch",
+                alignItems: "center",
+                paddingTop: 3,
+                paddingBottom: 11,
+              }}
             >
-              {header}
-              {scrollable ? (
-                <RNScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
-                  {children}
-                </RNScrollView>
-              ) : (
-                children
-              )}
-            </YStack>
-          </DialogRegionContext.Provider>
-        </YStack>
-      </KeyboardAvoidingView>
+              <View
+                width={36}
+                height={5}
+                borderRadius={100}
+                backgroundColor="$color8"
+                opacity={0.45}
+                accessible={false}
+              />
+            </RNView>
+            <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+              <YStack
+                padding={knobProps.panelPadding.padding}
+                gap={knobProps.gap.gap}
+                flexShrink={1}
+              >
+                {header}
+                {scrollable ? (
+                  <RNScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
+                    {children}
+                  </RNScrollView>
+                ) : (
+                  children
+                )}
+              </YStack>
+            </DialogRegionContext.Provider>
+          </YStack>
+        </Animated.View>
+      </RNView>
     </Modal>
   );
 }

package/src/Skeleton/Skeleton.spec.tsx

@@ -0,0 +1,282 @@
+/**
+ * Skeleton / SkeletonText / SkeletonCircle — design-law contract.
+ *
+ * Locks LC-20 (anatomy + animation:none), LC-60 (R-PILL circle), LC-61
+ * (specimen a11y: one announcer, decorative bones), LC-80 (size recipe
+ * geometry), and named-export identity.
+ */
+import { Preset, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import * as SkeletonExports from "./index";
+import { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText } from "./index";
+
+afterEach(cleanup);
+
+function radiusClasses(el: Element): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+describe("Skeleton named exports", () => {
+  it("serves named exports only (no default) and keeps the namespace statics", () => {
+    expect(SkeletonExports.default).toBeUndefined();
+    expect(SkeletonExports.Skeleton).toBe(Skeleton);
+    expect(SkeletonExports.SkeletonText).toBe(SkeletonText);
+    expect(SkeletonExports.SkeletonCircle).toBe(SkeletonCircle);
+    expect(SkeletonExports.SkeletonGroup).toBe(SkeletonGroup);
+    expect(Skeleton.Text).toBe(SkeletonText);
+    expect(Skeleton.Circle).toBe(SkeletonCircle);
+    expect(Skeleton.Group).toBe(SkeletonGroup);
+  });
+});
+
+describe("Skeleton — LC-20 / LC-61 announcer and motion", () => {
+  it("announces a root bone as a polite busy status", () => {
+    const { container } = renderWithProviders(<Skeleton width={200} />);
+    const bone = container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(bone.getAttribute("role")).toBe("status");
+    expect(bone.getAttribute("aria-busy")).toBe("true");
+    expect(bone.getAttribute("aria-live")).toBe("polite");
+    expect(bone.getAttribute("aria-label")).toBe("Loading");
+    expect(bone.getAttribute("data-skeleton-variant")).toBe("text");
+    expect(bone.getAttribute("tabindex")).toBeNull();
+  });
+
+  it("pulses by default and goes static when animate=false", () => {
+    const live = renderWithProviders(<Skeleton width={120} />);
+    const liveBone = live.container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(liveBone.getAttribute("data-animate")).toBe("true");
+    expect(liveBone.className).toMatch(/mp-skeleton-pulse/);
+    expect(liveBone.className).not.toMatch(/mp-skeleton-static/);
+    cleanup();
+
+    const still = renderWithProviders(<Skeleton width={120} animate={false} />);
+    const stillBone = still.container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(stillBone.getAttribute("data-animate")).toBe("false");
+    expect(stillBone.className).toMatch(/mp-skeleton-static/);
+    expect(stillBone.className).not.toMatch(/mp-skeleton-pulse/);
+  });
+
+  it("animation:none stops the pulse even when animate is true (LC-20 / LC-68)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Skeleton width={120} animate />
+      </Preset>,
+    );
+    const bone = container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(bone.getAttribute("data-animate")).toBe("false");
+    expect(bone.className).toMatch(/mp-skeleton-static/);
+  });
+
+  it("never accepts pointer events", () => {
+    const { container } = renderWithProviders(<Skeleton width={80} height={16} />);
+    const bone = container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(bone.className).toMatch(/_pe-none/);
+  });
+
+  it("fillStyle does not recolour the bone (neutral chrome)", () => {
+    const filled = renderWithProviders(
+      <Preset overrides={{ fillStyle: "filled" }}>
+        <Skeleton width={80} />
+      </Preset>,
+    );
+    const outlined = renderWithProviders(
+      <Preset overrides={{ fillStyle: "outlined" }}>
+        <Skeleton width={80} />
+      </Preset>,
+    );
+    const filledBg = String(
+      (filled.container.querySelector("[data-skeleton]") as HTMLElement).className,
+    )
+      .split(" ")
+      .filter((c) => c.startsWith("_bg-"))
+      .sort()
+      .join(" ");
+    const outlinedBg = String(
+      (outlined.container.querySelector("[data-skeleton]") as HTMLElement).className,
+    )
+      .split(" ")
+      .filter((c) => c.startsWith("_bg-"))
+      .sort()
+      .join(" ");
+    expect(filledBg).toBe(outlinedBg);
+    expect(filledBg.length).toBeGreaterThan(0);
+  });
+});
+
+describe("Skeleton — radius classes (LC-20 / LC-60)", () => {
+  it("text bones go square at radius:none and clamp at full (R-CLAMP)", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Skeleton variant="text" width={120} />
+      </Preset>,
+    );
+    expect(radiusClasses(none.container.querySelector("[data-skeleton]") as Element)).toEqual([
+      "_btlr-0px",
+    ]);
+    cleanup();
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Skeleton variant="text" width={120} />
+      </Preset>,
+    );
+    expect(radiusClasses(full.container.querySelector("[data-skeleton]") as Element)).toEqual([
+      "_btlr-t-radius-2",
+    ]);
+  });
+
+  it("rounded bones track the radius knob (R-SCALE)", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Skeleton variant="rounded" width={80} height={32} />
+      </Preset>,
+    );
+    expect(radiusClasses(none.container.querySelector("[data-skeleton]") as Element)).toEqual([
+      "_btlr-t-radius-0",
+    ]);
+    cleanup();
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Skeleton variant="rounded" width={80} height={32} />
+      </Preset>,
+    );
+    expect(radiusClasses(full.container.querySelector("[data-skeleton]") as Element)).toEqual([
+      "_btlr-t-radius-12",
+    ]);
+  });
+
+  it("circular bones declare R-PILL and stay round at radius:none", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Skeleton variant="circular" width={40} height={40} />
+      </Preset>,
+    );
+    const bone = container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(bone.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(bone.getAttribute("data-radius-part")).toBe("SkeletonCircle");
+    expect(bone.getAttribute("data-skeleton-variant")).toBe("circular");
+  });
+
+  it("rectangular bones stay square (no radius class, no R-PILL)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Skeleton variant="rectangular" width={80} height={32} />
+      </Preset>,
+    );
+    const bone = container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(bone.getAttribute("data-radius-class")).toBeNull();
+    expect(radiusClasses(bone)).toEqual(["_btlr-0px"]);
+  });
+});
+
+describe("SkeletonText", () => {
+  it("announces once; child bones are decorative", () => {
+    const { container } = renderWithProviders(<SkeletonText lines={3} />);
+    const stack = container.querySelector("[data-skeleton-text]") as HTMLElement;
+    expect(stack.getAttribute("role")).toBe("status");
+    expect(stack.getAttribute("aria-busy")).toBe("true");
+    expect(stack.getAttribute("data-lines")).toBe("3");
+    const bones = container.querySelectorAll("[data-skeleton]");
+    expect(bones).toHaveLength(3);
+    for (const bone of bones) {
+      expect(bone.getAttribute("aria-hidden")).toBe("true");
+      expect(bone.getAttribute("role")).toBeNull();
+    }
+  });
+
+  it("renders nothing for 0 or negative lines", () => {
+    expect(
+      renderWithProviders(<SkeletonText lines={0} />).container.querySelector("[data-skeleton]"),
+    ).toBeNull();
+    cleanup();
+    expect(
+      renderWithProviders(<SkeletonText lines={-4} />).container.querySelector("[data-skeleton]"),
+    ).toBeNull();
+  });
+
+  it("shortens only the last line when more than one line exists", () => {
+    const { container } = renderWithProviders(<SkeletonText lines={3} lastLineWidth="40%" />);
+    const bones = [...container.querySelectorAll("[data-skeleton]")] as HTMLElement[];
+    expect(bones).toHaveLength(3);
+    expect(bones[0].getAttribute("data-width")).toBe("100%");
+    expect(bones[1].getAttribute("data-width")).toBe("100%");
+    expect(bones[2].getAttribute("data-width")).toBe("40%");
+  });
+
+  it("space knob drives the line gap (SP-GAP)", () => {
+    const small = renderWithProviders(
+      <Preset overrides={{ space: "small" }}>
+        <SkeletonText lines={2} />
+      </Preset>,
+    );
+    const large = renderWithProviders(
+      <Preset overrides={{ space: "large" }}>
+        <SkeletonText lines={2} />
+      </Preset>,
+    );
+    const smallGap = String(
+      (small.container.querySelector("[data-skeleton-text]") as HTMLElement).className,
+    );
+    const largeGap = String(
+      (large.container.querySelector("[data-skeleton-text]") as HTMLElement).className,
+    );
+    expect(smallGap).not.toEqual(largeGap);
+  });
+});
+
+describe("SkeletonCircle", () => {
+  it("stays 1:1 and scales with the size recipe when size is omitted", () => {
+    const medium = renderWithProviders(<SkeletonCircle />);
+    const mediumBone = medium.container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(mediumBone.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(mediumBone.getAttribute("data-skeleton-variant")).toBe("circular");
+    const mediumMax = sizeRecipeForToken("$5").height;
+    expect(Number(mediumBone.getAttribute("data-diameter"))).toBe(mediumMax);
+    cleanup();
+
+    const small = renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <SkeletonCircle />
+      </Preset>,
+    );
+    const smallBone = small.container.querySelector("[data-skeleton]") as HTMLElement;
+    const smallMax = sizeRecipeForToken("$4").height;
+    const smallVal = Number(smallBone.getAttribute("data-diameter"));
+    expect(smallVal).toBe(smallMax);
+    expect(smallVal).toBeLessThan(mediumMax);
+  });
+
+  it("honors an explicit size and a zero diameter", () => {
+    const sized = renderWithProviders(<SkeletonCircle size={64} />);
+    const sizedBone = sized.container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(Number(sizedBone.getAttribute("data-diameter"))).toBe(64);
+    cleanup();
+
+    const zero = renderWithProviders(<SkeletonCircle size={0} />);
+    const zeroBone = zero.container.querySelector("[data-skeleton]") as HTMLElement;
+    expect(Number(zeroBone.getAttribute("data-diameter"))).toBe(0);
+  });
+});
+
+describe("SkeletonGroup", () => {
+  it("announces the group once so nested bones stay decorative", () => {
+    const { container } = renderWithProviders(
+      <SkeletonGroup>
+        <Skeleton width={80} />
+        <SkeletonText lines={2} />
+      </SkeletonGroup>,
+    );
+    const group = container.querySelector("[data-skeleton-group]") as HTMLElement;
+    expect(group.getAttribute("role")).toBe("status");
+    expect(group.getAttribute("aria-busy")).toBe("true");
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(1);
+    for (const bone of container.querySelectorAll("[data-skeleton]")) {
+      expect(bone.getAttribute("aria-hidden")).toBe("true");
+    }
+  });
+});

package/src/Skeleton/SkeletonCircle.stories.tsx

@@ -6,14 +6,14 @@ const meta: Meta<typeof SkeletonCircle> = {
   title: "Components/SkeletonCircle",
   component: SkeletonCircle,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     // D-10 SKELETONS-RESOLVE: explicitly-labeled skeleton specimen (the
     // skeleton is the subject here, not a promise about pending data).
     skeletonSpecimen: true,
     docs: {
       description: {
         component:
-          "SKELETON SPECIMEN (D-10). Circular loading placeholder (avatar-shaped). Default diameter 40px. Skeletons persist on this page by design; product surfaces must show zero skeletons once their pending source settles.",
+          "SKELETON SPECIMEN (D-10). Circular loading placeholder (avatar-shaped). Default diameter follows the size recipe (LC-80): one height step above the control ramp, 1:1 at every radius (R-PILL). Skeletons persist on this page by design; product surfaces must show zero skeletons once their pending source settles.",
       },
     },
   },

package/src/Skeleton/SkeletonText.stories.tsx

@@ -6,7 +6,7 @@ const meta: Meta<typeof SkeletonText> = {
   title: "Components/SkeletonText",
   component: SkeletonText,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     // D-10 SKELETONS-RESOLVE: explicitly-labeled skeleton specimen (the
     // skeleton is the subject here, not a promise about pending data).
     skeletonSpecimen: true,