@oxy.so/bloom 2.10.0 → 2.11.0

package/src/badge/shared.ts

@@ -0,0 +1,88 @@
+import { resolveButtonRamps } from '../button/shared';
+import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import type { TypeScaleVariant } from '../typography/scale';
+import type { BadgeSize, BadgeVariant } from './types';
+
+/**
+ * `Badge`'s rungs and paint, pure so a gate can walk the whole preset x mode
+ * matrix without rendering.
+ *
+ * TWO FAMILIES OF RUNG, and the difference is not decoration:
+ *
+ *   COUNTER   small / medium / large — sized to a DIGIT. `minWidth` equals the
+ *             height so "3" stays a circle rather than a pill narrower than it
+ *             is tall, and the pill never shrinks: it is a fixed token in the
+ *             row it sits in.
+ *   LABEL     `label-small` / `label-medium` — sized to a WORD, with the side
+ *             padding a word needs (8 / 10 rather than 4) and a leading icon
+ *             slot. These SHRINK and truncate, because a two-word status in a
+ *             narrow card must yield before the card's title does.
+ *
+ * The label rungs are where the housing badges live — `OfferingBadge` and the
+ * listing status pill are presets over them rather than two more copies of this
+ * geometry.
+ *
+ *                   height  padding-x  icon  gap  text
+ *   small           17      4          10    2    caption-2-semibold
+ *   medium          18      4          11    2    caption-1-semibold  ← default
+ *   large           24      6          14    4    body-semibold
+ *   label-small     20      8          12    4    caption-1-semibold
+ *   label-medium    24      10         14    4    body-2-semibold
+ */
+export interface BadgeGeometry {
+  height: number;
+  type: TypeScaleVariant;
+  /** Side padding. An icon tucks the LEADING side in by 2, optically. */
+  paddingHorizontal: number;
+  /** The leading icon's box. */
+  icon: number;
+  /** Between the icon and the label. */
+  gap: number;
+  /** Standalone status dot: tint halo around a solid centre. */
+  dotSize: number;
+  halo: number;
+  core: number;
+  /**
+   * `true` for the rungs sized to a word: they shrink and truncate. `false` for
+   * the counter rungs, which pin `minWidth` to the height and never shrink.
+   */
+  word: boolean;
+}
+
+export const BADGE_GEOMETRY: Readonly<Record<BadgeSize, BadgeGeometry>> = {
+  small: { height: 17, type: 'caption-2-semibold', paddingHorizontal: 4, icon: 10, gap: 2, dotSize: 6, halo: 8, core: 4, word: false },
+  medium: { height: 18, type: 'caption-1-semibold', paddingHorizontal: 4, icon: 11, gap: 2, dotSize: 8, halo: 12, core: 6, word: false },
+  large: { height: 24, type: 'body-semibold', paddingHorizontal: 6, icon: 14, gap: 4, dotSize: 10, halo: 16, core: 8, word: false },
+  'label-small': { height: 20, type: 'caption-1-semibold', paddingHorizontal: 8, icon: 12, gap: 4, dotSize: 8, halo: 12, core: 6, word: true },
+  'label-medium': { height: 24, type: 'body-2-semibold', paddingHorizontal: 10, icon: 14, gap: 4, dotSize: 10, halo: 16, core: 8, word: true },
+};
+
+export interface BadgePaint {
+  background: string;
+  /** Label AND icon. One colour: a badge's icon is a glyph of its label, not a second accent. */
+  foreground: string;
+  border: string;
+  /** `bloomShadowStyle` step, or `null` for a flat badge. */
+  shadow: 's' | null;
+}
+
+/**
+ * The surface, label and border for one tone at one loudness.
+ *
+ *   solid/subtle/outlined   the shared accent recipe, unchanged — the pairs the
+ *                           colour policy gates at AA, so nothing is derived here
+ *   onMedia                 a neutral-50 pill with a neutral-900 label and
+ *                           shadow-s, THE SAME IN BOTH MODES and ignoring `tone`:
+ *                           the photograph under it does not change with the
+ *                           theme, so a badge that followed the mode would go
+ *                           dark-on-dark over half the images in the library
+ */
+export function resolveBadgePaint(theme: Theme, tone: AccentTone, variant: BadgeVariant): BadgePaint {
+  if (variant === 'onMedia') {
+    const { neutral } = resolveButtonRamps(theme);
+    return { background: neutral[50], foreground: neutral[900], border: 'transparent', shadow: 's' };
+  }
+  const pair = resolveAccentColors(theme.colors, tone, variant);
+  return { ...pair, shadow: null };
+}

package/src/badge/types.ts

@@ -1,19 +1,43 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
+import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentFill, AccentTone } from '../theme/accent-colors';
 
-export type BadgeSize = 'small' | 'medium' | 'large';
+/**
+ * The counter rungs (`small`/`medium`/`large`, sized to a digit) and the label
+ * rungs (`label-small`/`label-medium`, 20 and 24 tall, sized to a word and
+ * carrying an optional leading icon). `shared.ts` has the table and why the two
+ * families differ in more than height.
+ */
+export type BadgeSize = 'small' | 'medium' | 'large' | 'label-small' | 'label-medium';
+
+/**
+ * The three accent fills, plus `onMedia`: a light pill with a shadow that reads
+ * over a photograph, identical in both modes. `onMedia` ignores `color`.
+ */
+export type BadgeVariant = AccentFill | 'onMedia';
+
+/** An icon component the badge draws at its own rung's size and label colour. */
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type BadgeIcon = BloomIconComponent;
+
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 export interface BadgeProps {
   /** Text or number to display in the badge. */
   content?: string | number;
   /** How loudly the badge is painted. */
-  variant?: AccentFill;
-  /** Semantic color. */
+  variant?: BadgeVariant;
+  /** Semantic color. Ignored by `onMedia`, which is a fixed neutral pill. */
   color?: AccentTone;
   /** Size preset. `medium` is the counter size: 18 tall, 12/16 semibold. */
   size?: BadgeSize;
+  /**
+   * An icon before the label, drawn at the rung's icon size in the label's own
+   * colour and hidden from assistive technology — the badge reads as its text.
+   * Its testID is `<testID>-icon`.
+   */
+  icon?: BadgeIcon;
   /** If true, renders a dot without content — standalone, a status dot
    * (a solid centre on the tone's tint halo); attached, a plain marker. A dot always paints the
    * tone's fill, whatever the `variant`. */

package/src/booking/BookingFieldCell.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Pressable, View, type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { BOOKING_FIELD_RADIUS, type BookingPalette } from './shared';
 

package/src/booking/BookingLink.tsx

@@ -1,29 +1,29 @@
-import React, { useEffect, useMemo } from 'react';
-import { Pressable, type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import React from 'react';
+import type { GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
-import { useInteractionState } from '../hooks/use-interaction-state';
-import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
+import { Button } from '../button';
 import type { TypeScaleVariant } from '../typography/scale';
-import { BOOKING_STYLE_ID, BOOKING_WEB_CSS, resolveBookingPalette } from './shared';
 
 /**
  * INTERNAL — the family's underlined text button: a price row's label, the
- * guests panel's "Close", the bar's dates. Underlined at rest, text-secondary
- * under a pointer or a press (colour only, no scale), a focus ring on web.
+ * guests panel's "Close", the bar's dates.
  *
- * Spreads unknown props onto the `Pressable` so it can be a `PopoverTrigger`'s
+ * It is `Button variant="link"` with the READING tone and the underline at rest
+ * (`linkTone="text"`, `underline="rest"`), which is exactly what it hand-rolled
+ * before those two props existed: text-primary and underlined at rest,
+ * text-secondary under a pointer or a press (colour only, no scale), a focus
+ * ring on web. This wrapper survives only to keep the family's own spelling —
+ * `variant` is the TYPE RAMP STEP here, not the button variant.
+ *
+ * Spreads unknown props onto the `Button` so it can be a `PopoverTrigger`'s
  * `asChild` child, which hands it `onPress`, `aria-expanded` and
- * `aria-haspopup`.
+ * `aria-haspopup` — all three of which `Button` forwards.
  */
 export interface BookingLinkProps {
   children: string;
-  onPress?: (event: GestureResponderEvent) => void;
+  onPress?: (event?: GestureResponderEvent) => void;
   variant?: TypeScaleVariant;
-  /** Colour at rest. Default text-primary. */
+  /** Colour at rest. Default text-primary (and then the hover colour works). */
   color?: string;
   accessibilityLabel?: string;
   disabled?: boolean;
@@ -47,50 +47,23 @@ export function BookingLink({
   numberOfLines,
   ...handle
 }: BookingLinkProps) {
-  const theme = useTheme();
-  const palette = useMemo(() => resolveBookingPalette(theme), [theme]);
-  useEffect(() => {
-    adoptStyleSheet(BOOKING_STYLE_ID, BOOKING_WEB_CSS);
-  }, []);
-  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
-  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
-
-  const ring: WebCssStyle = {
-    borderRadius: 4,
-    alignSelf: 'flex-start',
-    '--bloom-booking-ring': palette.ring,
-  };
-
   return (
-    <Pressable
+    <Button
       {...handle}
-      {...webDataSet({ bloomBookingFocus: '' })}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? children}
-      accessibilityState={{ disabled: disabled === true }}
-      aria-disabled={disabled || undefined}
-      disabled={disabled}
+      variant="link"
+      linkTone="text"
+      underline="rest"
+      size="small"
+      textVariant={variant}
       onPress={onPress}
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel ?? children}
+      style={[{ alignSelf: 'flex-start' }, style]}
+      textStyle={color ? [{ color }, textStyle] : textStyle}
+      numberOfLines={numberOfLines}
       testID={testID}
-      style={[ring, style]}
     >
-      <Text
-        variant={variant}
-        numberOfLines={numberOfLines}
-        style={[
-          {
-            color: hovered || pressed ? palette.textSecondary : (color ?? palette.text),
-            textDecorationLine: 'underline',
-          },
-          textStyle,
-        ]}
-      >
-        {children}
-      </Text>
-    </Pressable>
+      {children}
+    </Button>
   );
 }

package/src/booking/TripCard.tsx

@@ -2,18 +2,18 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Image, Platform, Pressable, View, type LayoutChangeEvent, type ViewStyle } from 'react-native';
 
 import { Badge } from '../badge';
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TRIP_STATUS } from './constants';
 import {
   BOOKING_STYLE_ID,
   BOOKING_WEB_CSS,
-  isImageUrl,
   resolveBookingPalette,
   TRIP_CARD_HORIZONTAL_MIN_WIDTH,
   TRIP_CARD_RADIUS,

package/src/booking/shared.ts

@@ -79,15 +79,6 @@ export function priceAccessibilityName(price: string, unit?: string, originalPri
   return `${price}${unit ? ` per ${unit}` : ''}${originalPrice ? `, originally ${originalPrice}` : ''}`;
 }
 
-export function isImageUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
 
 // ---------------------------------------------------------------------------
 //  Keyboard focus on web

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -13,6 +13,7 @@ import {
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
 import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
     type AnimatedStyle,
@@ -644,6 +645,17 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
               }
             : undefined;
 
+    // The sheet paints the PAGE colour, so it RESETS the ambient surface for
+    // everything inside it. Without this a sheet rendered inside a `ContentPanel`
+    // — web keeps React context across a portal — would tell its content it is
+    // sitting on the panel's card, and in-sheet chrome would paint the column's
+    // colour on top of the sheet's.
+    const surfaceChildren = (
+        <SurfaceLevelProvider level={0} fill={colors.background}>
+            {children}
+        </SurfaceLevelProvider>
+    );
+
     // Inner content: scrollable wraps in Animated.ScrollView, non-scrollable
     // renders children directly. In legacy mode the scrollview is also
     // wrapped in the `nativeGesture` detector for scroll/pan coordination.
@@ -663,7 +675,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 }
             }}
         >
-            {children}
+            {surfaceChildren}
         </Animated.ScrollView>
     );
 
@@ -675,7 +687,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
             // Legacy mode: native gesture wraps the scroll view to coordinate
             // with the always-active body pan.
             : <GestureDetector gesture={nativeGesture}>{scrollViewNode}</GestureDetector>)
-        : <View style={styles.nonScrollableContent}>{children}</View>;
+        : <View style={styles.nonScrollableContent}>{surfaceChildren}</View>;
 
     return (
         <Shell visible={rendered} onRequestClose={dismiss} keyboardHeight={keyboardHeight}>
@@ -707,7 +719,17 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 <GestureDetector gesture={panGesture}>
                     <Animated.View
                         onLayout={onLayout}
-                        style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle, style]}
+                        style={[
+                            dynamicStyles.sheet,
+                            // `--bloom-surface` on the element that carries the
+                            // fill — web CSS under the sheet reads the sheet's
+                            // colour, not the colour of whatever it opened over.
+                            surfaceFillVars(colors.background),
+                            sheetMarginStyle,
+                            sheetStyle,
+                            sheetHeightStyle,
+                            style,
+                        ]}
                     >
                         {backgroundComponent?.({ style: styles.background })}
 

package/src/button/Button.tsx

@@ -26,6 +26,7 @@ import {
   iconOnlyWidth,
   isIconComponent,
   resolveButtonPalette,
+  resolveButtonUnderline,
   type ButtonGradient,
   type ButtonResolvedSize,
 } from './shared';
@@ -99,6 +100,8 @@ type ButtonPressableProps = Pick<
   | 'className'
   | 'disabled'
   | 'hitSlop'
+  | 'onHoverIn'
+  | 'onHoverOut'
   | 'onPress'
   | 'onPressIn'
   | 'onPressOut'
@@ -159,11 +162,15 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   trailingIcon: TrailingIcon,
   iconOnly = false,
   linkTone = 'primary',
+  underline,
+  textVariant,
+  numberOfLines,
   href,
   loading = false,
   loadingColor,
   accessibilityLabel,
   accessibilityHint,
+  accessibilityRole,
   hitSlop,
   testID,
   className,
@@ -187,12 +194,20 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     () => resolveButtonPalette(variant, theme, linkTone),
     [variant, theme, linkTone],
   );
+  const underlineMode = resolveButtonUnderline(variant, underline);
 
   // Pressed state drives the ACTIVE palette. Tracked through state rather than
   // Pressable's function-form `style`, which NativeWind's css-interop swallows
   // (dropping every base style with it).
   const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } =
     useInteractionState();
+  // Hover exists on this fork too: a react-native-web (Metro-web) consumer
+  // renders THIS file, and `linkTone="text"` is the first tone whose hover
+  // changes the foreground rather than only a background the web fork's
+  // stylesheet owned. On a real device no hover event is ever dispatched, so
+  // `hovered` stays false and nothing about native changes.
+  const { state: hovered, onIn: onHoveredIn, onOut: onHoveredOut } =
+    useInteractionState();
 
   // No press scale: a 0.98 scale-down was deliberately left out, so a press is
   // the active paint alone.
@@ -204,7 +219,9 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     ? palette.disabled
     : pressed && !loading
       ? palette.active
-      : palette.rest;
+      : hovered && !loading
+        ? palette.hover
+        : palette.rest;
 
   const baseStyles = useMemo((): ViewStyle => {
     const styles: ViewStyle = {
@@ -251,8 +268,11 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     (): TextStyle => ({
       paddingHorizontal: isLink ? 0 : geometry.labelPaddingHorizontal,
       color: paint.foreground,
+      ...(underlineMode === 'rest' || (underlineMode === 'hover' && hovered && !disabled)
+        ? { textDecorationLine: 'underline' as const }
+        : null),
     }),
-    [geometry, paint.foreground, isLink],
+    [geometry, paint.foreground, isLink, underlineMode, hovered, disabled],
   );
 
   const defaultHitSlop = isSquare
@@ -275,7 +295,11 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       ) : null}
       {iconPosition === 'left' && iconNode}
       {!isSquare && children != null && (
-        <Text variant={geometry.type} style={[computedTextStyle, textStyle]}>
+        <Text
+          variant={textVariant ?? geometry.type}
+          numberOfLines={numberOfLines}
+          style={[computedTextStyle, textStyle]}
+        >
           {children}
         </Text>
       )}
@@ -300,11 +324,13 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       onPress={handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
+      onHoverIn={isInteractionBlocked ? undefined : onHoveredIn}
+      onHoverOut={isInteractionBlocked ? undefined : onHoveredOut}
       disabled={isInteractionBlocked}
       hitSlop={hitSlop ?? defaultHitSlop}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      accessibilityRole={href != null ? 'link' : 'button'}
+      accessibilityRole={accessibilityRole ?? (href != null ? 'link' : 'button')}
       // `aria-busy` matches what `Button.web.tsx` emits; react-native-web never
       // reads `accessibilityState`, React Native folds `aria-busy` back into it.
       aria-busy={loading || undefined}

package/src/button/Button.web.tsx

@@ -17,7 +17,6 @@ import {
   useInteractiveWebCss,
 } from '../styles/interactive-web-css';
 import {
-  BUTTON_GEOMETRY,
   BUTTON_RADIUS,
   BUTTON_SHADOW,
   BUTTON_SIZE_ALIAS,
@@ -28,7 +27,9 @@ import {
   iconOnlyWidth,
   isIconComponent,
   paintToCssImage,
+  resolveButtonGeometry,
   resolveButtonPalette,
+  resolveButtonUnderline,
   type ButtonResolvedSize,
 } from './shared';
 import type { ButtonIconComponent, ButtonProps, ButtonVariant, LinkButtonProps } from './types';
@@ -65,7 +66,12 @@ const STYLE_ID = 'bloom-button-web-css';
 const T = `${BUTTON_TRANSITION_MS}ms`;
 const DISABLED = '.bloom-btn:disabled:not([aria-busy="true"]),\n.bloom-btn[aria-disabled="true"]:not([aria-busy="true"])';
 
-const BLOOM_BUTTON_CSS = interactiveWebCss({
+/**
+ * The adopted stylesheet. Exported so a suite can assert the RULES: jsdom
+ * applies none of them, so a modifier class alone proves nothing about whether
+ * an underline is drawn.
+ */
+export const BLOOM_BUTTON_CSS = interactiveWebCss({
   selector: '.bloom-btn',
   varPrefix: 'bloom-btn',
   base: `
@@ -90,6 +96,7 @@ const BLOOM_BUTTON_CSS = interactiveWebCss({
     declarations: `
       background-color: var(--bloom-btn-bg-hover);
       border-color: var(--bloom-btn-border-hover);
+      color: var(--bloom-btn-fg-hover, var(--bloom-btn-fg));
     `,
   },
   pressDeclarations: `
@@ -136,10 +143,14 @@ const BLOOM_BUTTON_CSS = interactiveWebCss({
 .bloom-btn--gradient[aria-disabled="true"]::before {
   display: none;
 }
-.bloom-btn--link {
+.bloom-btn--underline-rest,
+.bloom-btn--underline-hover {
   text-underline-offset: ${LINK_BUTTON_UNDERLINE_OFFSET}px;
 }
-.bloom-btn--link${NOT_DISABLED}:hover {
+.bloom-btn--underline-rest {
+  text-decoration: underline;
+}
+.bloom-btn--underline-hover${NOT_DISABLED}:hover {
   text-decoration: underline;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -169,6 +180,9 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   trailingIcon: TrailingIcon,
   iconOnly = false,
   linkTone = 'primary',
+  underline,
+  textVariant,
+  numberOfLines,
   href,
   target,
   rel,
@@ -179,6 +193,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   'aria-expanded': ariaExpanded,
   'aria-haspopup': ariaHasPopup,
   accessibilityHint,
+  accessibilityRole,
   testID,
   className,
   type = 'button',
@@ -201,7 +216,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   const resolvedVariant: ButtonVariant =
     sizeProp === 'icon' && variant === 'primary' ? 'icon' : variant;
   const size: ButtonResolvedSize = BUTTON_SIZE_ALIAS[sizeProp];
-  const geometry = BUTTON_GEOMETRY[size];
+  const geometry = resolveButtonGeometry(size, textVariant);
   const isIconVariant = resolvedVariant === 'icon';
   const isSquare = iconOnly || isIconVariant;
   const isLink = resolvedVariant === 'link';
@@ -214,6 +229,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
     [resolvedVariant, theme, linkTone],
   );
   const isGradient = palette.rest.gradient !== null;
+  const underlineMode = resolveButtonUnderline(resolvedVariant, underline);
 
   const containerStyle = useMemo((): CSSProperties => {
     const shadow = palette.shadow ? BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] : 'none';
@@ -235,6 +251,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       ['--bloom-btn-shadow' as string]: shadow,
       ['--bloom-btn-border-width' as string]: `${palette.borderWidth}px`,
       ['--bloom-btn-fg' as string]: palette.rest.foreground,
+      ['--bloom-btn-fg-hover' as string]: palette.hover.foreground,
       ['--bloom-btn-fg-active' as string]: palette.active.foreground,
       ['--bloom-btn-fg-disabled' as string]: palette.disabled.foreground,
       ['--bloom-btn-disabled-opacity' as string]: palette.disabledOpacity ?? 1,
@@ -300,6 +317,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   const ariaLabel = ariaLabelProp ?? accessibilityLabel;
   const composedClassName = ['bloom-btn']
     .concat(isLink ? ['bloom-btn--link'] : [])
+    .concat(underlineMode === 'none' ? [] : [`bloom-btn--underline-${underlineMode}`])
     .concat(isGradient ? ['bloom-btn--gradient'] : [])
     .concat(className ? [className] : [])
     .join(' ');
@@ -346,6 +364,11 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
               alignItems: 'center',
               paddingLeft: labelPadding,
               paddingRight: labelPadding,
+              // `.bloom-btn` already clips; this is what makes the clip READ as
+              // a truncation. Only one line is expressible here.
+              ...(numberOfLines === 1
+                ? { display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis' }
+                : null),
               ...resolvedTextStyle,
             }}
           >
@@ -463,6 +486,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       className={composedClassName}
       style={{ ...containerStyle, ...resolvedStyle }}
       onClick={handleClick}
+      role={accessibilityRole}
       disabled={disabled && !loading}
       aria-disabled={isInteractionBlocked || undefined}
       aria-busy={loading || undefined}