pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/tooltip/Tooltip.d.ts

@@ -1,28 +1,51 @@
 /**
- * Tooltip — wraps a single trigger element and reveals a short themed tip on long-press, without
- * requiring the trigger to know anything about it. No `style` prop: unlike the other modules,
- * Tooltip renders no sized node of its own for an app to place — the trigger child keeps whatever
- * layout it already has, and the wrapping host below exists only to anchor the bubble.
+ * Tooltip — wraps a single trigger element and reveals a short themed tip on hover (pointer),
+ * focus (keyboard) or long-press (touch), without requiring the trigger to know anything about it.
+ * No `style` prop: unlike the other modules, Tooltip renders no sized node of its own for an app to
+ * place — the trigger child keeps whatever layout it already has, and the wrapping host below
+ * exists only to anchor the bubble.
  *
- * Composition is `React.cloneElement` on the single child, never `{...rest}`: `onLongPress` and
- * `onPressOut` are injected (chaining any handler the child already defined, so Tooltip never
- * silently breaks a trigger that already used them), and `accessibilityHint` is MERGED via
- * `mergeAccessibilityHint` — the one prop that must never be clobbered, since it is how a
- * screen-reader user gets the tip's content without performing the gesture at all.
+ * Composition is `React.cloneElement` on the single child, never `{...rest}`: `onLongPress`,
+ * `onPressOut`, `onHoverIn`, `onHoverOut`, `onFocus` and `onBlur` are injected (each chaining any
+ * handler the child already defined, so Tooltip never silently breaks a trigger that already used
+ * them), and `accessibilityHint` is MERGED via `mergeAccessibilityHint` — the one prop that must
+ * never be clobbered, since it is how a screen-reader user gets the tip's content without
+ * performing the gesture at all.
+ *
+ * That hint reaches NOTHING on web — react-native-web has no `accessibilityHint` at all — so the
+ * bubble additionally carries an `id` and the trigger points `aria-describedby` at it while the tip
+ * is mounted. The bubble stays `aria-hidden` in both worlds: an `aria-describedby` target is read
+ * through the reference even when hidden, so this describes the trigger once instead of twice.
+ *
+ * The hover/focus pair is injected on every platform rather than behind a `Platform.OS === "web"`
+ * branch: `Pressable` accepts all four props everywhere, and only react-native-web actually emits
+ * them, so a branch would buy nothing but a cast.
+ *
+ * The bubble's reveal is the shared `useEnterExit` preset (`core/motion`): fade + a short settle,
+ * kept mounted by a timer rather than an animation callback, so an interrupted fade-out can never
+ * strand the bubble in the tree.
  */
 import type { ReactElement } from "react";
-import type { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent, MouseEvent, NativeSyntheticEvent, TargetedEvent } from "react-native";
 import type { TooltipPlacement } from "./Tooltip.variants";
 /** The subset of props Tooltip reads from / injects into its trigger child. */
 export interface TooltipTriggerProps {
     onLongPress?: (event: GestureResponderEvent) => void;
     onPressOut?: (event: GestureResponderEvent) => void;
+    onHoverIn?: (event: MouseEvent) => void;
+    onHoverOut?: (event: MouseEvent) => void;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
     accessibilityHint?: string;
+    "aria-describedby"?: string;
 }
 export interface TooltipProps {
     /** The tip's text. Also what gets merged into the trigger's `accessibilityHint`. */
     label: string;
-    /** A single element that accepts `onLongPress`/`onPressOut` (e.g. a `Pressable`). */
+    /**
+     * A single element that accepts the press/hover/focus handlers Tooltip injects (e.g. a
+     * `Pressable`). A `Text` is not enough: on web it renders a plain element that emits none of them.
+     */
     children: ReactElement<TooltipTriggerProps>;
     placement?: TooltipPlacement;
     testID?: string;

package/lib/typescript/modules/tooltip/Tooltip.variants.d.ts

@@ -11,15 +11,14 @@
  * Free of `lucide` and of any React tree, so the WCAG + behaviour tests import it directly
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { Theme } from "../../theme";
+import type { Theme } from "../../theme/hooks";
 export type TooltipPlacement = "top" | "bottom";
 /**
- * Design constants, not theme tokens — this module's own timing, not a scale other components
- * share.
+ * A dwell time, not a transition: how long a tip may stay up on its own. The fade itself has no
+ * constant here — duration, easing and the reduced-motion contract all come from the global motion
+ * system (`core/motion`).
  */
 export declare const TOOLTIP_TIMING: {
-    /** Fade-in duration; skipped (duration 0) when the OS reduce-motion setting is on (WCAG 2.3.3). */
-    readonly fadeInMs: 150;
     /** Fallback auto-dismiss so a tip can't stay stuck open if `onPressOut` never fires. */
     readonly autoHideMs: 2500;
 };

package/lib/typescript/modules/typing-indicator/TypingIndicator.d.ts

@@ -0,0 +1,28 @@
+/**
+ * TypingIndicator — three animated dots for "someone is typing". Under reduced motion, and on any
+ * tier that can't afford decorative motion, the dots are static (WCAG 2.3.3) — the accessible
+ * "Typing" label is the real signal, exactly as `Spinner` treats its own frozen glyph.
+ *
+ * The consumer mounts and unmounts this component as typing starts and stops, so "Typing" is spoken
+ * ONCE per mount via `useAnnounce` (WCAG 4.1.3) — not on a timer, and not once per pulse: the effect
+ * fires once per mounted instance, and `useAnnounce`'s own dedup would silence a repeat regardless.
+ * A screen-reader user who is not focused on the thread would otherwise learn someone is typing only
+ * by chance, on their next swipe past this element.
+ *
+ * Each dot loops a BARE `motion.timing` over a 0→1 driver and interpolates that into the
+ * min→max→min opacity pulse. `Animated.loop` only runs natively (`_startNativeLoop`) when the
+ * animation it wraps reports `_isUsingNativeDriver()`, which `Animated.sequence` returns `false`
+ * for unconditionally — a looped sequence therefore restarts every leg from the JS thread, forever.
+ * The stagger is `TimingOptions.delay` (one JS timeout per dot at start-up) rather than
+ * `Animated.delay`, which is itself a `useNativeDriver: false` timing.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { TypingIndicatorSize } from "./TypingIndicator.variants";
+export interface TypingIndicatorProps {
+    size?: TypingIndicatorSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const TypingIndicator: import("react").NamedExoticComponent<TypingIndicatorProps>;
+//# sourceMappingURL=TypingIndicator.d.ts.map

package/lib/typescript/modules/typing-indicator/TypingIndicator.variants.d.ts

@@ -0,0 +1,32 @@
+import type { Theme } from "../../theme/hooks";
+export type TypingIndicatorSize = "sm" | "md";
+export declare const TYPING_DOT_SIZES: {
+    readonly sm: 6;
+    readonly md: 8;
+};
+export declare const TYPING_DOT_MIN_OPACITY = 0.3;
+export declare const TYPING_DOT_MAX_OPACITY = 1;
+export declare const typingIndicatorStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {};
+        md: {};
+    };
+}, import("react-native").ViewStyle>;
+export declare const typingDotStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            width: 6;
+            height: 6;
+        };
+        md: {
+            width: 8;
+            height: 8;
+        };
+    };
+}, import("react-native").ViewStyle>;
+export declare function resolveTypingIndicatorAccessibility(): {
+    readonly accessible: true;
+    readonly accessibilityRole: "text";
+    readonly accessibilityLabel: string;
+};
+//# sourceMappingURL=TypingIndicator.variants.d.ts.map

package/lib/typescript/modules/typing-indicator/index.d.ts

@@ -0,0 +1,4 @@
+export { TypingIndicator } from "./TypingIndicator";
+export type { TypingIndicatorProps } from "./TypingIndicator";
+export type { TypingIndicatorSize } from "./TypingIndicator.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/unread-badge/UnreadBadge.d.ts

@@ -0,0 +1,15 @@
+/**
+ * UnreadBadge — a compact count pill for chat/notification overflow ("9+"). Renders nothing when
+ * `count` is 0. Positioned by the consumer (typically absolute on an icon parent).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { UnreadBadgeSize } from "./UnreadBadge.variants";
+export interface UnreadBadgeProps {
+    count: number;
+    size?: UnreadBadgeSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const UnreadBadge: import("react").NamedExoticComponent<UnreadBadgeProps>;
+//# sourceMappingURL=UnreadBadge.d.ts.map

package/lib/typescript/modules/unread-badge/UnreadBadge.variants.d.ts

@@ -0,0 +1,56 @@
+/**
+ * UnreadBadge style resolution — structure in themed resolvers, colour from role tokens.
+ * Free of React so WCAG tests import directly.
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type UnreadBadgeSize = "sm" | "md";
+export interface UnreadBadgeSizeSpec {
+    readonly minWidth: number;
+    readonly height: number;
+    readonly fontSize: number;
+    readonly paddingHorizontal: number;
+}
+export declare const UNREAD_BADGE_SIZES: {
+    readonly sm: {
+        readonly minWidth: 16;
+        readonly height: 16;
+        readonly fontSize: 10;
+        readonly paddingHorizontal: 3;
+    };
+    readonly md: {
+        readonly minWidth: 20;
+        readonly height: 20;
+        readonly fontSize: 11;
+        readonly paddingHorizontal: 4;
+    };
+};
+export declare const UNREAD_BADGE_MAX_DISPLAY = 9;
+export declare function formatUnreadCount(count: number): string;
+export interface UnreadBadgeColors {
+    readonly fill: string;
+    readonly text: string;
+}
+export declare function resolveUnreadBadgeColors(colors: RoleColors): UnreadBadgeColors;
+export interface UnreadBadgeAccessibilityInput {
+    readonly count: number;
+}
+export declare function resolveUnreadBadgeAccessibility(input: UnreadBadgeAccessibilityInput): {
+    readonly accessible: true;
+    readonly accessibilityRole: "text";
+    readonly accessibilityLabel: string;
+};
+export declare const unreadBadgeStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            minWidth: 16;
+            height: 16;
+            paddingHorizontal: 3;
+        };
+        md: {
+            minWidth: 20;
+            height: 20;
+            paddingHorizontal: 4;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=UnreadBadge.variants.d.ts.map

package/lib/typescript/modules/unread-badge/index.d.ts

@@ -0,0 +1,4 @@
+export { UnreadBadge } from "./UnreadBadge";
+export type { UnreadBadgeProps } from "./UnreadBadge";
+export type { UnreadBadgeSize } from "./UnreadBadge.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/test/mocks/flashList.d.ts

@@ -0,0 +1,3 @@
+import { FlatList } from 'react-native';
+export declare const FlashList: typeof FlatList;
+//# sourceMappingURL=flashList.d.ts.map

package/lib/typescript/test/perfHelpers.d.ts

@@ -0,0 +1,9 @@
+/** Shared helpers for *.perf.test.tsx — mounted-row bounds and render-count guards. */
+export declare const PERF_DATASET_SIZE = 10000;
+export declare const PERF_MAX_MOUNTED_ROWS = 200;
+export declare function makeIndexedDataset(size: number): ReadonlyArray<{
+    id: string;
+    label: string;
+}>;
+export declare function countByTestIdPrefix(queryAllByTestId: (id: string | RegExp) => unknown[], prefix: string): number;
+//# sourceMappingURL=perfHelpers.d.ts.map

package/lib/typescript/theme/hooks.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Lightweight theme hooks — no PixelizeProvider, no palette barrels.
+ * Component modules import from here instead of the theme barrel.
+ */
+export { useTheme } from './provider/useTheme';
+export { useThemeColors } from './provider/useThemeColors';
+export { useThemeMode } from './provider/useThemeMode';
+export type { Theme, ThemeModeValue } from './provider/types';
+export type { RoleColors, StatusColors, StatusRole } from './tokens/roles';
+export type { ThemeName, ColorScheme, PaletteProps } from './tokens/types';
+//# sourceMappingURL=hooks.d.ts.map

package/lib/typescript/theme/index.d.ts

@@ -3,9 +3,10 @@
  * types a consumer annotates with. Design tokens themselves ship under `pixelize-native-library/tokens`;
  * this subpath is intentionally the small, runtime-facing layer an app wires once at its root.
  */
-export { PixelizeProvider, useTheme, useThemeColors, useThemeMode, createAsyncStorageAdapter, } from './provider';
+export { PixelizeProvider, useTheme, useThemeColors, useThemeMode, createAsyncStorageAdapter, THEME_NAMES, DEFAULT_THEME, loadPalette, loadPaletteSync, } from './provider';
 export type { PixelizeProviderProps, Theme, ThemeModeValue, ThemeMode, ColorModeStorageAdapter, AsyncStorageLike, } from './provider';
 export type { RoleColors, StatusColors, StatusRole } from './tokens/roles';
 export type { ThemeName, ColorScheme, PaletteProps } from './tokens/types';
-export { themeNames, DEFAULT_THEME } from './tokens/brands';
+/** @deprecated Use THEME_NAMES from this module instead. */
+export { THEME_NAMES as themeNames } from './provider';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/theme/platform/motion.native.d.ts

@@ -0,0 +1,15 @@
+export declare const motionDurations: {
+    readonly instant: 0;
+    readonly fast: 150;
+    readonly normal: 200;
+    readonly slow: 300;
+};
+export declare const motionEasings: {
+    standard: "ease-in-out";
+    enter: "ease-out";
+    exit: "ease-in";
+    snap: "linear";
+};
+export type MotionDuration = keyof typeof motionDurations;
+export type MotionEasing = keyof typeof motionEasings;
+//# sourceMappingURL=motion.native.d.ts.map

package/lib/typescript/theme/provider/PixelizeProvider.d.ts

@@ -1,81 +1,4 @@
-import type { ReactNode } from 'react';
-import { space, radii, fontSizes, fontWeights, lineHeights, letterSpacings, borderWidths, breakpoints, zIndices } from '../tokens';
-import type { ColorScheme, ElevationLevel, PaletteProps, RoleColors, ThemeName } from '../tokens';
-import type { ElevationStyle, FontStyleForWeight, FontWeightValue } from '../platform';
-import type { ColorModeStorageAdapter, ThemeMode } from './colorModeStorage';
-/**
- * The fully resolved theme for one (brand, resolvedMode): role colours resolved to plain strings,
- * the unitless numeric scale, and the platform-rendered pieces a token cannot hold (RN shadow props,
- * a font-style resolver). This is what `useTheme()` returns; component modules read it, never the
- * raw palette directly.
- */
-export type Theme = {
-    brand: ThemeName;
-    /** The resolved mode this theme was built for — never `'system'`. */
-    mode: ColorScheme;
-    /** Semantic role colours as resolved values. The `useThemeColors()` escape hatch returns this. */
-    colors: RoleColors;
-    /** The raw ramps, for the rare consumer that needs a specific rung the roles don't name. */
-    palette: PaletteProps;
-    space: typeof space;
-    radii: typeof radii;
-    fontSizes: typeof fontSizes;
-    fontWeights: typeof fontWeights;
-    lineHeights: typeof lineHeights;
-    letterSpacings: typeof letterSpacings;
-    borderWidths: typeof borderWidths;
-    breakpoints: typeof breakpoints;
-    zIndices: typeof zIndices;
-    /** Elevation levels already rendered to RN shadow props. Mode-independent — shared across themes. */
-    elevation: Record<ElevationLevel, ElevationStyle>;
-    /** A weight → RN text style, bound to whether the app has registered Inter. */
-    fontStyleForWeight: (weight: FontWeightValue) => FontStyleForWeight;
-};
-export type ThemeModeValue = {
-    /** The user's selection: `'light' | 'dark' | 'system'`. */
-    mode: ThemeMode;
-    /** What `system` currently resolves to, tracking the OS live. */
-    resolvedMode: ColorScheme;
-    /** Persists the choice and switches the theme. */
-    setMode: (mode: ThemeMode) => void;
-    /** The active brand. */
-    brand: ThemeName;
-    /** Persists the choice and switches the theme — mirrors `setMode`. */
-    setBrand: (brand: ThemeName) => void;
-};
-export type PixelizeProviderProps = {
-    children: ReactNode;
-    /**
-     * Initial brand. A persisted user choice wins over this. Defaults to `zinc` (the shadcn look).
-     * Read once on mount, like `mode` below — change it afterward via `setBrand` from
-     * `useThemeMode()`, not by re-passing a different prop value.
-     */
-    brand?: ThemeName;
-    /** Initial mode. A persisted user choice wins over this. Defaults to `system`. */
-    mode?: ThemeMode;
-    /** Persistence adapter. Absent → in-memory (choice lost on restart) + a dev warning. */
-    storage?: ColorModeStorageAdapter;
-    storageKey?: string;
-    /** Storage key for the brand choice — separate from `storageKey` (mode) so a plain-string
-     * adapter never has to encode two values into one slot. */
-    brandStorageKey?: string;
-    /**
-     * Whether the app has registered the Inter faces (`useFonts({...})`). Defaults to `false`: without
-     * this the library must use the always-safe system font, since an unregistered face degrades
-     * inconsistently across platforms. Pass `interLoaded={fontsLoaded}` once loading resolves.
-     */
-    interLoaded?: boolean;
-};
-/**
- * Two contexts, on purpose. `ThemeContext` holds the heavy resolved `Theme`; `ThemeModeContext` holds
- * the small mode-control triple. Both provider values are memoised on their true inputs, so:
- *  - a mode flip recomputes the theme exactly ONCE and re-renders each consumer once, and
- *  - an OS colour change while the mode is pinned (`resolvedMode` unchanged) keeps BOTH values
- *    reference-stable, so it re-renders nobody.
- * Splitting also means a `useThemeMode()` reader isn't invalidated by unrelated theme-object churn
- * and vice versa.
- */
-export declare const ThemeContext: import("react").Context<Theme | undefined>;
-export declare const ThemeModeContext: import("react").Context<ThemeModeValue | undefined>;
-export declare function PixelizeProvider({ children, brand: brandProp, mode, storage: storageProp, storageKey, brandStorageKey, interLoaded, }: PixelizeProviderProps): import("react").JSX.Element;
+import type { PixelizeProviderProps } from './types';
+export type { Theme, ThemeModeValue, PixelizeProviderProps } from './types';
+export declare function PixelizeProvider({ children, brand: brandProp, mode, storage: storageProp, storageKey, brandStorageKey, interLoaded, palette: paletteProp, }: PixelizeProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=PixelizeProvider.d.ts.map

package/lib/typescript/theme/provider/ThemeContext.d.ts

@@ -0,0 +1,4 @@
+import type { Theme, ThemeModeValue } from './types';
+export declare const ThemeContext: import("react").Context<Theme | undefined>;
+export declare const ThemeModeContext: import("react").Context<ThemeModeValue | undefined>;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/lib/typescript/theme/provider/index.d.ts

@@ -1,8 +1,9 @@
 export { PixelizeProvider } from './PixelizeProvider';
-export type { PixelizeProviderProps, Theme, ThemeModeValue } from './PixelizeProvider';
+export type { PixelizeProviderProps, Theme, ThemeModeValue } from './types';
 export { useTheme } from './useTheme';
 export { useThemeColors } from './useThemeColors';
 export { useThemeMode } from './useThemeMode';
 export { createAsyncStorageAdapter, memoryStorageAdapter, isThemeMode, isThemeName, DEFAULT_STORAGE_NAMESPACE, DEFAULT_BRAND_STORAGE_NAMESPACE, } from './colorModeStorage';
 export type { ColorModeStorageAdapter, AsyncStorageLike, ThemeMode } from './colorModeStorage';
+export { THEME_NAMES, DEFAULT_THEME, loadPalette, loadPaletteSync } from './loadPalette';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/theme/provider/loadPalette.d.ts

@@ -0,0 +1,9 @@
+import type { ColorScheme, PaletteProps, ThemeName } from '../tokens/types';
+/** Brand roster without importing any palette modules. */
+export declare const THEME_NAMES: readonly ["zinc", "lavender", "meadow", "radiant", "skyline", "slate", "emerald", "rosewood", "storefront"];
+export declare const DEFAULT_THEME: ThemeName;
+/** Loads one brand's palette for the given mode — only that brand's file is fetched. */
+export declare function loadPalette(brand: ThemeName, mode: ColorScheme): Promise<PaletteProps>;
+/** Synchronous palette for provider mount — static requires so Metro can bundle the example app. */
+export declare function loadPaletteSync(brand: ThemeName, mode: ColorScheme): PaletteProps;
+//# sourceMappingURL=loadPalette.d.ts.map

package/lib/typescript/theme/provider/types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { ColorScheme, ElevationLevel, PaletteProps, RoleColors, ThemeName } from '../tokens';
+import { space, radii, fontSizes, fontWeights, lineHeights, letterSpacings, borderWidths, breakpoints, zIndices } from '../tokens';
+import type { ElevationStyle, FontStyleForWeight, FontWeightValue } from '../platform';
+import type { ColorModeStorageAdapter, ThemeMode } from './colorModeStorage';
+export type Theme = {
+    brand: ThemeName;
+    mode: ColorScheme;
+    colors: RoleColors;
+    palette: PaletteProps;
+    space: typeof space;
+    radii: typeof radii;
+    fontSizes: typeof fontSizes;
+    fontWeights: typeof fontWeights;
+    lineHeights: typeof lineHeights;
+    letterSpacings: typeof letterSpacings;
+    borderWidths: typeof borderWidths;
+    breakpoints: typeof breakpoints;
+    zIndices: typeof zIndices;
+    elevation: Record<ElevationLevel, ElevationStyle>;
+    fontStyleForWeight: (weight: FontWeightValue) => FontStyleForWeight;
+};
+export type ThemeModeValue = {
+    mode: ThemeMode;
+    resolvedMode: ColorScheme;
+    setMode: (mode: ThemeMode) => void;
+    brand: ThemeName;
+    setBrand: (brand: ThemeName) => void;
+};
+export type PixelizeProviderProps = {
+    children: ReactNode;
+    brand?: ThemeName;
+    mode?: ThemeMode;
+    storage?: ColorModeStorageAdapter;
+    storageKey?: string;
+    brandStorageKey?: string;
+    interLoaded?: boolean;
+    /** Runtime-selected palette — wins over `brand` when provided. */
+    palette?: PaletteProps;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/theme/provider/useTheme.d.ts

@@ -1,4 +1,3 @@
-import type { Theme } from './PixelizeProvider';
-/** The full resolved theme: role colours, the numeric scale, and platform-rendered elevation/fonts. */
+import type { Theme } from './types';
 export declare function useTheme(): Theme;
 //# sourceMappingURL=useTheme.d.ts.map

package/lib/typescript/theme/provider/useThemeMode.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeModeValue } from './PixelizeProvider';
+import type { ThemeModeValue } from './types';
 /** `{ mode, resolvedMode, setMode }` for a theme switcher. Reads the light mode-control context. */
 export declare function useThemeMode(): ThemeModeValue;
 //# sourceMappingURL=useThemeMode.d.ts.map

package/lib/typescript/theme/tokens/builders/accentText.d.ts

@@ -26,6 +26,12 @@ export type FilledAccent = {
 };
 /** The candidate label with more contrast against `fill`. */
 export declare function pickOnAccent(fill: string): string;
+/**
+ * Ink for text drawn ON a filled swatch (button/tag/type-icon fill). `white`/`black` must be the
+ * mode-stable palette absolutes (`palette.white` / `palette.black`), not a mode-adaptive text ramp.
+ * Web exports the same helper from `pixelize-design-library` for consumer surfaces like type icons.
+ */
+export declare function onFilled(fill: string, white: string, black: string): string;
 /**
  * First rung whose better label clears AA, walking 500 → 600 → 700.
  *

package/lib/typescript/theme/tokens/roles/index.d.ts

@@ -23,6 +23,13 @@ export type StatusColors = {
     onSolid: string;
     /** Status text on `subtle`, ≥ 4.5:1 against it. */
     text: string;
+    /** Label to use when `text` is used as a FULL-BLEED FILL instead of as a text colour (a banner's
+     *  solid variant) — recomputed, not reused from `onSolid`: `onSolid` is tuned for `solid`
+     *  (badge/toast scale), which measures only 1.8–2.6:1 against a near-white canvas for
+     *  success/warning/info on every brand — too low for WCAG 1.4.11 at page-width. `text` itself
+     *  already clears 1.4.11 against canvas (it's proven against `subtle`, a near-canvas tint), so it
+     *  doubles as the fill; `onText` is its own best label, not `text`'s original dark-on-light pairing. */
+    onText: string;
     /** Faint status-tinted background (chip/alert fill). */
     subtle: string;
     /** Decorative status outline for the chip. */