@oxy.so/bloom 5.4.1 → 6.1.0

package/src/creator-studio/PayoutSummaryCard.tsx

@@ -2,13 +2,13 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { chartHueTone } from '../chart-cards/palette';
 import { bandSize } from '../chart-cards/geometry';
 import { CartesianPlot } from '../chart-cards/primitives/CartesianPlot';
 import { ChartCardSurface } from '../chart-cards/primitives/ChartCardSurface';
 import { TABULAR } from '../chart-cards/primitives/ChartHeader';
-import { describeDeltaRatio, groupThousands } from '../chart-cards/primitives/format';
+import { describeDeltaRatio } from '../chart-cards/primitives/format';
 import { useActiveIndex } from '../chart-cards/primitives/use-active-index';
 import { roundedBarPath, singleBarSlot } from '../chart-cards/rounded-bar-geometry';
 import { lerp, useChartProgress } from '../chart-cards/use-chart-progress';
@@ -187,9 +187,9 @@ function PayoutSummaryCardComponent({
       </View>
 
       {onViewStatements || statementsHref ? (
-        <Button
-          variant="link"
-          size="small"
+        <LinkButton
+
+          size="sm"
           trailingIcon={RiArrowRightSLine}
           onPress={onViewStatements}
           href={statementsHref}
@@ -197,7 +197,7 @@ function PayoutSummaryCardComponent({
           testID={testID ? `${testID}-statements` : undefined}
         >
           {labels.statements}
-        </Button>
+        </LinkButton>
       ) : null}
     </ChartCardSurface>
   );

package/src/creator-studio/PitchCard.tsx

@@ -183,7 +183,7 @@ function PitchCardComponent({
           </View>
         </View>
         {status === 'submitted' && onEdit ? (
-          <Button variant="secondary" size="medium" onPress={onEdit} style={styles.submit} testID={id('edit')}>
+          <Button  size="md" onPress={onEdit} style={styles.submit} testID={id('edit')} tone="neutral" appearance="outline">
             {labels.edit}
           </Button>
         ) : null}
@@ -250,14 +250,14 @@ function PitchCardComponent({
       />
 
       <Button
-        variant="primary"
-        size="medium"
+
+        size="md"
         leadingIcon={RiSendPlaneLine}
         onPress={onSubmit}
         disabled={!canSubmit}
         loading={submitting}
         style={styles.submit}
-        testID={id('submit')}
+        testID={id('submit')} tone="accent" appearance="solid"
       >
         {labels.submit}
       </Button>

package/src/creator-studio/TrackMetadataForm.tsx

@@ -163,8 +163,8 @@ function TrackMetadataFormComponent({
           </Text>
         </View>
         <Switch
-          value={value.explicit}
-          onValueChange={(v) => set('explicit', v)}
+          checked={value.explicit}
+          onCheckedChange={(v) => set('explicit', v)}
           disabled={disabled}
           accessibilityLabel={labels.explicit}
           testID={id('explicit')}

package/src/creator-studio/TrackUploadRow.tsx

@@ -244,24 +244,24 @@ function TrackUploadRowComponent({
       <View style={styles.actions}>
         {status === 'failed' && onRetry ? (
           <Button
-            variant="secondary"
+
             size="xs"
             leadingIcon={RiRefreshLine}
             onPress={onRetry}
-            testID={testID ? `${testID}-retry` : undefined}
+            testID={testID ? `${testID}-retry` : undefined} tone="neutral" appearance="outline"
           >
             {labels.retry}
           </Button>
         ) : null}
         {onRemove ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             iconOnly
             leadingIcon={RiCloseLine}
             accessibilityLabel={labels.remove(fileName)}
             onPress={onRemove}
-            testID={testID ? `${testID}-remove` : undefined}
+            testID={testID ? `${testID}-remove` : undefined} tone="neutral" appearance="outline"
           />
         ) : null}
       </View>

package/src/date-picker/TimeField.tsx

@@ -9,7 +9,7 @@ import { TYPE_SCALE } from '../typography';
 import { resolveCalendarPalette } from './palette';
 import { formatTime, parseTime, snapTime, stepTime } from './time';
 import type { TimeFieldProps, TimeFieldSize } from './types';
-import { useInheritedControl } from '../control-surface';
+import { useBloomAppearance } from '../appearance';
 import { useFieldMembership } from '../field/membership';
 
 /**
@@ -45,8 +45,8 @@ import { useFieldMembership } from '../field/membership';
  */
 
 const SIZE_CONFIG: Record<TimeFieldSize, { width: number; height: number; type: 'body-medium' | 'body-2-medium' }> = {
-  small: { width: 96, height: 32, type: 'body-2-medium' },
-  medium: { width: 104, height: 38, type: 'body-medium' },
+  sm: { width: 96, height: 32, type: 'body-2-medium' },
+  md: { width: 104, height: 38, type: 'body-medium' },
 };
 
 /** `transition-colors duration-100 ease-out` on the border. Web only. */
@@ -74,8 +74,8 @@ function TimeFieldComponent({
   // `"--:--"` names nothing, so the name is a prop — or, inside a `Field`, the
   // field's label. The density contract supplies the size the same way: a
   // container can ask for `small` once instead of on every control.
-  const density = useInheritedControl('density', sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : undefined, 'md');
-  const size = density === 'sm' ? 'small' : 'medium';
+  const { size: density } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = density === 'xs' || density === 'sm' ? 'sm' : 'md';
   const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
   const disabled = field.disabled;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);

package/src/date-picker/types.ts

@@ -231,7 +231,7 @@ export interface MeetingSchedulerProps extends CalendarConstraintProps {
 }
 
 /** `small` is a 32-tall field with body-2 text; `medium` (default) 38 with body. */
-export type TimeFieldSize = 'small' | 'medium';
+export type TimeFieldSize = 'sm' | 'md';
 
 export interface TimeFieldProps {
   /**

package/src/dialog/Dialog.tsx

@@ -1,7 +1,8 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, {
   useCallback,
   useEffect,
@@ -11,14 +12,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, useWindowDimensions, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, {
   type AnimatedStyle,
   cancelAnimation,
@@ -35,8 +29,8 @@ import { useTheme } from '../theme/use-theme';
 import { useIsRtl } from '../hooks/use-is-rtl';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { Context, useDialogControl } from './context';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
+import { Context } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
 import {
@@ -58,12 +52,7 @@ import {
   physicalDialogSide,
   type DialogSidePlacement,
 } from './placement';
-import type {
-  DialogAction,
-  DialogControlProps,
-  DialogInset,
-  DialogProps,
-} from './types';
+import type { DialogControlProps, DialogInset, DialogProps } from './types';
 import { useMessages } from '../locale/messages';
 import { DIALOG_MESSAGES } from './messages';
 
@@ -492,7 +481,7 @@ function SideSheet({
 
   useEffect(() => {
     cancelAnimation(progress);
-    const timing = { duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
+    const timing = { ...MOTION_RECIPES[open ? 'present' : 'dismiss'], duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
     if (open) {
       setMounted(true);
       progress.value = withTiming(1, timing);
@@ -538,7 +527,8 @@ function SideSheet({
   );
 
   const panelRadius = StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius;
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
   if (!mounted) return null;
 
   // The drawer uses the PAGE token as its tint and nominal surface for its
@@ -582,7 +572,7 @@ function SideSheet({
           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: 'transparent', pointerEvents: 'auto', ...surfaceFillVars(surfaceFill) },
+          { backgroundColor: 'transparent', pointerEvents: 'auto', ...material.vars },
           panelGeometry,
           panelAnimatedStyle,
           panelStyle,
@@ -590,8 +580,8 @@ function SideSheet({
           { backgroundColor: 'transparent' },
         ]}
       >
-        <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />
-        <SurfaceLevelProvider level={0} fill={surfaceFill}>
+        <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />
+        <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer body
           // has no Dialog scroll offset to drive a collapse) over content inset

package/src/dialog/Dialog.web.tsx

@@ -1,7 +1,8 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * `Dialog` — WEB: a pure-DOM modal overlay rendered into Bloom's `Portal`.
  *
@@ -25,15 +26,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { ScrollView, StyleSheet, useWindowDimensions, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, {
   Easing,
   useSharedValue,
@@ -46,13 +39,13 @@ import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { StyledView } from '../styles/styled-primitives';
 import { Portal } from '../portal/index.web';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { useIsRtl } from '../hooks/use-is-rtl';
-import { Context, useDialogContext, useDialogControl } from './context';
+import { Context, useDialogContext } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
 import {
@@ -319,8 +312,8 @@ function CenterOrSideDialog({
       return;
     }
     backdropFade.value = isClosing
-      ? withTiming(0, { duration: FADE_OUT_DURATION, easing: Easing.in(Easing.ease) })
-      : withTiming(1, { duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
+      ? withTiming(0, { ...MOTION_RECIPES.dismiss, duration: FADE_OUT_DURATION, easing: Easing.in(Easing.ease) })
+      : withTiming(1, { ...MOTION_RECIPES.present, duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
   }, [backdropFade, isOpen, isClosing]);
 
   useImperativeHandle(
@@ -477,7 +470,8 @@ function DialogPanel({
   const headerController = useDialogHeaderController();
   const { height: viewportHeight } = useWindowDimensions();
   const heightRatio = maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
 
   // Size morphing across an in-place content swap. The centered card is the one
   // placement whose width can vary too, so `maxWidth` is handed over as well.
@@ -538,7 +532,7 @@ function DialogPanel({
           // `--bloom-surface` on the element that carries the fill, so web CSS
           // inside the dialog reads the dialog's colour and not the colour of
           // whatever surface it was opened over.
-          ...surfaceFillVars(surfaceFill),
+          ...material.vars,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
           // Design-system overlay elevation (`shadow-m`) as a `boxShadow` — RN-Web
@@ -560,8 +554,8 @@ function DialogPanel({
         { backgroundColor: 'transparent' },
       ]}
     >
-      <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />
-      <SurfaceLevelProvider level={0} fill={surfaceFill}>
+      <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />
+      <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       {header ? (
         // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
         // collapsing title over its own scroll content (see `DialogHeader`). The
@@ -750,7 +744,8 @@ function SheetSurface({
     if (dismissOnBackdrop) onDismiss();
   }, [dismissOnBackdrop, onDismiss]);
 
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
 
   // The drawer uses the PAGE token as its tint and nominal surface for its
   // content — see `DialogPanel`'s own wrap for why a portal does not do that on
@@ -790,7 +785,7 @@ function SheetSurface({
         className={panelClassName}
         style={[
           sheetStyles.panel,
-          surfaceFillVars(surfaceFill),
+          material.vars,
           {
             backgroundColor: 'transparent',
             // Above this surface's OWN backdrop, and nothing more: `OverlayRoot`
@@ -810,8 +805,8 @@ function SheetSurface({
           { backgroundColor: 'transparent' },
         ]}
       >
-        <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius} />
-        <SurfaceLevelProvider level={0} fill={surfaceFill}>
+        <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius} />
+        <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer
           // body does not own a Dialog scroll offset to drive a collapse) over

package/src/directions/DirectionsSummary.tsx

@@ -214,11 +214,11 @@ function DirectionsSummaryComponent({
 
       {onStart && chosen ? (
         <Button
-          variant="primary"
-          size="medium"
+
+          size="md"
           leadingIcon={ModeIcon}
           onPress={onStart}
-          testID={id('start')}
+          testID={id('start')} tone="accent" appearance="solid"
         >
           {labels?.start ?? messages.start}
         </Button>

package/src/empty-state/EmptyState.tsx

@@ -84,8 +84,9 @@ function EmptyStateComponent({
 
   const renderAction = (a: EmptyStateAction, kind: 'primary' | 'secondary') => (
     <Button
-      variant={kind}
-      size={variant === 'compact' ? 'small' : 'medium'}
+      appearance={kind === 'primary' ? 'solid' : 'outline'}
+      tone={kind === 'primary' ? 'accent' : 'neutral'}
+      size={variant === 'compact' ? 'sm' : 'md'}
       onPress={a.onPress}
       disabled={a.disabled}
       loading={a.loading}

package/src/eviction/EvictionReportCard.tsx

@@ -229,17 +229,17 @@ function EvictionReportCardComponent({
             />
           ) : null}
           {onShare ? (
-            <Button variant="secondary" size="small" leadingIcon={RiShareLine} onPress={onShare} testID={id('share')}>
+            <Button  size="sm" leadingIcon={RiShareLine} onPress={onShare} testID={id('share')} tone="neutral" appearance="outline">
               {shareLabel}
             </Button>
           ) : null}
           {onContactSupport ? (
             <Button
-              variant="secondary"
-              size="small"
+
+              size="sm"
               leadingIcon={RiChat3Line}
               onPress={onContactSupport}
-              testID={id('contact')}
+              testID={id('contact')} tone="neutral" appearance="outline"
             >
               {contactSupportLabel}
             </Button>

package/src/fab/index.ts

@@ -1,2 +1,2 @@
 export { Fab } from './Fab';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './types';
+export type { FabProps, FabSize } from './types';

package/src/fab/index.web.ts

@@ -4,4 +4,4 @@
 // changing that barrel or the set of web-forked subpaths.
 
 export { Fab } from './Fab.web';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './types';
+export type { FabProps, FabSize } from './types';

package/src/fab/types.ts

@@ -1,28 +1,16 @@
-import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
-import type { ButtonProps } from '../button/types';
+import type { ButtonProps, ButtonIconComponent } from '../button/types';
 import type { BloomSize } from '../appearance';
 
-export type FabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
-export type FabSize = 'small' | 'medium' | 'large';
-export type FabPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static';
-export type FabMinimizeBehavior = 'none' | 'hide' | 'collapse';
+export type FabSize = BloomSize;
 
-/** A prominent action. Screen/BottomBar own placement unless explicitly supplied. */
-export interface FabProps extends Omit<ButtonProps, 'children' | 'leadingIcon' | 'trailingIcon' | 'leading' | 'trailing' | 'size' | 'variant'> {
+/** A prominent action. Screen/BottomBar own placement and scroll behavior. */
+export interface FabProps extends Omit<ButtonProps, 'children' | 'icon' | 'leadingIcon' | 'trailingIcon' | 'leading' | 'trailing'> {
+  icon?: ButtonIconComponent;
   label?: string;
-  /** Glyph dimensions in points; defaults to the selected size’s icon scale. */
+  /** Glyph dimensions in points; defaults to the selected size's icon scale. */
   iconSize?: number;
-  /** Animate the extended label away while retaining the action and accessible name. */
+  /** Parent-controlled label collapse; preserves the action and accessible name. */
   collapsed?: boolean;
-  children?: ReactNode;
-  size?: BloomSize | FabSize | number;
-  /** Existing color preset. Explicit tone takes precedence. */
-  variant?: FabVariant;
-  placement?: FabPlacement;
-  offset?: number;
-  minimizeBehavior?: FabMinimizeBehavior;
   labelStyle?: StyleProp<TextStyle>;
-  zIndex?: number;
-  accessibilityHint?: string;
 }

package/src/fab/use-fab-props.ts

@@ -1,54 +1,23 @@
-import { cloneElement, createElement, isValidElement, useMemo } from 'react';
-import { Platform, type ViewStyle } from 'react-native';
+import { createElement } from 'react';
 import { useBloomAppearance } from '../appearance/context';
-import type { BloomSize, BloomTone } from '../appearance/types';
 import { resolveButtonPalette } from '../button/shared';
 import { useTheme } from '../theme/use-theme';
 import { FAB_METRICS } from './constants';
 import { FabLabel } from './FabLabel';
 import type { ButtonProps } from '../button/types';
-import { useBottomEdgeInset } from '../layout/bottom-edge';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useFabMinimized } from './use-fab-minimized';
 import type { FabProps } from './types';
 
-const LEGACY_SIZE = { small: 'xs', medium: 'md', large: 'lg' } as const;
-const LEGACY_TONE = { primary: 'accent', secondary: 'support', tertiary: 'action', surface: 'neutral' } as const;
-
-export function useFabProps({ label, children, icon, iconSize, size, collapsed = false, variant, tone, appearance = 'solid', placement = 'static', offset = 16, minimizeBehavior = 'none', labelStyle, textStyle, zIndex, accessibilityHint: _hint, style, ...props }: FabProps): ButtonProps {
+export function useFabProps({ label, icon, iconSize, size, collapsed = false, tone, appearance = 'solid', labelStyle, textStyle, style, ...props }: FabProps): ButtonProps {
   const theme = useTheme();
-  const normalizedSize: BloomSize | undefined = typeof size === 'number' ? 'md' : size && size in LEGACY_SIZE ? LEGACY_SIZE[size as keyof typeof LEGACY_SIZE] : size as BloomSize | undefined;
-  const resolved = useBloomAppearance({ size: normalizedSize, tone: tone ?? (variant ? LEGACY_TONE[variant] as BloomTone : undefined) }, { size: 'md', tone: 'action' });
-  const minimized = useFabMinimized(minimizeBehavior !== 'none');
-  const bottomInset = useBottomEdgeInset();
-  const hidden = minimized && minimizeBehavior === 'hide';
-  const labelCollapsed = collapsed || (minimized && minimizeBehavior === 'collapse');
+  const resolved = useBloomAppearance({ size, tone }, { size: 'md', tone: 'action' });
   const palette = resolveButtonPalette(appearance, theme, resolved.tone);
   const foreground = props.disabled ? palette.disabled.foreground : palette.rest.foreground;
-  const diameter = typeof size === 'number' && Number.isFinite(size) ? Math.max(1, size) : FAB_METRICS[resolved.size].diameter;
+  const diameter = FAB_METRICS[resolved.size].diameter;
   const glyphSize = typeof iconSize === 'number' && Number.isFinite(iconSize) && iconSize > 0 ? iconSize : FAB_METRICS[resolved.size].iconSize;
-  const sourceIcon = icon ?? children;
-  // Let Button paint legacy elements through the same state-aware icon path.
-  const resolvedIcon = useMemo(() => {
-    if (!isValidElement<{ width?: number; height?: number; fill?: string; color?: string }>(sourceIcon)) return sourceIcon;
-    const element = sourceIcon;
-    return function FabElementIcon(paint: { width?: number; height?: number; fill?: string }) {
-      return cloneElement(element, {
-        width: paint.width,
-        height: paint.height,
-        ...(element.props.fill == null && element.props.color == null ? { fill: paint.fill } : {}),
-      });
-    };
-  }, [sourceIcon]);
-  const position: ViewStyle & WebCssStyle = {};
-  if (placement !== 'static') {
-    const bottom = placement.startsWith('bottom');
-    const right = placement.endsWith('right');
-    if (Platform.OS === 'web') {
-      Object.assign(position, { position: 'sticky', alignSelf: right ? 'flex-end' : 'flex-start', ...(bottom ? { bottom: offset + bottomInset, marginTop: 'auto', marginBottom: offset + bottomInset } : { top: offset, marginTop: offset }), marginLeft: right ? undefined : offset, marginRight: right ? offset : undefined });
-    } else {
-      Object.assign(position, { position: 'absolute', [bottom ? 'bottom' : 'top']: offset + (bottom ? bottomInset : 0), [right ? 'right' : 'left']: offset });
-    }
-  }
-  return { ...props, ...resolved, appearance, icon: resolvedIcon, iconSize: glyphSize, trailing: label ? createElement(FabLabel, { label, collapsed: labelCollapsed, color: foreground, variant: props.textVariant ?? FAB_METRICS[resolved.size].labelVariant, style: [labelStyle, textStyle], testID: props.testID ? `${props.testID}-label` : undefined }) : undefined, accessibilityLabel: props.accessibilityLabel ?? label, textStyle: [labelStyle, textStyle], style: [{ height: diameter, minHeight: diameter, ...(label ? { width: 'auto', minWidth: diameter, paddingLeft: Math.max(0, (diameter - glyphSize) / 2), paddingRight: Math.max(0, (diameter - glyphSize) / 2), gap: 0 } : { width: diameter }), ...position, ...(zIndex == null ? {} : { zIndex }), ...(hidden ? { display: 'none' } : {}) }, style] };
+  return { ...props, ...resolved, appearance, icon, iconSize: glyphSize,
+    trailing: label ? createElement(FabLabel, { label, collapsed, color: foreground, variant: props.textVariant ?? FAB_METRICS[resolved.size].labelVariant, style: [labelStyle, textStyle], testID: props.testID ? `${props.testID}-label` : undefined }) : undefined,
+    accessibilityLabel: props.accessibilityLabel ?? label,
+    textStyle: [labelStyle, textStyle],
+    style: [{ height: diameter, minHeight: diameter, ...(label ? { width: 'auto', minWidth: diameter, paddingLeft: Math.max(0, (diameter - glyphSize) / 2), paddingRight: Math.max(0, (diameter - glyphSize) / 2), gap: 0 } : { width: diameter }) }, style],
+  };
 }

package/src/field/membership.ts

@@ -15,7 +15,7 @@
  * `||` belongs — and the failure is silent in both directions: a control that
  * re-enables itself inside a disabled field looks fine and a field-labelled
  * control that announces nothing looks fine too. So it is a function, for the
- * same reason `useInheritedControl` is one.
+ * same reason `useBloomAppearance` is one.
  *
  * `TextFieldInput` is the one family that resolves the same rule inline, because
  * it also reconciles the text-field shell's own context and its standalone

package/src/floating/FloatingPanel.tsx

@@ -1,3 +1,5 @@
+import { MOTION_RECIPES } from '../motion/recipes';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 /**
@@ -78,7 +80,7 @@ import {
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
 import { Portal } from '../portal/index.web';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
   DEFAULT_ALIGN_OFFSET,
@@ -209,13 +211,14 @@ export function FloatingPanel({
   panelRef,
 }: FloatingPanelProps) {
   const common = useCommonMessages();
-  const materialStyle = useSurfaceMaterial('.bloom-floating-surface', 'bloom-floating-surface-css');
+  const parentFill = useSurfaceFill();
   const chrome = SURFACE[surface];
   const isMenuSurface = surface !== 'popover';
   const palette = useMenuPalette();
-  const ownFill = StyleSheet.flatten(style)?.backgroundColor ?? (isMenuSurface ? palette.surface : undefined);
+  const ownFill = StyleSheet.flatten(style)?.backgroundColor ?? palette.surface;
   const parsedFill = typeof ownFill === 'string' ? parseRgba(ownFill) : null;
-  const publishedFill = typeof ownFill === 'string' && parsedFill?.a === 1 ? ownFill : undefined;
+  const publishedFill = typeof ownFill === 'string' ? resolveSurfaceMaterial({ fill: ownFill, parentFill: parentFill }).publishedFill : undefined;
+  const materialStyle = useSurfaceMaterial('.bloom-floating-surface', 'bloom-floating-surface-css', typeof ownFill === 'string' ? ownFill : 'transparent');
   const transparentFill = ownFill === 'transparent' || parsedFill?.a === 0;
   // The mounted panel as STATE, not a bare ref: placement has to measure it,
   // and `Portal` renders null on its first pass (it resolves its host in its own
@@ -413,13 +416,13 @@ export function FloatingPanel({
       if (!placement) return;
       progress.value = reducedMotion
         ? 1
-        : withTiming(1, { duration: chrome.duration, easing: chrome.easing });
+        : withTiming(1, { ...MOTION_RECIPES.present, duration: chrome.duration, easing: chrome.easing });
       return;
     }
     if (phase === 'closing') {
       progress.value = reducedMotion
         ? 0
-        : withTiming(0, { duration: chrome.duration, easing: chrome.easing });
+        : withTiming(0, { ...MOTION_RECIPES.dismiss, duration: chrome.duration, easing: chrome.easing });
       return;
     }
     progress.value = 0;
@@ -517,7 +520,6 @@ export function FloatingPanel({
           className={cx('bloom-floating-surface', chrome.className, className)}
           style={[
             styles.panel,
-            materialStyle,
             PANEL_CURVE,
             surfaceFillVars(publishedFill),
             // `bg-background-primary-default border-border-button-default
@@ -560,6 +562,7 @@ export function FloatingPanel({
             },
             motionStyle,
             style,
+            materialStyle,
           ]}>
           {/*
             The panel IS a surface, so it publishes the rung its children sit on.