@swiftbrowser/web 0.1.0 → 0.3.0

package/src/styles.css

@@ -63,13 +63,15 @@
   color-scheme: light;
   --sb-color-primary: #000000;
   --sb-color-secondary: rgba(60, 60, 67, 0.6);
-  --sb-color-accent: #007aff;
+  --sb-color-accent: #0088ff;
   --sb-color-system-background: #ffffff;
   --sb-color-secondary-system-background: #f2f2f7;
   --sb-color-separator: rgba(60, 60, 67, 0.29);
+  /* iOS 26 draws the hairlines between list rows lighter than `separator`. */
+  --sb-color-row-separator: rgba(0, 0, 0, 0.09);
   --sb-color-tertiary-label: rgba(60, 60, 67, 0.3);
   --sb-color-quaternary-label: rgba(60, 60, 67, 0.18);
-  --sb-color-red: #ff3b30;
+  --sb-color-red: #ff383c;
   --sb-color-green: #34c759;
   --sb-color-grouped-background: #f2f2f7;
   --sb-color-grouped-cell: #ffffff;
@@ -77,9 +79,22 @@
   --sb-color-secondary-fill: rgba(120, 120, 128, 0.16);
   --sb-color-tertiary-fill: rgba(118, 118, 128, 0.12);
   --sb-color-quaternary-fill: rgba(116, 116, 128, 0.08);
+  /* UIKit's semantic colors without a token above (`Color(uiColor:)`). */
+  --sb-color-tertiary-system-background: #ffffff;
+  --sb-color-tertiary-system-grouped-background: #f2f2f7;
+  --sb-color-opaque-separator: #c6c6c8;
+  --sb-color-system-gray2: #aeaeb2;
+  --sb-color-system-gray3: #c7c7cc;
+  --sb-color-system-gray4: #d1d1d6;
+  --sb-color-system-gray5: #e5e5ea;
+  --sb-color-system-gray6: #f2f2f7;
   /* Phase 6 materials: rgb components of the color blurred over the backdrop. */
   --sb-color-material-base: 255, 255, 255;
-  --sb-color-switch-off: #e9e9ea;
+  /* iOS 26 (measured on its simulator, as the dark values below). */
+  --sb-color-switch-off: rgba(120, 120, 128, 0.42);
+  --sb-tint-fill-amount: 18%;
+  --sb-alert-scrim: rgba(0, 0, 0, 0.2);
+  --sb-alert-card: rgba(255, 255, 255, 0.7);
   --sb-color-field-border: #c6c6c8;
   --sb-color-field-background: #ffffff;
   --sb-color-placeholder: rgba(60, 60, 67, 0.3);
@@ -87,6 +102,12 @@
   --sb-color-grabber: rgba(60, 60, 67, 0.3);
   /* Phase 4 */
   --sb-color-tabbar-background: rgba(249, 249, 249, 0.94);
+  /* iOS 26 Liquid Glass, approximated: a near-white translucent fill over a
+     blurred backdrop with a soft shadow (bar buttons, the tab bar, the
+     bottom search field). */
+  --sb-glass-background: rgba(252, 252, 255, 0.86);
+  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  --sb-glass-selected: rgba(120, 120, 128, 0.16);
   --sb-color-segment-track: rgba(118, 118, 128, 0.12);
   --sb-color-segment-selected: #ffffff;
   --sb-color-menu-background: rgba(250, 250, 250, 0.96);
@@ -96,13 +117,14 @@
   color-scheme: dark;
   --sb-color-primary: #ffffff;
   --sb-color-secondary: rgba(235, 235, 245, 0.6);
-  --sb-color-accent: #0a84ff;
+  --sb-color-accent: #0091ff;
   --sb-color-system-background: #000000;
   --sb-color-secondary-system-background: #1c1c1e;
   --sb-color-separator: rgba(84, 84, 88, 0.6);
+  --sb-color-row-separator: rgba(84, 84, 88, 0.6);
   --sb-color-tertiary-label: rgba(235, 235, 245, 0.3);
   --sb-color-quaternary-label: rgba(235, 235, 245, 0.16);
-  --sb-color-red: #ff453a;
+  --sb-color-red: #ff4245;
   --sb-color-green: #30d158;
   --sb-color-grouped-background: #000000;
   --sb-color-grouped-cell: #1c1c1e;
@@ -110,18 +132,32 @@
   --sb-color-secondary-fill: rgba(120, 120, 128, 0.32);
   --sb-color-tertiary-fill: rgba(118, 118, 128, 0.24);
   --sb-color-quaternary-fill: rgba(118, 118, 128, 0.18);
+  --sb-color-tertiary-system-background: #2c2c2e;
+  --sb-color-tertiary-system-grouped-background: #2c2c2e;
+  --sb-color-opaque-separator: #38383a;
+  --sb-color-system-gray2: #636366;
+  --sb-color-system-gray3: #48484a;
+  --sb-color-system-gray4: #3a3a3c;
+  --sb-color-system-gray5: #2c2c2e;
+  --sb-color-system-gray6: #1c1c1e;
   --sb-color-material-base: 30, 30, 30;
-  --sb-color-switch-off: #39393d;
+  --sb-color-switch-off: rgba(120, 120, 128, 0.68);
+  --sb-tint-fill-amount: 25%;
+  --sb-alert-scrim: rgba(0, 0, 0, 0.46);
+  --sb-alert-card: rgba(22, 22, 23, 0.9);
   --sb-color-field-border: #3a3a3c;
   --sb-color-field-background: #1c1c1e;
   --sb-color-placeholder: rgba(235, 235, 245, 0.3);
+  --sb-glass-background: rgba(30, 30, 30, 0.84);
+  --sb-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
+  --sb-glass-selected: rgba(120, 120, 128, 0.32);
   /* Sheets float above the window and take the elevated system background. */
   --sb-color-sheet-background: #1c1c1e;
   --sb-color-grabber: rgba(235, 235, 245, 0.3);
   /* Phase 4 */
   --sb-color-tabbar-background: rgba(29, 29, 29, 0.94);
   --sb-color-segment-track: rgba(118, 118, 128, 0.24);
-  --sb-color-segment-selected: #636366;
+  --sb-color-segment-selected: #5a5a5f;
   --sb-color-menu-background: rgba(37, 37, 37, 0.96);
 }
 
@@ -336,7 +372,7 @@ body {
   position: absolute;
   top: 11px;
   left: 50%;
-  width: 126px;
+  width: 125px;
   height: 37px;
   transform: translateX(-50%);
   border-radius: 20px;
@@ -353,23 +389,30 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 32px 6px 40px;
+  /* As iOS 26 draws it (measured on an iPhone 16 simulator): the row is
+     centered 29.5pt down, the time centered 70pt from the leading edge, the
+     glyphs 7.67pt apart ending 32pt from the trailing edge. */
+  padding: 0 32px 0 38px;
   pointer-events: none;
   z-index: 2;
   color: var(--sb-color-primary);
 }
 
 .status-time {
+  min-width: 64px;
+  text-align: center;
+  /* The digits' optical center, not the line box's, sits on the row's. */
+  position: relative;
+  top: 1.67px;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
 }
 
 .status-glyphs {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 7.67px;
 }
 
 .glyph {
@@ -377,6 +420,12 @@ body {
   fill: currentColor;
 }
 
+.glyph-wifi .wifi-band {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+}
+
 .glyph-battery .battery-shell {
   fill: none;
   stroke: currentColor;
@@ -455,7 +504,21 @@ html[data-sb-mode="device"] body {
   overflow: hidden;
   overscroll-behavior: none;
   touch-action: manipulation;
-  background: var(--sb-color-system-background, var(--page-bg));
+}
+
+/* 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 {
@@ -542,6 +605,9 @@ html[data-sb-mode="device"] .status {
   -webkit-background-clip: var(--sb-text-clip, border-box);
   background-clip: var(--sb-text-clip, border-box);
   color: var(--sb-text-color);
+  /* View-level `.underline()` / `.strikethrough()` (renderer.ts `applyStyle`);
+     with both unset the declaration is invalid and the line is `none`. */
+  text-decoration-line: var(--sb-text-underline,) var(--sb-text-strikethrough,);
 }
 
 .sb-vstack,
@@ -589,7 +655,8 @@ html[data-sb-mode="device"] .status {
 }
 
 .sb-button[data-sb-style="bordered"] {
-  background: var(--sb-color-fill);
+  /* iOS 26: secondarySystemFill, or the view's tint at 18% (dark 25%). */
+  background: var(--sb-tint-fill, var(--sb-color-secondary-fill));
   color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
 }
 
@@ -607,6 +674,18 @@ html[data-sb-mode="device"] .status {
   color: #ffffff;
 }
 
+/* iOS 26 draws a disabled bordered button gray rather than faded
+   (`.disabled` marks the element around the button and dims it inline; the
+   renderer keeps the undimmed opacity in `--sb-undimmed-opacity`). */
+[data-sb-disabled]:has(> .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"])) {
+  opacity: var(--sb-undimmed-opacity, 1) !important;
+}
+
+[data-sb-disabled] > .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"]) {
+  background: var(--sb-color-secondary-fill);
+  color: var(--sb-color-tertiary-label);
+}
+
 /* .disabled(true): opacity and pointer-events are set inline by the renderer
    (so update() clears them); the attribute carries the state for tooling. */
 [data-sb-disabled] {
@@ -629,6 +708,47 @@ html[data-sb-mode="device"] .status {
   stroke: currentColor;
 }
 
+/* An indeterminate ProgressView: the activity indicator (symbols.ts), in
+   the secondary label color (or the view's tint). As on iOS the spokes stay
+   put and the fade steps around them clockwise, once a second: each spoke
+   runs the same ramp an eighth of a second after the one before it.
+   (Rotating the glyph instead resamples it at every step, which wobbles.) */
+svg[data-sb-symbol="progress.indicator"] {
+  color: var(--sb-tint, var(--sb-color-secondary));
+}
+
+svg[data-sb-symbol="progress.indicator"] > line {
+  animation: sb-activity-spoke 1s step-end infinite;
+}
+
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(2) { animation-delay: -0.875s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(3) { animation-delay: -0.75s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(4) { animation-delay: -0.625s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(5) { animation-delay: -0.5s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(6) { animation-delay: -0.375s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(7) { animation-delay: -0.25s; }
+svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay: -0.125s; }
+
+/* A spoke's strength from the moment it leads: the ramp symbols.ts draws. */
+@keyframes sb-activity-spoke {
+  0% {
+    stroke-opacity: 1;
+  }
+  12.5% {
+    stroke-opacity: 0.83;
+  }
+  25% {
+    stroke-opacity: 0.66;
+  }
+  37.5% {
+    stroke-opacity: 0.49;
+  }
+  50%,
+  100% {
+    stroke-opacity: 0.31;
+  }
+}
+
 /* Unknown symbol or catalog image: a dashed box named by `title`. */
 .sb-image[data-sb-missing] {
   border: 1px dashed currentColor;
@@ -639,7 +759,8 @@ html[data-sb-mode="device"] .status {
 /* Phase 5: a catalog image. The layout engine decides the frame (intrinsic
    size, or the proposal for `.resizable()`), so the bitmap fills the box;
    `.aspectRatio` fitting is a layout concern, not object-fit's. */
-.sb-image > img {
+.sb-image > img,
+.sb-image > canvas {
   display: block;
   width: 100%;
   height: 100%;
@@ -649,6 +770,12 @@ html[data-sb-mode="device"] .status {
   -webkit-user-select: none;
 }
 
+/* `.interpolation(.none)`: a QR code's modules stay sharp when scaled up. */
+.sb-image[data-sb-interpolation='none'] > img,
+.sb-image[data-sb-interpolation='none'] > canvas {
+  image-rendering: pixelated;
+}
+
 /* Phase 5: a `.symbolset` SVG drawn as a template: the SVG masks a box
    filled with the current foreground color, like an SF Symbol. */
 .sb-image > .sb-image-mask {
@@ -760,8 +887,9 @@ html[data-sb-mode="device"] .status {
 .sb-switch {
   appearance: none;
   position: absolute;
-  width: 51px;
-  height: 31px;
+  /* iOS 26: 63 × 28 with a pill knob. */
+  width: 63px;
+  height: 28px;
   margin: 0;
   padding: 0;
   border: 0;
@@ -786,9 +914,9 @@ html[data-sb-mode="device"] .status {
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 27px;
-  height: 27px;
-  border-radius: 50%;
+  width: 37px;
+  height: 24px;
+  border-radius: 12px;
   background: #ffffff;
   box-shadow:
     0 3px 8px rgba(0, 0, 0, 0.15),
@@ -797,7 +925,7 @@ html[data-sb-mode="device"] .status {
 }
 
 .sb-switch[aria-checked="true"] .sb-switch-knob {
-  transform: translateX(20px);
+  transform: translateX(22px);
 }
 
 /* ---------------------------------------------------------------------------
@@ -828,7 +956,8 @@ html[data-sb-mode="device"] .status {
 
 .sb-section-rows {
   position: absolute;
-  border-radius: 10px;
+  /* iOS 26's inset grouped cards. */
+  border-radius: 26px;
   background: var(--sb-color-grouped-cell);
   overflow: hidden;
 }
@@ -844,26 +973,56 @@ html[data-sb-mode="device"] .status {
 
 .sb-list-content > :not(.sb-section):first-child,
 .sb-list-content > .sb-section + :not(.sb-section) {
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: 26px;
+  border-top-right-radius: 26px;
 }
 
 .sb-list-content > :not(.sb-section):last-child,
 .sb-list-content > :not(.sb-section):has(+ .sb-section) {
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 26px;
+  border-bottom-right-radius: 26px;
 }
 
-/* Hairline separators, inset 16px from the leading edge. */
+/* Lazy rows not built yet (a trailing `lazyspacer`): no cell of their own, and
+   the row before them ends the card as the last row would. */
+.sb-lazyspacer {
+  background: none !important;
+  pointer-events: none;
+}
+
+.sb-list-content > :not(.sb-section):has(+ .sb-lazyspacer:last-child) {
+  border-bottom-left-radius: 26px;
+  border-bottom-right-radius: 26px;
+}
+
+.sb-section-rows > :has(+ .sb-lazyspacer:last-child)::after,
+.sb-list-content > :has(+ .sb-lazyspacer:last-child)::after,
+.sb-section-rows > .sb-lazyspacer::after,
+.sb-list-content > .sb-lazyspacer::after {
+  display: none;
+}
+
+/* `.listRowSeparator(.hidden)`: the row's own line (below it) or the
+   previous row's (above it) is left out. */
+.sb-section-rows > [data-sb-separator-bottom="hidden"]::after,
+.sb-list-content > [data-sb-separator-bottom="hidden"]::after,
+.sb-section-rows > :has(+ [data-sb-separator-top="hidden"])::after,
+.sb-list-content > :has(+ [data-sb-separator-top="hidden"])::after {
+  display: none !important;
+}
+
+/* Separators: iOS 26 starts the line at the row's first text (the engine's
+   `--sb-separator-leading`, else 16px) and ends it 16px before the trailing
+   edge. */
 .sb-section-rows > :not(:last-child)::after,
 .sb-list-content > :not(.sb-section):not(:last-child):not(:has(+ .sb-section))::after {
   content: "";
   position: absolute;
-  left: 16px;
-  right: 0;
+  left: var(--sb-separator-leading, 16px);
+  right: 16px;
   bottom: 0;
   height: 1px;
-  background: var(--sb-color-separator);
+  background: var(--sb-color-row-separator);
   pointer-events: none;
 }
 
@@ -902,7 +1061,7 @@ html[data-sb-mode="device"] .status {
 
 /* A screen with a list as its content takes the grouped background, like a
    UINavigationController hosting an inset-grouped table view. */
-.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list) {
+.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list:not([data-sb-background="hidden"])) {
   background: var(--sb-color-grouped-background);
 }
 
@@ -955,7 +1114,7 @@ html[data-sb-mode="device"] .status {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  padding: 0 8px;
+  padding: 0 16px;
   box-sizing: border-box;
   background: transparent;
   /* Phase 8: content that ignores the safe area paints under the bar; the
@@ -978,14 +1137,21 @@ html[data-sb-mode="device"] .status {
   justify-self: start;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 2px;
-  /* Width comes from the layout engine (chrome.back); this is only a fallback. */
+  /* iOS 26: a 44pt glass circle with the chevron (chrome.back). */
+  width: 44px;
+  height: 44px;
   max-width: 45%;
   margin: 0;
   padding: 0;
   border: 0;
-  background: none;
-  color: var(--sb-color-accent);
+  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);
   font: inherit;
   font-size: var(--sb-font-size-body);
   line-height: 1.3;
@@ -1005,11 +1171,15 @@ html[data-sb-mode="device"] .status {
 .sb-navbar-back > svg {
   width: 1.4em;
   height: 1.4em;
-  margin-left: -4px;
-  stroke-width: 2.5;
+  margin-left: -2px;
+  stroke-width: 2.25;
   flex-shrink: 0;
 }
 
+.sb-navbar-back-label:empty {
+  display: none;
+}
+
 .sb-navbar-back-label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1047,14 +1217,16 @@ html[data-sb-mode="device"] .status {
   display: block;
 }
 
-/* Large title: the engine's `largeTitle` rect (52px row), text already
+/* Large title: the engine's `largeTitle` rect (62px row), text already
    truncated to one line. */
 .sb-navbar-large-title {
   position: absolute;
   z-index: 1; /* Phase 8: above content that ignores the safe area */
   display: flex;
-  align-items: center;
-  padding: 0 16px;
+  /* iOS 26: the title's line starts 13 into its 62px row. */
+  align-items: flex-start;
+  line-height: 41px;
+  padding: 13px 16px 0;
   box-sizing: border-box;
   font-size: var(--sb-ts-largeTitle-size, 34px);
   font-weight: 700;
@@ -1069,8 +1241,34 @@ html[data-sb-mode="device"] .status {
   display: none;
 }
 
+/* The large title scrolls with the screen's root list or scroll view
+   (src/largeTitle.ts moves it); drags on it scroll that view. */
+.sb-navbar-large-title {
+  pointer-events: none;
+}
+
+/* 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 {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.sb-navscreen[data-sb-display="large"][data-sb-collapsed] > .sb-navbar > .sb-navbar-title {
+  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);
+}
+
 /* NavigationLink: a tappable label. Inside a list it is a row with a chevron
-   at the engine's `chevron` rect; elsewhere it reads as plain accent text. */
+   at the engine's `chevron` rect, its label in the primary color (also when
+   the row is wrapped: a selectable or deletable `listrow`, a modifier);
+   elsewhere it reads as plain accent text. */
 .sb-navlink {
   color: var(--sb-color-accent);
   cursor: pointer;
@@ -1094,9 +1292,16 @@ html[data-sb-mode="device"] .status {
   display: none;
 }
 
-.sb-section-rows > .sb-navlink,
-.sb-list-content > .sb-navlink {
-  color: var(--sb-color-primary);
+/* An explicit `.foregroundStyle` on or around the link (which sets
+   `--sb-button-color`) wins, as in SwiftUI. */
+.sb-list .sb-navlink {
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+/* A `Label`'s icon in a list row takes the tint; its title keeps the row's
+   color. */
+.sb-list [data-sb-label-icon] {
+  color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1161,6 +1366,26 @@ html[data-sb-mode="device"] .status {
   transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+/* iOS 26: a sheet at a partial detent floats inset from the screen edges,
+   rounded all around, over a lighter dim. */
+.sb-sheet[data-sb-floating] > .sb-sheet-card {
+  border-radius: 38px;
+  background: color-mix(in srgb, var(--sb-color-sheet-background) 55%, transparent);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
+}
+
+/* The sheet's glass shows through a navigation stack in it, as on iOS 26
+   (an opaque screen would paint over it). */
+.sb-sheet[data-sb-floating] .sb-navscreen {
+  background: transparent;
+}
+
+.sb-sheet[data-sb-floating] > .sb-sheet-scrim {
+  background: rgba(0, 0, 0, 0.22);
+}
+
 .sb-sheet-grabber {
   position: absolute;
   border-radius: 2.5px;
@@ -1300,8 +1525,8 @@ html[data-sb-mode="device"] .status {
 /* ---------------------------------------------------------------------------
    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
-   DOM hidden. The bar is the engine's `bar` rect (49 + bottom safe area):
-   translucent system background, hairline on top, items in the 49px row.
+   DOM hidden. The bar is the engine's `bar` rect: iOS 26's glass capsule
+   floating over the content, the selected item on a gray pill.
    ------------------------------------------------------------------------- */
 
 .sb-tabview {
@@ -1325,35 +1550,27 @@ html[data-sb-mode="device"] .status {
 .sb-tabbar {
   position: absolute;
   z-index: 3;
-  background: var(--sb-color-tabbar-background);
+  border-radius: 31px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
 }
 
-.sb-tabbar::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 1px;
-  background: var(--sb-color-separator);
-  pointer-events: none;
-}
-
 .sb-tabbar-item {
   appearance: none;
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
-  gap: 2px;
+  justify-content: center;
+  gap: 1px;
   margin: 0;
-  padding: 6px 0 0;
+  padding: 0;
   border: 0;
+  border-radius: 27px;
   background: none;
-  color: var(--sb-color-secondary);
+  color: var(--sb-color-primary);
   font-family: var(--sb-font-family);
   cursor: pointer;
   touch-action: manipulation;
@@ -1362,6 +1579,7 @@ html[data-sb-mode="device"] .status {
 
 .sb-tabbar-item[aria-selected="true"] {
   color: var(--sb-color-accent);
+  background: var(--sb-glass-selected);
 }
 
 .sb-tabbar-item:focus-visible {
@@ -1401,11 +1619,35 @@ html[data-sb-mode="device"] .status {
 .sb-tabbar-title {
   font-size: 10px;
   line-height: 12px;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: -0.01em;
   white-space: nowrap;
 }
 
+/* iOS 18 `Tab(…).badge(…)`: a red capsule at the top trailing corner of the icon. */
+.sb-tabbar-badge {
+  position: absolute;
+  top: 2px;
+  left: calc(50% + 5px);
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--sb-color-red);
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.sb-tabbar-badge[hidden] {
+  display: none;
+}
+
 /* ---------------------------------------------------------------------------
    Phase 4: pickers. Segmented: a gray track with equal segments at the
    engine's `segment<i>` rects; the selected one carries a raised pill inset
@@ -1421,7 +1663,8 @@ html[data-sb-mode="device"] .status {
    box is the whole row, so the track cannot be the element's background). */
 .sb-segment-track {
   position: absolute;
-  border-radius: 8px;
+  /* iOS 26: a capsule track with a capsule for the selected segment. */
+  border-radius: 9999px;
   background: var(--sb-color-segment-track);
   pointer-events: none;
 }
@@ -1449,7 +1692,7 @@ html[data-sb-mode="device"] .status {
   content: "";
   position: absolute;
   inset: 2px;
-  border-radius: 7px;
+  border-radius: 9999px;
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -1658,6 +1901,28 @@ html[data-sb-mode="device"] .status {
   background: var(--sb-tint, var(--sb-color-accent));
 }
 
+.sb-gauge-ring {
+  position: absolute;
+  pointer-events: none;
+}
+
+.sb-gauge-ring > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.sb-gauge-ring-track {
+  stroke: var(--sb-color-fill);
+  stroke-linecap: round;
+}
+
+.sb-gauge-ring-value {
+  stroke: var(--sb-tint, var(--sb-color-accent));
+  stroke-linecap: round;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sb-picker-menu,
   .sb-segment::before {
@@ -1834,7 +2099,7 @@ html[data-sb-mode="device"] .status {
   right: 0;
   top: 0;
   height: 1px;
-  background: var(--sb-color-separator);
+  background: var(--sb-color-row-separator);
   pointer-events: none;
 }
 
@@ -1857,6 +2122,25 @@ html[data-sb-mode="device"] .status {
   display: block;
 }
 
+/* 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. */
+.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);
+}
+
+/* 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;
+}
+
 .sb-toolbar[data-sb-placement="bottom"] {
   z-index: 3;
   background: var(--sb-color-tabbar-background);
@@ -1875,16 +2159,21 @@ html[data-sb-mode="device"] .status {
   pointer-events: none;
 }
 
-/* Search field: a 36px rounded gray field (engine `searchField` rect) with a
+/* Search field: a capsule (engine `searchField` rect) with a
    magnifier leading; the input sends `text` events like a textfield. */
 .sb-searchfield {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 8px;
-  border-radius: 10px;
-  background: var(--sb-color-fill);
+  gap: 8px;
+  padding: 0 16px;
+  /* iOS 26: a glass capsule floating at the bottom (engine `searchField`). */
+  border-radius: 9999px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
   color: var(--sb-color-primary);
+  z-index: 2;
 }
 
 .sb-searchfield > svg {
@@ -2042,33 +2331,34 @@ html[data-sb-mode="device"] .status {
 }
 
 /* The SwiftUI chart palette (and the other system colors) as `--sb-color-<name>`,
-   which a named `Color` without a semantic token resolves to (src/styles.ts). */
+   which a named `Color` without a semantic token resolves to (src/styles.ts).
+   iOS 26's palette (measured in the iOS 26.2 simulator, Examples/Fidelity). */
 .device,
 .device[data-theme="light"] {
-  --sb-color-blue: #007aff;
-  --sb-color-orange: #ff9500;
+  --sb-color-blue: #0088ff;
+  --sb-color-orange: #ff8d28;
   --sb-color-yellow: #ffcc00;
-  --sb-color-purple: #af52de;
+  --sb-color-purple: #cb30e0;
   --sb-color-pink: #ff2d55;
-  --sb-color-teal: #30b0c7;
-  --sb-color-indigo: #5856d6;
-  --sb-color-mint: #00c7be;
-  --sb-color-cyan: #32ade6;
-  --sb-color-brown: #a2845e;
+  --sb-color-teal: #00c3d0;
+  --sb-color-indigo: #6155f5;
+  --sb-color-mint: #00c8b3;
+  --sb-color-cyan: #00c0e8;
+  --sb-color-brown: #ac7f5e;
   --sb-color-gray: #8e8e93;
 }
 
 .device[data-theme="dark"] {
-  --sb-color-blue: #0a84ff;
-  --sb-color-orange: #ff9f0a;
-  --sb-color-yellow: #ffd60a;
-  --sb-color-purple: #bf5af2;
+  --sb-color-blue: #0091ff;
+  --sb-color-orange: #ff9230;
+  --sb-color-yellow: #ffd600;
+  --sb-color-purple: #db34f2;
   --sb-color-pink: #ff375f;
-  --sb-color-teal: #40c8e0;
-  --sb-color-indigo: #5e5ce6;
-  --sb-color-mint: #63e6e2;
-  --sb-color-cyan: #64d2ff;
-  --sb-color-brown: #ac8e68;
+  --sb-color-teal: #00d2e0;
+  --sb-color-indigo: #6d7cff;
+  --sb-color-mint: #00dac3;
+  --sb-color-cyan: #3cd3fe;
+  --sb-color-brown: #b78a66;
   --sb-color-gray: #8e8e93;
 }
 
@@ -2479,7 +2769,7 @@ html[data-sb-mode="device"] .status {
 .sb-alert-scrim {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--sb-alert-scrim);
   animation: sb-alert-fade-in 0.25s ease-out both;
 }
 
@@ -2537,6 +2827,13 @@ html[data-sb-mode="device"] .status {
   background: var(--sb-color-sheet-background);
 }
 
+/* iOS 26: the alert is a rounder glass card. */
+.sb-alert[data-sb-style="alert"] .sb-alert-card {
+  border-radius: 34px;
+  background: var(--sb-alert-card);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+}
+
 .sb-alert-title,
 .sb-alert-message {
   position: absolute;
@@ -2547,6 +2844,16 @@ html[data-sb-mode="device"] .status {
   overflow: hidden;
 }
 
+/* iOS 26: an alert's title and message are leading-aligned, the message dim. */
+.sb-alert[data-sb-style="alert"] .sb-alert-title,
+.sb-alert[data-sb-style="alert"] .sb-alert-message {
+  text-align: left;
+}
+
+.sb-alert[data-sb-style="alert"] .sb-alert-message {
+  color: var(--sb-color-secondary);
+}
+
 /* The action sheet's title and message are a dim caption. */
 .sb-alert[data-sb-style="dialog"] .sb-alert-title,
 .sb-alert[data-sb-style="dialog"] .sb-alert-message {
@@ -2587,11 +2894,32 @@ html[data-sb-mode="device"] .status {
   pointer-events: none;
 }
 
-.sb-alert-buttons > .sb-button[data-sb-role="cancel"] {
+/* iOS 26: an alert's buttons are gray capsules, in the label color. */
+.sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button,
+.sb-alert[data-sb-style="alert"] .sb-alert-ok {
+  border-radius: 9999px;
+  background: var(--sb-color-fill);
+  color: var(--sb-color-primary);
+}
+
+.sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button::before,
+.sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button::after,
+.sb-alert[data-sb-style="alert"] .sb-alert-ok::before {
+  display: none;
+}
+
+.sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button:active,
+.sb-alert[data-sb-style="alert"] .sb-alert-ok:active {
+  background: var(--sb-color-secondary-fill);
+  filter: brightness(0.92);
+}
+
+.sb-alert[data-sb-style="dialog"] .sb-alert-buttons > .sb-button[data-sb-role="cancel"] {
   font-weight: 600;
 }
 
-.sb-alert-buttons > .sb-button[data-sb-role="destructive"] {
+.sb-alert-buttons > .sb-button[data-sb-role="destructive"],
+.sb-alert[data-sb-style="alert"] .sb-alert-buttons > .sb-button[data-sb-role="destructive"] {
   color: var(--sb-color-red);
 }
 
@@ -2672,14 +3000,14 @@ html[data-sb-mode="device"] .status {
 
 /* ---------------------------------------------------------------------------
    Stepper: the label children are positioned by their frames; the 94×32
-   segmented control sits at the engine's `control` rect, its halves divided
-   by a hairline. A dimmed half (`aria-disabled`) swallows taps.
+   capsule (iOS 26) sits at the engine's `control` rect, its halves divided
+   by a short line. A dimmed half (`aria-disabled`) swallows taps.
    ------------------------------------------------------------------------- */
 .sb-stepper-control {
   position: absolute;
   display: flex;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: 16px;
   background: var(--sb-color-tertiary-fill);
   overflow: hidden;
 }
@@ -2703,7 +3031,17 @@ html[data-sb-mode="device"] .status {
 }
 
 .sb-stepper-button + .sb-stepper-button {
-  box-shadow: -1px 0 0 var(--sb-color-separator);
+  position: relative;
+}
+
+.sb-stepper-button + .sb-stepper-button::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 7px;
+  bottom: 7px;
+  width: 1px;
+  background: var(--sb-color-opaque-separator);
 }
 
 .sb-stepper-button > svg {
@@ -2724,8 +3062,9 @@ html[data-sb-mode="device"] .status {
 }
 
 /* ---------------------------------------------------------------------------
-   Slider: the label children are positioned by their frames; the 4pt track,
-   the accent fill and the 27pt thumb are chrome at the engine's rects. A
+   Slider: the label children are positioned by their frames; the 6pt track,
+   the accent fill and the 38 × 24 pill thumb (iOS 26) are chrome at the
+   engine's rects. A
    pointer anywhere on the slider moves the thumb (touch-action none).
    ------------------------------------------------------------------------- */
 .sb-slider {
@@ -2736,20 +3075,20 @@ html[data-sb-mode="device"] .status {
 
 .sb-slider-track {
   position: absolute;
-  border-radius: 2px;
+  border-radius: 3px;
   background: var(--sb-color-tertiary-fill);
 }
 
 .sb-slider-fill {
   position: absolute;
-  border-radius: 2px;
+  border-radius: 3px;
   background: var(--sb-tint, var(--sb-color-accent));
 }
 
 .sb-slider-thumb {
   position: absolute;
   box-sizing: border-box;
-  border-radius: 50%;
+  border-radius: 12px;
   background: #ffffff;
   box-shadow:
     0 3px 8px rgba(0, 0, 0, 0.15),
@@ -2832,3 +3171,85 @@ html[data-sb-mode="device"] .status {
     animation-duration: 0.01s;
   }
 }
+
+/* Rich text (src/richText.ts): a block per line, the height the engine gave
+   it; fragments share its baseline. An inline image sits on the baseline. */
+.sb-text-line {
+  display: block;
+  white-space: pre;
+}
+
+.sb-text-image {
+  display: inline-block;
+  position: relative;
+  vertical-align: baseline;
+  overflow: hidden;
+}
+
+/* A symbol's glyph is centered in its line-height square, as a standalone
+   `Image(systemName:)` is. */
+.sb-text-symbol {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+
+/* A link: tinted unless the run has its own foreground. */
+.sb-link {
+  color: var(--sb-tint, var(--sb-color-accent));
+  cursor: pointer;
+}
+
+/* ---------------------------------------------------------------------------
+   A vertical text field (`TextField(_:text:axis: .vertical)`): a textarea the
+   engine sizes to its lines, in the font it measured them in (layoutDom.ts);
+   it scrolls inside past its `lineLimit`.
+   ------------------------------------------------------------------------- */
+textarea.sb-textfield {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  resize: none;
+  overflow-y: auto;
+  scrollbar-width: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+textarea.sb-textfield[data-sb-style="roundedBorder"] {
+  padding: 5px 7px;
+}
+
+/* A section's view header / footer: secondary text above or below the card
+   (the engine sets the fonts of the texts inside: headline headers, footnote
+   footers). */
+.sb-sectionheader,
+.sb-sectionfooter {
+  color: var(--sb-color-secondary);
+  text-align: left;
+}
+
+/* `.scrollContentBackground(.hidden)`: the list's own background goes; rows keep theirs. */
+.sb-list[data-sb-background="hidden"] {
+  background: transparent;
+}
+
+/* A custom shape's path (src/pathShape.ts): an SVG filling the shape's box,
+   whose view box is the size the path was drawn for. Strokes may lie outside
+   the box, as in SwiftUI. */
+svg.sb-path {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* A `Canvas` (src/canvasDrawing.ts): its drawing is clipped to its box. */
+.sb-canvas {
+  overflow: hidden;
+}
+
+.sb-canvas > svg {
+  display: block;
+  overflow: hidden;
+}