@swiftbrowser/web 0.18.3 → 0.19.0

package/src/renderer.ts

@@ -116,6 +116,7 @@ import {
   type ScrollViewProps,
   type SearchFieldProps,
   type SectionProps,
+  type DisclosureGroupProps,
   type ShapeProps,
   type SheetProps,
   type SpacerProps,
@@ -304,6 +305,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 +323,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. */
@@ -515,16 +522,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 +550,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 +616,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 +625,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;
     }
@@ -1691,6 +1720,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 +1852,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 +1879,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);
@@ -2684,7 +2734,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 +2755,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 +2791,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 +2814,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 +2849,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 +2925,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>) : {};
@@ -2973,6 +3066,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 +3940,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 +3971,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 +3981,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;
@@ -4409,6 +4527,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;
@@ -4864,6 +4986,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);