@oxyhq/bloom 0.89.0 → 1.0.0

package/src/dialog/Dialog.tsx

@@ -28,6 +28,8 @@ import Animated, {
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { Backdrop, OverlayRoot } from '../overlay';
 import { useTheme } from '../theme/use-theme';
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { StyledView } from '../styles/styled-primitives';
 import { Context, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
@@ -56,7 +58,14 @@ import type {
   DialogProps,
 } from './types';
 
-export { DIALOG_SHEET_BACKDROP_TESTID };
+
+/**
+ * The panel node carries `className`, the caller's `style`, the surface chrome
+ * AND the enter/exit transform, so all four are ONE element type — built once at
+ * module scope, because a type constructed during render remounts the subtree on
+ * every render. See `button/Button.tsx` for the full rule.
+ */
+const AnimatedStyledView = Animated.createAnimatedComponent(StyledView);
 
 /**
  * Native variant of `<Dialog>`.
@@ -349,12 +358,12 @@ function CenteredOrSideDialog({
       style={sheetStyle}
     >
       <Context.Provider value={context}>
-        <View
+        <StyledView
           testID={testID}
           accessibilityLabel={label}
           aria-labelledby={title ? titleId : undefined}
           aria-describedby={description ? descriptionId : undefined}
-          {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+          className={panelClassName}
           style={[
             // Detached BottomSheet already adds `marginBottom: insets.bottom + 16`
             // to the sheet container — the floating card sits ABOVE the
@@ -372,7 +381,7 @@ function CenteredOrSideDialog({
           <DialogMorphContent morph={morphState}>
             {header ? headerBody : bodyNode}
           </DialogMorphContent>
-        </View>
+        </StyledView>
       </Context.Provider>
     </BottomSheet>
   );
@@ -515,10 +524,7 @@ function SideSheet({
   return (
     // `OverlayRoot` takes this drawer's place in the open-order overlay stack.
     // It mounts here, past the `mounted` guard, so the rank tracks OPENING.
-    <OverlayRoot
-      style={[sideStyles.root, containerStyle]}
-      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-    >
+    <OverlayRoot style={[sideStyles.root, containerStyle]} className={containerClassName}>
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
@@ -528,19 +534,19 @@ function SideSheet({
         style={sideStyles.backdrop}
       />
 
-      <Animated.View
+      <AnimatedStyledView
         accessibilityViewIsModal
         accessibilityLabel={label}
         aria-labelledby={title ? titleId : undefined}
         aria-describedby={description ? descriptionId : undefined}
         testID={testID}
         onLayout={measurePanel}
-        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+        className={panelClassName}
         style={[
           sideStyles.panel,
           // `shadowColor` is a valid RN style prop on native (Dialog.tsx is the
           // native variant); the web `shadow*` deprecation is handled in Dialog.web.tsx.
-          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow, pointerEvents: 'auto' },
+          { backgroundColor: theme.colors.background, pointerEvents: 'auto' },
           panelGeometry,
           panelAnimatedStyle,
           panelStyle,
@@ -564,7 +570,7 @@ function SideSheet({
         ) : (
           <View style={{ padding: contentPadding }}>{children}</View>
         )}
-      </Animated.View>
+      </AnimatedStyledView>
     </OverlayRoot>
   );
 }
@@ -582,49 +588,10 @@ const sideStyles = StyleSheet.create({
   panel: {
     position: 'absolute',
     overflow: 'hidden',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 12,
+    // `shadow-m` — the overlay role this drawer is one of. Hand-rolled here it
+    // was only the NATIVE half of the split, so the web fork's drawer got none
+    // of it, and its numbers drifted from every other Bloom overlay.
+    ...bloomShadowStyle('m'),
   },
 });
 
-/**
- * Helper used by the imperative `alert()` API. Mounts a `<Dialog>` against
- * a fresh control and presents it immediately. `onResolve` is invoked
- * exactly once when the dialog finishes closing (regardless of how the
- * dismissal happened).
- *
- * Kept private to the dialog module — `alert()` is the public surface.
- */
-export function AutoMountedDialog({
-  title,
-  description,
-  actions,
-  onResolve,
-}: {
-  title?: string;
-  description?: string;
-  actions: DialogAction[];
-  onResolve: () => void;
-}) {
-  const control = useDialogControl();
-
-  // `control` is referentially stable for the lifetime of the component
-  // (memoised by `useDialogControl` on `[id]`), so this effect runs exactly
-  // once per mount — present-on-mount semantics for an `alert()` call
-  // without re-presenting on subsequent renders.
-  useEffect(() => {
-    control.open();
-  }, [control]);
-
-  return (
-    <Dialog
-      control={control}
-      title={title}
-      description={description}
-      actions={actions}
-      onClose={onResolve}
-    />
-  );
-}

package/src/dialog/Dialog.web.tsx

@@ -24,6 +24,7 @@ import Animated, {
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
+import { StyledView } from '../styles/styled-primitives';
 import { Portal } from '../portal/index.web';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { Z_INDEX } from '../styles/z-index';
@@ -583,7 +584,6 @@ function DialogPanel({
   );
 }
 
-export { DIALOG_SHEET_BACKDROP_TESTID };
 
 /**
  * Side-sheet surface for the `left`/`right` placements. Pure CSS transitions:
@@ -705,10 +705,7 @@ function SheetSurface({
   }, [dismissOnBackdrop, onDismiss]);
 
   return (
-    <OverlayRoot
-      style={[sheetStyles.root, containerStyle]}
-      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-    >
+    <OverlayRoot style={[sheetStyles.root, containerStyle]} className={containerClassName}>
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
@@ -721,7 +718,7 @@ function SheetSurface({
         style={[sheetStyles.backdrop, { opacity: visible ? 1 : 0 }]}
       />
 
-      <View
+      <StyledView
         role="dialog"
         aria-label={label}
         aria-labelledby={title ? titleId : undefined}
@@ -731,7 +728,7 @@ function SheetSurface({
         onStartShouldSetResponder={() => true}
         onResponderRelease={stopPropagation}
         {...({ onClick: stopPropagation } as Record<string, unknown>)}
-        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+        className={panelClassName}
         style={[
           sheetStyles.panel,
           {
@@ -799,7 +796,7 @@ function SheetSurface({
             </DialogBody>
           </View>
         )}
-      </View>
+      </StyledView>
     </OverlayRoot>
   );
 }
@@ -825,38 +822,6 @@ function cancelFrame(token: FrameToken): void {
   clearTimeout(token.timer);
 }
 
-/**
- * Inline imperative dialog used by `alert()`. Mounts and immediately
- * presents; resolves the host's `onResolve` once the dialog has finished
- * its exit animation.
- */
-export function AutoMountedDialog({
-  title,
-  description,
-  actions,
-  onResolve,
-}: {
-  title?: string;
-  description?: string;
-  actions: DialogAction[];
-  onResolve: () => void;
-}) {
-  const control = useDialogControl();
-
-  useEffect(() => {
-    control.open();
-  }, [control]);
-
-  return (
-    <Dialog
-      control={control}
-      title={title}
-      description={description}
-      actions={actions}
-      onClose={onResolve}
-    />
-  );
-}
 
 // Annotated rather than cast: a plain object literal widens `position: 'absolute'`
 // to `string`, which is what the three `as ViewStyle` casts here used to silence.

package/src/dialog/DialogBottomSheet.tsx

@@ -16,6 +16,7 @@ import { type AnimatedStyle } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
+import { StyledView } from '../styles/styled-primitives';
 import { Context } from './context';
 import { DialogBody } from './DialogContent';
 import {
@@ -290,13 +291,16 @@ export function DialogBottomSheet({
       style={sheetStyle}
     >
       <Context.Provider value={context}>
-        <View
+        <StyledView
           testID={testID}
           accessibilityLabel={label}
           aria-labelledby={title ? titleId : undefined}
           aria-describedby={description ? descriptionId : undefined}
-          {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-          {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+          // Bottom placement renders ONE node for both, so the two classes are
+          // joined rather than spread twice — the second spread used to
+          // overwrite the first, so `containerClassName` was silently dropped on
+          // this branch and the cast type-checked it anyway.
+          className={[containerClassName, panelClassName].filter(Boolean).join(' ') || undefined}
           style={[
             // Nav-header mode: the large title + screens own their padding, so the
             // wrapper adds none. Otherwise the Dialog's uniform content padding.
@@ -314,7 +318,7 @@ export function DialogBottomSheet({
           <DialogMorphContent morph={morphState}>
             {header ? headerBody : dialogBody}
           </DialogMorphContent>
-        </View>
+        </StyledView>
       </Context.Provider>
     </BottomSheet>
   );

package/src/dialog/DialogContent.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react';
-import {
-  Text,
-  TouchableOpacity,
-  View,
-  type GestureResponderEvent,
-} from 'react-native';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+
+import { Text } from '../typography';
 
 import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { borderRadius } from '../styles/tokens';
 import { useDialogContext } from './context';
 import type { DialogAction, DialogActionColor } from './types';
 
@@ -44,12 +43,16 @@ export function DialogBody({
   return (
     <>
       {title ? (
+        // Bloom's `Text`, not react-native's: the raw one renders in whatever
+        // font the platform picks and takes no theme colour, so every dialog
+        // title in the library was the system face while the rest of the surface
+        // was Bloom's. The sizes stay explicit — the typography ROLES
+        // (`H1`…`H6`, `P`) carry family and weight, not a size ramp.
         <Text
           nativeID={titleId}
           style={{
             fontSize: 22,
             fontWeight: '600',
-            color: theme.colors.text,
             paddingBottom: description ? 4 : 16,
             lineHeight: 30,
           }}
@@ -93,44 +96,56 @@ function ActionButton({ action }: { action: DialogAction }) {
   const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
 
   const { background, foreground } = getActionPalette(color, theme.colors);
+  // Component state, not `Pressable`'s function-form `style`: css-interop
+  // swallows the function form and every base style with it.
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
 
+  // `shouldCloseOnPress` (default true) is the ONLY switch, for every colour.
+  // `cancel` used to bypass it — on the premise that a cancel button must always
+  // dismiss — which made it the one action a caller could not own the dismissal
+  // of. That is exactly what a surface needs: the surface stack dismisses
+  // through its OWN `dismiss(result)` so the value reaches the `present()`
+  // promise, and the entry's `'closing'` status is what runs the exit animation.
+  // The default is unchanged, so a caller that says nothing still gets
+  // dismiss-on-press.
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
       const onPress = action.onPress;
-      if (color === 'cancel') {
-        // Cancel always dismisses; consumer's onPress (rare) runs after.
-        close(onPress ? () => onPress(e) : undefined);
-        return;
-      }
       if (shouldCloseOnPress) {
         close(onPress ? () => onPress(e) : undefined);
       } else {
         onPress?.(e);
       }
     },
-    [action.onPress, close, color, shouldCloseOnPress],
+    [action.onPress, close, shouldCloseOnPress],
   );
 
   return (
-    <TouchableOpacity
-      style={{
-        borderRadius: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: background,
-        opacity: action.disabled ? 0.5 : 1,
-        paddingVertical: 12,
-        paddingHorizontal: 24,
-      }}
+    <Pressable
+      style={[
+        {
+          borderRadius: borderRadius.full,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: background,
+          opacity: action.disabled ? 0.5 : 1,
+          paddingVertical: 12,
+          paddingHorizontal: 24,
+        },
+        !action.disabled && pressed && { opacity: 0.7 },
+      ]}
       onPress={handlePress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       disabled={action.disabled}
-      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={action.label}
       testID={action.testID}
     >
       <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
         {action.label}
       </Text>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
 

package/src/dialog/DialogHeader.tsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useLayoutEffect,
   useMemo,
+  useState,
   useSyncExternalStore,
 } from 'react';
 import {
@@ -313,26 +314,29 @@ function HeaderOverflowMenu({
   items: NonNullable<DialogHeaderConfig['actions']>;
   onImage: boolean;
 }): React.ReactElement {
-  // Own the control so an item press can close the popover before acting.
-  const control = useDialogControl();
+  // Own the open state so an item press can close the popover before acting.
+  const [open, setOpen] = useState(false);
   return (
-    <Popover control={control}>
-      <PopoverTrigger label="More">
-        {({ props }) => (
-          <FrostedIconButton
-            size="sm"
-            onPress={props.onPress}
-            accessibilityLabel={props.accessibilityLabel}
-            icon={
-              <DotGrid3x1_Stroke2_Corner0_Rounded
-                size="md"
-                fill={onImage ? ON_IMAGE_TEXT : undefined}
-              />
-            }
-          />
-        )}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild label="More">
+        <FrostedIconButton
+          size="sm"
+          icon={
+            <DotGrid3x1_Stroke2_Corner0_Rounded
+              size="md"
+              fill={onImage ? ON_IMAGE_TEXT : undefined}
+            />
+          }
+        />
       </PopoverTrigger>
-      <PopoverContent label="More actions" placement="bottom-end">
+      <PopoverContent
+        label="More actions"
+        align="end"
+        // A row list, not a prose card: it opts out of the popover's `w-72 p-4`
+        // for the same reason `Combobox` does, and shadcn would build this
+        // surface out of a `DropdownMenu` rather than a `Popover` at all. A
+        // CLASS, because that is what the popover's own chrome is now.
+        className="w-auto p-space-4">
         {items.map((action) => (
           <Item
             key={action.accessibilityLabel}
@@ -340,7 +344,10 @@ function HeaderOverflowMenu({
             leading={action.icon}
             density="compact"
             disabled={action.disabled}
-            onPress={() => control.close(() => action.onPress())}
+            onPress={() => {
+              setOpen(false);
+              action.onPress();
+            }}
           />
         ))}
       </PopoverContent>
@@ -400,7 +407,21 @@ function HeaderProgressBar({
   return (
     <View
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: total, now: step }}
+      // The FLAT `aria-value*` props: react-native-web drops the
+      // `accessibilityValue` object entirely, so the wizard step announced a
+      // progressbar with no step count. React Native folds these back into
+      // `accessibilityValue`, so native is unchanged.
+      aria-valuemin={0}
+      aria-valuemax={total}
+      aria-valuenow={step}
+      // The NAME, which the value props do not supply and which `progressbar`
+      // never computes from contents: unnamed, the bar announced a bare "2 of
+      // 5" with no subject. This one Bloom can answer itself — the bar always
+      // means the same thing — so unlike `Slider` and `DotGridMeter` it takes
+      // no prop. `aria-valuetext` carries the reading, since the raw number is
+      // announced as a percentage otherwise.
+      accessibilityLabel="Progress"
+      aria-valuetext={`Step ${step} of ${total}`}
       style={[
         styles.progressTrack,
         { backgroundColor: onImage ? 'rgba(255,255,255,0.25)' : theme.colors.border },
@@ -755,6 +776,10 @@ const styles = StyleSheet.create({
     lineHeight: 38,
     letterSpacing: -0.5,
     fontWeight: '700',
+    // `H1` now carries shadcn's `text-center`. A dialog's large title is a
+    // leading-aligned page heading, so it states its own alignment rather than
+    // inheriting the variant's.
+    textAlign: 'left',
   },
   largeSubtitle: {
     fontSize: 16,

package/src/dialog/SheetShell.tsx

@@ -10,10 +10,11 @@
  * Consumers needing the same behaviour for app code should use the public
  * `BottomSheet` primitive directly.
  */
-import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { useAccessibilityFocus } from '../hooks/use-accessibility-focus';
 import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
@@ -45,6 +46,13 @@ export function SheetShell({
   const theme = useTheme();
   const ref = useRef<BottomSheetRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
+  // Whether the sheet is on screen. Tracked here rather than read off the
+  // imperative control because the control has no readable state — and this is
+  // the ONE place all five sheet-presenting families pass through, so wiring the
+  // screen-reader focus move here is what gets it right for every one of them
+  // instead of four times.
+  const [presented, setPresented] = useState(false);
+  const bodyRef = useAccessibilityFocus<View>(presented);
 
   const callQueuedCallbacks = useCallback(() => {
     const queued = closeCallbacks.current;
@@ -61,6 +69,7 @@ export function SheetShell({
   }, []);
 
   const open = useCallback(() => {
+    setPresented(true);
     ref.current?.present();
   }, []);
 
@@ -72,6 +81,7 @@ export function SheetShell({
   }, []);
 
   const handleDismiss = useCallback(() => {
+    setPresented(false);
     callQueuedCallbacks();
     onClose?.();
   }, [callQueuedCallbacks, onClose]);
@@ -110,6 +120,16 @@ export function SheetShell({
         <SheetHandle onPress={() => close()} />
         {header}
         <View
+          // Deliberately NOT `accessible`: collapsing the body into one
+          // accessibility element would make its rows unreachable, and the
+          // focus move below would land on the group instead of the first row.
+          ref={bodyRef}
+          // The platform's own dismiss gesture — a two-finger Z scrub under
+          // VoiceOver, a back gesture under TalkBack. Without it a screen-reader
+          // user has to find the drag handle to leave a sheet, and the handle is
+          // a 4dp pill. Android's hardware back is already covered: every Bloom
+          // sheet is an RN `<Modal>`, whose `onRequestClose` it fires.
+          onAccessibilityEscape={() => close()}
           accessibilityLabel={label}
           style={[styles.body, { backgroundColor: theme.colors.background }, contentStyle]}
         >

package/src/dialog/index.ts

@@ -1,13 +1,7 @@
-export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
-export { BloomDialogProvider } from './BloomDialogProvider';
-export { alert } from './alert';
+export { Dialog } from './Dialog';
 export { useDialogContext, useDialogControl } from './context';
 export { useDialogHeader } from './DialogHeader';
 export { useDialogFrame } from './DialogMorph';
-export type {
-  AlertButton,
-  AlertButtonStyle,
-} from './alert-store';
 export type { DialogFrame } from './DialogMorph';
 export type {
   DialogAction,

package/src/dialog/index.web.ts

@@ -8,16 +8,10 @@
 // Web bundlers select this file via the `"browser"` export condition in
 // `package.json`'s `exports['./dialog']`; native bundlers fall through to
 // the React Native build above.
-export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog.web';
-export { BloomDialogProvider } from './BloomDialogProvider.web';
-export { alert } from './alert';
+export { Dialog, BLOOM_DIALOG_CSS } from './Dialog.web';
 export { useDialogContext, useDialogControl } from './context';
 export { useDialogHeader } from './DialogHeader';
 export { useDialogFrame } from './DialogMorph';
-export type {
-  AlertButton,
-  AlertButtonStyle,
-} from './alert-store';
 export type { DialogFrame } from './DialogMorph';
 export type {
   DialogAction,

package/src/dialog/types.ts

@@ -175,8 +175,12 @@ export type DialogContextProps = {
  * Color of a declarative `DialogAction`. Maps to bloom's theme palette:
  *
  * - `'default'`  -> theme primary (filled CTA)
- * - `'cancel'`   -> theme secondary (auto-dismiss, no `onPress` required)
+ * - `'cancel'`   -> theme secondary
  * - `'destructive'` -> theme negative
+ *
+ * Colour is purely visual. Whether a press dismisses is `shouldCloseOnPress`
+ * for EVERY colour, `'cancel'` included — it used to bypass that switch, which
+ * made it the one action a caller could not own the dismissal of.
  */
 export type DialogActionColor = 'default' | 'cancel' | 'destructive';
 

package/src/dot-grid-meter/DotGridMeter.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import type { DotGridMeterProps } from './types';
 
 /**
@@ -18,10 +19,12 @@ const DotGridMeterComponent: React.FC<DotGridMeterProps> = ({
   gap = 6,
   filledColor,
   emptyColor,
+  accessibilityLabel,
   style,
   testID,
 }) => {
   const { colors } = useTheme();
+  useAccessibleNameWarning('DotGridMeter', accessibilityLabel);
   const onColor = filledColor ?? colors.success;
   const offColor = emptyColor ?? colors.backgroundSecondary;
 
@@ -49,7 +52,17 @@ const DotGridMeterComponent: React.FC<DotGridMeterProps> = ({
         style,
       ]}
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: safeTotal, now: safeFilled }}
+      // The FLAT `aria-value*` props: react-native-web drops the
+      // `accessibilityValue` object entirely, so the meter announced a
+      // progressbar carrying no value. React Native folds these back into
+      // `accessibilityValue`, so native is unchanged.
+      aria-valuemin={0}
+      aria-valuemax={safeTotal}
+      aria-valuenow={safeFilled}
+      // The NAME, which the value props above do not supply: `progressbar`
+      // takes its name from the author alone, so an unnamed one announces a
+      // number against nothing.
+      accessibilityLabel={accessibilityLabel}
       testID={testID}
     >
       {dots.map((isFilled, index) => (

package/src/dot-grid-meter/types.ts

@@ -30,6 +30,18 @@ export interface DotGridMeterProps {
    * @default theme.colors.backgroundSecondary
    */
   emptyColor?: string;
+  /**
+   * The meter's accessible NAME — what is being measured.
+   *
+   * `progressbar` takes its name from the author only: ARIA never computes one
+   * from an element's contents for this role, and the contents here are dots
+   * anyway. Without it the meter announces "13 of 30" against nothing.
+   * `StatBar` gets this from its required `label`; a bare grid of dots has no
+   * such text, so it has to be stated.
+   *
+   * Omitting it warns once in development; see `use-accessible-name-warning`.
+   */
+  accessibilityLabel?: string;
   /** Container style override. */
   style?: StyleProp<ViewStyle>;
   testID?: string;