pixelize-native-library 1.0.7 → 1.2.1

package/lib/typescript/modules/segmented-control/SegmentedControl.variants.d.ts

@@ -0,0 +1,143 @@
+/**
+ * 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.
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type SegmentedControlSize = "sm" | "md";
+/** Same floor as Button/Input/Tabs/ButtonGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported:
+ * modules stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface SegmentedControlSizeSpec {
+    /** Visual height in dp, per segment (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;
+    /** Symmetric VERTICAL touch expansion so `height + 2·hitSlop ≥ 44`. Never applied horizontally —
+     *  see `resolveSegmentedControlSegmentHitSlop`. */
+    readonly hitSlop: number;
+}
+export declare const SEGMENTED_CONTROL_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;
+    };
+};
+export interface SegmentedControlColors {
+    /** The track fill every unselected segment sits directly on. */
+    readonly track: string;
+    /** The active segment's pill fill — a neutral raised surface (elevation is the selection cue, not
+     *  a colour change), applied together with `theme.elevation.md` by the component. */
+    readonly pill: string;
+    /** The active segment's label, read on `pill`. */
+    readonly activeLabel: string;
+    /** Every inactive segment's label, read on `track`. */
+    readonly inactiveLabel: string;
+    /** A pressed, unselected segment's background — never applied to the selected segment (its own
+     *  pill fill already reads as the "active" cue). */
+    readonly pressedSegment: string;
+}
+/**
+ * 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.
+ */
+export declare function resolveSegmentedControlColors(colors: RoleColors): SegmentedControlColors;
+export interface SegmentedControlSegmentAccessibilityInput {
+    readonly selected: boolean;
+    readonly disabled: boolean;
+}
+export interface SegmentedControlSegmentAccessibilityProps {
+    readonly accessibilityRole: "tab";
+    /** 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-selected": boolean;
+    readonly "aria-disabled": boolean;
+    /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
+    readonly disabled: boolean;
+}
+export declare function resolveSegmentedControlSegmentAccessibility(input: SegmentedControlSegmentAccessibilityInput): SegmentedControlSegmentAccessibilityProps;
+export interface SegmentedControlHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/**
+ * Vertical-only touch expansion. Segments render flush against each other inside the track (no gap
+ * — the sliding pill is the only boundary cue, there is no per-segment border to interrupt), so ANY
+ * horizontal hitSlop would risk the exact overlap `ButtonGroup` documents fixing: React Native
+ * never clips hitSlop to a sibling's bounds and resolves an overlap to whichever segment renders
+ * LATER, not whichever is visually closer to the tap. Rather than tune a per-edge exception (`
+ * ButtonGroup`'s fix), horizontal hitSlop is zero everywhere and every segment's own rendered
+ * `minWidth` (see `segmentedControlSegmentStructure`) carries the width floor instead — the only
+ * touch-target axis this spec requires (`fullWidth` segments are already well over 44dp in
+ * practice; `minWidth` protects the narrow-content case).
+ */
+export declare function resolveSegmentedControlSegmentHitSlop(size: SegmentedControlSize): SegmentedControlHitSlop;
+/** The outer track — padded so the pill has room to sit inset from the track's own edge. */
+export declare const segmentedControlTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * 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.
+ */
+export declare const segmentedControlPillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring drawn over one segment's own bounds — the same inset treatment
+ * `bottomNavFocusRingStructure` uses. Segments render flush against each other inside the track, so
+ * an outset ring would spill over its neighbour; and the sliding pill marks SELECTION, never focus.
+ * Its colour is applied inline over this, never hardcoded here.
+ */
+export declare const segmentedControlFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * One segment's layout. `minWidth` is the real touch-target floor for the WIDTH axis (see
+ * `resolveSegmentedControlSegmentHitSlop` — horizontal hitSlop can't safely carry it here). `height`
+ * is fixed (not a minimum) so the vertical hitSlop math holds against what actually renders, and so
+ * the pill (pinned to the row's height via `top: 0, bottom: 0`) matches exactly.
+ */
+export declare const segmentedControlSegmentStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 8;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 12;
+        };
+    };
+    fullWidth: {
+        on: {
+            flex: number;
+        };
+        off: {};
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=SegmentedControl.variants.d.ts.map

package/lib/typescript/modules/segmented-control/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/segmented-control`. Value exports and type exports are
+ * split for `verbatimModuleSyntax`. The resolvers (`resolveSegmentedControlColors`,
+ * `SEGMENTED_CONTROL_SIZES`, …) stay internal — a consumer configures a SegmentedControl through
+ * its props, never by importing its internals.
+ */
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";
+export type { SegmentedControlSize } from "./SegmentedControl.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/select/Select.d.ts

@@ -1,25 +1,16 @@
 /**
- * Select — a trigger styled like an Input box (same size/border/focus-ring conventions) that opens
- * an option list in React Native's OWN `Modal`. Imported directly from `"react-native"` here on
- * purpose: this module must never depend on the library's own `Modal` COMPONENT (its rendered
- * output/behaviour) — Select still owns its option list's markup outright.
- *
- * The one deliberate exception is the web portal mechanism: `ModalPortalContext`/`renderWebPortal`
- * are a plain context + a stateless helper with no React-tree footprint of their own (not the
- * `Modal` component), so Select reads the same ones `Modal.tsx` reads to stay consistent once a
- * consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * Select — a trigger styled like an Input box that opens an option list in React Native's OWN `Modal`.
  */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
-import type { SelectSize } from "./Select.variants";
+import type { SelectOptionCustomColors, SelectOptionTone, SelectSize } from "./Select.variants";
 export interface SelectOption {
     readonly label: string;
     readonly value: string;
-    /** Optional adornment rendered before the label — on the option row AND on the trigger while
-     *  this option is selected. For domain visuals a name-keyed `IconName` cannot express (status
-     *  chips, priority glyphs, avatars) — same ReactNode content-slot precedent as `ListItem`'s
-     *  `leading`. The node must be fixed-size; the label still owns the row's flexible width. */
     readonly leading?: ReactNode;
+    readonly tone?: SelectOptionTone;
+    /** Required when `tone="custom"`. */
+    readonly customColors?: SelectOptionCustomColors;
 }
 export interface SelectProps {
     options: SelectOption[];
@@ -29,7 +20,6 @@ export interface SelectProps {
     label?: string;
     disabled?: boolean;
     size?: SelectSize;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     containerStyle?: LayoutStyle;
     testID?: string;
 }

package/lib/typescript/modules/select/Select.variants.d.ts

@@ -10,8 +10,24 @@
  * Free of React and of any `Modal`/`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 { AccessibilityRole } from "react-native";
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
 export type SelectSize = "sm" | "md" | "lg";
+/**
+ * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
+ * `AccessibilityRole` jump `list` → `listitem` → `log` — so the widening lives on this ONE audited
+ * line instead of a cast at the call site. It is a type gap, not a runtime one: `react-native-web`
+ * emits the string as the DOM `role` verbatim, and native maps roles it doesn't know to nothing.
+ */
+export declare const SELECT_LISTBOX_ROLE: AccessibilityRole;
+/**
+ * Each option row's role. `aria-selected` is only valid ARIA on `option`/`row`/`tab`/`gridcell`/
+ * `treeitem` — the row sits inside a `SELECT_LISTBOX_ROLE` container, so `option` is the
+ * textbook-correct pairing (2026-08 sweep fixed the row from the invalid `menuitem`+`aria-selected`
+ * combination). Same type gap as `SELECT_LISTBOX_ROLE`: RN 0.86's `AccessibilityRole` union has no
+ * `option` either.
+ */
+export declare const SELECT_OPTION_ROLE: AccessibilityRole;
 /** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
 export interface SelectSizeSpec {
@@ -26,26 +42,26 @@ export interface SelectSizeSpec {
 }
 export declare const SELECT_SIZES: {
     readonly sm: {
-        readonly height: 32;
+        readonly height: 44;
         readonly fontSize: 14;
         readonly iconSize: 16;
         readonly hitSlop: number;
     };
     readonly md: {
-        readonly height: 40;
+        readonly height: 52;
         readonly fontSize: 16;
         readonly iconSize: 18;
         readonly hitSlop: number;
     };
     readonly lg: {
-        readonly height: 48;
+        readonly height: 56;
         readonly fontSize: 18;
         readonly iconSize: 20;
         readonly hitSlop: number;
     };
 };
 /** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). */
-export declare const SELECT_ROW_MIN_HEIGHT = 44;
+export declare const SELECT_ROW_MIN_HEIGHT = 48;
 /** The "check" glyph beside the active row. Fixed — independent of the trigger's own `size`. */
 export declare const SELECT_ROW_ICON_SIZE = 18;
 export interface SelectTriggerColors {
@@ -78,18 +94,28 @@ export interface SelectRowColors {
     /** "check" glyph colour, only rendered when `selected`. Same value as `text`: if the label
      *  already clears the stricter 4.5:1 text minimum on `background`, it clears the icon's 3:1 too. */
     readonly icon: string;
+    /** Row background while pressed — `bg.sunken`, not `bg.hover`: same class of fix `Button`'s
+     *  "neutral" tone and `RadioGroup`/`Accordion` document (the saturated `hover` mid-tone risks
+     *  dropping `text` below 4.5:1 on brand-tinted palettes; the pale `sunken` tint doesn't). */
+    readonly pressedRow: string;
 }
 export declare function resolveSelectRowColors(colors: RoleColors): SelectRowColors;
+export type SelectOptionTone = "accent" | "neutral" | StatusRole | "custom";
+export type SelectOptionCustomColors = {
+    readonly bg: string;
+    readonly fg: string;
+};
+export declare function resolveSelectOptionLabelColor(colors: RoleColors, tone: SelectOptionTone | undefined, customColors: SelectOptionCustomColors | undefined): string;
 export interface SelectAccessibilityInput {
     readonly disabled?: boolean | undefined;
     readonly open: boolean;
 }
 export interface SelectAccessibilityProps {
     readonly accessibilityRole: "button";
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-        readonly expanded: boolean;
-    };
+    /** 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-expanded": boolean;
     /** The `Pressable disabled` prop — blocks opening the menu while disabled. */
     readonly disabled: boolean;
 }
@@ -106,15 +132,15 @@ export declare function resolveSelectAccessibility(input: SelectAccessibilityInp
 export declare const selectTriggerStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            height: 32;
+            height: 44;
             paddingHorizontal: 12;
         };
         md: {
-            height: 40;
+            height: 52;
             paddingHorizontal: 16;
         };
         lg: {
-            height: 48;
+            height: 56;
             paddingHorizontal: 24;
         };
     };
@@ -127,4 +153,11 @@ export declare const selectTriggerValueStructure: import("../../core/style").The
 export declare const selectOverlayStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const selectSheetStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const selectRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * `SelectOption.leading` is an arbitrary consumer node, so an unconstrained one could make a row
+ * taller than `SELECT_ROW_MIN_HEIGHT` and silently falsify the list's `getItemLayout` offsets. This
+ * slot bounds it to the row's own glyph box instead, which is what keeps the uniform-height fast
+ * path true by construction (`core/MODULE.md`: `itemHeight` is for uniform rows only).
+ */
+export declare const selectRowLeadingStructure: import("../../core/style").ThemedVariantResolver<object, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=Select.variants.d.ts.map

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

@@ -5,5 +5,5 @@
  */
 export { Select } from "./Select";
 export type { SelectProps, SelectOption } from "./Select";
-export type { SelectSize } from "./Select.variants";
+export type { SelectOptionCustomColors, SelectOptionTone, SelectSize, } from "./Select.variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/skeleton/Skeleton.d.ts

@@ -1,25 +1,15 @@
 /**
- * Skeleton — a loading placeholder box that shimmers while the real content it stands in for is
- * still on its way. It is its own size (`width`/`height` are component-owned props, not
- * `LayoutStyle` — sizing IS the point of this component) and has exactly one neutral appearance:
- * a resting `bg.sunken` fill cross-faded with a fixed-alpha `fg.default` overlay composited over it
- * (see `resolveSkeletonColors`), pulsing on an `Animated` opacity loop. Purely decorative by default
- * (see `Skeleton.variants.ts` →
- * `resolveSkeletonAccessibility`, the same "decorative unless labelled" contract as `Avatar`).
+ * Skeleton — a loading placeholder with a translating highlight-band shimmer over a neutral base.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { SkeletonShape } from "./Skeleton.variants";
 export interface SkeletonProps {
     shape?: SkeletonShape;
-    /** Component-owned sizing, in dp — not `LayoutStyle`. Falls back to a per-shape default. */
     width?: number;
     height?: number;
-    /**
-     * Decorative by default — hidden from assistive tech (`Avatar`'s optional-label contract).
-     * Pass a label (e.g. `"Loading"`) to instead expose this as one `progressbar`-role element.
-     */
+    /** Stagger sibling skeletons by index × 100ms (80–120ms band). */
+    staggerIndex?: number;
     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/skeleton/Skeleton.variants.d.ts

@@ -1,27 +1,8 @@
 /**
  * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
  * depend on, plus the themed structural variant resolver.
- *
- * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
- *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
- *    static per (brand, mode), registered once via `StyleSheet.create`.
- *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
- *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
- *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
- *    since there is no closed set of values to register.
- *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
- *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
- *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
- *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
- *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
- *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
- *    unless labelled" contract is unit-testable without rendering React Native (same shape as
- *    `resolveAvatarAccessibility`).
- *
- * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
- * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { PaletteProps, RoleColors, Theme } from "../../theme/hooks";
 export type SkeletonShape = "rect" | "circle" | "text";
 export interface SkeletonSizeSpec {
     readonly width: number;
@@ -42,74 +23,38 @@ export declare const SKELETON_DEFAULT_SIZE: {
         readonly height: 16;
     };
 };
-/**
- * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
- * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
- * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
- * silently drifting apart.
- */
+export declare const SKELETON_SHIMMER_DURATION_MS = 1400;
+export declare const SKELETON_BAND_WIDTH_RATIO = 0.4;
+export declare const SKELETON_STAGGER_MS = 100;
 export declare function resolveSkeletonSize(shape: SkeletonShape, width: number | undefined, height: number | undefined): SkeletonSizeSpec;
 export interface SkeletonColors {
-    /** The resting fill. */
     readonly base: string;
-    /** The shimmer overlay colour, cross-faded in and out over `base`. */
-    readonly pulse: string;
+    readonly highlight: string;
 }
-/**
- * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
- * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
- * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
- * an independent re-measurement found that gap collapses to visually-indistinguishable on every
- * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
- * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
- * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
- */
-export declare function resolveSkeletonColors(colors: RoleColors): SkeletonColors;
+/** Neutral ramp step 3 (base) and step 5 (highlight band) on the gray ramp. */
+export declare function resolveSkeletonColors(palette: PaletteProps): SkeletonColors;
+/** @deprecated Use palette-based resolver — kept for tests importing RoleColors. */
+export declare function resolveSkeletonColorsFromRoles(_colors: RoleColors, palette: PaletteProps): SkeletonColors;
 export interface SkeletonAccessibilityInput {
     readonly accessibilityLabel?: string | undefined;
 }
 export interface SkeletonAccessibilityProps {
-    /** Groups the placeholder into one accessible element only when it actually carries a name. */
     readonly accessible: boolean;
     readonly accessibilityRole: "progressbar" | undefined;
     readonly accessibilityLabel: string | undefined;
-    /** Indeterminate progress is still busy — announced only on the labelled (exposed) path. */
-    readonly accessibilityState: {
-        readonly busy: boolean;
-    } | undefined;
-    /** Hides the whole element from assistive tech when decorative. */
-    readonly accessibilityElementsHidden: boolean;
-    readonly importantForAccessibility: "auto" | "no-hide-descendants";
+    readonly "aria-busy": boolean | undefined;
+    readonly "aria-hidden": true | undefined;
 }
-/**
- * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
- * testable without a renderer (same shape as `resolveAvatarAccessibility`):
- *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
- *    meaning of its own, so it is hidden from assistive tech (`accessibilityElementsHidden` on
- *    iOS + `importantForAccessibility="no-hide-descendants"` on Android) rather than read as a
- *    bare, unexplained box.
- *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
- *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
- *    appearing on screen).
- */
 export declare function resolveSkeletonAccessibility(input: SkeletonAccessibilityInput): SkeletonAccessibilityProps;
-/**
- * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
- * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
- * shape recomputing the same radius on that overlay. No colour (state-driven, applied inline over
- * this), so this compiles once per theme identity via the `WeakMap`-cached themed resolver and
- * never rebuilds per render.
- *
- * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
- * "hidden"` is safe — nothing else needs to be drawn outside this box.
- */
 export declare const skeletonStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     shape: {
         rect: {
-            borderRadius: 8;
+            borderRadius: 12;
+            borderCurve: "continuous";
         };
         circle: {
             borderRadius: 9999;
+            borderCurve: "continuous";
         };
         text: {
             borderRadius: 4;

package/lib/typescript/modules/slider/Slider.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of `lucide` and of any React tree, so the WCAG + math tests import this directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type SliderSize = "sm" | "md";
 /** Same touch-target floor as every other interactive control in this library (44dp, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -95,6 +95,25 @@ export declare function resolveSliderPositionValue(input: SliderPositionInput):
  * `increment`/`decrement` accessibility actions (WCAG 2.5.7's required non-drag alternative).
  */
 export declare function stepSliderValue(value: number, direction: 1 | -1, min: number, max: number, step: number): number;
+/** How much of the range PageUp/PageDown cover, before rounding onto a whole number of `step`s. */
+export declare const SLIDER_PAGE_FRACTION = 0.1;
+/**
+ * The coarse PageUp/PageDown amount — the whole number of `step`s nearest a tenth of the range,
+ * never fewer than one, so a 0–5 slider still pages by `step` instead of rounding down to zero.
+ */
+export declare function sliderPageStep(min: number, max: number, step: number): number;
+export interface SliderKeyInput {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+}
+/**
+ * The WAI-ARIA slider keyboard contract, resolved purely: Left/Down decrement and Right/Up increment
+ * by `step`, Home/End jump to the bounds, PageDown/PageUp move by `sliderPageStep`. Returns
+ * `undefined` for any other key, which is also how the caller knows not to swallow that keystroke.
+ */
+export declare function resolveSliderKeyValue(key: string, input: SliderKeyInput): number | undefined;
 export interface SliderTrackColors {
     /** The full-width resting track. */
     readonly track: string;
@@ -140,25 +159,27 @@ export interface SliderAccessibilityInput {
 }
 export interface SliderAccessibilityProps {
     readonly accessibilityRole: "adjustable";
-    readonly accessibilityValue: {
-        readonly min: number;
-        readonly max: number;
-        readonly now: number;
-    };
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    readonly "aria-valuemin": number;
+    readonly "aria-valuemax": number;
+    readonly "aria-valuenow": number;
+    readonly "aria-disabled": boolean;
     readonly accessibilityActions: ReadonlyArray<{
         readonly name: "increment" | "decrement";
     }>;
 }
 /**
  * Derives the accessibility surface once, purely, so the contract is testable without a renderer.
- * `now` is clamped onto `[min, max]` — a screen reader must never announce a value the track itself
- * couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement` explicitly: iOS's
- * `adjustable` trait already offers these via the two-finger swipe-up/down gesture without them
- * declared, but Android TalkBack has no native "adjustable" gesture and only surfaces custom actions
- * that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer alternative otherwise).
+ * `aria-valuenow` is clamped onto `[min, max]` — a screen reader must never announce a value the
+ * track itself couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement`
+ * explicitly: iOS's `adjustable` trait already offers these via the two-finger swipe-up/down gesture
+ * without them declared, but Android TalkBack has no native "adjustable" gesture and only surfaces
+ * custom actions that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer
+ * alternative otherwise).
+ *
+ * FLAT `aria-*`, not `accessibilityValue={{…}}`/`accessibilityState={{…}}`: react-native-web 0.21
+ * drops both objects, so on web the slider announced its role and NO position at all. The host here
+ * is a `View`, which merges every flat prop into the object form natively (`View.js`), so one flat
+ * form is right on both platforms.
  */
 export declare function resolveSliderAccessibility(input: SliderAccessibilityInput): SliderAccessibilityProps;
 /**

package/lib/typescript/modules/spinner/Spinner.variants.d.ts

@@ -3,7 +3,7 @@
  * lucide: same split as `Button.variants.ts`, so the WCAG + behaviour tests import these directly,
  * measuring real palettes instead of eyeballing a hex.
  */
-import type { RoleColors } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
 export type SpinnerSize = "sm" | "md" | "lg";
 export type SpinnerTone = "accent" | "neutral";
 export interface SpinnerSizeSpec {
@@ -50,9 +50,7 @@ export interface SpinnerAccessibilityInput {
 export interface SpinnerAccessibilityProps {
     readonly accessibilityRole: "progressbar";
     readonly accessibilityLabel: string;
-    readonly accessibilityState: {
-        readonly busy: true;
-    };
+    readonly "aria-busy": true;
 }
 /** A Spinner renders no visible text, so this is what AT announces absent an explicit override. */
 export declare const DEFAULT_SPINNER_LABEL = "Loading";
@@ -61,6 +59,10 @@ export declare const DEFAULT_SPINNER_LABEL = "Loading";
  * renderer. There is no interaction to gate (a Spinner is never pressable) — unlike
  * `resolveButtonAccessibility`, the only decision here is the label fallback; `busy` is always true
  * because a mounted Spinner, by definition, means work is in progress.
+ *
+ * Flat `aria-busy` rather than `accessibilityState={{ busy }}`: RN's `View` folds the flat prop back
+ * into `accessibilityState`, while react-native-web forwards only the flat form — the object reaches
+ * nothing at all on web, leaving the spinner announcing a role with no state.
  */
 export declare function resolveSpinnerAccessibility(input: SpinnerAccessibilityInput): SpinnerAccessibilityProps;
 /**

package/lib/typescript/modules/stage-progress/StageProgress.d.ts

@@ -0,0 +1,18 @@
+/**
+ * StageProgress — horizontal pipeline stages (pills, bar, or stepper). Read-only by default;
+ * optional `onStagePress` when not `readOnly`.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { StageProgressStage, StageProgressVariant } from "./StageProgress.variants";
+export interface StageProgressProps {
+    stages: readonly StageProgressStage[];
+    value: string;
+    variant?: StageProgressVariant;
+    readOnly?: boolean;
+    onStagePress?: (stageId: string) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const StageProgress: import("react").NamedExoticComponent<StageProgressProps>;
+//# sourceMappingURL=StageProgress.d.ts.map