pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/modules/pagination/Pagination.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Pagination — page navigation controls in three shapes, driven entirely by props: `numbered` (a
+ * windowed strip of page numbers), `compact` ("Page 3 of 12" between two arrows — the shape that
+ * actually fits a phone), and `loadMore` (one button, for a cursor/infinite list that has no page
+ * count at all).
+ *
+ * All the interesting logic is pure and lives in `Pagination.variants.ts` — `buildPageRange` is the
+ * whole reason this module exists, since every app that re-derives it gets an edge case wrong.
+ * This file is the wiring: role colours in, `onPageChange` out. It owns no state and makes no
+ * assumption about where the pages come from.
+ *
+ * The one animated surface is `compact`'s summary, which fades in when the page changes
+ * (`core/motion`). The `numbered` strip is deliberately static — it is a row of controls, and
+ * animating each one on every page change is noise, not feedback.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { PaginationSize, PaginationVariant } from "./Pagination.variants";
+export interface PaginationProps {
+    /** The current page, 1-indexed. Out-of-bounds values clamp — they never throw or blank the strip. */
+    page: number;
+    /** Total pages. `0` renders nothing (there is nothing to paginate). Ignored by `loadMore`. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    variant?: PaginationVariant;
+    /** Pages shown either side of the current one. `numbered` only. */
+    siblingCount?: number;
+    /** Adds jump-to-first / jump-to-last controls. `numbered` and `compact`. */
+    showFirstLast?: boolean;
+    disabled?: boolean;
+    /** Blocks every control and announces `busy`; in `loadMore` it also swaps in a spinner. */
+    loading?: boolean;
+    /** Required by `variant="loadMore"`. */
+    onLoadMore?: () => void;
+    /** Required by `variant="loadMore"` — `false` renders nothing once no page is in flight. */
+    hasMore?: boolean;
+    loadMoreLabel?: string;
+    size?: PaginationSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+declare function PaginationImpl({ page, pageCount, onPageChange, variant, siblingCount, showFirstLast, disabled, loading, onLoadMore, hasMore, loadMoreLabel, size, style, testID, }: PaginationProps): import("react").JSX.Element | null;
+export declare const Pagination: import("react").MemoExoticComponent<typeof PaginationImpl>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/lib/typescript/modules/pagination/Pagination.variants.d.ts

@@ -0,0 +1,240 @@
+/**
+ * Pagination's pure logic + style resolution — same split as Button/ButtonGroup:
+ *  - PAGE ARITHMETIC (`buildPageRange`, `clampPage`) is the reason this module exists. It is pure,
+ *    total, and never throws, so the exhaustive edge cases live in `Pagination.test.ts` rather than
+ *    being re-derived (and subtly re-broken) in every consumer app.
+ *  - STRUCTURE (control height/padding/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 (`resolvePaginationColors`), never a raw hex.
+ *  - ACCESSIBILITY prop derivation is `resolvePaginationStep` / `resolvePaginationPage`, kept pure
+ *    so the "boundary arrow is disabled / current page is selected" contract is unit-testable
+ *    without rendering React Native.
+ *
+ * Free of React, `lucide`, and any native import, so the WCAG + logic tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type PaginationVariant = "numbered" | "compact" | "loadMore";
+export type PaginationSize = "sm" | "md";
+/** One slot in the numbered strip: a page number, or a gap marker standing in for a run of pages. */
+export type PageItem = number | "ellipsis";
+/** Same touch-target floor as Button/ButtonGroup (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * The WIDTH-axis touch floor, met by the rendered node itself rather than by horizontal `hitSlop` —
+ * see `resolvePaginationHitSlop` for why this control can never expand sideways.
+ */
+export declare const PAGINATION_CONTROL_MIN_WIDTH = 44;
+export interface PaginationSizeSpec {
+    /** Visual height in dp (fixed, not a minimum — the hitSlop math depends on it). */
+    readonly height: number;
+    /** Label size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Icon glyph size in dp. */
+    readonly iconSize: number;
+    /** Vertical touch expansion so `height + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+/**
+ * Pagination-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`.
+ */
+export declare const PAGINATION_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+};
+/** A page count of 0 means "nothing to paginate"; negatives and garbage normalise to it. */
+export declare function normalizePageCount(pageCount: number): number;
+/**
+ * The current page, forced into `[1, pageCount]`. An out-of-bounds `page` (a stale value after a
+ * filter shrank the result set is the common one) clamps rather than rendering an empty strip or
+ * throwing. With no pages at all this still answers `1`, so a caller that renders anyway shows
+ * "Page 1 of 0" instead of "Page 0 of 0" — `Pagination` itself renders nothing in that state.
+ */
+export declare function clampPage(page: number, pageCount: number): number;
+/**
+ * The page-window resolver — which page numbers the numbered strip shows around `page`, with
+ * `"ellipsis"` standing in for each elided run.
+ *
+ * The strip is a fixed width so it never reflows as the user pages through: first + last + current
+ * + both sibling runs + both gap markers = `2·siblingCount + 5` slots. Below that many pages there
+ * is nothing to elide, so every page is listed. Above it, one or both gaps appear; whichever end
+ * has no gap gets a longer run of consecutive pages (`2·siblingCount + 3`) so the total stays
+ * constant.
+ *
+ * A gap is only drawn once it would hide at least TWO pages: a marker standing in for a single
+ * number is strictly worse than the number (it costs the same slot and navigates nowhere), which
+ * is why the thresholds are `> 3` / `< total - 2` and not the usual off-by-one `> 2` / `< total - 1`.
+ */
+export declare function buildPageRange(page: number, pageCount: number, siblingCount?: number): PageItem[];
+export interface PaginationColors {
+    /** Current-page pill fill. */
+    readonly currentFill: string;
+    /** Label on `currentFill` — the derived on-colour, so it always clears 4.5:1 (never a hard white). */
+    readonly onCurrentFill: string;
+    /** Idle page number, compact summary, load-more label — read on the canvas. */
+    readonly label: string;
+    /**
+     * Every INERT control: a boundary arrow, any control while the whole component is disabled or
+     * loading, and the decorative ellipsis. Deliberately a colour swap and NOT Button's
+     * `opacity: 0.5` dim — see MODULE.md's 1.4.11 note: a disabled arrow is the only thing telling a
+     * user they are at the first/last page, so it has to stay perceivable rather than take the
+     * "disabled controls are exempt from contrast" exemption.
+     */
+    readonly inactiveLabel: string;
+    /** Pressed background for an interactive control; `label` stays ≥ 4.5:1 on it. */
+    readonly pressedFill: string;
+    /** The load-more button's outline (WCAG 1.4.11 ≥ 3:1 on every brand), same token Button uses. */
+    readonly border: string;
+}
+/**
+ * Maps the component's fixed visual roles onto ROLE colours. There is no `tone` union: the current
+ * page is always the accent role and the outline is always the neutral interactive outline, so —
+ * like `ButtonGroup` — this is pure indirection, not a union to resolve.
+ *
+ * `pressedFill` is `bg.sunken`, NOT `bg.hover`: same class of fix Button's "neutral" tone and
+ * RadioGroup/Menu document (the saturated `hover` mid-tone drops a brand-tinted label below 4.5:1).
+ * Unlike ButtonGroup it needs no compositing to clear the selected fill, because controls here are
+ * separated by a `space[1]` gutter — a pressed neighbour never shares an edge with the current-page
+ * pill, so that boundary is always fill-vs-canvas.
+ */
+export declare function resolvePaginationColors(colors: RoleColors): PaginationColors;
+export type PaginationStepKind = "first" | "previous" | "next" | "last";
+export declare const STEP_LABELS: {
+    readonly first: "First page";
+    readonly previous: "Previous page";
+    readonly next: "Next page";
+    readonly last: "Last page";
+};
+export declare const DEFAULT_LOAD_MORE_LABEL = "Load more";
+export declare function formatPageLabel(page: number, pageCount: number): string;
+export interface PaginationStepInput {
+    readonly kind: PaginationStepKind;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+}
+export interface PaginationStepA11y {
+    readonly accessibilityRole: "button";
+    readonly accessibilityLabel: string;
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-disabled": boolean;
+    readonly "aria-busy": boolean;
+    /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
+    readonly disabled: boolean;
+    /** The page a press navigates to; `undefined` whenever the control is inert. */
+    readonly targetPage: number | undefined;
+}
+/**
+ * One step control's accessibility + navigation surface. A step is inert when the whole component
+ * is disabled/loading OR when its target is out of range or already the current page — the
+ * boundary case, which announces `disabled` so a screen reader user learns they are at an end
+ * instead of pressing a silently dead control.
+ */
+export declare function resolvePaginationStep(input: PaginationStepInput): PaginationStepA11y;
+export interface PaginationPageInput {
+    readonly item: number;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+}
+export interface PaginationPageA11y {
+    readonly accessibilityRole: "button";
+    readonly accessibilityLabel: string;
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-disabled": boolean;
+    readonly "aria-busy": boolean;
+    /** The WEB half of "this is the page you are on". `aria-current="page"` is the WAI-ARIA signal
+     *  for exactly this, and unlike `aria-selected` it IS valid on `role="button"`. No React Native
+     *  equivalent exists, so the native half rides `accessibilityState.selected` below. */
+    readonly "aria-current": "page" | undefined;
+    /** The NATIVE half — discarded by react-native-web, so no invalid `aria-selected` on a button. */
+    readonly accessibilityState: {
+        readonly selected: boolean;
+    };
+    readonly disabled: boolean;
+    readonly targetPage: number | undefined;
+    readonly current: boolean;
+}
+/**
+ * One page-number control's accessibility + navigation surface.
+ *
+ * The current page is inert (`targetPage: undefined`) but is NOT reported disabled: it is the
+ * selected item, not an unavailable one, and announcing both would tell assistive tech the user's
+ * own position is broken. `disabled` therefore only ever reflects the component-wide gate.
+ */
+export declare function resolvePaginationPage(input: PaginationPageInput): PaginationPageA11y;
+export interface PaginationHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/**
+ * Vertical expansion only. Controls sit in a row `space[1]` apart, and React Native never clips
+ * `hitSlop` to a sibling's bounds — it resolves an overlap to whichever sibling renders LATER, not
+ * to whichever is visually closer to the tap, so horizontal slop wide enough to matter would hand a
+ * tap near a gutter to the wrong page (the defect `ButtonGroup` documents fixing the same way).
+ * The width axis is met by `PAGINATION_CONTROL_MIN_WIDTH` on the rendered node instead.
+ */
+export declare function resolvePaginationHitSlop(size: PaginationSize): PaginationHitSlop;
+/**
+ * Structural styles only — layout, height, padding, radius, border WIDTH. No colours (those are
+ * resolved from `RoleColors` and applied inline), so these compile once per theme identity via the
+ * `WeakMap`-cached themed resolver and never rebuild per render.
+ */
+export declare const paginationRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The numbered strip's root. A column box on purpose: it stretches the horizontal `ScrollView`
+ * inside it to the root's own width, which is what BOUNDS the scroll view — a horizontal
+ * `ScrollView` sized by its content instead overflows its parent and never scrolls. No theme
+ * dependency, so the untethered resolver — same idiom `drawerOverlayStructure` uses.
+ */
+export declare const paginationStripRootStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const paginationScrollContentStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const paginationControlStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+        };
+        md: {
+            height: 40;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** Narrower than a control: the gap marker is decorative, so it owes no touch target. */
+export declare const paginationEllipsisStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+        };
+        md: {
+            height: 40;
+        };
+    };
+}, import("react-native").ViewStyle>;
+export declare const paginationLoadMoreStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+        };
+        md: {
+            height: 40;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Pagination.variants.d.ts.map

package/lib/typescript/modules/pagination/PaginationControls.d.ts

@@ -0,0 +1,50 @@
+/**
+ * PRIVATE sub-components (not exported from `index.ts`). One control per node, each `React.memo`'d
+ * and fed primitives only, so a page change re-renders the two controls whose state actually
+ * changed instead of the whole strip — and so no `onPress`/`style` closure is rebuilt per control
+ * per render.
+ */
+import type { IconName } from "../../core/icon";
+import type { Theme } from "../../theme/hooks";
+import type { PaginationColors, PaginationHitSlop, PaginationSize, PaginationStepKind } from "./Pagination.variants";
+interface PaginationStepControlProps {
+    readonly kind: PaginationStepKind;
+    readonly icon: IconName;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly size: PaginationSize;
+    readonly iconSize: number;
+    readonly theme: Theme;
+    readonly colors: PaginationColors;
+    readonly hitSlop: PaginationHitSlop;
+    readonly onPageChange: (page: number) => void;
+    readonly testID: string | undefined;
+}
+export declare const PaginationStepControl: import("react").NamedExoticComponent<PaginationStepControlProps>;
+interface PaginationPageControlProps {
+    readonly item: number;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly blocked: boolean;
+    readonly size: PaginationSize;
+    readonly fontSize: number;
+    readonly theme: Theme;
+    readonly colors: PaginationColors;
+    readonly hitSlop: PaginationHitSlop;
+    readonly onPageChange: (page: number) => void;
+    readonly testID: string | undefined;
+}
+export declare const PaginationPageControl: import("react").NamedExoticComponent<PaginationPageControlProps>;
+interface PaginationEllipsisProps {
+    readonly size: PaginationSize;
+    readonly fontSize: number;
+    readonly theme: Theme;
+    readonly color: string;
+}
+export declare const PaginationEllipsis: import("react").NamedExoticComponent<PaginationEllipsisProps>;
+export {};
+//# sourceMappingURL=PaginationControls.d.ts.map

package/lib/typescript/modules/pagination/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Public surface of `pixelize-native-library/pagination`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The visual resolvers (`resolvePaginationColors`, `PAGINATION_SIZES`,
+ * …) stay internal — a consumer configures a Pagination through its props.
+ *
+ * `buildPageRange` / `clampPage` are the documented exception: they are pure, dependency-free page
+ * arithmetic, and the whole point of this module is that an app never re-derives them by hand for
+ * a pager it draws itself.
+ */
+export { Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";
+export { buildPageRange, clampPage } from "./Pagination.variants";
+export type { PageItem, PaginationSize, PaginationVariant } from "./Pagination.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/pin-input/PinInput.d.ts

@@ -27,6 +27,12 @@ export interface PinInputProps {
     secureTextEntry?: boolean;
     keyboardType?: PinInputKeyboardType;
     status?: PinInputStatus;
+    /**
+     * The validity message. Shown below the row and folded into the field's accessible name when
+     * `status` is `"error"` — same prop name and same rule as `Input`/`FormField`. Without it an
+     * error is a red border and nothing else, which no screen-reader or colour-blind user can perceive.
+     */
+    errorText?: string;
     disabled?: boolean;
     size?: PinInputSize;
     autoFocus?: boolean;

package/lib/typescript/modules/pin-input/PinInput.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of React and of any `TextInput`/`Pressable` import, so the WCAG + behaviour tests import it
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type PinInputSize = "sm" | "md" | "lg";
 /** A validity state, not a brand tone — same reasoning as `InputStatus`. */
 export type PinInputStatus = "default" | "error";
@@ -98,22 +98,35 @@ export interface PinInputAccessibilityInput {
     readonly accessibilityLabel: string;
     readonly value: string;
     readonly disabled?: boolean | undefined;
-    /** When true, `accessibilityValue.text` is masked to `•` per digit — never the raw value — the a11y mirror of the visual dot masking. */
+    /** When true, the announced value is masked to `•` per digit — never the raw value — the a11y mirror of the visual dot masking. */
     readonly secureTextEntry?: boolean | undefined;
+    readonly status?: PinInputStatus | undefined;
+    /** The validity message, shown below the row and appended to the accessible name in the error state. */
+    readonly errorText?: string | undefined;
 }
 export interface PinInputAccessibilityProps {
+    /** The caller's required name, with `errorText` appended in the error state (same rule as `FormField`). */
     readonly accessibilityLabel: string;
     /**
      * Announces the digits entered so far — this is the one real field, not N mystery boxes. When
      * `secureTextEntry` is set, masked to one `•` per digit so a screen reader never speaks the raw
      * code aloud, matching what a native masked field announces.
+     *
+     * Emitted in BOTH forms deliberately, unlike every other control here. The host is a `TextInput`,
+     * and the two platforms read opposite halves: `react-native-web` picks only the flat
+     * `aria-valuetext` and drops `accessibilityValue`, while RN's `TextInput.js` destructures only the
+     * five `aria-*` STATE aliases — it never reads `aria-value*` at all (unlike `View`/`Pressable`),
+     * so the flat prop is spread onto a native view that ignores it. Flat-only would be silent on
+     * native; object-only is silent on web.
      */
     readonly accessibilityValue: {
         readonly text: string;
     };
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    readonly "aria-valuetext": string;
+    readonly "aria-disabled": boolean;
+    readonly "aria-invalid": boolean;
+    /** The validity message to render below the row — the visible half of WCAG 3.3.1 / 1.4.1. */
+    readonly message: string | undefined;
     /** The `TextInput` `editable` prop — false while disabled, so the field blocks input. */
     readonly editable: boolean;
 }
@@ -121,6 +134,10 @@ export interface PinInputAccessibilityProps {
  * Derives the accessibility surface once, purely — same shape as `resolveInputAccessibility`, but
  * `accessibilityLabel` is required (never a fallback) because PinInput has no visible text label of
  * its own; the caller must always name the field (e.g. "6-digit verification code").
+ *
+ * `status="error"` used to change the box border and NOTHING else — no message, no programmatic
+ * flag — so the failure was carried by colour alone (WCAG 1.4.1) and never identified (3.3.1). The
+ * error now joins the accessible name and sets `aria-invalid`, exactly as `FormField` does it.
  */
 export declare function resolvePinInputAccessibility(input: PinInputAccessibilityInput): PinInputAccessibilityProps;
 /**

package/lib/typescript/modules/progress-bar/ProgressBar.d.ts

@@ -1,8 +1,12 @@
 /**
- * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) renders a static fill
- * sized to the value; indeterminate (`value` omitted) renders a looping `Animated` sweep across the
- * track, skipped in favour of a static half-filled track when `useReducedMotion()` is true (WCAG
- * 2.3.3 — never a frame frozen mid-sweep).
+ * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) tweens a full-width fill
+ * by `scaleX` off its left edge; indeterminate (`value` omitted) renders a looping sweep across the
+ * track, skipped in favour of a static half-filled track when motion is off (WCAG 2.3.3 — never a
+ * frame frozen mid-sweep).
+ *
+ * The determinate fill is `scaleX`, never an animated `width`: only `opacity` and `transform` run on
+ * the native driver, and a per-frame width would force a layout pass. `transformOrigin: "left"`
+ * anchors the growth so the fill does not expand from its centre.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { ProgressBarSize, ProgressBarTone } from "./ProgressBar.variants";

package/lib/typescript/modules/progress-bar/ProgressBar.variants.d.ts

@@ -14,7 +14,7 @@
  * Everything here is free of React and of any Animated import, so the WCAG + behaviour tests import
  * it directly (mocking only `react-native`'s `StyleSheet`, as `Button.variants` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type ProgressBarTone = "accent" | "success" | "warning" | "danger";
 export type ProgressBarSize = "sm" | "md";
 export interface ProgressBarSizeSpec {
@@ -32,13 +32,11 @@ export declare const PROGRESS_BAR_SIZES: {
 };
 /** Fraction of the track's measured width the indeterminate sweep segment covers. */
 export declare const SWEEP_FRACTION = 0.4;
-/** One full indeterminate sweep cycle, ms. */
-export declare const SWEEP_DURATION_MS = 1200;
 /** Fill fraction rendered, static, when the sweep is skipped for reduced motion (WCAG 2.3.3). */
 export declare const REDUCED_MOTION_FILL_FRACTION = 0.5;
 /**
  * Clamps a caller-given value onto the 0–100 scale the track, the fill width, and
- * `accessibilityValue.now` all agree on. `undefined` is preserved — that absence IS the
+ * `aria-valuenow` all agree on. `undefined` is preserved — that absence IS the
  * indeterminate signal, never a value to coerce. A `NaN` (a caller's bad ratio math) clamps to `0`
  * rather than propagating into a `NaN%` width or an invalid `now`.
  */
@@ -66,24 +64,24 @@ export interface ProgressBarAccessibilityInput {
 }
 export interface ProgressBarAccessibilityProps {
     readonly accessibilityRole: "progressbar";
-    readonly accessibilityValue: {
-        readonly min: number;
-        readonly max: number;
-        readonly now: number;
-    } | undefined;
-    readonly accessibilityState: {
-        readonly busy: boolean;
-    };
+    readonly "aria-valuemin": number | undefined;
+    readonly "aria-valuemax": number | undefined;
+    readonly "aria-valuenow": number | undefined;
+    readonly "aria-busy": boolean;
 }
 /**
  * Derives the accessibility surface once, purely, so the determinate/indeterminate contract is
  * testable without a renderer:
- *  - determinate (`value` given) → `accessibilityValue` carries `now`; `busy` is false once the
+ *  - determinate (`value` given) → `aria-valuenow` carries the position; `busy` is false once the
  *    value is known.
- *  - indeterminate (`value` omitted) → NO `accessibilityValue` at all. The absence of `now` is how
+ *  - indeterminate (`value` omitted) → NO value props at all. The absence of `now` is how
  *    assistive tech reports "indeterminate" — inventing a guessed number would misreport actual
- *    progress. `busy: true` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
+ *    progress. `aria-busy` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
  *    convey to a screen reader.
+ *
+ * Flat `aria-*` rather than the `accessibilityState`/`accessibilityValue` objects: RN's `View`
+ * folds the flat props back into those objects, while react-native-web only ever forwards the flat
+ * ones — the object form reaches nothing at all on web.
  */
 export declare function resolveProgressBarAccessibility(input: ProgressBarAccessibilityInput): ProgressBarAccessibilityProps;
 /**

package/lib/typescript/modules/radio-group/RadioGroup.d.ts

@@ -19,6 +19,12 @@ export interface RadioGroupProps {
     onValueChange: (value: string) => void;
     disabled?: boolean;
     size?: RadioGroupSize;
+    /**
+     * Names the group itself. Without it the `radiogroup` container is announced unnamed, so a reader
+     * hears each option's own label with nothing saying what the set of options is FOR (WCAG 1.3.1) —
+     * the rows carry their labels, the container carried none.
+     */
+    accessibilityLabel?: string;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/radio-group/RadioGroup.variants.d.ts

@@ -7,7 +7,7 @@
  *  - `resolveRadioRowAccessibility` derives the per-row a11y surface purely, so the
  *    "selected"/"disabled" contract is unit-testable without rendering React Native.
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type RadioGroupSize = "sm" | "md";
 /** Same floor as Button — Apple HIG minimum and WCAG 2.5.5 (AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -26,10 +26,17 @@ export interface RadioGroupSizeSpec {
 /**
  * RadioGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `rowMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ *
+ * Both sizes meet the 44dp floor with the RENDERED row, so `slopFor` resolves to 0 and no row's
+ * touch rectangle expands into the `rowGap` a neighbour would also expand into. `sm` used to be a
+ * 36dp row + 4dp slop inside a 4dp gap, so adjacent rows' hit rectangles met exactly and a tap on
+ * the seam was resolved by sibling z-order rather than geometry (WCAG 2.5.8) — the same defect
+ * `ButtonGroup`/`Pagination` fix the same way: meet the floor with the node, never with `hitSlop`.
+ * `sm` stays the denser variant through its smaller ring/dot/font and tighter gaps.
  */
 export declare const RADIO_GROUP_SIZES: {
     readonly sm: {
-        readonly rowMinHeight: 36;
+        readonly rowMinHeight: 44;
         readonly ringSize: 18;
         readonly dotSize: 8;
         readonly fontSize: 14;
@@ -65,21 +72,35 @@ export interface RadioRowAccessibilityInput {
 }
 export interface RadioRowAccessibilityProps {
     readonly accessibilityRole: "radio";
-    readonly accessibilityState: {
-        readonly checked: boolean;
-        readonly disabled: boolean;
-    };
+    readonly "aria-checked": boolean;
+    readonly "aria-disabled": boolean;
     /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
     readonly disabled: boolean;
 }
 /**
  * Derives one row's accessibility surface purely, mirroring `resolveButtonAccessibility`. Reports
- * `accessibilityState.checked` — not `.selected` (that key is for role="tab"/"option"; a radio's
- * checked state is `checked`, same as this repo's Checkbox/Switch) — so the rendered `disabled`
- * prop and the announced `accessibilityState.disabled` always agree, so a screen reader never
- * hears a state the touch handling contradicts.
+ * `aria-checked` — not `aria-selected` (that one is for role="tab"/"option"; a radio's checked state
+ * is `checked`, same as this repo's Checkbox/Switch) — so the rendered `disabled` prop and the
+ * announced `aria-disabled` always agree, so a screen reader never hears a state the touch handling
+ * contradicts.
+ *
+ * FLAT `aria-*` rather than `accessibilityState={{…}}`: react-native-web 0.21 drops the object form
+ * outright, so the web build announced `role="radio"` with no checked state. See
+ * `Checkbox.variants.ts` for the full reasoning — both platforms read the flat form.
  */
 export declare function resolveRadioRowAccessibility(input: RadioRowAccessibilityInput): RadioRowAccessibilityProps;
+export interface RadioGroupKeyInput {
+    readonly key: string;
+    /** The index the group's single tab stop currently sits on. */
+    readonly index: number;
+    readonly count: number;
+}
+/**
+ * The WAI-ARIA radio-group keyboard contract, resolved purely: arrows move one row and WRAP (a radio
+ * group's arrows both move and select, so there is no "past the end" to fall off), Home/End jump to
+ * the ends. Returns `undefined` for any other key — also how the caller knows not to swallow it.
+ */
+export declare function resolveRadioGroupKeyIndex(input: RadioGroupKeyInput): number | undefined;
 /** Gap between rows. Structural, theme-scaled, registered once per (theme, size). */
 export declare const radioGroupStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
@@ -98,7 +119,7 @@ export declare const radioGroupStructure: import("../../core/style").ThemedVaria
 export declare const radioRowStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            minHeight: 36;
+            minHeight: 44;
             columnGap: 8;
             paddingHorizontal: 8;
         };