@oxy.so/bloom 3.0.1 → 3.1.0

package/lib/typescript/module/styles/styled-primitives.d.ts

@@ -59,6 +59,22 @@ export interface WebAriaProps {
      * currently needs; the union is the ARIA one, narrowed to what is spellable.
      */
     'aria-haspopup'?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /**
+     * The id list of the elements that DESCRIBE this control — a field's hint or
+     * its error message (`field/context.ts`).
+     *
+     * Here for the same reason as `aria-haspopup`: React Native types no such prop
+     * (there is no `accessibilityState` entry for it to fold into) while
+     * react-native-web forwards it, so web gets the association and native is
+     * unaffected. A control that needs the description READ on native carries it
+     * in its accessible name instead.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Whether the control's current value is invalid. Same platform split as
+     * `aria-describedby`.
+     */
+    'aria-invalid'?: boolean;
 }
 /**
  * `ref` is on the PUBLISHED type and deliberately not on the one handed to

package/lib/typescript/module/styles/styled-primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled-primitives.d.ts","sourceRoot":"","sources":["../../../../src/styles/styled-primitives.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EACL,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB;;;;;;GAMG;AACH,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnE;AAED;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GACpD,YAAY,GAAG;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,CAEpE,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,CAEpE,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,UAAU,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAA;CAAE,CAEvE,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAG/D,CAAC"}
+{"version":3,"file":"styled-primitives.d.ts","sourceRoot":"","sources":["../../../../src/styles/styled-primitives.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EACL,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB;;;;;;GAMG;AACH,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClE;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GACpD,YAAY,GAAG;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,CAEpE,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,CAEpE,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,UAAU,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAA;CAAE,CAEvE,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAG/D,CAAC"}

package/lib/typescript/module/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkI3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA8I3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}

package/lib/typescript/module/switch/types.d.ts

@@ -25,8 +25,15 @@ export interface SwitchProps {
      * are not the same rule.)
      *
      * Omitting it warns once in development; see `use-accessible-name-warning`.
+     * Inside a `Field` the field's label supplies the name, so a switch in a
+     * labelled field needs nothing here and does not warn.
      */
     accessibilityLabel?: string;
+    /**
+     * The switch's id. Inside a `Field` the field supplies one, so the label's
+     * `htmlFor` points at the control on web.
+     */
+    nativeID?: string;
     testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/switch/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB;;;;;;;;;;;;;;;OAeG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/module/text-field/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/text-field/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAQxB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAmBL,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;GAQG;AACH,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAiD5F,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EAAE,aAAqB,EAChC,QAAQ,EAAE,YAAoB,EAC9B,IAAI,EAAE,QAAmB,EACzB,MAA0B,EAC1B,YAAY,EACZ,KAAK,GACN,EAAE,cAAc,2CA6EhB;AAsFD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8LrB;AAmKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,KAAK,GACN,EAAE,mBAAmB,2CA6BrB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,2CAkBpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAoB,EAAE,EAAE,kBAAkB,2CA4BrF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAyBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAqCA"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/text-field/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAQxB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAmBL,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAoCjB;;;;;;;;GAQG;AACH,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAiD5F,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EAAE,aAAqB,EAChC,QAAQ,EAAE,YAAoB,EAC9B,IAAI,EAAE,QAAQ,EACd,MAA0B,EAC1B,YAAY,EACZ,KAAK,GACN,EAAE,cAAc,2CAuFhB;AAsFD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8LrB;AAmKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,KAAK,GACN,EAAE,mBAAmB,2CA6BrB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,2CAkBpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAoB,EAAE,EAAE,kBAAkB,2CA4BrF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAyBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAqCA"}

package/lib/typescript/module/textarea/Textarea.d.ts

@@ -16,5 +16,5 @@ import type { TextareaProps } from './types';
  * `maxHeight`; on web the same is `field-sizing: content`, which shrinks back
  * as well as growing (browsers without it keep the `rows` height and scroll).
  */
-export declare function Textarea({ label, hint, placeholder, value, defaultValue, onChangeText, onFocus, onBlur, size, rows, autoResize, maxRows, resize, maxLength, showCount, isInvalid, disabled, required, tooltip, style, inputStyle, inputRef, accessibilityLabel, testID, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Textarea({ label, hint, placeholder, value, defaultValue, onChangeText, onFocus, onBlur, size: sizeProp, rows, autoResize, maxRows, resize, maxLength, showCount, isInvalid, disabled, required, tooltip, style, inputStyle, inputRef, accessibilityLabel, nativeID, testID, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map

package/lib/typescript/module/textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/textarea/Textarea.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,IAAe,EACf,IAAQ,EACR,UAAkB,EAClB,OAAO,EACP,MAAmB,EACnB,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,KAAK,EACL,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,aAAa,2CA8If"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/textarea/Textarea.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,IAAQ,EACR,UAAkB,EAClB,OAAO,EACP,MAAmB,EACnB,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,KAAK,EACL,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,GAAG,IAAI,EACR,EAAE,aAAa,2CAkKf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -2623,6 +2623,7 @@
     "generate:theme-css": "bun scripts/generate-theme-css.ts",
     "generate:theme-golden": "bun scripts/generate-theme-golden.ts",
     "generate:tokens-json": "bun scripts/generate-design-tokens-json.ts",
+    "generate:adoption-matrix": "bun scripts/generate-adoption-matrix.ts",
     "prebuild": "node scripts/generate-platform-exports.mjs && bun scripts/generate-theme-css.ts && bun scripts/generate-design-tokens-json.ts",
     "build": "bob build",
     "postbuild": "node scripts/verify-package.mjs && node scripts/verify-build-freshness.mjs --worktree",

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -14,6 +14,7 @@ import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture
 import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { ScreenScope } from '../layout';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
     type AnimatedStyle,
@@ -650,9 +651,13 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // — web keeps React context across a portal — would tell its content it is
     // sitting on the panel's card, and in-sheet chrome would paint the column's
     // colour on top of the sheet's.
+    // ...and it is its own SCREEN for the same reason: a header inside the sheet
+    // must claim the sheet's top edge rather than the page's, and chrome inside
+    // it must follow the sheet's scroller rather than `window.scrollY`
+    // (`layout/screen-scope.tsx`).
     const surfaceChildren = (
         <SurfaceLevelProvider level={0} fill={colors.background}>
-            {children}
+            <ScreenScope>{children}</ScreenScope>
         </SurfaceLevelProvider>
     );
 

package/src/checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ import {
   checkboxLabelLineHeight,
   resolveCheckboxPaint,
 } from './shared';
+import { useFieldMembership } from '../field/membership';
 import type { CheckboxProps } from './types';
 
 /**
@@ -89,9 +90,21 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   style,
   labelStyle,
   accessibilityLabel,
+  nativeID,
   testID,
 }) => {
   const theme = useTheme();
+  // The label is ADJACENT — the words beside the box ARE the control, so they
+  // name it and a `Field` around it only supplies what is missing. `disabled`
+  // is the other direction: the field's constrains, so it is OR-ed in.
+  const field = useFieldMembership({
+    accessibilityLabel,
+    label,
+    labelPlacement: 'adjacent',
+    disabled,
+    nativeID,
+  });
+  const isDisabled = field.disabled;
   useInteractiveWebCss(STYLE_ID, BLOOM_CHECKBOX_CSS);
   useInteractiveWebCss(CHECKBOX_GLYPH_STYLE_ID, CHECKBOX_GLYPH_CSS);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
@@ -100,13 +113,13 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const sizeConfig = CHECKBOX_SIZE_CONFIG[size];
   const paint = useMemo(() => resolveCheckboxPaint(theme, color), [theme, color]);
-  const highlighted = !disabled && (hovered || pressed);
+  const highlighted = !isDisabled && (hovered || pressed);
 
   const handlePress = useCallback(() => {
-    if (!disabled) {
+    if (!isDisabled) {
       onCheckedChange(!checked);
     }
-  }, [checked, disabled, onCheckedChange]);
+  }, [checked, isDisabled, onCheckedChange]);
 
   const hasText = Boolean(label || description);
 
@@ -135,11 +148,14 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
         : {})}
       style={[rowStyle, style]}
       onPress={handlePress}
-      onPressIn={disabled ? undefined : onPressIn}
-      onPressOut={disabled ? undefined : onPressOut}
+      onPressIn={isDisabled ? undefined : onPressIn}
+      onPressOut={isDisabled ? undefined : onPressOut}
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}
-      disabled={disabled}
+      disabled={isDisabled}
+      nativeID={field.nativeID}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       accessibilityRole="checkbox"
       // `aria-checked`, not `accessibilityState`: react-native-web's
       // `createDOMProps` never reads `accessibilityState`, so a checkbox that
@@ -149,7 +165,7 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
       // this one prop is the spelling both platforms honour. `disabled`
       // travels on the `disabled` prop above, which both platforms map.
       aria-checked={indeterminate ? 'mixed' : checked}
-      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityLabel={field.accessibilityLabel}
       hitSlop={{ top: slop, bottom: slop, left: slop, right: slop }}
       testID={testID}
     >
@@ -157,7 +173,7 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
         size={size}
         checked={checked}
         indeterminate={indeterminate}
-        disabled={disabled}
+        disabled={isDisabled}
         highlighted={highlighted}
         paint={paint}
         // Centre the box on the label's first line box.

package/src/checkbox/types.ts

@@ -22,6 +22,11 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
+  /**
+   * The control's id. Inside a `Field` the field supplies one, so the label's
+   * `htmlFor` points at this control on web.
+   */
+  nativeID?: string;
   testID?: string;
 }
 

package/src/date-picker/TimeField.tsx

@@ -9,6 +9,8 @@ import { TYPE_SCALE } from '../typography';
 import { resolveCalendarPalette } from './palette';
 import { formatTime, parseTime, snapTime, stepTime } from './time';
 import type { TimeFieldProps, TimeFieldSize } from './types';
+import { useInheritedControl } from '../control-surface';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * A time of day, typed. `DatePicker` is the day; this is the hour and minute,
@@ -60,8 +62,8 @@ function TimeFieldComponent({
   max,
   step = 1,
   hourFormat = '24h',
-  size = 'medium',
-  disabled = false,
+  size: sizeProp,
+  disabled: disabledProp = false,
   accessibilityLabel,
   placeholder,
   width,
@@ -69,6 +71,12 @@ function TimeFieldComponent({
   testID,
 }: TimeFieldProps) {
   const theme = useTheme();
+  // `"--:--"` names nothing, so the name is a prop — or, inside a `Field`, the
+  // field's label. The density contract supplies the size the same way: a
+  // container can ask for `small` once instead of on every control.
+  const size = useInheritedControl('density', sizeProp, 'medium');
+  const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
+  const disabled = field.disabled;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);
   const config = SIZE_CONFIG[size];
 
@@ -150,7 +158,10 @@ function TimeFieldComponent({
       placeholder={placeholder ?? (hourFormat === '12h' ? '--:-- --' : '--:--')}
       placeholderTextColor={palette.secondaryText}
       inputMode={hourFormat === '12h' ? 'text' : 'numeric'}
-      accessibilityLabel={accessibilityLabel}
+      nativeID={field.nativeID}
+      accessibilityLabel={field.accessibilityLabel}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       aria-disabled={disabled || undefined}
       style={[FIELD_TRANSITION, fieldStyle, style]}
       testID={testID}

package/src/date-picker/types.ts

@@ -207,10 +207,13 @@ export interface TimeFieldProps {
   size?: TimeFieldSize;
   disabled?: boolean;
   /**
-   * The NAME of the time ("Viewing time", "Check-in"). Required: the field
-   * draws no label of its own, and `"--:--"` names nothing.
+   * The NAME of the time ("Viewing time", "Check-in").
+   *
+   * The field draws no label of its own and `"--:--"` names nothing, so this or
+   * an enclosing `Field`'s label is the only route to a name. With neither it
+   * warns once in development (`hooks/use-accessible-name-warning.ts`).
    */
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
   /** The text while empty. Default `"--:--"`, or `"--:-- --"` in 12h. */
   placeholder?: string;
   /** Fixed width. Default: 104 at `medium`, 96 at `small`. */

package/src/dialog/DialogContent.tsx

@@ -4,6 +4,7 @@ import { View, type GestureResponderEvent } from 'react-native';
 import { Text } from '../typography';
 
 import { useTheme } from '../theme/use-theme';
+import { ScreenScope } from '../layout';
 import { Button } from '../button';
 import type { ButtonVariant } from '../button/types';
 import { useDialogContext } from './context';
@@ -40,7 +41,10 @@ export function DialogBody({
 }) {
   const theme = useTheme();
   return (
-    <>
+    // A dialog is its own screen: chrome inside it claims THIS surface's top
+    // edge and follows THIS surface's scroller, not the page's underneath
+    // (`layout/screen-scope.tsx`).
+    <ScreenScope>
       {title ? (
         // Bloom's `Text`, not react-native's: the raw one renders in whatever
         // font the platform picks and takes no theme colour, so every dialog
@@ -74,7 +78,7 @@ export function DialogBody({
       ) : null}
       {children}
       {actions && actions.length > 0 ? <ActionRow actions={actions} /> : null}
-    </>
+    </ScreenScope>
   );
 }
 

package/src/field/index.ts

@@ -1,5 +1,7 @@
 export { Field } from './Field';
 export { useFieldControl } from './context';
+export { useFieldMembership } from './membership';
 
 export type { FieldControlValue } from './context';
+export type { FieldLabelPlacement, FieldMembership, FieldMembershipInput } from './membership';
 export type { FieldProps } from './types';

package/src/field/membership.ts

@@ -0,0 +1,164 @@
+/**
+ * ONE resolution of field membership, for every control that opts in.
+ *
+ * `useFieldControl()` hands a control the field's ids and state; applying them
+ * is four separate decisions, and each has a direction that is silently wrong:
+ *
+ *   the NAME         defers to the field   (`??`) — a control inside a labelled
+ *                                          field must not announce nothing
+ *   the CONSTRAINTS  combine with the field (`||`) — `disabled` and `invalid`
+ *                                          restrict, so a control cannot opt out
+ *   the ID           is the field's        (`??` the caller's own, which wins)
+ *   `describedBy`    is a LIST, so the two are joined rather than one chosen
+ *
+ * Fifteen families resolving that by hand is fifteen chances to write `??` where
+ * `||` belongs — and the failure is silent in both directions: a control that
+ * re-enables itself inside a disabled field looks fine and a field-labelled
+ * control that announces nothing looks fine too. So it is a function, for the
+ * same reason `useInheritedControl` is one.
+ *
+ * `TextFieldInput` is the one family that resolves the same rule inline, because
+ * it also reconciles the text-field shell's own context and its standalone
+ * branch. It is not exempt from the RULE: `FieldMembership.test.tsx` asserts the
+ * observable properties for every family, so the two implementations cannot
+ * disagree about what a field means without going red.
+ *
+ * ## The name, and why placement decides it
+ *
+ * A control's own label is either STACKED above it (`TextField`, `Textarea`:
+ * the field's label and the control's label are two spellings of one thing, and
+ * a `Field` around it should win) or ADJACENT to it (a checkbox's caption, a
+ * radio's option text: the words the user reads AS the control, which the
+ * announced name must match). Getting that backwards makes a screen reader say
+ * one thing while the eye reads another, so it is a declared property of the
+ * family rather than a guess this hook could make.
+ *
+ * A control with neither — `Switch`, `Slider`, a progress bar — can be named by
+ * NOTHING but the field, which is the case this hook exists for.
+ */
+import { useMemo } from 'react';
+
+import { useFieldControl } from './context';
+
+/** Where the control renders its own label, which decides which name wins. */
+export type FieldLabelPlacement = 'stacked' | 'adjacent';
+
+export interface FieldMembershipInput {
+  /** The name the caller wrote on the control. Always wins. */
+  accessibilityLabel?: string;
+  /** The control's own label, when it has one. */
+  label?: string;
+  /**
+   * Whether that label sits above the control (`stacked`, the default — the
+   * field's label is the same thing said twice, so the field wins) or beside it
+   * as the control's visible text (`adjacent` — it wins, so the announced name
+   * and the words on screen cannot disagree).
+   */
+  labelPlacement?: FieldLabelPlacement;
+  /** The control's own `disabled`. Combined with the field's, never replaced. */
+  disabled?: boolean;
+  /** The control's own invalid state. Combined with the field's. */
+  invalid?: boolean;
+  /** The control's own `required`. Combined with the field's. */
+  required?: boolean;
+  /** An id the caller wrote on the control. Outranks the field's. */
+  nativeID?: string;
+  /** An `aria-describedby` the caller wrote. JOINED with the field's, not replaced. */
+  describedBy?: string;
+}
+
+export interface FieldMembership {
+  /** Whether there is an enclosing `Field` at all. */
+  inField: boolean;
+  /** The id to render, or `undefined` when neither side has one. */
+  nativeID?: string;
+  /** The accessible name to render, or `undefined` when nothing names it. */
+  accessibilityLabel?: string;
+  /** The `aria-describedby` id list, or `undefined` when there is nothing to describe it. */
+  describedBy?: string;
+  /** The effective disabled state: the control's OR the field's. */
+  disabled: boolean;
+  /** The effective invalid state: the control's OR the field's. */
+  invalid: boolean;
+  /** The effective required state: the control's OR the field's. */
+  required: boolean;
+}
+
+/**
+ * Resolve what an enclosing `Field` contributes to one control.
+ *
+ * ```tsx
+ * const field = useFieldMembership({ accessibilityLabel, label, labelPlacement: 'adjacent', disabled });
+ * <Pressable
+ *   nativeID={field.nativeID}
+ *   accessibilityLabel={field.accessibilityLabel}
+ *   aria-describedby={field.describedBy}
+ *   aria-invalid={field.invalid || undefined}
+ *   disabled={field.disabled}
+ * />
+ * ```
+ *
+ * Outside a `Field` it returns the control's own values unchanged, so a control
+ * can call it unconditionally.
+ */
+export function useFieldMembership(input: FieldMembershipInput = {}): FieldMembership {
+  const field = useFieldControl();
+  const {
+    accessibilityLabel,
+    label,
+    labelPlacement = 'stacked',
+    disabled = false,
+    invalid = false,
+    required = false,
+    nativeID,
+    describedBy,
+  } = input;
+
+  const fieldLabel = field?.labelText;
+  const fieldDescribedBy = field?.describedBy;
+  const fieldControlId = field?.controlId;
+  const fieldDisabled = field?.disabled === true;
+  const fieldInvalid = field?.invalid === true;
+  const fieldRequired = field?.required === true;
+
+  return useMemo<FieldMembership>(() => {
+    const own = label ?? undefined;
+    const name =
+      accessibilityLabel ??
+      (labelPlacement === 'adjacent' ? (own ?? fieldLabel) : (fieldLabel ?? own));
+
+    // An id LIST: a control that already points at its own hint keeps it, and
+    // the field's error is added rather than swapped in. Duplicates are
+    // dropped — an id named twice is read twice by some screen readers.
+    const described = [describedBy, fieldDescribedBy].filter(
+      (id): id is string => typeof id === 'string' && id.length > 0,
+    );
+    const uniqueDescribed = Array.from(new Set(described.flatMap((ids) => ids.split(/\s+/))));
+
+    return {
+      inField: field != null,
+      nativeID: nativeID ?? fieldControlId,
+      accessibilityLabel: name,
+      describedBy: uniqueDescribed.length > 0 ? uniqueDescribed.join(' ') : undefined,
+      disabled: disabled || fieldDisabled,
+      invalid: invalid || fieldInvalid,
+      required: required || fieldRequired,
+    };
+  }, [
+    field,
+    accessibilityLabel,
+    label,
+    labelPlacement,
+    disabled,
+    invalid,
+    required,
+    nativeID,
+    describedBy,
+    fieldLabel,
+    fieldDescribedBy,
+    fieldControlId,
+    fieldDisabled,
+    fieldInvalid,
+    fieldRequired,
+  ]);
+}

package/src/file-upload/FileUpload.tsx

@@ -92,6 +92,7 @@ type StaggerState = 'shown' | 'hiding' | 'hidden';
 
 import { formatFileSize } from './shared';
 import { DISABLED_OPACITY } from '../styles/tokens';
+import { useFieldMembership } from '../field/membership';
 
 export { formatFileSize };
 
@@ -445,12 +446,19 @@ const FileUploadComponent = function FileUpload({
   maxBytes = DEFAULT_MAX_BYTES,
   renderFileIcon,
   labels: labelOverrides,
-  disabled = false,
-  accessibilityLabel = 'Upload a file',
+  disabled: disabledProp = false,
+  accessibilityLabel,
   style,
   testID,
 }: FileUploadProps) {
   const theme = useTheme();
+  // The drop zone draws a prompt but names itself with a prop, so a `Field`
+  // around it is the other place the name can come from — and the field's
+  // `disabled` blocks the picker whatever the caller passed. `'Upload a file'`
+  // stays the last resort rather than a default that would outrank a label the
+  // user can read.
+  const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
+  const disabled = field.disabled;
   useInteractiveWebCss(STYLE_ID, BLOOM_FILE_UPLOAD_CSS);
   const reducedMotion = useReducedMotion();
   const paint = useMemo(() => resolveFileUploadPaint(theme), [theme]);
@@ -644,7 +652,10 @@ const FileUploadComponent = function FileUpload({
       ref={rootRef}
       {...webDataSet({ bloomFileUpload: busy ? 'busy' : 'idle' })}
       accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
+      nativeID={field.nativeID}
+      accessibilityLabel={field.accessibilityLabel ?? 'Upload a file'}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       aria-busy={busy}
       disabled={disabled}
       focusable={!blocked}

package/src/floating/types.ts

@@ -162,6 +162,19 @@ export interface TriggerHandleProps {
   accessibilityLabel?: string;
   accessibilityRole?: 'button';
   'aria-expanded'?: boolean;
+  /**
+   * The trigger's id, so an enclosing `Field`'s label can point at it.
+   *
+   * Only a trigger that IS a form control sets it — `Select` does; a `Popover`
+   * or a `DropdownMenu` inside a field is not the field's control and must not
+   * take its id. `TriggerSlot` therefore does not read the field context
+   * itself; each family decides whether it is the control.
+   */
+  nativeID?: string;
+  /** The field's hint or error, for a trigger that is a form control. */
+  'aria-describedby'?: string;
+  /** The field's invalid state, for a trigger that is a form control. */
+  'aria-invalid'?: boolean;
   /**
    * What this trigger OPENS. Set by each family from its own constant in
    * `floating/constants.ts`, never defaulted here — the five families open three

package/src/index.ts

@@ -167,6 +167,7 @@ export {
   useTopEdgeInset,
   ScrollOffsetProvider,
   useScrollOffset,
+  ScreenScope,
 } from './layout';
 export { Fab } from './fab';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab';
@@ -282,8 +283,14 @@ export * from './date-picker';
 export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
-export { Field } from './field';
-export type { FieldProps } from './field';
+export { Field, useFieldControl, useFieldMembership } from './field';
+export type {
+  FieldControlValue,
+  FieldLabelPlacement,
+  FieldMembership,
+  FieldMembershipInput,
+  FieldProps,
+} from './field';
 export { InputGroup, InputGroupAddon } from './input-group';
 export type { InputGroupProps, InputGroupAddonProps } from './input-group';
 export { RangeSlider, Slider } from './slider';

package/src/index.web.ts

@@ -172,6 +172,7 @@ export {
   useTopEdgeInset,
   ScrollOffsetProvider,
   useScrollOffset,
+  ScreenScope,
 } from './layout';
 export { Fab } from './fab/index.web';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab/index.web';
@@ -287,8 +288,14 @@ export * from './date-picker';
 export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
-export { Field } from './field';
-export type { FieldProps } from './field';
+export { Field, useFieldControl, useFieldMembership } from './field';
+export type {
+  FieldControlValue,
+  FieldLabelPlacement,
+  FieldMembership,
+  FieldMembershipInput,
+  FieldProps,
+} from './field';
 export { InputGroup, InputGroupAddon } from './input-group';
 export type { InputGroupProps, InputGroupAddonProps } from './input-group';
 export { RangeSlider, Slider } from './slider';

package/src/input-group/InputGroup.tsx

@@ -24,6 +24,7 @@ import {
 } from '../text-field/shared';
 import { TextFieldGroupContext } from '../text-field/TextField';
 import type { InputGroupAddonProps, InputGroupProps } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * The group is the input shell (`base/input/input.tsx`) with its adornment
@@ -149,12 +150,21 @@ InputGroupAddon.displayName = 'InputGroupAddon';
  */
 const InputGroupComponent = function InputGroup({
   children,
-  isInvalid = false,
-  disabled = false,
+  isInvalid: isInvalidProp = false,
+  disabled: disabledProp = false,
   size = 'md',
   style,
   testID,
 }: InputGroupProps) {
+  // A group holding a control and its addons is ONE control as far as a `Field`
+  // is concerned: the field's `disabled` and invalid state reach every member
+  // through the group's own contexts, including an addon's `Button`, which reads
+  // neither the field nor the text-field group. The group publishes no name — it
+  // does not know which of its children is the control the label points at, so
+  // that stays the field's `nativeID` and the input's to apply.
+  const member = useFieldMembership({ disabled: disabledProp, invalid: isInvalidProp });
+  const disabled = member.disabled;
+  const isInvalid = member.invalid;
   const cfg = SIZE_CONFIG[size];
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } =
@@ -211,6 +221,7 @@ const InputGroupComponent = function InputGroup({
           // 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}
+          aria-invalid={isInvalid || 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.