@oxy.so/bloom 5.4.1 → 6.0.0

package/src/surface/web-material.ts

@@ -6,7 +6,7 @@ import { SURFACE_REFRACTION_ID } from './web-refraction';
  * Root must be positioned/isolated and transparent, with rounded clipping.
  * Both Surface and Button use these exact layers; state changes only their tint.
  */
-export function surfaceMaterialCss(selector: string, fill: string, transition = 'none', glass = false): string {
+export function surfaceMaterialCss(selector: string, fill: string, transition = 'none'): string {
   return `
 ${selector}::after {
   content: "";
@@ -16,20 +16,20 @@ ${selector}::after {
   corner-shape: inherit;
   pointer-events: none;
 }
-${glass ? `${selector}::before {
+${selector}::before {
   content: "";
   position: absolute;
   border-radius: inherit;
   corner-shape: inherit;
   pointer-events: none;
   z-index: -2;
-  /* Larger panes collect nearby backdrop pixels before the rounded crop. */
-  inset: -8px;
+  /* Match the pane bounds: expanded filtered layers escape rounded clipping
+     in Chromium. Backdrop blur still supplies lateral samples to displacement. */
+  inset: 0;
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   filter: url(#${SURFACE_REFRACTION_ID});
 }
-` : ""}
 ${selector}::after {
   z-index: -1;
   background-color: ${fill};

package/src/switch/Switch.tsx

@@ -1,4 +1,6 @@
-import { normalizeBloomSize } from '../appearance/legacy';
+import { useReducedMotion } from 'react-native-reanimated';
+import { MOTION_RECIPES } from '../motion/recipes';
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useRef } from 'react';
@@ -17,11 +19,12 @@ const PADDING = 2;
 const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
 
 const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
-  ({ checked: checkedProp, value, onCheckedChange: onCheckedChangeProp, onValueChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID }, ref) => {
-    const checked = checkedProp ?? value ?? false;
-    const onCheckedChange = onCheckedChangeProp ?? onValueChange;
+  (props, ref) => {
+    const { checked: checkedProp, defaultChecked = false, onCheckedChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID } = props;
+    const [checked, setChecked] = useControllableState({ value: checkedProp ?? false, controlled: Object.prototype.hasOwnProperty.call(props, 'checked'), defaultValue: defaultChecked, onChange: onCheckedChange });
     const theme = useTheme();
-    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const reducedMotion = useReducedMotion();
+    const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
     const paint = resolveBloomColors(theme.colors, tone, 'solid');
     const field = useFieldMembership({ accessibilityLabel, disabled, nativeID });
     const isDisabled = field.disabled;
@@ -34,7 +37,10 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
     const prevValueRef = useRef(checked);
     if (prevValueRef.current !== checked) {
       prevValueRef.current = checked;
-      Animated.spring(anim, {
+      if (reducedMotion) {
+        anim.stopAnimation();
+        anim.setValue(checked ? 1 : 0);
+      } else Animated.spring(anim, {
         toValue: checked ? 1 : 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
@@ -43,25 +49,25 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const handlePress = useCallback(() => {
       if (isDisabled) return;
-      onCheckedChange?.(!checked);
-    }, [isDisabled, checked, onCheckedChange]);
+      setChecked(!checked);
+    }, [isDisabled, checked, setChecked]);
 
     const onPressIn = useCallback(() => {
       if (isDisabled) return;
-      Animated.spring(pressAnim, {
+      Animated.timing(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
-        ...animation.spring.snappy,
+        duration: reducedMotion ? 0 : MOTION_RECIPES.press.duration,
       }).start();
-    }, [isDisabled, pressAnim]);
+    }, [isDisabled, pressAnim, reducedMotion]);
 
     const onPressOut = useCallback(() => {
-      Animated.spring(pressAnim, {
+      Animated.timing(pressAnim, {
         toValue: 0,
         useNativeDriver: false,
-        ...animation.spring.gentle,
+        duration: reducedMotion ? 0 : MOTION_RECIPES.press.duration,
       }).start();
-    }, [pressAnim]);
+    }, [pressAnim, reducedMotion]);
 
     const track = TRACK[size];
     const thumb = THUMB[size];

package/src/switch/types.ts

@@ -4,16 +4,16 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export interface SwitchProps {
   /** Current on/off state */
   checked?: boolean;
-  value?: boolean;
+  /** Initial state for an uncontrolled switch. */
+  defaultChecked?: boolean;
   /** Called when the user toggles the switch */
   onCheckedChange?: (checked: boolean) => void;
-  onValueChange?: (value: boolean) => void;
   /** Whether the switch is disabled */
   disabled?: boolean;
   /** Container style */
   style?: StyleProp<ViewStyle>;
   /** Size variant */
-  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  size?: BloomSize;
   tone?: BloomTone;
   /**
    * The switch's accessible NAME, and the only way to give it one.

package/src/tab-bar/TabBarBase.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 /**
@@ -44,28 +45,24 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
-  withTiming,
   type SharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { moveSelection } from '../motion/selection-motion';
 import { useHaptics } from '../hooks/use-haptics';
 import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { windowEdgeGap } from '../layout/edge';
 import type { ProgressiveBlurProps } from '../progressive-blur/types';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { SolidTabBarSurface } from './surface-solid';
 import { setMinimized, useMinimizeState } from './context';
 import {
   BAR_MARGIN,
   BLUR_BLEED,
   EXPANDED_HEIGHT,
   HIGHLIGHT_EXPANDED,
-  HIGHLIGHT_FADE,
   HIGHLIGHT_MINIMIZED,
   MAX_EXPANDED_ITEM_WIDTH,
   ICON_SIZE,
@@ -76,7 +73,6 @@ import {
   MINIMIZED_HEIGHT,
   MINIMIZED_INSET,
   ROW_PAD_H,
-  SLIDE_SPRING,
   useTabBarTheme,
   type TabBarGlyphProps,
   type TabBarSurfaceComponent,
@@ -167,7 +163,6 @@ function TabBarBody({
   maxWidth,
   embedded = false,
   scrollable = false,
-  material = 'translucent',
   minimizeProgress,
   onLayout,
   style,
@@ -214,10 +209,9 @@ function TabBarBody({
   // mirrors to; react-native-web reads that from a `dir` prop, not `<html>`.
   const dirProps = useDirectionProps();
   const layer = useSurfaceLayer();
-  const solidFill = resolveSurfaceFill(themeOverrides?.solidFallback ?? layer.fill, false, layer.parentFill);
-  const theme = useTabBarTheme({ ...themeOverrides, solidFallback: solidFill });
-  const ResolvedSurface = material === 'solid' ? SolidTabBarSurface : Surface;
-  const publishedFill = resolveSurfaceFill(ResolvedSurface.resolveFill?.(theme) ?? theme.glassTint, false, layer.parentFill);
+  const theme = useTabBarTheme(themeOverrides);
+  const ResolvedSurface = Surface;
+  const publishedFill = resolveSurfaceMaterial({ fill: ResolvedSurface.resolveFill?.(theme) ?? theme.glassTint, parentFill: layer.parentFill }).publishedFill;
   const impact = useHaptics();
 
   // The pill's OUTER width (the box the animated minimize inset is applied
@@ -300,7 +294,7 @@ function TabBarBody({
       // the bar on its way out, dragging the active tint over every tab it
       // passed. Visibility is the thing that changed, so visibility is the only
       // thing that animates.
-      highlightOpacity.value = withTiming(0, HIGHLIGHT_FADE);
+      moveSelection(slideIndex, highlightOpacity, null);
       return;
     }
     // Coming back from fully hidden the capsule APPEARS at the new tab instead
@@ -314,11 +308,7 @@ function TabBarBody({
     // position: the driver is already writing `slideIndex` every frame, and a
     // spring started here would drag the capsule across the bar between two of
     // its writes.
-    if (!driven) {
-      slideIndex.value =
-        highlightOpacity.value === 0 ? activeIndex : withSpring(activeIndex, SLIDE_SPRING);
-    }
-    highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+    moveSelection(slideIndex, highlightOpacity, activeIndex, driven);
   }, [activeIndex, hasSelection, driven, slideIndex, highlightOpacity, isDragging]);
 
   // Scrubbing: the highlight tracks the finger 1:1 while dragging (no spring —
@@ -369,7 +359,7 @@ function TabBarBody({
         if (highlightOpacity.value === 0) {
           slideIndex.value = indexAtX(event.x, progress.value);
         }
-        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+        moveSelection(slideIndex, highlightOpacity, slideIndex.value, true);
         lastTicked.value = Math.round(slideIndex.value);
         // Scrubbing is a deliberate bar interaction — surface the labels.
         setMinimized(minimized, 0);
@@ -391,7 +381,7 @@ function TabBarBody({
           return;
         }
         const rounded = Math.round(slideIndex.value);
-        slideIndex.value = withSpring(rounded, SLIDE_SPRING);
+        moveSelection(slideIndex, highlightOpacity, rounded);
         runOnJS(selectIndex)(rounded);
         isDragging.value = false;
       });
@@ -413,11 +403,7 @@ function TabBarBody({
         // the others and the driver carries the highlight to the tapped tab.
         // The scrub is the one gesture that does not: a finger dragging the
         // pill is manipulating the bar itself, not asking for a page.
-        if (!driven) {
-          slideIndex.value =
-            highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
-        }
-        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+        moveSelection(slideIndex, highlightOpacity, index, driven);
         setMinimized(minimized, 0);
         runOnJS(selectIndex)(index);
       });
@@ -656,7 +642,7 @@ function TabBarButtonBody({
     // already tracking this same focus change; springing from here as well would
     // be a second writer on one shared value.
     if (bar.driven) return;
-    bar.slideIndex.value = withSpring(index, SLIDE_SPRING);
+    moveSelection(bar.slideIndex, bar.highlightOpacity, index);
   }, [isFocused, index, bar]);
 
   // Tint follows the sliding highlight, not navigation focus: whatever the pill
@@ -735,11 +721,7 @@ function TabBarButtonBody({
           // rule the tap gesture and the controlled path follow. Skipped on the
           // driven path, where the position belongs to the driver and this
           // press will reach it as an ordinary selection.
-          if (!bar.driven) {
-            bar.slideIndex.value =
-              bar.highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
-          }
-          bar.highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+          moveSelection(bar.slideIndex, bar.highlightOpacity, index, bar.driven);
         }
         setMinimized(minimized, 0);
         // A tap the bar's gesture already reported is not reported again

package/src/tab-bar/context.tsx

@@ -1,3 +1,4 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/minimize-context.tsx
  * (MIT © 2026 David Mokos).
@@ -21,7 +22,7 @@ import {
  * from zero and feel mechanical. Critically damped (ratio 1): no overshoot and
  * no long settling tail, which matters because the bar animates layout.
  */
-export const MINIMIZE_SPRING = { duration: 380, dampingRatio: 1 };
+export const MINIMIZE_SPRING = MOTION_RECIPES.expand;
 
 /** Scroll offset below which the bar is always expanded (px). */
 const TOP_ZONE = 24;

package/src/tab-bar/expo-router/fading-tab-screen.tsx

@@ -1,3 +1,4 @@
+import { MOTION_RECIPES } from '../../motion/recipes';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/fading-tab-slot.tsx
  * (MIT © 2026 David Mokos).
@@ -9,6 +10,7 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
   useSharedValue,
+  useReducedMotion,
   withTiming,
 } from 'react-native-reanimated';
 import { Screen } from 'react-native-screens';
@@ -16,12 +18,13 @@ import type { TabsDescriptor, TabsSlotRenderOptions } from 'expo-router/ui';
 
 /** Strong ease-out — entering content should feel instant, then settle. */
 const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
-const ENTER_DURATION = 220;
+const ENTER_DURATION = MOTION_RECIPES.present.duration;
 /** Never enter from nothing: a whisper of depth, no zoom. */
 const ENTER_SCALE = 0.985;
 
 function FadeIn({ focused, children }: PropsWithChildren<{ focused: boolean }>) {
   const progress = useSharedValue(1);
+  const reducedMotion = useReducedMotion();
   const isFirstRender = useRef(true);
 
   useEffect(() => {
@@ -30,14 +33,16 @@ function FadeIn({ focused, children }: PropsWithChildren<{ focused: boolean }>)
       isFirstRender.current = false;
       return;
     }
-    if (focused) {
+    if (reducedMotion) {
+      progress.value = focused ? 1 : 0;
+    } else if (focused) {
       progress.value = 0;
-      progress.value = withTiming(1, { duration: ENTER_DURATION, easing: EASE_OUT });
+      progress.value = withTiming(1, { ...MOTION_RECIPES.present, duration: ENTER_DURATION, easing: EASE_OUT });
     } else {
       // Outgoing screen hides instantly (display: none) — only entries animate.
       progress.value = 0;
     }
-  }, [focused, progress]);
+  }, [focused, progress, reducedMotion]);
 
   // `progress` must stay in the deps array — see the CRITICAL note in
   // `TabBarBase`: without the worklets babel plugin (web) an omitted array

package/src/tab-bar/shared.ts

@@ -12,7 +12,6 @@ import { useMemo, type ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 
-import { withAlpha } from '../theme/color-utils';
 import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import type { TabBarItem, TabBarTheme } from './types';
@@ -54,25 +53,6 @@ export const BLUR_BLEED = 44;
 export const LABEL_FONT_SIZE = 9.5;
 
 
-/**
- * Slide spring: interruptible by design — rapid tab-hopping retargets with
- * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
- * here because it's transform-only (no layout involved).
- */
-export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
-
-/**
- * Fade for the highlight coming and going when the selection does — an
- * `activeIndex` that names no tab (see `TabBarProps.activeIndex`).
- *
- * A timing, not a spring, and deliberately shorter than {@link SLIDE_SPRING}:
- * appearing and disappearing is a change of STATE, not a movement, so it must
- * not read as a second animation racing the slide. The capsule fades where it
- * stands — moving it out of view instead would drag it the length of the bar on
- * its way out and sweep the active tint across every tab it passed.
- */
-export const HIGHLIGHT_FADE = { duration: 160 };
-
 /**
  * How long a press must be held before `onIndexLongPress` fires.
  *
@@ -97,10 +77,7 @@ export const LONG_PRESS_MIN_DURATION = 500;
  *
  *   - the two tints are the standard foreground pair;
  *   - the highlight is `contrast50`, the token meant for a subtle raised fill;
- *   - the glass tint is a 55%-alpha page background, so the liquid-glass
- *     material behind it still refracts content;
- *   - the solid fallback is a 94%-alpha `backgroundSecondary` — near-opaque, so
- *     the bar reads as a distinct surface where there is no glass to lens.
+ *   - the card token is painted at 90% opacity; explicit tint alpha is preserved;
  *
  * Overrides are coalesced key by key (not spread) so an explicit `undefined` in
  * a partial can never punch a hole in the resolved theme.
@@ -113,8 +90,7 @@ export function resolveTabBarTheme(
     activeTint: overrides?.activeTint ?? colors.text,
     inactiveTint: overrides?.inactiveTint ?? colors.textSecondary,
     highlight: overrides?.highlight ?? colors.contrast50,
-    glassTint: overrides?.glassTint ?? withAlpha(colors.background, 0.55),
-    solidFallback: overrides?.solidFallback ?? withAlpha(colors.backgroundSecondary, 0.94),
+    glassTint: overrides?.glassTint ?? colors.card,
   };
 }
 
@@ -129,7 +105,7 @@ export function resolveTabBarTheme(
  */
 export function useTabBarTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
   const { colors } = useTheme();
-  const { activeTint, inactiveTint, highlight, glassTint, solidFallback } = overrides ?? {};
+  const { activeTint, inactiveTint, highlight, glassTint } = overrides ?? {};
 
   return useMemo(
     () =>
@@ -138,9 +114,8 @@ export function useTabBarTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
         inactiveTint,
         highlight,
         glassTint,
-        solidFallback,
       }),
-    [colors, activeTint, inactiveTint, highlight, glassTint, solidFallback],
+    [colors, activeTint, inactiveTint, highlight, glassTint],
   );
 }
 
@@ -161,7 +136,7 @@ export type TabBarSurfaceComponent = ComponentType<TabBarSurfaceProps> & {
 };
 
 export interface TabBarSurfaceProps {
-  /** Resolved theme — the surface picks `glassTint` or `solidFallback`. */
+  /** Resolved theme — the surface picks `glassTint`. */
   theme: TabBarTheme;
   /**
    * Animated capsule shape (a `borderRadius` tracking the animated height).

package/src/tab-bar/surface-paint.tsx

@@ -0,0 +1,16 @@
+/** Adapted from expo-glass-tabs v0.1.1 (MIT © 2026 David Mokos). */
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SurfacePaint } from '../surface/SurfacePaint';
+import type { TabBarSurfaceProps } from './shared';
+
+/** Universal body and edge material: shared web optics and native tint, sheen and rim. */
+export function SharedTabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  return (
+    <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, style]}>
+      <SurfacePaint fill={theme.glassTint} radius={999} />
+    </Animated.View>
+  );
+}
+SharedTabBarSurface.displayName = 'SharedTabBarSurface';
+SharedTabBarSurface.resolveFill = (theme: TabBarSurfaceProps['theme']) => theme.glassTint;

package/src/tab-bar/surface.native.tsx

@@ -1,9 +1,10 @@
+import { resolveSurfaceTint } from '../surface/shared';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
  * (MIT © 2026 David Mokos).
  *
  * NATIVE variant of the tab bar's capsule surface — real liquid glass, degrading
- * to the solid surface whenever the glass is not actually usable.
+ * to the shared surface whenever the glass is not actually usable.
  *
  * `expo-glass-effect` is imported STATICALLY and this file is the only place it
  * appears: Metro selects `.native` on iOS/Android, so the import never reaches
@@ -15,7 +16,7 @@
  *
  * `isLiquidGlassAvailable()` is false on Android and pre-iOS-26, where the
  * package's `GlassView` has no material to render; those platforms get the same
- * opaque fallback the neutral variant paints. "Installed" is not "usable"
+ * tinted fallback the neutral variant paints. "Installed" is not "usable"
  * though, and BOTH remaining hazards sit at MODULE scope, which is why neither
  * can be handled by a branch inside the component:
  *
@@ -42,7 +43,7 @@
  * anyway. A missing probe therefore means "not applicable", never "unavailable";
  * reading it the other way would delete the glass look from every working device.
  *
- * Everything that fails routes to the SAME solid surface Android already paints —
+ * Everything that fails routes to the SAME shared surface Android already paints —
  * the intended fallback path, not a new one.
  */
 import { GlassView, isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';
@@ -50,7 +51,7 @@ import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { TabBarSurfaceProps } from './shared';
-import { SolidTabBarSurface } from './surface-solid';
+import { SharedTabBarSurface } from './surface-paint';
 
 /**
  * The animated glass view, or `null` when the package did not deliver the two
@@ -86,7 +87,7 @@ function glassIsUsable(): boolean {
     // eslint-disable-next-line no-console
     console.warn(
       '[Bloom] TabBar: expo-glass-effect could not report liquid-glass availability, ' +
-        'so the bar is painting its solid surface. Install expo-glass-effect and ' +
+        'so the bar is painting its shared surface. Install expo-glass-effect and ' +
         'rebuild the native app to get the glass capsule.',
       error,
     );
@@ -103,14 +104,14 @@ export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
         style={[
           StyleSheet.absoluteFill,
           styles.surface,
-          { backgroundColor: theme.glassTint },
+          { backgroundColor: resolveSurfaceTint(theme.glassTint) },
           style,
         ]}
       />
     );
   }
 
-  return <SolidTabBarSurface theme={theme} style={style} />;
+  return <SharedTabBarSurface theme={theme} style={style} />;
 }
 
 TabBarSurface.displayName = 'TabBarSurface';
@@ -122,4 +123,4 @@ const styles = StyleSheet.create({
 });
 
 TabBarSurface.resolveFill = (theme: TabBarSurfaceProps['theme']) =>
-  AnimatedGlassView !== null && glassIsUsable() ? theme.glassTint : theme.solidFallback;
+  AnimatedGlassView !== null && glassIsUsable() ? theme.glassTint : theme.glassTint;

package/src/tab-bar/surface.tsx

@@ -1,28 +1,2 @@
-/**
- * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos).
- *
- * NEUTRAL default variant of the tab bar's capsule surface: the non-glass one.
- *
- * This is the file resolved by everything that does NOT do React Native's
- * platform-extension resolution — a consumer's `tsc` (which follows Bloom's
- * `"react-native"` source export condition) and any non-Metro bundler reading
- * the published `lib/`. It therefore imports NOTHING platform-specific:
- * `expo-glass-effect` is native-only, and a static import of it from a file a
- * web bundler or a consumer's type-checker resolves would break module
- * resolution outright. Same three-way split, for the same reason, as
- * `theme/native-root-vars{,.native,.web}.ts`.
- *
- * The surface itself lives in `surface-solid.tsx`, because `surface.native.tsx`
- * renders it as its own fallback and cannot import this file to get it — Metro
- * resolves `./surface` back to `surface.native.tsx`, i.e. to itself. This module's
- * job is to give that one implementation the name every entry module imports.
- *
- * The variants — all three implement `TabBarSurfaceProps` exactly, so the entry
- * modules can swap them freely:
- *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass, with
- *     the solid surface as its fallback;
- *   - `surface.web.tsx`    — web, a CSS `backdrop-filter`;
- *   - this file            — everywhere else, the opaque fallback alone.
- */
-export { SolidTabBarSurface as TabBarSurface } from './surface-solid';
+/** Universal capsule material; native OS glass is isolated in surface.native.tsx. */
+export { SharedTabBarSurface as TabBarSurface } from './surface-paint';

package/src/tab-bar/surface.web.tsx

@@ -1 +1,2 @@
-export { TranslucentTabBarSurface as TabBarSurface } from './surface-translucent';
+/** Universal capsule material; native OS glass is isolated in surface.native.tsx. */
+export { SharedTabBarSurface as TabBarSurface } from './surface-paint';

package/src/tab-bar/types.ts

@@ -75,8 +75,6 @@ export type TabBarTheme = {
   highlight: string;
   /** Tint layered over the liquid glass (iOS 26) surface. */
   glassTint: string;
-  /** Near-opaque background used when liquid glass is unavailable. */
-  solidFallback: string;
 };
 
 export type TabBarProps = ViewProps & {
@@ -84,8 +82,6 @@ export type TabBarProps = ViewProps & {
   embedded?: boolean;
   /** Prefer horizontal scrolling over scrub gestures when targets overflow. */
   scrollable?: boolean;
-  /** Translucent platform material by default; solid uses the shared opaque Surface. */
-  material?: 'solid' | 'translucent';
   /** One motion signal shared with screen chrome. */
   minimizeProgress?: SharedValue<number>;
   /**

package/src/tag-field/TagField.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 import {
   Platform,
@@ -11,7 +10,7 @@ import {
 } from 'react-native';
 
 import { Chip } from '../chip';
-import { useInheritedControl } from '../control-surface';
+import { useBloomAppearance } from '../appearance';
 import { useFieldMembership } from '../field/membership';
 import { DEFAULT_SIDE_OFFSET } from '../floating/constants';
 import { useMenuPalette } from '../floating/menu-palette';
@@ -147,10 +146,10 @@ export function TagField({
   style,
   testID,
 }: TagFieldProps) {
-  // The size vocabulary IS the density pair, so a `ControlSurface density="small"`
+  // The size vocabulary IS the density pair, so a `BloomScope size="sm"`
   // around a filter row reaches this field exactly as it reaches the text fields
   // beside it — `docs/composition.mdx` §Control presentation.
-  const size = useInheritedControl('density', normalizeBloomSize(sizeProp), 'md');
+  const { size } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
   const palette = useTextFieldPalette();
   const menu = useMenuPalette();
   const { messages } = useMessages(TAG_FIELD_MESSAGES);

package/src/tag-field/constants.ts

@@ -36,8 +36,6 @@ export const TAG_FIELD_INPUT_MIN_WIDTH = 120;
  * `mail-compose`'s recipient chips do inside their own row.
  */
 export const TAG_CHIP_RUNG: Readonly<Record<TagFieldSize, ChipSize>> = {
-  medium: 'large',
-  small: 'medium',
   xs: 'small',
   sm: 'medium',
   md: 'large',

package/src/tag-field/types.ts

@@ -66,7 +66,7 @@ export interface TagFieldProps {
   tone?: AccentTone;
   /**
    * Default `medium` (36 tall); `small` is 32. Omitted, it is INHERITED from
-   * the nearest `ControlSurface` — the same vocabulary `TextField` and
+   * the nearest `BloomScope` — the same vocabulary `TextField` and
    * `Textarea` take — so a filter row asks for `small` once instead of writing
    * it on five controls.
    */

package/src/tenancy/DocumentList.tsx

@@ -121,12 +121,12 @@ function DocumentListComponent({
                     {document.onSign ? (
                       <View style={{ marginRight: 6 }}>
                         <Button
-                          variant="primary"
-                          size="small"
+
+                          size="sm"
                           leadingIcon={wide ? RiQuillPenLine : undefined}
                           accessibilityLabel={signName(document.name)}
                           onPress={document.onSign}
-                          testID={id(`sign-${index}`)}
+                          testID={id(`sign-${index}`)} tone="accent" appearance="solid"
                         >
                           {signLabel}
                         </Button>
@@ -134,24 +134,24 @@ function DocumentListComponent({
                     ) : null}
                     {document.onView ? (
                       <Button
-                        variant="secondary"
-                        size="small"
+
+                        size="sm"
                         iconOnly
                         leadingIcon={RiEyeLine}
                         accessibilityLabel={viewLabel(document)}
                         onPress={document.onView}
-                        testID={id(`view-${index}`)}
+                        testID={id(`view-${index}`)} tone="neutral" appearance="outline"
                       />
                     ) : null}
                     {document.onDownload ? (
                       <Button
-                        variant="secondary"
-                        size="small"
+
+                        size="sm"
                         iconOnly
                         leadingIcon={RiDownload2Line}
                         accessibilityLabel={downloadLabel(document)}
                         onPress={document.onDownload}
-                        testID={id(`download-${index}`)}
+                        testID={id(`download-${index}`)} tone="neutral" appearance="outline"
                       />
                     ) : null}
                   </View>