@swiftbrowser/web 0.6.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.1",
+  "version": "0.6.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/animation.ts

@@ -316,18 +316,24 @@ function implicitTransitionOf(el: HTMLElement, parent: Element | null = el.paren
 /**
  * The bar toolbars whose groups this pass changed, each with its screen: one
  * that gained or lost an item (or came or went itself, on a screen already
- * there), or whose capsule or an item of it resized. A group that only
- * moved (the screen resized, a More button appeared beside it) is not one:
- * its items are as they were.
+ * there), or whose capsule or an item of it resized; and a group that only
+ * moved because another of its screen's changed, which slides over with
+ * it, as its capsule does. A group that only moved on its own (the screen
+ * resized, a More button appeared beside it) is not one: its items are as
+ * they were.
  */
 export function implicitToolbars(pass: PassRecord, frames: readonly FrameChange[]): Map<HTMLElement, Element | null> {
   const out = new Map<HTMLElement, Element | null>();
+  const moved = new Map<HTMLElement, Element | null>();
   const isNew = (toolbar: HTMLElement): boolean => pass.inserted.has(toolbar) || hasAncestorIn(toolbar, pass.inserted);
   for (const change of frames) {
     const toolbar = barToolbarOf(change.el);
     if (!toolbar || !change.from || !change.el.isConnected || isNew(toolbar)) continue;
     const { from, to } = change;
-    if (change.el === toolbar && from.width === to.width && from.height === to.height) continue;
+    if (change.el === toolbar && from.width === to.width && from.height === to.height) {
+      moved.set(toolbar, toolbar.closest('.sb-navscreen'));
+      continue;
+    }
     out.set(toolbar, toolbar.closest('.sb-navscreen'));
   }
   for (const el of pass.inserted) {
@@ -343,6 +349,11 @@ export function implicitToolbars(pass: PassRecord, frames: readonly FrameChange[
     // A removed group is detached: its screen is among the ancestors it had.
     out.set(toolbar, toolbar.isConnected ? toolbar.closest('.sb-navscreen') : (rec.ancestors.find((a) => a.classList.contains('sb-navscreen')) ?? null));
   }
+  // (a group the bar does not draw, `secondary` items collapsed into the More button, moves nothing beside it)
+  const changedScreens = new Set(Array.from(out).filter(([toolbar]) => !toolbar.hidden).map(([, screen]) => screen));
+  for (const [toolbar, screen] of moved) {
+    if (!out.has(toolbar) && changedScreens.has(screen)) out.set(toolbar, screen);
+  }
   return out;
 }
 
@@ -497,9 +508,16 @@ export class Animator {
     // iOS 26: a bar toolbar's groups change with a spring of their own (see
     // the top of the file); the bar's glass capsules, beside their toolbars
     // rather than around them, follow the screen's bar toolbars.
+    // The spring moves the groups and their items, not what is inside an
+    // item: a button whose label changes (a tool selected, its symbol now
+    // on a tinted disc) changes in place, as UIKit redraws a bar item.
     const glassScreens = new Set<Element | null>();
+    const groupsOnly = new Set<HTMLElement>();
     for (const [toolbar, screen] of implicitToolbars(pass, frames)) {
-      if (!tokenRoots.has(toolbar)) tokenRoots.set(toolbar, commitAnimation ?? TOOLBAR_ANIMATION);
+      if (!tokenRoots.has(toolbar)) {
+        tokenRoots.set(toolbar, commitAnimation ?? TOOLBAR_ANIMATION);
+        if (!commitAnimation) groupsOnly.add(toolbar);
+      }
       glassScreens.add(screen);
     }
     if (!commitAnimation && tokenRoots.size === 0) {
@@ -517,8 +535,14 @@ export class Animator {
     const matchedTo = new Map<RemovedRecord, { from: DOMRect; to: DOMRect }>();
 
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
+      let depth = 0;
       for (const el of chain) {
-        if (tokenRoots.has(el)) return tokenRoots.get(el) ?? { type: 'default' };
+        if (tokenRoots.has(el)) {
+          // (below an item of a group the bar's own spring moves: not animated)
+          if (groupsOnly.has(el) && depth > 1) return false;
+          return tokenRoots.get(el) ?? { type: 'default' };
+        }
+        depth++;
       }
       return commitAnimation ?? false;
     };
@@ -552,6 +576,9 @@ export class Animator {
       if (animation === false && change.kind === BAR_GLASS_KIND && glassScreens.has(el.parentElement)) {
         animation = TOOLBAR_ANIMATION;
       }
+      // An item of such a group that only resized about its own center (its
+      // label changed, its slot stayed) is redrawn in place, not tweened.
+      if (animation !== false && groupsOnly.has(el.parentElement as HTMLElement) && sameCenter(from, to)) animation = false;
       if (animation === false) {
         // Moved in place, unless it carries on with a tween of its own.
         if (!this.retargetFrame(change, null)) jumped.set(el, { x: to.x - from.x, y: to.y - from.y });
@@ -975,6 +1002,11 @@ function jumpAbove(
 }
 
 /** The element's ancestors, nearest first. */
+/** Whether two boxes share their center (to within a point: each edge is snapped to a whole point). */
+function sameCenter(a: FrameRect, b: FrameRect): boolean {
+  return Math.abs(a.x + a.width / 2 - (b.x + b.width / 2)) <= 1 && Math.abs(a.y + a.height / 2 - (b.y + b.height / 2)) <= 1;
+}
+
 function ancestorsOf(el: HTMLElement): HTMLElement[] {
   const out: HTMLElement[] = [];
   for (let a = el.parentElement; a; a = a.parentElement) out.push(a);

package/src/chartDom.ts

@@ -135,11 +135,15 @@ function buildPlot(doc: Document, props: Partial<ChartProps>, plot: Rect, box: R
   const grid = svg(doc, 'g', { class: 'sb-chart-grid' });
   for (const u of gridLines(props.xAxis)) {
     const x = r2(Math.floor(mapX(local, u)) + 0.5);
-    grid.append(svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'x', x1: x, y1: 0, x2: x, y2: h }));
+    const line = svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'x', x1: x, y1: 0, x2: x, y2: h });
+    if (props.xAxis?.dashed) line.dataset['sbDashed'] = '';
+    grid.append(line);
   }
   for (const u of gridLines(props.yAxis)) {
     const y = r2(Math.floor(mapY(local, u)) + 0.5);
-    grid.append(svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'y', x1: 0, y1: y, x2: w, y2: y }));
+    const line = svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'y', x1: 0, y1: y, x2: w, y2: y });
+    if (props.yAxis?.dashed) line.dataset['sbDashed'] = '';
+    grid.append(line);
   }
   root.append(grid);
 

package/src/layout/engine.ts

@@ -263,16 +263,27 @@ const NAV_GROUP_SPACING = 12;
 const NAV_RUN_GAP = 12;
 const NAV_RUN_PAD = 1;
 
+/**
+ * The children an item draws in the bar: a menu or context menu draws its
+ * label (the first child) and lists the rest in its popover, so its items
+ * (which a lazy menu only builds when it opens) do not make it wider or a
+ * text item.
+ */
+function drawnChildren(node: LayoutNode): LayoutNode[] {
+  return node.kind === 'menu' || node.kind === 'contextmenu' ? node.children.slice(0, 1) : node.children;
+}
+
 /** Whether any text is laid out in an item (a bottom bar pads text items as text). */
 function hasText(item: LayoutNode): boolean {
-  return item.kind === 'text' || item.children.some(hasText);
+  return item.kind === 'text' || drawnChildren(item).some(hasText);
 }
 
 /** 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);
+  const drawn = drawnChildren(inner);
+  return drawn.length === 1 && isSymbolItem(drawn[0] as LayoutNode);
 }
 
 /** A bar item's slot in its glass capsule. */
@@ -300,9 +311,11 @@ const BOTTOM_FIXED_SPACER = 8;
 const SEARCH_FIELD_HEIGHT = 36;
 const SEARCH_FIELD_MARGIN_H = 16;
 // iOS 26: a navigation stack's search field is a 48-tall glass capsule
-// floating 16 from the sides and 28 above the screen bottom (8 above a view
-// that ends higher); the content stops above it.
+// floating 28 from the sides (measured in the simulator: x 28.67…364.33 on the
+// Fidelity `search` screen and Food Truck's Donuts) and 28 above the screen
+// bottom (8 above a view that ends higher); the content stops above it.
 const SEARCH_BOTTOM_HEIGHT = 48;
+const SEARCH_BOTTOM_MARGIN_H = 28;
 const SEARCH_BOTTOM_MARGIN = 28;
 const SEARCH_BOTTOM_MARGIN_INSET = 8;
 const SEARCH_FIELD_DEFAULT_WIDTH = 200;
@@ -2100,6 +2113,17 @@ export class LayoutPass {
         const child = edge === 'top' ? node.children[0] : node.children[node.children.length - 1];
         return child && !isSpacer(child) ? this.textEdge(child, this.childContext(node, ctx), edge, depth + 1) : null;
       }
+      case 'hstack': {
+        // A row with text in it (Food Truck's flavor line: a symbol and its
+        // name) is spaced as its largest text, as iOS 26 spaces it.
+        const cctx = this.childContext(node, ctx);
+        let font: ResolvedFont | null = null;
+        for (const child of node.children) {
+          const found = this.textEdge(child, cctx, edge, depth + 1);
+          if (found && (!font || found.size > font.size)) font = found;
+        }
+        return font;
+      }
       default:
         return null;
     }
@@ -3293,10 +3317,11 @@ export class LayoutPass {
     };
     if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: LARGE_TITLE_HEIGHT };
     if (parts.search) {
+      const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
-        x: x + SEARCH_FIELD_MARGIN_H,
+        x: x + marginH,
         y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchBottom,
-        width: Math.max(0, size.width - 2 * SEARCH_FIELD_MARGIN_H),
+        width: Math.max(0, size.width - 2 * marginH),
         height: searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
       };
       // The page draws a field under the title as the bar's (a gray capsule)
@@ -3537,11 +3562,9 @@ export class LayoutPass {
     // takes up to a pixel off a fractional width at a fractional origin, and
     // the title truncates with an ellipsis ("Animati…") when its box is any
     // narrower than its text.
-    const scroller = parts.content ? unwrapStyled(parts.content) : null;
-    const titleScrolls =
-      large &&
-      scroller !== null &&
-      (scroller.kind === 'list' || (scroller.kind === 'scrollview' && this.scrollAxes(scroller).vertical));
+    const direct = parts.content ? unwrapStyled(parts.content) : null;
+    const scroller = parts.content ? this.screenScroller(parts.content) : null;
+    const titleScrolls = large && scroller !== null;
     // A large title that scrolls away collapses into the inline title, which
     // the renderer shows once it has (`data-sb-collapsed`).
     if ((!large || titleScrolls) && !principal) {
@@ -3605,9 +3628,7 @@ export class LayoutPass {
       barAbove: undefined,
       ...(bottomCover > 0 ? { bottomBar: bottomCover, bottomEdge: y + size.height } : {}),
     };
-    const scrollsUnderBar =
-      scroller !== null && (scroller.kind === 'list' || (scroller.kind === 'scrollview' && this.scrollAxes(scroller).vertical));
-    if (scroller && scrollsUnderBar) {
+    if (scroller) {
       // iOS 26: the scroll view starts at the top of the screen and its
       // content scrolls under the bar (and the large title moves with it);
       // the content starts below them. It runs to the bottom of the screen,
@@ -3621,14 +3642,14 @@ export class LayoutPass {
       this.place(child, contentCtx, { width: content.width, height: content.height + top + bottomCover }, content.x, y);
       return;
     }
-    if (scroller) this.scrollInsets.delete(scroller);
+    if (direct) this.scrollInsets.delete(direct);
     // A scroll view deeper in the content that touches the bar runs under it
     // (`scrollEdgeGrowth`); not under a large title, which stays put then.
     // One that reaches the bottom of the content runs down under all the
     // content clears there.
     if (!large) contentCtx.barAbove = { top: content.y, height: content.y - y, x, width: size.width };
     if (bottomCover > 0) contentCtx.bottomBar = bottomCover + bottomInset;
-    if (scroller && scroller.kind === 'scrollview') {
+    if (direct && direct.kind === 'scrollview') {
       this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
       return;
     }
@@ -3639,6 +3660,30 @@ export class LayoutPass {
     this.place(child, contentCtx, proposal, content.x + dx, content.y + dy);
   }
 
+  /**
+   * The list or vertical scroll view that is a screen's content: through
+   * modifiers and wrappers that put their child at their own origin and size
+   * (a `GeometryReader`'s or a one-child `ZStack`'s child, a decoration's
+   * content), as UIKit finds a screen's
+   * scroll view. Food Truck's Truck page is a `GeometryReader` around its
+   * `ScrollView`, its Donuts page a `ZStack` with a background around one:
+   * their large titles scroll and collapse as on iOS. Null when there is none.
+   */
+  private screenScroller(node: LayoutNode): LayoutNode | null {
+    let current: LayoutNode | undefined = node;
+    for (let depth = 0; current && depth < 32; depth++) {
+      if (current.kind === 'list' || (current.kind === 'scrollview' && this.scrollAxes(current).vertical)) return current;
+      if ((current.kind === 'styled' || current.kind === 'geometry' || current.kind === 'zstack') && current.children.length === 1) {
+        current = current.children[0];
+      } else if (current.kind === 'decorated') {
+        current = current.children[0];
+      } else {
+        return null;
+      }
+    }
+    return null;
+  }
+
   /**
    * iOS 26's bottom toolbar: the items of the `bottom` toolbars, in order,
    * float on Liquid Glass in a 48 row at the top of the bottom bar's band

package/src/protocol.ts

@@ -323,6 +323,11 @@ export interface Style {
   font?: Font;
   /** Phase 6: any ShapeStyle (text role). Gradients paint the text itself. */
   foreground?: ShapeStyle;
+  /**
+   * `.foregroundStyle(primary, secondary[, tertiary])`: the styles after the
+   * first, the `.secondary` and `.tertiary` levels below (`--sb-hierarchy-2`, `-3`).
+   */
+  foregroundLevels?: ShapeStyle[];
   /** Phase 6: any ShapeStyle (paint role). */
   background?: ShapeStyle;
   frame?: Frame;
@@ -502,6 +507,13 @@ export interface ZStackProps {
 /** `systemName` is an SF Symbol name; the renderer picks the closest glyph. */
 export interface SymbolImageProps {
   systemName: string;
+  /**
+   * `.symbolRenderingMode(.palette)`: an enclosed filled symbol
+   * (`moon.circle.fill`) draws its enclosure in the secondary level
+   * (`--sb-hierarchy-2`) and its glyph in the primary, instead of knocking
+   * the glyph out.
+   */
+  renderingMode?: 'palette';
 }
 /**
  * Phase 5: an image from the app's asset catalog. `name` is the catalog
@@ -621,6 +633,8 @@ export interface NavScreenProps {
 /** Phase 7 adds `selected` (see the block at the end of this file). */
 export interface NavLinkProps {
   selected?: boolean;
+  /** `.buttonStyle(.plain)` around the link (absent otherwise): its label in the foreground it is in, not the tint. */
+  style?: 'plain';
 }
 
 // Phase 3 kinds (docs/ops-protocol.md, "Phase 3 additions").
@@ -1675,6 +1689,8 @@ export interface ChartAxisLabel {
 export interface ChartAxis {
   position: ChartXAxisPosition | ChartYAxisPosition;
   gridLines: number[];
+  /** A date axis: its grid lines are dashed (2pt on, 2pt off), as Swift Charts draws them. */
+  dashed?: true;
   ticks: number[];
   /** Default text labels; view labels are `chartitem` children with role `xLabel` / `yLabel`. */
   labels: ChartAxisLabel[];

package/src/renderer.ts

@@ -151,7 +151,7 @@ import { VideoEvents, applyVideo, stopVideos } from './video';
 import { applyCanvas, createCanvasElement } from './canvasDrawing';
 import { scrollToTarget } from './scrollTo';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
-import { colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
+import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
 import { hostContent, onHostContentChange } from './hostContent';
 import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointerEffects';
 import { colorMultiplyFilter } from './colorMultiply';
@@ -2897,6 +2897,8 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
     case 'navlink':
       // Phase 7: a selected row (inside a `List(selection:)`) gets a rounded fill.
       el.toggleAttribute('data-sb-selected', (props as NavLinkProps | undefined)?.selected === true);
+      if ((props as NavLinkProps | undefined)?.style === 'plain') el.dataset['sbStyle'] = 'plain';
+      else delete el.dataset['sbStyle'];
       break;
     case 'viewthatfits': {
       const axes = (props as ViewThatFitsProps | undefined)?.axes;
@@ -3436,6 +3438,11 @@ function applyImage(el: HTMLElement, props: ImageProps, assets: AssetCatalog): v
   delete el.dataset['sbResizable'];
   el.dataset['sbSymbol'] = name;
   const svg = renderSymbol(name);
+  if (svg && props.renderingMode === 'palette' && svg.dataset['sbGlyphFill'] === 'knockout') {
+    // The enclosure in the secondary level, the glyph in the primary.
+    svg.style.color = 'var(--sb-hierarchy-2, currentColor)';
+    svg.style.setProperty('--sb-icon-knockout', 'var(--sb-hierarchy-1, currentColor)');
+  }
   if (svg) found(name, svg);
   else missing(name);
 }
@@ -3692,6 +3699,21 @@ export function applyStyle(el: HTMLElement, style: Style): void {
     // styled box wins, as it does in SwiftUI.
     s.color = paint.solid;
     s.setProperty('--sb-button-color', paint.solid);
+    // `.secondary` and the other hierarchical levels below are levels of this
+    // foreground (styles.ts); a hierarchical foreground keeps the ones above.
+    if (!('hierarchical' in style.foreground)) {
+      for (const level of [1, 2, 3, 4] as const) {
+        const opacity = HIERARCHY_OPACITY[level];
+        s.setProperty(`--sb-hierarchy-${level}`, opacity === 1 ? paint.solid : `color-mix(in srgb, ${paint.solid} ${opacity * 100}%, transparent)`);
+      }
+    }
+    // `.foregroundStyle(.white, .indigo)`: the levels after the first. A
+    // hierarchical one (`.foregroundStyle(.red, .secondary)`) stays the level
+    // of the primary set above (it would refer to itself).
+    style.foregroundLevels?.forEach((level, index) => {
+      if (level && typeof level === 'object' && 'hierarchical' in level) return;
+      s.setProperty(`--sb-hierarchy-${index + 2}`, styleToCSS(level, 'text').solid);
+    });
     if (paint.kind === 'gradient') {
       // Text paints the gradient through its own background clipped to the
       // glyphs (see `.sb-text` in styles.css); the custom properties inherit

package/src/styles.css

@@ -557,19 +557,26 @@ html[data-sb-mode="device"] .device-screen {
   line-height: 1;
 }
 
-/* A symbol fills its box as SF Symbols do: at a text size a circle symbol is
-   about 1.28× the font size (21.7 pt at body's 17), and the glyphs here
-   occupy 20 of their 24-unit grid (a little more with their stroke), so
-   the SVG is 1.43em, centred in the
-   line-height box the engine gives the image (the box is unchanged; the
-   glyph overflows it a little, as a symbol's bounds do). The stroke, 1.4
-   units, is then 1.5 px at body, the weight iOS draws regular symbols in. */
+/* A symbol is drawn at SF Symbols' size: at a text size a circle symbol is
+   about the font size across (measured in the Simulator: 17 pt at body's
+   17, 53 at 56), with a 1.4 pt stroke at body. The glyphs here occupy 20
+   of their 24-unit grid (a little more with their stroke), so the SVG is
+   1.08em with a 1.8-unit stroke, centred in the line-height box the engine
+   gives the image. */
 .sb-image > svg {
   display: block;
   flex: none;
+  width: 1.08em;
+  height: 1.08em;
+  stroke: currentColor;
+  stroke-width: 1.8;
+}
+
+/* A list row draws a Label's icon larger, as an icon column: a circle
+   symbol is 21.7 pt at body (1.28× the font size), its stroke 1.5 pt. */
+.sb-list [data-sb-label-icon] .sb-image > svg {
   width: 1.43em;
   height: 1.43em;
-  stroke: currentColor;
   stroke-width: 1.4;
 }
 
@@ -1346,6 +1353,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   -webkit-tap-highlight-color: transparent;
 }
 
+/* `.buttonStyle(.plain)`: as a plain button, the label in the foreground it
+   is in (Food Truck's donut gallery names are black on iOS). */
+.sb-navlink[data-sb-style="plain"] {
+  color: var(--sb-button-color, inherit);
+}
+
 .sb-navlink:focus-visible {
   outline: 2px solid var(--sb-color-accent);
   outline-offset: 2px;
@@ -2019,7 +2032,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   isolation: isolate;
 }
 
-.sb-decorated[data-sb-role="background"] > [data-sb-id]:first-child {
+.sb-decorated[data-sb-role="background"] > [data-sb-id]:first-child,
+.sb-decorated[data-sb-role="background"] > [data-sb-ghost]:first-child {
   z-index: 1;
 }
 
@@ -2092,7 +2106,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 .sb-menu > [data-sb-id]:not(:first-child),
-.sb-menu > [data-sb-id][hidden] {
+.sb-menu > [data-sb-id][hidden],
+.sb-menu > [data-sb-ghost]:not(:first-child),
+.sb-menu > [data-sb-ghost][hidden] {
   display: none;
 }
 
@@ -2270,7 +2286,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 /* A toolbar the engine hid (a spacer, `secondary` items collapsed into the
    More menu), and its items collapsed one by one, draw nothing. */
 .sb-toolbar[hidden],
-.sb-toolbar > [data-sb-id][hidden] {
+.sb-toolbar > [data-sb-id][hidden],
+.sb-toolbar > [data-sb-ghost][hidden] {
   display: none;
 }
 
@@ -2405,8 +2422,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   --sb-press-scale: 1.05;
 }
 
+/* (as specific as the rules above, so the toolbars on a capsule and a glass
+   button swell on this curve, in step with their glass, not on the spring
+   back's) */
 [data-sb-pressed],
-[data-sb-pressed-with] {
+[data-sb-pressed-with],
+.sb-toolbar[data-sb-pressed-with],
+.sb-button[data-sb-style="glass"][data-sb-pressed] {
   scale: var(--sb-press-scale);
   transition:
     scale 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
@@ -2427,7 +2449,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 @media (prefers-reduced-motion: reduce) {
   [data-sb-pressed],
-  [data-sb-pressed-with] {
+  [data-sb-pressed-with],
+  .sb-toolbar[data-sb-pressed-with],
+  .sb-button[data-sb-style="glass"][data-sb-pressed] {
     scale: none;
   }
 }
@@ -2458,8 +2482,10 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-searchfield {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 16px;
+  /* iOS 26 (FoodTruck's donuts, measured): the magnifier's ink starts
+     19.33pt into the capsule, 16pt wide, and the text 46.67pt in. */
+  gap: 8.5px;
+  padding: 0 16px 0 18.5px;
   /* iOS 26: a glass capsule floating at the bottom (engine `searchField`). */
   border-radius: 9999px;
   background: var(--sb-glass-background);
@@ -2528,14 +2554,21 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 .sb-searchfield > svg {
   display: block;
-  width: 17px;
-  height: 17px;
+  width: 19.25px;
+  height: 19.25px;
   flex-shrink: 0;
-  color: var(--sb-color-secondary);
+  /* On the glass the magnifier is the label color, not gray. */
+  color: var(--sb-color-primary);
   stroke: currentColor;
   stroke-width: 2.25;
 }
 
+.sb-navscreen[data-sb-search-top] > .sb-navscreen-body > .sb-navscreen-content > .sb-searchfield > svg {
+  width: 17px;
+  height: 17px;
+  color: var(--sb-color-secondary);
+}
+
 .sb-searchfield-input {
   flex: 1 1 auto;
   min-width: 0;
@@ -2552,6 +2585,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 .sb-searchfield-input::placeholder {
+  /* Vibrant on the glass: the label color, partly see-through, so the
+     backdrop tints it as iOS's does. */
+  color: color-mix(in srgb, var(--sb-color-primary) 60%, transparent);
+}
+
+.sb-navscreen[data-sb-search-top] > .sb-navscreen-body > .sb-navscreen-content > .sb-searchfield > .sb-searchfield-input::placeholder {
   color: var(--sb-color-secondary);
 }
 
@@ -2601,7 +2640,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   box-shadow: -1px 0 0 var(--sb-color-separator);
 }
 
-.sb-navsplit-columns > [data-sb-id]:first-child {
+.sb-navsplit-columns > [data-sb-id]:first-child,
+.sb-navsplit-columns > [data-sb-ghost]:first-child {
   box-shadow: 1px 0 0 var(--sb-color-separator);
 }
 
@@ -2651,7 +2691,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 /* ViewThatFits: the candidates it did not choose have no frame and carry the
    `hidden` attribute (src/layoutDom.ts). */
-.sb-viewthatfits > [data-sb-id][hidden] {
+.sb-viewthatfits > [data-sb-id][hidden],
+.sb-viewthatfits > [data-sb-ghost][hidden] {
   display: none;
 }
 
@@ -2687,10 +2728,15 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+/* Swift Charts' grid lines are half a point wide (measured: FoodTruck's
+   forecast); a date axis's are dashed 2pt on, 2pt off. */
 .sb-chart-gridline {
   stroke: var(--sb-color-separator);
-  stroke-width: 1;
-  shape-rendering: crispEdges;
+  stroke-width: 0.5;
+}
+
+.sb-chart-gridline[data-sb-dashed] {
+  stroke-dasharray: 2 2;
 }
 
 .sb-chart-tick {
@@ -2781,8 +2827,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
    (they are in `hidden` without frames). */
 .sb-contextmenu > [data-sb-id]:not(:first-child),
 .sb-contextmenu > [data-sb-id][hidden],
+.sb-contextmenu > [data-sb-ghost]:not(:first-child),
+.sb-contextmenu > [data-sb-ghost][hidden],
 .sb-swipeactions > .sb-swipe-content > [data-sb-id]:not(:first-child),
-.sb-swipeactions > .sb-swipe-content > [data-sb-id][hidden] {
+.sb-swipeactions > .sb-swipe-content > [data-sb-id][hidden],
+.sb-swipeactions > .sb-swipe-content > [data-sb-ghost]:not(:first-child),
+.sb-swipeactions > .sb-swipe-content > [data-sb-ghost][hidden] {
   display: none;
 }
 

package/src/styles.ts

@@ -127,13 +127,26 @@ export interface PaintCSS {
   backdropFilter?: string;
 }
 
-/** Label colors (text role) and fill colors (paint role) per hierarchical level. */
+/**
+ * Label colors (text role) and fill colors (paint role) per hierarchical
+ * level. In the text role a level is one of the foreground an ancestor set
+ * (`--sb-hierarchy-<level>`, set with it), else the label color: iOS 26 draws
+ * `.secondary` under `.foregroundColor(.accentColor)` as the accent at 50%
+ * (Food Truck's card header icons) and `.tertiary` at 25% (their chevrons).
+ */
 const HIERARCHICAL_TEXT: Record<1 | 2 | 3 | 4, string> = {
-  1: 'var(--sb-color-primary)',
-  2: 'var(--sb-color-secondary)',
-  3: 'var(--sb-color-tertiary-label)',
-  4: 'var(--sb-color-quaternary-label)',
+  1: 'var(--sb-hierarchy-1, var(--sb-color-primary))',
+  2: 'var(--sb-hierarchy-2, var(--sb-color-secondary))',
+  3: 'var(--sb-hierarchy-3, var(--sb-color-tertiary-label))',
+  4: 'var(--sb-hierarchy-4, var(--sb-color-quaternary-label))',
 };
+
+/**
+ * The opacity of each hierarchical level of a foreground color (iOS 26:
+ * 50% and 25% measured; the quaternary level, not measured, as the label
+ * colors' ratio has it).
+ */
+export const HIERARCHY_OPACITY: Record<1 | 2 | 3 | 4, number> = { 1: 1, 2: 0.5, 3: 0.25, 4: 0.18 };
 const HIERARCHICAL_PAINT: Record<1 | 2 | 3 | 4, string> = {
   1: 'var(--sb-color-fill)',
   2: 'var(--sb-color-secondary-fill)',

package/src/symbols.ts

@@ -501,6 +501,9 @@ const BOOKS_VERTICAL_FILL: IconNode = [
   ['rect', { x: '17.8', y: '4.5', width: '4', height: '16', rx: '1.2', stroke: 'none', transform: 'rotate(-14 19.8 12.5)' }],
 ];
 
+/** Marks a `knockout` glyph's inner shape that is filled, not only stroked (`enclosed`). */
+const SOLID_MARK = 'data-sb-knockout-solid';
+
 /** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
 const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
 
@@ -957,8 +960,6 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'cloud.snow': outline(CloudSnow),
   'cloud.sun': outline(CloudSun),
   'cloud.sun.fill': solid(CloudSun),
-  'moon.circle.fill': solid(Moon),
-  'sun.max.circle.fill': solid(Sun),
   'person.3': outline(Users),
   'person.3.fill': solid(Users),
   'chart.line.uptrend.xyaxis': outline(TrendingUp),
@@ -1326,7 +1327,9 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
     } else {
       const base = parts.slice(0, -1).join('.');
       const glyph = GENERIC_SHAPES.has(base) ? undefined : lookupSymbol(base);
-      if (glyph) return enclosed(glyph.icon, enclosure, fill);
+      // A base whose filled form is a silhouette (`moon.fill`) is knocked
+      // out solid, as `moon.circle.fill` draws its moon.
+      if (glyph) return enclosed(glyph.icon, enclosure, fill, fill && lookupSymbol(`${base}.fill`)?.fill === 'solid');
     }
   }
   const bases: string[] = [];
@@ -1350,13 +1353,17 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
 /**
  * `icon` at 55% inside a circle or rounded square: outlined (`X.circle`), or
  * filled with the glyph knocked out of it (`X.circle.fill`), as SF Symbols
- * draw their enclosed forms.
+ * draw their enclosed forms; `solid`, the glyph's shapes are knocked out
+ * whole rather than as strokes.
  */
-function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean): SymbolGlyph {
+function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean, solid = false): SymbolGlyph {
   const outer: IconNode[number] =
     enclosure === 'circle' ? ['circle', { cx: '12', cy: '12', r: '10' }] : ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '4' }];
   // Scaled about the center; the stroke is widened to keep its weight.
-  const inner = icon.map(([tag, attrs]) => [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3' }] as IconNode[number]);
+  const inner = icon.map(
+    ([tag, attrs]) =>
+      [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3', ...(solid ? { [SOLID_MARK]: '' } : {}) }] as IconNode[number],
+  );
   return { icon: [outer, ...inner], fill: fill ? 'knockout' : 'outline' };
 }
 
@@ -1421,7 +1428,8 @@ export function renderSymbol(systemName: string): SVGElement | null {
         shape.setAttribute('fill', 'currentColor');
       } else {
         shape.setAttribute('stroke', KNOCKOUT_COLOR);
-        shape.setAttribute('fill', 'none');
+        shape.setAttribute('fill', shape.hasAttribute(SOLID_MARK) ? KNOCKOUT_COLOR : 'none');
+        shape.removeAttribute(SOLID_MARK);
       }
     });
   }