@oxy.so/bloom 5.4.1 → 6.1.0

package/src/note-card/NoteCardSkeleton.tsx

@@ -21,10 +21,10 @@ export function NoteCardSkeleton({ density = 'grid', lines, style, testID }: Not
 
   return (
     <Card
-      variant="outlined"
+
       radius={geo.radius}
       style={{ padding: geo.padding, minHeight: geo.minHeight }}
-      testID={testID}
+      testID={testID} appearance="outline"
     >
       <View
         aria-hidden

package/src/note-editor/NoteEditorToolbar.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -47,13 +48,15 @@ import type { NoteEditorToolbarProps } from './types';
 
 export function NoteEditorToolbar({
   actions,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
   accessibilityLabel,
   labels: labelsProp,
   style,
   testID,
 }: NoteEditorToolbarProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const { messages } = useMessages(NOTE_EDITOR_MESSAGES);
   const { width, onLayout } = useContainerWidth();
   const labels = { ...messages.toolbar, ...labelsProp };

package/src/note-editor/constants.ts

@@ -11,8 +11,8 @@ import type { NoteEditorToolbarProps } from './types';
  * and the fix is to export the table rather than to edit these.
  */
 export const TOOLBAR_ITEM_SIZE: Record<NonNullable<NoteEditorToolbarProps['size']>, number> = {
-  medium: 34,
-  small: 30,
+  md: 34,
+  sm: 30,
 };
 
 /** The group's own 1px border, both sides. */

package/src/note-editor/shared.ts

@@ -20,7 +20,7 @@ import type { NoteEditorAction, NoteEditorToolbarProps, NoteSaveState } from './
  */
 export function toolbarCapacity(
   width: number,
-  size: NonNullable<NoteEditorToolbarProps['size']> = 'medium',
+  size: NonNullable<NoteEditorToolbarProps['size']> = 'md',
 ): number {
   const item = TOOLBAR_ITEM_SIZE[size];
   const usable = width - TOOLBAR_GROUP_BORDER + TOOLBAR_DIVIDER;

package/src/note-editor/types.ts

@@ -100,8 +100,8 @@ export interface NoteEditorToolbarLabels {
 export interface NoteEditorToolbarProps {
   /** The actions, in the order they are drawn. */
   actions: ReadonlyArray<NoteEditorAction>;
-  /** The `ButtonGroup` rung. Default `medium` (34px items); `small` is 30. */
-  size?: 'medium' | 'small';
+  /** The `ButtonGroup` rung. Default `md` (34px items); `sm` is 30. */
+  size?: 'md' | 'sm';
   /** Disables every action and the overflow, without each caller writing it per action. */
   disabled?: boolean;
   /** Names the toolbar. Required in substance — a row of glyphs has no name of its own. */

package/src/overlay/Overlay.tsx

@@ -1,3 +1,4 @@
+import { ScreenScope } from '../layout/screen-scope';
 /**
  * The shared plumbing every portaled surface needs: an interactive ROOT and a
  * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
@@ -39,7 +40,7 @@
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
-import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { BlurView } from 'expo-blur';
 
 import { useWindowedBlurTarget } from '../glass/blur-target';
@@ -225,15 +226,10 @@ function OverlayRootView({
             `bottom-sheet/…Base`       level 0, fill `theme.colors.background`
             `floating/FloatingPanel`   level 1 — the menu/popover surface
 
-          Two portaled surfaces still paint something they do not publish:
-          `SettingsModal` paints `resolveSettingsPalette(theme).full` and
-          `Tooltip` the menu palette, so content inside either reads the page
-          rung rather than their real fill. That is an approximation inherited
-          from before the ladder existed, not a claim made here — and the fix is
-          for each of them to publish its own `fill`, not for this root to guess
-          one on their behalf.
         */}
-        <SurfaceLevelProvider level={0}>{children}</SurfaceLevelProvider>
+        <ScreenScope>
+            <SurfaceLevelProvider level={0}>{children}</SurfaceLevelProvider>
+          </ScreenScope>
       </StyledView>
     </OverlayLayerContext.Provider>
   );

package/src/page-header/PageHeader.tsx

@@ -21,7 +21,7 @@ import { useSurfaceFill } from '../styles/surface-levels';
 import { useScreenContext } from '../screen/context';
 import { Button } from '../button';
 import { BUTTON_SHADOW } from '../button/shared';
-import { ControlSurface } from '../control-surface';
+import { BloomScope } from "../appearance";
 import { GlassIsland } from '../glass';
 import { RiArrowLeftLine } from '../icons/remix/RiArrowLeftLine';
 import { useClaimTopEdge, useScrollOffset } from '../layout';
@@ -59,7 +59,7 @@ import { useCommonMessages } from '../locale/common-messages';
  * ── THE ISLANDS ARE THE CONSUMER'S GROUPING ─────────────────────────────────
  *
  * The header never infers grouping by reading its children's types. The
- * `actions` slot is wrapped in a `ControlSurface` with `material: 'glass'`, so
+ * `actions` slot is wrapped in a `BloomScope` with shared control defaults, so
  * a `ButtonGroup` placed there becomes one island with no prop written on it,
  * and two `ButtonGroup`s become two islands. That is a declaration the consumer
  * makes, which is the only way the header can be right about which actions
@@ -408,7 +408,7 @@ function PageHeaderComponent({
       pointerEvents={floating ? 'box-none' : undefined}
       testID={testID ? `${testID}-actions` : undefined}
     >
-      {floating ? <ControlSurface material="glass">{actions}</ControlSurface> : actions}
+      {floating ? <BloomScope>{actions}</BloomScope> : actions}
     </View>
   ) : null;
 
@@ -447,7 +447,7 @@ function PageHeaderComponent({
         >
           {backButton}
           {floating && leading ? (
-            <ControlSurface material="glass">{leading}</ControlSurface>
+            <BloomScope>{leading}</BloomScope>
           ) : (
             leading
           )}

package/src/page-header/types.ts

@@ -103,7 +103,7 @@ export interface PageHeaderProps {
   leading?: ReactNode;
   /**
    * Rendered at the end of the bar. In the floating presentation this slot is
-   * wrapped in a `ControlSurface` with `material: 'glass'`, so a `ButtonGroup`
+   * wrapped in a `BloomScope` with shared control defaults, so a `ButtonGroup`
    * inside it becomes one island with no prop written on it. Declare the
    * grouping yourself — the header never infers it by reading children.
    */

package/src/pipeline/DealCard.tsx

@@ -120,13 +120,13 @@ function DealCardComponent({
   return (
     <SurfaceLevelProvider level={2} fill={paint.surface}>
       <Card
-        variant="outlined"
+
         radius="radius-12"
         style={[
           { padding: DEAL_CARD_PADDING, gap: 8, ...surfaceFillVars(paint.surface) },
           style,
         ]}
-        testID={testID}
+        testID={testID} appearance="outline"
       >
         <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 4 }}>
           {subject}

package/src/pipeline/PipelineColumn.tsx

@@ -144,7 +144,7 @@ function PipelineColumnComponent({
         )}
 
         {onLoadMore && !loading ? (
-          <Button variant="text" size="small" onPress={onLoadMore} testID={id('load-more')}>
+          <Button  size="sm" onPress={onLoadMore} testID={id('load-more')} tone="accent" appearance="plain">
             {loadMoreLabel}
           </Button>
         ) : null}

package/src/place-card/PlaceActions.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
@@ -29,11 +30,14 @@ import type { PlaceActionsProps } from './types';
  */
 function PlaceActionsComponent({
   actions,
-  size = 'small',
+  size: sizeProp,
   accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: PlaceActionsProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'sm', tone: 'neutral' });
+  const size = inheritedSize;
+
   const { messages } = useMessages(PLACE_CARD_MESSAGES);
   const accessibilityLabel = accessibilityLabelProp ?? messages.actions;
   if (actions.length === 0) return null;
@@ -56,14 +60,14 @@ function PlaceActionsComponent({
       {actions.map((action) => (
         <Button
           key={action.id}
-          variant="secondary"
+
           size={size}
           leadingIcon={action.icon}
           href={action.href}
           onPress={action.onPress}
           disabled={action.disabled}
           accessibilityLabel={action.accessibilityLabel ?? action.label}
-          testID={testID ? `${testID}-${action.id}` : undefined}
+          testID={testID ? `${testID}-${action.id}` : undefined} tone="neutral" appearance="outline"
         >
           {action.label}
         </Button>

package/src/place-card/types.ts

@@ -65,7 +65,7 @@ export interface PlaceAction {
 export interface PlaceActionsProps {
   actions: readonly PlaceAction[];
   /** Default `small` — the rung `ai-profile-card` draws its header actions at. */
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md';
   /** Names the row, which is a `group`. `"Actions"` in English. */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;

package/src/place-details/PlaceAmenities.tsx

@@ -124,7 +124,7 @@ function PlaceAmenitiesComponent({
         </View>
       ))}
       {onShowAll && fullCount > shown.length ? (
-        <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+        <Button  onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined} tone="neutral" appearance="outline">
           {showAllLabel ? showAllLabel(fullCount) : listingMessages.showAllAmenities(fullCount)}
         </Button>
       ) : null}

package/src/place-details/PlacePopularTimes.tsx

@@ -125,7 +125,7 @@ function PlacePopularTimesComponent({
       {days.length > 1 ? (
         <SegmentedControl
           type="radio"
-          size="small"
+          size="sm"
           label={daysLabel}
           value={current?.id ?? ''}
           onValueChange={setSelected}

package/src/place-reviews/PlaceReviewCard.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useState } from 'react';
 import { Pressable, View, type LayoutChangeEvent } from 'react-native';
 
 import { Avatar } from '../avatar';
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { Chip } from '../chip';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiCheckLine } from '../icons/remix/RiCheckLine';
@@ -262,16 +262,16 @@ function PlaceReviewCardComponent({
               <View />
             )}
             {onReport ? (
-              <Button
-                variant="link"
+              <LinkButton
+
                 linkTone="secondary"
-                size="small"
+                size="sm"
                 leadingIcon={RiFlagLine}
                 onPress={onReport}
                 testID={id('report')}
               >
                 {reportLabel}
-              </Button>
+              </LinkButton>
             ) : null}
           </View>
         ) : null}

package/src/place-reviews/WriteReviewPrompt.tsx

@@ -74,20 +74,20 @@ function WriteReviewPromptComponent({
             </Text>
           </View>
         </View>
-        <Button variant="primary" size="small" leadingIcon={RiQuillPenLine} onPress={onStart} testID={id('start')}>
+        <Button  size="sm" leadingIcon={RiQuillPenLine} onPress={onStart} testID={id('start')} tone="accent" appearance="solid">
           {actionLabel}
         </Button>
       </View>
       {onDismiss ? (
         <View style={{ position: 'absolute', top: 12, right: 12 }}>
           <Button
-            variant="secondary"
+
             size="xs"
             iconOnly
             leadingIcon={RiCloseLine}
             accessibilityLabel={dismissLabel}
             onPress={onDismiss}
-            testID={id('dismiss')}
+            testID={id('dismiss')} tone="neutral" appearance="outline"
           />
         </View>
       ) : null}

package/src/price-breakdown/PriceSummary.tsx

@@ -102,12 +102,12 @@ function PriceSummaryComponent({
       {collapsible ? (
         <View style={{ alignItems: 'flex-start', paddingTop: showLines ? PRICE_LINE_GAP : 0 }}>
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             trailingIcon={open ? RiArrowUpSLine : RiArrowDownSLine}
             onPress={toggle}
             aria-expanded={open}
-            testID={testID ? `${testID}-disclosure` : undefined}
+            testID={testID ? `${testID}-disclosure` : undefined} tone="accent" appearance="plain"
           >
             {open ? collapseLabel : expandLabel}
           </Button>

package/src/proof-of-delivery/ProofOfDelivery.tsx

@@ -296,8 +296,8 @@ function ProofOfDeliveryComponent({
         <InteractionBoundary disabled={disabled || submitting}>{actions}</InteractionBoundary>
       ) : (
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           onPress={submit}
           // `submitting` is the ONE thing that stops the press: a second
@@ -305,7 +305,7 @@ function ProofOfDeliveryComponent({
           // does not stop it — it answers it.
           disabled={disabled || submitting}
           accessibilityLabel={labels.submit}
-          testID={id('submit')}
+          testID={id('submit')} tone="accent" appearance="solid"
         >
           {labels.submit}
         </Button>

package/src/proof-of-delivery/SignaturePad.tsx

@@ -252,13 +252,13 @@ function SignaturePadComponent({
         </Text>
         {hasInk ? (
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             leadingIcon={RiDeleteBinLine}
             onPress={clear}
             disabled={disabled}
             accessibilityLabel={labels.clear}
-            testID={id('clear')}
+            testID={id('clear')} tone="accent" appearance="plain"
           >
             {labels.clear}
           </Button>

package/src/questionnaire/Questionnaire.tsx

@@ -1,7 +1,7 @@
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
-import { SurfaceLevelProvider, surfaceFillVars, surfaceFillOn, surfaceTextOn, hairlineOn } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillOn, surfaceTextOn, hairlineOn } from '../styles/surface-levels';
 import React, {
   memo,
   useCallback,
@@ -810,7 +810,8 @@ function QuestionnaireComponent({
   const theme = useTheme();
   const surfaceLayer = useSurfaceLayer();
   const customSurface = StyleSheet.flatten(style);
-  const surfaceFill = resolveSurfaceFill(String(customSurface?.backgroundColor ?? surfaceLayer.fill), false, surfaceLayer.parentFill);
+  const material = resolveSurfaceMaterial({ fill: String(customSurface?.backgroundColor ?? surfaceLayer.fill), parentFill: surfaceLayer.parentFill, parentLevel: surfaceLayer.parentLevel });
+  const { paintFill: paintFill, publishedFill: surfaceFill } = material;
   const palette = useMemo(() => resolveQuestionnairePalette(theme, surfaceFill), [theme, surfaceFill]);
   const reducedMotion = useReducedMotion();
   const headingId = `bloom-questionnaire-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
@@ -1131,10 +1132,10 @@ function QuestionnaireComponent({
       aria-labelledby={headingId}
       accessibilityLabel={question.question}
       {...(IS_WEB ? { onKeyDown } : {})}
-      style={[cardStyle, style, { backgroundColor: 'transparent', ...surfaceFillVars(surfaceFill) }]}
+      style={[cardStyle, style, { backgroundColor: 'transparent', ...material.vars }]}
     >
-      <SurfacePaint fill={surfaceFill} radius={customSurface?.borderRadius ?? CARD_RADIUS} />
-      <SurfaceLevelProvider level={surfaceLayer.level} fill={surfaceFill}>
+      <SurfacePaint fill={paintFill} radius={customSurface?.borderRadius ?? CARD_RADIUS} />
+      <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       <Animated.View
         style={[
           {

package/src/queue-panel/QueuePanel.tsx

@@ -1,4 +1,4 @@
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { parseRgba } from '../theme/color-utils';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { AccessibilityInfo, ScrollView, View } from 'react-native';
@@ -129,7 +129,7 @@ function QueuePanelComponent({
   const isPanel = variant === 'panel';
   const background = StyleSheet.flatten(style)?.backgroundColor ?? (isPanel ? paint.surface : undefined);
   const publishedFill = typeof background === 'string' && background !== 'transparent' && parseRgba(background)?.a !== 0
-    ? resolveSurfaceFill(background, false, parentFill) : undefined;
+    ? resolveSurfaceMaterial({ fill: background, parentFill, paint: isPanel }).publishedFill : undefined;
   const empty = !nowPlaying && queue.length === 0 && context.length === 0;
 
   const content = (
@@ -153,9 +153,10 @@ function QueuePanelComponent({
         { flexDirection: 'column', minHeight: 0 },
         style,
         surfaceFillVars(publishedFill),
+        isPanel && publishedFill ? { backgroundColor: 'transparent' } : null,
       ]}
     >
-      {isPanel && publishedFill ? <SurfacePaint radius={StyleSheet.flatten(style)?.borderRadius ?? 8} /> : null}
+      {isPanel && publishedFill ? <SurfacePaint fill={background as string} radius={StyleSheet.flatten(style)?.borderRadius ?? 8} /> : null}
       <View
         style={{
           flexDirection: 'row',
@@ -230,10 +231,10 @@ function QueuePanelComponent({
                   action={
                     onClearQueue ? (
                       <Button
-                        variant="text"
-                        size="small"
+
+                        size="sm"
                         onPress={onClearQueue}
-                        testID={testID ? `${testID}-clear` : undefined}
+                        testID={testID ? `${testID}-clear` : undefined} tone="accent" appearance="plain"
                       >
                         {labels.clearQueue}
                       </Button>

package/src/radio/Radio.tsx

@@ -1,4 +1,4 @@
-import { normalizeBloomSize } from '../appearance/legacy';
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -92,9 +92,7 @@ const IS_WEB = Platform.OS === 'web';
 const RadioComponent = function Radio<Value extends string = string>({
   value,
   checked: checkedProp,
-  selected,
-  onValueChange: onValueChangeProp,
-  onSelect,
+  onValueChange,
   label,
   description,
   size: sizeProp,
@@ -106,8 +104,7 @@ const RadioComponent = function Radio<Value extends string = string>({
   nativeID,
   testID,
 }: RadioProps<Value>) {
-  const onValueChange = onValueChangeProp ?? onSelect;
-  const checked = checkedProp ?? selected ?? false;
+  const checked = checkedProp ?? false;
   const theme = useTheme();
   // ADJACENT label (see `field/membership.ts`); the field's `disabled` is a
   // constraint, so a radio inside a disabled field cannot re-enable itself.
@@ -120,7 +117,7 @@ const RadioComponent = function Radio<Value extends string = string>({
   });
   const isDisabled = field.disabled;
   const ringOffset = useRingOffsetStyle();
-  const { size: scopedSize, tone } = useBloomAppearance({ size: normalizeBloomSize(sizeProp), tone: toneProp }, { size: 'md', tone: 'accent' });
+  const { size: scopedSize, tone } = useBloomAppearance({ size: sizeProp, tone: toneProp }, { size: 'md', tone: 'accent' });
   const size = scopedSize;
   const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, BLOOM_RADIO_CSS);
@@ -208,21 +205,23 @@ export const Radio = memo(RadioComponent) as typeof RadioComponent;
  * lets the group carry `role="radiogroup"` and its accessible name — a
  * screen reader announces "2 of 4" only when the options are inside one.
  */
-const RadioGroupComponent = function RadioGroup<Value extends string = string>({
-  label,
-  value,
-  onValueChange: onValueChangeProp,
-  onSelect,
-  options,
-  size: sizeProp,
-  disabled = false,
-  tone: toneProp,
-  style,
-  labelStyle,
-  variant = 'default',
-  testID,
-}: RadioGroupProps<Value>) {
-  const onValueChange = onValueChangeProp ?? onSelect;
+const RadioGroupComponent = function RadioGroup<Value extends string = string>(props: RadioGroupProps<Value>) {
+  const {
+    label,
+    value: valueProp,
+    defaultValue,
+    onValueChange: onValueChangeProp,
+    options,
+    size: sizeProp,
+    disabled = false,
+    tone: toneProp,
+    style,
+    labelStyle,
+    variant = 'default',
+    testID,
+  } = props;
+  const [value, setValue] = useControllableState<Value | undefined>({ value: valueProp, defaultValue, controlled: Object.prototype.hasOwnProperty.call(props, 'value'), onChange: next => { if (next !== undefined) onValueChangeProp?.(next); } });
+  const onValueChange = (next: Value) => setValue(next);
   // The group is one control made of several, so a `Field` around it names the
   // GROUP and disables every option — `multiple` is the field's side of that
   // (`docs/field.mdx`), and each radio keeps its own id and its own name.
@@ -230,7 +229,7 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
   // own — so it goes in as the caller's name and outranks the field's.
   const field = useFieldMembership({ accessibilityLabel: label, disabled });
   const isDisabled = field.disabled;
-  const { size: scopedSize, tone } = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+  const { size: scopedSize, tone } = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
   const size = scopedSize;
   return (
     <View

package/src/radio/RadioCard.tsx

@@ -1,3 +1,4 @@
+import { useFieldMembership } from '../field/membership';
 import { useRingOffsetStyle } from '../styles/surface-levels';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
@@ -63,19 +64,18 @@ ${CARD} {
 const RadioCardComponent = function RadioCard<Value extends string = string>({
   value,
   checked: checkedProp,
-  selected,
-  onValueChange: onValueChangeProp,
-  onSelect,
+  onValueChange,
   title,
   description,
-  disabled = false,
+  disabled: disabledProp = false,
   tone: toneProp,
   style,
   accessibilityLabel,
   testID,
 }: RadioCardProps<Value>) {
-  const onValueChange = onValueChangeProp ?? onSelect;
-  const checked = checkedProp ?? selected ?? false;
+  const checked = checkedProp ?? false;
+  const field = useFieldMembership({ disabled: disabledProp, accessibilityLabel, label: title, labelPlacement: 'adjacent' });
+  const disabled = field.disabled;
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
   const { tone } = useBloomAppearance({ tone: toneProp }, {size: 'md', tone: 'accent'});
@@ -142,7 +142,10 @@ const RadioCardComponent = function RadioCard<Value extends string = string>({
       accessibilityRole="radio"
       // `aria-checked` is the one spelling both platforms honour — see `Radio`.
       aria-checked={checked}
-      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityLabel={field.accessibilityLabel}
+      nativeID={field.nativeID}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       accessibilityHint={description}
       testID={testID}
     >

package/src/radio/types.ts

@@ -16,11 +16,9 @@ export interface RadioProps<Value extends string = string> {
   value: Value;
   /** Whether this option is the checked one. */
   checked?: boolean;
-  selected?: boolean;
   /** Called with `value` when the option is chosen. Selecting the already-checked
    * option is a no-op — a radio, unlike a checkbox, cannot be un-chosen. */
   onValueChange?: (value: Value) => void;
-  onSelect?: (value: Value) => void;
   /** Optional label text. */
   label?: string;
   /** Optional description shown below the label. */
@@ -61,10 +59,11 @@ export interface RadioGroupProps<Value extends string = string> {
    */
   label?: string;
   /** The selected value, or `undefined` for a group with nothing chosen yet. */
-  value: Value | undefined;
+  value?: Value;
+  /** Initial selection when uncontrolled. */
+  defaultValue?: Value;
   /** Called with the newly chosen value. */
   onValueChange?: (value: Value) => void;
-  onSelect?: (value: Value) => void;
   /** The options, in order. */
   options: ReadonlyArray<RadioOption<Value>>;
   /** Size preset, applied to every option. */
@@ -89,10 +88,8 @@ export interface RadioCardProps<Value extends string = string> {
   value: Value;
   /** Whether this card is the checked one. */
   checked?: boolean;
-  selected?: boolean;
   /** Called with `value` when the card is chosen. Re-choosing it is a no-op. */
   onValueChange?: (value: Value) => void;
-  onSelect?: (value: Value) => void;
   /** The card's title (one line); also its accessible name. */
   title: string;
   /** Optional one-line description under the title. */

package/src/rating/RatingInput.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useBloomAppearance } from '../appearance';
+import React, { memo, useCallback, useState } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
 import { RiStarFill } from '../icons/remix/RiStarFill';
@@ -48,9 +49,9 @@ import { useFieldMembership } from '../field/membership';
  */
 
 const SIZE_CONFIG: Record<RatingInputSize, { star: number; gap: number }> = {
-  small: { star: 24, gap: 4 },
-  medium: { star: 32, gap: 6 },
-  large: { star: 40, gap: 8 },
+  sm: { star: 24, gap: 4 },
+  md: { star: 32, gap: 6 },
+  lg: { star: 40, gap: 8 },
 };
 
 const IS_WEB = Platform.OS === 'web';
@@ -84,13 +85,16 @@ function RatingInputComponent({
   value,
   onChange,
   max = 5,
-  size = 'medium',
+  size: sizeProp,
   disabled: disabledProp = false,
   accessibilityLabel,
   formatStarLabel: formatStarLabelProp,
   style,
   testID,
 }: RatingInputProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const theme = useTheme();
   const { messages } = useMessages(RATING_MESSAGES);
   const formatStarLabel = formatStarLabelProp ?? messages.star;
@@ -169,6 +173,8 @@ function RatingInputComponent({
       accessibilityLabel={field.accessibilityLabel}
       aria-label={field.accessibilityLabel}
       aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
+      aria-required={field.required || undefined}
       aria-disabled={disabled || undefined}
       style={[
         {