@oxyhq/bloom 0.6.1 → 0.6.3

package/lib/typescript/commonjs/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAY,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpG,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAcrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CA0DA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,2CAsE9E;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CA2FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}

package/lib/typescript/module/dialog/Dialog.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EACV,YAAY,EAGZ,WAAW,EACZ,MAAM,SAAS,CAAC;AAQjB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,kDAwGb;AA8LD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}
+{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EACV,YAAY,EAGZ,WAAW,EACZ,MAAM,SAAS,CAAC;AAQjB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,kDA4Gb;AA8LD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}

package/lib/typescript/module/portal/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAyBzE,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4BAOnE;AAKD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,2CAE9D;AAED,eAAO,MAAM,MAAM,oCAEjB,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAoD,MAAM,OAAO,CAAC;AA6CzE,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4BAOnE;AAKD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,2CAE9D;AAED,eAAO,MAAM,MAAM,oCAEjB,CAAC"}

package/lib/typescript/module/prompt-input/PromptInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/PromptInput.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,MAAM,EACN,WAAW,EACX,WAAW,EAAE,qBAAqB,EAClC,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,wBAAgC,EAChC,UAAU,EACV,YAAY,EACZ,MAAM,GACP,EAAE,gBAAgB,2CA4NlB;yBAlPe,WAAW"}
+{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/PromptInput.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,MAAM,EACN,WAAW,EACX,WAAW,EAAE,qBAAqB,EAClC,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,wBAAgC,EAChC,UAAU,EACV,YAAY,EACZ,MAAM,GACP,EAAE,gBAAgB,2CA+NlB;yBArPe,WAAW"}

package/lib/typescript/module/segmented-control/index.d.ts

@@ -1,5 +1,4 @@
-import { type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
-import { type ButtonProps } from '../button';
+import { type PressableProps, type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
 /**
  * Segmented control component.
  *
@@ -29,10 +28,16 @@ export declare function Root<T extends string>({ label, type, size, value, onCha
     style?: StyleProp<ViewStyle>;
     accessibilityHint?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Item({ value, style, children, onPress: onPressProp, ...props }: {
+export declare function Item({ value, style, children, onPress: onPressProp, accessibilityLabel, accessibilityHint, testID, disabled, }: {
     value: string;
     children: React.ReactNode;
-} & Omit<ButtonProps, 'children'>): import("react/jsx-runtime").JSX.Element;
+    style?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    testID?: string;
+    disabled?: PressableProps['disabled'];
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ItemText({ style, children, ...props }: {
     children: React.ReactNode;
     style?: StyleProp<TextStyle>;

package/lib/typescript/module/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAY,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpG,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAcrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CA0DA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,2CAsE9E;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CA2FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/context-menu/index.web.tsx

@@ -328,6 +328,8 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     zIndex: 50,
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto',
   },
   dropdown: {
     position: 'fixed' as 'absolute',
@@ -341,6 +343,8 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 4 },
     minWidth: 180,
     maxWidth: 280,
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto',
   },
   item: {
     flexDirection: 'row',

package/src/dialog/Dialog.web.tsx

@@ -134,6 +134,9 @@ export function Dialog({
           <RemoveScrollBar />
           <Pressable
             onPress={() => close()}
+            // `pointerEvents: 'auto'` opts back in from the Portal root's
+            // `pointer-events: none`, which is set so the idle portal
+            // doesn't intercept clicks on the underlying app.
             style={{
               position: 'fixed' as 'absolute',
               top: 0,
@@ -144,6 +147,7 @@ export function Dialog({
               alignItems: 'center',
               justifyContent: 'center',
               paddingHorizontal: 20,
+              pointerEvents: 'auto',
             }}
           >
             <DialogBackdrop isClosing={isClosing} />

package/src/menu/index.web.tsx

@@ -296,6 +296,8 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     zIndex: 50,
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto',
   },
   dropdown: {
     borderRadius: 8,

package/src/portal/index.web.tsx

@@ -17,7 +17,20 @@ import React, { Fragment, memo, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 /**
- * Render children into a stable container at the end of `document.body`.
+ * Render children into a stable container appended to `document.body`.
+ *
+ * The container is positioned `fixed` and stretched edge-to-edge so it
+ * fills the viewport. This makes it a valid containing block for any
+ * portaled descendant that uses `position: absolute` (e.g. RN's
+ * `StyleSheet.absoluteFillObject`) — without it those children anchor to a
+ * zero-area block at the end of `<body>` and render off-screen.
+ *
+ * `pointer-events: none` lets clicks fall through to the underlying app
+ * while the portal is idle. Interactive descendants (backdrops, modal
+ * panels, dropdowns, etc.) must opt back in with `pointer-events: auto`
+ * (or RN's `pointerEvents="auto"` / `"box-only"`). Bloom's own overlay
+ * components do this on the elements they actually want to receive
+ * events.
  *
  * Lazy-creates the container on first mount so SSR (where `document` does
  * not exist) doesn't crash — the portal simply renders nothing on the
@@ -29,9 +42,16 @@ function getPortalRoot(): HTMLElement | null {
   if (!root) {
     root = document.createElement('div');
     root.id = 'bloom-portal-root';
-    // Sits above the document flow; individual portaled components can use
+    root.style.position = 'fixed';
+    root.style.top = '0';
+    root.style.left = '0';
+    root.style.right = '0';
+    root.style.bottom = '0';
+    // Idle portal must not intercept clicks on the underlying app.
+    // Children opt back in to receive events via their own pointer-events.
+    root.style.pointerEvents = 'none';
+    // Above the document flow; individual portaled components can use
     // their own z-index for stacking among themselves.
-    root.style.position = 'relative';
     root.style.zIndex = '999999';
     document.body.appendChild(root);
   }

package/src/prompt-input/PromptInput.tsx

@@ -235,6 +235,9 @@ export function PromptInput({
               {
                 zIndex: 9998,
                 backgroundColor: theme.colors.background,
+                // Opt back in from the Portal root's `pointer-events: none`
+                // (web only — harmless on native).
+                pointerEvents: 'auto',
               },
             ]}
           >

package/src/segmented-control/index.tsx

@@ -7,12 +7,20 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Platform, type StyleProp, Text, type TextStyle, View, type ViewStyle } from 'react-native';
+import {
+  Platform,
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../theme/use-theme';
 import { atoms as a, platform } from '../styles';
-import { Button, type ButtonProps } from '../button';
 
 const InternalContext = createContext<{
   type: 'tabs' | 'radio';
@@ -98,17 +106,27 @@ export function Root<T extends string>({
     };
   }, [value, selectedPosition, setSelectedPosition, onChange, type, size]);
 
+  // Height of the wrapping pill matches the active item height (item
+  // `minHeight` + 4px outer `p_xs` padding on both sides). Locking the
+  // outer View to this exact height keeps the control as a tight inline
+  // pill on every platform — without it, a parent column flex context
+  // (the default on a `<View>`) would let the Root stretch vertically
+  // and the items inside would inherit that stretched height, blowing
+  // the control up into a giant block on native.
+  const itemMinHeight = size === 'large' ? 40 : 32;
+  const pillHeight = itemMinHeight + 8;
+
   return (
     <View
       accessibilityLabel={label}
       accessibilityHint={accessibilityHint ?? ''}
       style={[
         a.w_full,
-        a.flex_1,
         a.relative,
         a.flex_row,
+        a.align_center,
         { backgroundColor: theme.colors.contrast50 },
-        { borderRadius: 14 },
+        { borderRadius: 14, height: pillHeight },
         a.p_xs,
         style,
       ]}
@@ -132,8 +150,20 @@ export function Item({
   style,
   children,
   onPress: onPressProp,
-  ...props
-}: { value: string; children: React.ReactNode } & Omit<ButtonProps, 'children'>) {
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  disabled,
+}: {
+  value: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+  disabled?: PressableProps['disabled'];
+}) {
   const [position, setPosition] = useState<{ x: number; width: number } | null>(
     null,
   );
@@ -171,9 +201,23 @@ export function Item({
     onPressProp?.();
   }, [ctx, value, position, onPressProp]);
 
+  // We render the segment as a flat `Pressable` (not Bloom's `Button`)
+  // for two reasons:
+  //   1. Layout: we need the touch target to participate directly in the
+  //      Root's row flex layout so `flex: 1` distributes the items
+  //      evenly on every platform. Bloom Button wraps its Pressable in
+  //      an Animated.View that doesn't forward layout-affecting styles,
+  //      which would collapse the segment to its natural text width.
+  //   2. Semantics: the Root carries `role="tablist"`/`"radiogroup"` and
+  //      each item carries `role="tab"`/`"radio"`. Bloom Button always
+  //      adds `accessibilityRole="button"` — that overrides the correct
+  //      a11y role for tablist children.
+  const itemRole = ctx.type === 'tabs' ? 'tab' : 'radio';
+  const itemMinHeight = ctx.size === 'large' ? 40 : 32;
+
   return (
     <View
-      style={[a.flex_1, a.flex_row]}
+      style={[a.flex_1, a.flex_row, a.align_stretch]}
       onLayout={evt => {
         const measuredPosition = {
           x: evt.nativeEvent.layout.x,
@@ -184,23 +228,30 @@ export function Item({
         }
         setPosition(measuredPosition);
       }}>
-      <Button
-        {...props}
+      <Pressable
         onPress={onPress}
-        accessibilityLabel={props.accessibilityLabel}
-        accessibilityHint={props.accessibilityHint}
-        style={[
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ selected: active, disabled: !!disabled }}
+        role={itemRole}
+        disabled={disabled}
+        testID={testID}
+        style={({ pressed }) => [
           a.flex_1,
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
           a.bg_transparent,
           a.px_sm,
           a.py_xs,
-          { minHeight: ctx.size === 'large' ? 40 : 32, borderRadius: 10 },
+          { minHeight: itemMinHeight, borderRadius: 10 },
+          pressed && !disabled && { opacity: 0.7 },
           style,
         ]}>
         <InternalItemContext.Provider value={{ active }}>
           {children}
         </InternalItemContext.Provider>
-      </Button>
+      </Pressable>
     </View>
   );
 }

package/src/select/index.web.tsx

@@ -338,6 +338,8 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     zIndex: 50,
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto',
   },
   dropdown: {
     position: 'absolute',
@@ -350,6 +352,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 12,
     shadowOffset: { width: 0, height: 4 },
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto',
   },
   item: {
     position: 'relative',