pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/bottom-nav/MODULE.md

@@ -222,16 +222,16 @@ not a runtime guarantee); core tabs are not independently searchable from the sh
 
 `BottomNav`, and the internal (non-exported) `BottomNavOverflowSheet`/`EditSlotChip`, are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — the sheet/chip need it too or the callback stabilization below is a no-op. `closeSheet`/`handleSheetPress` and (in the overflow sheet) `handleEditToggle`/`handleSlotPress` are `useCallback`'d; a module-level `EMPTY_RECENT` constant replaces `recent ?? []` (was a fresh array every render); the `Menu` trigger element is `useMemo`'d (was a freshly-created element every render, which would defeat `Menu`'s own memo); `EditSlotChip`'s `onPress` now takes `(index: number) => void` so every chip gets the SAME stable function instead of a per-item closure.
 
-## 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 5 tonal
-
-- Bar's top hairline dropped — `floatingBackground`/`floatingSurfaceStyle` already give it a tonal
-  fill plus real shadow/`elevation`, so the extra `borderTopWidth` was redundant decorative chrome.
-- Tabs gained `android_ripple` alongside their existing state-layer overlay (Button's pattern).
-- Overflow-sheet rows and edit-slot chips gained a pressed fill (`bg.sunken`) + `android_ripple` —
-  previously plain `Pressable`s with zero visual press feedback.
+## Motion
+
+Both animated parts are Reanimated shared values driven through `core/motion`, never classic
+`Animated`. `BottomNavTab` holds an `indicator` value that `motion.timing` runs between 0 and 1 on
+selection change, feeding an `opacity` + `scale` style through `interpolate`;
+`BottomNavIconWithBadge` holds a `settle` value keyed on the badge's DISPLAY label, so a count
+change inside the `99+` cap does not re-settle the pill. When `motion.enabled` is false neither
+runs a tween — the tab falls back to the static `indicatorHidden`/visible styles and the badge to
+`styles.settled`, so the end state is identical and only the transition is dropped.
+
+Tabs, overflow-sheet rows and edit-slot chips all carry `android_ripple` alongside their
+state-layer overlay. The bar has no top hairline: `floatingBackground`/`floatingSurfaceStyle`
+already supply the tonal fill and the platform shadow/elevation.

package/lib/module/modules/bottom-sheet/BottomSheet.js

@@ -18,9 +18,12 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import Animated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { useMotion } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
 import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -42,10 +45,17 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const {
     height: windowHeight
   } = useWindowDimensions();
+  const lastSnapIndexRef = useRef(initialSnapIndex);
   const panelColors = useMemo(() => resolveBottomSheetPanelColors(theme.colors), [theme.colors]);
   const bottomInset = useMemo(() => resolveBottomSheetBottomInset(theme.space[5], Platform.OS), [theme.space]);
   const [mounted, setMounted] = useState(visible);
@@ -60,6 +70,11 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
   // Resolved here because `slideTo` is a worklet the pan calls from the UI thread.
   const animated = motion.enabled;
   const slideMs = motion.duration("slow");
+  const fireSnapHaptic = useCallback(index => {
+    if (index === lastSnapIndexRef.current) return;
+    lastSnapIndexRef.current = index;
+    if (!reducedMotion) haptics.selection();
+  }, [haptics, reducedMotion]);
   const slideTo = useCallback(target => {
     "worklet";
 
@@ -125,7 +140,8 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
     const target = snapOffsets[index] ?? 0;
     activeSnap.value = target;
     slideTo(target);
-  }), [activeSnap, onRequestClose, slideTo, snapOffsets, translateY, windowHeight]);
+    scheduleOnRN(fireSnapHaptic, index);
+  }), [activeSnap, onRequestClose, slideTo, snapOffsets, translateY, windowHeight, fireSnapHaptic]);
   const panelStyle = useAnimatedStyle(() => ({
     transform: [{
       translateY: translateY.value
@@ -163,12 +179,14 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
       style: StyleSheet.absoluteFill,
       onPress: onRequestClose,
       children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: backdropStyle
+        style: [backdropStyle, {
+          pointerEvents: 'none'
+        }]
       })
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.overlay,
-      pointerEvents: "box-none",
+      style: [styles.overlay, {
+        pointerEvents: 'box-none'
+      }],
       children: /*#__PURE__*/_jsxs(Animated.View, {
         testID: testID ? `${testID}-panel` : undefined,
         accessibilityViewIsModal: true,
@@ -185,7 +203,12 @@ export const BottomSheet = /*#__PURE__*/memo(function BottomSheet({
               style: grabberStyle
             })
           })
-        }), children]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+          exiting: FadeOut.reduceMotion(ReduceMotion.System),
+          layout: LinearTransition.reduceMotion(ReduceMotion.System),
+          children: renderNodeSlot(children, childrenSlotStyle)
+        })]
       })
     })]
   });

package/lib/module/modules/bottom-sheet/BottomSheetProps.js

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

package/lib/module/modules/bottom-sheet/MODULE.md

@@ -1,7 +1,13 @@
-# bottom-sheet/
+# bottom-sheet/ — a gesture-driven bottom sheet with configurable snap points
 
 Gesture-driven bottom sheet with configurable `snapPoints` (height fractions). reanimated + gesture-handler.
 
+## Exports
+
+- `BottomSheet` — `visible`, `onRequestClose`, `children`, `snapPoints` (default `[0.5]`),
+  `initialSnapIndex` (default `0`), layout-only `style`, `testID`
+- `BottomSheetProps`
+
 ## Dismissal — the sheet is CONTROLLED
 
 `visible` is owned by the consumer, so sliding the panel away is not the same as closing it. Every
@@ -62,3 +68,7 @@ Modal/Drawer/Menu's resting scrim, not a locally-guessed hex suffix — still no
 - `BottomSheet.motion.test.tsx` — both halves of the reduce-motion contract. reanimated shared
   values have no JS driver to force in, so `withSpring`/`withTiming` are mocked and a target written
   as a plain number is the proof that nothing animated.
+
+## Wave 2 behaviour
+
+Sheet motion honours reduce-motion (snap open/close) and may emit haptics on snap when `useMotion().enabled`.

package/lib/module/modules/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { Pressable, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
+import { breadcrumbsStructure, resolveBreadcrumbLabelStyle, resolveBreadcrumbSeparatorStyle } from "./Breadcrumbs.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Breadcrumbs = /*#__PURE__*/memo(function Breadcrumbs({
+  items,
+  separator = "/",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [breadcrumbsStructure(theme), style], [theme, style]);
+  const separatorStyle = useMemo(() => resolveBreadcrumbSeparatorStyle(theme), [theme]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessibilityRole: "none",
+    style: rootStyle,
+    children: items.map((item, index) => {
+      const current = index === items.length - 1;
+      const labelStyle = resolveBreadcrumbLabelStyle(theme, current);
+      const segmentTestId = testID ? `${testID}-segment-${index}` : undefined;
+      const segment = item.onPress && !current ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "link",
+        accessibilityLabel: item.label,
+        onPress: item.onPress,
+        testID: segmentTestId,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: labelStyle,
+          children: item.label
+        })
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: labelStyle,
+        testID: segmentTestId,
+        children: item.label
+      });
+      return /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[1]
+        },
+        children: [index > 0 ? /*#__PURE__*/_jsx(Text, {
+          style: separatorStyle,
+          children: separator
+        }) : null, segment]
+      }, `${item.label}-${index}`);
+    })
+  });
+});
+//# sourceMappingURL=Breadcrumbs.js.map

package/lib/module/modules/breadcrumbs/Breadcrumbs.variants.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const breadcrumbsStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[1]
+  },
+  variants: {},
+  defaultVariants: {}
+}));
+export function resolveBreadcrumbLabelStyle(theme, current) {
+  return {
+    fontSize: theme.fontSizes.sm,
+    color: current ? theme.colors.fg.default : theme.colors.fg.muted,
+    ...theme.fontStyleForWeight(theme.fontWeights.medium)
+  };
+}
+export function resolveBreadcrumbSeparatorStyle(theme) {
+  return {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    ...theme.fontStyleForWeight(theme.fontWeights.regular)
+  };
+}
+//# sourceMappingURL=Breadcrumbs.variants.js.map

package/lib/module/modules/breadcrumbs/BreadcrumbsProps.js

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

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

@@ -0,0 +1,13 @@
+# breadcrumbs/ — a horizontal back-trail for detail screens
+
+Horizontal back-trail for detail screens. Last segment is current (non-link); earlier segments may be pressable.
+
+## Exports
+
+- `Breadcrumbs` — `items`, `separator` (default `"/"`), layout-only `style`, `testID`
+- `BreadcrumbItem` — `label`, optional `onPress`
+- `BreadcrumbsProps`
+
+A segment is a `Pressable` with `accessibilityRole="link"` only when it has `onPress` **and** is not
+the last item; the current (last) segment is always plain `Text`. With `testID`, each segment gets
+`${testID}-segment-${index}`.

package/lib/module/modules/breadcrumbs/index.js

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

package/lib/module/modules/button/Button.js

@@ -174,13 +174,15 @@ function ButtonImpl(props) {
     children: [variant === "solid" && /*#__PURE__*/_jsx(AccentGradientFill, {
       color: toneColors.fill
     }), focused && /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
       testID: "button-focus-ring",
-      style: [styles.focusRingHost, focusRingStaticStyle, focusRingStyle]
+      style: [styles.focusRingHost, focusRingStaticStyle, focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
       testID: "button-press-overlay",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), leading, label !== undefined && /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {

package/lib/module/modules/button/Button.variants.js

@@ -16,14 +16,10 @@
  * directly (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";
-/**
- * The one touch-target floor we hold every size to. 44dp is Apple's HIG minimum and WCAG 2.5.5
- * (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). Sizes shorter than this keep their visual
- * height and reach 44 through `hitSlop` — the target grows, the control never does.
- */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+import { CONTROL_HEIGHTS, CONTROL_LABEL_FONT_SIZE } from "../../theme/tokens/primitives/controlSizes.js";
+export { MIN_TOUCH_TARGET, slopFor };
 /**
  * Button-specific dimensions. Height, icon size and slop are the component's own design constants;
  * `fontSize` sits on the theme's `fontSizes` scale (14/16/18). Kept a plain constant — with no theme
@@ -31,22 +27,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const BUTTON_SIZES = {
   sm: {
-    height: 44,
-    fontSize: 14,
+    height: CONTROL_HEIGHTS.sm,
+    fontSize: CONTROL_LABEL_FONT_SIZE.sm,
     iconSize: 16,
-    hitSlop: slopFor(44)
+    hitSlop: slopFor(CONTROL_HEIGHTS.sm)
   },
   md: {
-    height: 52,
-    fontSize: 16,
+    height: CONTROL_HEIGHTS.md,
+    fontSize: CONTROL_LABEL_FONT_SIZE.md,
     iconSize: 18,
-    hitSlop: slopFor(52)
+    hitSlop: slopFor(CONTROL_HEIGHTS.md)
   },
   lg: {
-    height: 56,
-    fontSize: 18,
+    height: CONTROL_HEIGHTS.lg,
+    fontSize: CONTROL_LABEL_FONT_SIZE.lg,
     iconSize: 20,
-    hitSlop: slopFor(56)
+    hitSlop: slopFor(CONTROL_HEIGHTS.lg)
   }
 };
 /**

package/lib/module/modules/button/ButtonProps.js

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

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

@@ -2,7 +2,7 @@
 
 `Button` is the most-repeated shape in the audited apps (81 raw `TouchableOpacity` in crm-mobile,
 **155** in ecommerce-mobile — with three different style-key sets for the *same* add-to-cart button —
-and 195 web usages). It is also the **reference module**: the other 16 components copy its structure.
+and 195 web usages). It is also the **reference module**: every other module copies its structure.
 
 ## Files
 
@@ -35,6 +35,7 @@ and 195 web usages). It is also the **reference module**: the other 16 component
 | `accessibilityHint` | `string` | — | On the control. A wrapping `Tooltip` MERGES its label into this rather than clobbering it. |
 | `selected` | `boolean` | — | Toggle state for a button that stays "on", e.g. a rich-text-editor toolbar control (Bold/Italic). ACCESSIBILITY ONLY — appearance stays with `variant`, which the caller already swaps for the active look. Omitted entirely, an ordinary button announces no pressed state at all. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | On the `Pressable`. The focus ring and press overlay carry fixed `button-focus-ring` / `button-press-overlay` testIDs, not seeded from this. |
 
 `ButtonProps` is a discriminated union: a labelled button OR an icon-only button (`label?: never` +
 required `accessibilityLabel`). It is impossible to ship an unlabelled icon button — web's single
@@ -76,7 +77,7 @@ hardcoded hexes across 171 colours into crm-mobile. `tone` maps to ROLE colours
 never be an off-palette value. `neutral` is monochrome high-emphasis (`fg.default` fill, `bg.canvas`
 label); `accent`/`danger` map to the accent and danger roles.
 
-## Patterns the other 16 must copy
+## Patterns every other module copies
 
 1. **Structure vs colour split.** Static/theme-numeric structure (height, padding, radius, border
    *width*) → `createThemedVariants` (registered once per theme). Colour → resolved from role tokens
@@ -88,15 +89,7 @@ label); `accent`/`danger` map to the accent and danger roles.
    once, no `{...rest}`, internals never receive consumer style.
 4. **Type-enforced a11y** — make the unlabelled-icon-button state unrepresentable.
 
-## Known gaps
-
-- Render tests need `@testing-library/react-native` + a react-native jest preset (dependency-pending).
-
-## Resolved (were orchestrator flags, now done)
-
-- Icon plumbing hoisted to `src/core/icon/` (deps `lucide-react-native` + `react-native-svg` added
-  as optional peers); `Button.tsx` and `index.ts` import from there.
-- `useReducedMotion` hoisted to `src/core/a11y/`.
+## Press, focus and elevation
 
 Press feedback uses `usePressState` (Reanimated scale + state-layer overlay, width-aware).
 Focus ring uses native `outline*` props animated via `useFocusRing`. Solid variant gets
@@ -113,3 +106,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - `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.
+
+BUTTON_SIZES reads CONTROL_HEIGHTS and CONTROL_LABEL_FONT_SIZE primitives.

package/lib/module/modules/button-group/ButtonGroup.js

@@ -8,6 +8,7 @@ import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { usePressState } from "../../core/motion/usePressState.js";
+import { FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BUTTON_GROUP_SIZES, buttonGroupSegmentStructure, buttonGroupStructure, resolveButtonGroupColors, resolveButtonGroupKeyIndex, resolveButtonGroupSegmentAccessibility, resolveButtonGroupSegmentEdgeColors, resolveButtonGroupSegmentHitSlop } from "./ButtonGroup.variants.js";
@@ -23,7 +24,6 @@ const KeyboardView = View;
  * container is `overflow: "hidden"` so it can clip the joined segment radii, which would erase an
  * outside ring entirely (`ButtonGroup.render.test.tsx` asserts both halves of this).
  */
-const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_INSET = 2;
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function ButtonGroupSegmentImpl({
@@ -121,8 +121,9 @@ function ButtonGroupSegmentImpl({
     android_ripple: androidRipple,
     style: segmentStyle,
     children: [!selected && /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), focused && !disabled && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle

package/lib/module/modules/button-group/ButtonGroup.variants.js

@@ -16,12 +16,10 @@
  *    `resolveRadioRowAccessibility` — this is a single-choice value selector, not a set of tabs.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { compositeOver } from "../../theme/tokens/builders/color.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/RadioGroup/Tabs — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * ButtonGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.

package/lib/module/modules/button-group/ButtonGroupProps.js

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

package/lib/module/modules/button-group/MODULE.md

@@ -13,8 +13,8 @@ own fill carries the group's shape.
 
 | File | Role |
 |------|------|
-| `ButtonGroup.tsx` | The component. Segment composition, press wiring, a11y wiring. |
-| `ButtonGroup.variants.ts` | Pure resolvers (`BUTTON_GROUP_SIZES`, `resolveButtonGroupColors`, `resolveButtonGroupSegmentEdgeColors`, `resolveButtonGroupSegmentHitSlop`, `resolveButtonGroupSegmentAccessibility`) + the themed structural resolvers (`buttonGroupStructure`, `buttonGroupSegmentStructure`). No React, no lucide. |
+| `ButtonGroup.tsx` | The component. Segment composition, press wiring, a11y wiring. Focus ring width comes from `core/style/focusRing` (`FOCUS_RING_WIDTH`; inset ring drawn inside each segment). |
+| `ButtonGroup.variants.ts` | Pure resolvers (`BUTTON_GROUP_SIZES`, `resolveButtonGroupColors`, `resolveButtonGroupSegmentEdgeColors`, `resolveButtonGroupSegmentHitSlop`, `resolveButtonGroupSegmentAccessibility`) + the themed structural resolvers (`buttonGroupStructure`, `buttonGroupSegmentStructure`). `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`. No React, no lucide. |
 | `index.ts` | Public surface: `ButtonGroup`, `ButtonGroupProps`, `ButtonGroupOption`, `ButtonGroupSize`. |
 | `__tests__/ButtonGroup.test.ts` | Pure: WCAG contrast (selected label, unselected label resting + pressed, every per-segment boundary pairing — all brands × modes × first/middle/last selected) + touch target (vertical hitSlop math + per-edge hitSlop decision) + a11y contract. |
 | `__tests__/ButtonGroup.render.test.tsx` | Render: selection, press blocking when disabled, per-segment a11y state, the ACTUAL rendered border colours per edge, the ACTUAL rendered hitSlop object, the ACTUAL rendered `minWidth`. |

package/lib/module/modules/card/Card.js

@@ -9,12 +9,20 @@ import { memo, useCallback, useMemo } from "react";
 import { Platform, Pressable, StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { usePressState } from "../../core/motion/usePressState.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
 import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { cardStructure, resolveCardVariant } from "./Card.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useCardChildrenSlotStyle() {
+  const theme = useTheme();
+  return useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+}
 function useCardStyles(variant, style) {
   const theme = useTheme();
   return useMemo(() => {
@@ -41,10 +49,11 @@ function StaticCard({
   testID
 }) {
   const rootStyle = useCardStyles(variant, style);
+  const childrenSlotStyle = useCardChildrenSlotStyle();
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: rootStyle,
-    children: children
+    children: renderNodeSlot(children, childrenSlotStyle)
   });
 }
 function PressableCard({
@@ -54,12 +63,15 @@ function PressableCard({
   testID,
   onPress,
   onLongPress,
-  disabled = false
+  disabled = false,
+  accessibilityLabel,
+  accessibilityState
 }) {
   const theme = useTheme();
   const blocked = disabled;
   const press = usePressState(blocked);
   const rootStyle = useCardStyles(variant, style);
+  const childrenSlotStyle = useCardChildrenSlotStyle();
   const overlayStaticStyle = useMemo(() => ({
     backgroundColor: stateLayerScrim(theme.mode),
     borderRadius: theme.radii.lg,
@@ -78,6 +90,11 @@ function PressableCard({
   return /*#__PURE__*/_jsx(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: blocked,
+      ...accessibilityState
+    },
     disabled: blocked,
     onPress: blocked ? undefined : onPress,
     onLongPress: blocked ? undefined : onLongPress,
@@ -89,13 +106,15 @@ function PressableCard({
       overflow: "hidden"
     }],
     children: /*#__PURE__*/_jsxs(View, {
-      style: styles.rippleClip,
-      pointerEvents: "box-none",
+      style: [styles.rippleClip, {
+        pointerEvents: 'box-none'
+      }],
       children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
         testID: testID === undefined ? undefined : `${testID}-press-overlay`,
-        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
-      }), children]
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+          pointerEvents: 'none'
+        }]
+      }), renderNodeSlot(children, childrenSlotStyle)]
     })
   });
 }
@@ -105,6 +124,8 @@ function CardImpl({
   onPress,
   onLongPress,
   disabled = false,
+  accessibilityLabel,
+  accessibilityState,
   style,
   testID
 }) {
@@ -123,6 +144,8 @@ function CardImpl({
     onPress: onPress,
     onLongPress: onLongPress,
     disabled: disabled,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: accessibilityState,
     children: children
   });
 }

package/lib/module/modules/card/CardProps.js

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

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

@@ -23,6 +23,8 @@ a plain `View` with no press hook.
 | `onPress` | `() => void` | — | When set, root is `Pressable` with `usePressState` feedback. |
 | `onLongPress` | `(event) => void` | — | Only when `onPress` is set. |
 | `disabled` | `boolean` | `false` | Only when `onPress` is set. |
+| `accessibilityLabel` | `string` | — | Pressable cards only. |
+| `accessibilityState` | `{ disabled?, selected? }` | — | Pressable cards only. |
 | `children` | `ReactNode` | — | Ordinary composition, not a prop spread. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
@@ -68,8 +70,8 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 1. **Structure vs colour split.** Static/theme-numeric structure (padding, radius, border *width*)
    → `createThemedVariants` (registered once per theme). Colour → resolved from role tokens per
-   `variant`, applied inline. Elevation (a shadow, not a role colour) is applied directly from
-   `theme.elevation.md` — spread as-is, never re-derived.
+   `variant`, applied inline. Elevation (a shadow, not a role colour) comes from
+   `floatingSurfaceStyle(theme, "sm")` — spread as-is, never re-derived.
 2. **Pure, testable resolver** in `Card.variants.ts` (no React) so the WCAG contract is
    unit-tested by measuring real palettes — never eyeballed.
 3. **Closed union only** (`variant`), `style: LayoutStyle` last and once, no `{...rest}`, no

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

@@ -165,8 +165,9 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
         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",
@@ -232,8 +233,9 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
           }, `value-${bar.categoryIndex}-${bar.seriesIndex}`))]
         })
       }), onPressBar !== undefined && /*#__PURE__*/_jsx(View, {
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'box-none'
+        }],
         children: bars.map(bar => /*#__PURE__*/_jsx(BarPressTarget, {
           testID: testID ? `${testID}-bar-${bar.categoryIndex}-${bar.seriesIndex}-press` : undefined,
           categoryIndex: bar.categoryIndex,

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

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

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

@@ -3,6 +3,7 @@
 import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BAR_LIST_ROW_HEIGHT, barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +38,7 @@ const BarListRow = /*#__PURE__*/memo(function BarListRow({
     style: rowStyle,
     children: [/*#__PURE__*/_jsxs(View, {
       style: headerStyle,
-      children: [icon, /*#__PURE__*/_jsx(Text, {
+      children: [renderNodeSlot(icon, labelTextStyle), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: labelTextStyle,
         children: label

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

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

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

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