@oxyhq/bloom 0.87.1 → 0.89.0

package/src/dialog/Dialog.web.tsx

@@ -25,6 +25,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
@@ -106,12 +107,7 @@ const DIALOG_STYLE_ID = 'bloom-dialog-web-css';
 
 function useDialogCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(DIALOG_STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = DIALOG_STYLE_ID;
-    style.textContent = BLOOM_DIALOG_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(DIALOG_STYLE_ID, BLOOM_DIALOG_CSS);
   }, []);
 }
 

package/src/fab/Fab.web.tsx

@@ -10,6 +10,7 @@ import React, {
 
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
 
@@ -103,12 +104,7 @@ const BLOOM_FAB_CSS = `
 
 function useFabCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FAB_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FAB_CSS);
   }, []);
 }
 

package/src/fonts/apply-font-faces.web.ts

@@ -1,3 +1,4 @@
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import {
   blomusModernusRegular,
   blomusModernusBold,
@@ -14,9 +15,11 @@ const STYLE_ID = 'bloom-fonts';
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — native loads its fonts through `useFonts(FONT_ASSETS)`, so the file
  * split keeps the web font payload out of the native bundle entirely.
- * Idempotent: safe to call multiple times; subsequent calls early-return
- * after the `<style id="bloom-fonts">` tag has been mounted. SSR-safe via
- * the `typeof document === 'undefined'` guard.
+ * Idempotent: safe to call multiple times; `adoptStyleSheet` keys the sheet by
+ * id, so repeat calls re-parse nothing. SSR-safe via its `typeof document`
+ * guard. `BloomThemeProvider` calls this on every mount by default, which is
+ * why it also has to survive a page whose CSP forbids inline styles — see
+ * `styles/adopt-style-sheet.ts`.
  *
  * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
  * the consuming bundler emits them as separate, cacheable assets. See that
@@ -24,12 +27,9 @@ const STYLE_ID = 'bloom-fonts';
  * provide (Metro needs `woff2` in `assetExts`).
  */
 export function applyFontFaces(): void {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(STYLE_ID)) return;
-
-  const style = document.createElement('style');
-  style.id = STYLE_ID;
-  style.textContent = `
+  adoptStyleSheet(
+    STYLE_ID,
+    `
     @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusRegular}") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
     @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusBold}") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
     @font-face { font-family: 'Inter'; src: url("${interVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@@ -39,6 +39,6 @@ export function applyFontFaces(): void {
       --bloom-font-sans: ${fontFamilies.sans};
       --bloom-font-mono: ${fontFamilies.mono};
     }
-  `;
-  document.head.appendChild(style);
+  `,
+  );
 }

package/src/frosted-icon-button/FrostedIconButton.tsx

@@ -110,7 +110,12 @@ const FrostedIconButtonComponent: React.FC<FrostedIconButtonProps> = ({
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        // `aria-pressed` matches what the `.web.tsx` fork emits, so the same
+        // button announces the same state whichever fork a bundler picks.
+        // Both spellings are needed: react-native-web ignores
+        // `accessibilityState`, React Native has no `aria-pressed`.
         accessibilityState={{ disabled, selected: active }}
+        aria-pressed={active}
         testID={testID}
       >
         {/* Clip layer: blur (frosted only) + translucent/solid tint, rounded. */}

package/src/frosted-icon-button/FrostedIconButton.web.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 
 import { useTheme } from '../theme/use-theme';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import {
   applyIconColor,
@@ -74,12 +75,7 @@ const BLOOM_FROSTED_ICON_BUTTON_CSS = `
 
 function useFrostedIconButtonCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FROSTED_ICON_BUTTON_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FROSTED_ICON_BUTTON_CSS);
   }, []);
 }
 

package/src/input-group/InputGroup.tsx

@@ -126,7 +126,10 @@ const InputGroupComponent = function InputGroup({
     <InputGroupContext.Provider value={ctx}>
       <View
         testID={testID}
-        accessibilityState={disabled ? { disabled: true } : undefined}
+        // `aria-disabled`, not `accessibilityState`: this is a `View`, so
+        // react-native-web has no `disabled` prop to derive the attribute from
+        // and never reads `accessibilityState`. React Native folds it back.
+        aria-disabled={disabled || undefined}
         // Capture focus bubbling from a nested input so the whole chrome
         // reflects focus — RN-web bubbles focus/blur, native does not but a
         // nested TextInput's own focus ring is sufficient there.

package/src/item/Item.tsx

@@ -28,7 +28,11 @@ const ItemComponent = function Item({
   onLongPress,
   disabled = false,
   destructive = false,
-  selected = false,
+  // Deliberately NOT defaulted: a row that never mentions selection is not a
+  // toggle, and defaulting to `false` made every plain navigation row announce
+  // itself as an unpressed toggle button on web. Absence and "off" are
+  // different statements to assistive tech; both remain falsy for styling.
+  selected,
   active = false,
   density = 'comfortable',
   style,
@@ -109,6 +113,19 @@ const ItemComponent = function Item({
 
   if (onPress || onLongPress) {
     const resolvedRole = accessibilityRole ?? 'button';
+    // Web reads only `aria-*` — react-native-web never consults
+    // `accessibilityState` — and ARIA scopes these states by role: `option`
+    // carries a selected state, a `button` toggle carries a pressed one, and
+    // `menuitem`/`listitem` carry neither, so those emit nothing. React Native
+    // keeps reading `accessibilityState` below, which is why both are set.
+    const selectedAria =
+      selected == null
+        ? null
+        : role === 'option'
+          ? { 'aria-selected': selected }
+          : role == null
+            ? { 'aria-pressed': selected }
+            : null;
     const handlePress = disabled || !onPress ? undefined : onPress;
     const handleLongPress = disabled || !onLongPress ? undefined : onLongPress;
     return (
@@ -126,6 +143,7 @@ const ItemComponent = function Item({
         }
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled, selected }}
+        {...selectedAria}
         style={[
           disabled && styles.disabled,
           pressed && !disabled && styles.pressed,
@@ -143,7 +161,11 @@ const ItemComponent = function Item({
         accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
       }
       accessibilityHint={accessibilityHint}
-      accessibilityState={disabled ? { disabled: true } : undefined}
+      // A `View` has no `disabled` prop for react-native-web to derive
+      // `aria-disabled` from, and it ignores `accessibilityState`, so without
+      // this the non-pressable row announced nothing. React Native folds
+      // `aria-disabled` back into `accessibilityState`.
+      aria-disabled={disabled || undefined}
       style={disabled ? styles.disabled : undefined}>
       {content}
     </View>

package/src/loading/SpinnerIcon.web.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 
 interface SpinnerIconProps {
@@ -72,12 +73,7 @@ const SPIN_STYLE: WebCssStyle = {
 
 function useKeyframes(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    const style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = BLOOM_SPINNER_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(KEYFRAMES_ID, BLOOM_SPINNER_CSS);
   }, []);
 }
 

package/src/segmented-control/index.tsx

@@ -240,7 +240,14 @@ export function SegmentedControlItem({
         onPressOut={disabled ? undefined : onPressOut}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityState={{ selected: active, disabled: !!disabled }}
+        // The active state has to be spelled as an `aria-*` prop, because
+        // react-native-web never reads `accessibilityState` (React Native folds
+        // these back into it, so native is unaffected) — and WHICH prop depends
+        // on the role: ARIA gives `tab` a selected state and `radio` a checked
+        // one, so a single spelling would be invalid for one of the two modes.
+        {...(itemRole === 'tab'
+          ? { 'aria-selected': active }
+          : { 'aria-checked': active })}
         role={itemRole}
         disabled={disabled}
         testID={testID}

package/src/select/index.tsx

@@ -289,7 +289,10 @@ export function SelectItem({ children, value, label, style }: SelectItemProps) {
     <Pressable
       accessibilityRole="radio"
       accessibilityLabel={label}
-      accessibilityState={{ checked: isSelected }}
+      // ARIA gives `role="radio"` a checked state, not a selected one. Spelled
+      // as `aria-checked` because react-native-web never reads
+      // `accessibilityState`; React Native folds this back into it.
+      aria-checked={isSelected}
       onPress={handlePress}
       onFocus={onFocus}
       onBlur={onBlur}

package/src/select/index.web.tsx

@@ -324,7 +324,10 @@ export function SelectItem({ ref, value, label, children, style }: SelectItemPro
       // dropped it, leaving every option a `role="radio"` with no accessible
       // name for a screen reader to announce.
       accessibilityLabel={label}
-      accessibilityState={{ checked: isSelected }}
+      // `aria-checked` is the state ARIA defines for `role="radio"`, and the
+      // only one react-native-web emits — it never reads `accessibilityState`,
+      // so this fork's options announced no selection at all.
+      aria-checked={isSelected}
       onPress={() => {
         ctx.onValueChange?.(value);
         ctx.close();

package/src/settings-list/SettingsList.tsx

@@ -128,7 +128,10 @@ export const SettingsListItem = memo<SettingsListItemProps>(function SettingsLis
       accessibilityRole={role}
       accessibilityLabel={label}
       accessibilityHint={accessibilityHint}
-      accessibilityState={disabled ? { disabled: true } : undefined}
+      // See the pressable branch above, which gets `aria-disabled` for free
+      // from its `disabled` prop. A `View` has no such prop, and
+      // react-native-web never reads `accessibilityState`.
+      aria-disabled={disabled || undefined}
     >
       {content}
     </View>

package/src/slider/Slider.tsx

@@ -198,8 +198,16 @@ const SliderComponent = function Slider({
       testID={testID}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel}
-      accessibilityValue={{ min, max, now: value }}
-      accessibilityState={{ disabled }}
+      // react-native-web reads the FLAT `aria-value*` props; it has no handling
+      // for the `accessibilityValue` object at all, so this rendered a
+      // `role="slider"` carrying no value whatsoever — a screen reader could
+      // say the control existed but never what it was set to. React Native
+      // folds these three back into `accessibilityValue`, and `aria-disabled`
+      // into `accessibilityState`, so native keeps what it had.
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={disabled || undefined}
       style={[
         styles.root,
         { height: Math.max(thumbSize, trackHeight) + 8 },

package/src/styles/adopt-style-sheet.ts

@@ -0,0 +1,131 @@
+// ---------------------------------------------------------------------------
+//  adoptStyleSheet — the ONE way a Bloom web fork puts CSS on the page.
+//
+//  Bloom's `.web.tsx` forks self-inject the CSS they need (`@keyframes`,
+//  pseudo-classes, `::-webkit-scrollbar`) rather than asking consumers to paste
+//  it into a global stylesheet — see AGENTS.md, "Web Fork CSS & Style
+//  Conventions". The mechanism used to be a `<style>` element carrying the CSS
+//  as text content. That is exactly the shape a Content-Security-Policy of
+//  `style-src 'self'` blocks: the check runs when a style element's text
+//  content is parsed into a sheet, so the rules are dropped, the component
+//  renders with none of its CSS, and NOTHING is thrown — the fork's own
+//  "already injected?" guard even finds its element in the DOM and reports
+//  success. Astro's `astro://` WebUI pages ship that CSP, and every other Oxy
+//  surface behind one would fail the same silent way.
+//
+//  A constructed stylesheet is not subject to `style-src` at all — CSSOM is
+//  outside CSP's inline hooks — so `new CSSStyleSheet()` + `replaceSync()` +
+//  `document.adoptedStyleSheets` applies the same CSS under a strict policy
+//  with no nonce, no hash, and no consumer-side wiring. (This is also why
+//  react-native-web is unaffected: it appends an EMPTY style element and fills
+//  it through `sheet.insertRule`, never through text content.)
+//
+//  The `<style>` path survives only as the fallback for a document without
+//  constructed-stylesheet support — jsdom 26 has the `CSSStyleSheet`
+//  constructor but neither `replaceSync` nor `adoptedStyleSheets`, so the whole
+//  jest suite takes it, and so do browsers older than Chrome 73 / Safari 16.4 /
+//  Firefox 101. There it behaves exactly as Bloom did before, CSP included:
+//  the fallback cannot make anything worse, and cannot make a strict policy
+//  work either.
+// ---------------------------------------------------------------------------
+
+interface AdoptedSheet {
+  sheet: CSSStyleSheet;
+  /** The CSS currently in `sheet`, so a re-render re-parses nothing. */
+  css: string;
+}
+
+/**
+ * The sheets Bloom has constructed, per document. Keyed by document rather than
+ * held in one flat map because a constructed sheet belongs to the realm that
+ * created it — adopting one into a different document throws — and Bloom runs
+ * in more than one when a consumer opens a popout window.
+ */
+const adoptedByDocument = new WeakMap<Document, Map<string, AdoptedSheet>>();
+
+function sheetsFor(doc: Document): Map<string, AdoptedSheet> {
+  const existing = adoptedByDocument.get(doc);
+  if (existing) return existing;
+  const created = new Map<string, AdoptedSheet>();
+  adoptedByDocument.set(doc, created);
+  return created;
+}
+
+/**
+ * Whether `doc` can take a constructed stylesheet. Evaluated per call, not once
+ * at module scope: a test installs the API on its window after this module has
+ * already been imported, and a module-scope constant would freeze the answer
+ * from before that.
+ */
+function supportsAdoption(doc: Document): boolean {
+  return (
+    'adoptedStyleSheets' in doc &&
+    typeof CSSStyleSheet === 'function' &&
+    typeof CSSStyleSheet.prototype.replaceSync === 'function'
+  );
+}
+
+/**
+ * Make `css` apply to the document, under the identity `id`.
+ *
+ * Idempotent in both directions: calling it again with the same CSS re-parses
+ * nothing and adopts nothing twice (the usual case — every mount of every
+ * instance of a component calls it), and calling it with DIFFERENT CSS under
+ * the same id replaces the previous content in place (the theme-dependent case,
+ * `BottomSheetBase`'s scrollbar colours).
+ *
+ * No-op off the web, so a platform-neutral component can call it unguarded.
+ */
+export function adoptStyleSheet(id: string, css: string): void {
+  if (typeof document === 'undefined') return;
+
+  if (supportsAdoption(document)) {
+    const sheets = sheetsFor(document);
+    let entry = sheets.get(id);
+    if (!entry) {
+      entry = { sheet: new CSSStyleSheet(), css: '' };
+      sheets.set(id, entry);
+    }
+    if (entry.css !== css) {
+      entry.sheet.replaceSync(css);
+      entry.css = css;
+    }
+    // Re-adoption after a consumer (or a test) has reset the list. `includes`
+    // is what makes the common repeat call free.
+    if (!document.adoptedStyleSheets.includes(entry.sheet)) {
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, entry.sheet];
+    }
+    return;
+  }
+
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLStyleElement) {
+    if (existing.textContent !== css) existing.textContent = css;
+    return;
+  }
+  const element = document.createElement('style');
+  element.id = id;
+  element.textContent = css;
+  document.head.appendChild(element);
+}
+
+/**
+ * Detach the stylesheet `id`, whichever path installed it.
+ *
+ * Only for CSS whose lifetime is a component's — `BottomSheetBase` removes its
+ * scrollbar rules when the last sheet unmounts. The static per-component CSS is
+ * never dropped: it is the same bytes for the life of the page, and removing it
+ * on unmount would make a re-mount re-parse it.
+ */
+export function dropStyleSheet(id: string): void {
+  if (typeof document === 'undefined') return;
+
+  const entry = adoptedByDocument.get(document)?.get(id);
+  if (entry) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== entry.sheet,
+    );
+    adoptedByDocument.get(document)?.delete(id);
+  }
+  document.getElementById(id)?.remove();
+}

package/src/switch/Switch.tsx

@@ -82,7 +82,13 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
         ref={ref}
         role="switch"
         aria-checked={value}
-        accessibilityState={{ checked: value, disabled }}
+        // The disabled state has to travel on this prop, not on `aria-disabled`:
+        // react-native-web's `Pressable` appends its own `aria-disabled` from
+        // `disabled` AFTER spreading the caller's props, so a caller-supplied
+        // one is overwritten. `handlePress` already no-ops when disabled, so
+        // this only adds what was missing — the announced state, and skipping
+        // the control in the tab order.
+        disabled={disabled}
         onPress={handlePress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}

package/src/tab-bar/TabBarBase.tsx

@@ -569,7 +569,10 @@ function TabBarButtonBody({
       // Accessibility defaults come BEFORE the spread so an explicit prop — or
       // one injected by a router trigger — still wins.
       accessibilityRole="tab"
-      accessibilityState={{ selected: focused }}
+      // `aria-selected` is the state ARIA defines for `role="tab"`, and the one
+      // spelling both platforms read: react-native-web ignores
+      // `accessibilityState`, React Native folds `aria-selected` into it.
+      aria-selected={focused}
       accessibilityLabel={item.label}
       {...pressableProps}
       onPress={(event) => {