@swiftbrowser/web 0.6.0 → 0.6.2

package/src/press.ts

@@ -8,12 +8,13 @@
  * touch: lifting the highlight when the pointer leaves the control (plus a
  * margin) and restoring it when it comes back.
  *
- * The glass under a control: a bar item's shared capsule (a `leading` or
- * `trailing` toolbar), a bottom bar item's `.sb-bottom-glass` (the one
- * under it: the glass is beside the toolbar, not around it), the back and
- * More circles, the sidebar toggle, a `.glass` button, or the `.glassEffect`
- * box around a button. A control on no glass (a plain or bordered button)
- * keeps the stylesheet's `:active` dimming.
+ * The glass under a control: a bar item's capsule (the `.sb-bar-glass`
+ * under it: the glass is beside the toolbars drawn on it, not around them,
+ * so they swell along, about the capsule's center), the back and More
+ * circles, the sidebar toggle, a `.glass` button, or the `.glassEffect` box
+ * around a button. iOS swells the whole group, never one item of it: a
+ * glass-styled button in a bar group is the group's press. A control on no
+ * glass (a plain or bordered button) keeps the stylesheet's `:active` dimming.
  */
 
 /** The controls a press can highlight the glass under. */
@@ -25,10 +26,15 @@ const OWN_GLASS = '.sb-navbar-back, .sb-navbar-more, .sb-navsplit-toggle, .sb-bu
 /** UIKit keeps a button highlighted while the touch stays within this far outside it. */
 export const PRESS_SLOP = 24;
 
+/** How long the glass takes to spring back once released (styles.css). */
+const SPRING_BACK_MS = 500;
+
 interface Press {
   pointerId: number;
   control: HTMLElement;
   surface: HTMLElement;
+  /** The toolbars drawn on the capsule, which swell with it, and their `transform-origin` before. */
+  along: { el: HTMLElement; origin: string }[];
   /** Where the control was on the pointer down (its bounds plus the slop hold the press). */
   bounds: DOMRect;
   held: boolean;
@@ -52,7 +58,7 @@ export class PressEffects {
     if (!control || !this.root.contains(control) || isDisabled(control)) return;
     const surface = glassSurfaceOf(control, this.root);
     if (!surface) return;
-    this.press = { pointerId: event.pointerId, control, surface, bounds: control.getBoundingClientRect(), held: false };
+    this.press = { pointerId: event.pointerId, control, surface, along: toolbarsOn(surface), bounds: control.getBoundingClientRect(), held: false };
     this.hold(true);
     window.addEventListener('pointermove', this.onPointerMove);
     window.addEventListener('pointerup', this.onPointerUp);
@@ -82,11 +88,21 @@ export class PressEffects {
     press.held = held;
     press.surface.toggleAttribute('data-sb-pressed', held);
     if (press.control !== press.surface) press.control.toggleAttribute('data-sb-pressed-item', held);
+    for (const { el } of press.along) el.toggleAttribute('data-sb-pressed-with', held);
   }
 
   private release(): void {
     this.hold(false);
+    const press = this.press;
     this.press = null;
+    if (press) {
+      // The origins stay until the spring back has run; the next press sets them again.
+      const settle = (): void => {
+        if (this.press?.surface === press.surface) return;
+        for (const { el, origin } of press.along) el.style.transformOrigin = origin;
+      };
+      window.setTimeout(settle, SPRING_BACK_MS);
+    }
     window.removeEventListener('pointermove', this.onPointerMove);
     window.removeEventListener('pointerup', this.onPointerUp);
     window.removeEventListener('pointercancel', this.onPointerUp);
@@ -103,26 +119,48 @@ function isDisabled(control: HTMLElement): boolean {
  * top of the file).
  */
 export function glassSurfaceOf(control: HTMLElement, root: HTMLElement): HTMLElement | null {
-  if (control.matches(OWN_GLASS)) return control;
   const toolbar = control.closest<HTMLElement>('.sb-toolbar');
   if (toolbar && root.contains(toolbar)) {
     const placement = toolbar.dataset['sbPlacement'];
-    if (placement === 'leading' || placement === 'trailing') return toolbar;
-    if (placement === 'bottom') return bottomGlassUnder(control, toolbar);
+    if (placement === 'leading' || placement === 'trailing' || placement === 'bottom') return barGlassUnder(control, toolbar);
     return null;
   }
+  if (control.matches(OWN_GLASS)) return control;
   const glass = control.closest<HTMLElement>('[data-sb-glass]');
   return glass && root.contains(glass) ? glass : null;
 }
 
-/** The bottom bar capsule a bottom toolbar item is drawn on: the screen's `.sb-bottom-glass` under its center. */
-function bottomGlassUnder(control: HTMLElement, toolbar: HTMLElement): HTMLElement | null {
+/**
+ * The toolbars drawn on a capsule (`data-sb-toolbars`, src/layoutDom.ts),
+ * each given the capsule's center as its `transform-origin` so that it
+ * swells with the capsule rather than about itself.
+ */
+function toolbarsOn(surface: HTMLElement): { el: HTMLElement; origin: string }[] {
+  const ids = surface.dataset['sbToolbars'];
+  const screen = surface.parentElement;
+  if (ids === undefined || !screen) return [];
+  const g = surface.getBoundingClientRect();
+  const cx = g.left + g.width / 2;
+  const cy = g.top + g.height / 2;
+  const along: { el: HTMLElement; origin: string }[] = [];
+  for (const id of ids.split(' ')) {
+    const el = id ? screen.querySelector<HTMLElement>(`.sb-toolbar[data-sb-id="${id}"]`) : null;
+    if (!el) continue;
+    const r = el.getBoundingClientRect();
+    along.push({ el, origin: el.style.transformOrigin });
+    el.style.transformOrigin = `${cx - r.left}px ${cy - r.top}px`;
+  }
+  return along;
+}
+
+/** The capsule a bar item is drawn on: the screen's `.sb-bar-glass` under its center. */
+function barGlassUnder(control: HTMLElement, toolbar: HTMLElement): HTMLElement | null {
   const screen = toolbar.closest<HTMLElement>('.sb-navscreen');
   if (!screen) return null;
   const rect = control.getBoundingClientRect();
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
-  for (const glass of screen.querySelectorAll<HTMLElement>(':scope > .sb-bottom-glass')) {
+  for (const glass of screen.querySelectorAll<HTMLElement>(':scope > .sb-bar-glass')) {
     const g = glass.getBoundingClientRect();
     if (cx >= g.left && cx <= g.right && cy >= g.top && cy <= g.bottom) return glass;
   }

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

@@ -36,6 +36,7 @@
 import {
   Animator,
   barToolbarOf,
+  isBarToolbar,
   EXIT_CLONE_CLASS,
   emptyPass,
   setTransition,
@@ -150,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';
@@ -1578,6 +1579,11 @@ export class Renderer {
         }
       }
     }
+    // iOS 26: a bar group moved to another placement is not the same group
+    // on screen; it leaves as it was and comes in where it goes (the Swift
+    // runtime keys groups by placement, so this is for other hosts).
+    const replaces = kind === 'toolbar' && node !== undefined && (props as { placement?: string }).placement !== node.props['placement'] && isBarToolbar(el);
+    if (replaces) this.replaceToolbar(el);
     if (node) {
       const next = asRecord(props);
       // Another Swift view now reads this element's size (a `geometry`
@@ -1626,6 +1632,8 @@ export class Renderer {
     const animation = ANIMATIONS.get(el);
     if (animation) record.animation = animation;
     this.pass.updated.set(el, record);
+    // A replaced toolbar enters anew: its style change is not tweened.
+    if (replaces) this.pass.updated.delete(el);
     this.dirty.add(id);
     if (kind === 'navscreen') {
       const stack = el.parentElement?.closest<HTMLElement>('.sb-navstack');
@@ -1716,6 +1724,23 @@ export class Renderer {
     }
   }
 
+  /**
+   * Hands the Animator a bar toolbar as removed (a clone of it as it is, where
+   * it is: called before its new placement is applied) and inserted (itself),
+   * so that at commit it scales out from its old place and in at its new one
+   * instead of tweening between the two.
+   */
+  private replaceToolbar(el: HTMLElement): void {
+    const parent = el.parentElement;
+    if (!parent) return;
+    this.passRootRect ??= this.animator.rootRect();
+    const rect = this.animator.rectOf(el, this.passRootRect);
+    const ancestors: HTMLElement[] = [];
+    for (let a: HTMLElement | null = parent; a && a !== this.root; a = a.parentElement) ancestors.push(a);
+    this.pass.removed.push({ el: ghostClone(el), ancestors, rect, transition: transitionOf(el) });
+    this.pass.inserted.add(el);
+  }
+
   private remove(id: ElementId, op: Op): void {
     if (id === ROOT_ID) throw new RendererError('Element 0 is the root and cannot be removed', op);
     const el = this.elements.get(id);
@@ -2872,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;
@@ -3411,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);
 }
@@ -3667,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;
 }
 
@@ -2286,9 +2303,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .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-bar-glass::after,
 .sb-searchfield::after,
 .sb-navsplit-toggle::after,
 .sb-picker-menu::after,
@@ -2317,24 +2332,20 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   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. */
+/* iOS 26: a bar's leading and trailing items float on glass capsules
+   (`.sb-bar-glass`, below: adjacent toolbars share one, the engine sizes it
+   with each item in a slot at least 44 wide), drawn in the label color
+   unless tinted. */
 .sb-toolbar[data-sb-placement="leading"],
 .sb-toolbar[data-sb-placement="trailing"] {
-  border-radius: 22px;
-  background: var(--sb-glass-background);
-  box-shadow: var(--sb-glass-shadow);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
   --sb-color-accent: var(--sb-color-primary);
 }
 
 /* Toolbar items in the bar are laid out in the screen's body, under the bar
    element (z 1): they stack above it, so its scroll edge effect blurs the
-   content under the bar and not them. */
+   content under the bar and not them, and above their capsules (z 2). */
 .sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="principal"]) {
-  z-index: 2;
+  z-index: 3;
 }
 
 /* Their symbols are drawn a little larger and heavier (semibold), as iOS 26
@@ -2351,17 +2362,21 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* iOS 26: a bottom toolbar's items float over the content on Liquid Glass
-   capsules (engine `bottomGlass0` …, src/layoutDom.ts), drawn in the label
-   color unless tinted, above the scroll edge effect. */
+   capsules, drawn in the label color unless tinted, above the scroll edge
+   effect. */
 .sb-toolbar[data-sb-placement="bottom"] {
   z-index: 3;
   --sb-color-accent: var(--sb-color-primary);
 }
 
-.sb-bottom-glass {
+/* The bar's Liquid Glass capsules (src/layoutDom.ts; engine `leadingGlass0`
+   …, `trailingGlass0` …, `bottomGlass0` …): a 44-tall capsule in the
+   navigation bar, a 48-tall one in the bottom bar, under the items drawn on
+   them (`data-sb-toolbars`). */
+.sb-bar-glass {
   position: absolute;
   z-index: 2;
-  border-radius: 24px;
+  border-radius: 22px;
   background: var(--sb-glass-background);
   box-shadow: var(--sb-glass-shadow);
   backdrop-filter: blur(12px) saturate(180%);
@@ -2369,18 +2384,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+.sb-bar-glass[data-sb-placement="bottom"] {
+  border-radius: 24px;
+}
+
 /* iOS 26 press feedback on Liquid Glass (src/press.ts): while a pointer is
-   down on a bar button or a glass button, the glass under it (a bar group's
-   capsule, a bottom bar capsule, the back and More circles, the sidebar
-   toggle, a `.glass` button, a `.glassEffect` box) swells and brightens;
-   when it lifts, the glass springs back (an overshooting ease-out). The
-   pressed item in a group gets a highlight capsule of its own; buttons on
-   glass do not dim as plain buttons do. The swell is the `scale` property,
-   apart from `transform`, which the renderer sets (offsets, rotations) and
-   the Animator tweens. */
+   down on a bar button or a glass button, the glass under it (a bar
+   capsule, the back and More circles, the sidebar toggle, a `.glass`
+   button, a `.glassEffect` box) swells and brightens; when it lifts, the
+   glass springs back (an overshooting ease-out). The whole group swells,
+   as on iOS, never one item of it (the toolbars on a capsule, beside it
+   rather than in it, swell along: `data-sb-pressed-with`, about the
+   capsule's center); buttons on glass do not dim as plain buttons do. The
+   swell is the `scale` property, apart from `transform`, which the renderer
+   sets (offsets, rotations) and the Animator tweens. */
 .sb-toolbar[data-sb-placement="leading"],
 .sb-toolbar[data-sb-placement="trailing"],
-.sb-bottom-glass,
+.sb-toolbar[data-sb-placement="bottom"],
+.sb-bar-glass,
 .sb-navbar-back,
 .sb-navbar-more,
 .sb-navsplit-toggle,
@@ -2396,25 +2417,26 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 /* A capsule of several items swells less: it is wider. */
 .sb-toolbar[data-sb-placement="leading"],
 .sb-toolbar[data-sb-placement="trailing"],
-.sb-bottom-glass {
+.sb-toolbar[data-sb-placement="bottom"],
+.sb-bar-glass {
   --sb-press-scale: 1.05;
 }
 
-[data-sb-pressed] {
+/* (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],
+.sb-toolbar[data-sb-pressed-with],
+.sb-button[data-sb-style="glass"][data-sb-pressed] {
   scale: var(--sb-press-scale);
-  background-color: var(--sb-glass-pressed);
   transition:
     scale 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
     background-color 0.14s ease;
 }
 
-.sb-toolbar > [data-sb-pressed-item]::before {
-  content: "";
-  position: absolute;
-  inset: -11px -10px;
-  border-radius: 9999px;
-  background: var(--sb-glass-selected);
-  pointer-events: none;
+[data-sb-pressed] {
+  background-color: var(--sb-glass-pressed);
 }
 
 .sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="bottom"]) :is(.sb-button, .sb-menu):active,
@@ -2426,7 +2448,10 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-sb-pressed] {
+  [data-sb-pressed],
+  [data-sb-pressed-with],
+  .sb-toolbar[data-sb-pressed-with],
+  .sb-button[data-sb-style="glass"][data-sb-pressed] {
     scale: none;
   }
 }
@@ -2457,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);
@@ -2527,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;
@@ -2551,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);
 }
 
@@ -2600,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);
 }
 
@@ -2650,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;
 }
 
@@ -2686,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 {
@@ -2780,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)',