@swiftbrowser/web 0.5.1 → 0.5.3

package/README.md

@@ -308,7 +308,9 @@ scripts/build-wasm.sh Todos    # the Todos example only
    `sessionStorage['sb-state:<App>']`. On boot the snapshot is removed from
    storage and passed to the new module as the WASI environment variable
    `SB_STATE=<json>`, e.g. `SB_STATE={"ContentView#0":3}`. Modules without the
-   snapshot exports (Phase 1) are reloaded without state.
+   snapshot exports (Phase 1) are reloaded without state. This is the dev
+   server's only (`import.meta.hot`): a production build never stashes or
+   restores state, so a reload of a built site starts fresh.
 
 Mock mode never stashes state. `window.__sb.snapshotState()` returns the
 current snapshot for inspection.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/layout/engine.ts

@@ -173,6 +173,11 @@ const SHEET_MEDIUM_HEIGHT = 433;
 // iOS 26: without a grabber a sheet's content (and a navigation bar's row)
 // starts 16 below its top.
 const SHEET_CONTENT_TOP = 16;
+// iPadOS: in a regular width a sheet is a form sheet, a card centered on the
+// screen at UIKit's form-sheet size (clamped to the screen less a margin),
+// whatever its detents; a full-screen cover stays full screen.
+const FORM_SHEET: Size = { width: 540, height: 620 };
+const FORM_SHEET_MARGIN = 20;
 const LIST_INSET = 16;
 const LIST_CELL_PADDING = 16;
 // iOS 26 (measured in the iOS 26.2 simulator, Examples/Fidelity, in thirds
@@ -200,7 +205,7 @@ const LIST_SECTION_GAP = 107 / 3;
 const LIST_SECTION_GAP_AFTER_FOOTER = 74 / 3;
 const LIST_CHEVRON_WIDTH = 20;
 // Phase 4.
-// iOS 26: the tab bar is a 62-tall glass capsule floating 22 above the bottom
+// iOS 26: the tab bar is a 62-tall glass capsule floating 21 above the bottom
 // edge (8 when the tab view ends above the screen bottom), its items in equal
 // slots inside a 4 inset. It is as wide as its tabs (268/3 each, measured in
 // the 26.2 simulator: two tabs make a 186.67 capsule), centered, and at most
@@ -208,7 +213,7 @@ const LIST_CHEVRON_WIDTH = 20;
 const TAB_BAR_HEIGHT = 62;
 const TAB_BAR_ITEM_WIDTH = 268 / 3;
 const TAB_BAR_MARGIN_H = 21;
-const TAB_BAR_MARGIN_BOTTOM = 22;
+const TAB_BAR_MARGIN_BOTTOM = 21;
 const TAB_BAR_MARGIN_BOTTOM_INSET = 8;
 const TAB_BAR_ITEM_INSET = 4;
 const PICKER_SEGMENTED_HEIGHT = 32;
@@ -241,11 +246,24 @@ const NAV_ITEM_SPACING = 16;
 const NAV_ITEM_MARGIN = 16;
 // iOS 26: the back button is a 44pt glass circle 16 from the leading edge,
 // and the bar's leading and trailing items sit in glass capsules 44 tall,
-// each item in a slot at least 44 wide (an icon: a circle; text: 12 either
-// side), the groups 8 apart.
+// each item in a slot: a symbol the 44 circle, anything else (text, a
+// label) its width and 12 either side, at least 44; the groups 8 apart.
 const NAV_GLASS_SIZE = 44;
 const NAV_GLASS_PAD_H = 12;
 const NAV_GROUP_SPACING = 8;
+
+/** A bar item that is only a symbol (an `image`, or a button, menu or link around one). */
+function isSymbolItem(item: LayoutNode): boolean {
+  const inner = unwrapStyled(item);
+  if (inner.kind === 'image') return true;
+  return inner.children.length === 1 && isSymbolItem(inner.children[0] as LayoutNode);
+}
+
+/** A bar item's slot in its glass capsule. */
+function navSlot(item: LayoutNode, width: number): number {
+  if (isSymbolItem(item) && width <= NAV_GLASS_SIZE) return NAV_GLASS_SIZE;
+  return Math.max(NAV_GLASS_SIZE, width + 2 * NAV_GLASS_PAD_H);
+}
 // iOS 26 (measured in the 26.2 simulator, Examples/Fidelity `bottombar*`): a
 // bottom toolbar's items float on Liquid Glass in a 48 row 28 above the
 // screen bottom (as the search field does) and 28 in from the sides.
@@ -1152,6 +1170,9 @@ export class LayoutPass {
         // an `inspector` its trailing one to its panel).
         // Phase 8: an `alert` is a full-screen layer too (scrim + card).
         this.place(root, ctx, { width: screen.width, height: screen.height }, 0, 0);
+      } else if (root.kind === 'sheet' && this.sheetIsForm(root)) {
+        const rect = this.formSheetRect();
+        this.place(root, ctx, { width: rect.width, height: rect.height }, rect.x, rect.y);
       } else if (root.kind === 'sheet') {
         const floats = this.sheetFloats(root);
         const insetH = floats ? SHEET_FLOAT_INSET_H : 0;
@@ -1524,6 +1545,7 @@ export class LayoutPass {
         // GeometryReader: the proposal, 10 on unconstrained axes.
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
       case 'sheet':
+        if (this.sheetIsForm(node)) return { width: p.width ?? this.formSheetRect().width, height: this.formSheetRect().height };
         return { width: p.width ?? this.env.screen.width, height: this.sheetHeight(node) };
       // Phase 8 controls.
       case 'alert':
@@ -1771,8 +1793,24 @@ export class LayoutPass {
     return Array.isArray(detents) && str(detents[0]) === 'full';
   }
 
+  /** iPadOS: a sheet in a regular width (not a full-screen cover) is a centered form sheet. */
+  private sheetIsForm(node: LayoutNode): boolean {
+    return this.env.screen.width >= REGULAR_WIDTH && !this.sheetIsFull(node);
+  }
+
+  /** The form sheet's card: UIKit's size, clamped to the safe area less a margin, centered in it. */
+  private formSheetRect(): Rect {
+    const { screen, safeArea } = this.env;
+    const top = safeArea.top + FORM_SHEET_MARGIN;
+    const room = { width: screen.width - 2 * FORM_SHEET_MARGIN, height: screen.height - top - safeArea.bottom - FORM_SHEET_MARGIN };
+    const width = Math.max(0, Math.min(FORM_SHEET.width, room.width));
+    const height = Math.max(0, Math.min(FORM_SHEET.height, room.height));
+    return { x: Math.round((screen.width - width) / 2), y: Math.round(top + (room.height - height) / 2), width, height };
+  }
+
   /** iOS 26: a sheet whose first detent is a partial one floats inset from the screen edges. */
   private sheetFloats(node: LayoutNode): boolean {
+    if (this.sheetIsForm(node)) return false;
     const detents = node.props['detents'];
     const first = Array.isArray(detents) ? str(detents[0]) : null;
     return first === 'medium' || first?.startsWith('height:') === true || first?.startsWith('fraction:') === true;
@@ -1780,6 +1818,7 @@ export class LayoutPass {
 
   /** iOS 26 shows the grabber only for a sheet with more than one detent. */
   private sheetHasGrabber(node: LayoutNode): boolean {
+    if (this.sheetIsForm(node)) return false;
     const detents = node.props['detents'];
     return Array.isArray(detents) && detents.length > 1 && !this.sheetIsFull(node);
   }
@@ -3097,7 +3136,7 @@ export class LayoutPass {
       const sizes = toolbar.children.map((item) => this.measure(item, itemCtx, { width: null, height: null }));
       const placement = str(toolbar.props['placement']) ?? 'trailing';
       if (placement === 'leading' || placement === 'trailing') {
-        const slots = sizes.map((s) => Math.max(NAV_GLASS_SIZE, s.width + 2 * NAV_GLASS_PAD_H));
+        const slots = sizes.map((s, i) => navSlot(toolbar.children[i] as LayoutNode, s.width));
         return { toolbar, placement, sizes, slots, total: slots.reduce((sum, w) => sum + w, 0) };
       }
       const total = sizes.reduce((sum, s) => sum + s.width, 0) + Math.max(0, sizes.length - 1) * NAV_ITEM_SPACING;
@@ -3125,7 +3164,7 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       return toolbar.children.map((item) => {
         const itemSize = this.measure(item, itemCtx, { width: null, height: null });
-        return { toolbar, item, size: itemSize, slot: Math.max(NAV_GLASS_SIZE, itemSize.width + 2 * NAV_GLASS_PAD_H) };
+        return { toolbar, item, size: itemSize, slot: navSlot(item, itemSize.width) };
       });
     });
     // Items of one toolbar share its glass capsule; separate toolbars sit 8 apart, as the trailing groups do.
@@ -3262,10 +3301,19 @@ export class LayoutPass {
       );
       const trailingUsed = trailingWidth > 0 || chrome['more'] !== undefined || inlineSecondary.length > 0;
       const rightUsed = trailingUsed ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
-      const side = Math.max(leftUsed, rightUsed) + 8;
-      const available = Math.max(0, size.width - 2 * side);
-      const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
-      chrome['title'] = { x: x + (size.width - titleWidth) / 2, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
+      // As UIKit places it: centered in the bar when it fits there; else slid
+      // off-center into the room the items leave (between them, 8 clear of
+      // each side), and truncated only when it does not fit even there.
+      const roomStart = x + leftUsed + 8;
+      const roomEnd = x + size.width - rightUsed - 8;
+      const titleWidth = Math.min(
+        Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001),
+        Math.floor(size.width * 0.56),
+        Math.floor(Math.max(0, roomEnd - roomStart)),
+      );
+      const centered = x + (size.width - titleWidth) / 2;
+      const titleX = Math.max(roomStart, Math.min(centered, roomEnd - titleWidth));
+      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
     }
     this.setChrome(node, chrome);
 
@@ -4047,6 +4095,7 @@ export class LayoutPass {
     };
     const chrome: Record<string, Rect> = { content };
     if (floats) chrome['floating'] = { x, y, width: size.width, height: size.height };
+    if (this.sheetIsForm(node)) chrome['form'] = { x, y, width: size.width, height: size.height };
     if (grabber) {
       chrome['grabber'] = {
         x: x + (size.width - SHEET_GRABBER.width) / 2,

package/src/layoutDom.ts

@@ -616,6 +616,8 @@ function applyChrome(
       placeChrome(grabber, chrome?.['grabber'], frame);
       // iOS 26: a sheet at a partial detent floats as a rounded card (styles.css).
       setFlag(el, 'sbFloating', chrome?.['floating'] ? '' : null);
+      // iPadOS: in a regular width, a centered form sheet (styles.css).
+      setFlag(el, 'sbForm', chrome?.['form'] ? '' : null);
       return;
     }
     case 'tabview': {
@@ -633,8 +635,7 @@ function applyChrome(
       return;
     }
     case 'navsplit': {
-      // Phase 7: the hairline between the two columns, and the sidebar toggle.
-      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-separator'), chrome?.['separator'], box);
+      // Phase 7: the sidebar toggle (the sidebar column draws the hairline).
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-toggle'), chrome?.['toggle'], box);
       setFlag(el, 'sbSidebarHidden', node.props['sidebarVisible'] === false ? '' : null);
       return;

package/src/main.ts

@@ -479,6 +479,9 @@ async function loadAssetCatalog(app: string): Promise<AssetCatalog> {
 // ---------------------------------------------------------------------------
 // Hot reload: state snapshot across full reloads
 // ---------------------------------------------------------------------------
+//
+// Only the dev server's page (`import.meta.hot`) keeps state across a reload:
+// a built site starts fresh, as an app does at launch.
 
 const stateKey = `sb-state:${requestedApp}`;
 
@@ -496,6 +499,7 @@ function stashState(): void {
 
 /** Read and delete a stashed snapshot (it is only ever used once). */
 function takeStashedState(): string | null {
+  if (!import.meta.hot) return null;
   try {
     const snapshot = sessionStorage.getItem(stateKey);
     if (snapshot !== null) sessionStorage.removeItem(stateKey);
@@ -505,10 +509,9 @@ function takeStashedState(): string | null {
   }
 }
 
-window.addEventListener('beforeunload', stashState);
-window.addEventListener('pagehide', stashState);
-
 if (import.meta.hot) {
+  window.addEventListener('beforeunload', stashState);
+  window.addEventListener('pagehide', stashState);
   import.meta.hot.on('vite:beforeFullReload', () => stashState());
   import.meta.hot.on('sb:build-start', (payload: BuildStartPayload) => {
     buildStatus.textContent = `Rebuilding ${payload.apps.join(', ')}…`;

package/src/renderer.ts

@@ -27,7 +27,7 @@
  * control claimed.
  *
  * Phase 7: `navsplit` holds two `navstack` columns with a hairline between
- * them (`.sb-navsplit-separator`, placed from the engine's `separator` rect);
+ * them (drawn by the sidebar column in the engine's 1px `separator` gap);
  * a `navlink` with `selected: true` carries `data-sb-selected` (a rounded fill
  * background; the engine drops its chevron inside a split view's sidebar);
  * the candidates a `viewthatfits` did not choose get the `hidden` attribute.
@@ -187,6 +187,25 @@ function animationTokenOf(kind: ElementKind | undefined, props: unknown): string
   return token == null ? undefined : String(token);
 }
 
+/** Duration of the menu's fade out; keep in sync with styles.css (`sb-menu-out`). */
+export const MENU_EXIT_MS = 150;
+
+/**
+ * Put a closed popover away: it stops being the menu (no `sb-picker-menu`
+ * class or `menu` role, inert) and fades out where it was, then leaves the
+ * DOM, as the open animation brought it in.
+ */
+function dismissMenu(menu: HTMLElement): void {
+  menu.classList.replace('sb-picker-menu', 'sb-picker-menu-exit');
+  menu.removeAttribute('role');
+  menu.setAttribute('aria-hidden', 'true');
+  menu.inert = true;
+  const remove = (): void => menu.remove();
+  menu.addEventListener('animationend', remove, { once: true });
+  // Without animations (reduced motion, a hidden page, jsdom) it still goes.
+  setTimeout(remove, MENU_EXIT_MS + 100);
+}
+
 /** Duration of the navigation push/pop slide; keep in sync with styles.css (`--sb-nav-easing`). */
 export const NAV_TRANSITION_MS = 400;
 /** Duration of the sheet present/dismiss slide; keep in sync with styles.css. */
@@ -1373,7 +1392,7 @@ export class Renderer {
     if (!menu) return;
     this.menu = null;
     document.removeEventListener('click', this.onDocumentClick, true);
-    menu.el.remove();
+    dismissMenu(menu.el);
     menu.anchor.setAttribute('aria-expanded', 'false');
     // Lazy menus: Swift drops the items. After the current task, so that the
     // tap of the item chosen (sent right after closing) reaches its button.
@@ -2209,12 +2228,11 @@ function createShell(kind: ElementKind): HTMLElement {
       return el;
     }
     case 'navsplit': {
-      // Phase 7: the two columns go into the slot; the separator is chrome
-      // positioned from the engine's `separator` rect.
+      // Phase 7: the two columns go into the slot; the sidebar column draws
+      // the hairline in the gap the engine leaves (styles.css), so it slides
+      // with the column.
       const el = document.createElement('div');
       const slot = div('sb-slot sb-navsplit-columns');
-      const separator = div('sb-navsplit-separator');
-      separator.setAttribute('aria-hidden', 'true');
       // iPadOS: the sidebar toggle, at the engine's `toggle` rect; a tap
       // asks Swift to show or hide the sidebar.
       const toggle = document.createElement('button');
@@ -2223,7 +2241,7 @@ function createShell(kind: ElementKind): HTMLElement {
       toggle.setAttribute('aria-label', 'Toggle Sidebar');
       const symbol = renderSymbol('sidebar.left');
       if (symbol) toggle.append(symbol);
-      el.append(slot, separator, toggle);
+      el.append(slot, toggle);
       SLOTS.set(el, slot);
       return el;
     }
@@ -2742,7 +2760,23 @@ function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): voi
 // Props → DOM
 // ---------------------------------------------------------------------------
 
+/** Elements whose `aria-label` is their `accessibilityLabel` prop. */
+const LABELLED = new WeakSet<HTMLElement>();
+
 function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, assets: AssetCatalog): void {
+  // A label that went away leaves the element's own (an image's name) to the kind below.
+  if (LABELLED.delete(el)) el.removeAttribute('aria-label');
+  applyKindProps(el, kind, props, assets);
+  // `.accessibilityLabel(_:)`, or a `Label`'s title (an icon-only label in
+  // a button is named by it): the element's accessible name.
+  const label = (props as { accessibilityLabel?: unknown }).accessibilityLabel;
+  if (typeof label === 'string' && label !== '') {
+    el.setAttribute('aria-label', label);
+    LABELLED.add(el);
+  }
+}
+
+function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps, assets: AssetCatalog): void {
   switch (kind) {
     case 'host':
       el.dataset['sbSizing'] = (props as HostProps).sizing;
@@ -3103,8 +3137,14 @@ const SHAPE_RADIUS: Record<Exclude<ShapeProps['shape'], 'path'>, (cornerRadius:
  * flat). The stroke is a CSS border, which lies inside the box: that is
  * `.strokeBorder` (`inset: true`); a plain `.stroke` is drawn the same way,
  * and `data-sb-stroke` records which one it was.
+ *
+ * A shape that is only stroked is marked `data-sb-stroke-only`: it takes no
+ * hits (styles.css), so an outline overlaid on a control leaves its box to
+ * what is under it, as SwiftUI hit-tests a stroke only along its line.
  */
 function applyShape(el: HTMLElement, props: ShapeProps): void {
+  if (props.stroke && !props.fill) el.dataset['sbStrokeOnly'] = '';
+  else delete el.dataset['sbStrokeOnly'];
   if (props.shape === 'path') {
     // A custom shape: an SVG of its path (src/pathShape.ts).
     el.dataset['sbShape'] = 'path';

package/src/styles.css

@@ -83,11 +83,28 @@
   --sb-color-grabber: rgba(60, 60, 67, 0.3);
   /* Phase 4 */
   --sb-color-tabbar-background: rgba(249, 249, 249, 0.94);
-  /* iOS 26 Liquid Glass, approximated: a near-white translucent fill over a
-     blurred backdrop with a soft shadow (bar buttons, the tab bar, the
-     bottom search field). */
-  --sb-glass-background: rgba(252, 252, 255, 0.86);
-  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  /* iOS 26 Liquid Glass, approximated: a white fill at 70% over a blurred
+     backdrop (pure white over white content, 251 over the grouped
+     background, as on an iPhone) with a soft shadow and a 1pt rim that catches the light
+     at the top-left and bottom-right (bar buttons, the tab bar, the bottom
+     toolbar and search field; the "Liquid Glass rim" rule draws it). The rim
+     is white in both schemes: a faint bright edge on the near-white fill, the
+     gray hairline iOS draws on the dark one. Alphas measured on an iPhone
+     (3x): over the dark fill the rim is 16% white at its brightest, 12.5%
+     at the sides and 4.5% at the top-right and bottom-left. */
+  --sb-glass-background: rgba(255, 255, 255, 0.7);
+  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  --sb-glass-rim: conic-gradient(
+    rgba(255, 255, 255, 0.6) 0deg,
+    rgba(255, 255, 255, 0.3) 45deg,
+    rgba(255, 255, 255, 0.6) 90deg,
+    rgba(255, 255, 255, 0.95) 135deg,
+    rgba(255, 255, 255, 0.6) 180deg,
+    rgba(255, 255, 255, 0.3) 225deg,
+    rgba(255, 255, 255, 0.6) 270deg,
+    rgba(255, 255, 255, 0.95) 315deg,
+    rgba(255, 255, 255, 0.6) 360deg
+  );
   --sb-glass-selected: rgba(120, 120, 128, 0.16);
   --sb-color-segment-track: rgba(118, 118, 128, 0.12);
   --sb-color-segment-selected: #ffffff;
@@ -130,7 +147,18 @@
   --sb-color-field-background: #1c1c1e;
   --sb-color-placeholder: rgba(235, 235, 245, 0.3);
   --sb-glass-background: rgba(30, 30, 30, 0.84);
-  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
+  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  --sb-glass-rim: conic-gradient(
+    rgba(255, 255, 255, 0.125) 0deg,
+    rgba(255, 255, 255, 0.045) 45deg,
+    rgba(255, 255, 255, 0.125) 90deg,
+    rgba(255, 255, 255, 0.16) 135deg,
+    rgba(255, 255, 255, 0.125) 180deg,
+    rgba(255, 255, 255, 0.045) 225deg,
+    rgba(255, 255, 255, 0.125) 270deg,
+    rgba(255, 255, 255, 0.16) 315deg,
+    rgba(255, 255, 255, 0.125) 360deg
+  );
   --sb-glass-selected: rgba(120, 120, 128, 0.32);
   /* Sheets float above the window and take the elevated system background. */
   --sb-color-sheet-background: #1c1c1e;
@@ -1374,6 +1402,25 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: rgba(0, 0, 0, 0.22);
 }
 
+/* iPadOS: in a regular width a sheet is a form sheet, centered and rounded
+   all around. It slides up from below the screen, not just its own height,
+   and the presenting tree stays as it is (only dimmed). */
+.sb-sheet[data-sb-form] > .sb-sheet-card {
+  --sb-sheet-offscreen: 100vh;
+  border-radius: 26px;
+  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
+}
+
+/* In dark mode what a form sheet holds takes iOS's elevated colors, as the
+   card does: the base ones are black and would paint it black. */
+.device[data-theme="dark"] .sb-sheet[data-sb-form] > .sb-sheet-card {
+  --sb-color-system-background: #1c1c1e;
+  --sb-color-secondary-system-background: #2c2c2e;
+  --sb-color-grouped-background: #1c1c1e;
+  --sb-color-grouped-cell: #2c2c2e;
+  --sb-color-field-background: #2c2c2e;
+}
+
 .sb-sheet-grabber {
   position: absolute;
   border-radius: 2.5px;
@@ -1422,13 +1469,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.screen[data-sb-sheet="large"] > :not(.sb-sheet, .sb-exit-clone, .sb-picker-menu) {
+.screen[data-sb-sheet="large"]:where(:not(:has(> .sb-sheet[data-sb-sheet-position="top"][data-sb-form]))) > :not(.sb-sheet, .sb-exit-clone, .sb-picker-menu, .sb-picker-menu-exit) {
   transform: scale(0.92);
 }
 
 @keyframes sb-sheet-in {
   from {
-    transform: translateY(100%);
+    transform: translateY(var(--sb-sheet-offscreen, 100%));
   }
   to {
     transform: translateY(0);
@@ -1440,7 +1487,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
     transform: translateY(var(--sb-sheet-drag, 0px));
   }
   to {
-    transform: translateY(100%);
+    transform: translateY(var(--sb-sheet-offscreen, 100%));
   }
 }
 
@@ -1777,8 +1824,10 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   stroke-width: 2.5;
 }
 
-/* The option menu: anchored under (or above) the control by the renderer. */
-.sb-picker-menu {
+/* The option menu: anchored under (or above) the control by the renderer.
+   Closed, it fades out where it was (`.sb-picker-menu-exit`) and leaves. */
+.sb-picker-menu,
+.sb-picker-menu-exit {
   position: absolute;
   z-index: 6;
   border-radius: 13px;
@@ -1793,7 +1842,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   animation: sb-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 }
 
-.sb-picker-menu[data-sb-placement="above"] {
+.sb-picker-menu-exit {
+  pointer-events: none;
+  animation: sb-menu-out 0.15s ease-in both;
+}
+
+:is(.sb-picker-menu, .sb-picker-menu-exit)[data-sb-placement="above"] {
   transform-origin: 50% 100%;
 }
 
@@ -1862,6 +1916,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   }
 }
 
+@keyframes sb-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
 /* GeometryReader: a plain box the engine sizes to its proposal. */
 .sb-geometry {
   display: block;
@@ -1935,6 +2000,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 @media (prefers-reduced-motion: reduce) {
   .sb-picker-menu,
+  .sb-picker-menu-exit,
   .sb-segment::before {
     animation-duration: 0.01s;
     transition-duration: 0.01s;
@@ -2139,6 +2205,40 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* Liquid Glass rim: a 1pt ring at the edge of every glass surface whose
+   brightness varies around it (`--sb-glass-rim`, a conic gradient brightest
+   at the top-left and bottom-right, where iOS's glass catches the light,
+   dimmest at the top-right and bottom-left). A gradient-filled pseudo-element
+   the size of the surface, masked to its outer 1px (the content box cut out
+   of the padding box); it takes no input and sits above the surface's items,
+   which never reach the edge. */
+.sb-navbar-back::after,
+.sb-navbar-more::after,
+.sb-tabbar::after,
+.sb-toolbar[data-sb-placement="leading"]::after,
+.sb-toolbar[data-sb-placement="trailing"]::after,
+.sb-bottom-glass::after,
+.sb-searchfield::after,
+.sb-navsplit-toggle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  padding: 1px;
+  border-radius: inherit;
+  background: var(--sb-glass-rim);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
 /* iOS 26: a bar's leading and trailing items share a glass capsule (the
    engine sizes the group: 44 tall, each item in a slot at least 44 wide),
    drawn in the label color unless tinted. */
@@ -2268,7 +2368,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
    ------------------------------------------------------------------------- */
 
 /* NavigationSplitView: two navstack columns (protocol children, positioned by
-   the engine) with a hairline between them at the engine's `separator` rect. */
+   the engine) with a hairline between them. The sidebar column draws it in
+   the 1pt gap the engine leaves (its `separator` rect), so the hairline
+   slides with the sidebar as the inspector's does with its panel. */
 .sb-navsplit {
   overflow: hidden;
   background: var(--sb-color-system-background);
@@ -2286,10 +2388,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   box-shadow: -1px 0 0 var(--sb-color-separator);
 }
 
-.sb-navsplit-separator {
-  position: absolute;
-  background: var(--sb-color-separator);
-  pointer-events: none;
+.sb-navsplit-columns > [data-sb-id]:first-child {
+  box-shadow: 1px 0 0 var(--sb-color-separator);
 }
 
 /* iPadOS: the sidebar toggle, a 44pt glass circle at the leading edge of
@@ -2515,6 +2615,18 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
+/* A shape that is only stroked (`.stroke`, `.strokeBorder`) is hit along its
+   line in SwiftUI, not across its box: an outline overlaid on a control must
+   not swallow its taps. Its box takes none, except as the content of a
+   gesture (`Circle().stroke().onTapGesture`), where it stays the target. */
+[data-sb-kind].sb-shape[data-sb-stroke-only] {
+  pointer-events: none;
+}
+
+:is(.sb-gesture, .sb-tapgesture) > [data-sb-kind].sb-shape[data-sb-stroke-only] {
+  pointer-events: auto;
+}
+
 :is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) [data-sb-kind],
 :is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-navbar > * {
   pointer-events: none !important;

package/src/symbols.ts

@@ -1103,13 +1103,13 @@ const GENERIC_SHAPES = new Set(['circle', 'square', 'rectangle', 'app', 'capsule
  * is drawn as `person.crop.circle`, `trash.circle.fill` as `trash.fill` and
  * `speaker.wave.2.fill` as `speaker.wave.2`. A `.badge…` suffix is dropped,
  * then trailing parts one at a time; a name with `.fill` tries every filled
- * form first. A `.slash` variant is never drawn as its base, which would
+ * form first. A `.slash` variant keeps its slash (`speaker.slash.fill` is
+ * drawn as `speaker.slash`) and is never drawn as its base, which would
  * mean the opposite (`bell.slash` is "notifications off"); nor is a name
  * drawn as a bare shape. Unresolved names get the caller's placeholder.
  */
 function resolveVariant(systemName: string): SymbolGlyph | undefined {
   let parts = systemName.split('.');
-  if (parts.includes('slash')) return undefined;
   const fill = parts.includes('fill');
   parts = parts.filter((part) => part !== 'fill');
   const badge = parts.indexOf('badge');
@@ -1130,7 +1130,9 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
     }
   }
   const bases: string[] = [];
-  for (let length = parts.length; length > 0; length--) {
+  // Never shorter than the slash.
+  const shortest = Math.max(1, parts.indexOf('slash') + 1);
+  for (let length = parts.length; length >= shortest; length--) {
     const base = parts.slice(0, length).join('.');
     if (length === 1 && parts.length > 1 && GENERIC_SHAPES.has(base)) break;
     bases.push(base);