pixelize-native-library 1.2.0 → 1.2.1

package/lib/typescript/modules/input/Input.variants.d.ts

@@ -35,19 +35,19 @@ export interface InputSizeSpec {
  */
 export declare const INPUT_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;
@@ -120,15 +120,15 @@ export declare function resolveInputAccessibility(input: InputAccessibilityInput
 export declare const inputStructure: 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;
         };
     };

package/lib/typescript/modules/list-item/ListItem.d.ts

@@ -1,8 +1,5 @@
 /**
- * ListItem — a row primitive. It is rendered AS a list cell at scale, so it carries no mount
- * animation and no loop: the only motion is `usePressMotion`, which starts on touch and runs on the
- * native driver. The pressable root is an animated `Pressable` rather than an `Animated.View`
- * wrapper so a 5000-row list pays for no extra node.
+ * ListItem — a row primitive. Press feedback uses `usePressState` (scale + state-layer overlay).
  */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
@@ -13,7 +10,6 @@ export interface ListItemProps {
     trailing?: ReactNode;
     unread?: boolean;
     onPress?: () => void;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;
 }

package/lib/typescript/modules/list-item/ListItem.variants.d.ts

@@ -4,7 +4,7 @@
  */
 import type { RoleColors, Theme } from "../../theme/hooks";
 export declare const LIST_ITEM_DOT_SIZE = 8;
-export declare const LIST_ITEM_MIN_HEIGHT = 44;
+export declare const LIST_ITEM_MIN_HEIGHT = 56;
 export interface ListItemColors {
     /** `undefined` for a read row — the row stays transparent over whatever list background hosts it. */
     readonly background: string | undefined;
@@ -25,5 +25,141 @@ export interface ListItemAccessibilityProps {
 export declare function resolveListItemAccessibility(input: ListItemAccessibilityInput): ListItemAccessibilityProps;
 export declare const listItemStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const listItemBodyStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare function listItemRaisedStyle(theme: Theme): {
+    backfaceVisibility?: "visible" | "hidden" | undefined;
+    backgroundColor: import("react-native").ColorValue;
+    borderBlockColor?: import("react-native").ColorValue | undefined;
+    borderBlockEndColor?: import("react-native").ColorValue | undefined;
+    borderBlockStartColor?: import("react-native").ColorValue | undefined;
+    borderBottomColor?: import("react-native").ColorValue | undefined;
+    borderBottomEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderBottomRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderBottomStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderColor?: import("react-native").ColorValue | undefined;
+    borderCurve?: "circular" | "continuous" | undefined;
+    borderEndColor?: import("react-native").ColorValue | undefined;
+    borderEndEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderEndStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderLeftColor?: import("react-native").ColorValue | undefined;
+    borderRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderRightColor?: import("react-native").ColorValue | undefined;
+    borderStartColor?: import("react-native").ColorValue | undefined;
+    borderStartEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderStartStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+    borderTopColor?: import("react-native").ColorValue | undefined;
+    borderTopEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderTopLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderTopRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    borderTopStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+    outlineColor?: import("react-native").ColorValue | undefined;
+    outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
+    outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
+    outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+    opacity?: import("react-native").AnimatableNumericValue | undefined;
+    elevation?: number | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+    isolation?: "auto" | "isolate" | undefined;
+    cursor?: import("react-native").CursorValue | undefined;
+    boxShadow?: ReadonlyArray<import("react-native").BoxShadowValue> | string | undefined;
+    filter?: ReadonlyArray<import("react-native").FilterFunction> | string | undefined;
+    mixBlendMode?: import("react-native").BlendMode | undefined;
+    experimental_backgroundImage?: ReadonlyArray<import("react-native").BackgroundImageValue> | string | undefined;
+    experimental_backgroundSize?: ReadonlyArray<import("react-native").BackgroundSizeValue> | string | undefined;
+    experimental_backgroundPosition?: ReadonlyArray<import("react-native").BackgroundPositionValue> | string | undefined;
+    experimental_backgroundRepeat?: ReadonlyArray<import("react-native").BackgroundRepeatValue> | string | undefined;
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+    alignItems?: import("react-native").FlexAlignType | undefined;
+    alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
+    aspectRatio?: number | string | undefined;
+    borderBottomWidth?: number | undefined;
+    borderEndWidth?: number | undefined;
+    borderLeftWidth?: number | undefined;
+    borderRightWidth?: number | undefined;
+    borderStartWidth?: number | undefined;
+    borderTopWidth?: number | undefined;
+    borderWidth?: number | undefined;
+    bottom?: import("react-native").DimensionValue | undefined;
+    boxSizing?: "border-box" | "content-box" | undefined;
+    display?: "none" | "flex" | "contents" | undefined;
+    end?: import("react-native").DimensionValue | undefined;
+    flex?: number | undefined;
+    flexBasis?: import("react-native").DimensionValue | undefined;
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+    rowGap?: number | string | undefined;
+    gap?: number | string | undefined;
+    columnGap?: number | string | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
+    flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    height?: import("react-native").DimensionValue | undefined;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
+    left?: import("react-native").DimensionValue | undefined;
+    margin?: import("react-native").DimensionValue | undefined;
+    marginBottom?: import("react-native").DimensionValue | undefined;
+    marginEnd?: import("react-native").DimensionValue | undefined;
+    marginHorizontal?: import("react-native").DimensionValue | undefined;
+    marginLeft?: import("react-native").DimensionValue | undefined;
+    marginRight?: import("react-native").DimensionValue | undefined;
+    marginStart?: import("react-native").DimensionValue | undefined;
+    marginTop?: import("react-native").DimensionValue | undefined;
+    marginVertical?: import("react-native").DimensionValue | undefined;
+    maxHeight?: import("react-native").DimensionValue | undefined;
+    maxWidth?: import("react-native").DimensionValue | undefined;
+    minHeight?: import("react-native").DimensionValue | undefined;
+    minWidth?: import("react-native").DimensionValue | undefined;
+    overflow?: "visible" | "hidden" | "scroll" | undefined;
+    padding?: import("react-native").DimensionValue | undefined;
+    paddingBottom?: import("react-native").DimensionValue | undefined;
+    paddingEnd?: import("react-native").DimensionValue | undefined;
+    paddingHorizontal?: import("react-native").DimensionValue | undefined;
+    paddingLeft?: import("react-native").DimensionValue | undefined;
+    paddingRight?: import("react-native").DimensionValue | undefined;
+    paddingStart?: import("react-native").DimensionValue | undefined;
+    paddingTop?: import("react-native").DimensionValue | undefined;
+    paddingVertical?: import("react-native").DimensionValue | undefined;
+    position?: "absolute" | "relative" | "static" | undefined;
+    right?: import("react-native").DimensionValue | undefined;
+    start?: import("react-native").DimensionValue | undefined;
+    top?: import("react-native").DimensionValue | undefined;
+    width?: import("react-native").DimensionValue | undefined;
+    zIndex?: number | undefined;
+    direction?: "inherit" | "ltr" | "rtl" | undefined;
+    inset?: import("react-native").DimensionValue | undefined;
+    insetBlock?: import("react-native").DimensionValue | undefined;
+    insetBlockEnd?: import("react-native").DimensionValue | undefined;
+    insetBlockStart?: import("react-native").DimensionValue | undefined;
+    insetInline?: import("react-native").DimensionValue | undefined;
+    insetInlineEnd?: import("react-native").DimensionValue | undefined;
+    insetInlineStart?: import("react-native").DimensionValue | undefined;
+    marginBlock?: import("react-native").DimensionValue | undefined;
+    marginBlockEnd?: import("react-native").DimensionValue | undefined;
+    marginBlockStart?: import("react-native").DimensionValue | undefined;
+    marginInline?: import("react-native").DimensionValue | undefined;
+    marginInlineEnd?: import("react-native").DimensionValue | undefined;
+    marginInlineStart?: import("react-native").DimensionValue | undefined;
+    paddingBlock?: import("react-native").DimensionValue | undefined;
+    paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+    paddingBlockStart?: import("react-native").DimensionValue | undefined;
+    paddingInline?: import("react-native").DimensionValue | undefined;
+    paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+    paddingInlineStart?: import("react-native").DimensionValue | undefined;
+    shadowColor?: import("react-native").ColorValue | undefined;
+    shadowOffset?: Readonly<{
+        width: number;
+        height: number;
+    }> | undefined;
+    shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
+    shadowRadius?: number | undefined;
+    transform?: Readonly<import("react-native").MaximumOneOf<import("react-native").PerspectiveTransform & import("react-native").RotateTransform & import("react-native").RotateXTransform & import("react-native").RotateYTransform & import("react-native").RotateZTransform & import("react-native").ScaleTransform & import("react-native").ScaleXTransform & import("react-native").ScaleYTransform & import("react-native").TranslateXTransform & import("react-native").TranslateYTransform & import("react-native").SkewXTransform & import("react-native").SkewYTransform & import("react-native").MatrixTransform>[]> | string | undefined;
+    transformOrigin?: Array<string | number> | string | undefined;
+    transformMatrix?: Array<number> | undefined;
+    rotation?: import("react-native").AnimatableNumericValue | undefined;
+    scaleX?: import("react-native").AnimatableNumericValue | undefined;
+    scaleY?: import("react-native").AnimatableNumericValue | undefined;
+    translateX?: import("react-native").AnimatableNumericValue | undefined;
+    translateY?: import("react-native").AnimatableNumericValue | undefined;
+};
 export declare const listItemDotStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=ListItem.variants.d.ts.map

package/lib/typescript/modules/markdown/Markdown.d.ts

@@ -12,5 +12,12 @@ export interface MarkdownProps {
     style?: LayoutStyle;
     testID?: string;
 }
+/**
+ * Safety caps for pathological/misuse input, not windowing (see MODULE.md "Performance") — below
+ * these numbers a document renders exactly as before; above, an affordance mounts the real, full
+ * tree on press, so the WCAG 2.4.1 rotor contract holds once expanded.
+ */
+export declare const MAX_RENDERED_BLOCKS = 300;
+export declare const MAX_LIST_ITEMS = 50;
 export declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;
 //# sourceMappingURL=Markdown.d.ts.map

package/lib/typescript/modules/message-bubble/MessageBubble.d.ts

@@ -1,6 +1,6 @@
 /**
- * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses surface
- * card with border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
+ * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses a tonal
+ * surface fill, no border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
  * upstream).
  *
  * The accessible label names the sender ("You" / "Assistant") ahead of the content: alignment and

package/lib/typescript/modules/message-bubble/MessageBubble.variants.d.ts

@@ -3,8 +3,8 @@ export type MessageBubbleVariant = "user" | "assistant";
 export interface MessageBubbleColors {
     readonly background: string;
     readonly text: string;
-    readonly border?: string;
 }
+/** Assistant separates from the canvas by tone (`bg.surface`) alone now — no hairline border. */
 export declare function resolveMessageBubbleColors(colors: RoleColors, variant: MessageBubbleVariant): MessageBubbleColors;
 export declare const messageBubbleStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     variant: {
@@ -15,7 +15,6 @@ export declare const messageBubbleStructure: import("../../core/style").ThemedVa
         assistant: {
             alignSelf: "flex-start";
             borderBottomLeftRadius: 4;
-            borderWidth: 1;
         };
     };
 }, import("react-native").ViewStyle>;

package/lib/typescript/modules/number-input/NumberInput.variants.d.ts

@@ -189,7 +189,7 @@ export declare const numberInputStructure: import("../../core/style").ThemedVari
  * `TextInput` carries: without it, the row's `alignItems: "center"` shrinks the button to its
  * intrinsic content height instead of the row's full `spec.height`, silently voiding the `hitSlop`
  * touch-target math (a real Wave-1 bug on Input — not one to repeat here). The corner radii on the
- * outer edge match the row's own `radii.base` so a pressed/focused fill doesn't square off past the
+ * outer edge match the row's own `radii.md` so a pressed/focused fill doesn't square off past the
  * row's rounded corner.
  */
 export declare const numberInputStepperStructure: import("../../core/style").ThemedVariantResolver<Theme, {
@@ -207,13 +207,15 @@ export declare const numberInputStepperStructure: import("../../core/style").The
     position: {
         leading: {
             borderRightWidth: 1;
-            borderTopLeftRadius: 8;
-            borderBottomLeftRadius: 8;
+            borderTopLeftRadius: 12;
+            borderBottomLeftRadius: 12;
+            borderCurve: "continuous";
         };
         trailing: {
             borderLeftWidth: 1;
-            borderTopRightRadius: 8;
-            borderBottomRightRadius: 8;
+            borderTopRightRadius: 12;
+            borderBottomRightRadius: 12;
+            borderCurve: "continuous";
         };
     };
 }, import("react-native").ViewStyle>;

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

@@ -1,8 +1,5 @@
 /**
- * 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.
+ * PRIVATE sub-components for Pagination controls.
  */
 import type { IconName } from "../../core/icon";
 import type { Theme } from "../../theme/hooks";

package/lib/typescript/modules/reorder/Reorder.d.ts

@@ -11,7 +11,7 @@
  * preview offset is `resolveRowShift`, the dragged row's is the raw `translationY`.
  *
  * The list stays FULLY CONTROLLED: `items` is never mutated mid-drag. On release the pan hands off
- * to JS once (`runOnJS`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
+ * to JS once (`scheduleOnRN`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
  * Because the preview and the commit share the same splice semantics, the dragged row lands in the
  * slot its shifted neighbours already vacated — and passive rows snap back to 0 the instant
  * `activeIndex` goes idle, so no stale offset can outlive the drop.

package/lib/typescript/modules/screen/Screen.d.ts

@@ -1,20 +1,14 @@
 /**
  * Screen — a screen shell composing SafeArea, optional KeyboardAvoidingView, optional pull-to-refresh,
- * and async-state slots that swap in `LoadingState` / consumer-provided empty/error content instead of
- * `children`. Replaces the per-app `SafeAreaView` + `KeyboardAvoidingView` + `RefreshControl` wiring
- * that tickets/mobile and crm-mobile each re-declared.
- *
- * Requires `react-native-safe-area-context` — Screen's whole purpose is safe-area handling; consumers
- * using this module are expected to install that optional peer (see MODULE.md).
- *
- * No `accessibilityRole` of its own: like `Card`, this is a layout shell — children and composed
- * state blocks carry their own semantics.
+ * optional `appBar` slot with safe-area edge splitting, and async-state slots.
  */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
 import type { ScreenEdge, ScreenState } from "./Screen.variants";
 export interface ScreenProps {
     children?: ReactNode;
+    /** Top header slot — receives top safe-area inset; body omits `top` from `edges`. */
+    appBar?: ReactNode;
     edges?: readonly ScreenEdge[];
     padded?: boolean;
     keyboardAvoiding?: boolean;

package/lib/typescript/modules/screen/Screen.variants.d.ts

@@ -18,4 +18,8 @@ export declare const screenRootStructure: import("../../core/style").ThemedVaria
 export declare const screenPaddedStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const screenStateSlotStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const screenScrollContentStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenBodyStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenShellStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare function resolveScreenBodyEdges(edges: readonly ScreenEdge[], hasAppBar: boolean): readonly ScreenEdge[];
+export declare function resolveScreenAppBarEdges(edges: readonly ScreenEdge[], hasAppBar: boolean): readonly ScreenEdge[];
 //# sourceMappingURL=Screen.variants.d.ts.map

package/lib/typescript/modules/search-bar/SearchBar.variants.d.ts

@@ -32,13 +32,13 @@ export interface SearchBarSizeSpec {
  */
 export declare const SEARCH_BAR_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;
@@ -146,11 +146,11 @@ export declare const searchBarRowStructure: import("../../core/style").ThemedVar
 export declare const searchBarFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            height: 32;
+            height: 44;
             paddingHorizontal: 12;
         };
         md: {
-            height: 40;
+            height: 52;
             paddingHorizontal: 16;
         };
     };
@@ -169,10 +169,10 @@ export declare const searchBarClearStructure: import("../../core/style").ThemedV
 export declare const searchBarCancelStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            height: 32;
+            height: 44;
         };
         md: {
-            height: 40;
+            height: 52;
         };
     };
 }, import("react-native").ViewStyle>;

package/lib/typescript/modules/section/Section.variants.d.ts

@@ -1,6 +1,3 @@
-/**
- * Section's style resolution — same split as `Divider.variants` / `Card.variants`.
- */
 import type { RoleColors, Theme } from "../../theme/hooks";
 export interface SectionColors {
     readonly border: string;

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

@@ -101,7 +101,7 @@ export declare function resolveSegmentedControlSegmentHitSlop(size: SegmentedCon
 /** 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.base` — nests cleanly
+ * 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

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

@@ -3,11 +3,14 @@
  */
 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;
     readonly leading?: ReactNode;
+    readonly tone?: SelectOptionTone;
+    /** Required when `tone="custom"`. */
+    readonly customColors?: SelectOptionCustomColors;
 }
 export interface SelectProps {
     options: SelectOption[];

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

@@ -11,7 +11,7 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 import type { AccessibilityRole } from "react-native";
-import type { RoleColors, Theme } from "../../theme/hooks";
+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
@@ -20,6 +20,14 @@ export type SelectSize = "sm" | "md" | "lg";
  * 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 {
@@ -34,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 {
@@ -92,6 +100,12 @@ export interface SelectRowColors {
     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;
@@ -118,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;
         };
     };

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,30 +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`).
- *
- * The shimmer is gated on `motion.decorative`, so it runs on high-tier devices only. A skeleton is
- * usually rendered one-per-row across a whole loading list, and a per-row loop is the single most
- * expensive thing a placeholder can do — low/mid tiers and reduce-motion get the static fill. Even
- * on high tier the loop is shaped so it costs zero JS per iteration: see the effect below.
+ * 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;
 }