@swiftbrowser/web 0.3.1 → 0.5.0

package/src/styles.css

@@ -1,10 +1,12 @@
 /* ---------------------------------------------------------------------------
    iOS design tokens. Light values live on the device frame; dark ones switch
-   with the frame's data-theme so the page chrome and the "phone" are
-   independent.
+   with the frame's data-theme so the page around it (page.css) and the
+   "phone" are independent.
    ------------------------------------------------------------------------- */
 
 :root {
+  /* SF Pro's ascender minus its cap height: where a line's capitals start. */
+  --sb-cap-inset: 0.2476em;
   /* The UINavigationController push curve: fast start, long settle. */
   --sb-nav-easing: cubic-bezier(0.32, 0.72, 0, 1);
   --sb-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter,
@@ -13,15 +15,6 @@
      overrides this with the current size (see .device below). */
   --sb-font-size-body: 17px;
 
-  /* Page chrome (not iOS) */
-  --page-bg: #e9e9ee;
-  --page-fg: #1c1c1e;
-  --page-muted: #6e6e73;
-  --page-border: rgba(0, 0, 0, 0.08);
-  --page-surface: rgba(255, 255, 255, 0.8);
-  --page-error-bg: #ffe5e5;
-  --page-error-fg: #a1000d;
-
   /* Device dimensions (iPhone 15 Pro logical points) */
   --device-screen-width: 393px;
   --device-screen-height: 852px;
@@ -39,18 +32,6 @@
   --sb-inset-left: env(safe-area-inset-left, 0px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --page-bg: #111114;
-    --page-fg: #f2f2f7;
-    --page-muted: #98989f;
-    --page-border: rgba(255, 255, 255, 0.1);
-    --page-surface: rgba(28, 28, 30, 0.85);
-    --page-error-bg: #3a0b10;
-    --page-error-fg: #ff8a8a;
-  }
-}
-
 .device {
   /* Dynamic Type: main.ts writes --sb-ts-<style>-size / -lh / -scale on the
      device frame for the selected size (typography.ts); the fallbacks are the
@@ -162,159 +143,28 @@
 }
 
 /* ---------------------------------------------------------------------------
-   Page layout
+   The renderer's boxes size by their borders. Only its own DOM: a page that
+   draws an island (@swiftbrowser/react) keeps its own box model.
    ------------------------------------------------------------------------- */
 
-*,
-*::before,
-*::after {
+.device,
+.device *,
+.device *::before,
+.device *::after {
   box-sizing: border-box;
 }
 
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: var(--page-bg);
-  color: var(--page-fg);
-  font-family: var(--sb-font-family);
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-}
-
-.toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  background: var(--page-surface);
-  border-bottom: 1px solid var(--page-border);
-  backdrop-filter: blur(16px);
-}
-
-.toolbar-brand {
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.toolbar-sep {
-  width: 1px;
-  height: 18px;
-  background: var(--page-border);
-}
-
-.toolbar-label {
-  color: var(--page-muted);
-}
-
-.toolbar-value {
-  font-variant-numeric: tabular-nums;
-  padding: 2px 8px;
-  border-radius: 6px;
-  background: var(--page-border);
-}
-
-.toolbar-spacer {
-  flex: 1 1 0;
-}
-
-/* Hot-reload indicator, driven by the dev server's sb:build-* events. */
-.toolbar-build {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--page-muted);
-}
-
-.toolbar-build[hidden] {
-  display: none;
-}
-
-.toolbar-build::before {
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 1.5px solid currentColor;
-  border-top-color: transparent;
-  animation: sb-spin 0.9s linear infinite;
-}
-
-.toolbar-build[data-state="error"] {
-  color: var(--page-error-fg);
-}
-
-.toolbar-build[data-state="error"]::before {
-  animation: none;
-  border-color: currentColor;
-}
-
-.toolbar-button {
-  font: inherit;
-  padding: 6px 12px;
-  border: 1px solid var(--page-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--page-fg);
-  cursor: pointer;
-}
-
-.toolbar-button:hover {
-  background: var(--page-border);
-}
-
-.toolbar-button[aria-pressed="true"] {
-  background: var(--page-fg);
-  color: var(--page-bg);
-  border-color: transparent;
-}
-
-.toolbar-select {
-  font: inherit;
-  padding: 5px 8px;
-  border: 1px solid var(--page-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--page-fg);
-  cursor: pointer;
-}
-
-.stage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 32px 16px 48px;
-}
-
-.status {
-  max-width: 560px;
-  margin: 0;
-  padding: 10px 14px;
-  border-radius: 10px;
-  background: var(--page-error-bg);
-  color: var(--page-error-fg);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
 /* ---------------------------------------------------------------------------
    Device frame
    ------------------------------------------------------------------------- */
 
 .device {
   position: relative;
+}
+
+/* The iPhone's size and bezel: the frame's only. An island (`.sb-island`,
+   below) is the page's box, sized by the page's own CSS. */
+.device:not(.sb-island) {
   flex: 0 0 auto;
   width: calc(var(--device-screen-width) + 2 * var(--device-bezel));
   height: calc(var(--device-screen-height) + 2 * var(--device-bezel));
@@ -483,53 +333,13 @@ body {
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts)
 
-   On a real phone there is no toolbar and no fake bezel: the OS draws the
-   status bar and #screen fills the viewport. The layout engine still gets a
-   status-bar / home-indicator safe area, but from env(safe-area-inset-*)
-   (via --sb-inset-*), so it is only non-zero in standalone mode / landscape.
+   On a real phone there is no fake bezel: the OS draws the status bar and
+   #screen fills the viewport (the page's part, its toolbar and background,
+   is page.css). The layout engine still gets a status-bar / home-indicator
+   safe area, but from env(safe-area-inset-*) (via --sb-inset-*), so it is
+   only non-zero in standalone mode / landscape.
    ------------------------------------------------------------------------- */
 
-html[data-sb-mode="device"] {
-  height: 100%;
-  overflow: hidden;
-  overscroll-behavior: none;
-  /* No double-tap zoom, no text inflation in landscape. */
-  touch-action: manipulation;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-html[data-sb-mode="device"] body {
-  min-height: 100dvh;
-  overflow: hidden;
-  overscroll-behavior: none;
-  touch-action: manipulation;
-}
-
-/* The page behind the app is the OS appearance's system background from the
-   first paint (Safari tints its status bar strip from it); chromeColor.ts
-   then keeps it at the color the app draws at its top edge. */
-html[data-sb-mode="device"],
-html[data-sb-mode="device"] body {
-  background: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-sb-mode="device"],
-  html[data-sb-mode="device"] body {
-    background: #000000;
-  }
-}
-
-html[data-sb-mode="device"] .toolbar {
-  display: none;
-}
-
-html[data-sb-mode="device"] .stage {
-  padding: 0;
-  gap: 0;
-}
-
 html[data-sb-mode="device"] .device {
   position: fixed;
   top: 0;
@@ -556,18 +366,6 @@ html[data-sb-mode="device"] .device-screen {
   border-radius: 0;
 }
 
-/* The error banner floats over the app, clear of the home indicator. */
-html[data-sb-mode="device"] .status {
-  position: fixed;
-  left: 16px;
-  right: 16px;
-  bottom: calc(16px + var(--sb-inset-bottom));
-  z-index: 10;
-  max-width: none;
-  max-height: 40dvh;
-  overflow: auto;
-}
-
 /* ---------------------------------------------------------------------------
    Rendered elements
 
@@ -701,11 +499,20 @@ html[data-sb-mode="device"] .status {
   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. */
 .sb-image > svg {
   display: block;
-  width: 1em;
-  height: 1em;
+  flex: none;
+  width: 1.43em;
+  height: 1.43em;
   stroke: currentColor;
+  stroke-width: 1.4;
 }
 
 /* An indeterminate ProgressView: the activity indicator (symbols.ts), in
@@ -949,6 +756,19 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   text-align: left;
 }
 
+/* SF Pro's capitals start 0.2476em below the top of a line SwiftUI lays out
+   (ascender 0.952em − cap height 0.705em): trim the first line to its cap
+   height and put it there, so text the engine places lands where iOS draws
+   it, whatever font the page has. */
+@supports (text-box: trim-start cap alphabetic) {
+  .sb-text,
+  .sb-section-header,
+  .sb-section-footer {
+    text-box: trim-start cap alphabetic;
+    padding-top: var(--sb-cap-inset);
+  }
+}
+
 .sb-section-header[hidden],
 .sb-section-footer[hidden] {
   display: none;
@@ -1259,11 +1079,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* The large title scrolls with the screen's root list or scroll view
-   (src/largeTitle.ts moves it); drags on it scroll that view. */
+   (src/largeTitle.ts moves it into it); drags on it scroll that view. There
+   it is content, under the bar. */
 .sb-navbar-large-title {
   pointer-events: none;
 }
 
+[data-sb-under-bar] > .sb-navbar-large-title {
+  z-index: auto;
+}
+
 /* Until the large title has scrolled under the bar, the inline title (whose
    rect the engine reports for a title that can collapse) stays hidden. */
 .sb-navscreen[data-sb-display="large"] > .sb-navbar > .sb-navbar-title {
@@ -1275,11 +1100,122 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   opacity: 1;
 }
 
-/* iOS 26's scroll edge effect, simplified: scrolled content fades in over
-   16px below the bar instead of being cut off at it (src/largeTitle.ts). */
-[data-sb-scrolls-title][data-sb-scrolled] {
-  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px);
-  mask-image: linear-gradient(to bottom, transparent, #000 16px);
+/* iOS 26's scroll edge effect: a screen's root list or scroll view runs up
+   under the bar (the engine insets its content by the bar), and once content
+   is under it (`data-sb-scrolled`, src/largeTitle.ts) the bar blurs it and
+   fades it into the background toward the top of the screen, a little past
+   the bar's bottom edge. The bar's items stay on their glass. */
+.sb-navscreen {
+  --sb-edge-color: var(--sb-color-system-background);
+}
+
+.sb-navscreen:has(> .sb-navscreen-body .sb-list:is([data-sb-under-bar], [data-sb-under-bottom]):not([data-sb-list-style="plain"])) {
+  --sb-edge-color: var(--sb-color-grouped-background);
+}
+
+.sb-navbar::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 -20px;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  background: linear-gradient(
+    to bottom,
+    var(--sb-edge-color) 0%,
+    color-mix(in srgb, var(--sb-edge-color) 75%, transparent) 45%,
+    transparent 100%
+  );
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
+  mask-image: linear-gradient(to bottom, #000 60%, transparent);
+}
+
+/* Its strength follows the content under the bar, ramping up over the
+   first 40px scrolled (`--sb-edge-top`, src/scrollEdge.ts); the transition
+   smooths a scroll that jumps. */
+.sb-navscreen[data-sb-scrolled] > .sb-navbar::before {
+  opacity: var(--sb-edge-top, 1);
+  transition: opacity 0.12s linear;
+}
+
+/* At the bottom: a list or scroll view runs under the tab bar, or its
+   screen's bottom toolbar or search field (the engine insets its content by
+   the bar, `--sb-bottom-edge` tall), and while content is under it
+   (`data-sb-scrolled-bottom`, src/scrollEdge.ts) its screen (over the
+   screen's content: the body is static, so its pseudo-element is placed in
+   the screen, whose own `::after` dims it under a pushed screen), or the
+   tab it fills, blurs it and fades it into the background toward the bottom
+   of the screen, from a little above the bar. The bars stay on top. */
+.sb-tab {
+  --sb-edge-color: var(--sb-color-system-background);
+}
+
+.sb-tab:has(> .sb-list[data-sb-under-bottom]:not([data-sb-list-style="plain"])) {
+  --sb-edge-color: var(--sb-color-grouped-background);
+}
+
+.sb-navscreen > .sb-navscreen-body::after,
+.sb-tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(var(--sb-bottom-edge, 0px) + 20px);
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  /* iOS 26 mostly fades the content here (it stays faintly legible under
+     the bar) and barely blurs it. */
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--sb-edge-color) 70%, transparent) 0%,
+    color-mix(in srgb, var(--sb-edge-color) 55%, transparent) 45%,
+    transparent 100%
+  );
+  -webkit-backdrop-filter: blur(1.5px);
+  backdrop-filter: blur(1.5px);
+  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
+  mask-image: linear-gradient(to top, #000 60%, transparent);
+}
+
+.sb-navscreen[data-sb-scrolled-bottom] > .sb-navscreen-body::after,
+.sb-tab[data-sb-scrolled-bottom]::after {
+  opacity: var(--sb-edge-bottom, 1);
+  transition: opacity 0.12s linear;
+}
+
+/* `.scrollEdgeEffectStyle(.hard, for:)`: an opaque backing exactly behind
+   the bar with a dividing line, no fade; `.scrollEdgeEffectHidden`: none. */
+.sb-navscreen[data-sb-edge-top="hard"] > .sb-navbar::before {
+  inset: 0;
+  background: var(--sb-edge-color);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  -webkit-mask-image: none;
+  mask-image: none;
+  border-bottom: 0.5px solid var(--sb-color-separator);
+}
+
+.sb-navscreen[data-sb-edge-bottom="hard"] > .sb-navscreen-body::after,
+.sb-tab[data-sb-edge-bottom="hard"]::after {
+  height: var(--sb-bottom-edge, 0px);
+  background: var(--sb-edge-color);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  -webkit-mask-image: none;
+  mask-image: none;
+  border-top: 0.5px solid var(--sb-color-separator);
+}
+
+.sb-navscreen[data-sb-edge-top="hidden"] > .sb-navbar::before,
+.sb-navscreen[data-sb-edge-bottom="hidden"] > .sb-navscreen-body::after,
+.sb-tab[data-sb-edge-bottom="hidden"]::after {
+  display: none;
 }
 
 /* NavigationLink: a tappable label. Inside a list it is a row with a chevron
@@ -1539,6 +1475,27 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-system-background);
 }
 
+/* `sidebar` (iPadOS; a NavigationSplitView's sidebar list): the rows sit on
+   the list's background, without cards or hairlines, and only a selected
+   row is filled (its rounded fill, below). The engine lays it out like
+   `insetGrouped` with 44pt rows. */
+.sb-list[data-sb-list-style="sidebar"] .sb-section-rows,
+.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > [data-sb-id],
+.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > [data-sb-ghost],
+.sb-list[data-sb-list-style="sidebar"] > .sb-list-content > :not(.sb-section) {
+  background: transparent;
+  border-radius: 0;
+}
+
+.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > *::after,
+.sb-list[data-sb-list-style="sidebar"] > .sb-list-content > :not(.sb-section)::after {
+  display: none;
+}
+
+.sb-list[data-sb-list-style="sidebar"] :is(.sb-section-rows, .sb-list-content) > :is(input, textarea) {
+  background-image: none;
+}
+
 /* ---------------------------------------------------------------------------
    Phase 4: tab views. The tabs are stacked in the content slot (every tab has
    the tab view's frame); the selected one is visible, the others keep their
@@ -1885,6 +1842,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-grid,
 .sb-gridrow,
 .sb-lazyvgrid,
+.sb-lazyhgrid,
 .sb-decorated {
   display: block;
 }
@@ -2152,30 +2110,50 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   --sb-color-accent: var(--sb-color-primary);
 }
 
-/* Their symbols are drawn larger and heavier, as iOS 26 draws bar buttons. */
-.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"]) .sb-image > svg {
-  transform: scale(1.25);
-  stroke-width: 2.1;
+/* 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. */
+.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="principal"]) {
+  z-index: 2;
+}
+
+/* Their symbols are drawn a little larger and heavier (semibold), as iOS 26
+   draws bar buttons: a plus is 17.7 pt with 2.33 pt bars there. */
+.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="bottom"]) .sb-image > svg {
+  width: 1.57em;
+  height: 1.57em;
+  stroke-width: 1.85;
 }
 
+/* A bottom toolbar's symbols are as large but regular weight. */
+.sb-toolbar[data-sb-placement="bottom"] .sb-image > svg {
+  stroke-width: 1.5;
+}
+
+/* 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. */
 .sb-toolbar[data-sb-placement="bottom"] {
   z-index: 3;
-  background: var(--sb-color-tabbar-background);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  --sb-color-accent: var(--sb-color-primary);
 }
 
-.sb-toolbar[data-sb-placement="bottom"]::before {
-  content: "";
+.sb-bottom-glass {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 1px;
-  background: var(--sb-color-separator);
+  z-index: 2;
+  border-radius: 24px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
   pointer-events: none;
 }
 
+/* A ToolbarSpacer draws nothing (the engine also hides it). */
+.sb-toolbar[data-sb-spacer] {
+  display: none;
+}
+
 /* Search field: a capsule (engine `searchField` rect) with a
    magnifier leading; the input sends `text` events like a textfield. */
 .sb-searchfield {
@@ -2254,12 +2232,61 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-system-background);
 }
 
+/* `.inspector`: the content and a trailing panel (protocol children placed by
+   the engine). The panel draws the hairline before it, in the 1pt gap the
+   engine leaves, so the hairline slides with it. */
+.sb-inspector {
+  overflow: hidden;
+}
+
+.sb-inspectorpanel {
+  background: var(--sb-color-system-background);
+  box-shadow: -1px 0 0 var(--sb-color-separator);
+}
+
 .sb-navsplit-separator {
   position: absolute;
   background: var(--sb-color-separator);
   pointer-events: none;
 }
 
+/* iPadOS: the sidebar toggle, a 44pt glass circle at the leading edge of
+   the bar row (the sidebar's, or the detail's while the sidebar is hidden),
+   over the columns. */
+.sb-navsplit-toggle {
+  position: absolute;
+  z-index: 2;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  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%);
+  color: var(--sb-color-primary);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-navsplit-toggle[hidden] {
+  display: none;
+}
+
+.sb-navsplit-toggle:active {
+  opacity: 0.3;
+}
+
+.sb-navsplit-toggle > svg {
+  width: 22px;
+  height: 22px;
+}
+
 /* A selected `navlink` row (`List(selection:)`): the sidebar-style rounded
    fill. The engine omits the chevron inside a navsplit sidebar; elsewhere
    the chevron stays. The list-row selectors outrank the per-style row
@@ -2429,6 +2456,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-grid,
 .sb-gridrow,
 .sb-lazyvgrid,
+.sb-lazyhgrid,
 .sb-viewthatfits,
 .sb-decorated,
 .sb-gesture,
@@ -2436,8 +2464,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
-:is(.sb-vstack, .sb-hstack, .sb-zstack, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture)
-  > [data-sb-kind]:not(.sb-vstack, .sb-hstack, .sb-zstack, .sb-spacer, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture) {
+:is(.sb-vstack, .sb-hstack, .sb-zstack, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-lazyhgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture)
+  > [data-sb-kind]:not(.sb-vstack, .sb-hstack, .sb-zstack, .sb-spacer, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-lazyhgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture) {
   pointer-events: auto;
 }
 
@@ -2563,7 +2591,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* `listrow`: the edit-mode control at the engine's `editControl` rect (hidden
-   otherwise); a selected row reuses the Phase 7 selected-row fill. */
+   otherwise; its 22px circle is centred 28 from the card's edge, as on
+   iOS); a selected row reuses the Phase 7 selected-row fill. */
 .sb-listrow-control {
   appearance: none;
   position: absolute;
@@ -2578,6 +2607,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+}
+
+/* The controls fade in as the list starts editing (layoutDom marks them
+   while they appear); a row moved in the DOM by a reorder keeps them put. */
+.sb-listrow-control[data-sb-appear],
+.sb-listrow-grip[data-sb-appear] {
   animation: sb-fade-in 0.25s ease-out both;
 }
 
@@ -2585,6 +2620,89 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* `listrow`: the reorder grip of a movable row at the engine's
+   `reorderControl` rect (edit mode only): three gray lines, which a press
+   lifts the row by (src/dragDrop.ts). */
+.sb-listrow-grip {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sb-color-tertiary-label);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.sb-listrow-grip[hidden] {
+  display: none;
+}
+
+.sb-listrow-grip > svg {
+  width: 21px;
+  height: 11px;
+  overflow: visible;
+  stroke: currentColor;
+  stroke-width: 1.33;
+}
+
+/* A row being reordered: its neighbours slide out of its way (the
+   transition), it follows the pointer above them with a shadow, and settles
+   into its slot with the same slide. The rows are composited for the whole
+   reorder (`will-change`): promoting one as its slide starts would
+   re-rasterize it, a blink of its text and icons. */
+[data-sb-reordering] > .sb-listrow[data-sb-movable] {
+  transition: transform 0.3s var(--sb-nav-easing);
+  will-change: transform;
+}
+
+.sb-listrow[data-sb-lifting] {
+  z-index: 5;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  cursor: grabbing;
+}
+
+.sb-listrow[data-sb-lifting]:not([data-sb-settling]) {
+  transition: none;
+}
+
+/* `draggable` / `dropdestination`: transparent wrappers; a lifted view's
+   copy follows the pointer over everything, scaled up a little with a
+   shadow, while the original dims; letting go off a destination slides the
+   copy back. A targeted destination shows nothing of its own (the app's
+   `isTargeted` does), only that the copy may drop there. */
+.sb-draggable,
+.sb-dropdestination {
+  -webkit-touch-callout: none;
+}
+
+.sb-draggable {
+  cursor: grab;
+}
+
+.sb-draggable[data-sb-dragging] {
+  opacity: 0.4;
+}
+
+.sb-drag-preview {
+  z-index: 60;
+  pointer-events: none;
+  opacity: 0.9;
+  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
+  will-change: transform;
+}
+
+.sb-drag-preview[data-sb-settling] {
+  transition: transform 0.3s var(--sb-nav-easing);
+}
+
+[data-sb-dragging] .sb-dropdestination {
+  cursor: copy;
+}
+
 .sb-listrow-circle {
   display: flex;
   align-items: center;
@@ -2625,6 +2743,14 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 .sb-listrow[data-sb-deletable]:not([data-sb-selectable]) .sb-listrow-circle > .sb-listrow-minus {
   display: block;
+  transition: transform 0.3s var(--sb-nav-easing);
+}
+
+/* While the row shows its Delete button (the minus was tapped, or the row
+   swiped) the minus stands upright, as on iOS; the content, and the grip in
+   it, slid aside. */
+.sb-listrow[data-sb-swipe-open="trailing"] .sb-listrow-circle > .sb-listrow-minus {
+  transform: rotate(-90deg);
 }
 
 .sb-listrow[data-sb-selectable] {
@@ -2638,6 +2764,26 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   border-radius: 10px;
 }
 
+/* The fill is the row's alone: its swipe content (which inherits the row's
+   background to cover the actions behind it) and a selected link inside it
+   would each stack another translucent layer, a darker pill around the
+   label. */
+.sb-listrow[data-sb-selected] > .sb-swipe-content {
+  background-color: transparent;
+}
+
+.sb-listrow .sb-navlink[data-sb-selected] {
+  background: transparent;
+}
+
+/* Like iOS, a selected row's fill has no hairline under it or above it. */
+.sb-section-rows > [data-sb-selected]::after,
+.sb-list-content > [data-sb-selected]::after,
+.sb-section-rows > :has(+ [data-sb-selected])::after,
+.sb-list-content > :has(+ [data-sb-selected])::after {
+  display: none;
+}
+
 @keyframes sb-fade-in {
   from {
     opacity: 0;
@@ -2654,7 +2800,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
+  /* Under the bar a scroll view's content starts below it. */
+  top: var(--sb-top-inset, 0px);
   height: 40px;
   display: flex;
   align-items: center;
@@ -2682,17 +2829,20 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 .sb-list[data-sb-refreshable] > .sb-list-content,
-.sb-scrollview[data-sb-refreshable] > .sb-scroll-content {
+.sb-scrollview[data-sb-refreshable] > .sb-scroll-content,
+[data-sb-refreshable] > .sb-navbar-large-title {
   transition: transform 0.3s var(--sb-nav-easing);
 }
 
 [data-sb-pulling] > .sb-list-content,
-[data-sb-pulling] > .sb-scroll-content {
+[data-sb-pulling] > .sb-scroll-content,
+[data-sb-pulling] > .sb-navbar-large-title {
   transition: none;
 }
 
 [data-sb-refreshing] > .sb-list-content,
-[data-sb-refreshing] > .sb-scroll-content {
+[data-sb-refreshing] > .sb-scroll-content,
+[data-sb-refreshing] > .sb-navbar-large-title {
   transform: translateY(40px);
 }
 
@@ -3270,3 +3420,59 @@ svg.sb-path {
   display: block;
   overflow: hidden;
 }
+
+/* ---------------------------------------------------------------------------
+   `host` elements (src/hostContent.ts): the page's own DOM in a box the
+   engine sizes. The content element is positioned at the box's origin and
+   takes its width; in `fill` sizing its height too. The box clips.
+   ------------------------------------------------------------------------- */
+.sb-host {
+  display: block;
+  overflow: hidden;
+}
+
+.sb-host > .sb-host-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sb-host[data-sb-sizing="fill"] > .sb-host-content {
+  height: 100%;
+}
+
+/* ---------------------------------------------------------------------------
+   Islands (@swiftbrowser/react's `SwiftUIView`): a SwiftUI root inside a
+   page's own layout, with the device's tokens and none of its frame: the
+   frame's size, bezel and shadow are `.device:not(.sb-island)`'s above, so
+   the page's own CSS, however specific, gives the island its width and
+   height. In `content` fit the renderer sets the root's height
+   from the layout.
+   ------------------------------------------------------------------------- */
+.device.sb-island::before,
+.device.sb-island::after {
+  display: none;
+}
+
+.sb-island .device-screen {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  background: none;
+}
+
+.sb-island[data-sb-fit="content"],
+.sb-island[data-sb-fit="content"] .device-screen,
+.sb-island[data-sb-fit="content"] .screen {
+  position: relative;
+  inset: auto;
+  height: auto;
+}
+
+/* `.onHover` (pointerEffects.ts): the whole box hovers, as SwiftUI uses the
+   view's frame, so a hover box is hit in its empty space too. */
+.sb-styled[data-sb-hover] {
+  pointer-events: auto;
+}