@swiftbrowser/web 0.3.0 → 0.4.0

package/src/scrollEdge.ts

@@ -0,0 +1,87 @@
+/**
+ * iOS 26's scroll edge effect at the bottom: a list or scroll view that runs
+ * down under a tab bar, or under its screen's bottom toolbar or search field,
+ * has its content inset by the bar (the engine's `bottomInset` chrome rect,
+ * layout/engine.ts). While content is under the bar (more of it below) its
+ * screen, or the tab it fills, shows the effect over it, behind the bar:
+ * `data-sb-scrolled-bottom` with `--sb-bottom-edge` the bar's height
+ * (styles.css). The top edge's effect is the bar's own (largeTitle.ts).
+ *
+ * `.scrollEdgeEffectStyle(_:for:)` / `.scrollEdgeEffectHidden(_:for:)` reach
+ * the scroll view as `edgeEffect` props, which become `data-sb-edge-top` /
+ * `data-sb-edge-bottom` on it (`hard` or `hidden`; soft is the default) and
+ * are copied to the element that draws that edge's effect.
+ */
+
+import type { EdgeEffectProps } from './protocol';
+import type { Rect } from './layout';
+
+const bound = new WeakSet<HTMLElement>();
+/** The scroll view whose state each screen's (or tab's) bottom effect shows. */
+const claimedBy = new WeakMap<HTMLElement, HTMLElement>();
+
+/** A list's or scroll view's `edgeEffect` props, as `data-sb-edge-top` / `data-sb-edge-bottom`. */
+export function applyEdgeEffect(el: HTMLElement, effect: EdgeEffectProps | undefined): void {
+  setValue(el, 'sbEdgeTop', edgeValue(effect?.top));
+  setValue(el, 'sbEdgeBottom', edgeValue(effect?.bottom));
+}
+
+/** Soft is the default effect; only the others are marked. */
+function edgeValue(value: string | undefined): string | null {
+  return value === 'hard' || value === 'hidden' ? value : null;
+}
+
+/** The element that draws the bottom effect over a scroll view: its screen, else the tab it fills. */
+function ownerOf(scroller: HTMLElement): HTMLElement | null {
+  return scroller.closest<HTMLElement>('.sb-navscreen') ?? scroller.closest<HTMLElement>('.sb-tab');
+}
+
+/**
+ * Called for every list and scroll view the layout reaches with the engine's
+ * `bottomInset` rect (absent when no bar covers its bottom).
+ */
+export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined): void {
+  const owner = ownerOf(scroller);
+  if (covered === undefined || covered.height <= 0) {
+    if (scroller.dataset['sbUnderBottom'] !== undefined) delete scroller.dataset['sbUnderBottom'];
+    if (owner && claimedBy.get(owner) === scroller) release(owner);
+    return;
+  }
+  setValue(scroller, 'sbUnderBottom', '');
+  scroller.style.setProperty('--sb-bottom-edge', `${covered.height}px`);
+  if (!bound.has(scroller)) {
+    bound.add(scroller);
+    scroller.addEventListener('scroll', () => syncScrollEdgeBottom(scroller), { passive: true });
+  }
+  syncScrollEdgeBottom(scroller);
+}
+
+export function syncScrollEdgeBottom(scroller: HTMLElement): void {
+  if (scroller.dataset['sbUnderBottom'] === undefined) return;
+  const owner = ownerOf(scroller);
+  if (!owner) return;
+  claimedBy.set(owner, scroller);
+  // Content is under the bar until the end has scrolled clear of it (the
+  // inset is room past the content's end).
+  const under = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop > 1;
+  setValue(owner, 'sbScrolledBottom', under ? '' : null);
+  setValue(owner, 'sbEdgeBottom', scroller.dataset['sbEdgeBottom'] ?? null);
+  const height = scroller.style.getPropertyValue('--sb-bottom-edge');
+  if (owner.style.getPropertyValue('--sb-bottom-edge') !== height) owner.style.setProperty('--sb-bottom-edge', height);
+}
+
+function release(owner: HTMLElement): void {
+  claimedBy.delete(owner);
+  setValue(owner, 'sbScrolledBottom', null);
+  setValue(owner, 'sbEdgeBottom', null);
+  owner.style.removeProperty('--sb-bottom-edge');
+}
+
+/** Sets a data attribute (by dataset key) to `value`, or removes it for null; untouched when unchanged. */
+export function setValue(el: HTMLElement, key: string, value: string | null): void {
+  if (value === null) {
+    if (el.dataset[key] !== undefined) delete el.dataset[key];
+  } else if (el.dataset[key] !== value) {
+    el.dataset[key] = value;
+  }
+}

package/src/scrollTo.ts

@@ -95,6 +95,12 @@ export function scrollToTarget(
     const viewport: Rect = { ...frame };
     const covered = result.chrome.get(at)?.['bottomInset'];
     if (covered) viewport.height = Math.max(0, covered.y - frame.y);
+    // Under its screen's bar the visible area starts below the bar.
+    const under = result.chrome.get(at)?.['topInset'];
+    if (under) {
+      viewport.y += under.height;
+      viewport.height = Math.max(0, viewport.height - under.height);
+    }
     let left = el.scrollLeft;
     let top = el.scrollTop;
     let changed = false;

package/src/styles.css

@@ -5,6 +5,8 @@
    ------------------------------------------------------------------------- */
 
 :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,
@@ -701,11 +703,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 +960,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;
@@ -1026,6 +1050,23 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+/* A text field row is the <input> (or <textarea>) itself, which has no
+   ::after: its separator is a 1px background image in the same place. */
+.sb-section-rows > :is(input, textarea):not(:last-child),
+.sb-list-content > :is(input, textarea):not(:last-child):not(:has(+ .sb-section)) {
+  background-image: linear-gradient(var(--sb-color-row-separator), var(--sb-color-row-separator));
+  background-repeat: no-repeat;
+  background-position: var(--sb-separator-leading, 16px) 100%;
+  background-size: calc(100% - var(--sb-separator-leading, 16px) - 16px) 1px;
+}
+
+.sb-section-rows > :is(input, textarea)[data-sb-separator-bottom="hidden"],
+.sb-list-content > :is(input, textarea)[data-sb-separator-bottom="hidden"],
+.sb-section-rows > :is(input, textarea):has(+ [data-sb-separator-top="hidden"]),
+.sb-list-content > :is(input, textarea):has(+ [data-sb-separator-top="hidden"]) {
+  background-image: none;
+}
+
 .sb-section-rows > .sb-button,
 .sb-list-content > .sb-button {
   border-radius: 0;
@@ -1242,11 +1283,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 {
@@ -1258,11 +1304,115 @@ 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);
+}
+
+.sb-navscreen[data-sb-scrolled] > .sb-navbar::before {
+  opacity: 1;
+}
+
+/* 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;
+  background: linear-gradient(
+    to top,
+    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 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: 1;
+}
+
+/* `.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
@@ -1522,6 +1672,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
@@ -2135,10 +2306,19 @@ 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. */
+/* 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"]) .sb-image > svg {
-  transform: scale(1.25);
-  stroke-width: 2.1;
+  width: 1.57em;
+  height: 1.57em;
+  stroke-width: 1.85;
 }
 
 .sb-toolbar[data-sb-placement="bottom"] {
@@ -2237,12 +2417,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
@@ -2546,7 +2775,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;
@@ -2561,6 +2791,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;
 }
 
@@ -2568,6 +2804,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;
@@ -2608,6 +2927,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] {
@@ -2621,6 +2948,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;
@@ -2637,7 +2984,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;
@@ -2665,17 +3013,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);
 }
 
@@ -3253,3 +3604,66 @@ 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
+   page sizes the island; in `content` fit the renderer sets the root's height
+   from the layout.
+   ------------------------------------------------------------------------- */
+.device.sb-island {
+  width: auto;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  flex: initial;
+}
+
+.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;
+}

package/src/typography.ts

@@ -22,7 +22,10 @@ export {
   DYNAMIC_TYPE_SIZES,
   FONT_FAMILIES,
   FONT_WEIGHTS,
-  LINE_HEIGHTS,
+  LINE_HEIGHT_RATIO,
+  LEADINGS,
+  leadingFor,
+  textHeight,
   TEXT_STYLE_SIZES,
   defaultFont,
   lineHeightFor,
@@ -70,7 +73,7 @@ export function applyTypeSizeVariables(target: HTMLElement, size: DynamicTypeSiz
   for (const style of TEXT_STYLES) {
     const { fontSize, lineHeight } = resolveTextStyle(style, size);
     target.style.setProperty(textStyleVar(style, 'size'), `${fontSize}px`);
-    target.style.setProperty(textStyleVar(style, 'lh'), `${lineHeight}px`);
+    target.style.setProperty(textStyleVar(style, 'lh'), `${Math.round(lineHeight * 100) / 100}px`);
     target.style.setProperty(`--sb-ts-${style}-scale`, String(relativeScale(style, size)));
   }
 }