pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/charts/Charts.variants.js

@@ -5,7 +5,9 @@
  * (mocking only `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 export const BAR_LIST_TRACK_HEIGHT = 6;
 
 /** Header text (`fontSizes.sm` line height) + row gap (`space[1]`) + track — a floor, not a hard
@@ -68,7 +70,7 @@ export const barListTrackStructure = createThemedVariants(theme => ({
 // ---------------------------------------------------------------------------------------------
 
 /** Same touch-target floor as Select/Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const CHART_MIN_TOUCH_TARGET = 44;
+export const CHART_MIN_TOUCH_TARGET = MIN_TOUCH_TARGET;
 /** Symmetric hit-area expansion so a drawn mark smaller than 44dp still meets the touch-target
  *  floor, on whichever axis is short — a thin bar and a slim pie wedge fail on different axes. */
 export function hitSlopFor(width, height, minTarget = CHART_MIN_TOUCH_TARGET) {

package/lib/module/modules/charts/DonutChart.js

@@ -101,8 +101,9 @@ export const DonutChart = /*#__PURE__*/memo(function DonutChart({
           })
         })
       }), (centerLabel !== undefined || centerSublabel !== undefined) && /*#__PURE__*/_jsxs(View, {
-        pointerEvents: "none",
-        style: [StyleSheet.absoluteFill, styles.center],
+        style: [StyleSheet.absoluteFill, styles.center, {
+          pointerEvents: 'none'
+        }],
         children: [centerLabel !== undefined && /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {

package/lib/module/modules/charts/DonutChartProps.js

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

package/lib/module/modules/charts/LineChart.js

@@ -110,8 +110,9 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
         accessible: true,
         accessibilityRole: "image",
         accessibilityLabel: summary,
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "none"
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'none'
+        }]
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",

package/lib/module/modules/charts/LineChartProps.js

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

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

@@ -16,7 +16,7 @@ importing this subpath requires the peer installed).
 | `LineChart.tsx` | Svg multi-series line with axes/gridlines, optional area fill and curve smoothing. |
 | `PieChart.tsx` | Svg filled wedges + legend — the "with a legend" sibling to `DonutChart`'s ring. |
 | `ChartLegend.tsx` | Internal — the one text legend shared by `PieChart`/`DonutChart`/`LineChart`/`BarChart`. Not exported. |
-| `Charts.variants.ts` | Pure resolvers: colors, scales, geometry, arc/path maths, a11y summaries, non-colour series channels. No React, no svg. |
+| `Charts.variants.ts` | Pure resolvers: colors, scales, geometry, arc/path maths, a11y summaries, non-colour series channels. `CHART_MIN_TOUCH_TARGET` aliases `MIN_TOUCH_TARGET` from `core/a11y/touchTarget`; `hitSlopFor` expands marks below 44dp. No React, no svg. |
 | `__tests__/Charts.test.ts` | Pure: WCAG contrast (all brands × modes), geometry, scale, path and summary logic. |
 | `__tests__/Charts.render.test.tsx` | Render: rows/segments/paths/bars/lines, a11y, svg mocked. |
 
@@ -28,12 +28,11 @@ Bar fill defaults to `accent.solid`; per-item `color` exists for data-driven ser
 breakdowns have no closed-union role) — a deliberate, documented exception to the closed-union rule.
 
 **DonutChart** — `segments: { value, color, label? }[]`, `size?` (160), `thickness?` (20),
-`centerLabel?`, `centerSublabel?`, `showLegend?` (true — **new**), `style?`, `testID?`. Non-finite /
+`centerLabel?`, `centerSublabel?`, `showLegend?` (true), `style?`, `testID?`. Non-finite /
 ≤ 0 segment values are dropped; with no valid segments only the `bg.sunken` track ring renders.
-`segment.label` (previously accepted but silently dropped) now renders as a legend row, falling
-back to `"Segment N"` when omitted; the legend is skipped for 0–1 valid segments. Each legend row
-also carries a knocked-out shape keyed off the segment's own index in `segments[]`, same as
-`PieChart`.
+`segment.label` renders as a legend row, falling back to `"Segment N"` when omitted; the legend is
+skipped for 0–1 valid segments. Each legend row also carries a knocked-out shape keyed off the
+segment's own index in `segments[]`, same as `PieChart`.
 
 **Sparkline** — `data: number[]`, `width?` (120), `height?` (32),
 `tone?: accent | neutral | success | warning | danger | info` (accent), `style?`, `testID?`.
@@ -42,7 +41,7 @@ Unchanged by the WCAG 1.4.1 pass below — see "Design decisions" for why.
 
 **BarChart** — `data: { label, values: number[] }[]` (`values.length === 1` = simple bars, `> 1` =
 grouped/stacked), `series?: { name, color? }[]`, `height?` (200), `showGrid?` (true), `showValues?`
-(false), `stacked?` (false), `showLegend?` (true — **new**), `yAxisFormatter?`,
+(false), `stacked?` (false), `showLegend?` (true), `yAxisFormatter?`,
 `onPressBar?(datum, seriesIndex)`, `style?`, `testID?`. Width is measured via `onLayout` (no `width`
 prop — the chart fills its container). Non-finite bar values render as height 0; the y-domain always
 includes 0. 2+ series get a legend (falling back to `"Series N"` with no `series[i].name`) and a
@@ -50,12 +49,12 @@ knocked-out shape mark on each bar when it's ≥ 14dp on both axes (`BAR_MARKER_
 
 **LineChart** — `series: { name, data: { x, y }[], color?, shape? }[]`, `height?` (200), `showGrid?`
 (true), `showDots?` (true), `showArea?` (false), `curved?` (false — Catmull-Rom→bézier when true),
-`showLegend?` (true — **new**), `yAxisFormatter?`, `xAxisFormatter?`, `style?`, `testID?`. Non-finite
+`showLegend?` (true), `yAxisFormatter?`, `xAxisFormatter?`, `style?`, `testID?`. Non-finite
 `y` samples are dropped per series (same contract as `Sparkline`), then spaced evenly by index — x is
 plotted by position, not proportionally by numeric value, so unevenly-spaced categories still read as
 an even axis. Long series are decimated first (see Performance) — no prop, a module constant. 2+
 series get a legend naming each one; every series also gets a `strokeDasharray` and a marker shape
-(circle/square/triangle/diamond/cross) by index — `series[i].shape` (**new**, optional) overrides it.
+(circle/square/triangle/diamond/cross) by index — optional `series[i].shape` overrides it.
 
 **PieChart** — `segments: { label, value, color? }[]`, `size?` (180), `showLegend?` (true),
 `showPercentages?` (true — controls the legend row text, not on-wedge labels: a label drawn on a
@@ -63,8 +62,8 @@ consumer-picked wedge color can't have its contrast guaranteed), `onPressSegment
 `style?`, `testID?`. `index` is into the rendered (filtered, positive-value) list, matching
 `DonutChart`'s own `arcs`-index convention — never the raw `segments` indices. This is the filled
 sibling of `DonutChart`; reach for `DonutChart` for a ring with a center label, `PieChart` for
-filled wedges with a legend. Wedges now carry a `bg.surface` separator stroke and the legend a
-knocked-out shape per row, on top of the pre-existing swatch+text (see "Design decisions").
+filled wedges with a legend. Wedges carry a `bg.surface` separator stroke, and each legend row a
+knocked-out shape alongside its swatch+text (see "Design decisions").
 
 All four multi-series charts default series/segment colors from a shared 5-hue role-derived ramp
 (`resolveCategoricalRamp`) when no per-series/per-segment `color` is given; a 6th+ series wraps
@@ -85,7 +84,8 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
   `accessibilityRole="button"` + `"label, value"` label. BarList rows are `text` role, or `button`
   when `onPressItem` is set.
 - **2.5.8 / 2.5.5 (Target Size)** — every pressable bar/segment gets a ≥ 44dp touch target via
-  `hitSlop` (`hitSlopFor`), computed from its own drawn size; pie wedges use an angular
+  `hitSlop` (`hitSlopFor`, floor `CHART_MIN_TOUCH_TARGET` = `core/a11y/touchTarget`), computed from
+  its own drawn size; pie wedges use an angular
   bounding-box (`resolveWedgeBoundingBox`) since a wedge isn't rectangular.
 - **1.4.3 (Contrast Minimum, text)** — BarList label/value and axis labels (`fg.muted`) measure
   ≥ 4.5:1 against their canvas, for all 9 brands × both modes (`Charts.test.ts`).
@@ -137,8 +137,8 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
   against the canvas is the consumer's to verify (documented exception to the closed-union rule).
   `DonutChart.segments[].color` is required and consumer-supplied (unlike the other three charts'
   ramp-defaulted `color`); its ring separator stays a track-coloured gap (the ring segments are
-  strokes on one shared circle, not independent filled paths — see "Design decisions"), but the
-  legend now carries a shape per segment's own index in `segments[]`, same as `PieChart`.
+  strokes on one shared circle, not independent filled paths — see "Design decisions"); the
+  legend carries a shape per segment's own index in `segments[]`, same as `PieChart`.
 - LineChart's x-axis labels are taken from the longest (decimated) series and positioned by raw
   index; a series with dropped non-finite points can drift slightly out of alignment with the
   shared x-axis, and a decimated series labels only the samples it kept.

package/lib/module/modules/charts/PieChart.js

@@ -94,8 +94,9 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
         accessible: true,
         accessibilityRole: "image",
         accessibilityLabel: summary,
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "none"
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'none'
+        }]
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
@@ -123,8 +124,9 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
           }, index))]
         })
       }), pressTargets.length > 0 && /*#__PURE__*/_jsx(View, {
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'box-none'
+        }],
         children: pressTargets.map((target, index) => /*#__PURE__*/_jsx(WedgePressTarget, {
           testID: testID ? `${testID}-segment-${index}-press` : undefined,
           index: index,

package/lib/module/modules/charts/PieChartProps.js

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

package/lib/module/modules/charts/SparklineProps.js

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

package/lib/module/modules/checkbox/Checkbox.js

@@ -11,29 +11,21 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useSpaceActivation } from "../../core/a11y/keyboard";
 import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue, usePressMotion } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { CHECKBOX_SIZES, checkboxBoxStructure, checkboxRowStructure, resolveCheckboxAccessibility, resolveCheckboxColors } from "./Checkbox.variants.js";
-
-/** A checkbox with a visible label. `accessibilityLabel` defaults to `label`. Pressing the label
- * toggles too — it lives inside the same `Pressable` row as the box. */
-
-/**
- * A checkbox with no visible label (e.g. a table row's select-all box). It has no visible text, so
- * `accessibilityLabel` is REQUIRED at the type level — the same trap `Button`'s icon-only shape
- * closes. `label?: never` makes the two shapes mutually exclusive.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 // The focus ring sits a small gap OUTSIDE the box, because `border.focus` is the role token proven
 // ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over the filled box its contrast isn't guaranteed.
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+
 function CheckboxImpl(props) {
   const {
     checked,
@@ -64,11 +56,19 @@ function CheckboxImpl(props) {
   const ringAnimation = useRef(null);
   const glyphScale = useAnimatedValue(filled ? 1 : 0);
   const glyphAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
+  const glyphAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: glyphScale.value
+    }]
+  }));
   const setRingVisible = useCallback(visible => {
     ringAnimation.current?.stop();
     const to = visible ? 1 : 0;
     if (!motion.enabled) {
-      ringOpacity.setValue(to);
+      ringOpacity.value = to;
       return;
     }
     ringAnimation.current = motion.timing(ringOpacity, to, {
@@ -82,7 +82,7 @@ function CheckboxImpl(props) {
     glyphAnimation.current?.stop();
     const to = filled ? 1 : 0;
     if (!motion.enabled) {
-      glyphScale.setValue(to);
+      glyphScale.value = to;
       return;
     }
     glyphAnimation.current = motion.timing(glyphScale, to, {
@@ -128,11 +128,6 @@ function CheckboxImpl(props) {
     fontSize: spec.fontSize,
     color: colors.label
   }], [theme, spec.fontSize, colors.label]);
-  const glyphStyle = useMemo(() => ({
-    transform: [{
-      scale: glyphScale
-    }]
-  }), [glyphScale]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: pressableRef,
     testID: testID,
@@ -152,20 +147,19 @@ function CheckboxImpl(props) {
       borderless: false
     } : undefined,
     style: rootStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: "checkbox-row",
       style: [rowStyle, press.style],
       children: [/*#__PURE__*/_jsxs(View, {
         style: boxStyle,
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
           testID: "checkbox-focus-ring",
-          style: [focusRingStyle, {
-            opacity: ringOpacity
+          style: [focusRingStyle, ringAnimatedStyle, {
+            pointerEvents: 'none'
           }]
-        }), filled && /*#__PURE__*/_jsx(Animated.View, {
+        }), filled && /*#__PURE__*/_jsx(Reanimated.View, {
           testID: "checkbox-glyph",
-          style: glyphStyle,
+          style: glyphAnimatedStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: indeterminate ? "minus" : "check",
             size: spec.iconSize,

package/lib/module/modules/checkbox/Checkbox.variants.js

@@ -19,13 +19,15 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
+
 /**
  * Same touch-target floor as `Button` (44dp, WCAG 2.5.5 AAA). Duplicated rather than imported —
  * modules never import across `src/modules/*` — so this is the component's own copy.
  */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 /**
  * Checkbox-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `boxSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.

package/lib/module/modules/checkbox/CheckboxProps.js

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

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

@@ -14,6 +14,8 @@ the pattern rationale.
 | `__tests__/Checkbox.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
 | `__tests__/Checkbox.render.test.tsx` | Render: states, press-toggle (box and label), disabled, indeterminate, focus-ring tween + reached opacity. |
 | `__tests__/Checkbox.motion.test.tsx` | Motion: the reduce-motion snap for all three animations, and the real glyph/press tweens with motion on. |
+| `__tests__/Checkbox.keyboard.test.tsx` | Space activation via `useSpaceActivation`. |
+| `__tests__/Checkbox.dom.test.tsx` | Real-DOM a11y props on web (`jest --config jest.web.config.js`). |
 
 ## Props
 
@@ -79,14 +81,14 @@ Three animations, all from `core/motion`, all `opacity`/`transform` only on the
 
 | What | Where | Driver |
 |------|-------|--------|
-| Row press scale + opacity dip | the row `Animated.View` (`Checkbox.tsx:204`) | `usePressMotion(disabled)` (`:84`) — disabled rows never animate |
-| Focus-ring crossfade | the always-mounted ring `Animated.View` (`:206`) | `setRingVisible` (`:110`), `fast` |
-| Glyph scale-in / out on check | the glyph `Animated.View` (`:212`) | the `filled` effect (`:126`), `fast` + `emphasized` |
+| Row press scale + opacity dip | the row `Reanimated.View` | `usePressMotion(disabled)` — disabled rows never animate |
+| Focus-ring crossfade | the always-mounted ring `Reanimated.View` | `setRingVisible`, `fast` |
+| Glyph scale-in on check | the glyph `Reanimated.View`, mounted only while `filled` | the `filled` effect, `fast` + `emphasized` |
 
-**WCAG 2.3.3** — each one is guarded by `if (!motion.enabled) { …setValue(to); return; }` (`:106`,
-`:122`, and `usePressMotion`'s own guard), so under reduce motion (or the global kill switch) the
+**WCAG 2.3.3** — each one is guarded by `if (!motion.enabled) { …value = to; return; }` (and
+`usePressMotion`'s own guard), so under reduce motion (or the global kill switch) the
 value is at its FINAL state on the very next render: no tween, no timers. `Checkbox.motion.test.tsx`
-pins both halves — the snap with reduce motion on, a real `Animated.timing` with it off.
+pins both halves — the snap with reduce motion on, a real `motion.timing` with it off.
 
 ## Known gaps
 
@@ -106,3 +108,7 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
   now gets `android_ripple` (`borderless: false`), gated on `Platform.OS === "android" && !disabled`.
 
 Checkbox press uses `usePressState` and `useHaptics().selection()`.
+
+## Wave 2 behaviour
+
+The checked-state indicator tweens through `core/motion`; haptics fire on toggle when motion is enabled.

package/lib/module/modules/chip/Chip.js

@@ -11,7 +11,7 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import Animated from "react-native-reanimated";
+import Animated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
 import { AccentGradientFill } from "../../core/gradient/index.js";
 import { useHaptics } from "../../core/haptics/index.js";
@@ -137,9 +137,10 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     children: [selected && /*#__PURE__*/_jsx(AccentGradientFill, {
       color: colors.background
     }), /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
       testID: testID ? `${testID}-press-overlay` : undefined,
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), leading, /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights[selected ? "semibold" : "medium"]), {
@@ -150,7 +151,17 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
       children: label
     })]
   });
-  if (!removable) return chip;
+  const chipEnter = FadeInDown.springify().reduceMotion(ReduceMotion.System);
+  const chipExit = FadeOut.reduceMotion(ReduceMotion.System);
+  const chipLayout = LinearTransition.reduceMotion(ReduceMotion.System);
+  if (!removable) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      entering: chipEnter,
+      exiting: chipExit,
+      layout: chipLayout,
+      children: chip
+    });
+  }
 
   // The remove control is a SIBLING of the chip's press target, never a descendant: a `Pressable`
   // defaults to `accessible`, which collapses its whole subtree into one element, so a nested "x"
@@ -160,35 +171,41 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     /*#__PURE__*/
     // The wrapper repeats the chip's `hitSlop`: a touch outside a view's own hit region is never
     // dispatched into its children, so without it this node would clip the chip back to 32dp.
-    _jsxs(View, {
-      hitSlop: spec.hitSlop,
-      style: [disabled && styles.dimmed, style],
-      children: [chip, /*#__PURE__*/_jsxs(AnimatedPressable, {
-        testID: testID ? `${testID}-remove` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: removeAccessibilityLabel(label),
-        disabled: disabled,
-        onPress: disabled ? undefined : onRemove,
-        onPressIn: removePress.handlers.onPressIn,
-        onPressOut: removePress.handlers.onPressOut,
-        onLayout: removePress.onLayout,
-        hitSlop: CHIP_REMOVE_HIT_SLOP,
-        android_ripple: removeRipple,
-        style: [chipRemoveTouchStructure(theme, {
-          size
-        }), {
-          overflow: "hidden"
-        }, removePress.animatedStyle],
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
-          style: [StyleSheet.absoluteFill, overlayStaticStyle, removePress.overlayStyle]
-        }), /*#__PURE__*/_jsx(Icon, {
-          name: "x",
-          size: CHIP_REMOVE_ICON_SIZE,
-          color: colors.text,
-          strokeWidth: ICON_STROKE
+    _jsx(Animated.View, {
+      entering: chipEnter,
+      exiting: chipExit,
+      layout: chipLayout,
+      children: /*#__PURE__*/_jsxs(View, {
+        hitSlop: spec.hitSlop,
+        style: [disabled && styles.dimmed, style],
+        children: [chip, /*#__PURE__*/_jsxs(AnimatedPressable, {
+          testID: testID ? `${testID}-remove` : undefined,
+          accessibilityRole: "button",
+          accessibilityLabel: removeAccessibilityLabel(label),
+          disabled: disabled,
+          onPress: disabled ? undefined : onRemove,
+          onPressIn: removePress.handlers.onPressIn,
+          onPressOut: removePress.handlers.onPressOut,
+          onLayout: removePress.onLayout,
+          hitSlop: CHIP_REMOVE_HIT_SLOP,
+          android_ripple: removeRipple,
+          style: [chipRemoveTouchStructure(theme, {
+            size
+          }), {
+            overflow: "hidden"
+          }, removePress.animatedStyle],
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            style: [StyleSheet.absoluteFill, overlayStaticStyle, removePress.overlayStyle, {
+              pointerEvents: 'none'
+            }]
+          }), /*#__PURE__*/_jsx(Icon, {
+            name: "x",
+            size: CHIP_REMOVE_ICON_SIZE,
+            color: colors.text,
+            strokeWidth: ICON_STROKE
+          })]
         })]
-      })]
+      })
     })
   );
 });

package/lib/module/modules/chip/Chip.variants.js

@@ -13,15 +13,16 @@
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** `accent`/`neutral` are brand-driven emphasis; the rest mirror the theme's status roles — same
  *  shape `Badge`'s own `BadgeTone` uses. */
 
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
  *  WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 /**
  * Chip-specific dimensions. Visibly smaller than Button (a chip is a token, not a call-to-action)
  * but every size still reaches the 44dp floor via `hitSlop`, exactly like Button/Select do for

package/lib/module/modules/chip/ChipGroup.js

@@ -7,8 +7,10 @@
  * every layout-only wrapper in this library takes.
  */
 
-import { memo } from "react";
-import { ScrollView, View } from "react-native";
+import { memo, useMemo } from "react";
+import { ScrollView } from "react-native";
+import Reanimated, { LinearTransition, ReduceMotion } from "react-native-reanimated";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveChipGroupGap } from "./Chip.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,6 +24,11 @@ export const ChipGroup = /*#__PURE__*/memo(function ChipGroup({
 }) {
   const theme = useTheme();
   const gapValue = resolveChipGroupGap(theme, gap);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+  const slottedChildren = renderNodeSlot(children, childrenSlotStyle);
   if (scrollable) {
     return /*#__PURE__*/_jsx(ScrollView, {
       testID: testID,
@@ -32,17 +39,21 @@ export const ChipGroup = /*#__PURE__*/memo(function ChipGroup({
         flexDirection: "row",
         gap: gapValue
       }, style],
-      children: children
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        layout: LinearTransition.reduceMotion(ReduceMotion.System),
+        children: slottedChildren
+      })
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: [{
       flexDirection: "row",
       flexWrap: wrap ? "wrap" : "nowrap",
       gap: gapValue
     }, style],
-    children: children
+    children: slottedChildren
   });
 });
 //# sourceMappingURL=ChipGroup.js.map

package/lib/module/modules/chip/ChipGroupProps.js

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

package/lib/module/modules/chip/ChipProps.js

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

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

@@ -21,6 +21,7 @@ independent select; `QuickChip` is select-only, unexported). `Chip` generalises
 | `Chip.variants.ts` | Pure resolvers (`resolveChipColors`, `isChipFilled`, `resolveChipPressedBackground`, `resolveChipAccessibility`, `resolveChipGroupGap`) + the themed structural resolvers (`chipStructure`, `chipRemoveSlotStructure`, `chipRemoveTouchStructure`). No React, no lucide. |
 | `index.ts` | Public surface: `Chip`, `ChipProps`, `ChipGroup`, `ChipGroupProps`, the closed unions, `IconName`. |
 | `__tests__/Chip.test.ts` | Pure: WCAG contrast (6 tones × 3 variants × selected, all brands × modes), touch target, the a11y contract, `selected` overriding `variant`. |
+| `__tests__/ChipGroup.dom.test.tsx` | Web DOM: the group's layout container on react-native-web. |
 | `__tests__/Chip.render.test.tsx` | Render: press wiring, the remove affordance never firing `onPress`, the remove button being a SIBLING of the chip's press target (WCAG 4.1.2), `selected` a11y, disabled gating, `avatarUri`-over-`icon`, `ChipGroup` wrap/scrollable. |
 
 ## Props
@@ -147,12 +148,9 @@ independent select; `QuickChip` is select-only, unexported). `Chip` generalises
 
 Both `Chip` and `ChipGroup` are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see
 root `CLAUDE.md`). Chip and its remove affordance both use `usePressState` (scale + state-layer
-overlay); filled chips also dim via `press.overlayStyle` instead of swapping to `bg.sunken`.
+overlay); filled chips also dim via `press.overlayStyle` instead of swapping to `bg.sunken`. The
+remove control takes its own `borderless: true` Android ripple, split from the pill's `false` one.
 
-## Modernization (v1.0.7)
+## Wave 2 behaviour
 
-- 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 5 (Android parity)** — the remove control (icon-only, circular) now gets its own
-  `borderless: true` ripple, split from the pill's own `borderless: false` ripple.
+Chip and ChipGroup entering/leaving siblings use Reanimated layout with `ReduceMotion.System`.