pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/swipeable-row/SwipeableRow.variants.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export function resolveSwipeableActionTone(colors, tone) {
+  if (tone === "accent") {
+    return {
+      fill: colors.accent.solid,
+      text: colors.accent.onSolid
+    };
+  }
+  if (tone === "neutral") {
+    return {
+      fill: colors.bg.sunken,
+      text: colors.fg.default
+    };
+  }
+  const status = colors.status[tone];
+  return {
+    fill: status.solid,
+    text: status.onSolid
+  };
+}
+export const swipeableRowStructure = createThemedVariants(_theme => ({
+  base: {
+    overflow: "hidden"
+  }
+}));
+export const swipeableActionsStructure = createThemedVariants(_theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+}));
+export const swipeableActionButtonStructure = createThemedVariants(theme => ({
+  base: {
+    minWidth: 72,
+    paddingHorizontal: theme.space[3],
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%"
+  }
+}));
+
+/**
+ * The keyboard/AT focus ring for one action button. Drawn INSIDE the button's own bounds, not as the
+ * gap-outside ring `Button`/`CopyButton` use: `swipeableRowStructure` clips to `overflow: "hidden"`,
+ * so an outset ring on the outermost action would be cut off by the row itself. Its colour is
+ * applied inline over this, never hardcoded here.
+ */
+export const swipeableActionFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick
+  }
+}));
+export const SWIPE_ACTION_WIDTH = 72;
+
+/**
+ * The always-visible tap affordance (WCAG 2.5.7 / 2.5.1): trailing edge, vertically centered, on
+ * top of `children` — it does not reflow consumer content, since `children` is opaque to this
+ * component. `pointerEvents: "box-none"` on the wrapping node (applied at the component, not here)
+ * keeps the rest of the row's width free for the pan gesture underneath.
+ */
+export const swipeableMoreAffordanceStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: theme.space[2],
+    justifyContent: "center"
+  }
+}));
+//# sourceMappingURL=SwipeableRow.variants.js.map

package/lib/module/modules/swipeable-row/index.js

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

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

@@ -42,6 +42,14 @@ nothing to close a union over.
 - `accessibilityRole="switch"`, `accessibilityState={{ checked: value, disabled }}` — RN's own
   `Switch` defaults the role but never sets `checked` itself, so `resolveSwitchAccessibility` sets
   both explicitly rather than relying on the native default.
+- **Deliberately the ONE control in the form family that keeps the OBJECT form.** Every sibling
+  (Checkbox, RadioGroup, Slider, …) moved to flat `aria-*` because react-native-web drops the object
+  — but `Switch` is a native primitive, not a `View`/`Pressable`: RN's `Switch.js` reads
+  `accessibilityState` and never destructures any `aria-*` prop, and `react-native-web` renders a
+  real `<input type="checkbox" role="switch" checked>` whose state comes from the `value` prop
+  directly, not from any accessibility prop at all. A flat `aria-checked` would land on the
+  wrapper `<div>` — an element with no role, where it's meaningless. Proven on the real DOM by
+  `__tests__/Switch.dom.test.tsx`.
 - **2.3.3 (reduced motion)** — N/A. This module adds no JS-driven animation; the thumb slide is
   native platform animation this wrapper doesn't control (unlike `Button`'s own press-fade).
 
@@ -63,3 +71,9 @@ None.
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its only child is RN's own `<Switch>` (host-level primitive) — nothing to memoize.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/switch/Switch.js

@@ -9,7 +9,7 @@
 
 import { memo } from "react";
 import { Switch as RNSwitch } from "react-native";
-import { useThemeColors } from "../../theme/index.js";
+import { useThemeColors } from "../../theme/hooks.js";
 import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Switch = /*#__PURE__*/memo(function Switch({

package/lib/module/modules/switch/Switch.variants.js

@@ -28,6 +28,14 @@ export function resolveSwitchColors(colors) {
  * RN's own `<Switch>` defaults `accessibilityRole` to `"switch"` but never sets
  * `accessibilityState.checked` itself (only `disabled` is merged in, on Android) — so this module
  * sets both explicitly, kept pure so the contract is testable without rendering React Native.
+ *
+ * The ONE control in the form family that keeps the OBJECT form. `Switch` is a native primitive, not
+ * a `View`/`Pressable`: RN's `Switch.js` reads `accessibilityState` and spreads everything else
+ * straight onto the platform view, which has no idea what `aria-checked` is — so a flat prop would
+ * announce nothing natively. Web needs nothing either: `react-native-web` renders a real
+ * `<input type="checkbox" role="switch" checked>`, so the DOM already carries the state, and a flat
+ * `aria-checked` would land on the wrapper `<div>` — an element with no role, where the attribute is
+ * not allowed. Object on native, native input on web; no flat form belongs here.
  */
 export function resolveSwitchAccessibility(input) {
   return {

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

@@ -8,7 +8,7 @@ from panel content and keeping this component simple and composable.
 
 | File | Role |
 |------|------|
-| `Tabs.tsx` | The component. Strip + per-tab composition, press wiring, a11y wiring, the indicator's layout measurement + animation. |
+| `Tabs.tsx` | The component. Strip + per-tab composition (private memo'd `TabStripItem`), press wiring, a11y wiring, the indicator's layout measurement + animation. |
 | `Tabs.variants.ts` | Pure resolvers (`TABS_SIZES`, `resolveTabsColors`, `resolveTabAccessibility`) + the themed structural resolvers (`tabsStripStructure`, `tabItemStructure`, `tabsIndicatorStructure`). No React, no lucide. |
 | `index.ts` | Public surface: `Tabs`, `TabsProps`, `TabItem`, `TabsSize`, `IconName` (re-exported from `core/icon`). |
 | `__tests__/Tabs.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
@@ -23,7 +23,7 @@ from panel content and keeping this component simple and composable.
 | `onValueChange` | `(value: string) => void` | — | Fires with the pressed tab's `value`. |
 | `size` | `sm \| md \| lg` | `md` | 36 / 44 / 52 dp visual height; `sm` reaches 44 via `hitSlop`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
-| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` ``, and the indicator gets `` `${testID}-indicator` ``, when set. |
+| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), and the indicator gets `` `${testID}-indicator` ``, when set. |
 
 No per-item `disabled` and no `tone` — every active label + indicator is the same accent role,
 every inactive label is the same neutral `fg.muted`. Same reasoning as `RadioGroup`: a single-
@@ -31,9 +31,13 @@ purpose control has no closed union of appearances to resolve.
 
 ## Accessibility contract (WCAG)
 
-- **4.1.2** — `accessibilityRole="tablist"` on the container, `"tab"` per item with
-  `accessibilityState={ selected }`. Both are real, recognised RN `AccessibilityRole` values — no
-  fallback needed on this RN version (same precedent as `RadioGroup`'s `"radiogroup"`).
+- **4.1.2** — `accessibilityRole="tablist"` on the container, `"tab"` per item with flat
+  `aria-selected={ selected }`. Both are real, recognised RN `AccessibilityRole` values — no
+  fallback needed on this RN version (same precedent as `RadioGroup`'s `"radiogroup"`). The flat
+  prop, never `accessibilityState={{ selected }}`: react-native-web's `createDOMProps` allowlist is
+  flat and silently drops the object form, so a tab never announced as selected on web — see
+  `docs/PLATFORM-A11Y-PROPS.md`. React Native itself accepts the flat prop natively and merges it
+  into `accessibilityState`, so this is a strict superset, not a native regression.
 - **2.5.x target size** — every size reaches ≥ 44 dp: `sm`'s 36 dp tab grows via `hitSlop`; `md`/
   `lg` are already ≥ 44 dp.
 - **1.4.3** — the active label is `accent.text`, the inactive label is `fg.muted`, both measured
@@ -45,16 +49,36 @@ purpose control has no closed union of appearances to resolve.
   brand × mode.
 - **1.4.11** — the indicator bar (`accent.solid`) is a non-text UI marker, measured ≥ 3:1 against
   the canvas for every brand × mode.
-- **2.3.3** — the indicator's movement is two `Animated.Value`s (`x`, `width`) driven off each
-  tab's own `onLayout` measurement. Under reduced motion they're set with `setValue` (an instant
-  snap) instead of `Animated.timing` (which would still tween through intermediate frames even at
-  `duration: 0` for a position **and** size change together) — verified in the render tests by
-  spying on `Animated.timing` and asserting it isn't called when reduced motion is on.
+- **2.4.7** — the focused tab draws a `border.focus` ring (`${testID}-focus-ring`), the same
+  treatment `BottomNavTab` uses. The indicator bar is **not** it: that marks selection and moves
+  only on press, so without the ring an external keyboard moved focus across the strip with nothing
+  on screen changing. The ring is drawn *inside* the tab's bounds — the strip's `columnGap` is one
+  space step, so a gap-outside ring (`Button`/`CopyButton`) would sit on top of the next tab.
+- **2.3.3** — the indicator's movement is two `Animated.Value`s (`translateX`, `scaleX`) driven off
+  each tab's own `onLayout` measurement. When `useMotion().enabled` is false (reduced motion or the
+  global kill switch) they're set with `setValue` (an instant snap) instead of tweening — verified
+  in the render tests by spying on `Animated.timing` and asserting it isn't called.
+
+## Indicator motion (transform-only, native driver)
+
+The indicator is a **1dp-wide bar** (`TABS_INDICATOR_UNIT_WIDTH`) stretched by an animated `scaleX`
+and positioned by an animated `translateX`. It previously animated `left`/`width`, which forces
+`useNativeDriver: false` and a layout pass per frame; only `opacity`/`transform` can run on the
+native driver, so the strip now animates entirely off the JS thread.
+
+Geometry: RN scales around the element's centre, so for a tab measured at `{x, width}` the targets
+are `translateX = x + width / 2 - 0.5` and `scaleX = width`. The structural resolver carries **no**
+`borderRadius` — a radius is applied before the transform, so `scaleX` would smear a 0.5dp round end
+into a lens the full width of the tab. At 2dp thick, square ends are indistinguishable from the
+previous `radii.full` pill.
+
+Duration and easing come from `core/motion` (`useMotion().timing`, `normal`) — no timing constant
+lives in this module. The in-flight animation is stopped on effect cleanup and on unmount.
 
 ## Patterns (copied from Button / RadioGroup)
 
 1. **Structure vs colour split.** Strip gap, tab height/padding/gap, and the indicator's
-   thickness/radius are `createThemedVariants` (registered once per `(theme, size)`); colour is
+   thickness/unit width are `createThemedVariants` (registered once per `(theme, size)`); colour is
    resolved by `resolveTabsColors` from role tokens and applied inline over the structural style.
 2. **Pure, testable resolvers** in `Tabs.variants.ts` (no React) so the WCAG + behaviour contract
    is unit-tested against the real palettes — never eyeballed.
@@ -66,7 +90,7 @@ purpose control has no closed union of appearances to resolve.
 
 ## Known gaps
 
-- The indicator starts at `x: 0, width: 0` until the active tab's first `onLayout` fires (native
+- The indicator starts at `translateX: 0, scaleX: 0` (invisible) until the active tab's first `onLayout` fires (native
   layout is asynchronous), so there's a single frame before its true position is known. No visible
   flash in practice — RN fires `onLayout` before the first paint completes — but it's worth noting
   since it isn't unit-tested (RNTL's test renderer never calls `onLayout` on its own; the render
@@ -77,4 +101,14 @@ purpose control has no closed union of appearances to resolve.
 
 ## Performance
 
-Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `items.map()` renders host `Pressable`/`Text`, and the one library child, `Icon`, only receives primitive props — nothing to memoize. The pre-existing `handleTabLayout` was already correctly `useCallback`'d.
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Each tab is a
+private, memo'd `TabStripItem`: the strip passes primitives plus the two stable callbacks
+(`onValueChange`, `handleTabLayout`), and the item builds its own press/layout handlers and style
+arrays, so a selection change re-renders the two affected tabs rather than the whole strip. The
+indicator's structural style, the root style array and the resolved colours are memoized.
+
+## 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.

package/lib/module/modules/tabs/Tabs.js

@@ -5,23 +5,92 @@
  * real design systems split the strip from panel content, and keeps the component simple and
  * composable (no `TabPanel`, no rendering children per tab).
  *
- * The active-tab indicator is two `Animated.Value`s (`x`, `width`) driven off each tab's own
- * `onLayout` measurement, keyed by `value` so reordering `items` doesn't scramble which
- * measurement belongs to which tab. Reduced motion (WCAG 2.3.3) snaps both values with `setValue`
- * instead of animating — same `duration: reducedMotion ? 0 : …` idiom `Button`'s press fade and
- * `Toast`'s slide use, just applied to `setValue` vs `Animated.timing` instead of a duration of 0
- * (a 0-width/0-position change would still tween through intermediate frames otherwise).
+ * The active-tab indicator is a 1dp-wide bar positioned and stretched entirely by transforms
+ * (`translateX` + `scaleX`) off each tab's own `onLayout` measurement, keyed by `value` so
+ * reordering `items` doesn't scramble which measurement belongs to which tab. Transforms are the
+ * only way this can run on the native driver — see `Tabs.variants.ts` for the geometry, and
+ * `core/motion` for the timing every module now shares.
+ *
+ * That indicator marks SELECTION, not focus: a tab holding keyboard/AT focus draws its own inset
+ * ring (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Pressable, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
-import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsIndicatorStructure, tabsStripStructure, TABS_SIZES } from "./Tabs.variants.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsFocusRingStructure, tabsIndicatorStructure, tabsStripStructure, TABS_INDICATOR_UNIT_WIDTH, TABS_SIZES } from "./Tabs.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-const INDICATOR_MOVE_MS = 200;
+/** Centre of the 1dp bar in its own untransformed box — `scaleX` grows around it, not from the left. */
+const INDICATOR_ORIGIN = TABS_INDICATOR_UNIT_WIDTH / 2;
+const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
+  item,
+  selected,
+  size,
+  theme,
+  labelColor,
+  pressedColor,
+  hitSlop,
+  fontSize,
+  iconSize,
+  onPress,
+  onLayout,
+  testID
+}) {
+  const a11y = resolveTabAccessibility({
+    selected
+  });
+  // Keyboard / external-keyboard / assistive-tech focus, held per tab so a focus change re-renders
+  // one item instead of the strip (same reasoning `BottomNavTab` documents).
+  const [focused, setFocused] = useState(false);
+  const handlePress = useCallback(() => onPress(item.value), [onPress, item.value]);
+  const handleLayout = useCallback(event => onLayout(item.value, event), [onLayout, item.value]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const focusRingStyle = useMemo(() => [tabsFocusRingStructure(theme), {
+    borderColor: theme.colors.border.focus
+  }], [theme]);
+  const pressedStyle = useMemo(() => ({
+    backgroundColor: pressedColor
+  }), [pressedColor]);
+  const itemStyle = useCallback(({
+    pressed
+  }) => [tabItemStructure(theme, {
+    size
+  }), pressed ? pressedStyle : null], [theme, size, pressedStyle]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize,
+    color: labelColor
+  }], [theme, fontSize, labelColor]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    "aria-selected": a11y["aria-selected"],
+    accessibilityLabel: item.label,
+    onPress: handlePress,
+    onLayout: handleLayout,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    hitSlop: hitSlop,
+    style: itemStyle,
+    children: [focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-focus-ring` : undefined,
+      style: focusRingStyle
+    }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      name: item.icon,
+      size: iconSize,
+      color: labelColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: item.label
+    })]
+  });
+});
 export const Tabs = /*#__PURE__*/memo(function Tabs({
   items,
   value,
@@ -31,12 +100,13 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const colors = resolveTabsColors(theme.colors);
+  const motion = useMotion();
+  const colors = useMemo(() => resolveTabsColors(theme.colors), [theme.colors]);
   const spec = TABS_SIZES[size];
   const [layouts, setLayouts] = useState({});
-  const indicatorX = useRef(new Animated.Value(0)).current;
-  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const indicatorX = useAnimatedValue(0);
+  const indicatorScaleX = useAnimatedValue(0);
+  const running = useRef(null);
   const activeLayout = layouts[value];
   const handleTabLayout = useCallback((itemValue, event) => {
     const {
@@ -57,71 +127,50 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
   }, []);
   useEffect(() => {
     if (activeLayout === undefined) return;
-    if (reducedMotion) {
-      indicatorX.setValue(activeLayout.x);
-      indicatorWidth.setValue(activeLayout.width);
+    running.current?.stop();
+    const toX = activeLayout.x + activeLayout.width / 2 - INDICATOR_ORIGIN;
+    const toScaleX = activeLayout.width / TABS_INDICATOR_UNIT_WIDTH;
+    if (!motion.enabled) {
+      indicatorX.setValue(toX);
+      indicatorScaleX.setValue(toScaleX);
       return;
     }
-    Animated.parallel([Animated.timing(indicatorX, {
-      toValue: activeLayout.x,
-      duration: INDICATOR_MOVE_MS,
-      useNativeDriver: false
-    }), Animated.timing(indicatorWidth, {
-      toValue: activeLayout.width,
-      duration: INDICATOR_MOVE_MS,
-      useNativeDriver: false
-    })]).start();
-  }, [activeLayout, reducedMotion, indicatorX, indicatorWidth]);
+    running.current = Animated.parallel([motion.timing(indicatorX, toX), motion.timing(indicatorScaleX, toScaleX)]);
+    running.current.start();
+    return () => running.current?.stop();
+  }, [activeLayout, motion, indicatorX, indicatorScaleX]);
+  useEffect(() => () => running.current?.stop(), []);
+  const indicatorStyle = useMemo(() => [tabsIndicatorStructure(theme), {
+    backgroundColor: colors.indicator,
+    transform: [{
+      translateX: indicatorX
+    }, {
+      scaleX: indicatorScaleX
+    }]
+  }], [theme, colors.indicator, indicatorX, indicatorScaleX]);
+  const rootStyle = useMemo(() => [tabsStripStructure(theme), style], [theme, style]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     accessibilityRole: "tablist",
-    style: [tabsStripStructure(theme), style],
+    style: rootStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       testID: testID ? `${testID}-indicator` : undefined,
-      style: [tabsIndicatorStructure(theme), {
-        backgroundColor: colors.indicator,
-        transform: [{
-          translateX: indicatorX
-        }],
-        width: indicatorWidth
-      }]
-    }), items.map(item => {
-      const selected = item.value === value;
-      const a11y = resolveTabAccessibility({
-        selected
-      });
-      const labelColor = selected ? colors.activeLabel : colors.inactiveLabel;
-      return /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-${item.value}` : undefined,
-        accessibilityRole: a11y.accessibilityRole,
-        accessibilityState: a11y.accessibilityState,
-        accessibilityLabel: item.label,
-        onPress: () => onValueChange(item.value),
-        onLayout: event => handleTabLayout(item.value, event),
-        hitSlop: spec.hitSlop,
-        style: ({
-          pressed
-        }) => [tabItemStructure(theme, {
-          size
-        }), pressed && {
-          backgroundColor: colors.pressedTab
-        }],
-        children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
-          name: item.icon,
-          size: spec.iconSize,
-          color: labelColor,
-          strokeWidth: ICON_STROKE
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: spec.fontSize,
-            color: labelColor
-          }],
-          children: item.label
-        })]
-      }, item.value);
-    })]
+      style: indicatorStyle
+    }), items.map(item => /*#__PURE__*/_jsx(TabStripItem, {
+      item: item,
+      selected: item.value === value,
+      size: size,
+      theme: theme,
+      labelColor: item.value === value ? colors.activeLabel : colors.inactiveLabel,
+      pressedColor: colors.pressedTab,
+      hitSlop: spec.hitSlop,
+      fontSize: spec.fontSize,
+      iconSize: spec.iconSize,
+      onPress: onValueChange,
+      onLayout: handleTabLayout,
+      testID: testID ? `${testID}-${item.value}` : undefined
+    }, item.value))]
   });
 });
 //# sourceMappingURL=Tabs.js.map

package/lib/module/modules/tabs/Tabs.variants.js

@@ -68,9 +68,7 @@ export function resolveTabsColors(colors) {
 export function resolveTabAccessibility(input) {
   return {
     accessibilityRole: "tab",
-    accessibilityState: {
-      selected: input.selected
-    }
+    "aria-selected": input.selected
   };
 }
 
@@ -119,17 +117,41 @@ export const tabItemStructure = createThemedVariants(theme => ({
 }));
 
 /**
- * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp); the pill radius is
- * `radii.full`. Position (`left`/`width`, via `transform`/`width`) is driven by `Animated.Value`s
- * in `Tabs.tsx`, not by this static resolver.
+ * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp). Its width is a fixed
+ * 1dp unit that `Tabs.tsx` stretches with an animated `scaleX` — a transform, so the whole indicator
+ * runs on the native driver (animating `width` cannot, and forces a layout pass per frame).
+ *
+ * No `borderRadius`: a corner radius is applied BEFORE the transform, so `scaleX` would smear a
+ * 0.5dp round end into a lens the full width of the tab. At 2dp thick, square ends are
+ * indistinguishable from the previous `radii.full` pill.
+ */
+export const TABS_INDICATOR_UNIT_WIDTH = 1;
+
+/**
+ * The keyboard/AT focus ring drawn over one tab's own bounds — the same treatment
+ * `bottomNavFocusRingStructure` uses, and inset rather than outset because the strip's `columnGap`
+ * is a single space step: a ring drawn outside a tab would overlap its neighbour. Focus is NOT the
+ * animated indicator below — that bar marks SELECTION, which moves only on press. Its colour is
+ * applied inline over this, never hardcoded here.
  */
+export const tabsFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick,
+    borderRadius: theme.radii.base
+  }
+}));
 export const tabsIndicatorStructure = createThemedVariants(theme => ({
   base: {
     position: "absolute",
     left: 0,
     bottom: 0,
-    height: theme.borderWidths.thick,
-    borderRadius: theme.radii.full
+    width: TABS_INDICATOR_UNIT_WIDTH,
+    height: theme.borderWidths.thick
   }
 }));
 //# sourceMappingURL=Tabs.variants.js.map

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

@@ -0,0 +1,51 @@
+# text
+
+Typography primitives — `Text` and `Heading` with closed `variant` unions. The base primitive most
+other modules compose, so a colour defect here is a defect everywhere.
+
+## Usage
+
+```tsx
+import { Text, Heading } from 'pixelize-native-library/text';
+
+<Heading variant="h2">Title</Heading>
+<Text variant="body-sm">Secondary copy</Text>
+```
+
+## Variants
+
+| `Text` variant | size | weight | colour role |
+|---|---|---|---|
+| `body` | `md` | regular | `fg.default` |
+| `body-sm` | `sm` | regular | `fg.default` |
+| `caption` | `xs` | regular | `fg.muted` |
+| `label` | `md` | semibold | `fg.default` |
+| `label-sm` | `sm` | semibold | `fg.default` |
+| `overline` | `xs` | bold | `fg.muted` |
+
+`Heading` reuses `label` / `label-sm` and overrides only the font size (`h1` `3xl` → `h4` `lg`). It
+renders with `accessibilityRole="header"` **and `aria-level` derived 1:1 from `variant`**
+(`HEADING_LEVELS` in `Text.variants.ts`) — `react-native-web` renders every `header` role as `<h1>`
+unless `aria-level` is set, so without this every `Heading` variant rendered the same DOM tag
+regardless of size (see `core/heading/MODULE.md`). `Text` carries neither prop.
+
+## Colour
+
+A variant may bind to **`fg.default` or `fg.muted` only** — the union is closed at the type level
+(`TextColorRole`), and `Text.test.ts` measures both roles across all 9 brands × both modes against
+`bg.canvas`, `bg.surface` and `bg.raised`. Measured minimums: `fg.default` 6.10 / 6.65 / 6.31,
+`fg.muted` 6.52 / 6.99 / 6.71 — all clear WCAG 1.4.3's 4.5:1.
+
+**`fg.subtle` is not available to a text variant.** It is the flat `gray[500]` rung tuned to the 3:1
+non-text tier, with no `readableOn()` derivation behind it, and measures **3.19:1** against
+`bg.canvas` on emerald light (also failing on radiant 3.57, rosewood 3.59, meadow 4.16, lavender
+4.28). `overline` shipped bound to it at `fontSize.xs` — 12dp, with no large-text exemption to fall
+back on. `Text.test.ts` pins the `fg.muted` binding so it cannot come back; `Timeline` documents the
+same defect for its timestamp.
+
+## Testing
+
+`resolveTextColor(colors, variant)` is pure and takes `RoleColors`, so the WCAG suite measures the
+exact value the component renders without building a `Theme` or a React tree. `TEXT_VARIANTS` is the
+runtime companion to the `TextVariant` union so the suite enumerates every variant a consumer can
+pass — a new variant is covered the moment it is added.

package/lib/module/modules/text/Text.js

@@ -0,0 +1,47 @@
+"use strict";
+
+/**
+ * Text — typography primitive with a closed `variant` union. Replaces ad-hoc fontSize literals.
+ */
+
+import { memo, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { HeadingText } from "../../core/heading/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { HEADING_LEVELS, resolveHeadingStyle, resolveTextStyle } from "./Text.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Text = /*#__PURE__*/memo(function Text({
+  variant = 'body',
+  children,
+  numberOfLines,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [resolveTextStyle(theme, variant), style], [theme, variant, style]);
+  return /*#__PURE__*/_jsx(RNText, {
+    testID: testID,
+    numberOfLines: numberOfLines,
+    style: rootStyle,
+    children: children
+  });
+});
+export const Heading = /*#__PURE__*/memo(function Heading({
+  variant = 'h2',
+  children,
+  numberOfLines,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [resolveHeadingStyle(theme, variant), style], [theme, variant, style]);
+  return /*#__PURE__*/_jsx(HeadingText, {
+    testID: testID,
+    numberOfLines: numberOfLines,
+    accessibilityRole: "header",
+    "aria-level": HEADING_LEVELS[variant],
+    style: rootStyle,
+    children: children
+  });
+});
+//# sourceMappingURL=Text.js.map