@oxy.so/bloom 3.5.0 → 4.0.0

package/src/chat-list/ChatListItem.tsx

@@ -7,11 +7,11 @@ import { RiNotificationOffFill } from '../icons/remix/RiNotificationOffFill';
 import { RiPushpinFill } from '../icons/remix/RiPushpinFill';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { SwipeRow, useSwipeAvailable } from '../swipe-row';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
 import { ChatAvatar, ChatGlyphButton, RowLink, actionGlyphColor } from './parts';
-import { ChatSwipeRow } from './ChatSwipeRow';
 import {
   CHAT_ATTACHMENT_ICONS,
   CHAT_LIST_CSS,
@@ -47,9 +47,10 @@ import type { ChatAction, ChatListItemProps } from './types';
  * two are mutually exclusive by construction — if their message is the last one,
  * yours has no place in this row — and the badge wins.
  *
- * ACTIONS come from `swipeActions`. On touch a drag uncovers them; on web they
- * appear as icon buttons on hover and keyboard focus, over the right column,
- * because there is no drag gesture to discover there. The buttons are siblings
+ * ACTIONS come from `swipeActions`. On a touch pointer a drag uncovers them
+ * (`SwipeRow`, the library's one drag implementation); on a mouse they appear
+ * as icon buttons on hover and keyboard focus, over the right column, because
+ * there is no drag gesture to discover there. The buttons are siblings
  * of the row's link, never children of it: a button inside an anchor is invalid
  * HTML and every "Archive" click would open the conversation.
  *
@@ -85,7 +86,7 @@ function ChatListItemComponent({
   href,
   swipeActions,
   onAction,
-  swipeEnabled = !IS_WEB,
+  swipeEnabled,
   accessibilityLabel,
   labels,
   style,
@@ -97,6 +98,21 @@ function ChatListItemComponent({
   }, []);
   const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
   const [pressed, setPressed] = useState(false);
+  // The drag belongs to the POINTER, not to the platform: `swipeEnabled`
+  // overrides it, and the panes take this family's own resolved pairs so they
+  // match the rest of the row exactly.
+  const swipeAvailable = useSwipeAvailable();
+  const swipePaint = useMemo(
+    () => ({
+      neutral: paint.neutralAction,
+      onNeutral: paint.onNeutralAction,
+      accent: paint.accent,
+      onAccent: paint.onAccent,
+      negative: paint.negativeFill,
+      onNegative: paint.onAccent,
+    }),
+    [paint],
+  );
 
   const text = useMemo(() => ({ ...DEFAULT_ITEM_LABELS, ...labels }), [labels]);
   const geo = CHAT_ROW_GEOMETRY[density];
@@ -344,17 +360,23 @@ function ChatListItemComponent({
     </View>
   );
 
-  if (swipeActions && swipeEnabled && (swipeActions.left?.length || swipeActions.right?.length)) {
+  if (
+    swipeActions &&
+    (swipeEnabled ?? swipeAvailable) &&
+    (swipeActions.left?.length || swipeActions.right?.length)
+  ) {
     return (
-      <ChatSwipeRow
+      <SwipeRow
         actions={swipeActions}
         onAction={onAction}
         height={geo.height}
-        paint={paint}
+        radius={CHAT_ROW_RADIUS}
+        paint={swipePaint}
+        background={paint.background}
         testID={testID ? `${testID}-swipe` : undefined}
       >
         {row}
-      </ChatSwipeRow>
+      </SwipeRow>
     );
   }
   return row;

package/src/chat-list/parts.tsx

@@ -164,21 +164,6 @@ export function actionGlyphColor(action: ChatAction, paint: ChatListPaint): stri
   }
 }
 
-/** The pane fill an action's tone paints behind a swipe, and the text on it. */
-export function actionPanePaint(
-  action: ChatAction,
-  paint: ChatListPaint,
-): { background: string; foreground: string } {
-  switch (action.tone) {
-    case 'negative':
-      return { background: paint.negativeFill, foreground: paint.onAccent };
-    case 'accent':
-      return { background: paint.accent, foreground: paint.onAccent };
-    default:
-      return { background: paint.neutralAction, foreground: paint.onNeutralAction };
-  }
-}
-
 // ---------------------------------------------------------------------------
 //  The avatar slot
 // ---------------------------------------------------------------------------

package/src/chat-list/shared.ts

@@ -93,12 +93,8 @@ export const CHAT_ROW_GEOMETRY: Record<ChatListDensity, ChatRowGeometry> = {
 /** Corner radius of a row's hover/selected fill. */
 export const CHAT_ROW_RADIUS = 12;
 
-/** How far a row travels before the drag is committed rather than sprung back. */
-export const SWIPE_COMMIT_FRACTION = 0.4;
-/** The widest a swipe pane opens, per action. */
-export const SWIPE_ACTION_WIDTH = 76;
-/** Below this the drag reads as a tap. */
-export const SWIPE_TAP_SLOP = 10;
+// The swipe's thresholds and pane width live in `swipe-row/constants.ts` —
+// this family drags through `SwipeRow` and owns none of that geometry.
 
 // ---------------------------------------------------------------------------
 //  Attachment glyphs
@@ -166,7 +162,7 @@ export interface ChatListPaint {
  * colour. Text, accents and the destructive tone come from the ramps.
  */
 export function resolveChatListPaint(theme: Theme): ChatListPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const { background, text } = theme.colors;
   const step = (light: number, darkAlpha: number) =>
@@ -183,12 +179,12 @@ export function resolveChatListPaint(theme: Theme): ChatListPaint {
     background,
     hover: step(0.06, 0.09),
     selected: step(0.1, 0.14),
-    heading: dark ? n[400] : n[500],
-    divider: dark ? n[700] : n[200],
+    heading: theme.colors.textSecondary,
+    divider: theme.colors.border,
     negative: dark ? danger[400] : danger[600],
     negativeFill: dark ? danger[700] : danger[500],
-    neutralAction: dark ? n[700] : n[300],
-    onNeutralAction: dark ? n[100] : n[700],
+    neutralAction: theme.colors.backgroundTertiary,
+    onNeutralAction: theme.colors.text,
     ring: accent[500],
     placeholder: step(0.11, 0.16),
   };

package/src/chat-list/types.ts

@@ -128,6 +128,11 @@ export interface ChatPreview {
  */
 export type ChatActionTone = 'neutral' | 'accent' | 'negative';
 
+/**
+ * Structurally `SwipeRowAction` — this family drags through `SwipeRow`, and
+ * `ChatListItem` handing one array to the other is what keeps the two spellings
+ * from drifting. The names stay because they are this family's published API.
+ */
 export interface ChatAction {
   /** Stable identity, and what `onAction` reports. */
   key: string;
@@ -228,8 +233,9 @@ export interface ChatListItemProps {
   /** Called with the action's `key` when one is triggered, from either affordance. */
   onAction?: (key: string) => void;
   /**
-   * Turns the drag gesture off (the hover buttons stay). Default: on wherever
-   * the platform is not web.
+   * Turns the drag gesture on or off explicitly. It defaults to
+   * `useSwipeAvailable()` — on for every touch pointer, off for a mouse, which
+   * keeps the hover buttons instead.
    */
   swipeEnabled?: boolean;
   /**

package/src/chat-people/shared.ts

@@ -68,11 +68,11 @@ export function resolveChatPeoplePaint(theme: Theme): ChatPeoplePaint {
   return {
     surface: c.background,
     surfaceRaised: c.card,
-    rowHighlight: dark ? mixColor(c.background, n[700], 0.55) : n[100],
-    border: dark ? n[700] : n[200],
+    rowHighlight: c.backgroundSecondary,
+    border: c.border,
     text: c.text,
     textSecondary: c.textSecondary,
-    textTertiary: dark ? n[600] : n[400],
+    textTertiary: c.textTertiary,
     accent: accent[500],
     onAccent: c.primaryForeground,
     accentSubtle: dark ? mixColor(c.background, accent[500], 0.22) : mixColor(c.background, accent[500], 0.12),
@@ -82,7 +82,7 @@ export function resolveChatPeoplePaint(theme: Theme): ChatPeoplePaint {
     ownerSubtle: dark
       ? mixColor(c.background, amber[500], 0.22)
       : mixColor(c.background, amber[500], 0.16),
-    chip: dark ? n[800] : n[100],
+    chip: c.backgroundTertiary,
     onChip: c.text,
     railText: c.textSecondary,
     railActive: accent[500],

package/src/chat-screen/shared.ts

@@ -74,6 +74,8 @@ export interface ChatScreenPaint {
   textTertiary: string;
   accentColor: string;
   onAccent: string;
+  /** Exact opaque outgoing message fill. */
+  outgoingSurface: string;
   /** A 10%-ish accent wash — an action tile, a role badge. */
   accentSubtle: string;
   /**
@@ -109,34 +111,31 @@ export function resolveChatScreenPaint(theme: Theme): ChatScreenPaint {
     isDark: dark,
     accent,
     neutral: n,
-    surface: dark ? n[900] : c.card,
-    surfaceSubtle: dark ? n[800] : n[100],
+    surface: c.card,
+    surfaceSubtle: c.backgroundSecondary,
     page: c.background,
-    border: dark ? n[800] : n[200],
+    border: c.border,
     text: c.text,
-    textSecondary: dark ? n[400] : n[500],
-    textTertiary: dark ? n[600] : n[400],
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
     accentColor: dark ? accent[400] : accent[600],
     onAccent: c.primaryForeground,
-    accentSubtle: dark ? mixColor(n[900], accent[500], 0.24) : mixColor(c.card, accent[500], 0.14),
+    outgoingSurface: c.primary,
+    accentSubtle: c.primarySubtle,
     accentTrack: dark ? accent[800] : accent[200],
     destructive: dark ? red[400] : red[600],
-    destructiveSubtle: dark
-      ? mixColor(n[900], red[500], 0.2)
-      : mixColor(c.card, red[500], 0.1),
+    destructiveSubtle: c.errorSubtle,
     floatingSurface: menu.surface,
     floatingBorder: menu.border,
     floatingShadow: menu.shadow,
-    // The ink is a NEUTRAL step, never the accent: a wallpaper tinted with the
-    // brand colour competes with the outgoing bubble, which IS the brand colour.
-    patternTint: dark ? n[700] : n[300],
-    // Both stops move AWAY from the page, never toward the card: lighter than
-    // the page in dark, darker than it in light. A gradient that brightened a
-    // light page brought its lightest pixel onto the incoming bubble's own
-    // colour — measured as 16 of 32 themes separating WORSE than no wallpaper at
-    // all (`ChatBackgroundContrast.test.ts` pins the corrected range).
+    // Decorations stay below the bubble lightness range: darken the page in
+    // both modes. Brightening the near-black tonal page approaches its cards.
+    patternTint: dark ? '#000000' : c.backgroundTertiary,
+    // Darkening the page preserves bubble separation in both modes. The old
+    // light recipe brightened into cards (16/32 regressions); the later dark
+    // recipe did the same once the tonal page moved close to black.
     gradient: dark
-      ? [mixColor(c.background, accent[800], 0.5), c.background, mixColor(c.background, n[800], 0.5)]
+      ? [mixColor(c.background, '#000000', 0.5), c.background, mixColor(c.background, '#000000', 0.8)]
       : [mixColor(c.background, accent[300], 0.3), c.background, mixColor(c.background, n[300], 0.35)],
     // NOT white/black. Dimming a light wallpaper toward WHITE puts its lightest
     // possible pixel exactly on the card colour — a white incoming bubble over a
@@ -161,8 +160,9 @@ export function useChatScreenPaint(): ChatScreenPaint {
  * the date pill and the jump buttons are all OPAQUE, so the wallpaper never gets
  * between a fill and its own text — what it can do is stop a bubble being told
  * apart from the page behind it. So the number to measure is the SEPARATION
- * between a surface and the worst pixel the wallpaper can put behind it, and for
- * that you need the extremes, not an average.
+ * between a surface and sampled wallpaper endpoints. For a continuous photo,
+ * a bubble luminance between those endpoints can still match a pixel exactly;
+ * endpoint ratios are NOT a full-range worst-case guarantee.
  *
  * `image` is the interesting case: a consumer photo has no knowable extremes, so
  * the dimming overlay supplies them. White and black dimmed toward
@@ -240,7 +240,7 @@ function extremesOf(colors: string[]): { lightest: string; darkest: string } {
 
 /**
  * The two opaque bubble fills a wallpaper is measured AGAINST: an incoming
- * bubble (the chrome surface) and an outgoing one (the accent fill).
+ * bubble (colors.card) and an outgoing one (colors.primary).
  *
  * Named here rather than inside the gate so the table in `docs/chat-screen.mdx`
  * and the number the test asserts come from ONE definition — a gate that picks
@@ -248,13 +248,13 @@ function extremesOf(colors: string[]): { lightest: string; darkest: string } {
  *
  * The FLOATING surfaces (the date pill, the two jump buttons) are deliberately
  * NOT in this set, and that is not an exemption: their separation from a
- * wallpaper reaches 1.00 in the worst case — a dark patterned wallpaper is the
- * pill's own surface colour — which is exactly why every one of them carries a
- * 1px `floatingBorder` hairline. A bubble has no such rule to fall back on, so
- * it is the thing the extremes have to clear.
+ * wallpaper historically reached 1.00 on dark patterns, which is why each
+ * carries a 1px `floatingBorder` hairline. These samples measure bubble fills
+ * independently of borders; image endpoints cannot guarantee separation for
+ * every intermediate photo pixel (see the recorded limitation in the gate).
  */
 export function chatBackgroundReferenceSurfaces(paint: ChatScreenPaint): string[] {
-  return [paint.surface, paint.accent[500]];
+  return [paint.surface, paint.outgoingSurface];
 }
 
 /** A URL/URI string that needs no `ImageResolver`. */

package/src/checkbox/Checkbox.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
@@ -83,10 +86,10 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   onCheckedChange,
   label,
   description,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
   indeterminate = false,
-  color,
+  tone: toneProp,
   style,
   labelStyle,
   accessibilityLabel,
@@ -105,6 +108,9 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
     nativeID,
   });
   const isDisabled = field.disabled;
+  const { size: scopedSize, tone } = useBloomAppearance({ size: normalizeBloomSize(sizeProp), tone: toneProp }, { size: 'md', tone: 'accent' });
+  const size = scopedSize;
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, BLOOM_CHECKBOX_CSS);
   useInteractiveWebCss(CHECKBOX_GLYPH_STYLE_ID, CHECKBOX_GLYPH_CSS);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
@@ -112,7 +118,7 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   // only other state the design defines. No press scale.
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const sizeConfig = CHECKBOX_SIZE_CONFIG[size];
-  const paint = useMemo(() => resolveCheckboxPaint(theme, color), [theme, color]);
+  const paint = useMemo(() => resolveCheckboxPaint(theme, color, foreground), [theme, color, foreground]);
   const highlighted = !isDisabled && (hovered || pressed);
 
   const handlePress = useCallback(() => {

package/src/checkbox/CheckboxCard.tsx

@@ -1,3 +1,5 @@
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
@@ -63,15 +65,17 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
   description,
   disabled = false,
   indeterminate = false,
-  color,
+  tone: toneProp,
   style,
   accessibilityLabel,
   testID,
 }) => {
   const theme = useTheme();
+  const { tone } = useBloomAppearance({ tone: toneProp }, {size: 'md', tone: 'accent'});
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(CHECKBOX_GLYPH_STYLE_ID, CHECKBOX_GLYPH_CSS);
   useInteractiveWebCss(CARD_STYLE_ID, CARD_CSS);
-  const paint = useMemo(() => resolveCheckboxPaint(theme, color), [theme, color]);
+  const paint = useMemo(() => resolveCheckboxPaint(theme, color, foreground), [theme, color, foreground]);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const highlighted = !disabled && (hovered || pressed);
@@ -133,7 +137,7 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
       </View>
       <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', paddingTop: 4, paddingBottom: 4 }}>
         <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={indeterminate}
           // The checkbox gets the card's state, so a disabled card's box is

package/src/checkbox/shared.tsx

@@ -8,7 +8,6 @@ import {
   ACCENT_TABLE,
   BUTTON_SHADOW,
   colorRamp,
-  mixColor,
   resolveButtonRamps,
 } from '../button/shared';
 import type { TypeScaleVariant } from '../typography';
@@ -36,6 +35,10 @@ export const CHECKBOX_SIZE_CONFIG: Record<
   small: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
   medium: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },
   large: { box: 20, gap: 8, label: 'headline-medium', description: 'body-regular' },
+  xs: { box: 12, gap: 4, label: 'caption-1-medium', description: 'caption-1-regular' },
+  sm: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
+  md: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },
+  lg: { box: 20, gap: 8, label: 'headline-medium', description: 'body-regular' },
 };
 
 /** `rounded-sm` — Tailwind v4's 4px. */
@@ -100,26 +103,25 @@ export interface CheckboxPaint {
  * A caller `color` replaces the accent ramp; the mark on it falls back to white
  * because Bloom cannot know the contrast of an arbitrary colour.
  */
-export function resolveCheckboxPaint(theme: Theme, color?: string): CheckboxPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+export function resolveCheckboxPaint(theme: Theme, color?: string, foreground?: string): CheckboxPaint {
+  const { accent } = resolveButtonRamps(theme);
   const ramp = color ? colorRamp(color, ACCENT_TABLE) : accent;
   const dark = theme.isDark;
   return {
-    surface: dark ? n[800] : theme.colors.card,
-    border: dark ? n[700] : n[300],
-    borderHover: dark ? n[500] : n[400],
+    surface: theme.colors.card,
+    border: theme.colors.border,
+    borderHover: theme.colors.border,
     shadow: BUTTON_SHADOW[dark ? 'dark' : 'light'],
     gradient: [ramp[500], ramp[600]],
     gradientHover: [ramp[400], ramp[500]],
     markedShadow: `inset 0 2px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px ${ramp[500]}`,
-    mark: color == null ? theme.colors.primaryForeground : '#FFFFFF',
+    mark: foreground ?? (color == null ? theme.colors.primaryForeground : '#FFFFFF'),
     ring: ramp[500],
     text: theme.colors.text,
-    description: n[500],
-    cardBorder: dark ? n[700] : n[200],
-    cardBackground: dark ? n[800] : theme.colors.card,
-    // Dark `color-mix(in srgb, neutral-700 60%, transparent)` over the page.
-    cardBackgroundHover: dark ? mixColor(theme.colors.background, n[700], 0.6) : n[100],
+    description: theme.colors.textSecondary,
+    cardBorder: theme.colors.borderLight,
+    cardBackground: theme.colors.card,
+    cardBackgroundHover: theme.colors.backgroundSecondary,
   };
 }
 
@@ -261,7 +263,7 @@ export interface CheckboxGlyphProps {
  *              highlight + inset 1px accent-500 edge, 2px rounded stroke.
  *              Hover: accent-400 → accent-500.
  *   disabled   the BOX at 50% opacity.
- *   focus      2px accent ring outside a 2px white offset, on the box.
+ *   focus      2px accent ring outside a 2px scoped page offset, on the box.
  */
 export function CheckboxGlyph({
   size,

package/src/checkbox/types.ts

@@ -1,6 +1,8 @@
+import type { BloomSize } from '../appearance';
+import type { BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type CheckboxSize = 'small' | 'medium' | 'large';
+export type CheckboxSize = BloomSize | 'small' | 'medium' | 'large';
 
 export interface CheckboxProps {
   /** Whether the checkbox is checked. */
@@ -18,7 +20,7 @@ export interface CheckboxProps {
   /** Whether the checkbox is in an indeterminate state. */
   indeterminate?: boolean;
   /** Semantic color when checked. Uses theme primary by default. */
-  color?: string;
+  tone?: BloomTone;
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
@@ -44,7 +46,7 @@ export interface CheckboxCardProps {
   /** Whether the checkbox is in an indeterminate state. */
   indeterminate?: boolean;
   /** Accent for the checked box. Uses the theme primary by default. */
-  color?: string;
+  tone?: BloomTone;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   testID?: string;

package/src/chip/Chip.tsx

@@ -1,3 +1,5 @@
+import { useBloomAppearance } from '../appearance';
+import { normalizeTagTone } from './shared';
 import React, { forwardRef, memo, useMemo } from 'react';
 import {
   View,
@@ -102,16 +104,25 @@ const IS_WEB = Platform.OS === 'web';
 const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
   {
     children,
-    variant = 'subtle',
-    color = 'default',
+    variant: variantProp = 'subtle',
+    appearance,
+    tone: toneProp,
+    color,
     hue,
     surface,
-    size = 'medium',
-    startIcon,
-    endIcon,
+    size: sizeProp,
+    startIcon: startIconProp,
+    leading,
+    leadingIcon: LeadingIcon,
+    endIcon: endIconProp,
+    trailing,
+    trailingIcon: TrailingIcon,
     onPress,
     onClose,
-    selected = false,
+    closeLabel,
+    selected: selectedProp,
+    checked,
+    onCheckedChange,
     role = 'button',
     disabled = false,
     tabIndex,
@@ -124,6 +135,14 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
   ref,
 ) {
   const theme = useTheme();
+  const scoped = useBloomAppearance({ size: ['xs','sm','md','lg'].includes(sizeProp ?? '') ? sizeProp as import('../appearance').BloomSize : undefined, tone: toneProp ?? (color ? normalizeTagTone(color) : undefined) }, {size: 'md', tone: 'neutral'});
+  const size = sizeProp ?? scoped.size;
+  const tone = scoped.tone;
+  const variant = appearance ?? variantProp;
+  const selected = checked ?? selectedProp ?? false;
+  const startIcon = leading ?? (LeadingIcon ? <LeadingIcon /> : startIconProp);
+  const endIcon = trailing ?? (TrailingIcon ? <TrailingIcon /> : endIconProp);
+
   useInteractiveWebCss(STYLE_ID, BLOOM_CHIP_CSS);
   // No press scale, like `Button`: a press is the background change alone,
   // which is also the one press affordance that reads under a mouse.
@@ -133,8 +152,8 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
   // re-render every chip in a tag list on pointer move for nothing.
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const paint = useMemo(
-    () => resolveChipPaint(theme, { tone: color, variant, selected, hue, surface }),
-    [theme, color, variant, selected, hue, surface],
+    () => resolveChipPaint(theme, { tone, variant, selected, hue, surface }),
+    [theme, tone, variant, selected, hue, surface],
   );
   const ring = useMemo(() => resolveChipRing(theme), [theme]);
   const geometry = CHIP_GEOMETRY[size];
@@ -183,11 +202,16 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     [geometry],
   );
 
+  // A row of removable chips is a row of buttons all called "Remove" otherwise,
+  // and a screen reader reading them in sequence says the same word five times
+  // with no way to tell which pill goes. The chip names it from its own label
+  // when that label is words; `closeLabel` is for the rest.
+  const removeLabel = closeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
   const closeButton = onClose ? (
     <Pressable
       onPress={onClose}
       hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
-      accessibilityLabel="Remove"
+      accessibilityLabel={removeLabel}
       accessibilityRole="button"
       style={iconSlotStyle}
     >
@@ -210,7 +234,7 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     </>
   );
 
-  if (onPress) {
+  if (onPress || onCheckedChange) {
     // Both spellings of the state, because neither platform reads the other's
     // and there is no single prop that serves both: react-native-web ignores
     // `accessibilityState`, while React Native has no `aria-pressed` at all
@@ -262,7 +286,11 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
           pressed && !disabled && { backgroundColor: paint.pressedBackground },
           style,
         ]}
-        onPress={onPress}
+        onPress={(event) => {
+          if (disabled) return;
+          onCheckedChange?.(!selected);
+          onPress?.();
+        }}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         {...(paint.hoveredBorder ? { onHoverIn, onHoverOut } : null)}

package/src/chip/ChipRow.tsx

@@ -114,7 +114,13 @@ function ChipRowComponent({
       role={role}
       accessibilityLabel={accessibilityLabel}
       aria-disabled={disabled || undefined}
-      style={[{ position: 'relative' }, style]}
+      // `minWidth: 0` is not decoration: a flex item's automatic minimum size is
+      // its CONTENT's width, so a row of pills wider than the screen widens the
+      // COLUMN it sits in and the page scrolls sideways instead of the row.
+      // Measured at a 390 viewport: a parent 1552px wide. It belongs here
+      // rather than at each call site — every consumer of a sideways scroller
+      // inherits the same trap, and three of them had already worked around it.
+      style={[{ position: 'relative', minWidth: 0 }, style]}
       testID={testID}
     >
       <ScrollView
@@ -129,6 +135,7 @@ function ChipRowComponent({
         // is not clipped by the scroller and the row still lines up.
         style={{
           flexGrow: 0,
+          minWidth: 0,
           marginTop: -ringInset,
           marginBottom: -ringInset,
           marginLeft: -ringInset,

package/src/chip/hue-colors.ts

@@ -31,14 +31,14 @@ export function resolveChipHueColors(
   hue: ChipHue,
   surface: string = chipPageSurface(theme),
 ): { background: string; foreground: string } {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   switch (hue) {
     case 'neutral':
-      return { background: theme.isDark ? n[800] : n[200], foreground: n[500] };
+      return { background: theme.colors.backgroundTertiary, foreground: theme.colors.textSecondary };
     case 'gray':
-      return { background: theme.isDark ? n[900] : n[100], foreground: theme.colors.text };
+      return { background: theme.colors.backgroundSecondary, foreground: theme.colors.text };
     case 'soft':
-      return { background: theme.isDark ? n[900] : n[100], foreground: n[500] };
+      return { background: theme.colors.backgroundSecondary, foreground: theme.colors.textSecondary };
     case 'purple':
       return purpleChip(theme, surface);
     default: {
@@ -58,8 +58,7 @@ const HUE_TONE = {
   cyan: 'sky',
 } as const;
 
-/** `bg-background-full`: white (the card colour), dark neutral-925. */
+/** Actual page behind data-category chips. */
 export function chipPageSurface(theme: Theme): string {
-  const { neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark ? mixColor(n[900], n[950], 0.4) : theme.colors.card;
+  return theme.colors.background;
 }