@swiftbrowser/web 0.26.2 → 0.26.4

package/src/layout/types.ts

@@ -5,6 +5,7 @@
  */
 
 import type { AssetCatalog } from '../assets';
+import type { Platform } from '../protocol';
 
 /**
  * A size proposal from a parent to a child. `null` means "whatever you want",
@@ -97,6 +98,8 @@ export interface LayoutEnvironment {
   dynamicTypeSize: DynamicTypeSize;
   devicePixelRatio: number;
   colorScheme: 'light' | 'dark';
+  /** The platform whose idiom the engine lays out for (docs/notes/macos.md); iOS when absent. */
+  platform?: Platform;
   /**
    * Phase 5: the app's asset catalog manifest, for the intrinsic size of
    * named images. Absent (or empty) when the app has no catalog; named

package/src/layout/typography.ts

@@ -11,6 +11,7 @@
  * leading (body 22): the distance between a paragraph's lines (`LEADINGS`).
  */
 
+import type { Platform } from '../protocol';
 import type { DynamicTypeSize, FontFamily, LayoutEnvironment, ResolvedFont } from './types';
 
 export type TextStyle =
@@ -63,6 +64,24 @@ export const TEXT_STYLE_SIZES: Record<TextStyle, readonly number[]> = {
   caption2: [11, 11, 11, 11, 13, 15, 17, 20, 24, 29, 34, 40],
 };
 
+/**
+ * The macOS text styles (HIG "Typography" > "macOS built-in text styles"),
+ * one size each: the Mac has no Dynamic Type. Body is 13.
+ */
+export const MAC_TEXT_STYLE_SIZES: Readonly<Record<TextStyle, number>> = {
+  largeTitle: 26,
+  title: 22,
+  title2: 17,
+  title3: 15,
+  headline: 13,
+  body: 13,
+  callout: 12,
+  subheadline: 11,
+  footnote: 10,
+  caption: 10,
+  caption2: 10,
+};
+
 /**
  * The HIG's leading for the standard (Large) point sizes: the distance
  * between the baselines of a paragraph's lines, which SwiftUI keeps (a
@@ -122,8 +141,9 @@ export function sizeCategoryIndex(size: DynamicTypeSize): number {
   return index < 0 ? LARGE_INDEX : index;
 }
 
-/** Point size of a text style at a Dynamic Type size category. */
-export function textStyleSize(style: TextStyle, size: DynamicTypeSize): number {
+/** Point size of a text style at a Dynamic Type size category (on the Mac, its one size). */
+export function textStyleSize(style: TextStyle, size: DynamicTypeSize, platform: Platform = 'ios'): number {
+  if (platform === 'macos') return MAC_TEXT_STYLE_SIZES[style];
   const row = TEXT_STYLE_SIZES[style];
   return row[sizeCategoryIndex(size)] ?? row[LARGE_INDEX] ?? 17;
 }
@@ -166,9 +186,9 @@ export function makeFont(
   return font;
 }
 
-/** Body text for the current `dynamicTypeSize` (17/20.33 at Large). */
+/** Body text for the current `dynamicTypeSize` (17/20.33 at Large; 13 on the Mac). */
 export function defaultFont(env: LayoutEnvironment): ResolvedFont {
-  return makeFont('system', textStyleSize('body', env.dynamicTypeSize), 400);
+  return makeFont('system', textStyleSize('body', env.dynamicTypeSize, env.platform), 400);
 }
 
 /**
@@ -199,13 +219,14 @@ export function resolveFont(
   let defaultWeight = 400;
   let isNewFont = false;
   if (isTextStyle(textStyle)) {
-    size = textStyleSize(textStyle, env.dynamicTypeSize);
+    size = textStyleSize(textStyle, env.dynamicTypeSize, env.platform);
     if (textStyle === 'headline') defaultWeight = 600;
     isNewFont = true;
   } else if (typeof fixedSize === 'number' && Number.isFinite(fixedSize) && fixedSize > 0) {
     size = fixedSize;
     const relativeTo = font['relativeTo'];
-    if (isTextStyle(relativeTo)) {
+    // The Mac has no Dynamic Type: a fixed size stays as given.
+    if (isTextStyle(relativeTo) && env.platform !== 'macos') {
       const base = TEXT_STYLE_SIZES[relativeTo][LARGE_INDEX] ?? 17;
       size = fixedSize * (textStyleSize(relativeTo, env.dynamicTypeSize) / base);
     }

package/src/layoutDom.ts

@@ -702,6 +702,8 @@ function applyChrome(
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
     case 'stepper':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-stepper-control'), chrome?.['control'], box);
+      // The Mac idiom: the arrows, up over down (styles.css).
+      setFlag(el, 'sbArrows', chrome?.['arrows'] ? '' : null);
       return;
     case 'slider': {
       // The `label` child is hidden (iOS draws none) and names the slider, as VoiceOver reads it.
@@ -715,6 +717,8 @@ function applyChrome(
         el.removeAttribute('aria-labelledby');
       }
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-track'), chrome?.['track'], box);
+      // The Mac idiom: the round knob (styles.css).
+      setFlag(el, 'sbKnob', chrome?.['knob'] ? '' : null);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-fill'), chrome?.['fill'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-thumb'), chrome?.['thumb'], box);
       return;
@@ -722,6 +726,8 @@ function applyChrome(
     case 'datepicker':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-date'), chrome?.['date'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-time'), chrome?.['time'], box);
+      // The Mac idiom: the date and time as bordered fields (styles.css).
+      setFlag(el, 'sbFields', chrome?.['fields'] ? '' : null);
       return;
     case 'alert': {
       // Phase 8: the card(s), the centered title / message lines and the
@@ -742,6 +748,8 @@ function applyChrome(
       if (message && texts?.['message']) setTextLayout(message, texts['message']);
       placeChrome(part('sb-alert-ok'), chrome?.['ok'], box);
       el.toggleAttribute('data-sb-header', Boolean(chrome?.['title'] || chrome?.['message']));
+      // The Mac idiom: the alert as a panel (styles.css).
+      setFlag(el, 'sbPanel', chrome?.['panel'] ? '' : null);
       const first = chrome?.['button0'];
       const second = chrome?.['button1'];
       el.dataset['sbLayout'] = first && second && first.y === second.y && !chrome?.['button2'] ? 'row' : 'stack';
@@ -750,7 +758,34 @@ function applyChrome(
       }
       return;
     }
+    case 'menu':
+      // The Mac idiom: a pull-down button around the label (styles.css).
+      setFlag(el, 'sbPulldown', chrome?.['pulldown'] ? '' : null);
+      return;
+    case 'button': {
+      // The Mac idiom: an automatic button the engine bordered (styles.css);
+      // in a list row the button is drawn at its own frame on the row
+      // (`inset`, the frame in the row's coordinates).
+      // The rect the border is drawn at: the engine's (a bar item's slot) or
+      // the button's own frame; `inset` when it is not the element's box.
+      const bordered = chrome?.['bordered'];
+      const rect = bordered ?? frame;
+      const inset = bordered !== undefined && (box.x !== rect.x || box.y !== rect.y || box.width !== rect.width || box.height !== rect.height);
+      setFlag(el, 'sbBordered', bordered ? (inset ? 'inset' : '') : null);
+      const vars: [string, string][] = inset
+        ? [['--sb-bordered-left', `${rect.x - box.x}px`], ['--sb-bordered-top', `${rect.y - box.y}px`], ['--sb-bordered-width', `${rect.width}px`], ['--sb-bordered-height', `${rect.height}px`]]
+        : [['--sb-bordered-left', ''], ['--sb-bordered-top', ''], ['--sb-bordered-width', ''], ['--sb-bordered-height', '']];
+      for (const [name, value] of vars) {
+        if (el.style.getPropertyValue(name) !== value) {
+          if (value) el.style.setProperty(name, value);
+          else el.style.removeProperty(name);
+        }
+      }
+      return;
+    }
     case 'toggle': {
+      // The Mac idiom: a checkbox at the switch's rect (styles.css).
+      setFlag(el, 'sbCheckbox', chrome?.['checkbox'] ? '' : null);
       const sw = el.querySelector<HTMLElement>(':scope > .sb-switch');
       const rect = chrome?.['switch'] ?? {
         x: frame.x + frame.width - SWITCH_SIZE.width,
@@ -761,10 +796,22 @@ function applyChrome(
       return;
     }
     case 'disclosuregroup': {
-      // The chevron at the label's trailing edge, the toggle over the label (the first child's frame).
-      const label = node.children[0] ? result.frames.get(node.children[0].id) : undefined;
       const chevron = el.querySelector<HTMLElement>(':scope > .sb-disclosure-chevron');
       const toggle = el.querySelector<HTMLElement>(':scope > .sb-disclosure-toggle');
+      // In a list the group is an outline (engine.ts `outlineRows`): its label
+      // and content are rows (styles.css draws them as the card's), the toggle
+      // lies over the label's row and the chevron sits at that row's trailing
+      // edge, centred as a link's is.
+      const outline = chrome?.['toggle'];
+      setFlag(el, 'sbOutline', outline ? '' : null);
+      if (outline) {
+        placeChrome(toggle, outline, box);
+        const rect = chrome?.['chevron'];
+        placeChrome(chevron, rect ? { x: rect.x + (rect.width - CHEVRON_SIZE) / 2, y: rect.y + (rect.height - CHEVRON_SIZE) / 2, width: CHEVRON_SIZE, height: CHEVRON_SIZE } : undefined, box);
+        return;
+      }
+      // The chevron at the label's trailing edge, the toggle over the label (the first child's frame).
+      const label = node.children[0] ? result.frames.get(node.children[0].id) : undefined;
       if (label) {
         placeChrome(chevron, { x: frame.x + frame.width - CHEVRON_SIZE - 2, y: label.y + (label.height - CHEVRON_SIZE) / 2, width: CHEVRON_SIZE, height: CHEVRON_SIZE }, box);
         placeChrome(toggle, { x: frame.x, y: label.y, width: frame.width, height: label.height }, box);
@@ -830,6 +877,27 @@ function applyChrome(
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
       bindScrollEdgeBottom(el, chrome?.['bottomInset'], extent);
+      // The Mac idiom's columns form (`data-sb-form-columns`, styles.css):
+      // the label column's texts (chrome `formLabel<i>`) as spans in the
+      // content, as many as the engine placed.
+      setFlag(el, 'sbFormColumns', chrome?.['columns'] ? '' : null);
+      if (content) {
+        const texts = result.chromeText.get(node.id);
+        const labels = content.querySelectorAll<HTMLElement>(':scope > .sb-form-label');
+        let i = 0;
+        for (; chrome?.[`formLabel${i}`]; i++) {
+          let label = labels[i] ?? null;
+          if (!label) {
+            label = document.createElement('span');
+            label.className = 'sb-form-label';
+            content.append(label);
+          }
+          placeChrome(label, chrome[`formLabel${i}`], frame);
+          const layout = texts?.[`formLabel${i}`];
+          if (layout) setTextLayout(label, layout);
+        }
+        for (let extra = i; extra < labels.length; extra++) labels[extra]!.remove();
+      }
       return;
     }
     case 'scrollview': {
@@ -884,11 +952,17 @@ function applyChrome(
         bar.style.paddingTop = `${top}px`;
         bar.style.paddingBottom = `${bottom}px`;
       }
+      // The Mac idiom: a unified title bar (styles.css lays its title out leading-aligned).
+      setFlag(el, 'sbUnified', chrome?.['unified'] ? '' : null);
+      // The Mac idiom: a sheet's title bar (the title leading, 13 bold).
+      setFlag(el, 'sbSheetBar', chrome?.['sheetBar'] ? '' : null);
       syncBarGlass(result, node, el, chrome, frame, isNew, changes);
       // The `keyboard` toolbars' bar above the keyboard while a text input of the screen is focused.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-keyboard-bar'), chrome?.['keyboardBar'], frame);
       // iOS 26 in a tab view: the search field under the title (styles.css).
       setFlag(el, 'sbSearchTop', chrome?.['searchTop'] ? '' : null);
+      // The Mac idiom: the search field in the title bar (styles.css).
+      setFlag(el, 'sbSearchBar', chrome?.['searchBar'] ? '' : null);
       const largeRect = chrome?.['largeTitle'];
       if (largeTitle) {
         if (largeRect) {
@@ -923,6 +997,17 @@ function applyChrome(
           if (inlineTitle.style.lineHeight !== lineHeight) inlineTitle.style.lineHeight = lineHeight;
         }
       }
+      // The Mac idiom: the subtitle under the title in a unified title bar (chrome `subtitle`, hidden otherwise).
+      const subtitleEl = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-subtitle');
+      if (subtitleEl) {
+        const subtitleRect = chrome?.['subtitle'];
+        placeChrome(subtitleEl, subtitleRect, frame);
+        if (subtitleRect) {
+          if (texts?.['subtitle']) setFont(subtitleEl, texts['subtitle'].font);
+          const lineHeight = `${subtitleRect.height}px`;
+          if (subtitleEl.style.lineHeight !== lineHeight) subtitleEl.style.lineHeight = lineHeight;
+        }
+      }
       // The More button of the collapsed `secondary` items, at the trailing end.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-more'), chrome?.['more'], frame);
       const back = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-back');
@@ -956,6 +1041,8 @@ function applyChrome(
       setFlag(el, 'sbFloating', chrome?.['floating'] ? '' : null);
       // iPadOS: in a regular width, a centered form sheet (styles.css).
       setFlag(el, 'sbForm', chrome?.['form'] ? '' : null);
+      // The Mac idiom: a bottom bar with the sheet's actions (styles.css).
+      setFlag(el, 'sbActions', chrome?.['actions'] ? '' : null);
       return;
     }
     case 'tabview': {
@@ -963,6 +1050,8 @@ function applyChrome(
       const barRect = chrome?.['bar'];
       if (!bar || !barRect) return;
       placeChrome(bar, barRect, box);
+      // The Mac idiom: the bar is a segmented control at the top of the content (styles.css).
+      setFlag(el, 'sbTabsTop', chrome?.['top'] ? '' : null);
       // Items are the 49px row at the top of the bar; the rest is the safe area.
       const items = Array.from(bar.children) as HTMLElement[];
       items.forEach((item, i) => placeChrome(item, chrome?.[`item${i}`], barRect));
@@ -1006,7 +1095,9 @@ function applyChrome(
       if (node.props['style'] === 'segmented') {
         // In a navigation bar item the control is the bar's glass capsule (engine `bar`).
         el.toggleAttribute('data-sb-bar', chrome?.['bar'] !== undefined);
-        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), frame, box);
+        // The Mac idiom: the label before the control (engine `label`, `track`).
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), chrome?.['track'] ?? frame, box);
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-label'), chrome?.['label'], box);
         const segments = el.querySelectorAll<HTMLElement>(':scope > .sb-segment');
         segments.forEach((segment, i) => placeChrome(segment, chrome?.[`segment${i}`], box));
       } else if (node.props['style'] === 'inline') {
@@ -1017,6 +1108,8 @@ function applyChrome(
       } else {
         placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-label'), chrome?.['label'], box);
         placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-value'), chrome?.['value'], box);
+        // The Mac idiom: the value in a pop-up button (styles.css).
+        setFlag(el, 'sbPopup', chrome?.['popup'] ? '' : null);
       }
       return;
     }

package/src/main.ts

@@ -2,7 +2,7 @@
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
 import { ChromeColor } from './chromeColor';
-import { installDeviceFrame } from './deviceFrame';
+import { frameFor, installDeviceFrame } from './deviceFrame';
 import { applyPageMode, decidePageMode, installViewportReadout, readViewportInsets, watchKeyboard, watchViewport, type PageMode } from './deviceMode';
 import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
 import { createMockApp } from './mock';
@@ -202,7 +202,7 @@ function currentTypeSize(): DynamicTypeSize {
  */
 function applyTypeSize(size: DynamicTypeSize, persist: boolean): void {
   device.dataset['typeSize'] = size;
-  applyTypeSizeVariables(device, size);
+  applyTypeSizeVariables(device, size, renderer.platform);
   // The layout engine resolves text styles for this size and re-lays out.
   renderer.setEnvironment({ dynamicTypeSize: size });
   if (typeSizeSelect.value !== size) typeSizeSelect.value = size;
@@ -237,6 +237,8 @@ function currentSizeClass(): HorizontalSizeClass {
 }
 /** The size class last sent in an `environment` event (null before the first). */
 let sentSizeClass: HorizontalSizeClass | null = null;
+/** The platform last sent in an `environment` event (null before the first). */
+let sentPlatform: string | null = null;
 
 if (deviceMode) {
   // `#screen` fills the viewport (styles.css); the renderer re-reads its size
@@ -267,9 +269,12 @@ if (deviceMode) {
   // app in an iPhone, an iPad or no device; the renderer re-reads the
   // screen's size when it changes, and Swift hears a new size class.
   const sizeClassMayHaveChanged = (): void => {
-    if (sentSizeClass !== null && currentSizeClass() !== sentSizeClass) sendEnvironment();
+    // The Mac's text styles are its own: the device's variables follow the platform.
+    applyTypeSizeVariables(device, currentTypeSize(), renderer.platform);
+    if (sentSizeClass !== null && (currentSizeClass() !== sentSizeClass || renderer.platform !== sentPlatform)) sendEnvironment();
   };
-  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged });
+  // An app built for macOS (docs/notes/macos.md) starts in a Mac window.
+  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged, preferred: frameFor(registeredApp()?.platform) });
   watchViewport(sizeClassMayHaveChanged);
 }
 
@@ -303,12 +308,16 @@ function sendEnvironment(): void {
   // Phase 8: every environment event carries the scene phase.
   const scenePhase = currentScenePhase();
   sentScenePhase = scenePhase;
+  // The platform the renderer draws (docs/notes/macos.md).
+  const platform = renderer.platform;
+  sentPlatform = platform;
   dispatch({
     type: 'environment',
     colorScheme: currentTheme(),
     dynamicTypeSize: currentTypeSize(),
     horizontalSizeClass,
     scenePhase,
+    platform,
   });
 }
 

package/src/protocol.ts

@@ -623,6 +623,8 @@ export interface ScrollViewProps {
 export type ListStyle = 'plain' | 'insetGrouped' | 'grouped' | 'sidebar';
 export interface ListProps {
   style?: ListStyle;
+  /** A `Form`: on a Mac the page lays its rows out in the columns style (labels in a column before their controls). */
+  form?: boolean;
 }
 export interface SectionProps {
   header: string | null;
@@ -679,6 +681,8 @@ export type NavStackProps = Record<string, never>;
 export type NavDisplayMode = 'automatic' | 'large' | 'inline';
 export interface NavScreenProps {
   title: string;
+  /** `.navigationSubtitle`: a second line under the title in a Mac's unified title bar, after it in a plain one. */
+  subtitle?: string;
   displayMode: NavDisplayMode;
   /** 0 for the root screen; the renderer draws a back button when > 0. */
   depth: number;
@@ -1782,6 +1786,17 @@ export function horizontalSizeClassFor(width: number): HorizontalSizeClass {
   return Number.isFinite(width) && width >= REGULAR_WIDTH_MIN ? 'regular' : 'compact';
 }
 
+/**
+ * The platform the app is drawn as (docs/notes/macos.md): `ios`, the
+ * default, or `macos`. The renderer draws the platform's idiom and reports
+ * it in the first `environment` event; it never changes in a session.
+ */
+export type Platform = 'ios' | 'macos';
+
+export interface EnvironmentEvent {
+  platform?: Platform;
+}
+
 // ---------------------------------------------------------------------------
 // Phase 7: charts (docs/ops-protocol.md, "Phase 7"). Swift turns data into
 // unit coordinates (0...1 of the plot rectangle, y top → bottom); the renderer

package/src/renderer.ts

@@ -148,6 +148,7 @@ import {
   type CanvasProps,
   type Color,
   type LazySpacerProps,
+  type Platform,
 } from './protocol';
 import {
   combineDateSeconds,
@@ -361,6 +362,8 @@ const DEFAULT_SAFE_AREA = { top: 59, leading: 0, bottom: 34, trailing: 0 };
 export interface RendererEnvironment {
   dynamicTypeSize: DynamicTypeSize;
   colorScheme: ColorScheme;
+  /** The platform drawn (docs/notes/macos.md): iOS unless the page says macOS. */
+  platform: Platform;
 }
 
 export class Renderer {
@@ -473,7 +476,7 @@ export class Renderer {
    */
   private engine: LayoutPass | null = null;
   private engineEnvKey = '';
-  private environment: RendererEnvironment = { dynamicTypeSize: 'large', colorScheme: 'light' };
+  private environment: RendererEnvironment = { dynamicTypeSize: 'large', colorScheme: 'light', platform: 'ios' };
   /** Phase 5: the app's asset catalog manifest (empty until `setAssetCatalog`). */
   private assets: AssetCatalog = EMPTY_CATALOG;
   /** The `<style>` holding the catalog colors as custom properties (see `setAssetCatalog`). */
@@ -1464,18 +1467,26 @@ export class Renderer {
   // -------------------------------------------------------------------------
 
   /**
-   * Set the device environment (Dynamic Type size, color scheme) and re-lay
-   * the tree out. The page calls this on boot and whenever a control changes.
+   * Set the device environment (Dynamic Type size, color scheme, platform)
+   * and re-lay the tree out. The page calls this on boot and whenever a
+   * control changes. The platform is also on the document
+   * (`html[data-sb-platform]`), which the stylesheet themes by.
    */
   setEnvironment(environment: Partial<RendererEnvironment>): void {
     const next = { ...this.environment, ...environment };
-    if (next.dynamicTypeSize === this.environment.dynamicTypeSize && next.colorScheme === this.environment.colorScheme) {
+    if (next.dynamicTypeSize === this.environment.dynamicTypeSize && next.colorScheme === this.environment.colorScheme && next.platform === this.environment.platform) {
       return;
     }
     this.environment = next;
+    this.root.ownerDocument.documentElement.dataset['sbPlatform'] = next.platform;
     if (this.commits > 0) this.layout();
   }
 
+  /** The platform drawn (`setEnvironment`). */
+  get platform(): Platform {
+    return this.environment.platform;
+  }
+
   /**
    * Phase 5: give the renderer the app's asset catalog manifest (src/assets.ts).
    * Named images take their intrinsic size and `src` from it, and every
@@ -1589,6 +1600,7 @@ export class Renderer {
       dynamicTypeSize: this.environment.dynamicTypeSize,
       devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
       colorScheme: this.environment.colorScheme,
+      platform: this.environment.platform,
       assets: this.assets,
       ...(this.contentHeight ? { contentHeight: true } : {}),
       ...(this.keyboard > 0 ? { keyboard: this.keyboard } : {}),
@@ -3151,6 +3163,9 @@ function createShell(kind: ElementKind): HTMLElement {
       if (chevron) back.append(chevron);
       back.append(span('sb-navbar-back-label'));
       const inlineTitle = span('sb-navbar-title');
+      // `.navigationSubtitle`: under the title in a Mac's unified title bar (chrome.subtitle).
+      const subtitle = span('sb-navbar-subtitle');
+      subtitle.hidden = true;
       // The More button of the collapsed `secondary` items (chrome.more).
       const more = document.createElement('button');
       more.type = 'button';
@@ -3160,7 +3175,7 @@ function createShell(kind: ElementKind): HTMLElement {
       more.hidden = true;
       const ellipsis = renderSymbol('ellipsis');
       if (ellipsis) more.append(ellipsis);
-      bar.append(back, inlineTitle, div('sb-navbar-trailing'), more);
+      bar.append(back, inlineTitle, subtitle, div('sb-navbar-trailing'), more);
       const body = div('sb-navscreen-body');
       const slot = div('sb-slot sb-navscreen-content');
       // The `keyboard` toolbars' bar (chrome `keyboardBar`), under their items.
@@ -4775,6 +4790,11 @@ function applyNavScreen(el: HTMLElement, props: NavScreenProps): void {
   const largeTitle = largeTitleOf(el);
   // A large title that scrolls away collapses into the inline one (shown
   // with `data-sb-collapsed`, src/largeTitle.ts).
+  const subtitleEl = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-subtitle');
+  if (subtitleEl) {
+    const subtitle = props.subtitle ?? '';
+    if (subtitleEl.textContent !== subtitle) subtitleEl.textContent = subtitle;
+  }
   if (inlineTitle) {
     const appearing = inlineTitle.textContent === '' && title !== '' && inlineTitle.isConnected;
     inlineTitle.textContent = title;
@@ -4843,8 +4863,13 @@ function applyPicker(el: HTMLElement, props: PickerProps): void {
     el.removeAttribute('aria-haspopup');
     el.removeAttribute('aria-expanded');
     // The gray track sits at the control's frame (which, in a list row, is
-    // narrower than the row box the element occupies).
+    // narrower than the row box the element occupies); the label shows only
+    // where the engine places it (the Mac idiom).
     el.append(div('sb-segment-track'));
+    const segmentedLabel = span('sb-picker-label');
+    segmentedLabel.textContent = label;
+    segmentedLabel.hidden = true;
+    el.append(segmentedLabel);
     options.forEach((option, index) => {
       const segment = document.createElement('button');
       segment.type = 'button';