@swiftbrowser/web 0.2.0 → 0.3.1

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;
@@ -88,7 +90,11 @@
   --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);
@@ -96,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);
@@ -105,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;
@@ -128,17 +141,23 @@
   --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);
 }
 
@@ -353,7 +372,7 @@ body {
   position: absolute;
   top: 11px;
   left: 50%;
-  width: 126px;
+  width: 125px;
   height: 37px;
   transform: translateX(-50%);
   border-radius: 20px;
@@ -370,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 {
@@ -394,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;
@@ -623,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)));
 }
 
@@ -641,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] {
@@ -663,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;
@@ -801,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;
@@ -827,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),
@@ -838,7 +925,7 @@ html[data-sb-mode="device"] .status {
 }
 
 .sb-switch[aria-checked="true"] .sb-switch-knob {
-  transform: translateX(20px);
+  transform: translateX(22px);
 }
 
 /* ---------------------------------------------------------------------------
@@ -869,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;
 }
@@ -885,14 +973,14 @@ 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;
 }
 
 /* Lazy rows not built yet (a trailing `lazyspacer`): no cell of their own, and
@@ -903,8 +991,8 @@ html[data-sb-mode="device"] .status {
 }
 
 .sb-list-content > :not(.sb-section):has(+ .sb-lazyspacer:last-child) {
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 26px;
+  border-bottom-right-radius: 26px;
 }
 
 .sb-section-rows > :has(+ .sb-lazyspacer:last-child)::after,
@@ -923,19 +1011,38 @@ html[data-sb-mode="device"] .status {
   display: none !important;
 }
 
-/* Hairline separators, inset 16px from the leading edge. */
+/* 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;
 }
 
+/* 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;
@@ -1024,7 +1131,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
@@ -1047,14 +1154,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;
@@ -1074,11 +1188,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;
@@ -1116,14 +1234,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;
@@ -1138,6 +1258,30 @@ 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, its label in the primary color (also when
    the row is wrapped: a selectable or deletable `listrow`, a modifier);
@@ -1239,6 +1383,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;
@@ -1378,8 +1542,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 {
@@ -1403,35 +1567,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;
@@ -1440,6 +1596,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 {
@@ -1479,7 +1636,7 @@ 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;
 }
@@ -1523,7 +1680,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;
 }
@@ -1551,7 +1709,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;
 }
 
@@ -1958,7 +2116,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;
 }
 
@@ -1981,6 +2139,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);
@@ -1999,16 +2176,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 {
@@ -2166,33 +2348,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;
 }
 
@@ -2603,7 +2786,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;
 }
 
@@ -2661,6 +2844,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;
@@ -2671,6 +2861,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 {
@@ -2711,11 +2911,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);
 }
 
@@ -2796,14 +3017,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;
 }
@@ -2827,7 +3048,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 {
@@ -2848,8 +3079,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 {
@@ -2860,20 +3092,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),
@@ -3004,8 +3236,9 @@ textarea.sb-textfield[data-sb-style="roundedBorder"] {
   padding: 5px 7px;
 }
 
-/* A section's view header / footer: footnote-sized secondary text above or
-   below the card (the engine sets the fonts of the texts inside). */
+/* 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);