@oxyhq/bloom 0.89.0 → 1.0.0

package/src/button/Button.tsx

@@ -15,8 +15,12 @@ import {
 import { styled } from 'react-native-css';
 
 import { useTheme } from '../theme/use-theme';
-import { usePressAnimation } from '../hooks/usePressAnimation';
-import { useInteractionState } from '../hooks/useInteractionState';
+import { animation, borderRadius } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { resolveGlassColors } from '../theme/glass-colors';
+import { GlassSurface } from '../glass/GlassSurface';
+import { usePressAnimation } from '../hooks/use-press-animation';
+import { useInteractionState } from '../hooks/use-interaction-state';
 import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -41,35 +45,90 @@ const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
   icon: 'medium',
 };
 
+// ---------------------------------------------------------------------------
+//  Geometry
+//
+//  `minHeight` is the SINGLE authority on the rendered height, on both
+//  platforms, and `paddingVertical` is chosen to keep it that way.
+//
+//  It was not. Measured in Chrome before this: the content box (padding + the
+//  label's line box + the border) OUTGREW `minHeight` on web at every size, so
+//  the height came from the padding there and from `minHeight` on native, and
+//  the two forks disagreed — a `medium` button measured 40.5px with a border and
+//  40px without, against a `minHeight` of 40 that never applied. Tailwind
+//  preflight sets `line-height: 1.5` on `html` and the web fork inherits it (the
+//  consumer CSS pipeline Bloom already requires), so a size's line box is
+//  `1.5 × fontSize`; the padding below leaves that plus a 1px border on each
+//  side inside `minHeight`:
+//
+//    small   2×4 + 21   + 2 = 31   ≤ 32
+//    medium  2×5 + 22.5 + 2 = 34.5 ≤ 36
+//    large   2×8 + 24   + 2 = 42   ≤ 44
+//
+//  Native's line box is the FONT's own (~1.2em), which is smaller still, so
+//  `minHeight` governs there with more room to spare.
+//
+//  Heights are therefore exactly 32 / 36 / 44 on both platforms and in every
+//  variant — 44 being the touch-target floor `SIZE_HIT_SLOP` below brings the
+//  other two up to.
+// ---------------------------------------------------------------------------
+
 const SIZE_CONFIG = {
   small: {
-    paddingVertical: 6,
+    paddingVertical: 4,
     paddingHorizontal: 12,
     fontSize: 14,
     minHeight: 32,
+    /**
+     * The `icon` variant's own padding — smaller than the text variants' as the
+     * circle tightens, so the glyph box (`minHeight − 2×iconPadding − 2` for the
+     * border: 14 / 22 / 30) is unchanged by the compaction. A fixed 8 would have
+     * squeezed `medium`'s box to 18px and clipped the 20px default icon against
+     * `overflow: 'hidden'`, with no error.
+     */
+    iconPadding: 8,
   },
   medium: {
-    paddingVertical: 8,
+    paddingVertical: 5,
     paddingHorizontal: 16,
     fontSize: 15,
-    minHeight: 40,
+    minHeight: 36,
+    iconPadding: 6,
   },
   large: {
-    paddingVertical: 12,
+    paddingVertical: 8,
     paddingHorizontal: 20,
     fontSize: 16,
-    minHeight: 48,
+    minHeight: 44,
+    iconPadding: 6,
   },
 } as const;
 
-const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
+/**
+ * Vertical slack that brings each size's native touch target up to 44dp — the
+ * floor `Checkbox` derives its own slack from, and the one Apple's HIG asks for
+ * — so a compact button is never both visually small and unreachable. Pinned as
+ * literals rather than derived from `minHeight`, because a value computed from
+ * the thing it is checked against is checked by nothing: `Button.test.tsx`
+ * asserts `minHeight + 2 × top >= 44` for every size, which only means something
+ * while the two are written independently.
+ *
+ * Horizontal slack is deliberately ZERO. A labelled button is already wider than
+ * the floor, and side slack is what makes two buttons in a row overlap and steal
+ * each other's presses. The square `icon` variant is the exception and keeps its
+ * own all-round slop.
+ *
+ * Native only: react-native-web drops `hitSlop`, and the web fork is a raw
+ * `<button>` that never sees it. On web the target IS the box — 32 / 36 / 44.
+ */
+const SIZE_HIT_SLOP = {
+  small: { top: 6, bottom: 6, left: 0, right: 0 },
+  medium: { top: 4, bottom: 4, left: 0, right: 0 },
+  large: { top: 0, bottom: 0, left: 0, right: 0 },
+} as const satisfies Record<NativeSize, NonNullable<ButtonProps['hitSlop']>>;
 
-// Fully-rounded (pill/capsule) corner radius. Large enough to stay a perfect
-// capsule at any button height. Shared by every text button variant so they all
-// read as pills; the icon variant keeps its own large radius to stay a circle.
-const PILL_RADIUS = 999;
+const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
 
-const PRESS_SCALE = 0.97;
 const SCALE_VARIANTS = new Set<string>(['primary', 'secondary', 'inverse']);
 
 // ---------------------------------------------------------------------------
@@ -95,7 +154,7 @@ const SCALE_VARIANTS = new Set<string>(['primary', 'secondary', 'inverse']);
 //  `styled()` comes from Bloom's own `react-native-css` dependency rather than
 //  passing `className` as a bare prop and hoping the consumer's NativeWind
 //  interop recognises a component Bloom built at module scope. Same reasoning,
-//  and the same silent failure if skipped, as `typography/styled-text.ts`.
+//  and the same silent failure if skipped, as `styles/styled-primitives.ts`.
 //
 //  Both wrappers are built ONCE at module scope so the element type is stable
 //  across renders — one built during render remounts the subtree every time.
@@ -124,7 +183,7 @@ type ButtonPressableProps = Pick<
   | 'onPressIn'
   | 'onPressOut'
   | 'testID'
-> & { style?: StyleProp<ViewStyle> };
+> & { style?: StyleProp<ViewStyle>; 'aria-expanded'?: boolean };
 
 /**
  * The same `Pressable` object, typed down to {@link ButtonPressableProps}.
@@ -154,9 +213,10 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   accessibilityLabel,
   accessibilityHint,
   hitSlop,
-  activeOpacity,
   testID,
   className,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup,
 }) => {
   const theme = useTheme();
   // The shadcn `size="icon"` shorthand also selects the icon variant unless an
@@ -175,12 +235,28 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     }
   }, [variantProp, sizeProp]);
   const isDestructive = variantProp === 'destructive';
+  /**
+   * The opaque brand fill this button is made of GLASS in, or `null` for the
+   * variants that are not.
+   *
+   * `primary` is the only native variant with a brand fill to replace —
+   * `destructive` normalises onto it above and is distinguished only by which
+   * token it reads, which is exactly the shape the glass material wants. The
+   * exclusions and the measurement behind them are in `Button.web.tsx`'s
+   * `GLASS_FILLS` and in `theme/glass-colors.ts`.
+   */
+  const glassFill: string | null =
+    variant === 'primary'
+      ? isDestructive
+        ? theme.colors.negative
+        : theme.colors.primary
+      : null;
   const size: NativeSize = SIZE_ALIAS[sizeProp];
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
   const isInteractionBlocked = disabled || loading;
   const { scaleAnim, onPressIn: onScalePressIn, onPressOut: onScalePressOut } =
     usePressAnimation(
-      hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined,
+      hasScaleFeedback && !isInteractionBlocked ? animation.pressScale : undefined,
     );
   // Non-scale variants (icon/ghost/text) convey press feedback via an opacity
   // dip. We drive it through component state + onPressIn/onPressOut rather than
@@ -213,7 +289,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       alignItems: 'center',
       justifyContent: 'center',
       flexDirection: 'row',
-      overflow: 'hidden',
+      // A glass button does NOT clip. `GlassSurface` clips its own layer stack
+      // to the same radius, so nothing needs clipping here — and `overflow:
+      // 'hidden'` sets `clipsToBounds` on the iOS layer, which would clip away
+      // the drop shadow that lifts the pane off the page. The other variants
+      // keep it; they have no shadow to lose.
+      overflow: glassFill === null ? 'hidden' : 'visible',
     };
 
     if (variant !== 'icon') {
@@ -223,21 +304,29 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     }
 
     switch (variant) {
-      case 'primary':
-        styles.backgroundColor = isDestructive
-          ? theme.colors.negative
-          : theme.colors.primary;
-        styles.borderRadius = PILL_RADIUS;
+      case 'primary': {
+        // The pane's own geometry: transparent, because the fill is a LAYER
+        // inside `GlassSurface`, plus the hairline and the drop shadow, which
+        // both have to sit on the node that owns the shape — a border traces the
+        // real edge only from here, and a shadow drawn on the clipping child is
+        // clipped away.
+        const glass = resolveGlassColors(glassFill ?? theme.colors.primary);
+        styles.backgroundColor = 'transparent';
+        styles.borderWidth = glass.hairlineWidth;
+        styles.borderColor = glass.hairline;
+        styles.borderRadius = borderRadius.full;
+        Object.assign(styles, bloomShadowStyle('glass'));
         break;
+      }
       case 'secondary':
         styles.backgroundColor = 'transparent';
         styles.borderWidth = 1;
         styles.borderColor = theme.colors.border;
-        styles.borderRadius = PILL_RADIUS;
+        styles.borderRadius = borderRadius.full;
         break;
       case 'inverse':
         styles.backgroundColor = '#FFFFFF';
-        styles.borderRadius = PILL_RADIUS;
+        styles.borderRadius = borderRadius.full;
         break;
       case 'icon':
         // Resolved tokens, not `className="bg-background border border-border"`.
@@ -250,29 +339,32 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         styles.backgroundColor = theme.colors.background;
         styles.borderWidth = 1;
         styles.borderColor = theme.colors.border;
-        styles.borderRadius = PILL_RADIUS;
-        styles.padding = 8;
+        styles.borderRadius = borderRadius.full;
+        styles.padding = sizeConfig.iconPadding;
         styles.width = sizeConfig.minHeight;
         styles.height = sizeConfig.minHeight;
         break;
       case 'ghost':
         styles.backgroundColor = 'transparent';
-        styles.borderRadius = PILL_RADIUS;
+        styles.borderRadius = borderRadius.full;
         break;
       case 'text':
         styles.backgroundColor = 'transparent';
-        styles.borderRadius = PILL_RADIUS;
+        styles.borderRadius = borderRadius.full;
         styles.paddingVertical = 4;
         styles.paddingHorizontal = 8;
         break;
     }
 
     return styles;
-  }, [variant, size, theme, isDestructive]);
+  }, [variant, size, theme, glassFill]);
 
   const resolvedTextColor = useMemo((): string => {
     switch (variant) {
       case 'primary':
+        // The fill's OWN on-colour, unchanged from the solid button. At 0.85 the
+        // pane IS the fill, so it carries the label the fill was calibrated for
+        // — see `resolveGlassColors` for why this flipped when the alpha did.
         return isDestructive
           ? theme.colors.negativeForeground
           : theme.colors.primaryForeground;
@@ -298,8 +390,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     };
   }, [size, resolvedTextColor]);
 
-  const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : undefined;
-  const resolvedActiveOpacity = activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8);
+  const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : SIZE_HIT_SLOP[size];
+  // How far a NON-scaling variant dips under the finger. Not a prop: how a
+  // control answers a press is the library's decision, not a per-call-site one,
+  // and a knob for it is how one button in one app ends up feeling different
+  // from every other. The scaling variants use `animation.pressScale`.
+  const resolvedActiveOpacity = variant === 'icon' ? 0.7 : 0.8;
 
   const content = (
     <>
@@ -340,8 +436,26 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       // `aria-busy` back into it. The disabled half travels on the `disabled`
       // prop above, which both platforms map.
       aria-busy={loading || undefined}
+      // Forwarded from an anchored family's `asChild` trigger, never invented
+      // here — see `ButtonProps['aria-expanded']`. A component that destructures
+      // a known prop list drops what it does not name, and these two are how a
+      // trigger says that it opens something and what.
+      aria-expanded={ariaExpanded}
+      {...(ariaHasPopup == null ? {} : { 'aria-haspopup': ariaHasPopup })}
       testID={testID}
     >
+      {/*
+        The pane, FIRST so every layer of it paints under the label. It fills
+        this node absolutely and clips itself to the same radius, so it takes no
+        part in the row layout above and needs no wrapper.
+      */}
+      {glassFill === null ? null : (
+        <GlassSurface
+          fill={glassFill}
+          radius={borderRadius.full}
+          testID={testID ? `${testID}-glass` : undefined}
+        />
+      )}
       {loading ? (
         <>
           <View

package/src/button/Button.web.tsx

@@ -1,7 +1,6 @@
 import React, {
   memo,
   useCallback,
-  useEffect,
   useId,
   useMemo,
   type CSSProperties,
@@ -10,10 +9,22 @@ import React, {
 } from 'react';
 
 import { useTheme } from '../theme/use-theme';
+import { animation, borderRadius } from '../styles/tokens';
+import { SHADOW_BOX } from '../design-tokens/shadows';
 import type { Theme } from '../theme/types';
+import {
+  GLASS_BLUR_FILTER,
+  GLASS_RIM_HIGHLIGHT,
+  GLASS_SHEEN_GRADIENT,
+  resolveGlassColors,
+} from '../theme/glass-colors';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
-import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
+import {
+  NOT_DISABLED,
+  interactiveWebCss,
+  useInteractiveWebCss,
+} from '../styles/interactive-web-css';
 import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -39,12 +50,20 @@ interface SizeConfig {
   paddingHorizontal: number;
   fontSize: number;
   minHeight: number;
+  /** The square `icon` variant's own padding — see `Button.tsx`'s SIZE_CONFIG. */
+  iconPadding: number;
 }
 
+/**
+ * Mirrors `Button.tsx`'s table exactly, including why the padding is what it is:
+ * `minHeight` is the single authority on the height, and these values keep the
+ * content box (padding + a `1.5 × fontSize` line box + a 1px border on each
+ * side) underneath it. Heights are 32 / 36 / 44 on both platforms.
+ */
 const SIZE_CONFIG: Record<NativeSize, SizeConfig> = {
-  small: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14, minHeight: 32 },
-  medium: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 15, minHeight: 40 },
-  large: { paddingVertical: 12, paddingHorizontal: 20, fontSize: 16, minHeight: 48 },
+  small: { paddingVertical: 4, paddingHorizontal: 12, fontSize: 14, minHeight: 32, iconPadding: 8 },
+  medium: { paddingVertical: 5, paddingHorizontal: 16, fontSize: 15, minHeight: 36, iconPadding: 6 },
+  large: { paddingVertical: 8, paddingHorizontal: 20, fontSize: 16, minHeight: 44, iconPadding: 6 },
 };
 
 const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
@@ -57,87 +76,98 @@ const SIZE_ALIAS: Record<ButtonSize, NativeSize> = {
   icon: 'medium',
 };
 
-// Fully-rounded (pill/capsule) corner radius — large enough to stay a perfect
-// capsule at any button height. Mirrors native `PILL_RADIUS` so web and native
-// produce the SAME fully-rounded shape. The icon variant reuses it too: a square
-// button with this radius renders as a perfect circle.
-const PILL_RADIUS = 999;
-const ICON_RADIUS = PILL_RADIUS;
-const PRESS_SCALE = 0.97;
-
 /** Variants that get a tactile press-scale (matches native `SCALE_VARIANTS`). */
 const SCALE_VARIANTS = new Set<ButtonVariant>(['primary', 'secondary', 'inverse', 'destructive']);
 
+/**
+ * The two variants painted as GLASS, and which theme fill each is tinted with.
+ *
+ * They are exactly the variants that carry a brand FILL today, which is what
+ * makes the treatment coherent: glass REPLACES a fill, it does not add one, so
+ * the button's colour does not move — only its opacity, and the chrome around
+ * it. The other seven are excluded for reasons that are not aesthetic:
+ *
+ *  - `secondary`/`outline`/`ghost`/`text`/`link` have no fill to replace. A blur
+ *    behind a transparent control shows nothing, and the hairline is only "the
+ *    edge of the tinted pane" where there IS a tint for it to be the edge of.
+ *  - `inverse` is the on-image CTA, and it is precisely the surface this material
+ *    cannot be. Over content Bloom does not own, half the preset matrix falls
+ *    below AA (worst 1.02) — and so does the reference itself, whose own label
+ *    measures 4.05 over a mid-tone photo. `inverse` being opaque is the answer to
+ *    that case, not an oversight.
+ *  - `icon` keeps the neutral chrome that distinguishes it from a bare glyph.
+ */
+const GLASS_FILLS: Record<string, (theme: Theme) => { fill: string; onFill: string }> = {
+  primary: (theme) => ({ fill: theme.colors.primary, onFill: theme.colors.primaryForeground }),
+  destructive: (theme) => ({ fill: theme.colors.negative, onFill: theme.colors.negativeForeground }),
+};
+
 // ---------------------------------------------------------------------------
 //  Per-state CSS injection
 //
-//  Inline styles cannot express `:hover` / `:focus-visible` / `:active` /
-//  `:disabled`, and the keyboard-focus ring MUST be a `:focus-visible` rule
-//  (not always-on) for correct mouse-vs-keyboard behavior. We inject one static
-//  stylesheet (keyed by id, once) that defines the interaction behavior for the
-//  base `bloom-btn` class; per-instance resolved colors stay inline.
+//  Shared recipe — see `styles/interactive-web-css.ts` for why the focus ring is
+//  `:focus-visible` and why injection goes through `adoptStyleSheet`. Per-instance
+//  resolved colours stay inline, reaching the static rules as custom properties
+//  (`--bloom-btn-ring`, `--bloom-btn-press-scale`).
 // ---------------------------------------------------------------------------
 
 const STYLE_ID = 'bloom-button-web-css';
 
-/**
- * The focus ring color is read from a CSS custom property the component sets
- * inline per-instance (`--bloom-btn-ring`), so the static rule can theme itself
- * from the resolved token without a per-instance stylesheet.
- */
-const BLOOM_BUTTON_CSS = `
-.bloom-btn {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  gap: 8px;
-  position: relative;
-  margin: 0;
-  border: none;
-  background: transparent;
-  font-family: var(--bloom-font-sans, inherit);
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
-}
-.bloom-btn:disabled,
-.bloom-btn[aria-disabled="true"] {
-  cursor: default;
-  opacity: 0.5;
-}
-.bloom-btn:not(:disabled):not([aria-disabled="true"]):hover {
-  opacity: 0.9;
-}
-.bloom-btn:not(:disabled):not([aria-disabled="true"]):active {
-  transform: scale(var(--bloom-btn-press-scale, 1));
-}
-.bloom-btn:focus-visible {
-  outline: 2px solid var(--bloom-btn-ring, currentColor);
-  outline-offset: 2px;
-}
-.bloom-btn--link:not(:disabled):not([aria-disabled="true"]):hover {
+const BLOOM_BUTTON_CSS = interactiveWebCss({
+  selector: '.bloom-btn',
+  varPrefix: 'bloom-btn',
+  base: `
+    flex-direction: row;
+    gap: 8px;
+    position: relative;
+    border: none;
+    background: transparent;
+    font-family: var(--bloom-font-sans, inherit);
+    text-decoration: none;
+  `,
+  transition:
+    'opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease',
+  hover: { declarations: 'opacity: 0.9;' },
+  outlineOffset: 2,
+  // Two variants undo the shared opacity dip, each for its own reason.
+  //
+  // `link` is the one button that IS text: it underlines instead of dimming.
+  //
+  // `glass` is translucent, so dimming it is the wrong axis twice over — it
+  // fades the LABEL along with the surface, and it makes a pane that is already
+  // showing the page through it show more of it, which reads as the button
+  // retreating rather than responding. The reference darkens its background
+  // instead (`hover:bg-[rgba(0,0,0,.1)]`), and that is what this does: one more
+  // flat layer on top of the sheen, in a direction the instance chooses, since
+  // black-over-dark-mode would be invisible. The whole `background-image` list
+  // is restated because CSS has no way to prepend to one, and the sheen has to
+  // stay under the new layer.
+  extraRules: `.bloom-btn--link${NOT_DISABLED}:hover {
   opacity: 1;
   text-decoration: underline;
 }
-`;
-
-function useButtonCss(): void {
-  useEffect(() => {
-    adoptStyleSheet(STYLE_ID, BLOOM_BUTTON_CSS);
-  }, []);
+.bloom-btn--glass {
+  backdrop-filter: ${GLASS_BLUR_FILTER};
+  -webkit-backdrop-filter: ${GLASS_BLUR_FILTER};
+  background-image: ${GLASS_SHEEN_GRADIENT};
 }
+.bloom-btn--glass${NOT_DISABLED}:hover {
+  opacity: 1;
+  background-image:
+    linear-gradient(var(--bloom-btn-glass-hover), var(--bloom-btn-glass-hover)),
+    ${GLASS_SHEEN_GRADIENT};
+}`,
+});
 
 // ---------------------------------------------------------------------------
 //  Variant styling — all colors come from the SAME Bloom theme tokens native
 //  uses, so primary/secondary/etc. look identical across platforms. The added
 //  web variants (`outline | link | destructive`) are styled from those tokens
 //  too (no new palette).
+//
+//  Every variant, text and icon alike, takes `borderRadius.full` — the same
+//  token native reads, so the fully-rounded shape cannot drift between the two
+//  forks, and a square icon button at that radius renders as a perfect circle.
 // ---------------------------------------------------------------------------
 
 interface VariantStyle {
@@ -149,6 +179,44 @@ interface VariantStyle {
   ringColor: string;
 }
 
+/**
+ * The glass container, from the reference's five declarations.
+ *
+ * The blur and the sheen are NOT here — they are constant, so they live in the
+ * `.bloom-btn--glass` rule where `:hover` can restate the `background-image`
+ * without an inline style outranking it. That split is the reference's own:
+ * `.glassy-effect` carries the blur and the gradient, the element's `style`
+ * attribute carries the per-instance fill, border and shadow.
+ */
+function glassContainer(fill: string, onFill: string, theme: Theme): VariantStyle {
+  const glass = resolveGlassColors(fill);
+  return {
+    container: {
+      backgroundColor: glass.fill,
+      borderWidth: glass.hairlineWidth,
+      borderStyle: 'solid',
+      borderColor: glass.hairline,
+      borderRadius: borderRadius.full,
+      // The lit rim first, then the drop — the reference's own order, and the
+      // only order that works: an inset painted after a drop is still an inset,
+      // but reading it in the same sequence the reference wrote it is what makes
+      // the two diffable.
+      boxShadow: `${GLASS_RIM_HIGHLIGHT}, ${SHADOW_BOX.glass}`,
+      // Consumed by `.bloom-btn--glass:hover`. Black over a light pane, white
+      // over a dark one — the reference only ever needed the first, being a
+      // light-page component.
+      ['--bloom-btn-glass-hover' as string]: theme.isDark
+        ? 'rgba(255, 255, 255, 0.10)'
+        : 'rgba(0, 0, 0, 0.10)',
+    },
+    // The fill's OWN on-colour. At 0.85 the pane is the fill, so it carries the
+    // label the fill was calibrated for — not the page's reading colour, which
+    // is what a 0.25 wash needed and what fails 1015 of 1260 rows here.
+    textColor: onFill,
+    ringColor: fill,
+  };
+}
+
 function resolveVariantStyle(
   variant: ButtonVariant,
   size: NativeSize,
@@ -157,22 +225,16 @@ function resolveVariantStyle(
   const c = theme.colors;
   const sizeConfig = SIZE_CONFIG[size];
 
+  const glass = GLASS_FILLS[variant];
+  if (glass) {
+    const { fill, onFill } = glass(theme);
+    return glassContainer(fill, onFill, theme);
+  }
+
   switch (variant) {
-    case 'primary':
-      return {
-        container: { backgroundColor: c.primary, borderRadius: PILL_RADIUS },
-        textColor: c.primaryForeground,
-        ringColor: c.primary,
-      };
-    case 'destructive':
-      return {
-        container: { backgroundColor: c.negative, borderRadius: PILL_RADIUS },
-        textColor: c.negativeForeground,
-        ringColor: c.negative,
-      };
     case 'inverse':
       return {
-        container: { backgroundColor: '#FFFFFF', borderRadius: PILL_RADIUS },
+        container: { backgroundColor: '#FFFFFF', borderRadius: borderRadius.full },
         textColor: '#000000',
         ringColor: c.primary,
       };
@@ -184,14 +246,14 @@ function resolveVariantStyle(
           borderWidth: 1,
           borderStyle: 'solid',
           borderColor: c.border,
-          borderRadius: PILL_RADIUS,
+          borderRadius: borderRadius.full,
         },
         textColor: c.text,
         ringColor: c.primary,
       };
     case 'ghost':
       return {
-        container: { backgroundColor: 'transparent', borderRadius: PILL_RADIUS },
+        container: { backgroundColor: 'transparent', borderRadius: borderRadius.full },
         textColor: c.primary,
         ringColor: c.primary,
       };
@@ -202,8 +264,8 @@ function resolveVariantStyle(
           borderWidth: 1,
           borderStyle: 'solid',
           borderColor: c.border,
-          borderRadius: ICON_RADIUS,
-          padding: 8,
+          borderRadius: borderRadius.full,
+          padding: sizeConfig.iconPadding,
           width: sizeConfig.minHeight,
           height: sizeConfig.minHeight,
         },
@@ -214,7 +276,7 @@ function resolveVariantStyle(
     case 'link':
     default:
       return {
-        container: { backgroundColor: 'transparent', borderRadius: PILL_RADIUS },
+        container: { backgroundColor: 'transparent', borderRadius: borderRadius.full },
         textColor: c.primary,
         ringColor: c.primary,
       };
@@ -239,6 +301,8 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   loadingColor,
   accessibilityLabel,
   'aria-label': ariaLabelProp,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup,
   accessibilityHint,
   testID,
   className,
@@ -252,7 +316,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   tabIndex,
   fullWidth = false,
 }) => {
-  useButtonCss();
+  useInteractiveWebCss(STYLE_ID, BLOOM_BUTTON_CSS);
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-btn-${reactId}`;
@@ -281,7 +345,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       // CSS custom props consumed by the static stylesheet.
       ['--bloom-btn-ring' as string]: variantStyle.ringColor,
       ['--bloom-btn-press-scale' as string]: SCALE_VARIANTS.has(resolvedVariant)
-        ? PRESS_SCALE
+        ? animation.pressScale
         : 1,
       ...variantStyle.container,
     };
@@ -317,6 +381,7 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   const ariaLabel = ariaLabelProp ?? accessibilityLabel;
   const composedClassName = ['bloom-btn']
     .concat(resolvedVariant === 'link' ? ['bloom-btn--link'] : [])
+    .concat(GLASS_FILLS[resolvedVariant] ? ['bloom-btn--glass'] : [])
     .concat(className ? [className] : [])
     .join(' ');
 
@@ -424,6 +489,10 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
       aria-disabled={isInteractionBlocked || undefined}
       aria-busy={loading || undefined}
       aria-label={ariaLabel}
+      // Forwarded from an anchored family's `asChild` trigger — see
+      // `ButtonProps['aria-expanded']`.
+      aria-expanded={ariaExpanded}
+      aria-haspopup={ariaHasPopup}
       title={title ?? accessibilityHint}
       autoFocus={autoFocus}
       tabIndex={tabIndex}