pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/search-bar/MODULE.md

@@ -9,8 +9,8 @@ touch target, optional debounced reporting, and an optional "Cancel" text button
 
 | File | Role |
 |------|------|
-| `SearchBar.tsx` | The component. Field composition, debounce timer, clear/cancel wiring, a11y wiring, focus ring. |
-| `SearchBar.variants.ts` | Pure resolvers (`resolveSearchBarColors`, `resolveSearchBarBorderColor`, `resolveSearchBarAccessibility`, `shouldShowClear`, `resolveSearchBarFieldHitSlop`, `resolveSearchBarTrailingHitSlop`) + the themed structural resolvers (`searchBarRowStructure`, `searchBarFieldStructure`, `searchBarClearStructure`, `searchBarCancelStructure`). No React, no lucide. |
+| `SearchBar.tsx` | The component. Field composition, debounce timer, clear/cancel wiring, a11y wiring, focus ring (`FOCUS_RING_*` from `core/style/focusRing`). |
+| `SearchBar.variants.ts` | Pure resolvers (`resolveSearchBarColors`, `resolveSearchBarBorderColor`, `resolveSearchBarAccessibility`, `shouldShowClear`, `resolveSearchBarFieldHitSlop`, `resolveSearchBarTrailingHitSlop`) + the themed structural resolvers (`searchBarRowStructure`, `searchBarFieldStructure`, `searchBarClearStructure`, `searchBarCancelStructure`). `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`; `CLEAR_BUTTON_WIDTH` = that floor. No React, no lucide. |
 | `index.ts` | Public surface: `SearchBar`, `SearchBarProps`, `SearchBarSize`. |
 | `__tests__/SearchBar.test.ts` | Pure: WCAG contrast (all brands × modes) + per-edge touch target + visibility/a11y contracts. |
 | `__tests__/SearchBar.render.test.tsx` | Render: value/placeholder, the field's `search` role, immediate vs debounced typing, clear isolation, `showCancel` lifecycle, submit flushing a pending debounce, focus ring, the rendered per-edge `hitSlop`. |
@@ -22,7 +22,7 @@ touch target, optional debounced reporting, and an optional "Cancel" text button
 | `value` | `string` | — | Required — controlled. |
 | `onChangeText` | `(text: string) => void` | — | Required. Debounced per `debounceMs`; the rendered text never lags. |
 | `placeholder` | `string` | `"Search"` | Falls back into the field's `accessibilityLabel` — SearchBar renders no visible label. |
-| `accessibilityLabel` | `string` | `placeholder` | Overrides the placeholder fallback — a placeholder that reads as a prompt ("Search…") rather than a name tells a screen-reader user nothing about WHAT is being searched. Previously absent: the placeholder was the only name, with no override. |
+| `accessibilityLabel` | `string` | `placeholder` | Overrides the placeholder fallback — a placeholder that reads as a prompt ("Search…") rather than a name tells a screen-reader user nothing about WHAT is being searched. |
 | `onSubmit` | `() => void` | — | Fires on the keyboard's search key. Flushes a pending debounce first. |
 | `onClear` | `() => void` | — | Fires after the clear button or "Cancel" empties the query. |
 | `debounceMs` | `number` | `0` | `0` = report every keystroke. Above `0`, `onChangeText` is debounced while local state keeps the visible text instant. |
@@ -59,15 +59,15 @@ above-field caption; the placeholder carries the only name it has.
   size — the resolver arithmetic in `SearchBar.test.ts` only reaches the user if the object lands on
   the node.
 - **1.4.3** — query text, placeholder, and the "Cancel" label are each measured ≥ 4.5:1 against
-  `bg.canvas` (the field renders no fill, like `Input`'s box) for all 8 brands × both modes. The
+  `bg.canvas` (the field renders no fill, like `Input`'s box) for all 9 brands × both modes. The
   pressed clear/cancel foreground is measured ≥ 4.5:1 against its own `pressedFill` too — not just
   assumed from the resting canvas pairing.
 - **1.4.11** — the field's resting and focused border, and the leading/clear glyphs, are measured
   ≥ 3:1 against the canvas.
-- **2.4.7** — a `border.focus` ring appears offset outside the field on focus, identical
-  geometry/token to `Input`'s.
-- **2.3.3** — n/a: nothing here animates (the cancel button is a conditional render, not a
-  transition). The one moving part, `loading`'s `Spinner`, already honours reduced motion itself.
+- **2.4.7** — a `border.focus` ring appears offset outside the field on focus, same
+  `core/style/focusRing` geometry/token as `Input`.
+- **2.3.3** — the only motion is the clear/cancel press scale from `usePressState` and `loading`'s
+  `Spinner`; both honour reduced motion. The cancel button is a conditional render, not a transition.
 
 ## Patterns copied from Input / ButtonGroup / Menu
 

package/lib/module/modules/search-bar/SearchBar.js

@@ -149,7 +149,6 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
         borderColor: resolveSearchBarBorderColor(colors, focused)
       }, disabled && styles.dimmed],
       children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: "search-bar-focus-ring",
         style: {
           position: "absolute",
@@ -160,7 +159,8 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: colors.focusBorder,
           borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
-          borderCurve: "continuous"
+          borderCurve: "continuous",
+          pointerEvents: "none"
         }
       }), loading ? /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
@@ -220,8 +220,9 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           overflow: "hidden"
         }, clearPress.animatedStyle],
         children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
-          style: [StyleSheet.absoluteFill, overlayStaticStyle, clearPress.overlayStyle]
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, clearPress.overlayStyle, {
+            pointerEvents: "none"
+          }]
         }), /*#__PURE__*/_jsx(Icon, {
           name: "x",
           size: spec.iconSize,
@@ -246,8 +247,9 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
         overflow: "hidden"
       }, cancelPress.animatedStyle],
       children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: [StyleSheet.absoluteFill, overlayStaticStyle, cancelPress.overlayStyle]
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, cancelPress.overlayStyle, {
+          pointerEvents: "none"
+        }]
       }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.medium), {

package/lib/module/modules/search-bar/SearchBar.variants.js

@@ -14,11 +14,9 @@
  * `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";
-/** Same floor as Button/Input/ButtonGroup — 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 };
 /**
  * Deliberately the same height/fontSize/iconSize numbers as `INPUT_SIZES` `sm`/`md`, so a SearchBar
  * and an Input placed in the same form line up exactly.

package/lib/module/modules/search-bar/SearchBarProps.js

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

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

@@ -7,7 +7,7 @@ the settings-section pattern re-declared across consumer apps.
 
 | File | Role |
 |------|------|
-| `Section.tsx` | The component. Hairline + label + children; `style` last. |
+| `Section.tsx` | Hairline + label + children (`renderNodeSlot` wraps string/number children); `style` last. |
 | `Section.variants.ts` | Pure resolver (`resolveSectionColors`) + themed structural resolver. |
 | `index.ts` | Public surface: `Section`, `SectionProps`. |
 | `__tests__/Section.test.ts` | Pure: WCAG 1.4.3 on the label, colour mapping. |

package/lib/module/modules/section/Section.js

@@ -10,6 +10,7 @@
 
 import { memo, useMemo } from "react";
 import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Text } from "../text/index.js";
 import { sectionContainerStructure } from "./Section.variants.js";
@@ -22,6 +23,10 @@ export const Section = /*#__PURE__*/memo(function Section({
 }) {
   const theme = useTheme();
   const rootStyle = useMemo(() => [sectionContainerStructure(theme), style], [theme, style]);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   return /*#__PURE__*/_jsxs(Reanimated.View, {
     entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     testID: testID,
@@ -29,7 +34,7 @@ export const Section = /*#__PURE__*/memo(function Section({
     children: [/*#__PURE__*/_jsx(Text, {
       variant: "overline",
       children: label
-    }), children]
+    }), renderNodeSlot(children, childrenSlotStyle)]
   });
 });
 //# sourceMappingURL=Section.js.map

package/lib/module/modules/section/SectionProps.js

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

package/lib/module/modules/section-list/MODULE.md

@@ -1,7 +1,26 @@
-# section-list/
+# section-list/ — a virtualized sectioned list
 
 Virtualized sectioned list via `core/list/VirtualSectionList`.
 
+## Files
+
+| File | Role |
+|------|------|
+| `SectionList.tsx` | The component + `SectionListProps` / `SectionListSection`. Wraps `VirtualSectionList`; the header is a memoized `HeadingText`. |
+| `SectionList.variants.ts` | Themed structural resolver (`sectionListHeaderStructure`). |
+| `index.ts` | Public surface: `SectionList`, `SectionListProps`, `SectionListSection`. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `sections` | `readonly SectionListSection<T>[]` | — | Required. `{ title, data }` per section. |
+| `renderItem` | `(info: { item: T; sectionIndex: number; index: number }) => ReactElement \| null` | — | Required. |
+| `keyExtractor` | `(item: T, index: number) => string` | — | Required. |
+| `itemHeight` | `number` | — | Forwarded to `VirtualSectionList` for fixed-height windowing. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`. |
+
 ## Accessibility
 
 - **1.3.1 / 2.4.6** — a section header carries `accessibilityRole="header"` and `aria-level={2}`
@@ -14,5 +33,6 @@ Virtualized sectioned list via `core/list/VirtualSectionList`.
 
 | Test | Covers |
 |------|--------|
+| `__tests__/SectionList.test.ts` | Pure: the header structural resolver. |
 | `__tests__/SectionList.render.test.tsx` | Render: section header + item, heading role + level. |
 | `__tests__/SectionList.dom.test.tsx` | Real DOM (`jest.web.config.js`): the header renders a real `<h2>`. |

package/lib/module/modules/section-list/SectionListProps.js

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

package/lib/module/modules/segmented-control/MODULE.md

@@ -2,8 +2,7 @@
 
 `SegmentedControl` switches between 2–5 mutually exclusive options (filters, view modes, date
 ranges) inside one rounded track. The active segment is marked by a pill that slides to its
-measured position — the same `onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator
-uses — but unlike `Tabs`/`ButtonGroup`, the pill is a **neutral raised surface**, not an
+measured position — the same `onLayout` + shared-value mechanism `Tabs`' sliding indicator uses — but unlike `Tabs`/`ButtonGroup`, the pill is a **neutral raised surface**, not an
 accent-coloured fill: elevation, not colour, is the selection cue here.
 
 ## Files
@@ -14,7 +13,7 @@ accent-coloured fill: elevation, not colour, is the selection cue here.
 | `SegmentedControl.variants.ts` | Pure resolvers (`resolveSegmentedControlColors`, `resolveSegmentedControlSegmentAccessibility`, `resolveSegmentedControlSegmentHitSlop`) + the themed structural resolvers (`segmentedControlTrackStructure`, `segmentedControlPillStructure`, `segmentedControlSegmentStructure`). No React, no lucide. |
 | `index.ts` | Public surface: `SegmentedControl`, `SegmentedControlProps`, `SegmentedControlOption`, `SegmentedControlSize`, `IconName` (re-exported from `core/icon`). |
 | `__tests__/SegmentedControl.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
-| `__tests__/SegmentedControl.render.test.tsx` | Render: strip/segment roles, selection state, per-option and whole-group `disabled`, pill animation respects reduced motion. |
+| `__tests__/SegmentedControl.render.test.tsx` | Render: track/segment roles, selection state, per-option and whole-group `disabled`, pill animation respects reduced motion. |
 | `__tests__/SegmentedControl.motion.test.tsx` | Motion: reduce-motion snap, the real slide, and the device tier's `durationScale` reaching the pill. |
 
 ## Props
@@ -30,9 +29,10 @@ accent-coloured fill: elevation, not colour, is the selection cue here.
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the track `View`), applied exactly once, last. |
 | `testID` | `string` | — | Seeds `${testID}-pill`, `${testID}-${option.value}` and, while focused, `${testID}-${option.value}-focus-ring`. |
 
-No `tone`/`variant` union — the selected fill is always the neutral raised pill and the track is
-always `bg.sunken`; there is nothing for a closed union to resolve, the same reasoning `Tabs`/
-`RadioGroup` document for their own single-purpose shape.
+No `tone`/`variant` union — the selected fill is always the neutral raised pill; there is nothing
+for a closed union to resolve, the same reasoning `Tabs`/`RadioGroup` document for their own
+single-purpose shape. Track and pill backgrounds are resolved live from `floatingBackground`, not
+from `resolveSegmentedControlColors` (which only maps the two label colours) — see 1.4.11 below.
 
 ## Accessibility contract (WCAG)
 
@@ -49,32 +49,33 @@ always `bg.sunken`; there is nothing for a closed union to resolve, the same rea
   tap. Rather than tune a per-edge exception, every segment's own rendered `minWidth: 44` carries
   the width floor instead (the only axis this spec requires — `fullWidth` segments are already well
   over 44dp in practice).
-- **1.4.3** — the active label (`fg.default`, read on the pill's `bg.surface`) and the inactive
-  label (`fg.muted`, read on the track's `bg.sunken`) are each measured ≥ 4.5:1 for all 8 brands ×
-  both modes, including the inactive label against its own pressed background (`bg.raised`) — not
-  just the resting track.
-- **1.4.11** — deliberately **not** satisfied by colour: `bg.surface` (the pill) against
-  `bg.sunken` (the track) measures as low as 1.08:1, nowhere near 3:1, so this pairing could never
-  clear it on its own. The boundary is instead carried by elevation (`theme.elevation.md`, the
-  identical treatment `Card`'s `elevated` variant uses to differentiate itself with no border
-  either) — a decorative, not textual, distinction — and selection reaches assistive tech
-  independently via `aria-selected`, never by colour alone.
+- **1.4.3** — the active label (`fg.default`, read on the pill — `floatingBackground(theme, 'md')`)
+  and the inactive label (`fg.muted`, read on the track — `floatingBackground(theme, 'sm')`) are
+  each measured ≥ 4.5:1 for all 9 brands × both modes, including the inactive label against its own
+  pressed overlay (`stateLayerScrim` at `STATE_LAYER_OPACITY.pressed`, composited onto the track).
+- **1.4.11** — deliberately **not** satisfied by colour: the pill/track pairing measures ~1.1:1,
+  nowhere near 3:1, in dark mode. The pill is one `floatingBackground` level above the track
+  (`'md'` vs `'sm'`, the same step `Card`'s `elevated` variant uses), which guarantees it is
+  **lighter**, never darker — a real regression once shipped raw `bg.surface` under `theme.elevation.md`,
+  which measured pill *darker* than track (1.04–1.12:1 inverted) since that shadow token is
+  mode-unaware. Selection reaches assistive tech independently via `aria-selected`, never by colour.
 - **2.4.7** — the focused segment draws a `border.focus` ring
   (`${testID}-${option.value}-focus-ring`), the same treatment `BottomNavTab` uses. The pill is
   **not** it: it marks selection and moves only on change. Drawn *inside* the segment's bounds —
   segments render flush, so a gap-outside ring would spill over its neighbour.
-- **2.3.3** — the pill's movement is two `Animated.Value`s (`x`, `width`) driven off each segment's
-  own `onLayout` measurement, exactly `Tabs`' mechanism. Under reduced motion they're set with
-  `setValue` (an instant snap) instead of a tween — verified in the render tests by spying on
-  `Animated.timing` and asserting it isn't called when reduced motion is on.
+- **2.3.3** — only the pill's `translateX` animates: one Reanimated shared value driven off each
+  segment's own `onLayout` measurement (the pill's `width` is set straight from that measurement, not
+  tweened). Under reduced motion the value is assigned directly — an instant snap instead of a tween,
+  verified in the render and motion tests by asserting `withTiming` is not called.
 
 ## Motion
 
-The slide goes through **`useMotion()`**, not a direct `MOTION_DURATION` import: passing the
-configured constant straight to `Animated.timing` read the CONFIGURED duration, never the one
-resolved against the device tier, so `MOTION_TIER[tier].durationScale` never reached the pill.
-Reduce-motion is `motion.enabled` — no second `useReducedMotion()` call (`core/motion/MODULE.md`
-rule 6). Segment presses use `usePressState` (scale + state-layer overlay). The in-flight slide is stopped on effect cleanup and on unmount.
+The slide goes through **`useMotion()`**, never a direct `MOTION_DURATION` import — only
+`motion.timing` applies `MOTION_TIER[tier].durationScale`, so a raw constant would ignore the device
+tier. Reduce-motion is `motion.enabled` — no second `useReducedMotion()` call (`core/motion/MODULE.md`
+rule 6). Segment presses use `usePressState` (scale + state-layer overlay), a bounded
+`android_ripple` (gated off while the segment is disabled), and fire `haptics.selection()` on change.
+The in-flight slide is stopped on effect cleanup and on unmount.
 
 ## Patterns copied from Tabs / ButtonGroup / Card
 
@@ -90,10 +91,13 @@ rule 6). Segment presses use `usePressState` (scale + state-layer overlay). The
 
 ## Design decisions specific to this module
 
-- **The pill is neutral (`bg.surface`), not accent-coloured.** This is what the spec this module
+- **The pill is a neutral raised surface, not accent-coloured.** This is what the spec this module
   was built against calls for, and it is also the only choice that keeps every segment's label the
   same colour whether or not it happens to be selected in a given render — no per-brand accent
   contrast to chase the way `ButtonGroup`'s `accent.solid` fill required a whole edge-colour fix.
+- **Nested radii stay concentric.** Pill, focus ring and segment all use `radii.base` (8) —
+  `radii.md` (12) minus the track's `space[1]` inset (4) — never `radii.sm`, which under-rounds
+  them by 4dp against the track's own corner.
 - **Horizontal `hitSlop` is zero, full stop** — no per-edge "outer edge gets slop" exception like
   `ButtonGroup`'s. Only the vertical target is spec-mandated here; adding the outer-edge case would
   be unrequested surface area for a control whose segments (especially `fullWidth`) are already
@@ -122,5 +126,3 @@ Wrapped in `React.memo`. `handleSegmentLayout` is `useCallback`'d (mirroring `Ta
 - 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)** — segments were missing `android_ripple` entirely; added, bounded
-  (`borderless: false`), gated off while a segment is disabled.

package/lib/module/modules/segmented-control/SegmentedControl.js

@@ -1,25 +1,10 @@
 "use strict";
 
-/**
- * SegmentedControl — an inline, iOS-style single-choice control for switching between 2–5 mutually
- * exclusive options (filters, view modes, date ranges). A rounded track (`bg.sunken`) holds every
- * segment; the active one is marked by a raised pill (`bg.surface` + `Card`'s own elevation
- * treatment) that slides to the selected segment's measured position — the identical
- * measure-via-`onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator uses, keyed by
- * `value` so reordering `options` can never apply a stale measurement to the wrong segment.
- *
- * Unlike `ButtonGroup`/`Tabs`, the active state is NOT accent-coloured: the pill is a neutral raised
- * surface, and elevation — not colour — is what marks it, because `bg.surface` vs `bg.sunken` alone
- * measures nowhere near WCAG 1.4.11's 3:1 (see `SegmentedControl.variants.ts`). Selection reaches
- * assistive tech independently via `accessibilityState.selected`.
- *
- * The pill is a SELECTION marker, never a focus one — keyboard/AT focus draws its own inset ring on
- * the focused segment (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
- */
+/** Inline single-choice control; see `MODULE.md` for the elevation/a11y contract. */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import Reanimated from "react-native-reanimated";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useHaptics } from "../../core/haptics/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
@@ -90,13 +75,14 @@ const SegmentButton = /*#__PURE__*/memo(function SegmentButton({
       overflow: "hidden"
     }, press.animatedStyle, option.disabled === true && !segmentDisabled && styles.dimmed],
     children: [/*#__PURE__*/_jsx(Reanimated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: "none"
+      }]
     }), focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: [segmentedControlFocusRingStructure(theme), {
-        borderColor: theme.colors.border.focus
+        borderColor: theme.colors.border.focus,
+        pointerEvents: "none"
       }]
     }), option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
       name: option.icon,
@@ -134,6 +120,11 @@ function SegmentedControlImpl({
   const [focusedValue, setFocusedValue] = useState(null);
   const pillX = useAnimatedValue(0);
   const running = useRef(null);
+  const pillMotionStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: pillX.value
+    }]
+  }));
   const activeLayout = layouts[value];
   const handleSegmentLayout = useCallback((optionValue, event) => {
     const {
@@ -156,7 +147,7 @@ function SegmentedControlImpl({
     if (activeLayout === undefined) return undefined;
     running.current?.stop();
     if (!motion.enabled) {
-      pillX.setValue(activeLayout.x);
+      pillX.value = activeLayout.x;
       return undefined;
     }
     running.current = motion.timing(pillX, activeLayout.x, {
@@ -177,15 +168,14 @@ function SegmentedControlImpl({
       backgroundColor: floatingBackground(theme, "sm"),
       ...floatingSurfaceStyle(theme, "sm")
     }, disabled && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID ? `${testID}-pill` : undefined,
-      style: [segmentedControlPillStructure(theme), theme.elevation.md, {
-        backgroundColor: colors.pill,
+      style: [segmentedControlPillStructure(theme), {
+        backgroundColor: floatingBackground(theme, "md"),
         width: activeLayout?.width ?? 0,
-        transform: [{
-          translateX: pillX
-        }]
+        ...floatingSurfaceStyle(theme, "md")
+      }, pillMotionStyle, {
+        pointerEvents: "none"
       }]
     }), options.map(option => {
       const selected = option.value === value;

package/lib/module/modules/segmented-control/SegmentedControl.variants.js

@@ -1,23 +1,10 @@
 "use strict";
 
-/**
- * SegmentedControl's style + behaviour resolution — pure, React/lucide-free, same split as Tabs:
- *  - STRUCTURE (track padding/radius, segment height/padding, pill radius) lives in the
- *    `createThemedVariants` resolvers below, registered once per (theme, size) — never rebuilt per
- *    render.
- *  - COLOUR is resolved from the theme's ROLE colours (`resolveSegmentedControlColors`), never a raw
- *    hex: the track is always `bg.sunken`, the pill is always `bg.surface` (a neutral raised
- *    surface, NOT the accent role — unlike `ButtonGroup`/`Tabs`, selection here is conveyed by
- *    elevation + position, not by brand colour).
- *  - `resolveSegmentedControlSegmentAccessibility` derives the per-segment a11y surface purely, so
- *    the "selected"/"disabled" contract is unit-testable without rendering React Native.
- */
+/** Pure style + a11y resolvers for SegmentedControl — no React, no lucide. */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/Input/Tabs/ButtonGroup — 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 };
 export const SEGMENTED_CONTROL_SIZES = {
   sm: {
     height: 32,
@@ -32,24 +19,11 @@ export const SEGMENTED_CONTROL_SIZES = {
     hitSlop: slopFor(40)
   }
 };
-/**
- * Maps the control's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
- * per-segment `tone`: like `RadioGroup`/`Tabs`, this is pure indirection, not a union to resolve.
- *
- * The pill deliberately reads `bg.surface`, NOT an accent fill: `bg.surface` vs `bg.sunken` alone
- * measures as low as 1.08:1 (nowhere near WCAG 1.4.11's 3:1 — see `SegmentedControl.test.ts`), so
- * the boundary between the pill and the track is carried by elevation (`theme.elevation.md`, the
- * same treatment `Card`'s `elevated` variant uses to differentiate itself with no border either),
- * not by a colour contrast this pairing could never clear on its own. Selection is additionally
- * conveyed to assistive tech via `accessibilityState.selected`, never by colour alone.
- */
+/** Label colours only — track/pill/pressed backgrounds are resolved live in `SegmentedControl.tsx`. */
 export function resolveSegmentedControlColors(colors) {
   return {
-    track: colors.bg.sunken,
-    pill: colors.bg.surface,
     activeLabel: colors.fg.default,
-    inactiveLabel: colors.fg.muted,
-    pressedSegment: colors.bg.raised
+    inactiveLabel: colors.fg.muted
   };
 }
 export function resolveSegmentedControlSegmentAccessibility(input) {
@@ -92,20 +66,13 @@ export const segmentedControlTrackStructure = createThemedVariants(theme => ({
   }
 }));
 
-/**
- * The pill. `theme.radii.sm` — one step down from the track's `theme.radii.md` — nests cleanly
- * inside the track's own `space[1]` inset, the same "inner radius ≈ outer radius − inset" geometry
- * a nested rounded rect needs to read as concentric rather than mismatched. `top`/`bottom` pin it to
- * the row's own height (set by the segments, its flow siblings); `left`/`width` are driven by
- * `Animated.Value`s in `SegmentedControl.tsx`, keyed off each segment's own `onLayout` measurement —
- * same mechanism as `Tabs`' sliding indicator.
- */
+/** `radii.base` (12 − the track's `space[1]` inset of 4) nests concentric inside `radii.md`. */
 export const segmentedControlPillStructure = createThemedVariants(theme => ({
   base: {
     position: "absolute",
     top: 0,
     bottom: 0,
-    borderRadius: theme.radii.sm
+    borderRadius: theme.radii.base
   }
 }));
 
@@ -123,7 +90,7 @@ export const segmentedControlFocusRingStructure = createThemedVariants(theme =>
     right: 0,
     bottom: 0,
     borderWidth: theme.borderWidths.thick,
-    borderRadius: theme.radii.sm
+    borderRadius: theme.radii.base
   }
 }));
 
@@ -139,7 +106,7 @@ export const segmentedControlSegmentStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     minWidth: MIN_TOUCH_TARGET,
-    borderRadius: theme.radii.sm,
+    borderRadius: theme.radii.base,
     columnGap: theme.space[1]
   },
   variants: {

package/lib/module/modules/segmented-control/SegmentedControlProps.js

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

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

@@ -17,11 +17,12 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 |------|------|
 | `Select.tsx` | The component. Trigger + `Modal` composition, open/close state, focus handling. Option list is `core/list`'s `VirtualList` (device-tier windowing over FlashList-or-FlatList), built only while `open`. |
 | `Select.variants.ts` | Pure resolvers (`SELECT_SIZES`, `resolveSelectTriggerColors`, `resolveSelectRowColors`, `resolveSelectAccessibility`) + the themed structural resolvers (`selectTriggerStructure`, `selectOverlayStructure`, `selectSheetStructure`, `selectRowStructure`). No React, no lucide. |
-| `index.ts` | Public surface: `Select`, `SelectProps`, `SelectOption`, `SelectSize`. |
+| `index.ts` | Public surface: `Select`, `SelectProps`, `SelectOption`, `SelectOptionTone`, `SelectOptionCustomColors`, `SelectSize`. |
 | `__tests__/Select.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
 | `__tests__/Select.render.test.tsx` | Render: display, open/close, disabled gating, selection, backdrop dismiss, the row's resolved 44dp `minHeight`, and the web-portal opt-in branch (mocking `renderWebPortal`). |
 | `__tests__/Select.keyboard.test.tsx` | Web keyboard: tab stop opens on the selected option, arrows/Home/End/typeahead, Space selection, Escape. |
-| `__tests__/Select.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, and `Animated.timing` is never called. |
+| `__tests__/Select.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, and no Reanimated timing runs. |
+| `__tests__/Select.dom.test.tsx` | Real DOM (`jest.web.config.js`): the trigger and sheet under `react-dom`. |
 
 ## Props
 
@@ -32,6 +33,8 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 | `onValueChange` | `(value: string) => void` | — | Required. Fired on row press; the menu closes right after. |
 | `placeholder` | `string` | — | Shown when `value` matches no option. |
 | `label` | `string` | — | Field label above the trigger; also folded into its accessible name. |
+| `status` | `InputStatus` | `"default"` | `"error"` paints the danger border and sets `aria-invalid`, same union as `Input`. |
+| `errorText` | `string` | — | Rendered below the trigger, but only while `status="error"`. |
 | `disabled` | `boolean` | `false` | Blocks opening the menu; dimmed like Button's disabled state. |
 | `size` | `sm \| md \| lg` | `md` | 32 / 40 / 48 dp; short sizes reach 44 via `hitSlop`. |
 | `containerStyle` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
@@ -120,9 +123,7 @@ widening is one audited cast in `Select.variants.ts` rather than a cast at the c
   was built against. A future `Combobox`/`MultiSelect` would be a separate module, not a prop
   added here (closed-prop-contract).
 - The trigger's focus ring is a border-colour swap (`border.focus`), not Button's offset ring —
-  intentional: Select mimics Input-style focus conventions, which this library has not built an
-  `Input` module to confirm against yet (parallel build). Revisit if `Input` lands a different
-  convention and the two should be reconciled.
+  intentional: Select follows `input/`'s focus convention rather than Button's.
 - No measured anchor position — the overlay always centers within its container, regardless of
   where the trigger sits on screen, same as Menu's identical `justifyContent: "center"` overlay
   (see `menu/MODULE.md`'s Known gaps). A real anchor would need `Button` to forward refs (it
@@ -177,3 +178,5 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
 
 - 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.
+
+Backdrop scrim uses MOTION_TRANSFORM.scrimOpacity (aligned with Modal).