@oxy.so/bloom 5.4.0 → 6.0.0

package/src/provider/BloomProvider.tsx

@@ -34,47 +34,52 @@ export function BloomProvider({
     // `value` is passed unconditionally (null when unset) so toggling a resolver
     // never changes the tree shape and remounts everything below it.
     <ImageResolverProvider value={imageResolver ?? null}>
-      {/* Holds the first paint on the same visual as font loading until a
-          non-English locale's strings have loaded (English never waits). */}
-      <LocaleProvider locale={locale} fallback={themeProps.onFontsLoading ?? null}>
+      {/* The locale for everything below, the font-loading screen included. */}
+      <LocaleProvider locale={locale}>
         <BloomThemeProvider {...themeProps}>
-          <ScrollRestorationProvider adapter={scrollAdapter}>
-            <BloomHapticsProvider enabled={haptics}>
-              {/*
-                A PROVIDER, not an outlet, and the distinction is the one this
-                component's exclusion list encodes. Outlets stay out because a
-                second mount duplicates every surface they render; this renders NO
-                surface — a transparent container on Android and nothing at all
-                elsewhere — so a second mount duplicates nothing, and the nearest
-                one simply becomes the target for its subtree. Nor is its position
-                an app decision the way an outlet's is: it has no z-order and no
-                insets, and it must WRAP the content, which is exactly what this
-                provider already does with `children`.
-              */}
-              <GlassBlurTargetProvider>
+          {/* Holds the first paint on the same screen as font loading until a
+              non-English locale's strings have loaded (English never waits).
+              Inside the theme, like the font wait, because that screen is built
+              from Bloom components that read it. */}
+          <LocaleProvider locale={locale} fallback={themeProps.onFontsLoading ?? null}>
+            <ScrollRestorationProvider adapter={scrollAdapter}>
+              <BloomHapticsProvider enabled={haptics}>
                 {/*
-                  The bottom edge's claim registry. Also a provider, not an outlet:
-                  it renders nothing and holds only the set of surfaces currently
-                  parked at the bottom edge, so a tab bar can publish its footprint
-                  and a FAB or a toast stack can read it without either importing
-                  the other.
+                  A PROVIDER, not an outlet, and the distinction is the one this
+                  component's exclusion list encodes. Outlets stay out because a
+                  second mount duplicates every surface they render; this renders NO
+                  surface — a transparent container on Android and nothing at all
+                  elsewhere — so a second mount duplicates nothing, and the nearest
+                  one simply becomes the target for its subtree. Nor is its position
+                  an app decision the way an outlet's is: it has no z-order and no
+                  insets, and it must WRAP the content, which is exactly what this
+                  provider already does with `children`.
                 */}
-                <BottomEdgeProvider>
+                <GlassBlurTargetProvider>
                   {/*
-                    And the top edge's, for the same reason one edge further up: a
-                    floating `PageHeader` overlays the content rather than sitting
-                    above it, so the content has to be told how much of the edge is
-                    gone. Two registries rather than one keyed by edge, because a
-                    reader of either only ever wants one number and must not
-                    re-render when the other moves.
+                    The bottom edge's claim registry. Also a provider, not an outlet:
+                    it renders nothing and holds only the set of surfaces currently
+                    parked at the bottom edge, so a tab bar can publish its footprint
+                    and a FAB or a toast stack can read it without either importing
+                    the other.
                   */}
-                  <TopEdgeProvider>
-                    <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
-                  </TopEdgeProvider>
-                </BottomEdgeProvider>
-              </GlassBlurTargetProvider>
-            </BloomHapticsProvider>
-          </ScrollRestorationProvider>
+                  <BottomEdgeProvider>
+                    {/*
+                      And the top edge's, for the same reason one edge further up: a
+                      floating `PageHeader` overlays the content rather than sitting
+                      above it, so the content has to be told how much of the edge is
+                      gone. Two registries rather than one keyed by edge, because a
+                      reader of either only ever wants one number and must not
+                      re-render when the other moves.
+                    */}
+                    <TopEdgeProvider>
+                      <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
+                    </TopEdgeProvider>
+                  </BottomEdgeProvider>
+                </GlassBlurTargetProvider>
+              </BloomHapticsProvider>
+            </ScrollRestorationProvider>
+          </LocaleProvider>
         </BloomThemeProvider>
       </LocaleProvider>
     </ImageResolverProvider>

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={[
         {

package/src/rating/types.ts

@@ -62,8 +62,8 @@ export interface RatingProps {
   testID?: string;
 }
 
-/** `small` is a 24px star, `medium` (default) 32, `large` 40. */
-export type RatingInputSize = 'small' | 'medium' | 'large';
+/** `sm` is a 24px star, `md` (default) 32, `lg` 40. */
+export type RatingInputSize = 'sm' | 'md' | 'lg';
 
 export interface RatingInputProps {
   /**
@@ -75,7 +75,7 @@ export interface RatingInputProps {
   onChange: (value: number) => void;
   /** How many stars. Default `5`. */
   max?: number;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: RatingInputSize;
   /** Disables the whole group: no press, no keyboard, dimmed. */
   disabled?: boolean;

package/src/route-stops/RouteStops.tsx

@@ -249,12 +249,12 @@ function RouteStopsComponent({
       {onAddStop ? (
         <View style={{ alignItems: 'flex-start', paddingLeft: 8, paddingTop: 4 }}>
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             leadingIcon={addIcon}
             onPress={onAddStop}
             disabled={!canAddStop}
-            testID={testID ? `${testID}-add` : undefined}
+            testID={testID ? `${testID}-add` : undefined} tone="accent" appearance="plain"
           >
             {labels?.addStop ?? messages.addStop}
           </Button>

package/src/screen/Screen.tsx

@@ -27,7 +27,7 @@ export function Screen({ header, bottomBar, primaryAction, active: requestedActi
   const [measuredBottom, setBottom] = useState<number | null>(null);
   const top = measuredTop ?? headerHeight ?? (56 + (Platform.OS === 'web' ? 0 : insets?.top ?? 0));
   const bottom = measuredBottom ?? bottomBarHeight ?? (58 + windowEdgeGap(insets?.bottom ?? 0));
-  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(() => Platform.OS !== 'web' && (Keyboard.isVisible?.() ?? false));
   useEffect(() => {
     if (Platform.OS === 'web') return;
     const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
@@ -37,8 +37,8 @@ export function Screen({ header, bottomBar, primaryAction, active: requestedActi
   const hasBottom = !keyboardVisible && Boolean(bottomBar || primaryAction);
   const document = documentScroll && Platform.OS === 'web';
   const value = useMemo(() => ({ active, scrollY, collapseProgress, collapseTarget, activeScrollerId,
-    contentInsetsHandled: document, topInset: header ? top : 0, bottomInset: hasBottom ? bottom + contentClearance : navigationScope === 'inherit' ? inheritedNavigation?.bottomInset ?? contentClearance : contentClearance,
-  }), [active, scrollY, collapseProgress, collapseTarget, activeScrollerId, header, hasBottom, top, bottom, contentClearance, navigationScope, inheritedNavigation?.bottomInset, document]);
+    contentInsetsHandled: document, topInset: header ? top : 0, bottomInset: keyboardVisible ? contentClearance : hasBottom ? bottom + contentClearance : navigationScope === 'inherit' ? inheritedNavigation?.bottomInset ?? contentClearance : contentClearance,
+  }), [active, scrollY, collapseProgress, collapseTarget, activeScrollerId, header, hasBottom, top, bottom, contentClearance, navigationScope, inheritedNavigation?.bottomInset, document, keyboardVisible]);
   useScreenWindowBinding(value, { active: document });
   const headerNode = header ? <View testID={testID ? `${testID}-header` : undefined} pointerEvents="box-none" onLayout={event => setTop(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, top: 0, zIndex: Z_INDEX.floating, marginBottom: -top } : { position: 'absolute', top: 0, left: 0, right: 0 }}>{header}</View> : null;
   const bottomNode = hasBottom ? <View testID={testID ? `${testID}-bottom` : undefined} pointerEvents="box-none" onLayout={event => setBottom(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, bottom: 0, zIndex: Z_INDEX.floating, marginTop: -bottom } : { position: 'absolute', bottom: 0, left: 0, right: 0 }}>{bottomBar ?? <View pointerEvents="box-none" style={{ alignItems: 'flex-end', paddingHorizontal: 16, paddingBottom: windowEdgeGap(insets?.bottom ?? 0), minHeight: bottom }}>{primaryAction}</View>}</View> : null;

package/src/screen/use-screen-scroll.ts

@@ -1,6 +1,7 @@
+import { animateMotion } from '../motion/recipes';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { useCallback, useEffect, useId } from 'react';
-import { runOnJS, useAnimatedScrollHandler, useComposedEventHandler, useReducedMotion, useSharedValue, withSpring } from 'react-native-reanimated';
+import { runOnJS, useAnimatedScrollHandler, useComposedEventHandler, useReducedMotion, useSharedValue } from 'react-native-reanimated';
 import { useScreen } from './context';
 import type { ScreenScrollOptions } from './types';
 
@@ -30,7 +31,7 @@ export function useScreenScroll({ active: requestedActive = true, handler = null
     const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
     if (target !== screen.collapseTarget.value) {
       screen.collapseTarget.value = target;
-      screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+      animateMotion(screen.collapseProgress, target, 'expand', reducedMotion);
     }
   } }, [screen, active, id, previousY, reducedMotion, hasRestoration, record, restoring]);
   const onScroll = useComposedEventHandler([ownHandler, handler]);

package/src/screen/use-screen-window-scroll.ts

@@ -1,5 +1,6 @@
+import { animateMotion } from '../motion/recipes';
 import { useEffect } from 'react';
-import { useReducedMotion, withSpring } from 'react-native-reanimated';
+import { useReducedMotion } from 'react-native-reanimated';
 import { useScreen, type ScreenContextValue } from './context';
 import { useScreenScroll } from './use-screen-scroll';
 import type { ScreenScrollOptions } from './types';
@@ -28,7 +29,7 @@ export function useScreenWindowBinding(screen: ScreenContextValue, options: Scre
       const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
       if (target !== screen.collapseTarget.value) {
         screen.collapseTarget.value = target;
-        screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+        animateMotion(screen.collapseProgress, target, 'expand', reducedMotion);
       }
     };
     if (screen.activeScrollerId.value === owner) screen.scrollY.value = previous;

package/src/segmented-control/SegmentedControl.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance, type BloomSize } from '../appearance';
 import {
   createContext,
@@ -30,7 +29,7 @@ import { useInteractionState } from '../hooks/use-interaction-state';
 import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
 import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+
 import { useFieldMembership } from '../field/membership';
 import { handleRovingKeyDown, useRovingTabIndex } from '../hooks/roving-focus';
 import { webDataSet } from '../styles/web-data';
@@ -58,7 +57,7 @@ import { webDataSet } from '../styles/web-data';
  * segment reads through its text weight and colour alone.
  */
 
-type SegmentedControlSize = BloomSize | 'small' | 'medium' | 'large';
+type SegmentedControlSize = BloomSize;
 type SegmentedControlVariant = 'solid' | 'plain';
 
 const GEOMETRY = {
@@ -219,7 +218,7 @@ export function SegmentedControl<T extends string>({
 }) {
   const onValueChange = onValueChangeProp ?? onChange ?? (() => {});
   const theme = useTheme();
-  const {size} = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
+  const {size} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   useInteractiveWebCss(STYLE_ID, SEGMENTED_CSS);
   // The group is ONE control made of several segments, so a `Field` names the
   // group and disables all of it. `label` is the group's name rather than

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
@@ -14,26 +15,14 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { useDialogContext, useDialogControl } from '../dialog/context';
 import { SheetShell } from '../dialog/SheetShell';
-import {
-  ROW_ICON_SIZE,
-  ROW_INDICATOR_END_CLASS,
-  SELECT_CHEVRON_SIZE,
-  SELECT_ITEM_CLASS,
-  SELECT_ITEM_SIZE_CLASS,
-  SELECT_ITEM_TEXT_CLASS,
-  SELECT_SEPARATOR_CLASS,
-  SELECT_TRIGGER_CLASS,
-  SELECT_TRIGGER_POPUP,
-  SELECT_TRIGGER_SIZE_CLASS,
-  SELECT_VALUE_CLASS,
-} from '../floating/constants';
+import { SELECT_CHEVRON_SIZE, SELECT_ITEM_CLASS, SELECT_ITEM_SIZE_CLASS, SELECT_TRIGGER_CLASS, SELECT_TRIGGER_POPUP, SELECT_TRIGGER_SIZE_CLASS, SELECT_VALUE_CLASS } from '../floating/constants';
 import { useMenuPalette } from '../floating/menu-palette';
 import { menuType, menuTypeClass } from '../floating/menu-type';
 import { cx } from '../floating/shared';
 import { TriggerSlot } from '../floating/TriggerSlot';
 import type { DialogControlProps } from '../dialog/types';
 import { useInteractionState } from '../hooks/use-interaction-state';
-import { RiCheckLine as CheckIcon } from '../icons/remix/RiCheckLine';
+
 import {
   StyledPressable,
   StyledText,
@@ -50,17 +39,7 @@ import {
   useSelectItemContext,
   VALUE_TYPE,
 } from './shared';
-import type {
-  SelectContentProps,
-  SelectIconProps,
-  SelectItemIndicatorProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectProps,
-  SelectItemContextValue,
-  SelectTriggerProps,
-  SelectValueProps,
-} from './types';
+import type { SelectContentProps, SelectIconProps, SelectItemProps, SelectProps, SelectItemContextValue, SelectTriggerProps, SelectValueProps } from './types';
 import { useFieldMembership } from '../field/membership';
 import { useMessages } from '../locale/messages';
 import { SELECT_MESSAGES } from './messages';
@@ -94,7 +73,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+export function Select(props: SelectProps) {
+  const { children, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled, size: sizeProp } = props;
+  const [value, onValueChange] = useControllableState<string | undefined>({ value: valueProp, defaultValue, controlled: Object.prototype.hasOwnProperty.call(props, 'value'), onChange: next => { if (next !== undefined) onValueChangeProp?.(next); } });
   const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const control = useDialogControl();

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
@@ -12,21 +13,7 @@ import React, {
 } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-import {
-  MENU_WIDTH,
-  ROW_ICON_SIZE,
-  ROW_INDICATOR_END_CLASS,
-  SELECT_CHEVRON_SIZE,
-  SELECT_ITEM_CLASS,
-  SELECT_ITEM_SIZE_CLASS,
-  SELECT_ITEM_TEXT_CLASS,
-  SELECT_MAX_HEIGHT,
-  SELECT_SEPARATOR_CLASS,
-  SELECT_TRIGGER_CLASS,
-  SELECT_TRIGGER_POPUP,
-  SELECT_TRIGGER_SIZE_CLASS,
-  SELECT_VALUE_CLASS,
-} from '../floating/constants';
+import { MENU_WIDTH, SELECT_CHEVRON_SIZE, SELECT_ITEM_CLASS, SELECT_ITEM_SIZE_CLASS, SELECT_MAX_HEIGHT, SELECT_TRIGGER_CLASS, SELECT_TRIGGER_POPUP, SELECT_TRIGGER_SIZE_CLASS, SELECT_VALUE_CLASS } from '../floating/constants';
 import { FloatingPanel } from '../floating/FloatingPanel';
 import { useMenuPalette } from '../floating/menu-palette';
 import { menuType, menuTypeClass } from '../floating/menu-type';
@@ -39,7 +26,7 @@ import {
   StyledText,
   StyledView,
 } from '../styles/styled-primitives';
-import { RiCheckLine as CheckIcon } from '../icons/remix/RiCheckLine';
+
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -53,17 +40,7 @@ import {
   useSelectItemContext,
   VALUE_TYPE,
 } from './shared';
-import type {
-  SelectContentProps,
-  SelectIconProps,
-  SelectItemIndicatorProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectProps,
-  SelectItemContextValue,
-  SelectTriggerProps,
-  SelectValueProps,
-} from './types';
+import type { SelectContentProps, SelectIconProps, SelectItemProps, SelectProps, SelectItemContextValue, SelectTriggerProps, SelectValueProps } from './types';
 import { useFieldMembership } from '../field/membership';
 import { useMessages } from '../locale/messages';
 import { SELECT_MESSAGES } from './messages';
@@ -182,7 +159,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+export function Select(props: SelectProps) {
+  const { children, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled, size: sizeProp } = props;
+  const [value, onValueChange] = useControllableState<string | undefined>({ value: valueProp, defaultValue, controlled: Object.prototype.hasOwnProperty.call(props, 'value'), onChange: next => { if (next !== undefined) onValueChangeProp?.(next); } });
   const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const [isOpen, setIsOpen] = useState(false);