@oxy.so/bloom 4.5.0 → 4.6.0

package/src/select/shared.tsx

@@ -2,11 +2,13 @@
  * The parts of `Select` that are the SAME on both platforms, plus the contexts
  * the two forks publish.
  *
- * `SelectGroup`, `SelectLabel` and the two scroll buttons live here rather than
- * being written twice because nothing in them is platform-specific: a group is a
- * `role="group"` box, a label is a line of muted text, and the scroll buttons ask
+ * `SelectGroup`, `SelectLabel`, the two scroll buttons, the option's own text,
+ * its selection mark and the rule between groups live here rather than being
+ * written twice, because nothing in them is platform-specific: a group is a
+ * `role="group"` box, a label is a line of muted text, the scroll buttons ask
  * one context whether there is anything to scroll — a question native answers
- * "no" by never publishing the context at all.
+ * "no" by never publishing the context at all — and the last three read only
+ * the palette and the per-ITEM context, which both forks provide.
  *
  * The barrels export them from here directly, so each part still has exactly one
  * owner and neither fork re-exports the other's work.
@@ -14,10 +16,17 @@
 import React, { createContext, useContext } from 'react';
 import Svg, { Path } from 'react-native-svg';
 
-import { ROW_ICON_SIZE, ROW_LABEL_CLASS } from '../floating/constants';
+import {
+  ROW_ICON_SIZE,
+  ROW_INDICATOR_END_CLASS,
+  ROW_LABEL_CLASS,
+  SELECT_ITEM_TEXT_CLASS,
+  SELECT_SEPARATOR_CLASS,
+} from '../floating/constants';
 import { useMenuPalette } from '../floating/menu-palette';
 import { menuType, menuTypeClass } from '../floating/menu-type';
 import { cx } from '../floating/shared';
+import { RiCheckLine as CheckIcon } from '../icons/remix/RiCheckLine';
 import { RiArrowDownSLine as ChevronDownIcon } from '../icons/remix/RiArrowDownSLine';
 import { RiArrowUpSLine as ChevronUpIcon } from '../icons/remix/RiArrowUpSLine';
 import {
@@ -28,6 +37,8 @@ import {
 import type {
   SelectGroupProps,
   SelectItemContextValue,
+  SelectItemIndicatorProps,
+  SelectItemTextProps,
   SelectLabelProps,
   SelectScrollButtonProps,
   SelectSize,
@@ -141,6 +152,7 @@ export function defaultItemValueExtractor(item: unknown): string {
 export const ItemContext = createContext<SelectItemContextValue>({
   selected: false,
   disabled: false,
+  size: 'md',
 });
 ItemContext.displayName = 'SelectItemContext';
 
@@ -261,3 +273,93 @@ export function SelectScrollDownButton({
   return <SelectScrollButton direction="down" className={className} style={style} />;
 }
 SelectScrollDownButton.displayName = 'SelectScrollDownButton';
+
+// ---------------------------------------------------------------------------
+// The option's own parts
+// ---------------------------------------------------------------------------
+
+/** The type ramp an option's label takes, per list size. */
+export const VALUE_TYPE = { md: 'body-medium', sm: 'body-2-medium' } as const;
+
+/**
+ * An option's label. The selected option is marked by the check and the row
+ * highlight, so its text stays at the same weight as every other row's.
+ *
+ * The colour is inline ONLY without a caller `className`: an inline colour
+ * outranks a class on native, so a `text-*` utility would be silently dead.
+ */
+export function SelectItemText({ children, className, style }: SelectItemTextProps) {
+  const { disabled, size } = useSelectItemContext();
+  const palette = useMenuPalette();
+  return (
+    <StyledText
+      numberOfLines={1}
+      className={cx(
+        SELECT_ITEM_TEXT_CLASS[size],
+        menuTypeClass(VALUE_TYPE[size], className),
+        className && 'text-foreground',
+        className,
+      )}
+      style={[
+        menuType(VALUE_TYPE[size], className),
+        className ? null : { color: disabled ? palette.textDisabled : palette.text },
+        style,
+      ]}>
+      {children}
+    </StyledText>
+  );
+}
+SelectItemText.displayName = 'SelectItemText';
+
+/**
+ * The selection mark: `absolute right-2 flex size-3.5 items-center
+ * justify-center` holding a `size-4` check.
+ *
+ * A select's tick sits on the RIGHT — the opposite side from a menu's — which
+ * is what leaves the option's own text starting flush at `pl-2` like every
+ * other line in the panel. Bloom once drew a `RadioIndicator` in a left gutter
+ * in the row's FLOW, so a select and a dropdown menu disagreed about both the
+ * mark and the edge it belongs on, and native and web disagreed with each
+ * other on top of that.
+ */
+export function SelectItemIndicator({ icon: IconComponent = CheckIcon }: SelectItemIndicatorProps) {
+  const palette = useMenuPalette();
+  const { selected } = useSelectItemContext();
+
+  if (!selected) return null;
+
+  return (
+    <StyledView className={ROW_INDICATOR_END_CLASS} pointerEvents="none">
+      <IconComponent
+        width={ROW_ICON_SIZE}
+        height={ROW_ICON_SIZE}
+        fill={palette.textSecondary}
+      />
+    </StyledView>
+  );
+}
+SelectItemIndicator.displayName = 'SelectItemIndicator';
+
+/**
+ * The rule between groups: `-mx-2 my-1.5 h-px bg-border-button-default`,
+ * bleeding back through the listbox's `p-2`. A FILLED 1px box, not a bottom
+ * border on a stretched one.
+ */
+export function SelectSeparator() {
+  const palette = useMenuPalette();
+  return (
+    <StyledView className={SELECT_SEPARATOR_CLASS} style={{ backgroundColor: palette.border }} />
+  );
+}
+SelectSeparator.displayName = 'SelectSeparator';
+
+/**
+ * The label a `SelectValue` shows for an item when the caller gave no
+ * `extractLabel`. Pure, and identical on both platforms.
+ */
+export function defaultExtractLabel(item: unknown): React.ReactNode {
+  if (item != null && typeof item === 'object' && 'label' in item) {
+    return (item as { label: React.ReactNode }).label;
+  }
+  return String(item);
+}

package/src/select/types.ts

@@ -174,4 +174,10 @@ export type SelectItemContextValue = {
   selected: boolean;
   /** Read by `SelectItemText`, which paints `text-disabled`. */
   disabled: boolean;
+  /**
+   * The list's size token, so `SelectItemText` can pick its type ramp without
+   * reading the forked `SelectContext` — which is what kept it, and the check
+   * and the rule beside it, written out twice.
+   */
+  size: SelectSize;
 };

package/src/sidebar/SidebarTeamMenu.tsx

@@ -22,7 +22,7 @@ import {
   Collapsible,
   IS_WEB,
   MenuDivider,
-  menuPanelStyle,
+  SIDEBAR_MENU_PANEL,
   SidebarAvatarView,
   useSidebarWebCss,
   useSidebarCollapseProgress,
@@ -246,7 +246,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
         align={narrow ? 'start' : 'end'}
         sideOffset={8}
         maxWidth={width - 32}
-        style={menuPanelStyle(palette)}
+        style={SIDEBAR_MENU_PANEL}
         testID={testID ? `${testID}-menu` : undefined}
       >
         <View style={{ gap: 7 }}>

package/src/sidebar/SidebarUserMenu.tsx

@@ -18,7 +18,7 @@ import {
   Collapsible,
   IS_WEB,
   MenuDivider,
-  menuPanelStyle,
+  SIDEBAR_MENU_PANEL,
   SidebarAvatarView,
   useSidebarWebCss,
   useSidebarCollapseProgress,
@@ -223,7 +223,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
         align="start"
         sideOffset={8}
         maxWidth={width - 32}
-        style={menuPanelStyle(palette)}
+        style={SIDEBAR_MENU_PANEL}
         testID={testID ? `${testID}-menu` : undefined}
       >
         <SidebarAccountMenuContent account={account} onSelect={() => setOpen(false)} />

package/src/sidebar/parts.tsx

@@ -235,15 +235,14 @@ export function ChevronUpDownSmall({ color, size = 16 }: { color: string; size?:
   );
 }
 
-/** The width both sidebar menus give their popover: `w-[265px]`. */
-export function menuPanelStyle(_palette?: SidebarPalette): ViewStyle {
-  // `w-[265px]` is the only thing these menus say differently from the popover
-  // panel itself — radius, border, surface, `p-2.5` and `shadow-dropdown` are
-  // `Popover`'s own defaults now (`popover/surface.ts`).
-  return MENU_PANEL;
-}
-
-const MENU_PANEL: ViewStyle = { width: 265 };
+/**
+ * The width both sidebar menus give their popover: `w-[265px]` — the only
+ * thing these menus say differently from the popover panel itself. Radius,
+ * border, surface, `p-2.5` and `shadow-dropdown` are `Popover`'s own defaults
+ * (`popover/surface.ts`), which is why this stopped being a function of the
+ * palette: it took one and ignored it, and both call sites kept passing one.
+ */
+export const SIDEBAR_MENU_PANEL: ViewStyle = { width: 265 };
 
 /** Full-bleed menu divider: `-mx-2.5 h-px bg-border-button-default`. */
 export function MenuDivider({ palette, spacing }: { palette: SidebarPalette; spacing: number }) {

package/src/surfaces/SurfaceHost.tsx

@@ -7,6 +7,7 @@ import React, {
 import { BackHandler, Platform } from 'react-native';
 
 import { useDialogControl } from '../dialog/context';
+import { hasOpenFloatingSurface } from '../floating/escape-stack';
 import type { DialogProps } from '../dialog/types';
 import {
   finalizeClose,
@@ -211,6 +212,11 @@ function useEscapeDismissesTop(): void {
     if (typeof window === 'undefined' || typeof document === 'undefined') return;
     const handler = (e: KeyboardEvent) => {
       if (e.key !== 'Escape') return;
+      // An open anchored surface (a Select's list, a menu, a popover) takes
+      // Escape first — `floating/escape-stack.ts` closes it and keeps the key
+      // from the dialog underneath. Dismissing the top dialog here would close
+      // the dialog UNDER the open list, and the list with it.
+      if (hasOpenFloatingSurface()) return;
       const stack = getSnapshot();
       const top = stack[stack.length - 1];
       if (!top) return;

package/src/surfaces/index.web.ts

@@ -1,11 +1,21 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/surfaces/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 import { Dialog } from '../dialog/index.web';
 import { createSurfaceHost } from './SurfaceHost';
 
 /**
- * Web variant of the surface stack barrel. Identical surface area to the native
- * `./index.ts` — it just binds the web-fork `Dialog` (`Dialog.web.tsx`, a
- * pure-DOM overlay) instead of the native `BottomSheet`-backed one. The store,
- * imperative API, hook, and types are shared, platform-agnostic modules.
+ * The shared, content-agnostic SURFACE STACK.
+ *
+ * `<SurfaceProvider>`/`<SurfaceHost>` render the coordinated stack; the
+ * imperative `surfaces` API (+ its named functions) present into it from
+ * anywhere; `useSurface()` gives a presented surface its own controls.
+ *
+ * `SurfaceHost`/`SurfaceProvider` are bound to the NATIVE `Dialog` here; the web
+ * fork (`./index.web`) binds the web `Dialog`. The store, imperative API, hook,
+ * and types are platform-agnostic and shared by both.
  */
 const { SurfaceHost, SurfaceProvider } = createSurfaceHost(Dialog);
 

package/src/tab-bar/index.web.ts

@@ -1,18 +1,21 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/tab-bar/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/index.ts
  * (MIT © 2026 David Mokos).
  *
- * WEB entry for `@oxy.so/bloom/tab-bar`, selected through the package's
- * `browser` export condition.
+ * DEFAULT entry for `@oxy.so/bloom/tab-bar`.
  *
- * The web modules are imported by their FULL `.web` name on purpose. Inside the
- * published `lib/` every file is plain `.js` (`surface.js` next to
- * `surface.web.js`), and no web bundler resolves a bare `./surface` to the
- * `.web` sibling by extension — only Metro does that. Writing the fork path
- * explicitly is the same thing the generated root barrel does
- * (`src/index.web.ts` → `from './dialog/index.web'`). `./glyph` has no web fork:
- * the neutral file already renders `item.icon`, which is the correct web
- * behaviour, and it is what any resolver lands on here.
+ * The platform pieces are imported by their BARE relative name so Metro's
+ * platform-extension resolution picks `surface.native.tsx` / `glyph.native.tsx`
+ * on iOS and Android, and every other resolver falls back to the neutral
+ * `surface.tsx` / `glyph.tsx`. Both neutral files, and everything else this
+ * module reaches, are free of native-only imports, so a consumer's `tsc` and a
+ * non-Metro bundler resolve this entry cleanly. Web bundlers select
+ * `index.web.tsx` instead, through the package's `browser` export condition.
  */
 import { ProgressiveBlur } from '../progressive-blur/index.web';
 import { createTabBar, createTabBarButton } from './TabBarBase';

package/src/tabs/Tabs.tsx

@@ -36,6 +36,7 @@ import { useInteractionState } from '../hooks/use-interaction-state';
 import { borderRadius } from '../styles/tokens';
 import { hairlineOn, surfaceFillOn, useSurfaceFill } from '../styles/surface-levels';
 import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import { handleRovingKeyDown, useRovingTabIndex } from '../hooks/roving-focus';
 import type { WebCssStyle } from '../styles/web-view-style';
 import type {
   TabsContentProps,
@@ -222,6 +223,12 @@ const IS_WEB = Platform.OS === 'web';
 
 const STYLE_ID = 'bloom-tabs-web-css';
 const TRIGGER = '[data-bloom-tabs-trigger]';
+/** The strip — the owner a trigger's keyboard walks within. */
+const STRIP = '[data-bloom-tabs-strip]';
+
+function isSelectedTab(element: HTMLElement): boolean {
+  return element.getAttribute('aria-selected') === 'true';
+}
 
 const BLOOM_TABS_CSS = interactiveWebCss({
   selector: TRIGGER,
@@ -280,6 +287,13 @@ interface TabsContextValue {
   reportTriggerLayout: (value: string, layout: TriggerLayout) => void;
   /** A trigger reports that the ROUTER considers it focused. */
   reportFocused: (value: string) => void;
+  /**
+   * What an arrow key does on web: `follow` selects the tab it lands on
+   * (automatic activation, the controlled path), `manual` only moves focus and
+   * leaves Enter/Space to select (the focus-driven path, where selecting is a
+   * navigation). See `TabsProps.value`.
+   */
+  activation: 'follow' | 'manual';
 }
 
 const TabsContext = createContext<TabsContextValue | null>(null);
@@ -340,6 +354,7 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
     hasSelection = true,
     variant = 'underline',
     fullWidth = false,
+    label,
     children,
     style,
     testID,
@@ -378,6 +393,7 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
   const remeasureScheduledRef = useRef(false);
   const indicatorPlacedRef = useRef(false);
   const scrollRef = useRef<ScrollView>(null);
+  const stripRef = useRef<View>(null);
   const viewportWidthRef = useRef(0);
   // The value the underline currently belongs to, from EITHER path. A ref
   // because the layout callback below must see the latest selection without
@@ -572,6 +588,21 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
   // is the bug.
   useEffect(scheduleRemeasure);
 
+  // Web: ONE tab stop for the strip — the selected tab, or the first enabled one
+  // when none is — as the ARIA tabs pattern requires (`hooks/roving-focus.ts`).
+  // The strip is whichever node carries `role="tablist"`: the scroll view's own
+  // node, or the full-width row.
+  useRovingTabIndex(
+    () =>
+      (fullWidth
+        ? (stripRef.current as unknown as Element | null)
+        : ((scrollRef.current as unknown as { getScrollableNode?: () => Element | null } | null)
+            ?.getScrollableNode?.() ?? null)),
+    TRIGGER,
+    isSelectedTab,
+    STRIP,
+  );
+
   useImperativeHandle(
     dragRef,
     (): TabsDragController => ({
@@ -640,6 +671,7 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
       registerTrigger,
       reportTriggerLayout,
       reportFocused,
+      activation: value === undefined ? 'manual' : 'follow',
     }),
     [
       value,
@@ -669,6 +701,13 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
     [isUnderline, paint.separator],
   );
 
+  // Web only: `role="tablist"` and its name. On native the strip stays a plain
+  // container — a named native View would become ONE accessibility element
+  // and swallow its tabs on iOS.
+  const stripA11y: Record<string, unknown> = IS_WEB
+    ? { role: 'tablist', 'aria-label': label, dataSet: { bloomTabsStrip: '' } }
+    : {};
+
   // The underline sits OVER the baseline: it is `bottom-0` of a wrapper whose
   // child carries the border. An absolute child is placed inside the border,
   // so it is pulled down by the baseline's own width — read from the caller's
@@ -731,7 +770,7 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
   return (
     <TabsContext.Provider value={contextValue}>
       {fullWidth ? (
-        <View style={[containerStyle, style]} testID={testID}>
+        <View ref={stripRef} {...stripA11y} style={[containerStyle, style]} testID={testID}>
           {isUnderline ? null : indicator}
           {children}
           {isUnderline ? indicator : null}
@@ -739,6 +778,7 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
       ) : (
         <ScrollView
           ref={scrollRef}
+          {...stripA11y}
           horizontal
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={[containerStyle, style]}
@@ -777,6 +817,7 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     registerTrigger,
     reportTriggerLayout,
     reportFocused,
+    activation,
   } = useTabsContext('TabsTrigger');
   // The two paths meet here: an explicit `isFocused` (router adapter) wins;
   // otherwise selection comes from the bar's controlled `value`.
@@ -827,6 +868,28 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     if (isFocused === undefined) onValueChange?.(value);
   }, [value, disabled, onValueChange, onPressProp, isFocused]);
 
+  // Web keyboard (ARIA tabs): Left/Right move between tabs with wrap-around,
+  // Home/End jump to the ends, disabled tabs are skipped, and Space selects —
+  // react-native-web presses a `tab` on Enter only. Enter stays with its own
+  // press handling.
+  const webKeyboard = useMemo(
+    () =>
+      IS_WEB
+        ? {
+            onKeyDown: (event: { key: string; currentTarget: unknown; preventDefault: () => void }) => {
+              handleRovingKeyDown(event, {
+                selector: TRIGGER,
+                owner: STRIP,
+                orientation: 'horizontal',
+                homeEnd: true,
+                activate: activation,
+              });
+            },
+          }
+        : {},
+    [activation],
+  );
+
   const labelColor = isSelected ? paint.selectedLabel : paint.idleLabel;
   const iconColor = isSelected ? paint.selectedIcon : paint.idleIcon;
 
@@ -878,6 +941,7 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     >
       <Pressable
         {...webDataSet({ bloomTabsTrigger: variant })}
+        {...webKeyboard}
         style={[
           triggerStyle,
           fullWidth && { flex: 1 },

package/src/tabs/types.ts

@@ -62,6 +62,12 @@ export interface TabsProps {
    * set of tabs (e.g. 2–3). Defaults to `false`.
    */
   fullWidth?: boolean;
+  /**
+   * The strip's accessible name — the `tablist`'s `aria-label` on web ("Account
+   * sections"). The tab labels name the TABS, not the set of them. Ignored on
+   * native, where naming the container would fold its tabs into one element.
+   */
+  label?: string;
   /** The tab items. Must be TabsTrigger components. */
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;

package/src/theme/color-scope/index.web.ts

@@ -1,2 +1,7 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/theme/color-scope/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 { BloomColorScope, useColorScopeStyle } from './ColorScope.web';
 export type { BloomColorScopeProps } from './ColorScope.web';

package/src/theme/seed-scope/index.web.ts

@@ -1,2 +1,7 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/theme/seed-scope/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 { BloomSeedScope } from './SeedScope.web';
 export type { BloomSeedScopeProps } from './SeedScope.web';

package/src/tooltip/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/tooltip/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 {
   Tooltip,
   TooltipTrigger,