pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/select/Select.js

@@ -1,30 +1,115 @@
 "use strict";
 
 /**
- * Select — a trigger styled like an Input box (same size/border/focus-ring conventions) that opens
- * an option list in React Native's OWN `Modal`. Imported directly from `"react-native"` here on
- * purpose: this module must never depend on the library's own `Modal` COMPONENT (its rendered
- * output/behaviour) — Select still owns its option list's markup outright.
- *
- * The one deliberate exception is the web portal mechanism: `ModalPortalContext`/`renderWebPortal`
- * are a plain context + a stateless helper with no React-tree footprint of their own (not the
- * `Modal` component), so Select reads the same ones `Modal.tsx` reads to stay consistent once a
- * consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * Select — a trigger styled like an Input box that opens an option list in React Native's OWN `Modal`.
  */
 
-import { memo, useContext, useState } from "react";
-import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpaceActivation } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { ModalPortalContext } from "../modal/ModalPortalContext.js";
 import { renderWebPortal } from "../modal/renderWebPortal";
-import { resolveSelectAccessibility, resolveSelectRowColors, resolveSelectTriggerColors, SELECT_ROW_ICON_SIZE, SELECT_SIZES, selectOverlayStructure, selectRowStructure, selectSheetStructure, selectTriggerStructure, selectTriggerValueStructure } from "./Select.variants.js";
+import { resolveSelectAccessibility, resolveSelectRowColors, resolveSelectTriggerColors, SELECT_LISTBOX_ROLE, SELECT_ROW_ICON_SIZE, SELECT_ROW_MIN_HEIGHT, SELECT_SIZES, selectOverlayStructure, selectRowLeadingStructure, selectRowStructure, selectSheetStructure, selectTriggerStructure, selectTriggerValueStructure } from "./Select.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-// Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
-// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it.
 const BACKDROP_SCRIM = "#00000099";
+const SelectOptionRow = /*#__PURE__*/memo(function SelectOptionRow({
+  option,
+  selected,
+  tabIndex,
+  theme,
+  rowColors,
+  onSelect,
+  testID
+}) {
+  const motion = useMotion();
+  const press = usePressMotion();
+  const handlePress = useCallback(() => onSelect(option), [onSelect, option]);
+  const rowRef = useRef(null);
+  const active = tabIndex === 0;
+
+  // The tabindex alone only names the tab stop — focus has to follow the arrows too, or the focus
+  // trap's Tab handler sees a focused row that is no longer tabbable and lets Tab leave the sheet.
+  useEffect(() => {
+    if (!active || Platform.OS !== "web") return;
+    rowRef.current?.focus();
+  }, [active]);
+
+  // `menuitem` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
+  useSpaceActivation(rowRef, handlePress);
+  const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const skipFirst = useRef(true);
+  const running = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    // A row scrolled into view already-selected must snap, never fade.
+    if (skipFirst.current) {
+      skipFirst.current = false;
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    if (!motion.enabled) {
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    running.current = motion.timing(checkOpacity, selected ? 1 : 0, {
+      duration: "fast"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [selected, motion, checkOpacity]);
+  useEffect(() => () => running.current?.stop(), []);
+  const rowStructure = useMemo(() => selectRowStructure(theme), [theme]);
+  const leadingStructure = useMemo(() => selectRowLeadingStructure(theme), [theme]);
+  const rowStyle = useCallback(({
+    pressed
+  }) => ({
+    backgroundColor: pressed ? rowColors.pressedRow : rowColors.background
+  }), [rowColors]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flex: 1,
+    fontSize: theme.fontSizes.md,
+    color: rowColors.text
+  }], [theme, rowColors]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: rowRef,
+    testID: testID ? `${testID}-option-${option.value}` : undefined,
+    accessibilityRole: "menuitem",
+    "aria-selected": selected,
+    tabIndex: tabIndex,
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    style: rowStyle,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      testID: testID ? `${testID}-option-${option.value}-content` : undefined,
+      style: [rowStructure, press.style],
+      children: [option.leading !== undefined && /*#__PURE__*/_jsx(View, {
+        style: leadingStructure,
+        children: option.leading
+      }), /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: labelStyle,
+        children: option.label
+      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+        testID: testID ? `${testID}-option-${option.value}-check` : undefined,
+        style: {
+          opacity: checkOpacity
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "check",
+          size: SELECT_ROW_ICON_SIZE,
+          color: rowColors.icon,
+          strokeWidth: ICON_STROKE
+        })
+      })]
+    })
+  });
+});
 export const Select = /*#__PURE__*/memo(function Select({
   options,
   value,
@@ -37,82 +122,108 @@ export const Select = /*#__PURE__*/memo(function Select({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
   const portalContainer = useContext(ModalPortalContext);
   const [open, setOpen] = useState(false);
   const [focused, setFocused] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const sheetRef = useRef(null);
+  const reveal = useReveal(open);
   const spec = SELECT_SIZES[size];
-  const selectedOption = options.find(option => option.value === value);
+  const selectedIndex = useMemo(() => options.findIndex(option => option.value === value), [options, value]);
+  const selectedOption = selectedIndex === -1 ? undefined : options[selectedIndex];
   const isPlaceholder = selectedOption === undefined;
   const displayText = selectedOption?.label ?? placeholder ?? "";
-  const triggerColors = resolveSelectTriggerColors(theme.colors, focused || open);
-  const rowColors = resolveSelectRowColors(theme.colors);
-  const a11y = resolveSelectAccessibility({
+  const triggerColors = useMemo(() => resolveSelectTriggerColors(theme.colors, focused || open), [theme.colors, focused, open]);
+  const rowColors = useMemo(() => resolveSelectRowColors(theme.colors), [theme.colors]);
+  const a11y = useMemo(() => resolveSelectAccessibility({
     disabled,
     open
-  });
+  }), [disabled, open]);
   const accessibleName = label !== undefined ? displayText ? `${label}, ${displayText}` : label : undefined;
-  const openMenu = () => {
+  const openMenu = useCallback(() => {
     if (disabled) return;
+    // Opening lands the keyboard on the SELECTED option, not the first one (WCAG 2.4.3).
+    setActiveIndex(selectedIndex === -1 ? 0 : selectedIndex);
     setOpen(true);
-  };
-  const closeMenu = () => setOpen(false);
-  const selectOption = option => {
+  }, [disabled, selectedIndex]);
+  const closeMenu = useCallback(() => setOpen(false), []);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const selectOption = useCallback(option => {
     onValueChange(option.value);
-    closeMenu();
-  };
-  const sheet = /*#__PURE__*/_jsxs(_Fragment, {
+    setOpen(false);
+  }, [onValueChange]);
+  const typeaheadLabels = useMemo(() => options.map(option => option.label), [options]);
+
+  // Keyboard (web only — every hook below is a no-op on native, see `core/a11y/keyboard.ts`).
+  // No `onActivate`: RNW already presses a `menuitem` on Enter, and each row's own
+  // `useSpaceActivation` owns Space — passing it here would select twice.
+  useDismissOnEscape(open, closeMenu);
+  useFocusTrap(sheetRef, open);
+  useRovingKeys(sheetRef, open, {
+    count: options.length,
+    activeIndex,
+    onActiveIndexChange: setActiveIndex,
+    typeaheadLabels
+  });
+  const keyExtractor = useCallback(option => option.value, []);
+  const renderItem = useCallback(({
+    item: option,
+    index
+  }) => /*#__PURE__*/_jsx(SelectOptionRow, {
+    option: option,
+    selected: option.value === value,
+    tabIndex: focusItemProps(index, activeIndex).tabIndex,
+    theme: theme,
+    rowColors: rowColors,
+    onSelect: selectOption,
+    testID: testID
+  }), [value, activeIndex, theme, rowColors, selectOption, testID]);
+  const rootStyle = useMemo(() => [styles.container, containerStyle], [containerStyle]);
+  const triggerStyle = useMemo(() => [selectTriggerStructure(theme, {
+    size
+  }), {
+    backgroundColor: triggerColors.background,
+    borderColor: triggerColors.border
+  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled]);
+  const valueStructure = useMemo(() => selectTriggerValueStructure(theme), [theme]);
+  const overlayStructure = useMemo(() => selectOverlayStructure(theme), [theme]);
+  const sheetStyle = useMemo(() => [selectSheetStructure(theme), {
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+  const fieldLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    marginBottom: theme.space[1]
+  }], [theme]);
+  const valueTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flexShrink: 1,
+    fontSize: spec.fontSize,
+    color: isPlaceholder ? triggerColors.placeholder : triggerColors.text
+  }], [theme, spec, isPlaceholder, triggerColors]);
+  const sheet = open ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: BACKDROP_SCRIM
-      }],
+      tabIndex: -1,
+      style: styles.backdrop,
       onPress: closeMenu
     }), /*#__PURE__*/_jsx(View, {
-      style: selectOverlayStructure(theme),
+      style: overlayStructure,
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(View, {
-        style: [selectSheetStructure(theme), {
-          backgroundColor: theme.colors.bg.surface
-        }],
-        children: /*#__PURE__*/_jsx(ScrollView, {
-          bounces: false,
-          children: options.map(option => {
-            const selected = option.value === value;
-            return /*#__PURE__*/_jsxs(Pressable, {
-              testID: testID ? `${testID}-option-${option.value}` : undefined,
-              accessibilityRole: "menuitem",
-              accessibilityState: {
-                selected
-              },
-              onPress: () => selectOption(option),
-              style: [selectRowStructure(theme), {
-                backgroundColor: rowColors.background
-              }],
-              children: [option.leading, /*#__PURE__*/_jsx(Text, {
-                numberOfLines: 1,
-                style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-                  flex: 1,
-                  fontSize: theme.fontSizes.md,
-                  color: rowColors.text
-                }],
-                children: option.label
-              }), selected && /*#__PURE__*/_jsx(Icon, {
-                name: "check",
-                size: SELECT_ROW_ICON_SIZE,
-                color: rowColors.icon,
-                strokeWidth: ICON_STROKE
-              })]
-            }, option.value);
-          })
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        ref: sheetRef,
+        style: [sheetStyle, reveal.style],
+        children: /*#__PURE__*/_jsx(VirtualList, {
+          data: options,
+          keyExtractor: keyExtractor,
+          renderItem: renderItem,
+          itemHeight: SELECT_ROW_MIN_HEIGHT,
+          accessibilityRole: SELECT_LISTBOX_ROLE
         })
       })
     })]
-  });
-
-  // Web portal opt-in — see Modal.tsx's identical branch + ModalPortalContext.ts. Every other case
-  // (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below, unchanged.
+  }) : null;
   const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: "box-none",
@@ -120,44 +231,32 @@ export const Select = /*#__PURE__*/memo(function Select({
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
-    animationType: reducedMotion ? "none" : "fade",
+    animationType: "none",
     onRequestClose: closeMenu,
     children: sheet
   });
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, containerStyle],
+    style: rootStyle,
     children: [label !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-        fontSize: theme.fontSizes.sm,
-        color: theme.colors.fg.muted,
-        marginBottom: theme.space[1]
-      }],
+      style: fieldLabelStyle,
       children: label
     }), /*#__PURE__*/_jsxs(Pressable, {
       testID: testID,
       accessibilityRole: a11y.accessibilityRole,
       accessibilityLabel: accessibleName,
-      accessibilityState: a11y.accessibilityState,
+      "aria-disabled": a11y["aria-disabled"],
+      "aria-expanded": a11y["aria-expanded"],
       disabled: a11y.disabled,
       onPress: openMenu,
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
       hitSlop: spec.hitSlop,
-      style: [selectTriggerStructure(theme, {
-        size
-      }), {
-        backgroundColor: triggerColors.background,
-        borderColor: triggerColors.border
-      }, disabled && styles.dimmed],
+      style: triggerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
-        style: selectTriggerValueStructure(theme),
+        style: valueStructure,
         children: [selectedOption?.leading, /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            flexShrink: 1,
-            fontSize: spec.fontSize,
-            color: isPlaceholder ? triggerColors.placeholder : triggerColors.text
-          }],
+          style: valueTextStyle,
           children: displayText
         })]
       }), /*#__PURE__*/_jsx(Icon, {
@@ -173,9 +272,12 @@ const styles = StyleSheet.create({
   container: {
     alignSelf: "stretch"
   },
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: BACKDROP_SCRIM
   }
 });
 //# sourceMappingURL=Select.js.map

package/lib/module/modules/select/Select.variants.js

@@ -14,6 +14,14 @@
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
+ * `AccessibilityRole` jump `list` → `listitem` → `log` — so the widening lives on this ONE audited
+ * line instead of a cast at the call site. It is a type gap, not a runtime one: `react-native-web`
+ * emits the string as the DOM `role` verbatim, and native maps roles it doesn't know to nothing.
+ */
+export const SELECT_LISTBOX_ROLE = "listbox";
+
 /** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export const MIN_TOUCH_TARGET = 44;
 const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
@@ -62,7 +70,8 @@ export function resolveSelectRowColors(colors) {
   return {
     background: colors.bg.surface,
     text: colors.fg.default,
-    icon: colors.fg.default
+    icon: colors.fg.default,
+    pressedRow: colors.bg.sunken
   };
 }
 /**
@@ -74,10 +83,8 @@ export function resolveSelectAccessibility(input) {
   const disabled = input.disabled === true;
   return {
     accessibilityRole: "button",
-    accessibilityState: {
-      disabled,
-      expanded: input.open
-    },
+    "aria-disabled": disabled,
+    "aria-expanded": input.open,
     disabled
   };
 }
@@ -154,4 +161,20 @@ export const selectRowStructure = createThemedVariants(theme => ({
     paddingHorizontal: theme.space[4]
   }
 }));
+
+/**
+ * `SelectOption.leading` is an arbitrary consumer node, so an unconstrained one could make a row
+ * taller than `SELECT_ROW_MIN_HEIGHT` and silently falsify the list's `getItemLayout` offsets. This
+ * slot bounds it to the row's own glyph box instead, which is what keeps the uniform-height fast
+ * path true by construction (`core/MODULE.md`: `itemHeight` is for uniform rows only).
+ */
+export const selectRowLeadingStructure = createThemedVariants(() => ({
+  base: {
+    width: SELECT_ROW_ICON_SIZE,
+    height: SELECT_ROW_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  }
+}));
 //# sourceMappingURL=Select.variants.js.map

package/lib/module/modules/skeleton/MODULE.md

@@ -13,6 +13,7 @@ neutral fills. It takes no children and no interaction; it IS its own size, whic
 | `index.ts` | Public surface: `Skeleton`, `SkeletonProps`, `SkeletonShape`. |
 | `__tests__/Skeleton.test.ts` | Pure: colour-role mapping + shimmer-visibility guard (all brands × modes), the size resolver, the a11y contract. |
 | `__tests__/Skeleton.render.test.tsx` | Render: shape scale, sizing, shimmer mounts/skips under reduced motion, decorative-vs-labelled a11y, consumer `style` applies last. |
+| `__tests__/Skeleton.motion.test.tsx` | Motion cost: the loop is handed to the native driver (`_startNativeLoop(-1)`), never restarted per iteration from JS; the pulse still fades both ways; both gates. |
 
 ## Props
 
@@ -33,13 +34,16 @@ widen.
 
 - **Decorative by default, same "decorative unless labelled" shape as `Avatar`.** A skeleton
   carries no meaning of its own — it is a stand-in, not content — so when `accessibilityLabel` is
-  absent it is hidden from assistive tech via `accessibilityElementsHidden` (iOS) +
-  `importantForAccessibility="no-hide-descendants"` (Android). `resolveSkeletonAccessibility`
+  absent it is hidden from assistive tech via `aria-hidden={true}`. `resolveSkeletonAccessibility`
   derives this purely, so the contract is unit-tested without a renderer.
 - When `accessibilityLabel` **is** given (e.g. `"Loading"`), the placeholder is exposed as one
-  `accessibilityRole="progressbar"` element carrying it, with `accessibilityState={{ busy: true }}`
-  (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box appearing on
-  screen).
+  `accessibilityRole="progressbar"` element carrying it, with `aria-busy={true}` (WCAG 1.4.1 — the
+  loading state is announced, not left to be inferred from a box appearing on screen).
+- **`aria-hidden`, not `accessibilityElementsHidden`+`importantForAccessibility`** — react-native-web
+  0.21.2 forwards only the flat `aria-*` vocabulary to the DOM; the two native-only hiding props
+  reach nothing there, so an unlabelled skeleton used to stay fully exposed to a screen reader on
+  web. `aria-hidden={true}` covers both platforms: RN's `Animated.View` maps it onto
+  `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"` natively.
 - **1.4.3 / 1.4.11** — N/A. A skeleton renders no text and draws no interactive boundary (same
   conclusion `Divider.test.ts` documents for its own decorative colour). What IS measured: `base`
   and `pulse` must resolve to two genuinely different colours on every brand × mode, or the shimmer
@@ -58,7 +62,13 @@ widen.
    (`resolveSkeletonColors`), applied inline.
 2. **Shimmer is one `Animated` opacity pulse over a static base fill** — the same "state layer over
    a base" technique as `Button`'s press overlay: a `bg.sunken` box with an absolutely-positioned
-   overlay sibling whose opacity loops 0 → 1 → 0. The overlay colour is `base` composited with a
+   overlay sibling whose opacity goes 0 → 1 → 0. That shape comes from ONE looped bare timing
+   driving a 0→1 value, interpolated `[0, 0.5, 1] → [0, 1, 0]` — **not** a looped
+   `Animated.sequence` of two timings. `Animated.loop` only takes RN's native path
+   (`_startNativeLoop`) when what it wraps reports `_isUsingNativeDriver()`, which
+   `Animated.sequence` returns `false` for unconditionally; a looped sequence therefore restarts
+   each leg from the JS thread, per row, exactly while the app is parsing the response those rows
+   are waiting on. `ProgressBar`'s sweep is the same bare-timing shape, for the same reason. The overlay colour is `base` composited with a
    fixed-alpha `fg.default` (via `compositeOver`, same precedent as `Button`'s `PRESS_SCRIM_DARK`/
    `LIGHT`) — **not** a second role lookup like `bg.raised`. Two arbitrary role rungs are not
    guaranteed to differ enough to read as a shimmer: an earlier version used `bg.raised`, and a
@@ -80,8 +90,18 @@ still stays layout-only, outermost, and last, for placement (margin, `alignSelf`
 
 ## Known gaps
 
-None — no icon, no new theme token, no new core helper needed for this component.
+The pulse cadence changed with the native-loop fix: one cycle is now a single `deliberate` (500ms)
+instead of two (500ms up + 500ms down), and — because the easing now shapes the driver rather than
+each leg — the peak lands about a fifth of the way through the cycle instead of halfway. Restoring
+the old cadence exactly needs a `linear` easing key and a longer duration key in
+`core/motion/config.ts`; neither exists, and a component may not define its own timing.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). No library child components or lists — nothing to memoize.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/skeleton/Skeleton.js

@@ -8,15 +8,19 @@
  * (see `resolveSkeletonColors`), pulsing on an `Animated` opacity loop. Purely decorative by default
  * (see `Skeleton.variants.ts` →
  * `resolveSkeletonAccessibility`, the same "decorative unless labelled" contract as `Avatar`).
+ *
+ * The shimmer is gated on `motion.decorative`, so it runs on high-tier devices only. A skeleton is
+ * usually rendered one-per-row across a whole loading list, and a per-row loop is the single most
+ * expensive thing a placeholder can do — low/mid tiers and reduce-motion get the static fill. Even
+ * on high tier the loop is shaped so it costs zero JS per iteration: see the effect below.
  */
 
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 import { Animated, StyleSheet } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { resolveSkeletonAccessibility, resolveSkeletonColors, resolveSkeletonSize, skeletonStructure } from "./Skeleton.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const PULSE_MS = 700;
 export const Skeleton = /*#__PURE__*/memo(function Skeleton({
   shape = "rect",
   width,
@@ -26,52 +30,62 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const pulse = useRef(new Animated.Value(0)).current;
+  const motion = useMotion();
+  const pulse = useAnimatedValue(0);
+  const loop = useRef(null);
   const size = resolveSkeletonSize(shape, width, height);
-  const colors = resolveSkeletonColors(theme.colors);
   const a11y = resolveSkeletonAccessibility({
     accessibilityLabel
   });
-
-  // WCAG 2.3.3 — reduced motion skips the loop entirely; the static `base` fill below is the
-  // whole placeholder in that case, never a paused-mid-pulse frame.
+  const colors = useMemo(() => resolveSkeletonColors(theme.colors), [theme.colors]);
+  const shimmer = motion.decorative;
   useEffect(() => {
-    if (reducedMotion) return undefined;
-    const loop = Animated.loop(Animated.sequence([Animated.timing(pulse, {
-      toValue: 1,
-      duration: PULSE_MS,
-      useNativeDriver: true
-    }), Animated.timing(pulse, {
-      toValue: 0,
-      duration: PULSE_MS,
-      useNativeDriver: true
-    })]));
-    loop.start();
-    return () => loop.stop();
-  }, [reducedMotion, pulse]);
+    if (!shimmer) return undefined;
+    pulse.setValue(0);
+    // A BARE timing, never a sequence: `Animated.loop` only takes RN's `_startNativeLoop` path when
+    // what it wraps reports `_isUsingNativeDriver()`, and `Animated.sequence` returns false for that
+    // unconditionally — a looped sequence restarts each leg from the JS thread, per row, forever.
+    // The fade back out is the interpolation below, not a second leg (ProgressBar's sweep, same shape).
+    loop.current = Animated.loop(motion.timing(pulse, 1, {
+      duration: "deliberate"
+    }));
+    loop.current.start();
+    return () => {
+      loop.current?.stop();
+      loop.current = null;
+    };
+  }, [shimmer, motion, pulse]);
+
+  // The effect cleanup above already stops the loop, but only while `shimmer` stays true across the
+  // unmount — this guarantees it regardless of the order React tears the tree down in.
+  useEffect(() => () => loop.current?.stop(), []);
+  const rootStyle = useMemo(() => [skeletonStructure(theme, {
+    shape
+  }), {
+    width: size.width,
+    height: size.height,
+    backgroundColor: colors.base
+  }, style], [theme, shape, size.width, size.height, colors, style]);
+  const pulseOpacity = useMemo(() => pulse.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 1, 0]
+  }), [pulse]);
+  const pulseStyle = useMemo(() => [StyleSheet.absoluteFill, {
+    backgroundColor: colors.pulse,
+    opacity: pulseOpacity
+  }], [colors, pulseOpacity]);
   return /*#__PURE__*/_jsx(Animated.View, {
     testID: testID,
     accessible: a11y.accessible,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
-    accessibilityState: a11y.accessibilityState,
-    accessibilityElementsHidden: a11y.accessibilityElementsHidden,
-    importantForAccessibility: a11y.importantForAccessibility,
-    style: [skeletonStructure(theme, {
-      shape
-    }), {
-      width: size.width,
-      height: size.height,
-      backgroundColor: colors.base
-    }, style],
-    children: !reducedMotion && /*#__PURE__*/_jsx(Animated.View, {
+    "aria-busy": a11y["aria-busy"],
+    "aria-hidden": a11y["aria-hidden"],
+    style: rootStyle,
+    children: shimmer && /*#__PURE__*/_jsx(Animated.View, {
       testID: testID === undefined ? undefined : `${testID}-pulse`,
       pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: colors.pulse,
-        opacity: pulse
-      }]
+      style: pulseStyle
     })
   });
 });

package/lib/module/modules/skeleton/Skeleton.variants.js

@@ -90,12 +90,16 @@ export function resolveSkeletonColors(colors) {
  * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
  * testable without a renderer (same shape as `resolveAvatarAccessibility`):
  *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
- *    meaning of its own, so it is hidden from assistive tech (`accessibilityElementsHidden` on
- *    iOS + `importantForAccessibility="no-hide-descendants"` on Android) rather than read as a
- *    bare, unexplained box.
+ *    meaning of its own, so it is hidden from assistive tech rather than read as a bare,
+ *    unexplained box.
  *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
  *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
  *    appearing on screen).
+ *
+ * `aria-hidden` covers BOTH platforms in one prop: RN maps it onto `accessibilityElementsHidden`
+ * (iOS) + `importantForAccessibility="no-hide-descendants"` (Android), and react-native-web forwards
+ * it to the DOM — where those two native props reach nothing, so an unlabelled skeleton used to stay
+ * fully exposed to a screen reader on web.
  */
 export function resolveSkeletonAccessibility(input) {
   const hasLabel = input.accessibilityLabel !== undefined && input.accessibilityLabel.length > 0;
@@ -103,11 +107,8 @@ export function resolveSkeletonAccessibility(input) {
     accessible: hasLabel,
     accessibilityRole: hasLabel ? "progressbar" : undefined,
     accessibilityLabel: hasLabel ? input.accessibilityLabel : undefined,
-    accessibilityState: hasLabel ? {
-      busy: true
-    } : undefined,
-    accessibilityElementsHidden: !hasLabel,
-    importantForAccessibility: hasLabel ? "auto" : "no-hide-descendants"
+    "aria-busy": hasLabel ? true : undefined,
+    "aria-hidden": hasLabel ? undefined : true
   };
 }