@swiftbrowser/web 0.18.3 → 0.21.0

package/src/renderer.ts

@@ -116,6 +116,7 @@ import {
   type ScrollViewProps,
   type SearchFieldProps,
   type SectionProps,
+  type DisclosureGroupProps,
   type ShapeProps,
   type SheetProps,
   type SpacerProps,
@@ -125,6 +126,7 @@ import {
   type TabProps,
   type TabViewProps,
   type HostProps,
+  type RegisteredProps,
   type TextFieldProps,
   type TextProps,
   type TextRun,
@@ -170,8 +172,9 @@ import { TouchPaging } from './touchPaging';
 import { isScrollVisible } from './scrollVisibility';
 import { applyDefaultScrollAnchor, keepScrollAnchors } from './scrollAnchor';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
-import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
+import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, shadowCSS, styleToCSS, type PaintCSS } from './styles';
 import { hostContent, onHostContentChange } from './hostContent';
+import { type RegisteredViewInstance, ViewRegistry } from './viewRegistry';
 import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointerEffects';
 import { colorMultiplyFilter } from './colorMultiply';
 import { largeTitleOf, largeTitleTextOf } from './largeTitle';
@@ -192,6 +195,14 @@ export class RendererError extends Error {
 }
 
 const KIND_ATTR = 'sbKind';
+/**
+ * The kinds that draw what they show themselves: a shadow of a box around one falls on it as a whole (castShadows,
+ * styles.css), where a container hands it on to the views inside.
+ */
+const DRAWN_KINDS: ReadonlySet<string> = new Set([
+  'text', 'image', 'divider', 'color', 'shape', 'textfield', 'toggle', 'picker', 'gauge', 'searchfield', 'registered', 'chart',
+  'stepper', 'slider', 'datepicker', 'texteditor', 'video', 'canvas',
+]);
 const ID_ATTR = 'sbId';
 /** `animationToken` of a `styled` box, kept across `update` to detect changes. */
 const ANIMATION_TOKEN = 'sbAnimationToken';
@@ -251,6 +262,7 @@ export { SHEET_DISMISS_DRAG } from './interaction';
 
 const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'host',
+  'registered',
   'text',
   'vstack',
   'hstack',
@@ -304,6 +316,8 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   // A `Section`'s view header / footer
   'sectionheader',
   'sectionfooter',
+  // `DisclosureGroup`: its label with a chevron, its content below once expanded
+  'disclosuregroup',
   // An `AVPlayer` shown by a view (src/video.ts)
   'video',
   'lazyspacer',
@@ -320,10 +334,14 @@ const SLIDER_THUMB = 38;
 export const PICKER_MENU_WIDTH = 250;
 /** Row height inside the picker menu. */
 export const PICKER_MENU_ROW = 44;
+/** A row with a subtitle under its title (styles.css, `[data-sb-subtitled]`). */
+const MENU_SUBTITLED_ROW = 58;
 /** Height of a section header caption row in the popover (Phase 6). */
-const MENU_CAPTION_HEIGHT = 32;
-/** Thickness of a group separator in the popover (Phase 6). */
-const MENU_SEPARATOR_HEIGHT = 8;
+const MENU_CAPTION_HEIGHT = 30;
+/** A group separator in the popover: a hairline with 9px above and below (iOS 26). */
+const MENU_SEPARATOR_HEIGHT = 19;
+/** The popover's padding above its first row and below its last (iOS 26's inset menu); keep in sync with styles.css. */
+const MENU_PADDING = 10;
 /** Gap between the control and its menu. */
 const PICKER_MENU_GAP = 4;
 /** Minimum distance between the menu and the screen edge. */
@@ -415,6 +433,8 @@ export class Renderer {
   private readonly hostContents = new Map<ElementId, HTMLElement>();
   /** The `host` elements, adopted or still waiting for their content. */
   private readonly hosts = new Set<ElementId>();
+  /** The registered views (src/viewRegistry.ts) built for `registered` elements, by element: the name each was built for. */
+  private readonly registeredViews = new Map<ElementId, { name: string; instance: RegisteredViewInstance | undefined }>();
   private readonly hostSizes = new WeakMap<HTMLElement, { width: number; height: number }>();
   private readonly hostMeasures = new Map<string, { width: number; height: number }>();
   private readonly stopHostChanges: () => void;
@@ -433,6 +453,12 @@ export class Renderer {
   private readonly pressEffects: PressEffects;
   /** Text, links and files dragged in from outside the page (src/dragDrop.ts). */
   private readonly externalDrops: ExternalDrops;
+  /**
+   * How a dropped file reaches the app: base64 `data` in the event (a Swift
+   * app) or the `File` by reference (a React app in the same page sets
+   * `reference`; a dropped folder then comes as its files by path).
+   */
+  fileDrops: 'bytes' | 'reference' = 'bytes';
   private readonly pinches: PinchController;
   private readonly touches: TouchesController;
   private readonly touchPaging: TouchPaging;
@@ -515,16 +541,24 @@ export class Renderer {
     // `tapgesture` (or a menu label) handles the click alone. Elsewhere in
     // a list row, the row's one button (`rowAction`).
     const hit = event.target as HTMLElement | null;
-    const target = hit?.closest<HTMLElement>(
+    let target = hit?.closest<HTMLElement>(
       '.sb-button, .sb-navlink, .sb-navbar-back, .sb-navbar-more, .sb-navsplit-toggle, .sb-switch, .sb-sheet-scrim, ' +
         '.sb-toggle[data-sb-toggle-style="button"], .sb-toolbar .sb-toggle:not([data-sb-toggle-style]), ' +
         '.sb-tabbar-item, .sb-segment, .sb-picker-option, .sb-picker-menu-item, .sb-picker[data-sb-style="menu"], ' +
         '.sb-menu, .sb-tapgesture, .sb-stepper-button, .sb-alert-scrim, .sb-alert-ok, ' +
         // Phase 8: swipe action buttons, the edit-mode row control and selectable rows (the row sends `tap` itself)
         '.sb-swipe-action, .sb-listrow-control, .sb-listrow[data-sb-selectable], ' +
+        // A disclosure group's label, a collapsible section's header: a `tap` on the element toggles it
+        '.sb-disclosure-toggle, .sb-section[data-sb-collapsible] > .sb-section-header, .sb-section[data-sb-collapsible] .sb-sectionheader, ' +
         // A link in a rich text: innermost, so it wins over a tappable row around the text
         '.sb-link',
     ) ?? (hit ? rowAction(hit, this.root) : null);
+    // A link or button row of a list in edit mode is selected, not followed
+    // or pressed: the tap is the row's (its `tag`), as iOS selects the row then.
+    if (target?.classList.contains('sb-navlink') || target?.classList.contains('sb-button')) {
+      const row = target.closest<HTMLElement>('.sb-listrow[data-sb-selectable]');
+      if (row && row.closest('.sb-list')?.hasAttribute('data-sb-editing')) target = row;
+    }
     if (!target || !this.root.contains(target)) return;
     if (target.classList.contains('sb-link')) {
       const text = target.closest<HTMLElement>('.sb-text');
@@ -535,6 +569,19 @@ export class Renderer {
       this.onEvent({ type: 'link', id, value: url });
       return;
     }
+    const sectionHeader = target.classList.contains('sb-section-header') || target.classList.contains('sb-sectionheader');
+    if (target.classList.contains('sb-disclosure-toggle') || sectionHeader) {
+      // `DisclosureGroup` and `Section(isExpanded:)`: the tap toggles the
+      // element (a section's only in a sidebar-style list, where it collapses).
+      const section = sectionHeader;
+      const owner = target.closest<HTMLElement>(section ? '.sb-section' : '.sb-disclosuregroup');
+      const id = Number(owner?.dataset[ID_ATTR]);
+      if (!owner || !Number.isInteger(id)) return;
+      if (section && owner.closest<HTMLElement>('.sb-list')?.dataset['sbListStyle'] !== 'sidebar') return;
+      event.preventDefault();
+      this.onEvent({ type: 'tap', id });
+      return;
+    }
     if (this.interaction.handleClick(target)) {
       event.preventDefault();
       return;
@@ -588,7 +635,7 @@ export class Renderer {
       return;
     }
     if (target.classList.contains('sb-picker-menu-item')) {
-      // A popover row: a picker option (`select`) or a button / navlink (`tap`).
+      // A popover row: a picker option (`select`), a toggle, or a button / navlink (`tap`).
       if (!this.menu) return;
       const action = target.dataset['sbAction'];
       const id = Number(target.dataset['sbTarget']);
@@ -597,6 +644,7 @@ export class Renderer {
       event.preventDefault();
       this.closeMenu();
       if (action === 'tap') this.onEvent({ type: 'tap', id });
+      else if (action === 'toggle') this.onEvent({ type: 'toggle', id, value: target.getAttribute('aria-checked') !== 'true' });
       else if (Number.isInteger(index)) this.onEvent({ type: 'select', id, value: index });
       return;
     }
@@ -996,6 +1044,7 @@ export class Renderer {
       root,
       send: (event) => this.onEvent(event),
       nodeOf: (id) => this.nodes.get(id),
+      fileDrops: () => this.fileDrops,
       openContextMenu: (anchor, id) => this.openContextMenu(anchor, id),
       revealScreen: (screen) => this.revealScreen(screen),
       isMenuOpen: (id) => this.menu?.anchorId === id,
@@ -1229,6 +1278,7 @@ export class Renderer {
           this.syncFocus();
           // The focus the app moved shows or hides a screen's keyboard bar.
           if (this.focusedFieldId() !== focusedBefore && this.hasKeyboardToolbars()) this.layout();
+          this.castShadows();
           this.performScrolls(op.animation != null);
           this.performOffsetScrolls(op.animation != null);
           this.checkLazySpacers();
@@ -1246,6 +1296,55 @@ export class Renderer {
     }
   }
 
+  /**
+   * SwiftUI's `.shadow` on a container falls on each view it draws (its texts, shapes, images, controls and
+   * backgrounds), on their own shadows too, and not on the container as a whole unless a `.compositingGroup()` in
+   * between draws the views as one. Each box with a shadow (`data-sb-shadow`) hands its views the shadows to cast:
+   * its own, then those of the boxes around it, up to a compositing group (`--sb-shadow-filter`, which styles.css
+   * gives each drawn view's `filter`, and which a box that clips, masks or composites takes for itself). A box's own
+   * background, painted with its children inside, casts them as `box-shadow` instead.
+   */
+  private castShadows(): void {
+    const sources = this.root.querySelectorAll<HTMLElement>('[data-sb-shadow]');
+    const cast = new Set(this.root.querySelectorAll<HTMLElement>('[data-sb-shadow-cast]'));
+    if (sources.length === 0 && cast.size === 0) return;
+    const filters = new Map<HTMLElement, { filter: string; box: string }>();
+    // The shadows that reach the views inside `el` from the boxes around it, up to a compositing group or a drawn
+    // view, which takes those around it as one and hands none on.
+    const above = (el: HTMLElement): { filter: string; box: string } => {
+      for (let up = el.parentElement; up && up !== this.root; up = up.parentElement) {
+        if (up.dataset['sbComposite'] !== undefined || DRAWN_KINDS.has(up.dataset[KIND_ATTR] ?? '')) break;
+        const found = filters.get(up);
+        if (found) return found;
+      }
+      return { filter: '', box: '' };
+    };
+    // Document order: a box comes before the boxes inside it.
+    for (const el of sources) {
+      const outer = above(el);
+      const filter = `${el.dataset['sbShadow']} ${outer.filter}`.trim();
+      const box = [el.dataset['sbShadowBox'], outer.box].filter(Boolean).join(', ');
+      filters.set(el, { filter, box });
+      if (el.style.getPropertyValue('--sb-shadow-filter') !== filter) el.style.setProperty('--sb-shadow-filter', filter);
+    }
+    // A background painted on a box (its children inside) casts them as a box-shadow.
+    if (sources.length > 0) {
+      // A box that clips, masks or composites casts them for its background already, with what it holds.
+      for (const el of this.root.querySelectorAll<HTMLElement>('.sb-styled[data-sb-background]:not([data-sb-as-one])')) {
+        const { box } = filters.get(el) ?? above(el);
+        if (!box) continue;
+        if (el.style.boxShadow !== box) el.style.boxShadow = box;
+        el.dataset['sbShadowCast'] = '';
+        cast.delete(el);
+      }
+    }
+    // Those no shadow reaches any more.
+    for (const el of cast) {
+      el.style.boxShadow = '';
+      delete el.dataset['sbShadowCast'];
+    }
+  }
+
   /**
    * `withAnimation(_:completionCriteria:_:completion:)`: the pass's `commit`
    * carried a completion serial; once the animations its commit started have
@@ -1691,6 +1790,11 @@ export class Renderer {
     this.collectLayouts(result);
     if (this.applying === 0) this.flushGeometry();
     this.queueVisibilityCheck();
+    // `.statusBarHidden` on a screen that shows: the frame's drawn status bar fades (styles.css).
+    const statusHidden = this.root.querySelector('.sb-navscreen[data-sb-status-hidden]:not([hidden])') !== null;
+    if (document.documentElement.hasAttribute('data-sb-status-hidden') !== statusHidden) {
+      document.documentElement.toggleAttribute('data-sb-status-hidden', statusHidden);
+    }
     this.afterLayout?.();
     return changes;
   }
@@ -1818,10 +1922,23 @@ export class Renderer {
     const menu = div('sb-picker-menu');
     menu.setAttribute('role', 'menu');
     menu.dataset['sbFor'] = String(id);
-    let height = 0;
+    // No hairline at either end (a section first or last).
+    while (rows[0]?.kind === 'separator') rows = rows.slice(1);
+    while (rows[rows.length - 1]?.kind === 'separator') rows = rows.slice(0, -1);
+    const checks = rows.some((row) => row.kind === 'select' || row.kind === 'toggle');
+    // iOS indents the whole menu around its check column: section titles start with the plain titles.
+    if (checks) menu.dataset['sbChecks'] = '';
+    let height = 2 * MENU_PADDING;
     for (const row of rows) {
-      menu.append(menuRowElement(row));
-      height += row.kind === 'caption' ? MENU_CAPTION_HEIGHT : row.kind === 'separator' ? MENU_SEPARATOR_HEIGHT : PICKER_MENU_ROW;
+      menu.append(menuRowElement(row, checks));
+      height +=
+        row.kind === 'caption'
+          ? MENU_CAPTION_HEIGHT
+          : row.kind === 'separator'
+            ? MENU_SEPARATOR_HEIGHT
+            : (row.kind === 'tap' || row.kind === 'toggle') && row.subtitle
+              ? MENU_SUBTITLED_ROW
+              : PICKER_MENU_ROW;
     }
     // Anchor to the control: trailing edges aligned, below it when there is
     // room, else above; clamped inside the screen. A menu taller than the
@@ -1832,7 +1949,10 @@ export class Renderer {
     const width = Math.min(PICKER_MENU_WIDTH, Math.max(0, rootRect.width - 2 * PICKER_MENU_MARGIN));
     let left = anchorRect.right - rootRect.left - width;
     left = Math.max(PICKER_MENU_MARGIN, Math.min(left, rootRect.width - width - PICKER_MENU_MARGIN));
-    const belowTop = anchorRect.bottom - rootRect.top + PICKER_MENU_GAP;
+    // A toolbar button's menu grows out of the button and covers it (iOS 26);
+    // any other control's opens just under it.
+    const inToolbar = anchor.closest('.sb-toolbar') !== null;
+    const belowTop = inToolbar ? anchorRect.top - rootRect.top : anchorRect.bottom - rootRect.top + PICKER_MENU_GAP;
     const roomBelow = rootRect.height - PICKER_MENU_MARGIN - belowTop;
     const roomAbove = anchorRect.top - rootRect.top - PICKER_MENU_GAP - PICKER_MENU_MARGIN;
     const below = height <= roomBelow || (height > roomAbove && roomBelow >= roomAbove);
@@ -2007,6 +2127,34 @@ export class Renderer {
       this.hosts.add(id);
       this.adoptHostContent(id, el, props as HostProps);
     }
+    if (kind === 'registered') this.adoptRegistered(id, el, props as RegisteredProps);
+  }
+
+  /**
+   * A `registered` element's view (src/viewRegistry.ts): built for its name,
+   * given the new props after; a name nothing registered shows itself, as an
+   * unknown kind does. The element's own children are the native view's: on
+   * a page the stylesheet hides them.
+   */
+  private adoptRegistered(id: ElementId, el: HTMLElement, props: RegisteredProps): void {
+    const values = asRecord(props.props);
+    const current = this.registeredViews.get(id);
+    if (current && current.name === props.name) {
+      current.instance?.update?.(values);
+      return;
+    }
+    current?.instance?.dispose?.();
+    const name = props.name;
+    const instance = ViewRegistry.make(name, { id, props: values, send: (value) => this.onEvent({ type: 'registered', id, name, value }) });
+    this.registeredViews.set(id, { name, instance });
+    let content = instance?.element;
+    if (!content) {
+      content = div('sb-registered-missing');
+      content.textContent = name;
+    }
+    content.classList.add('sb-registered-content');
+    el.querySelector(':scope > .sb-registered-content')?.remove();
+    el.prepend(content);
   }
 
   /** A toolbar whose placement changed to or from `largeTitle` moves between its screen's content slot and large title. */
@@ -2419,6 +2567,7 @@ export class Renderer {
     this.noteScroll(id, kind, props);
     this.noteVisibility(id, kind, props);
     if (kind === 'host') this.adoptHostContent(id, el, props as HostProps);
+    if (kind === 'registered') this.adoptRegistered(id, el, props as RegisteredProps);
     if (kind === 'toolbar') this.rehomeToolbar(id, el, op);
     const newToken = el.dataset[ANIMATION_TOKEN];
     const tokenChanged = (previous?.tokenChanged ?? false) || (newToken !== undefined && newToken !== oldToken);
@@ -2654,6 +2803,8 @@ export class Renderer {
       this.hostContents.delete(id);
     }
     this.hosts.delete(id);
+    this.registeredViews.get(id)?.instance?.dispose?.();
+    this.registeredViews.delete(id);
     this.elements.delete(id);
     this.boxes.delete(id);
     this.dirty.delete(id);
@@ -2684,7 +2835,8 @@ interface OpenMenu {
 
 /** One row of a popover menu. */
 type MenuRow =
-  | { kind: 'tap'; id: ElementId; title: string; symbol: string | null; destructive: boolean; disabled: boolean }
+  | { kind: 'tap'; id: ElementId; title: string; subtitle: string | null; symbol: string | null; destructive: boolean; disabled: boolean }
+  | { kind: 'toggle'; id: ElementId; title: string; subtitle: string | null; symbol: string | null; isOn: boolean; disabled: boolean }
   | { kind: 'select'; id: ElementId; index: number; title: string; checked: boolean }
   | { kind: 'caption'; text: string }
   | { kind: 'text'; text: string }
@@ -2704,6 +2856,20 @@ function disabledOf(node: LayoutNode): boolean {
   return false;
 }
 
+/**
+ * A menu item's title and subtitle, as SwiftUI reads a menu label: its
+ * first text is the title, any after it the subtitle under it.
+ */
+function titlesOf(node: LayoutNode): { title: string; subtitle: string | null } {
+  const texts: string[] = [];
+  const visit = (n: LayoutNode): void => {
+    if (n.kind === 'text' && typeof n.props['text'] === 'string' && n.props['text'].trim().length > 0) texts.push(n.props['text'].trim());
+    n.children.forEach(visit);
+  };
+  visit(node);
+  return { title: texts[0] ?? '', subtitle: texts.length > 1 ? texts.slice(1).join(' ') : null };
+}
+
 /**
  * Turn a `menu`'s items into popover rows. A picker's options form their
  * own group, separated from neighbouring rows like iOS does; explicit
@@ -2726,12 +2892,16 @@ function collectMenuRows(items: readonly LayoutNode[], rows: MenuRow[] = []): Me
         rows.push({
           kind: 'tap',
           id: base.id,
-          title: textOf(base),
+          ...titlesOf(base),
           symbol: symbolOf(base),
           destructive: base.props['role'] === 'destructive',
           disabled: disabledOf(item),
         });
         break;
+      case 'toggle':
+        // A toggle in a menu is a checkable row (SwiftUI's), its label the title.
+        rows.push({ kind: 'toggle', id: base.id, ...titlesOf(base), symbol: symbolOf(base), isOn: base.props['isOn'] === true, disabled: disabledOf(item) });
+        break;
       case 'picker': {
         const raw = base.props['options'];
         const options = Array.isArray(raw) ? raw.map(String) : [];
@@ -2745,9 +2915,12 @@ function collectMenuRows(items: readonly LayoutNode[], rows: MenuRow[] = []): Me
         separate();
         break;
       case 'section': {
+        // An inline section, as iOS draws one: a hairline before and after it, its header a caption.
+        separate();
         const header = base.props['header'];
         if (typeof header === 'string' && header.length > 0) rows.push({ kind: 'caption', text: header });
         collectMenuRows(base.children, rows);
+        pendingSeparator = true;
         break;
       }
       case 'sectionheader': {
@@ -2777,44 +2950,60 @@ function collectMenuRows(items: readonly LayoutNode[], rows: MenuRow[] = []): Me
   return rows;
 }
 
-/** Build the DOM for one popover row (the renderer's click handler reads the data attributes). */
-function menuRowElement(row: MenuRow): HTMLElement {
+/**
+ * Build the DOM for one popover row (the renderer's click handler reads the
+ * data attributes). In a menu with checkable rows (`checks`), every item row
+ * keeps a leading column for the checkmark, as iOS does, so titles line up;
+ * an item's symbol follows the check, its subtitle sits under its title.
+ */
+function menuRowElement(row: MenuRow, checks: boolean): HTMLElement {
   switch (row.kind) {
-    case 'select': {
-      const item = document.createElement('button');
-      item.type = 'button';
-      item.className = 'sb-picker-menu-item';
-      item.setAttribute('role', 'menuitemradio');
-      item.setAttribute('aria-checked', String(row.checked));
-      item.dataset['sbAction'] = 'select';
-      item.dataset['sbTarget'] = String(row.id);
-      item.dataset['sbIndex'] = String(row.index);
-      const check = span('sb-picker-menu-check');
-      const glyph = renderSymbol('checkmark');
-      if (glyph) check.append(glyph);
-      const title = span('sb-picker-menu-title');
-      title.textContent = row.title;
-      item.append(check, title);
-      return item;
-    }
+    case 'select':
+    case 'toggle':
     case 'tap': {
       const item = document.createElement('button');
       item.type = 'button';
       item.className = 'sb-picker-menu-item';
-      item.setAttribute('role', 'menuitem');
-      item.dataset['sbAction'] = 'tap';
       item.dataset['sbTarget'] = String(row.id);
-      if (row.destructive) item.dataset['sbRole'] = 'destructive';
-      if (row.disabled) item.disabled = true;
+      item.dataset['sbAction'] = row.kind;
+      if (row.kind === 'select') {
+        item.setAttribute('role', 'menuitemradio');
+        item.setAttribute('aria-checked', String(row.checked));
+        item.dataset['sbIndex'] = String(row.index);
+      } else if (row.kind === 'toggle') {
+        item.setAttribute('role', 'menuitemcheckbox');
+        item.setAttribute('aria-checked', String(row.isOn));
+      } else {
+        item.setAttribute('role', 'menuitem');
+        if (row.destructive) item.dataset['sbRole'] = 'destructive';
+      }
+      if (row.kind !== 'select' && row.disabled) item.disabled = true;
+      if (checks) {
+        const check = span('sb-picker-menu-check');
+        const glyph = renderSymbol('checkmark');
+        if (glyph) check.append(glyph);
+        item.append(check);
+      }
+      const symbol = row.kind === 'select' ? null : row.symbol;
+      if (symbol) {
+        const holder = span('sb-picker-menu-symbol');
+        const glyph = renderSymbol(symbol);
+        if (glyph) holder.append(glyph);
+        holder.dataset['sbSymbol'] = symbol;
+        item.append(holder);
+      }
       const title = span('sb-picker-menu-title');
       title.textContent = row.title;
-      item.append(title);
-      if (row.symbol) {
-        const symbol = span('sb-picker-menu-symbol');
-        const glyph = renderSymbol(row.symbol);
-        if (glyph) symbol.append(glyph);
-        symbol.dataset['sbSymbol'] = row.symbol;
-        item.append(symbol);
+      const subtitle = row.kind === 'select' ? null : row.subtitle;
+      if (subtitle) {
+        const titles = span('sb-picker-menu-titles');
+        const sub = span('sb-picker-menu-subtitle');
+        sub.textContent = subtitle;
+        titles.append(title, sub);
+        item.append(titles);
+        item.dataset['sbSubtitled'] = '';
+      } else {
+        item.append(title);
       }
       return item;
     }
@@ -2837,6 +3026,11 @@ function menuRowElement(row: MenuRow): HTMLElement {
   }
 }
 
+/** Whether scrolling dismisses the keyboard; a page cannot drag it down, so `interactively` blurs as `immediately` does. */
+function dismissesKeyboard(mode: unknown): boolean {
+  return mode === true || mode === 'immediately' || mode === 'interactively';
+}
+
 /** Props as the engine reads them (untrusted JSON, so a plain record). */
 function asRecord(props: unknown): Record<string, unknown> {
   return typeof props === 'object' && props !== null ? (props as Record<string, unknown>) : {};
@@ -2886,6 +3080,9 @@ function createShell(kind: ElementKind): HTMLElement {
     case 'host':
       // The page's content element is adopted by the renderer (`adoptHostContent`).
       return div('sb-host');
+    case 'registered':
+      // Its view is built by the renderer (`adoptRegistered`).
+      return div('sb-registered');
     case 'button': {
       const el = document.createElement('button');
       el.type = 'button';
@@ -2973,6 +3170,25 @@ function createShell(kind: ElementKind): HTMLElement {
       SLOTS.set(el, slot);
       return el;
     }
+    case 'disclosuregroup': {
+      // The label (the first child) and the content below it, laid out as
+      // a stack; a button over the label and a chevron at its trailing
+      // edge, placed by layoutDom from the label's frame.
+      const el = document.createElement('div');
+      const slot = div('sb-slot');
+      const toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'sb-disclosure-toggle';
+      toggle.setAttribute('aria-expanded', 'false');
+      el.append(slot, toggle);
+      const chevron = renderSymbol('chevron.right');
+      if (chevron) {
+        chevron.classList.add('sb-disclosure-chevron');
+        el.append(chevron);
+      }
+      SLOTS.set(el, slot);
+      return el;
+    }
     case 'toggle': {
       const el = document.createElement('div');
       const label = div('sb-slot sb-toggle-label');
@@ -3828,7 +4044,7 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       applyRefreshable(el, list.refreshable === true, list.refreshing === true);
       // `.scrollContentBackground(.hidden)`: no grouped background (styles.css).
       if (list.background === 'hidden') el.dataset['sbBackground'] = 'hidden';
-      if (list.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
+      if (dismissesKeyboard(list.dismissesKeyboard)) el.dataset['sbDismissesKeyboard'] = 'true';
       applyEdgeEffect(el, list.edgeEffect);
       break;
     }
@@ -3859,7 +4075,7 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       applyRefreshable(el, scroll.refreshable === true, scroll.refreshing === true);
       if (scroll.snap === 'viewAligned' || scroll.snap === 'paging') el.dataset['sbSnap'] = scroll.snap;
       else delete el.dataset['sbSnap'];
-      if (scroll.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
+      if (dismissesKeyboard(scroll.dismissesKeyboard)) el.dataset['sbDismissesKeyboard'] = 'true';
       if (scroll.reportsPosition === true) el.dataset['sbReportsPosition'] = '';
       else delete el.dataset['sbReportsPosition'];
       applyEdgeEffect(el, scroll.edgeEffect);
@@ -3869,6 +4085,12 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
     case 'section':
       applySection(el, props as SectionProps);
       break;
+    case 'disclosuregroup': {
+      const expanded = (props as DisclosureGroupProps).expanded === true;
+      el.toggleAttribute('data-sb-expanded', expanded);
+      el.querySelector<HTMLElement>(':scope > .sb-disclosure-toggle')?.setAttribute('aria-expanded', String(expanded));
+      break;
+    }
     case 'textfield':
       applyTextField(el as HTMLInputElement | HTMLTextAreaElement, props as TextFieldProps);
       break;
@@ -4018,6 +4240,9 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
     case 'lazyspacer':
       el.dataset['axis'] = (props as LazySpacerProps).axis === 'horizontal' ? 'horizontal' : 'vertical';
       break;
+    case 'registered':
+      // The renderer builds its view (`adoptRegistered`).
+      break;
     default: {
       const unknown: never = kind;
       throw new RendererError(`Unknown element kind ${String(unknown)}`);
@@ -4164,9 +4389,10 @@ function applyShape(el: HTMLElement, props: ShapeProps): void {
     s.border = `${width}px ${stroke.dash?.length ? 'dashed' : 'solid'} ${color}`;
     el.dataset['sbStroke'] = stroke.inset ? 'inset' : 'center';
   }
-  // A fill with a drop shadow (`.shadow(.drop(…))` on the style).
+  // A fill with a drop shadow (`.shadow(.drop(…))` on the style), then the shadows of the boxes around the shape
+  // (castShadows), which styles.css gives a shape without one of its own.
   const shadow = (props.fill as { shadow?: ShapeShadow } | null)?.shadow;
-  s.filter = shadow && typeof shadow === 'object' ? shapeShadowCSS(shadow) : '';
+  s.filter = shadow && typeof shadow === 'object' ? `${shapeShadowCSS(shadow)} var(--sb-shadow-filter, )` : '';
   const mask = shapeTrimMask(props.trim);
   if (mask) {
     s.setProperty('mask-image', mask);
@@ -4409,6 +4635,10 @@ function applySection(el: HTMLElement, props: SectionProps): void {
     header.textContent = props.header ?? '';
     header.hidden = !props.header;
   }
+  // `Section(isExpanded:)`: a chevron on the header (a string one, or the
+  // `sectionheader` view) in a sidebar-style list (styles.css); its tap toggles.
+  el.toggleAttribute('data-sb-collapsible', props.collapsible === true);
+  el.toggleAttribute('data-sb-expanded', props.collapsible === true && props.expanded !== false);
   if (footer) {
     footer.textContent = props.footer ?? '';
     footer.hidden = !props.footer;
@@ -4771,15 +5001,29 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   }
 
   // Phase 6 visual effects: CSS only, the layout engine never sees them.
-  const effects = effectsCSS(style);
+  // A shadow is not the box's own filter: as SwiftUI's `.shadow` on a container, it falls on each view the box draws
+  // (castShadows). A box that clips, masks or composites what it holds draws it as one, so the shadows around it are
+  // cast by it too (`--sb-shadow-filter`, which castShadows sets).
+  const effects = effectsCSS(style, { shadow: false });
   if (effects.transform) s.transform = effects.transform;
   if (effects.transformOrigin) s.transformOrigin = effects.transformOrigin;
-  if (effects.filter) s.filter = effects.filter;
-  // `.colorMultiply`: an SVG filter, first so the other filters see its colors.
-  if (style.colorMultiply) {
-    const multiply = colorMultiplyFilter(style.colorMultiply, el);
-    s.filter = effects.filter ? `${multiply} ${effects.filter}` : multiply;
-  }
+  const multiply = style.colorMultiply ? colorMultiplyFilter(style.colorMultiply, el) : '';
+  const asOne = style.compositingGroup === true || style.cornerRadius != null || style.clipped === true || (style.mask != null && typeof style.mask === 'object');
+  const filter = [multiply, effects.filter ?? '', asOne ? 'var(--sb-shadow-filter, )' : ''].filter(Boolean).join(' ');
+  if (filter) s.filter = filter;
+  if (asOne) el.dataset['sbAsOne'] = '';
+  else delete el.dataset['sbAsOne'];
+  if (style.shadow) {
+    el.dataset['sbShadow'] = `drop-shadow(${shadowCSS(style.shadow)})`;
+    el.dataset['sbShadowBox'] = shadowCSS(style.shadow);
+  } else if (el.dataset['sbShadow'] !== undefined) {
+    delete el.dataset['sbShadow'];
+    delete el.dataset['sbShadowBox'];
+    s.removeProperty('--sb-shadow-filter');
+    s.removeProperty('--sb-shadow-box');
+  }
+  if (style.compositingGroup) el.dataset['sbComposite'] = '';
+  else delete el.dataset['sbComposite'];
   // Phase 7: `.hidden()` keeps the box (the engine lays it out) but draws
   // nothing and takes no input; `.mask { }` clips the box to a style's alpha.
   if (effects.hidden) {
@@ -4864,6 +5108,8 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   if (style.animationToken != null) el.dataset[ANIMATION_TOKEN] = String(style.animationToken);
   // A `Label`'s icon: tinted in list rows (styles.css).
   if (style.labelIcon) el.dataset['sbLabelIcon'] = '';
+  // `.textSelection(.enabled)`: the text below can be selected (styles.css).
+  el.toggleAttribute('data-sb-text-selection', style.textSelection === true);
   if (style.animation) ANIMATIONS.set(el, style.animation);
   if (style.transition) setTransition(el, style.transition);
 

package/src/scrollTransition.ts

@@ -35,7 +35,8 @@ export function setScrollTransition(el: HTMLElement, style: Style): void {
     }
     return;
   }
-  const own = effectsCSS(style);
+  // Its shadow is cast by the views it draws (renderer.ts castShadows), not by it.
+  const own = effectsCSS(style, { shadow: false });
   registered.set(el, {
     spec,
     base: { transform: own.transform ?? '', filter: own.filter ?? '', opacity: style.opacity ?? 1 },