@oxyhq/bloom 0.88.0 → 1.0.0

package/src/checkbox/Checkbox.tsx

@@ -1,17 +1,100 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
+import { View, Text, Platform, Pressable, Animated, type ViewStyle } from 'react-native';
 
+import { Check_Stroke2_Corner0_Rounded as CheckIcon } from '../icons/Check';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { animation, borderRadius, space } from '../styles/tokens';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
+import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { usePressAnimation } from '../hooks/use-press-animation';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { pressedSurface } from '../theme/press-colors';
 import type { CheckboxProps } from './types';
 
+/**
+ * `medium` IS react-native-reusables' checkbox: `size-4` (16px) holding a 12px
+ * check, beside a `text-sm font-medium` label and a `text-muted-foreground
+ * text-sm` description. It used to be a 22px box with a 15px label — half again
+ * as large as shadcn's in a vocabulary where the control is deliberately small
+ * next to its text. `small` and `large` step around it; upstream has only the
+ * one size.
+ */
 const SIZE_CONFIG = {
-  small: { box: 18, checkmark: 10, fontSize: 14, lineHeight: 20, descFontSize: 12 },
-  medium: { box: 22, checkmark: 12, fontSize: 15, lineHeight: 22, descFontSize: 13 },
-  large: { box: 26, checkmark: 14, fontSize: 16, lineHeight: 24, descFontSize: 14 },
+  small: { box: 14, checkmark: 10, fontSize: 12, lineHeight: 16, descFontSize: 12 },
+  medium: { box: 16, checkmark: 12, fontSize: 14, lineHeight: 20, descFontSize: 14 },
+  large: { box: 20, checkmark: 14, fontSize: 16, lineHeight: 24, descFontSize: 14 },
 } as const;
 
+/** `rounded-[4px]` — an explicit pixel radius, not a rung of shadcn's ramp. */
+const BOX_RADIUS = 4;
+
+/** `border` — one pixel, where Bloom's box drew two. */
+const BOX_BORDER_WIDTH = 1;
+
+/** `gap-3` between the box and its label, and `gap-2` under the label. */
+const LABEL_GAP = space.md;
+const DESCRIPTION_GAP = space.sm;
+
+/**
+ * The smallest comfortable touch target, in dp. A bare checkbox — no label, no
+ * description — is a 22px box, so without slack its target is 22dp: half of
+ * what a finger needs. `hitSlop` grows the target without growing the drawing,
+ * and is computed per size so all three reach the same floor. RNR reaches for
+ * the same fix with a flat `hitSlop={24}`; deriving it from the box means the
+ * large size does not overshoot into its neighbour.
+ */
+const MIN_TOUCH_TARGET = 44;
+
+/**
+ * How thick the indeterminate bar is, as a fraction of the checkmark box. Its
+ * proportion, not a fixed pixel value, so it tracks the three sizes.
+ */
+const INDETERMINATE_BAR_THICKNESS = 0.18;
+
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  Same defect, same fix, same shared recipe as `Chip`: react-native-web makes
+//  the control focusable and resets the outline, and no inline style can carry a
+//  `:focus-visible` rule — so a keyboard user could tab onto a checkbox with
+//  nothing to show for it. The hook is a `data-*` attribute because a class
+//  never reaches the DOM here (react-native-css consumes `className` into
+//  `style`), and `adoptStyleSheet` no-ops without a `document`, so the file
+//  stays universal.
+//
+//  The ring goes on the PRESSABLE, which is the box AND its label — that is the
+//  element the browser focuses, and ringing anything else would point at
+//  something that does not have focus.
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'bloom-checkbox-web-css';
+
+const BLOOM_CHECKBOX_CSS = interactiveWebCss({
+  selector: '[data-bloom-checkbox]',
+  varPrefix: 'bloom-checkbox',
+  // Puts the LAYOUT half of the shared reset back. That reset is written for a
+  // raw `<button>`, and an adopted stylesheet applies after the document's own,
+  // so left alone its `display: inline-flex` / `align-items: center` would win
+  // over react-native-web's `View` classes and re-align the row.
+  base: `
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    border-radius: 6px;
+  `,
+  transition: 'opacity 120ms ease',
+  // The box already dips under the pointer through `usePressAnimation`; a second
+  // hover treatment on the row would be a state the native fork does not have.
+  hover: { declarations: 'opacity: 1;' },
+  outlineOffset: 3,
+});
+
+const IS_WEB = Platform.OS === 'web';
+
 const CheckboxComponent: React.FC<CheckboxProps> = ({
   checked,
   onCheckedChange,
@@ -27,8 +110,22 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  useInteractiveWebCss(STYLE_ID, BLOOM_CHECKBOX_CSS);
   const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const pressAnim = useRef(new Animated.Value(1)).current;
+  // The press dip goes through the shared hook rather than a fourth copy of the
+  // same two springs: it is the one place the "reduce motion" and pointer-type
+  // suppressions are applied, and an inlined copy honoured neither.
+  const {
+    scaleAnim: pressAnim,
+    onPressIn: onScaleIn,
+    onPressOut: onScaleOut,
+  } = usePressAnimation(disabled ? undefined : animation.pressScale);
+  // Driven separately from the scale — see `Chip` for why. The BOX answers the
+  // press, not the row: a wash across a checkbox and its label would read as a
+  // list-row press rather than as a control.
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } = useInteractionState();
+  const onPressIn = () => { onScaleIn(); onPressedIn(); };
+  const onPressOut = () => { onScaleOut(); onPressedOut(); };
   const sizeConfig = SIZE_CONFIG[size];
   const checkColor = color ?? theme.colors.primary;
   // The checkmark sits on top of `checkColor`. When the box uses the theme
@@ -50,55 +147,88 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
     }
   }, [checked, disabled, onCheckedChange]);
 
-  const onPressIn = useCallback(() => {
-    Animated.spring(pressAnim, {
-      toValue: 0.9,
-      useNativeDriver: SUPPORTS_NATIVE_DRIVER,
-      ...animation.spring.snappy,
-    }).start();
-  }, [pressAnim]);
-
-  const onPressOut = useCallback(() => {
-    Animated.spring(pressAnim, {
-      toValue: 1,
-      useNativeDriver: SUPPORTS_NATIVE_DRIVER,
-      ...animation.spring.gentle,
-    }).start();
-  }, [pressAnim]);
+  const rowStyle = useMemo(
+    (): WebCssStyle => ({
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: LABEL_GAP,
+      // `opacity-50` — upstream's disabled treatment, and the same number
+      // `Item` and every menu row already use.
+      opacity: disabled ? 0.5 : 1,
+      // The `:focus-visible` ring colour, read by the adopted sheet. A custom
+      // property because the value is a resolved theme token the static sheet
+      // cannot know; native has no such style key and ignores it.
+      '--bloom-checkbox-ring': color ?? theme.colors.primary,
+    }),
+    [disabled, color, theme],
+  );
 
-  const boxStyle = useMemo((): ViewStyle => {
-    const base: ViewStyle = {
+  const boxStyle = useMemo((): ViewStyle & { backgroundColor: string } => {
+    // `border-input size-4 shrink-0 rounded-[4px] border shadow-sm
+    //  shadow-black/5`, plus `border-primary` and the `bg-primary` indicator
+    //  once checked.
+    const base: ViewStyle & { backgroundColor: string } = {
       width: sizeConfig.box,
       height: sizeConfig.box,
-      borderRadius: borderRadius._2xs + 2,
-      borderWidth: 2,
+      borderRadius: BOX_RADIUS,
+      borderWidth: BOX_BORDER_WIDTH,
       alignItems: 'center',
       justifyContent: 'center',
+      ...bloomShadowStyle('s'),
+      // Narrowed to a required `string` so the press resolver can read the REST
+      // fill straight off it. It sits AFTER the shadow spread, whose `ViewStyle`
+      // would otherwise widen it back to `ColorValue`.
+      backgroundColor: 'transparent',
     };
 
     if (checked || indeterminate) {
       base.backgroundColor = checkColor;
       base.borderColor = checkColor;
     } else {
-      base.backgroundColor = 'transparent';
       base.borderColor = theme.colors.border;
     }
 
     return base;
   }, [sizeConfig, checked, indeterminate, checkColor, theme]);
 
-  // Checkmark using unicode characters for zero-dependency rendering
-  const checkmarkContent = indeterminate ? '\u2014' : '\u2713';
+  // Unchecked the box has no fill, so the press IS the fill and it takes the
+  // neutral wash; checked it keeps `checkColor` and gains a state layer of the
+  // checkmark's own colour, so the held state cannot be read as unchecked.
+  const pressedBackground = useMemo(
+    () => pressedSurface(theme.colors, boxStyle.backgroundColor, checkmarkColor),
+    [theme.colors, boxStyle.backgroundColor, checkmarkColor],
+  );
+
+  // The mark is drawn, not typed. It used to be the glyphs `\u2713` and `\u2014`
+  // in a `<Text>`, so its shape, weight and vertical centring came from whatever
+  // font the platform resolved — and `Check_Stroke2_Corner0_Rounded` was already
+  // the answer everywhere else in the library. The indeterminate state is a BAR
+  // rather than a second icon: there is no minus in the set, and a rounded rule
+  // is what the state means.
+  const mark = indeterminate ? (
+    <View
+      style={{
+        width: sizeConfig.checkmark,
+        height: Math.max(2, Math.round(sizeConfig.checkmark * INDETERMINATE_BAR_THICKNESS)),
+        borderRadius: borderRadius.full,
+        backgroundColor: checkmarkColor,
+      }}
+    />
+  ) : (
+    <CheckIcon width={sizeConfig.checkmark} height={sizeConfig.checkmark} fill={checkmarkColor} />
+  );
+
+  const slop = Math.max(8, Math.ceil((MIN_TOUCH_TARGET - sizeConfig.box) / 2));
 
   return (
     <Pressable
+      // The DOM hook the adopted sheet above hangs off. Through `dataSet`,
+      // because react-native-web drops any prop outside its own fixed list — a
+      // literal `'data-bloom-checkbox'` prop never reaches the DOM. See the
+      // longer note in `chip/Chip.tsx`, where this was measured.
+      {...(IS_WEB ? ({ dataSet: { bloomCheckbox: '' } } as Record<string, unknown>) : {})}
       style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          gap: space.sm,
-          opacity: disabled ? 0.4 : 1,
-        },
+        rowStyle,
         style,
       ]}
       onPress={handlePress}
@@ -106,29 +236,32 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
       onPressOut={onPressOut}
       disabled={disabled}
       accessibilityRole="checkbox"
-      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      // `aria-checked`, not `accessibilityState`: react-native-web's
+      // `createDOMProps` never reads `accessibilityState`, so a checkbox that
+      // set only that announced no state at all on web — the box was drawn
+      // checked while assistive tech saw an unchecked control. React Native's
+      // `Pressable` folds `aria-checked` back into `accessibilityState`, so
+      // this one prop is the spelling both platforms honour. `disabled`
+      // travels on the `disabled` prop above, which both platforms map.
+      aria-checked={indeterminate ? 'mixed' : checked}
       accessibilityLabel={accessibilityLabel ?? label}
-      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      hitSlop={{ top: slop, bottom: slop, left: slop, right: slop }}
       testID={testID}
     >
-      <Animated.View style={[boxStyle, { transform: [{ scale: pressAnim }] }]}>
+      <Animated.View
+        style={[
+          boxStyle,
+          pressed && !disabled && { backgroundColor: pressedBackground },
+          { transform: [{ scale: pressAnim }] },
+        ]}
+      >
         <Animated.View
           style={{
             opacity: scaleAnim,
             transform: [{ scale: scaleAnim }],
           }}
         >
-          <Text
-            style={{
-              fontSize: sizeConfig.checkmark,
-              color: checkmarkColor,
-              fontWeight: '700',
-              lineHeight: sizeConfig.checkmark + 2,
-              textAlign: 'center',
-            }}
-          >
-            {checkmarkContent}
-          </Text>
+          {mark}
         </Animated.View>
       </Animated.View>
 
@@ -155,7 +288,8 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
                 fontSize: sizeConfig.descFontSize,
                 color: theme.colors.textSecondary,
                 lineHeight: sizeConfig.descFontSize + 6,
-                marginTop: 2,
+                // `gap-2` in upstream's label column, not a 2px hairline.
+                marginTop: DESCRIPTION_GAP,
               }}
             >
               {description}

package/src/chip/Chip.tsx

@@ -1,48 +1,81 @@
 import React, { memo, useMemo } from 'react';
-import { View, Text, Pressable, Animated, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  View,
+  Text,
+  Platform,
+  Pressable,
+  Animated,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
-import { usePressAnimation } from '../hooks/usePressAnimation';
-import type { ChipProps, ChipColor, ChipVariant } from './types';
+import { animation } from '../styles/tokens';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { pressedSurface } from '../theme/press-colors';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { usePressAnimation } from '../hooks/use-press-animation';
+import { TimesLarge_Stroke2_Corner0_Rounded as TimesIcon } from '../icons/Times';
+import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import type { ChipProps } from './types';
 
+/**
+ * `closeIcon` is a rung of the icon scale rather than a pixel height: the close
+ * affordance is an `Icons` glyph, and those take `size` from the shared scale
+ * (`sm` = 16, `md` = 20).
+ */
 const SIZE_CONFIG = {
-  small: { height: 24, fontSize: 12, paddingHorizontal: 8, iconGap: 4, iconSize: 14 },
-  medium: { height: 32, fontSize: 14, paddingHorizontal: 12, iconGap: 6, iconSize: 16 },
-  large: { height: 40, fontSize: 16, paddingHorizontal: 16, iconGap: 8, iconSize: 18 },
+  small: { height: 24, fontSize: 12, paddingHorizontal: 8, iconGap: 4, closeIcon: 'sm' },
+  medium: { height: 32, fontSize: 14, paddingHorizontal: 12, iconGap: 6, closeIcon: 'sm' },
+  large: { height: 40, fontSize: 16, paddingHorizontal: 16, iconGap: 8, closeIcon: 'md' },
 } as const;
 
-const PRESS_SCALE = 0.95;
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  A pressable `Chip` is a react-native-web `Pressable`, so the browser gives it
+//  `tabindex="0"` and a keyboard user can reach it — with nothing to show for
+//  it, because react-native-web resets the outline and no inline style can carry
+//  a `:focus-visible` rule. Silent, and only for keyboard users, which is why it
+//  survived: it renders perfectly for everyone testing with a mouse.
+//
+//  The rules come from the SHARED recipe every Bloom control's web CSS is built
+//  from — see `styles/interactive-web-css.ts` for why the selector is
+//  `:focus-visible` rather than `:focus`, and why injection goes through
+//  `adoptStyleSheet` rather than a `<style>` element. The hook is a `data-*`
+//  attribute rather than a class because a class never reaches the DOM here:
+//  react-native-css consumes `className` into `style` before that could happen.
+//
+//  `adoptStyleSheet` no-ops without a `document`, so this file stays universal
+//  and native pays for a hook call and nothing else.
+// ---------------------------------------------------------------------------
 
-function useChipColors(
-  color: ChipColor,
-  variant: ChipVariant,
-  selected: boolean,
-  theme: ReturnType<typeof useTheme>,
-): { bg: string; fg: string; border: string } {
-  const colorMap: Record<ChipColor, string> = {
-    default: theme.colors.textSecondary,
-    primary: theme.colors.primary,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-  };
+const STYLE_ID = 'bloom-chip-web-css';
 
-  const base = selected ? theme.colors.primary : colorMap[color];
-  // When the background is the theme primary, the readable text/icon color is
-  // preset-specific (white for blue, black for yellow). Semantic colors
-  // (success/warning/error) are fixed bright fills that always pair with white.
-  const isPrimaryBg = base === theme.colors.primary;
-  const solidForeground = isPrimaryBg ? theme.colors.primaryForeground : '#fff';
+const BLOOM_CHIP_CSS = interactiveWebCss({
+  selector: '[data-bloom-chip]',
+  varPrefix: 'bloom-chip',
+  // The pill's own geometry is resolved-token inline style, since it has to be
+  // identical on native. What `base` does here is put the LAYOUT half of the
+  // shared reset back: that reset is written for a raw `<button>`, and an
+  // adopted stylesheet is applied after the document's own, so left alone its
+  // `display: inline-flex` and `justify-content: center` would win over
+  // react-native-web's `View` classes and re-centre every chip's contents.
+  // Declarations here are emitted after the reset in the same rule, which is
+  // what the `base` option is for.
+  base: `
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+  `,
+  transition: 'background-color 120ms ease, border-color 120ms ease, opacity 120ms ease',
+  hover: { declarations: 'opacity: 0.9;' },
+  outlineOffset: 2,
+});
 
-  switch (variant) {
-    case 'solid':
-      return { bg: base, fg: solidForeground, border: base };
-    case 'outlined':
-      return { bg: 'transparent', fg: base, border: base };
-    case 'soft':
-      return { bg: base + '18', fg: base, border: 'transparent' };
-  }
-}
+const IS_WEB = Platform.OS === 'web';
 
 const ChipComponent: React.FC<ChipProps> = ({
   children,
@@ -61,51 +94,92 @@ const ChipComponent: React.FC<ChipProps> = ({
   testID,
 }) => {
   const theme = useTheme();
-  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(PRESS_SCALE);
-  const colors = useChipColors(color, variant, selected, theme);
+  useInteractiveWebCss(STYLE_ID, BLOOM_CHIP_CSS);
+  const { scaleAnim, onPressIn: onScaleIn, onPressOut: onScaleOut } =
+    usePressAnimation(animation.pressScale);
+  // The scale and the background are DRIVEN SEPARATELY on purpose. The scale is
+  // motion and is suppressed under "reduce motion" and under a mouse; a colour
+  // swap is neither, and suppressing it there is what left this control with no
+  // desktop press feedback at all.
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } = useInteractionState();
+  const onPressIn = () => { onScaleIn(); onPressedIn(); };
+  const onPressOut = () => { onScaleOut(); onPressedOut(); };
+  // Selection promotes the chip to the brand tone \u2014 the filter-pill behaviour \u2014
+  // rather than to a second colour system of its own.
+  const colors = resolveAccentColors(theme.colors, selected ? 'primary' : color, variant);
   const sizeConfig = SIZE_CONFIG[size];
+  // All three fills go through the one resolver and land somewhere different
+  // because their REST surfaces do: `solid` keeps its tone and gains a state
+  // layer of its own label colour, `subtle` deepens the tint AND its alpha
+  // rather than flattening it, `outlined` has no fill so the press IS the fill.
+  const pressedBackground = useMemo(
+    () => pressedSurface(theme.colors, colors.background, colors.foreground),
+    [theme.colors, colors.background, colors.foreground],
+  );
 
-  const containerStyle = useMemo((): ViewStyle => ({
+  const containerStyle = useMemo((): WebCssStyle => ({
     height: sizeConfig.height,
     borderRadius: sizeConfig.height / 2,
     paddingHorizontal: sizeConfig.paddingHorizontal,
-    backgroundColor: colors.bg,
+    backgroundColor: colors.background,
     borderWidth: variant === 'outlined' ? 1 : 0,
     borderColor: colors.border,
     flexDirection: 'row',
     alignItems: 'center',
     gap: sizeConfig.iconGap,
     alignSelf: 'flex-start',
+    // A pill is a fixed-size token. In a flex row of chips (a filter bar, a tag
+    // list) the default `flexShrink: 1` lets a long label squeeze its
+    // neighbours into ellipsis; shadcn's badge says the same thing as
+    // `shrink-0`. `overflow: hidden` keeps the content inside the radius.
+    flexShrink: 0,
+    overflow: 'hidden',
+    // The `:focus-visible` ring colour, read by the adopted sheet. A custom
+    // property because the value is a resolved theme token the static sheet
+    // cannot know; native has no such style key and ignores it.
+    '--bloom-chip-ring': colors.foreground,
   }), [sizeConfig, colors, variant]);
 
   const labelStyle = useMemo((): TextStyle => ({
     fontSize: sizeConfig.fontSize,
     fontWeight: '500',
-    color: colors.fg,
+    color: colors.foreground,
+    // The label yields before the pill does: a chip narrower than its text
+    // ellipsises rather than overflowing its own radius.
+    flexShrink: 1,
   }), [sizeConfig, colors]);
 
+  // Icons inside the pill are sized to the pill, not to whatever the caller
+  // happened to pass \u2014 shadcn's badge pins them with `[&>svg]:size-3`. A slot
+  // with a fixed box does the same thing without reaching into the child.
+  const iconSlotStyle = useMemo((): ViewStyle => {
+    const box = Math.round(sizeConfig.fontSize * 1.15);
+    return { width: box, height: box, alignItems: 'center', justifyContent: 'center' };
+  }, [sizeConfig]);
+
   const closeButton = onClose ? (
     <Pressable
       onPress={onClose}
       hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
       accessibilityLabel="Remove"
       accessibilityRole="button"
+      style={iconSlotStyle}
     >
-      <Text style={{ fontSize: sizeConfig.iconSize, color: colors.fg, lineHeight: sizeConfig.iconSize }}>
-        {'\u00D7'}
-      </Text>
+      <TimesIcon size={sizeConfig.closeIcon} fill={colors.foreground} />
     </Pressable>
   ) : null;
 
   const content = (
     <>
-      {startIcon}
+      {startIcon != null ? <View style={iconSlotStyle}>{startIcon}</View> : null}
       {typeof children === 'string' ? (
-        <Text style={[labelStyle, textStyle]}>{children}</Text>
+        <Text numberOfLines={1} style={[labelStyle, textStyle]}>
+          {children}
+        </Text>
       ) : (
         children
       )}
-      {endIcon}
+      {endIcon != null ? <View style={iconSlotStyle}>{endIcon}</View> : null}
       {closeButton}
     </>
   );
@@ -114,14 +188,44 @@ const ChipComponent: React.FC<ChipProps> = ({
     return (
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
         <Pressable
-          style={[containerStyle, disabled && { opacity: 0.5 }, style]}
+          // The DOM hook the adopted sheet above hangs off.
+          //
+          // It MUST go through `dataSet`. react-native-web filters props against
+          // a fixed list and drops anything it does not know, so a literal
+          // `'data-bloom-chip'` prop never reaches the DOM — measured in a real
+          // browser: the attribute was absent, the sheet matched nothing, and
+          // the ring that appeared under keyboard focus was Chrome's own default,
+          // which is exactly what a working ring looks like from a distance.
+          // `dataSet` is the one channel react-native-web turns into `data-*`.
+          //
+          // A cast because react-native has no type for it (it is a
+          // react-native-web prop, inert on native). Same web-only-attribute case
+          // as `TextField`'s DOM mouse handlers, registered in
+          // `classname-interop.test.ts`'s exemption list. It is NOT a `className`
+          // smuggled past `styled()`, which is what that gate forbids.
+          {...(IS_WEB ? ({ dataSet: { bloomChip: '' } } as Record<string, unknown>) : {})}
+          style={[
+            containerStyle,
+            disabled && { opacity: 0.5 },
+            // Before the caller's `style`, so `style` still wins the array.
+            pressed && !disabled && { backgroundColor: pressedBackground },
+            style,
+          ]}
           onPress={onPress}
           onPressIn={onPressIn}
           onPressOut={onPressOut}
           disabled={disabled}
           accessibilityLabel={accessibilityLabel}
           accessibilityRole="button"
+          // Both spellings, because neither platform reads the other's and
+          // there is no single prop that serves both here: react-native-web
+          // ignores `accessibilityState`, while React Native has no
+          // `aria-pressed` at all (its `AccessibilityState` is
+          // disabled/selected/checked/busy/expanded). `aria-pressed` is also
+          // the state ARIA defines for a toggle with `role="button"` —
+          // `aria-selected` would be invalid on that role.
           accessibilityState={{ disabled, selected }}
+          aria-pressed={selected}
           testID={testID}
         >
           {content}

package/src/chip/index.ts

@@ -1,2 +1,2 @@
 export { Chip } from './Chip';
-export type { ChipProps, ChipVariant, ChipColor, ChipSize } from './types';
+export type { ChipProps, ChipSize } from './types';

package/src/chip/types.ts

@@ -1,16 +1,20 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type ChipVariant = 'solid' | 'outlined' | 'soft';
-export type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+import type { AccentFill, AccentTone } from '../theme/accent-colors';
+
 export type ChipSize = 'small' | 'medium' | 'large';
 
 export interface ChipProps {
   /** Text content of the chip. */
   children?: React.ReactNode;
-  /** Visual variant. */
-  variant?: ChipVariant;
+  /**
+   * How loudly the chip is painted. `subtle` used to be spelled `soft` here and
+   * `subtle` on `Badge` — one concept, two names, resolved by the shared
+   * {@link AccentFill}.
+   */
+  variant?: AccentFill;
   /** Semantic color. */
-  color?: ChipColor;
+  color?: AccentTone;
   /** Size preset. */
   size?: ChipSize;
   /** Icon rendered before the label. */