@oxy.so/bloom 4.20.0 → 4.21.1

package/lib/typescript/module/design-tokens/theme-css.d.ts

@@ -22,6 +22,14 @@
  * A consumer that prefers a static stylesheet can copy the output of
  * `bloomThemeCss()` directly into their `@theme { … }` — the values are stable.
  */
+/**
+ * A px line-height as the unitless ratio of its font-size, spelled the way
+ * Tailwind spells its own type scale: `lineHeightRatio(22, 15)` → `calc(22 / 15)`.
+ * Exact on both platforms (no rounded decimal), and the only form
+ * react-native-css resolves correctly through `var()` — it multiplies any
+ * number by the font-size.
+ */
+export declare function lineHeightRatio(lineHeightPx: number, fontSizePx: number): string;
 /**
  * Produce the BODY of a Tailwind v4 `@theme` block (no surrounding braces) that
  * registers the full Bloom semantic vocabulary.
@@ -29,7 +37,7 @@
  * - Colors → `--color-<role>: var(--canonical);`
  * - Spacing → `--spacing-<key>: <px>;`
  * - Radius  → `--radius-<key>: <px>;`
- * - Type    → `--text-<role>: <size>; --text-<role>--line-height: <lh>;`
+ * - Type    → `--text-<role>: <size>; --text-<role>--line-height: calc(<lh> / <size>);`
  *             `--font-<role>: var(--bloom-font-*);` (+ weight via utility doc)
  * - Shadow  → `--shadow-<s|m>: <box-shadow>;`
  */

package/lib/typescript/module/design-tokens/theme-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../../../src/design-tokens/theme-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAcH;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAkEtC;AAED,2EAA2E;AAC3E,wBAAgB,eAAe,IAAI,MAAM,CAExC"}
+{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../../../src/design-tokens/theme-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAcH;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAEhF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,IAAI,MAAM,CA4EtC;AAED,2EAA2E;AAC3E,wBAAgB,eAAe,IAAI,MAAM,CAExC"}

package/lib/typescript/module/dialog/DialogBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogBottomSheet.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAsB,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,cAAyC,EACzC,UAAiB,EACjB,iBAAwB,EACxB,cAA+C,EAC/C,UAAU,EACV,KAAK,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,QAAQ,GACT,EAAE,sBAAsB,2CA4PxB;AAKD;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,WAAW,EACT,SAAS,GACT,MAAM,GACN,WAAW,GACX,SAAS,GACT,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,QAAQ,GACR,gBAAgB,GAChB,YAAY,GACZ,mBAAmB,GACnB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,GAChB,oBAAoB,GACpB,OAAO,GACP,UAAU,CACb,CAAC"}
+{"version":3,"file":"DialogBottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogBottomSheet.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAsB,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,cAAyC,EACzC,UAAiB,EACjB,iBAAwB,EACxB,cAA+C,EAC/C,UAAU,EACV,KAAK,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,QAAQ,GACT,EAAE,sBAAsB,2CA6QxB;AAQD;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,WAAW,EACT,SAAS,GACT,MAAM,GACN,WAAW,GACX,SAAS,GACT,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,QAAQ,GACR,gBAAgB,GAChB,YAAY,GACZ,mBAAmB,GACnB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,GAChB,oBAAoB,GACpB,OAAO,GACP,UAAU,CACb,CAAC"}

package/lib/typescript/module/dialog/DialogHeader.d.ts

@@ -12,6 +12,30 @@ export declare const DIALOG_HEADER_OVERLAY_HEIGHT: number;
  * BELOW the whole gradient overlay (fully clear at rest, then scrolls under it).
  */
 export declare const DIALOG_HEADER_CONTENT_TOP: number;
+/**
+ * Content top inset (px) for an INLINE-CLOSE header (see {@link isInlineCloseHeader}):
+ * the large title's first line is centred on the nav row, level with the ✕,
+ * instead of starting below the whole bar.
+ */
+export declare const DIALOG_HEADER_INLINE_CONTENT_TOP: number;
+/**
+ * Whether a large-title header puts its title IN the nav row, beside the ✕,
+ * rather than in a band below the bar.
+ *
+ * The nav row exists for its controls. When it would hold nothing but the
+ * default close — no back, no leading slot, no trailing actions, no custom
+ * trailing node — a full 72px row above the title is an empty band on every
+ * entry view of a flow (an account dialog's first screen, a one-page sheet).
+ * The title then starts level with the ✕ and wraps before it; the bar's scrim
+ * and the small collapsed title still arrive once the title scrolls under it.
+ *
+ * Anything that gives the row content of its own keeps the stacked layout: a
+ * back button (the title would sit between two buttons), rich trailing actions
+ * or a custom `right` (unknown width), a branded `titleContent` (no large title
+ * at all), and `tone: 'onImage'` (the scrim is what makes the chrome legible
+ * over media, so it cannot start hidden).
+ */
+export declare function isInlineCloseHeader(config: DialogHeaderConfig): boolean;
 /**
  * Trailing icon `actions` shown inline before they collapse into a "more"
  * overflow menu (Material overflow pattern). Kept small so the nav row never

package/lib/typescript/module/dialog/DialogHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAKf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAuBjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiBlD,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,uDAAuD;AACvD,eAAO,MAAM,4BAA4B,QAAwC,CAAC;AAElF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAA+B,CAAC;AAQtE;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAgBlD,UAAU,WAAW;IACnB,WAAW,EAAE,MAAM,kBAAkB,GAAG,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CACjD;AAsGD;;;;;GAKG;AACH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAQlE;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,sBAAsB,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,YAAY,CAMrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CA2BnF;AAiJD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe;gBAOd,sBAAsB;YAC1B,kBAAkB;eACf,MAAM,IAAI;IACrB;;;;;OAKG;eACQ,OAAO;YACV,SAAS,CAAC,SAAS,CAAC;EAuH5B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;gBAIf,sBAAsB;YAC1B,kBAAkB;EA4F1B,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB;gBAIjB,sBAAsB;YAC1B,kBAAkB;EAK1B,CAAC"}
+{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAKf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAyBjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiBlD,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,uDAAuD;AACvD,eAAO,MAAM,4BAA4B,QAAwC,CAAC;AAElF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAA+B,CAAC;AAWtE;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,QAAwD,CAAC;AAYtG;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAOvE;AAED;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAgBlD,UAAU,WAAW;IACnB,WAAW,EAAE,MAAM,kBAAkB,GAAG,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CACjD;AAsGD;;;;;GAKG;AACH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAQlE;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,sBAAsB,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,YAAY,CAMrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CA2BnF;AAmMD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe;gBAOd,sBAAsB;YAC1B,kBAAkB;eACf,MAAM,IAAI;IACrB;;;;;OAKG;eACQ,OAAO;YACV,SAAS,CAAC,SAAS,CAAC;EAqI5B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;gBAIf,sBAAsB;YAC1B,kBAAkB;EA6G1B,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB;gBAIjB,sBAAsB;YAC1B,kBAAkB;EAK1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.20.0",
+  "version": "4.21.1",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -3422,7 +3422,10 @@
     "basic-ftp": "5.2.2",
     "defu": "6.1.7",
     "handlebars": "4.7.9",
-    "lodash": "4.18.1"
+    "lodash": "4.18.1",
+    "lightningcss": "1.30.1",
+    "lightningcss-linux-x64-gnu": "1.30.1",
+    "lightningcss-linux-x64-musl": "1.30.1"
   },
   "typesVersions": {
     "*": {

package/src/accordion/Accordion.tsx

@@ -140,6 +140,9 @@ const AccordionItemComponent: React.FC<AccordionItemProps> = ({
 
 // ---- Accordion Trigger ----
 
+/** The trigger's label box: fills the row, sized from its content (`flexBasis: 'auto'`). */
+const TRIGGER_LABEL_STYLE = { flexGrow: 1, flexShrink: 1 } as const;
+
 const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
   children,
   icon,
@@ -200,7 +203,12 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
       aria-expanded={isExpanded}
     >
       {icon}
-      <View style={{ flex: 1 }}>
+      {/* Grow into a full-width trigger, but measure at the label's natural
+          width. RN's `flex: 1` is `flexBasis: 0`, and in a shrink-wrapped
+          trigger (`alignSelf: 'center'`) Yoga then sized the label at its
+          MINIMUM content width: "Having trouble?" wrapped to two lines on
+          Android while web (max-content sizing) kept it on one. */}
+      <View testID="accordion-trigger-label" style={TRIGGER_LABEL_STYLE}>
         {typeof children === 'string' ? (
           <Text
             style={[

package/src/button/Button.tsx

@@ -4,6 +4,7 @@ import { resolveIconSlot } from '../icons/render-icon';
 import {
   ActivityIndicator,
   Linking,
+  Platform,
   Pressable,
   StyleSheet,
   View,
@@ -80,6 +81,42 @@ const SQUARE_HIT_SLOP = {
   lg: { top: 0, bottom: 0, left: 0, right: 0 },
 } as const satisfies Record<ButtonResolvedSize, NonNullable<ButtonProps['hitSlop']>>;
 
+type HitSlop = { top: number; bottom: number; left: number; right: number };
+
+/**
+ * Android's floor is 48dp (Material), 4dp above the 44 the tables above reach —
+ * so on Android every target grows 2dp at its top and bottom: `lg` (44dp tall,
+ * no slack) reaches 48, and every smaller size clears 48 the same way. Squares
+ * also grow 2dp at the sides, since they already take all-round slack; row
+ * buttons and links do not, because side slack steals presses from a
+ * neighbour. Two stacked buttons keep 4dp of every 8dp gap between them.
+ */
+const ANDROID_TARGET_EXTRA = 2;
+
+function growVertical(slop: HitSlop): HitSlop {
+  return { ...slop, top: slop.top + ANDROID_TARGET_EXTRA, bottom: slop.bottom + ANDROID_TARGET_EXTRA };
+}
+
+function growAllRound(slop: HitSlop): HitSlop {
+  return {
+    top: slop.top + ANDROID_TARGET_EXTRA,
+    bottom: slop.bottom + ANDROID_TARGET_EXTRA,
+    left: slop.left + ANDROID_TARGET_EXTRA,
+    right: slop.right + ANDROID_TARGET_EXTRA,
+  };
+}
+
+function mapSizes(
+  table: Record<ButtonResolvedSize, HitSlop>,
+  grow: (slop: HitSlop) => HitSlop,
+): Record<ButtonResolvedSize, HitSlop> {
+  return { xs: grow(table.xs), sm: grow(table.sm), md: grow(table.md), lg: grow(table.lg) };
+}
+
+const ANDROID_SIZE_HIT_SLOP = mapSizes(SIZE_HIT_SLOP, growVertical);
+const ANDROID_SQUARE_HIT_SLOP = mapSizes(SQUARE_HIT_SLOP, growAllRound);
+const ANDROID_LINK_HIT_SLOP = growVertical(LINK_HIT_SLOP);
+
 // ---------------------------------------------------------------------------
 //  The button renders ONE node — the same shape the web fork renders (one
 //  `<button>`), so a caller's layout `className` lands on the box its parent
@@ -286,11 +323,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     [geometry, paint.foreground, isLink, underlineMode, hovered, disabled],
   );
 
+  const android = Platform.OS === 'android';
   const defaultHitSlop = isSquare
-    ? SQUARE_HIT_SLOP[size]
+    ? (android ? ANDROID_SQUARE_HIT_SLOP : SQUARE_HIT_SLOP)[size]
     : isLink
-      ? LINK_HIT_SLOP
-      : SIZE_HIT_SLOP[size];
+      ? (android ? ANDROID_LINK_HIT_SLOP : LINK_HIT_SLOP)
+      : (android ? ANDROID_SIZE_HIT_SLOP : SIZE_HIT_SLOP)[size];
 
   const IconFromProp = icon != null && isIconComponent(icon) ? icon : null;
   const iconNode = IconFromProp ? (

package/src/design-tokens/theme-css.ts

@@ -35,6 +35,17 @@ import {
 } from './scales';
 import { SHADOW_BOX } from './shadows';
 
+/**
+ * A px line-height as the unitless ratio of its font-size, spelled the way
+ * Tailwind spells its own type scale: `lineHeightRatio(22, 15)` → `calc(22 / 15)`.
+ * Exact on both platforms (no rounded decimal), and the only form
+ * react-native-css resolves correctly through `var()` — it multiplies any
+ * number by the font-size.
+ */
+export function lineHeightRatio(lineHeightPx: number, fontSizePx: number): string {
+  return `calc(${lineHeightPx} / ${fontSizePx})`;
+}
+
 /**
  * Produce the BODY of a Tailwind v4 `@theme` block (no surrounding braces) that
  * registers the full Bloom semantic vocabulary.
@@ -42,7 +53,7 @@ import { SHADOW_BOX } from './shadows';
  * - Colors → `--color-<role>: var(--canonical);`
  * - Spacing → `--spacing-<key>: <px>;`
  * - Radius  → `--radius-<key>: <px>;`
- * - Type    → `--text-<role>: <size>; --text-<role>--line-height: <lh>;`
+ * - Type    → `--text-<role>: <size>; --text-<role>--line-height: calc(<lh> / <size>);`
  *             `--font-<role>: var(--bloom-font-*);` (+ weight via utility doc)
  * - Shadow  → `--shadow-<s|m>: <box-shadow>;`
  */
@@ -94,10 +105,20 @@ export function bloomThemeCss(): string {
   }
 
   // Typography: size + line-height + family per role.
+  //
+  // The line-height is a UNITLESS ratio (`calc(22 / 15)`), the form Tailwind's
+  // own `--text-sm--line-height: calc(1.25 / 0.875)` takes — never px. On the
+  // web the two are identical (a unitless line-height is a multiple of the
+  // font-size: 15px × 22/15 = 22px). On native they are not: Tailwind v4 emits
+  // `line-height: var(--tw-leading, var(--text-body--line-height))`,
+  // react-native-css compiles that to `lineHeight(var(…, 22))`, and its runtime
+  // `lineHeight` resolver treats EVERY number as an em multiplier — so a px
+  // token rendered `text-body` at 22 × 15 = 330dp line-height on Android and
+  // iOS. See `lineHeightRatio` and `docs/typography.mdx`.
   for (const name of Object.keys(TYPOGRAPHY) as TypeRoleName[]) {
     const role = TYPOGRAPHY[name];
     lines.push(`  --text-${name}: ${role.size}px;`);
-    lines.push(`  --text-${name}--line-height: ${role.lineHeight}px;`);
+    lines.push(`  --text-${name}--line-height: ${lineHeightRatio(role.lineHeight, role.size)};`);
     lines.push(`  --text-${name}--font-weight: ${role.weight};`);
     lines.push(`  --font-${name}: ${FONT_FAMILY_VARS[role.family]};`);
   }

package/src/design-tokens/theme.css

@@ -124,35 +124,35 @@
   --radius-radius-max: 9999px;
   --border-width-hairline: 0.5px;
   --text-caption: 11px;
-  --text-caption--line-height: 14px;
+  --text-caption--line-height: calc(14 / 11);
   --text-caption--font-weight: 400;
   --font-caption: var(--bloom-font-sans);
   --text-bodySmall: 13px;
-  --text-bodySmall--line-height: 18px;
+  --text-bodySmall--line-height: calc(18 / 13);
   --text-bodySmall--font-weight: 400;
   --font-bodySmall: var(--bloom-font-sans);
   --text-bodyTitleSmall: 13px;
-  --text-bodyTitleSmall--line-height: 18px;
+  --text-bodyTitleSmall--line-height: calc(18 / 13);
   --text-bodyTitleSmall--font-weight: 600;
   --font-bodyTitleSmall: var(--bloom-font-sans);
   --text-body: 15px;
-  --text-body--line-height: 22px;
+  --text-body--line-height: calc(22 / 15);
   --text-body--font-weight: 400;
   --font-body: var(--bloom-font-sans);
   --text-subtitle: 17px;
-  --text-subtitle--line-height: 24px;
+  --text-subtitle--line-height: calc(24 / 17);
   --text-subtitle--font-weight: 500;
   --font-subtitle: var(--bloom-font-sans);
   --text-sectionTitle: 20px;
-  --text-sectionTitle--line-height: 26px;
+  --text-sectionTitle--line-height: calc(26 / 20);
   --text-sectionTitle--font-weight: 600;
   --font-sectionTitle: var(--bloom-font-sans);
   --text-headerBold: 28px;
-  --text-headerBold--line-height: 34px;
+  --text-headerBold--line-height: calc(34 / 28);
   --text-headerBold--font-weight: 700;
   --font-headerBold: var(--bloom-font-display);
   --text-buttonLarge: 17px;
-  --text-buttonLarge--line-height: 22px;
+  --text-buttonLarge--line-height: calc(22 / 17);
   --text-buttonLarge--font-weight: 600;
   --font-buttonLarge: var(--bloom-font-sans);
   --font-bloom-sans: var(--bloom-font-sans);

package/src/dialog/DialogBottomSheet.tsx

@@ -13,6 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { type AnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
@@ -86,6 +87,11 @@ export function DialogBottomSheet({
   const titleId = useId();
   const descriptionId = useId();
   const headerController = useDialogHeaderController();
+  // The sheet is flush with the bottom of the window (a `<Modal>` drawn
+  // edge-to-edge on Android, and under the home indicator on iOS), and
+  // `BottomSheet` deliberately leaves the safe area to its content. This Dialog
+  // IS the content's chrome, so it owns the inset (the spacer after the body).
+  const { bottom: bottomInset } = useSafeAreaInsets();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -325,12 +331,27 @@ export function DialogBottomSheet({
           <DialogMorphContent morph={morphState} style={scrollableResolved ? undefined : FILL_BOUNDED}>
             {header ? headerBody : dialogBody}
           </DialogMorphContent>
+          {/* The bottom safe area, INSIDE the scroll content. Without it the
+              last row of every bottom-placement Dialog was painted under the
+              Android gesture bar / iOS home indicator (a 2400px Pixel put a
+              "Having trouble?" link at 2297–2356px), and a body that outgrew
+              the sheet could not scroll its last rows out from under the bar —
+              the scroll range ended exactly where the bar began. A spacer
+              rather than a padding: the content box keeps the caller's
+              `padding`/`contentPadding` untouched on both platforms, and the
+              morph layer above still measures the content alone. */}
+          {bottomInset > 0 ? (
+            <View testID={SAFE_AREA_SPACER_TESTID} style={{ height: bottomInset }} />
+          ) : null}
         </StyledView>
       </Context.Provider>
     </BottomSheet>
   );
 }
 
+/** Test handle for the bottom safe-area spacer. */
+const SAFE_AREA_SPACER_TESTID = 'dialog-sheet-safe-area';
+
 /** Passes a bounded height down to a `scrollable={false}` body. */
 const FILL_BOUNDED = { flex: 1, minHeight: 0 } as const;
 

package/src/dialog/DialogHeader.tsx

@@ -27,6 +27,8 @@ import Animated, {
 // it put all 461 glyphs into every app that renders a Dialog, which is the cost
 // `./icons/Ri*` was added to remove. An app cannot opt out of what Bloom's own
 // components import, so the barrel has no place inside a shipped one.
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
 import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
@@ -83,6 +85,52 @@ const HEADER_H_PADDING = 20;
 /** Circular icon-button diameter for the default back / close affordances. */
 const NAV_BUTTON_SIZE = 36;
 
+/** The large title's line box (px) — `styles.largeTitle.lineHeight`. */
+const LARGE_TITLE_LINE_HEIGHT = 38;
+
+/**
+ * Content top inset (px) for an INLINE-CLOSE header (see {@link isInlineCloseHeader}):
+ * the large title's first line is centred on the nav row, level with the ✕,
+ * instead of starting below the whole bar.
+ */
+export const DIALOG_HEADER_INLINE_CONTENT_TOP = (DIALOG_NAV_BAR_HEIGHT - LARGE_TITLE_LINE_HEIGHT) / 2;
+
+/**
+ * Space (px) the large title's first line keeps clear at its trailing edge for
+ * the ✕ it shares a row with: the nav row's gutter + the button + an 8px gap,
+ * less the title block's own gutter.
+ */
+const INLINE_CLOSE_TITLE_RESERVE = HEADER_H_PADDING - 4 + NAV_BUTTON_SIZE + 8 - HEADER_H_PADDING;
+
+/** Scroll distance (px) over which the bar's scrim fades in on an inline-close header. */
+const INLINE_SCRIM_FADE_DISTANCE = 16;
+
+/**
+ * Whether a large-title header puts its title IN the nav row, beside the ✕,
+ * rather than in a band below the bar.
+ *
+ * The nav row exists for its controls. When it would hold nothing but the
+ * default close — no back, no leading slot, no trailing actions, no custom
+ * trailing node — a full 72px row above the title is an empty band on every
+ * entry view of a flow (an account dialog's first screen, a one-page sheet).
+ * The title then starts level with the ✕ and wraps before it; the bar's scrim
+ * and the small collapsed title still arrive once the title scrolls under it.
+ *
+ * Anything that gives the row content of its own keeps the stacked layout: a
+ * back button (the title would sit between two buttons), rich trailing actions
+ * or a custom `right` (unknown width), a branded `titleContent` (no large title
+ * at all), and `tone: 'onImage'` (the scrim is what makes the chrome legible
+ * over media, so it cannot start hidden).
+ */
+export function isInlineCloseHeader(config: DialogHeaderConfig): boolean {
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  if (!hasLargeTitle) return false;
+  if (config.tone === 'onImage') return false;
+  if (config.left || config.onBack || config.right) return false;
+  if (config.actions?.length || config.primaryAction) return false;
+  return true;
+}
+
 /**
  * Trailing icon `actions` shown inline before they collapse into a "more"
  * overflow menu (Material overflow pattern). Kept small so the nav row never
@@ -435,6 +483,56 @@ function HeaderProgressBar({
 
 // --- Nav bar overlay --------------------------------------------------------
 
+/** Where the default scrim stops being opaque: the bottom of the nav row. */
+const SCRIM_SOLID_UNTIL = DIALOG_NAV_BAR_HEIGHT / DIALOG_HEADER_OVERLAY_HEIGHT;
+
+/** Dark scrim over media (`tone: 'onImage'`): 60% black fading to clear. */
+const ON_IMAGE_SCRIM = '#000000';
+const ON_IMAGE_SCRIM_OPACITY = 0.6;
+
+let navScrimIdCounter = 0;
+
+/**
+ * The nav bar's background. It used to be a Tailwind class,
+ * `bg-gradient-to-b from-bg to-transparent`. On native that compiles through
+ * react-native-css to `experimental_backgroundImage: "linear-gradient(to bottom
+ * in oklab, …)"`. React Native cannot parse the `in oklab` interpolation that
+ * Tailwind v4 always emits, so it painted NOTHING. The bar was transparent, and
+ * once a list scrolled, the collapsed title sat on top of the rows under it.
+ * The class also needed the consumer's Tailwind to scan Bloom's `lib/`, or the
+ * web bar was bare too. An SVG gradient paints the same on both platforms and
+ * has no such dependency.
+ *
+ * The default scrim is SOLID across the whole nav row and fades only over the
+ * tail below it. A gradient spread over the full overlay left the title's own
+ * row about two-thirds opaque, so rows passing behind it still showed through.
+ * The fade uses `stopOpacity`, never alpha in `stopColor`: SVG drops an
+ * embedded alpha (see `glass-colors.ts`).
+ */
+function NavScrim({ onImage, surface }: { onImage: boolean; surface: string }): React.ReactElement {
+  const id = useMemo(() => `bloom-dialog-nav-scrim${navScrimIdCounter++}`, []);
+  const color = onImage ? ON_IMAGE_SCRIM : surface;
+  // [offset, opacity] pairs: the dark scrim fades across its whole height; the
+  // surface scrim holds solid to the bottom of the nav row first.
+  const stops: Array<[number, number]> = onImage
+    ? [[0, ON_IMAGE_SCRIM_OPACITY], [1, 0]]
+    : [[0, 1], [SCRIM_SOLID_UNTIL, 1], [1, 0]];
+  return (
+    // `width`/`height` beside `absoluteFill`: an `<svg>` is a replaced element
+    // and falls back to 300 x 150 on web without them (`svg-absolute-fill-size`).
+    <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} testID="dialog-nav-scrim-fill">
+      <Defs>
+        <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+          {stops.map(([offset, opacity]) => (
+            <Stop key={offset} offset={String(offset)} stopColor={color} stopOpacity={opacity} />
+          ))}
+        </LinearGradient>
+      </Defs>
+      <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+    </Svg>
+  );
+}
+
 /**
  * The sticky nav bar: gradient background + left / center (collapsing title) /
  * right slots. Absolutely positioned at the top of the Dialog surface, painted
@@ -473,6 +571,17 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   // so there is nothing to collapse and no large in-content title to collapse under.
   const hasLargeTitle =
     collapse && !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  // The large title shares the nav row with the ✕ at rest (`isInlineCloseHeader`),
+  // so the scrim — opaque at the top — must not paint over it until content
+  // actually scrolls under the bar. Only a collapsing bar has an in-content title.
+  const inlineClose = collapse && isInlineCloseHeader(config);
+
+  const scrimStyle = useAnimatedStyle(() => {
+    if (!inlineClose) return { opacity: 1 };
+    return {
+      opacity: interpolate(scrollY.value, [0, INLINE_SCRIM_FADE_DISTANCE], [0, 1], Extrapolation.CLAMP),
+    };
+  }, [scrollY, inlineClose]);
 
   const titleStyle = useAnimatedStyle(() => {
     // When there is no large title to collapse under, the bar title is always
@@ -545,17 +654,20 @@ export const DialogNavHeader = memo(function DialogNavHeader({
 
   return (
     <View pointerEvents="box-none" style={[styles.overlay, style]}>
-      {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
-          content fades out under the bar. `onImage` swaps to a dark scrim so the
-          chrome reads over media. Pure NativeWind — no SVG dependency. */}
-      <View
-        className={
-          onImage
-            ? 'bg-gradient-to-b from-black/60 to-transparent'
-            : 'bg-gradient-to-b from-bg to-transparent'
-        }
-        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
-      />
+      {/* The surface colour behind the nav row, fading out over the tail below
+          it, so scrolled content passes UNDER the bar instead of through its
+          title. `onImage` swaps to a dark scrim so the chrome reads over media.
+          See `NavScrim` for why this is an SVG and not a gradient class. */}
+      <Animated.View
+        testID="dialog-nav-scrim"
+        style={[
+          StyleSheet.absoluteFill,
+          { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' },
+          scrimStyle,
+        ]}
+      >
+        <NavScrim onImage={onImage} surface={theme.colors.background} />
+      </Animated.View>
       <View pointerEvents="box-none" style={styles.navRow}>
         <View style={styles.side}>{left}</View>
         <Animated.View
@@ -625,14 +737,31 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
     return onImage ? null : <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
   }
 
+  // Title level with the ✕ when the nav row would hold nothing else.
+  const inlineClose = isInlineCloseHeader(config);
+
   return (
     <>
-      {/* Clear the whole gradient overlay so the block starts below the bar. */}
-      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      {/* Clear the whole gradient overlay so the block starts below the bar —
+          or, inline with the ✕, just centre the first line on the nav row. */}
+      <View
+        testID="dialog-large-title-inset"
+        style={{ height: inlineClose ? DIALOG_HEADER_INLINE_CONTENT_TOP : DIALOG_HEADER_CONTENT_TOP }}
+      />
       <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
         {hasLargeTitle ? (
           <>
-            <H1 style={[styles.largeTitle, { color: onImage ? ON_IMAGE_TEXT : theme.colors.text }]}>
+            <H1
+              style={[
+                styles.largeTitle,
+                { color: onImage ? ON_IMAGE_TEXT : theme.colors.text },
+                // Wrap before the ✕ it shares the row with. A logical inset, so
+                // it follows the ✕ to the left edge in a right-to-left layout.
+                inlineClose && config.showClose !== false
+                  ? { marginInlineEnd: INLINE_CLOSE_TITLE_RESERVE }
+                  : null,
+              ]}
+            >
               {config.title}
             </H1>
             {config.subtitle ? (