pixelize-native-library 1.0.7 → 1.2.1

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

@@ -1,78 +1,87 @@
 "use strict";
 
 /**
- * Skeleton — a loading placeholder box that shimmers while the real content it stands in for is
- * still on its way. It is its own size (`width`/`height` are component-owned props, not
- * `LayoutStyle` — sizing IS the point of this component) and has exactly one neutral appearance:
- * a resting `bg.sunken` fill cross-faded with a fixed-alpha `fg.default` overlay composited over it
- * (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`).
+ * Skeleton — a loading placeholder with a translating highlight-band shimmer over a neutral base.
  */
 
-import { memo, useEffect, useRef } from "react";
-import { Animated, StyleSheet } from "react-native";
+import { memo, useEffect, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { Easing, ReduceMotion, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
 import { useReducedMotion } from "../../core/a11y/index.js";
-import { useTheme } from "../../theme/index.js";
-import { resolveSkeletonAccessibility, resolveSkeletonColors, resolveSkeletonSize, skeletonStructure } from "./Skeleton.variants.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveSkeletonAccessibility, resolveSkeletonColors, resolveSkeletonSize, SKELETON_BAND_WIDTH_RATIO, SKELETON_SHIMMER_DURATION_MS, SKELETON_STAGGER_MS, 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,
   height,
+  staggerIndex = 0,
   accessibilityLabel,
   style,
   testID
 }) {
   const theme = useTheme();
   const reducedMotion = useReducedMotion();
-  const pulse = useRef(new Animated.Value(0)).current;
+  const translateX = useSharedValue(0);
   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.palette), [theme.palette]);
+  const shimmer = !reducedMotion;
+  const bandWidth = size.width * SKELETON_BAND_WIDTH_RATIO;
   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 || size.width <= 0) {
+      translateX.value = 0;
+      return undefined;
+    }
+    const travel = size.width + bandWidth;
+    const delay = staggerIndex * SKELETON_STAGGER_MS;
+    translateX.value = -bandWidth;
+    translateX.value = withDelay(delay, withRepeat(withTiming(travel, {
+      duration: SKELETON_SHIMMER_DURATION_MS,
+      easing: Easing.linear,
+      reduceMotion: ReduceMotion.System
+    }), -1, false));
+    return undefined;
+  }, [shimmer, size.width, bandWidth, staggerIndex, translateX]);
+  const rootStyle = useMemo(() => [skeletonStructure(theme, {
+    shape
+  }), {
+    width: size.width,
+    height: size.height,
+    backgroundColor: colors.base
+  }, style], [theme, shape, size.width, size.height, colors.base, style]);
+  const bandStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }));
+  const highlightStaticStyle = useMemo(() => ({
+    width: bandWidth,
+    height: size.height,
+    backgroundColor: colors.highlight
+  }), [bandWidth, size.height, colors.highlight]);
   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, {
-      testID: testID === undefined ? undefined : `${testID}-pulse`,
+    "aria-busy": a11y["aria-busy"],
+    "aria-hidden": a11y["aria-hidden"],
+    style: rootStyle,
+    children: shimmer && /*#__PURE__*/_jsx(Animated.View, {
+      testID: testID === undefined ? undefined : `${testID}-shimmer`,
       pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: colors.pulse,
-        opacity: pulse
-      }]
+      style: [styles.band, highlightStaticStyle, bandStyle]
     })
   });
 });
+const styles = StyleSheet.create({
+  band: {
+    position: "absolute",
+    top: 0,
+    left: 0
+  }
+});
 //# sourceMappingURL=Skeleton.js.map

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

@@ -3,28 +3,8 @@
 /**
  * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
  * depend on, plus the themed structural variant resolver.
- *
- * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
- *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
- *    static per (brand, mode), registered once via `StyleSheet.create`.
- *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
- *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
- *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
- *    since there is no closed set of values to register.
- *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
- *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
- *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
- *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
- *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
- *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
- *    unless labelled" contract is unit-testable without rendering React Native (same shape as
- *    `resolveAvatarAccessibility`).
- *
- * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
- * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
 
-import { compositeOver } from "../../theme/tokens/builders/color.js";
 import { createThemedVariants } from "../../core/style/index.js";
 /** Fallback dp size per shape, used whenever the caller gives neither `width` nor `height`. */
 export const SKELETON_DEFAULT_SIZE = {
@@ -42,12 +22,10 @@ export const SKELETON_DEFAULT_SIZE = {
   }
 };
 
-/**
- * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
- * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
- * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
- * silently drifting apart.
- */
+// Ambient loop, not a one-shot transition — deliberately outside `MOTION_DURATION`; see MODULE.md.
+export const SKELETON_SHIMMER_DURATION_MS = 1400;
+export const SKELETON_BAND_WIDTH_RATIO = 0.4;
+export const SKELETON_STAGGER_MS = 100;
 export function resolveSkeletonSize(shape, width, height) {
   const fallback = SKELETON_DEFAULT_SIZE[shape];
   if (shape === "circle") {
@@ -62,65 +40,28 @@ export function resolveSkeletonSize(shape, width, height) {
     height: height ?? fallback.height
   };
 }
-// Fixed-alpha overlay composited onto `base` (Button's `PRESS_SCRIM_DARK`/`LIGHT` precedent for "I
-// need a guaranteed visible delta, not a role lookup"). `fg.default` is dark in light mode and light
-// in dark mode, so compositing it darkens/lightens `base` for free with no `if (dark)` branch. ~30%
-// alpha keeps the composited contrast ratio ≥ `MIN_PULSE_CONTRAST` (see `Skeleton.test.ts`) on every
-// brand × mode, with comfortable headroom above the floor.
-const PULSE_OVERLAY_ALPHA_HEX = "4d"; // 0x4d / 0xff ≈ 30%
-
-/**
- * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
- * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
- * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
- * an independent re-measurement found that gap collapses to visually-indistinguishable on every
- * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
- * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
- * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
- */
-export function resolveSkeletonColors(colors) {
-  const base = colors.bg.sunken;
-  const pulse = compositeOver(`${colors.fg.default}${PULSE_OVERLAY_ALPHA_HEX}`, base);
+/** Neutral ramp step 3 (base) and step 5 (highlight band) on the gray ramp. */
+export function resolveSkeletonColors(palette) {
   return {
-    base,
-    pulse
+    base: palette.gray[300],
+    highlight: palette.gray[500]
   };
 }
-/**
- * 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.
- *  - 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).
- */
+
+/** @deprecated Use palette-based resolver — kept for tests importing RoleColors. */
+export function resolveSkeletonColorsFromRoles(_colors, palette) {
+  return resolveSkeletonColors(palette);
+}
 export function resolveSkeletonAccessibility(input) {
   const hasLabel = input.accessibilityLabel !== undefined && input.accessibilityLabel.length > 0;
   return {
     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
   };
 }
-
-/**
- * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
- * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
- * shape recomputing the same radius on that overlay. No colour (state-driven, applied inline over
- * this), so this compiles once per theme identity via the `WeakMap`-cached themed resolver and
- * never rebuilds per render.
- *
- * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
- * "hidden"` is safe — nothing else needs to be drawn outside this box.
- */
 export const skeletonStructure = createThemedVariants(theme => ({
   base: {
     overflow: "hidden"
@@ -128,10 +69,12 @@ export const skeletonStructure = createThemedVariants(theme => ({
   variants: {
     shape: {
       rect: {
-        borderRadius: theme.radii.base
+        borderRadius: theme.radii.md,
+        borderCurve: "continuous"
       },
       circle: {
-        borderRadius: theme.radii.full
+        borderRadius: theme.radii.full,
+        borderCurve: "continuous"
       },
       text: {
         borderRadius: theme.radii.sm

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

@@ -9,7 +9,7 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 | File | Role |
 |------|------|
 | `Slider.tsx` | The component. `PanResponder` wiring, layout measurement, accessibility actions. |
-| `Slider.variants.ts` | Pure drag math (`resolveSliderPositionValue`, `snapSliderValue`, `stepSliderValue`, …), colour resolvers, accessibility resolver, and the `createThemedVariants` structural resolvers. No React, no PanResponder. |
+| `Slider.variants.ts` | Pure drag math (`resolveSliderPositionValue`, `snapSliderValue`, `stepSliderValue`, …), the keyboard map (`resolveSliderKeyValue`, `sliderPageStep`), colour resolvers, accessibility resolver, and the `createThemedVariants` structural resolvers. No React, no PanResponder. |
 | `index.ts` | Public surface: `Slider`, `SliderProps`, `SliderSize`. |
 | `__tests__/Slider.test.ts` | Pure: WCAG contrast (all brands × modes) + drag-math/step/accessibility contracts. |
 | `__tests__/Slider.render.test.tsx` | Render: layout-driven positioning, the REAL `PanResponder` gesture fired end-to-end, increment/decrement actions, disabled. |
@@ -27,7 +27,7 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 | `size` | `sm \| md` | `md` | Closed union — track height + thumb diameter. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once. No `width`/`fullWidth` prop — the row stretches to its container by RN's default `alignItems: stretch`, same as `ProgressBar`. |
 | `accessibilityLabel` | `string` | — | **Required** — the control structurally never renders visible text, so this is the only accessible name a screen reader has (mirrors `Switch`'s and `Button`'s icon-only contract). |
-| `testID` | `string` | — | Also stamps `${testID}-fill` and `${testID}-thumb`. |
+| `testID` | `string` | — | Also stamps `${testID}-fill`, `${testID}-thumb`, and `${testID}-focus-ring` (present only while focused). |
 
 ## Two design choices (spec left these open — documented here)
 
@@ -45,6 +45,20 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 
 ## Accessibility contract (WCAG)
 
+- **2.1.1 (keyboard)** — the root sets `tabIndex={disabled ? -1 : 0}` (plus `focusable` for
+  native/TV) and handles `onKeyDown`. Both are load-bearing: RNW emits a `tabIndex` only for an
+  explicit `tabIndex`/`focusable`, a natively-focusable tag, or a role in
+  `button|checkbox|link|radio|textbox|switch`. `accessibilityRole="adjustable"` maps to
+  `role="slider"`, which is in none of them — and RNW does not forward RN's `accessible` prop at all
+  — so before this the control could not be reached by Tab, and `accessibilityActions` (a
+  screen-reader gesture) was the only non-pointer path. Keys, via `resolveSliderKeyValue`:
+  Left/Down decrement and Right/Up increment by `step`, Home/End jump to `min`/`max`, PageDown/PageUp
+  move by `sliderPageStep` (the whole number of steps nearest a tenth of the range, never fewer than
+  one). Every one of them fires `onSlidingComplete`, and calls `preventDefault` so the page does not
+  scroll instead. RN's TypeScript `ViewPropTypes.d.ts` omits `onKeyDown` (its Flow types declare it),
+  so the root `View` is re-typed once, locally, in `Slider.tsx`.
+- **2.4.7 (focus visible)** — Button's `border.focus` ring, drawn a 2dp gap OUTSIDE the row (nothing
+  clips the slider), rendered only while focused and never while disabled.
 - **2.5.7 (dragging movements)** — `accessibilityRole="adjustable"` with `accessibilityActions`
   declaring `increment`/`decrement` and `onAccessibilityAction` adjusting `value` by `step`, clamped.
   iOS's `adjustable` trait already offers these via the two-finger swipe gesture without the actions
@@ -65,8 +79,12 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
     actually carries the boundary, not the 2dp ring.
 - **2.3.3 (reduced motion)** — N/A. No animation: the thumb's position is a direct function of
   `value`, never an eased/animated transition.
-- `accessibilityValue={{ min, max, now }}` — `now` is clamped onto `[min, max]` even if a caller
-  passes an out-of-range `value`, so a screen reader never announces something the track can't render.
+- Flat `aria-valuemin`/`aria-valuemax`/`aria-valuenow`, not `accessibilityValue={{…}}` —
+  react-native-web 0.21 drops the object form, so this used to announce `role="slider"` with no
+  position on web. The host here is a `View`, which merges the flat props into `accessibilityValue`
+  natively, so one form is correct on both platforms. `aria-valuenow` is clamped onto `[min, max]`
+  even if a caller passes an out-of-range `value`, so a screen reader never announces something the
+  track can't render. Proven on the real DOM by `__tests__/Slider.dom.test.tsx`.
 
 ## Patterns
 
@@ -88,8 +106,18 @@ primitive" philosophy `Modal`/`Select` already apply to RN's raw `<Modal>`.
 
 ## Known gaps
 
-None.
+- The thumb does not move under an active drag on a keyboard-only device — that is by design (there
+  is no drag), but it also means `onSlidingComplete` fires per keystroke rather than once per
+  "gesture", so a consumer that persists on every completion will write once per arrow press.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `applyTouch`/`handleLayout`/`handleAccessibilityAction` are only wired to the root `View`'s host props, never handed to a library child component — 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/slider/Slider.js

@@ -21,9 +21,19 @@
 
 import { memo, useRef, useState } from "react";
 import { PanResponder, StyleSheet, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
-import { resolveSliderAccessibility, resolveSliderPositionValue, resolveSliderThumbColors, resolveSliderTrackColors, sliderFillStructure, sliderRowStructure, SLIDER_HIT_SLOP, SLIDER_SIZES, sliderThumbStructure, sliderTrackStructure, sliderValueToFraction, stepSliderValue } from "./Slider.variants.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveSliderAccessibility, resolveSliderKeyValue, resolveSliderPositionValue, resolveSliderThumbColors, resolveSliderTrackColors, sliderFillStructure, sliderRowStructure, SLIDER_HIT_SLOP, SLIDER_SIZES, sliderThumbStructure, sliderTrackStructure, sliderValueToFraction, stepSliderValue } from "./Slider.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RN's Flow `ViewProps` declares `onKeyDown` and react-native-web forwards it straight to the DOM
+ * node, but RN's TypeScript `ViewPropTypes.d.ts` omits it — this re-type is the only cast here.
+ */
+const KeyboardView = View;
+
+// Same offset ring as Button: `border.focus` a small gap OUTSIDE the control, on the canvas, which
+// is the surface that role token is proven ≥ 3:1 against (WCAG 2.4.11).
+const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_GAP = 2;
 export const Slider = /*#__PURE__*/memo(function Slider(props) {
   const {
     value,
@@ -40,6 +50,8 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
   } = props;
   const theme = useTheme();
   const [trackWidth, setTrackWidth] = useState(0);
+  // Keyboard / external-keyboard / TV-remote focus (no-op on pure touch, correct everywhere else).
+  const [focused, setFocused] = useState(false);
 
   // The PanResponder callbacks below are created ONCE (see `useState` lazy init further down) and
   // must never close over a stale render's props. Reassigning a ref's `.current` in the render body
@@ -110,6 +122,13 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
     setTrackWidth(event.nativeEvent.layout.width);
   };
 
+  /** One non-drag adjustment: report it, then mirror a drag's release. */
+  const commitValue = next => {
+    const state = live.current;
+    state.onValueChange(next);
+    state.onSlidingComplete?.(next);
+  };
+
   // WCAG 2.5.7 — the non-drag alternative. iOS's `adjustable` trait already offers increment/decrement
   // via the two-finger swipe gesture; Android TalkBack needs them declared as `accessibilityActions`
   // (below) to surface them at all.
@@ -120,19 +139,42 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
       actionName
     } = event.nativeEvent;
     if (actionName !== "increment" && actionName !== "decrement") return;
-    const next = stepSliderValue(state.value, actionName === "increment" ? 1 : -1, state.min, state.max, state.step);
-    state.onValueChange(next);
-    state.onSlidingComplete?.(next);
+    commitValue(stepSliderValue(state.value, actionName === "increment" ? 1 : -1, state.min, state.max, state.step));
+  };
+
+  // WCAG 2.1.1 — the sighted keyboard user's only path in. `accessibilityActions` above is a
+  // screen-reader gesture, so without this the control is operable by pointer alone.
+  const handleKeyDown = event => {
+    const state = live.current;
+    if (state.disabled) return;
+    const next = resolveSliderKeyValue(event.nativeEvent.key, state);
+    if (next === undefined) return;
+    // Arrow/Page/Home/End would otherwise scroll the page out from under the control.
+    event.preventDefault?.();
+    commitValue(next);
   };
-  return /*#__PURE__*/_jsxs(View, {
+  const handleFocus = () => setFocused(true);
+  const handleBlur = () => setFocused(false);
+  return /*#__PURE__*/_jsxs(KeyboardView, {
     testID: testID,
     accessible: true,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: accessibilityLabel,
-    accessibilityValue: a11y.accessibilityValue,
-    accessibilityState: a11y.accessibilityState,
+    "aria-valuemin": a11y["aria-valuemin"],
+    "aria-valuemax": a11y["aria-valuemax"],
+    "aria-valuenow": a11y["aria-valuenow"],
+    "aria-disabled": a11y["aria-disabled"],
     accessibilityActions: a11y.accessibilityActions,
-    onAccessibilityAction: handleAccessibilityAction,
+    onAccessibilityAction: handleAccessibilityAction
+    // RNW emits `tabIndex` only for an explicit one, an explicit `focusable`, a natively-focusable
+    // tag, or roles in button|checkbox|link|radio|textbox|switch — `adjustable` maps to
+    // `role="slider"`, which is in none of them, so without this Tab skips the control entirely.
+    ,
+    tabIndex: disabled ? -1 : 0,
+    focusable: !disabled,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     onLayout: handleLayout,
     onStartShouldSetResponder: panResponder.panHandlers.onStartShouldSetResponder,
     onMoveShouldSetResponder: panResponder.panHandlers.onMoveShouldSetResponder,
@@ -145,7 +187,15 @@ export const Slider = /*#__PURE__*/memo(function Slider(props) {
     style: [sliderRowStructure(theme, {
       size
     }), disabled && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsx(View, {
+    children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-focus-ring`,
+      style: [styles.focusRing, {
+        borderColor: theme.colors.border.focus,
+        borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+        borderCurve: "continuous"
+      }]
+    }), /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       style: [sliderTrackStructure(theme, {
         size
@@ -178,6 +228,14 @@ const styles = StyleSheet.create({
   // — the same treatment `Button`/`Checkbox`/`NumberInput` use.
   dimmed: {
     opacity: 0.5
+  },
+  focusRing: {
+    position: "absolute",
+    top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    borderWidth: FOCUS_RING_WIDTH
   }
 });
 //# sourceMappingURL=Slider.js.map

package/lib/module/modules/slider/Slider.variants.js

@@ -109,6 +109,51 @@ export function resolveSliderPositionValue(input) {
 export function stepSliderValue(value, direction, min, max, step) {
   return clampSliderValue(value + direction * step, min, max);
 }
+
+/** How much of the range PageUp/PageDown cover, before rounding onto a whole number of `step`s. */
+export const SLIDER_PAGE_FRACTION = 0.1;
+
+/**
+ * The coarse PageUp/PageDown amount — the whole number of `step`s nearest a tenth of the range,
+ * never fewer than one, so a 0–5 slider still pages by `step` instead of rounding down to zero.
+ */
+export function sliderPageStep(min, max, step) {
+  const safeStep = step > 0 ? step : 1;
+  const range = max - min;
+  if (range <= 0) return safeStep;
+  return Math.max(1, Math.round(range * SLIDER_PAGE_FRACTION / safeStep)) * safeStep;
+}
+/**
+ * The WAI-ARIA slider keyboard contract, resolved purely: Left/Down decrement and Right/Up increment
+ * by `step`, Home/End jump to the bounds, PageDown/PageUp move by `sliderPageStep`. Returns
+ * `undefined` for any other key, which is also how the caller knows not to swallow that keystroke.
+ */
+export function resolveSliderKeyValue(key, input) {
+  const {
+    value,
+    min,
+    max,
+    step
+  } = input;
+  switch (key) {
+    case "ArrowLeft":
+    case "ArrowDown":
+      return stepSliderValue(value, -1, min, max, step);
+    case "ArrowRight":
+    case "ArrowUp":
+      return stepSliderValue(value, 1, min, max, step);
+    case "Home":
+      return clampSliderValue(min, min, max);
+    case "End":
+      return clampSliderValue(max, min, max);
+    case "PageDown":
+      return stepSliderValue(value, -1, min, max, sliderPageStep(min, max, step));
+    case "PageUp":
+      return stepSliderValue(value, 1, min, max, sliderPageStep(min, max, step));
+    default:
+      return undefined;
+  }
+}
 /**
  * Maps the track's two colours onto ROLE tokens — never a raw ramp or a hardcoded hex. `fill` is
  * `accent.text`, NOT the seemingly-obvious `accent.solid`: measured, `accent.solid` against
@@ -146,23 +191,25 @@ export function resolveSliderThumbColors(colors) {
 }
 /**
  * Derives the accessibility surface once, purely, so the contract is testable without a renderer.
- * `now` is clamped onto `[min, max]` — a screen reader must never announce a value the track itself
- * couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement` explicitly: iOS's
- * `adjustable` trait already offers these via the two-finger swipe-up/down gesture without them
- * declared, but Android TalkBack has no native "adjustable" gesture and only surfaces custom actions
- * that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer alternative otherwise).
+ * `aria-valuenow` is clamped onto `[min, max]` — a screen reader must never announce a value the
+ * track itself couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement`
+ * explicitly: iOS's `adjustable` trait already offers these via the two-finger swipe-up/down gesture
+ * without them declared, but Android TalkBack has no native "adjustable" gesture and only surfaces
+ * custom actions that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer
+ * alternative otherwise).
+ *
+ * FLAT `aria-*`, not `accessibilityValue={{…}}`/`accessibilityState={{…}}`: react-native-web 0.21
+ * drops both objects, so on web the slider announced its role and NO position at all. The host here
+ * is a `View`, which merges every flat prop into the object form natively (`View.js`), so one flat
+ * form is right on both platforms.
  */
 export function resolveSliderAccessibility(input) {
   return {
     accessibilityRole: "adjustable",
-    accessibilityValue: {
-      min: input.min,
-      max: input.max,
-      now: clampSliderValue(input.value, input.min, input.max)
-    },
-    accessibilityState: {
-      disabled: input.disabled === true
-    },
+    "aria-valuemin": input.min,
+    "aria-valuemax": input.max,
+    "aria-valuenow": clampSliderValue(input.value, input.min, input.max),
+    "aria-disabled": input.disabled === true,
     accessibilityActions: [{
       name: "increment"
     }, {

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

@@ -41,12 +41,16 @@ the scale lives on the child, never the box.
 ## Accessibility contract (WCAG)
 
 - **The OUTER box, not the glyph, carries the whole contract** — `accessibilityRole="progressbar"`,
-  the accessible name (`accessibilityLabel ?? "Loading"`), and `accessibilityState={{ busy: true }}`
-  (1.4.1 — the loading state is announced, not left to be inferred from a shape appearing on
-  screen). The inner `ActivityIndicator` is `accessibilityElementsHidden` +
-  `importantForAccessibility="no-hide-descendants"` — decorative chrome, exactly how `Button` treats
-  its own embedded loading spinner, so a screen reader announces ONE "Loading" node, never a nested
-  second element.
+  the accessible name (`accessibilityLabel ?? "Loading"`), and `aria-busy={true}` (1.4.1 — the
+  loading state is announced, not left to be inferred from a shape appearing on screen). The inner
+  `ActivityIndicator` is `aria-hidden` — decorative chrome, exactly how `Button` treats its own
+  embedded loading spinner, so a screen reader announces ONE "Loading" node, never a nested second
+  element.
+- **Flat `aria-*`, not `accessibilityState`/`accessibilityElementsHidden`+`importantForAccessibility`**
+  — react-native-web 0.21.2 forwards only the flat vocabulary to the DOM; the object form and the two
+  native-only hiding props reach nothing on web (`accessibilityHint` has zero occurrences in RNW's
+  dist). `aria-hidden={true}` alone covers both platforms: RN's `View` maps it onto
+  `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"` for native.
 - **1.4.11 (Graphical Objects)** — a spinner is a graphical object required to understand that work
   is ongoing, so both tones are measured ≥ 3:1 against `bg.canvas`, `bg.surface`, AND `bg.raised` on
   all 8 brands × both modes (`Spinner.test.ts`) — never eyeballed.
@@ -95,3 +99,9 @@ None — no icon, no new theme token, no new core helper needed for this compone
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only child is `ActivityIndicator` (RN host primitive) receiving primitives/plain style values — 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.