pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/stage-progress/StageProgress.js

@@ -6,24 +6,88 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
-import { resolveActiveStageIndex, resolveStageAccessibilityLabel, resolveStageAccessibilityState, resolveStageProgressAccessibility, resolveStageProgressColors, resolveStageState, stageBarStructure, stageFocusRingStructure, stagePillStructure, stageProgressRowStructure, stageStepperCircleStructure, STAGE_PILL_HIT_SLOP, STAGE_STEPPER_HIT_SLOP } from "./StageProgress.variants.js";
+import { Spinner } from "../spinner/index.js";
+import { resolveActiveStageIndex, resolveStageAccessibilityLabel, resolveStageAccessibilityState, resolveStagePillLayout, resolveStageProgressAccessibility, resolveStageProgressColors, resolveStageState, STAGE_PROGRESS_SIZES, stageBarStructure, stageFocusRingStructure, stagePillStructure, stageProgressRowStructure, stageStepperCircleStructure, STAGE_PILL_HIT_SLOP, STAGE_STEPPER_HIT_SLOP } from "./StageProgress.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function fillFor(state, palette) {
+  if (state === "active") return palette.activeFill;
+  return state === "completed" ? palette.completedFill : palette.upcomingFill;
+}
+function textFor(state, palette) {
+  if (state === "active") return palette.activeText;
+  return state === "completed" ? palette.completedText : palette.upcomingText;
+}
+const StagePressable = /*#__PURE__*/memo(function StagePressable({
+  disabled,
+  a11yLabel,
+  a11yState,
+  hitSlop,
+  focusRingStyle,
+  focusRingTestID,
+  focused,
+  onPress,
+  onFocus,
+  onBlur,
+  children
+}) {
+  const theme = useTheme();
+  const press = usePressState(disabled);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: true
+    };
+  }, [theme.mode, disabled]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    "aria-current": a11yState["aria-current"],
+    accessibilityState: a11yState.accessibilityState,
+    "aria-disabled": a11yState["aria-disabled"],
+    hitSlop: hitSlop,
+    android_ripple: androidRipple,
+    onPress: onPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    style: press.animatedStyle,
+    children: [focused && /*#__PURE__*/_jsx(View, {
+      testID: focusRingTestID,
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
+    }), children]
+  });
+});
 export const StageProgress = /*#__PURE__*/memo(function StageProgress({
   stages,
   value,
   variant = "pills",
+  size = "md",
+  colorScheme = "default",
+  isLoading = false,
+  minStageWidth,
   readOnly = true,
   onStagePress,
   style,
   testID
 }) {
   const theme = useTheme();
-  const palette = resolveStageProgressColors(theme.colors);
+  const palette = resolveStageProgressColors(theme.colors, colorScheme);
+  const sizeSpec = STAGE_PROGRESS_SIZES[size];
+  const pillLayout = useMemo(() => resolveStagePillLayout(theme, size, minStageWidth), [theme, size, minStageWidth]);
   const activeIndex = resolveActiveStageIndex(stages, value);
-  // Which interactive stage holds keyboard/AT focus. One value rather than per-stage state: only one
-  // stage can be focused, and the stages are rendered inline (a hook per stage is not an option).
+  // Which interactive stage holds keyboard/AT focus — one value, since only one stage can be focused.
   const [focusedStageId, setFocusedStageId] = useState(null);
   const handlePress = useCallback((stageId, disabled) => {
     if (readOnly || disabled || onStagePress === undefined) return;
@@ -33,13 +97,12 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
     if (variant === "bar") {
       return stages.map((stage, index) => {
         const state = resolveStageState(index, activeIndex, true);
-        const fill = state === "active" ? palette.activeFill : state === "completed" ? palette.completedFill : palette.upcomingFill;
         // No label per segment: the container announces the whole track as one progressbar
         // (`resolveStageProgressAccessibility`), so a per-segment label would read four times over.
         return /*#__PURE__*/_jsx(View, {
           testID: testID ? `${testID}-bar-${stage.id}` : undefined,
           style: [stageBarStructure(theme), {
-            backgroundColor: fill
+            backgroundColor: fillFor(state, palette)
           }]
         }, stage.id);
       });
@@ -47,29 +110,27 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
     if (variant === "stepper") {
       return stages.map((stage, index) => {
         const state = resolveStageState(index, activeIndex, true);
-        const fill = state === "active" ? palette.activeFill : state === "completed" ? palette.completedFill : palette.upcomingFill;
-        const text = state === "active" ? palette.activeText : state === "completed" ? palette.completedText : palette.upcomingText;
         const node = /*#__PURE__*/_jsxs(View, {
           style: {
             alignItems: "center",
             minWidth: 64
           },
           children: [/*#__PURE__*/_jsx(View, {
-            style: [stageStepperCircleStructure(theme), {
-              backgroundColor: fill,
-              borderColor: palette.track
+            testID: testID ? `${testID}-stepper-${stage.id}` : undefined,
+            style: [stageStepperCircleStructure(theme), theme.elevation.sm, {
+              backgroundColor: fillFor(state, palette)
             }],
             children: /*#__PURE__*/_jsx(Text, {
               style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-                fontSize: theme.fontSizes.sm,
-                color: text
+                fontSize: sizeSpec.labelFontSize,
+                color: textFor(state, palette)
               }],
               children: index + 1
             })
           }), /*#__PURE__*/_jsx(Text, {
             numberOfLines: 1,
             style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-              fontSize: theme.fontSizes.xs,
+              fontSize: sizeSpec.stepLabelFontSize,
               color: palette.upcomingText,
               marginTop: theme.space[1]
             }],
@@ -78,89 +139,105 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
         });
         const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
         const a11yState = resolveStageAccessibilityState(state, stage.disabled);
-        if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+        if (readOnly || stage.disabled || onStagePress === undefined) return /*#__PURE__*/_jsx(View, {
           accessible: true,
           accessibilityLabel: a11yLabel,
-          "aria-selected": a11yState["aria-selected"],
+          "aria-current": a11yState["aria-current"],
+          accessibilityState: a11yState.accessibilityState,
           "aria-disabled": a11yState["aria-disabled"],
           children: node
         }, stage.id);
-        return /*#__PURE__*/_jsxs(Pressable, {
-          accessibilityRole: "button",
-          accessibilityLabel: a11yLabel,
-          "aria-selected": a11yState["aria-selected"],
-          "aria-disabled": a11yState["aria-disabled"],
+        return /*#__PURE__*/_jsx(StagePressable, {
+          disabled: false,
+          a11yLabel: a11yLabel,
+          a11yState: a11yState,
           hitSlop: STAGE_STEPPER_HIT_SLOP,
+          focused: focusedStageId === stage.id,
+          focusRingTestID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
+          focusRingStyle: [stageFocusRingStructure(theme, {
+            variant: "stepper"
+          }), {
+            borderColor: theme.colors.border.focus
+          }],
           onPress: () => handlePress(stage.id, stage.disabled),
           onFocus: () => setFocusedStageId(stage.id),
           onBlur: () => setFocusedStageId(current => current === stage.id ? null : current),
-          children: [focusedStageId === stage.id && /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
-            testID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
-            style: [stageFocusRingStructure(theme, {
-              variant: "stepper"
-            }), {
-              borderColor: theme.colors.border.focus
-            }]
-          }), node]
+          children: node
         }, stage.id);
       });
     }
-    return stages.map((stage, index) => {
+    const renderPill = (stage, index, keyPrefix) => {
       const state = resolveStageState(index, activeIndex, true);
-      const fill = state === "active" ? palette.activeFill : state === "completed" ? palette.completedFill : palette.upcomingFill;
-      const text = state === "active" ? palette.activeText : state === "completed" ? palette.completedText : palette.upcomingText;
+      const showSpinner = isLoading && state === "active";
       const pill = /*#__PURE__*/_jsx(View, {
-        testID: testID ? `${testID}-pill-${stage.id}` : undefined,
-        style: [stagePillStructure(theme), {
-          backgroundColor: fill,
-          borderColor: palette.track
+        testID: testID ? `${testID}-${keyPrefix}-${stage.id}` : undefined,
+        style: [stagePillStructure(theme), pillLayout, theme.elevation.sm, {
+          backgroundColor: fillFor(state, palette)
         }],
-        children: /*#__PURE__*/_jsx(Text, {
+        children: showSpinner ? /*#__PURE__*/_jsx(Spinner, {
+          size: "sm",
+          testID: testID ? `${testID}-${keyPrefix}-${stage.id}-loading` : undefined
+        }) : /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: theme.fontSizes.sm,
-            color: text
+            fontSize: sizeSpec.labelFontSize,
+            color: textFor(state, palette)
           }],
           children: stage.label
         })
       });
       const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
       const a11yState = resolveStageAccessibilityState(state, stage.disabled);
-      if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+      if (readOnly || stage.disabled || onStagePress === undefined) return /*#__PURE__*/_jsx(View, {
         accessible: true,
         accessibilityLabel: a11yLabel,
-        "aria-selected": a11yState["aria-selected"],
+        "aria-current": a11yState["aria-current"],
+        accessibilityState: a11yState.accessibilityState,
         "aria-disabled": a11yState["aria-disabled"],
         children: pill
       }, stage.id);
-      return /*#__PURE__*/_jsxs(Pressable, {
-        accessibilityRole: "button",
-        accessibilityLabel: a11yLabel,
-        "aria-selected": a11yState["aria-selected"],
-        "aria-disabled": a11yState["aria-disabled"],
+      return /*#__PURE__*/_jsx(StagePressable, {
+        disabled: false,
+        a11yLabel: a11yLabel,
+        a11yState: a11yState,
         hitSlop: STAGE_PILL_HIT_SLOP,
+        focused: focusedStageId === stage.id,
+        focusRingTestID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
+        focusRingStyle: [stageFocusRingStructure(theme, {
+          variant: "pill"
+        }), {
+          borderColor: theme.colors.border.focus
+        }],
         onPress: () => handlePress(stage.id, stage.disabled),
         onFocus: () => setFocusedStageId(stage.id),
         onBlur: () => setFocusedStageId(current => current === stage.id ? null : current),
-        children: [focusedStageId === stage.id && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          testID: testID ? `${testID}-focus-ring-${stage.id}` : undefined,
-          style: [stageFocusRingStructure(theme, {
-            variant: "pill"
-          }), {
-            borderColor: theme.colors.border.focus
-          }]
-        }), pill]
+        children: pill
       }, stage.id);
-    });
-  }, [stages, variant, activeIndex, palette, theme, testID, readOnly, handlePress, focusedStageId]);
+    };
+    if (variant === "chevron") {
+      return stages.map((stage, index) => /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[1]
+        },
+        children: [renderPill(stage, index, "chevron-pill"), index < stages.length - 1 ? /*#__PURE__*/_jsx(Icon, {
+          name: "chevron-right",
+          size: 16,
+          color: palette.upcomingText,
+          strokeWidth: 2
+        }) : null]
+      }, stage.id));
+    }
+    return stages.map((stage, index) => renderPill(stage, index, "pill"));
+  }, [stages, variant, activeIndex, palette, theme, testID, readOnly, onStagePress, handlePress, focusedStageId, sizeSpec, pillLayout, isLoading]);
 
   // Only the `bar` variant collapses into one announcement — `pills`/`stepper` render real text per
   // stage, and swallowing it behind a container summary would lose the per-stage labels.
   const barA11y = variant === "bar" ? resolveStageProgressAccessibility(stages, activeIndex) : null;
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
+    "aria-busy": isLoading ? true : undefined,
     accessible: barA11y !== null,
     accessibilityRole: barA11y?.accessibilityRole,
     "aria-valuemin": barA11y?.["aria-valuemin"],

package/lib/module/modules/stage-progress/StageProgress.variants.js

@@ -1,10 +1,25 @@
 "use strict";
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
+export { MIN_TOUCH_TARGET };
+export const STAGE_PROGRESS_SIZES = {
+  sm: {
+    labelFontSize: 12,
+    stepLabelFontSize: 10,
+    pillMinWidth: 56
+  },
+  md: {
+    labelFontSize: 14,
+    stepLabelFontSize: 12,
+    pillMinWidth: 72
+  },
+  lg: {
+    labelFontSize: 16,
+    stepLabelFontSize: 14,
+    pillMinWidth: 88
+  }
+};
 /**
  * Floor for the pill's height. The pill sizes itself from padding + its label's font metrics, so
  * without a floor there is no number the touch-target maths can be proven against; pinned here at
@@ -55,13 +70,16 @@ export function resolveStageAccessibilityLabel(label, state) {
   return `${label}, ${STATE_SUFFIX[state]}`;
 }
 /**
- * Flat `aria-*` rather than `accessibilityState={{…}}`: RN's `View`/`Pressable` fold the flat props
- * back into that object, while react-native-web forwards only the flat form — the object reaches
- * nothing at all on web.
+ * Flat `aria-current` for web + explicit `accessibilityState` for native — see the field comments
+ * above for why this pair (not a single flat prop) is required here specifically.
  */
 export function resolveStageAccessibilityState(state, disabled) {
+  const active = state === "active";
   return {
-    "aria-selected": state === "active",
+    "aria-current": active ? "step" : undefined,
+    accessibilityState: {
+      selected: active
+    },
     "aria-disabled": disabled === true
   };
 }
@@ -83,15 +101,24 @@ export function resolveStageProgressAccessibility(stages, activeIndex) {
     accessibilityLabel: summary
   };
 }
-export function resolveStageProgressColors(colors) {
+export function resolveStageProgressColors(colors, colorScheme = "default") {
+  if (colorScheme === "neutral") {
+    return {
+      activeFill: colors.fg.default,
+      activeText: colors.bg.surface,
+      completedFill: colors.bg.sunken,
+      completedText: colors.fg.default,
+      upcomingFill: colors.bg.sunken,
+      upcomingText: colors.fg.muted
+    };
+  }
   return {
     activeFill: colors.accent.solid,
     activeText: colors.accent.onSolid,
     completedFill: colors.status.success.subtle,
     completedText: colors.status.success.text,
     upcomingFill: colors.bg.sunken,
-    upcomingText: colors.fg.muted,
-    track: colors.border.default
+    upcomingText: colors.fg.muted
   };
 }
 export const stageProgressRowStructure = createThemedVariants(theme => ({
@@ -102,13 +129,20 @@ export const stageProgressRowStructure = createThemedVariants(theme => ({
     overflow: "hidden"
   }
 }));
+export function resolveStagePillLayout(theme, size, minStageWidth) {
+  const spec = STAGE_PROGRESS_SIZES[size];
+  const padY = size === "sm" ? theme.space[1] : theme.space[2];
+  const padX = size === "lg" ? theme.space[4] : theme.space[3];
+  return {
+    paddingHorizontal: padX,
+    paddingVertical: padY,
+    minWidth: minStageWidth ?? spec.pillMinWidth
+  };
+}
 export const stagePillStructure = createThemedVariants(theme => ({
   base: {
-    paddingHorizontal: theme.space[3],
-    paddingVertical: theme.space[2],
     borderRadius: theme.radii.full,
-    borderWidth: theme.borderWidths.thin,
-    minWidth: 72,
+    borderCurve: "continuous",
     minHeight: STAGE_PILL_MIN_HEIGHT,
     alignItems: "center",
     justifyContent: "center"
@@ -133,10 +167,12 @@ export const stageFocusRingStructure = createThemedVariants(theme => ({
   variants: {
     variant: {
       pill: {
-        borderRadius: theme.radii.full
+        borderRadius: theme.radii.full,
+        borderCurve: "continuous"
       },
       stepper: {
-        borderRadius: theme.radii.base
+        borderRadius: theme.radii.md,
+        borderCurve: "continuous"
       }
     }
   },
@@ -148,7 +184,8 @@ export const stageBarStructure = createThemedVariants(theme => ({
   base: {
     flex: 1,
     height: 8,
-    borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
   }
 }));
 export const stageStepperCircleStructure = createThemedVariants(theme => ({
@@ -156,9 +193,9 @@ export const stageStepperCircleStructure = createThemedVariants(theme => ({
     width: STAGE_STEPPER_CIRCLE,
     height: STAGE_STEPPER_CIRCLE,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     alignItems: "center",
-    justifyContent: "center",
-    borderWidth: theme.borderWidths.thin
+    justifyContent: "center"
   }
 }));
 //# sourceMappingURL=StageProgress.variants.js.map

package/lib/module/modules/stage-progress/StageProgressProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=StageProgressProps.js.map

package/lib/module/modules/stat-grid/MODULE.md

@@ -0,0 +1,11 @@
+# stat-grid/ — a responsive grid of StatTile metrics
+
+Responsive grid of `StatTile` metrics for dashboards.
+
+## Exports
+
+- `StatGrid` — `items` (`StatGridItem[]`, each `{ label, value }`), `columns` (`2 | 3`, default `2` —
+  cells are `48%` / `31%` wide in a wrapping row), `style` (layout-only, last), `testID` (seeds
+  `${testID}-tile-<index>`)
+- `StatGridItem` — the cell type. A cell renders a plain `StatTile` with label + value only; tone,
+  icon, delta and press are not forwarded.

package/lib/module/modules/stat-grid/StatGrid.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { StatTile } from "../stat-tile/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StatGrid = /*#__PURE__*/memo(function StatGrid({
+  items,
+  columns = 2,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => ({
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.space[3]
+  }), [theme]);
+  const itemWidth = columns === 3 ? "31%" : "48%";
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [rootStyle, style],
+    children: items.map((item, index) => /*#__PURE__*/_jsx(StatTile, {
+      label: item.label,
+      value: item.value,
+      style: {
+        width: itemWidth
+      },
+      testID: testID ? `${testID}-tile-${index}` : undefined
+    }, `${item.label}-${index}`))
+  });
+});
+//# sourceMappingURL=StatGrid.js.map

package/lib/module/modules/stat-grid/StatGridProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=StatGridProps.js.map

package/lib/module/modules/stat-grid/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { StatGrid } from "./StatGrid.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/stat-tile/MODULE.md

@@ -13,6 +13,7 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 | `index.ts` | Public surface: `StatTile`, `StatTileProps`, `StatTileTone`. |
 | `__tests__/StatTile.test.ts` | Pure: WCAG contrast (all brands × modes) + a11y contract. |
 | `__tests__/StatTile.render.test.tsx` | Render: value/label, tones, press, loading skeleton. |
+| `__tests__/StatTile.dom.test.tsx` | Real DOM (`jest.web.config.js`): the flat `aria-busy` reaching the DOM. |
 
 ## Props
 
@@ -24,6 +25,9 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 | `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `accent` | Tints the icon chip only (subtle fills); label/value stay fixed `fg` roles. |
 | `onPress` | `() => void` | — | Makes the tile a `button`-role Pressable with a `bg.sunken` pressed fill (measured — `fg.default` fails AA on `bg.hover` on 4 light brands). |
 | `loading` | `boolean` | `false` | Skeleton in place of the value; announced via `aria-busy` (flat, not `accessibilityState` — see Accessibility). |
+| `delta` | `string` | — | Change vs the prior period, e.g. `"+12%"`. Rendered under the value. |
+| `trend` | `up \| down \| flat` | `flat` | Picks the delta glyph; `flat` is neutral. |
+| `goodDirection` | `up \| down` | `up` | Whether an upward `trend` is good (revenue) or bad (churn) — decides the delta's tone. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Also derives `-icon` / `-skeleton` sub-ids. |
 
@@ -33,13 +37,20 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
   (just `label` while loading, with `aria-busy={true}`). Flat `aria-busy`, not
   `accessibilityState={{ busy }}` — react-native-web 0.21.2 forwards only the flat form to the DOM.
 - Label (`fg.muted`) and value (`fg.default`) are measured ≥ 4.5:1 on `bg.raised` for all
-  8 brands × both modes (`StatTile.test.ts`).
+  9 brands × both modes (`StatTile.test.ts`).
 
 ## Known gaps
 
 - `icon` is a `ReactNode` (per the dashboard build spec), not the library's usual `IconName` —
   chart/KPI icons come from consumer feature sets wider than the shared registry.
 
+## Motion
+
+Press feedback is `usePressMotion` (inert unless `onPress` is set), and a press fires
+`haptics.selection()` unless reduce-motion is on. A changed `value` fades back in via
+`motion.timing` (`fast`/`decelerate`); under `motion.enabled === false` it snaps. The in-flight fade
+is stopped on the next change and on unmount.
+
 ## Performance
 
 Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
@@ -49,3 +60,5 @@ Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
 - 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.