@oxy.so/bloom 4.5.0 → 4.6.0

package/src/menubar/Menubar.web.tsx

@@ -1,160 +1,34 @@
 /**
- * `Menubar` — WEB. The bar is the same row of triggers; each menu is an anchored
- * panel from `floating/FloatingPanel` rather than a sheet.
+ * `Menubar` — WEB: each menu is an anchored panel from `floating/FloatingPanel`
+ * rather than a sheet.
+ *
+ * The bar, the per-menu state and the trigger are identical on both platforms
+ * and live in `MenubarBase`. What forks is this file: the surface a menu opens
+ * into, and which sub-menu the rows get — a FLYOUT here, which needs a pointer.
  *
  * `align="start"` and the trigger's own width as `minWidth` are what make a
  * menubar menu hang under its trigger the way a desktop menu bar does, rather
  * than centring like a popover.
  */
-import React, { useCallback, useMemo, useRef } from 'react';
-import type { View as RNView } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import type { View } from 'react-native';
 
 import {
   MENUBAR_ALIGN_OFFSET,
-  MENUBAR_CLASS,
   MENUBAR_MENU_MIN_WIDTH_CLASS,
   MENUBAR_SIDE_OFFSET,
-  MENUBAR_TRIGGER_CLASS,
-  MENUBAR_TRIGGER_OPEN_CLASS,
-  MENUBAR_TRIGGER_TEXT_CLASS,
-  MENU_TRIGGER_POPUP,
 } from '../floating/constants';
 import { MenuSurfaceProvider, type MenuSurfaceContextValue } from '../floating/context';
 import { FloatingPanel } from '../floating/FloatingPanel';
+import { hostElement, useMenuPanelKeys } from '../floating/menu-keyboard';
 import { createMenuRows } from '../floating/menu-rows';
 import { createFlyoutMenuSub } from '../floating/menu-sub-flyout';
 import { cx } from '../floating/shared';
-import { TriggerSlot } from '../floating/TriggerSlot';
 import { useAnchorRect } from '../floating/use-anchor-rect';
-import { useControllableState } from '../hooks/use-controllable-state';
-import { StyledText, StyledView } from '../styles/styled-primitives';
-import { useMenuPalette } from '../floating/menu-palette';
-import { menuType } from '../floating/menu-type';
-import {
-  MenubarMenuProvider,
-  MenubarProvider,
-  useMenubar,
-  useMenubarMenu,
-} from './context';
-import type {
-  MenubarContentProps,
-  MenubarMenuProps,
-  MenubarProps,
-  MenubarTriggerProps,
-} from './types';
-
-export function Menubar({
-  children,
-  value,
-  defaultValue,
-  onValueChange,
-  label = 'Menu bar',
-  className,
-  style,
-  testID,
-}: MenubarProps) {
-  const [openValue, setValue] = useControllableState<string | undefined>({
-    value,
-    defaultValue,
-    onChange: onValueChange,
-  });
-  const context = useMemo(() => ({ value: openValue, setValue }), [openValue, setValue]);
-  const palette = useMenuPalette();
-  const barPaint = {
-    backgroundColor: palette.trigger.background,
-    borderColor: palette.trigger.border,
-    boxShadow: palette.trigger.shadow,
-  };
-
-  return (
-    <MenubarProvider value={context}>
-      {/* `shadow-s` — the bar is a raised control, not an overlay, so it takes
-          the lighter of Bloom's two elevation roles. */}
-      <StyledView
-        role="menubar"
-        aria-label={label}
-        testID={testID}
-        className={cx(MENUBAR_CLASS, className)}
-        style={[barPaint, style]}>
-        {children}
-      </StyledView>
-    </MenubarProvider>
-  );
-}
-
-export function MenubarMenu({ children, value }: MenubarMenuProps) {
-  const bar = useMenubar();
-  const anchorRef = useRef<RNView | null>(null);
-  const { setValue } = bar;
-
-  const context = useMemo(
-    () => ({
-      open: bar.value === value,
-      setOpen: (next: boolean) => setValue(next ? value : undefined),
-      anchorRef,
-    }),
-    [bar.value, value, setValue],
-  );
+import { useMenubarMenu } from './context';
+import type { MenubarContentProps } from './types';
 
-  return <MenubarMenuProvider value={context}>{children}</MenubarMenuProvider>;
-}
-
-export function MenubarTrigger({
-  children,
-  asChild,
-  disabled,
-  label,
-  className,
-  style,
-  testID,
-}: MenubarTriggerProps) {
-  const menu = useMenubarMenu();
-  const palette = useMenuPalette();
-
-  // `flex items-center rounded-md px-2 py-1.5`, plus `bg-accent` while its menu
-  // is open, and `text-sm font-medium` for the label. A menubar trigger is a
-  // BUTTON with chrome of its own, not a bare hit box — leaving it unstyled is
-  // why a Bloom menubar read as loose text against a pill-per-menu bar.
-  // `asChild` still hands the whole thing to the caller.
-  const trigger = (
-    <StyledView
-      className={cx(
-        MENUBAR_TRIGGER_CLASS,
-        menu.open && MENUBAR_TRIGGER_OPEN_CLASS,
-        className,
-      )}
-      style={{ backgroundColor: menu.open ? palette.rowHighlight : 'transparent' }}>
-      {typeof children === 'string' ? (
-        <StyledText
-          className={MENUBAR_TRIGGER_TEXT_CLASS}
-          // `text-body-medium text-text-primary`, in Inter.
-          style={[menuType('body-medium'), { color: palette.text }]}>
-          {children}
-        </StyledText>
-      ) : (
-        children
-      )}
-    </StyledView>
-  );
-
-  return (
-    <TriggerSlot
-      asChild={asChild}
-      anchorRef={menu.anchorRef}
-      style={style}
-      testID={testID}
-      handle={{
-        onPress: () => menu.setOpen(!menu.open),
-        disabled,
-        accessibilityLabel: label,
-        accessibilityRole: 'button',
-        'aria-haspopup': MENU_TRIGGER_POPUP,
-        'aria-expanded': menu.open,
-      }}>
-      {asChild ? children : trigger}
-    </TriggerSlot>
-  );
-}
+export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({
   children,
@@ -180,9 +54,12 @@ export function MenubarContent({
     () => ({ close, presentation: 'dropdown' }),
     [close],
   );
+  const [panel, setPanel] = useState<View | null>(null);
+  useMenuPanelKeys(hostElement(panel), { open: menu.open, onTab: close, intent: menu.focusIntent });
 
   return (
     <FloatingPanel
+      panelRef={setPanel}
       open={menu.open}
       anchor={anchor}
       role="menu"

package/src/menubar/MenubarBase.tsx

@@ -0,0 +1,170 @@
+/**
+ * The three `Menubar` parts that are the SAME on both platforms.
+ *
+ * A menubar forks in exactly one place — what a menu opens INTO. Native
+ * presents the bottom sheet every Bloom overlay resolves to; web anchors a
+ * `floating/FloatingPanel` under the trigger. The bar itself, the per-menu
+ * state and the trigger are identical, so they live here and each fork
+ * re-exports them rather than keeping a second copy that has to be edited
+ * twice.
+ *
+ * NEUTRAL by construction: everything this module reaches (`floating/*`,
+ * `hooks/*`, `styles/*`, `./context`, `./types`) is fork-free. That is not a
+ * detail — `web-fork-reachability.test.ts` only scans `.web` files, so a
+ * neutral module naming a forked target resolves to NATIVE in every bundler
+ * that is not Metro and no gate would report it.
+ */
+import React, { useMemo, useRef } from 'react';
+import type { View as RNView } from 'react-native';
+
+import {
+  MENUBAR_CLASS,
+  MENUBAR_TRIGGER_CLASS,
+  MENUBAR_TRIGGER_OPEN_CLASS,
+  MENUBAR_TRIGGER_TEXT_CLASS,
+  MENU_TRIGGER_POPUP,
+} from '../floating/constants';
+import { useMenuPalette } from '../floating/menu-palette';
+import { menuType } from '../floating/menu-type';
+import { cx } from '../floating/shared';
+import { TriggerSlot } from '../floating/TriggerSlot';
+import { useMenuFocusIntent, useMenuTriggerKeys } from '../floating/menu-keyboard';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { StyledText, StyledView } from '../styles/styled-primitives';
+import {
+  MenubarMenuProvider,
+  MenubarProvider,
+  useMenubar,
+  useMenubarMenu,
+} from './context';
+import type { MenubarMenuProps, MenubarProps, MenubarTriggerProps } from './types';
+
+export function Menubar({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  label = 'Menu bar',
+  className,
+  style,
+  testID,
+}: MenubarProps) {
+  const [openValue, setValue] = useControllableState<string | undefined>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const context = useMemo(() => ({ value: openValue, setValue }), [openValue, setValue]);
+  const palette = useMenuPalette();
+  const barPaint = {
+    backgroundColor: palette.trigger.background,
+    borderColor: palette.trigger.border,
+    boxShadow: palette.trigger.shadow,
+  };
+
+  return (
+    <MenubarProvider value={context}>
+      {/* `shadow-s` — the bar is a raised control, not an overlay, so it takes
+          the lighter of Bloom's two elevation roles. It reaches WEB through the
+          class and NATIVE through `barPaint`, because `design-tokens/shadows`
+          is platform-forked and its contract is that a multi-layer
+          `box-shadow` is not something to rely on NativeWind translating to an
+          RN elevation. On web the two agree, so whichever wins paints the
+          same thing. */}
+      <StyledView
+        role="menubar"
+        aria-label={label}
+        testID={testID}
+        className={cx(MENUBAR_CLASS, className)}
+        style={[barPaint, style]}>
+        {children}
+      </StyledView>
+    </MenubarProvider>
+  );
+}
+
+export function MenubarMenu({ children, value }: MenubarMenuProps) {
+  const bar = useMenubar();
+  const anchorRef = useRef<RNView | null>(null);
+  const { setValue } = bar;
+  const focusIntent = useMenuFocusIntent();
+
+  const context = useMemo(
+    () => ({
+      open: bar.value === value,
+      setOpen: (next: boolean) => setValue(next ? value : undefined),
+      anchorRef,
+      focusIntent,
+    }),
+    [bar.value, value, setValue, focusIntent],
+  );
+
+  return <MenubarMenuProvider value={context}>{children}</MenubarMenuProvider>;
+}
+
+export function MenubarTrigger({
+  children,
+  asChild,
+  disabled,
+  label,
+  className,
+  style,
+  testID,
+}: MenubarTriggerProps) {
+  const menu = useMenubarMenu();
+  const palette = useMenuPalette();
+  // Web: Enter/Space/ArrowDown open into the first row, ArrowUp into the last,
+  // and focus returns here on close (`floating/menu-keyboard.ts`). Inert on
+  // native, where there is no DOM node to listen on.
+  useMenuTriggerKeys(menu.anchorRef, {
+    open: menu.open,
+    setOpen: menu.setOpen,
+    disabled,
+    intent: menu.focusIntent,
+  });
+
+  // `flex items-center rounded-md px-2 py-1.5`, plus `bg-accent` while its menu
+  // is open, and `text-sm font-medium` for the label. A menubar trigger is a
+  // BUTTON with chrome of its own, not a bare hit box — leaving it unstyled is
+  // why a Bloom menubar read as loose text against a pill-per-menu bar. The
+  // same chrome on both platforms, so the bar reads identically. `asChild`
+  // still hands the whole thing to the caller.
+  const trigger = (
+    <StyledView
+      className={cx(
+        MENUBAR_TRIGGER_CLASS,
+        menu.open && MENUBAR_TRIGGER_OPEN_CLASS,
+        className,
+      )}
+      style={{ backgroundColor: menu.open ? palette.rowHighlight : 'transparent' }}>
+      {typeof children === 'string' ? (
+        <StyledText
+          className={MENUBAR_TRIGGER_TEXT_CLASS}
+          // `text-body-medium text-text-primary`, in Inter.
+          style={[menuType('body-medium'), { color: palette.text }]}>
+          {children}
+        </StyledText>
+      ) : (
+        children
+      )}
+    </StyledView>
+  );
+
+  return (
+    <TriggerSlot
+      asChild={asChild}
+      anchorRef={menu.anchorRef}
+      style={style}
+      testID={testID}
+      handle={{
+        onPress: () => menu.setOpen(!menu.open),
+        disabled,
+        accessibilityLabel: label,
+        accessibilityRole: 'button',
+        'aria-haspopup': MENU_TRIGGER_POPUP,
+        'aria-expanded': menu.open,
+      }}>
+      {asChild ? children : trigger}
+    </TriggerSlot>
+  );
+}

package/src/menubar/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/menubar/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export {
   Menubar,
   MenubarMenu,

package/src/motion/index.web.ts

@@ -1,8 +1,8 @@
-/**
- * Web variant of the `motion` barrel. Only the three layout-animation presets
- * fork — see `motion.web.ts` for why. `ScreenTransition` is universal: it already
- * branches on `Platform.OS` internally.
- */
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/motion/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';

package/src/popover/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/popover/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { Popover, PopoverTrigger, PopoverContent } from './Popover.web';
 export {
   PopoverHeader,

package/src/popover/parts.tsx

@@ -6,25 +6,41 @@
  * header/footer `px-2` is measured against — 18px from the panel edge on every
  * side ("panel p-2.5 + row px-2").
  *
- *   PopoverHeader       flex items-center gap-2 px-2 pt-1         (dashboard team menu)
+ *   PopoverHeader       flex items-center gap-2 px-2 pt-1         (sidebar team menu)
  *   PopoverTitle        text-body-medium text-text-primary        (secondary: group label)
  *   PopoverDescription  text-body-regular text-text-secondary
- *   PopoverFooter       flex items-center gap-3 px-2 pb-2         (user menu actions)
+ *   PopoverFooter       flex items-center gap-3 px-2 pb-2         (sidebar user menu actions)
  *   PopoverSeparator    -mx-2.5 my-2.5 h-px bg-border-button-default
  *
  * Popovers have no close button and no arrow, so neither is a part.
  *
- * Colours are resolved inline from `menu-palette.ts`; a text colour default is
- * applied only when the caller passes no `className`, so a `text-*` utility is
- * never outranked (AGENTS.md, "Style and `className`").
+ * ── HOW A CALLER'S CLASS STILL WINS ─────────────────────────────────────────
+ *
+ * Every default here is INLINE, because the colours are ramp stops that exist
+ * as no CSS variable and the geometry has to agree with them. But an inline
+ * style beats ANY class on web, so a naive inline default silently outranks
+ * whatever the caller passes: `<PopoverSeparator className="bg-red-500" />`
+ * painted the palette colour, and `<PopoverHeader className="px-4" />` kept
+ * its 8px.
+ *
+ * So each part omits exactly the properties the caller's utilities NAME, using
+ * the same token scan the panel uses (`classChromeOverrides` in `surface.ts`).
+ * The parts previously used an all-or-nothing guard instead — drop the colour
+ * default if ANY `className` is present — which failed in the other direction:
+ * `<PopoverTitle className="mt-1">` lost its colour entirely.
+ *
+ * The trade-off is real and the panel already made it: on a web build whose
+ * Tailwind/NativeWind pipeline is not wired (`AGENTS.md`, "Consumer web CSS
+ * pipeline"), a named property falls back to NOTHING rather than to the
+ * default. A caller who names it is asking to own it.
  */
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
 
 import { useMenuPalette } from '../floating/menu-palette';
 import { StyledView } from '../styles/styled-primitives';
 import { Text } from '../typography';
-import { POPOVER_PADDING } from './surface';
+import { classChromeOverrides, POPOVER_PADDING, type PopoverChromeKey } from './surface';
 import type {
   PopoverDescriptionProps,
   PopoverFooterProps,
@@ -33,9 +49,47 @@ import type {
   PopoverTitleProps,
 } from './types';
 
+/**
+ * `base` minus the properties the caller's `className` claims.
+ *
+ * It walks BASE, not the map: a property with no chrome key is one no utility
+ * can name, so it is always kept. Walking the map instead would silently drop
+ * whatever was added to a part's stylesheet without being classified — the
+ * failure would be a missing default, with nothing to report it.
+ */
+function kept(base: ViewStyle, owned: ReadonlySet<PopoverChromeKey>): ViewStyle {
+  if (owned.size === 0) return base;
+  const out: ViewStyle = {};
+  for (const [property, value] of Object.entries(base)) {
+    const key = PROPERTY_KEY[property];
+    if (key === undefined || !owned.has(key)) {
+      Object.assign(out, { [property]: value });
+    }
+  }
+  return out;
+}
+
+/** Which chrome key each style property belongs to. */
+const PROPERTY_KEY: Record<string, PopoverChromeKey | undefined> = {
+  flexDirection: 'flexDirection',
+  alignItems: 'alignItems',
+  gap: 'gap',
+  paddingLeft: 'paddingLeft',
+  paddingRight: 'paddingRight',
+  paddingTop: 'paddingTop',
+  paddingBottom: 'paddingBottom',
+  marginLeft: 'marginLeft',
+  marginRight: 'marginRight',
+  marginTop: 'marginTop',
+  marginBottom: 'marginBottom',
+  height: 'height',
+  backgroundColor: 'background',
+};
+
 export function PopoverHeader({ leading, children, className, style, testID }: PopoverHeaderProps) {
+  const owned = classChromeOverrides(className);
   return (
-    <StyledView className={className} style={[styles.header, style]} testID={testID}>
+    <StyledView className={className} style={[kept(styles.header, owned), style]} testID={testID}>
       {leading ? <View style={styles.leading}>{leading}</View> : null}
       <View style={styles.headerText}>{children}</View>
     </StyledView>
@@ -57,7 +111,7 @@ export function PopoverTitle({
       variant="body-medium"
       numberOfLines={numberOfLines}
       className={className}
-      style={[className ? null : { color }, style]}
+      style={[classChromeOverrides(className).has('color') ? null : { color }, style]}
       testID={testID}>
       {children}
     </Text>
@@ -77,7 +131,12 @@ export function PopoverDescription({
       variant="body-regular"
       numberOfLines={numberOfLines}
       className={className}
-      style={[className ? null : { color: palette.textSecondary }, style]}
+      style={[
+        classChromeOverrides(className).has('color')
+          ? null
+          : { color: palette.textSecondary },
+        style,
+      ]}
       testID={testID}>
       {children}
     </Text>
@@ -85,8 +144,9 @@ export function PopoverDescription({
 }
 
 export function PopoverFooter({ children, className, style, testID }: PopoverFooterProps) {
+  const owned = classChromeOverrides(className);
   return (
-    <StyledView className={className} style={[styles.footer, style]} testID={testID}>
+    <StyledView className={className} style={[kept(styles.footer, owned), style]} testID={testID}>
       {children}
     </StyledView>
   );
@@ -94,12 +154,16 @@ export function PopoverFooter({ children, className, style, testID }: PopoverFoo
 
 export function PopoverSeparator({ className, style, testID }: PopoverSeparatorProps) {
   const palette = useMenuPalette();
+  const owned = classChromeOverrides(className);
   return (
     <StyledView
       // Decorative: the sections it divides are announced on their own.
       aria-hidden
       className={className}
-      style={[styles.separator, { backgroundColor: palette.border }, style]}
+      style={[
+        kept({ ...styles.separator, backgroundColor: palette.border }, owned),
+        style,
+      ]}
       testID={testID}
     />
   );

package/src/popover/surface.ts

@@ -1,9 +1,8 @@
 /**
  * The popover PANEL — Bloom's one floating surface, resolved to inline style.
  *
- * Every floating panel (`dropdown/menu-styles.ts`'s `MENU_POPOVER_SURFACE`, the
- * dashboard team/user menus, the calendar inbox menu, the ai-chat menus) spells
- * the same class string:
+ * Every floating panel in the fleet — the sidebar team and user menus, the
+ * calendar inbox menu, the ai-chat menus — spells the same class string:
  *
  *   w-[266px] max-w-[calc(100vw-32px)] overflow-y-auto
  *   rounded-2xl border border-border-button-default
@@ -32,7 +31,7 @@
 import type { MenuPalette } from '../floating/menu-palette';
 import type { WebCssStyle } from '../styles/web-view-style';
 
-/** `w-[266px]` — `MENU_POPOVER_WIDTH`. */
+/** `w-[266px]` — the one panel width every floating surface shares. */
 export const POPOVER_WIDTH = 266;
 /** `rounded-2xl`. */
 export const POPOVER_RADIUS = 16;
@@ -46,36 +45,91 @@ export const POPOVER_SIDE_OFFSET = 8;
 export type PopoverChromeKey =
   | 'width'
   | 'maxWidth'
-  | 'padding'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
   | 'radius'
   | 'borderWidth'
   | 'borderColor'
   | 'background'
   | 'shadow'
-  | 'overflow';
+  | 'overflow'
+  // The rest are the PANEL PARTS' chrome (`parts.tsx`). The panel itself sets
+  // no default for any of them, so `resolvePopoverSurfaceStyle` ignores them.
+  | 'color'
+  | 'gap'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'height'
+  | 'flexDirection'
+  | 'alignItems';
 
 const BORDER_WIDTH = /^border(-[xytrblse])?(-\d+(\.\d+)?|-\[[^\]]+px\])?$/;
 
+/**
+ * The sides a spacing utility's axis letter claims. `p-4` has no letter and
+ * claims all four; `px`/`py` are the pairs; `pt`/`pb`/`pl`/`pr` are single
+ * sides. `ps`/`pe` are the LOGICAL start and end — one side each, not the
+ * pair — which react-native-web resolves to left and right in an LTR
+ * document. Treating them as the pair would drop a default the caller never
+ * asked to own.
+ */
+function sidesOf(letter: string | undefined, property: 'padding' | 'margin'): PopoverChromeKey[] {
+  const sides =
+    letter === undefined ? ['Top', 'Bottom', 'Left', 'Right']
+    : letter === 'x' ? ['Left', 'Right']
+    : letter === 'y' ? ['Top', 'Bottom']
+    : letter === 't' ? ['Top']
+    : letter === 'b' ? ['Bottom']
+    : letter === 'l' || letter === 's' ? ['Left']
+    : letter === 'r' || letter === 'e' ? ['Right']
+    : [];
+  return sides.map((side) => `${property}${side}` as PopoverChromeKey);
+}
+
 /**
  * Which chrome properties a caller's utility classes set. Variants (`dark:`,
  * `md:`, `hover:`), the important `!` and a negative `-` are stripped first, so
  * `md:!p-0` counts as padding.
+ *
+ * Padding and margin are claimed PER SIDE, because the utilities are: `px-4`
+ * names left and right and says nothing about the top, so a part that also
+ * sets `paddingTop` must keep it. Treating them as one key dropped a header's
+ * `pt-1` for a caller who only asked for wider sides.
+ *
+ * `text-*` is counted as a COLOUR, including the size steps (`text-sm`). That
+ * is deliberately imprecise: telling `text-sm` from `text-red-500` means
+ * knowing the consumer's palette, and the alternative the parts used before
+ * this — drop the colour default whenever ANY `className` is passed — is
+ * strictly worse, since it loses the colour to an unrelated `mt-1`.
  */
 export function classChromeOverrides(className?: string): ReadonlySet<PopoverChromeKey> {
   const keys = new Set<PopoverChromeKey>();
   if (!className) return keys;
+  let spacing: RegExpExecArray | null;
   for (const raw of className.split(/\s+/)) {
     if (!raw) continue;
     const token = raw.slice(raw.lastIndexOf(':') + 1).replace(/^!/, '').replace(/^-/, '');
     if (/^(w|size)-/.test(token)) keys.add('width');
     else if (/^max-w-/.test(token)) keys.add('maxWidth');
-    else if (/^p[xytrblse]?-/.test(token)) keys.add('padding');
+    else if ((spacing = /^([pm])([xytrbles])?-/.exec(token))) {
+      const property = spacing[1] === 'p' ? 'padding' : 'margin';
+      for (const key of sidesOf(spacing[2], property)) keys.add(key);
+    }
     else if (/^rounded(-|$)/.test(token)) keys.add('radius');
     else if (BORDER_WIDTH.test(token)) keys.add('borderWidth');
     else if (/^border-/.test(token)) keys.add('borderColor');
     else if (/^bg-/.test(token)) keys.add('background');
     else if (/^shadow(-|$)/.test(token)) keys.add('shadow');
     else if (/^overflow-/.test(token)) keys.add('overflow');
+    else if (/^text-/.test(token)) keys.add('color');
+    else if (/^gap(-|$)/.test(token)) keys.add('gap');
+    else if (/^h-/.test(token)) keys.add('height');
+    else if (/^flex-(row|col)/.test(token)) keys.add('flexDirection');
+    else if (/^items-/.test(token)) keys.add('alignItems');
   }
   return keys;
 }
@@ -96,14 +150,13 @@ export function resolvePopoverSurfaceStyle(
   if (!overridden.has('maxWidth') && viewportWidth !== undefined) {
     style.maxWidth = Math.max(0, viewportWidth - POPOVER_VIEWPORT_INSET);
   }
-  if (!overridden.has('padding')) {
-    // Longhands: a caller's `style` override of one side must not lose to a
-    // shorthand react-native-web ranks above it (AGENTS.md, "Style").
-    style.paddingTop = POPOVER_PADDING;
-    style.paddingBottom = POPOVER_PADDING;
-    style.paddingLeft = POPOVER_PADDING;
-    style.paddingRight = POPOVER_PADDING;
-  }
+  // Longhands, one side at a time: a caller's `style` override of one side must
+  // not lose to a shorthand react-native-web ranks above it (AGENTS.md,
+  // "Style"), and a caller who writes `px-4` is claiming the sides, not the top.
+  if (!overridden.has('paddingTop')) style.paddingTop = POPOVER_PADDING;
+  if (!overridden.has('paddingBottom')) style.paddingBottom = POPOVER_PADDING;
+  if (!overridden.has('paddingLeft')) style.paddingLeft = POPOVER_PADDING;
+  if (!overridden.has('paddingRight')) style.paddingRight = POPOVER_PADDING;
   if (!overridden.has('radius')) style.borderRadius = POPOVER_RADIUS;
   if (!overridden.has('borderWidth')) style.borderWidth = 1;
   if (!overridden.has('borderColor')) style.borderColor = palette.border;