@swiftbrowser/web 0.26.3 → 0.26.5

package/src/styles.css

@@ -443,8 +443,9 @@ html[data-sb-frame="mac"]:not([data-sb-mode="device"]) {
   --device-screen-width: 1024px;
   --device-screen-height: 700px;
   --device-bezel: 0px;
-  --device-radius: 11px;
-  --device-safe-top: 28px;
+  /* macOS 26: a window with a toolbar has 26 corners, a compact one 16. */
+  --device-radius: 16px;
+  --device-safe-top: 32px;
   --device-safe-bottom: 0px;
 }
 
@@ -464,36 +465,37 @@ html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .home-indicator {
   display: none;
 }
 
-/* The title bar's window buttons (close, minimize, zoom): three lights 12
-   points across, 8 apart, 8 in from the edge, over the app. The bar itself
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device:has(.sb-navscreen[data-sb-unified], .sb-tabview[data-sb-tabs-top]) {
+  --device-radius: 26px;
+}
+
+/* The title bar's window buttons (close, minimize, zoom): three lights 14
+   points across, 9 apart (macOS 26), over the app. The bar itself
    is the app's: a navigation screen at the top of the window draws its title
    bar there (the Mac idiom below; the engine leaves the buttons their room),
    and a window with no bar shows its content under them, as a Mac window
    with a hidden title bar does. */
 html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .status-bar {
   justify-content: flex-start;
-  padding: 0 0 0 8px;
+  align-items: flex-start;
+  padding: 9px 0 0 9px;
   background: none;
 }
 
-/* The lights sit (bar height − 12) / 2 from the corner: 8 in a plain 28
-   bar, 20 in a unified 52 one, 13 in a tab view's 38 toolbar. */
-html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device:has(.sb-navscreen[data-sb-unified]) .status-bar::before {
-  transform: translate(12px, 12px);
-}
-
-html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device:has(.sb-tabview[data-sb-tabs-top]) .status-bar::before {
-  transform: translate(5px, 5px);
+/* The lights sit (bar height − 14) / 2 from the corner: 9 in a compact 32
+   bar, 19 in a 52 toolbar. */
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device:has(.sb-navscreen[data-sb-unified], .sb-tabview[data-sb-tabs-top]) .status-bar::before {
+  transform: translate(10px, 10px);
 }
 
 html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .status-bar::before {
   content: "";
-  width: 52px;
-  height: 12px;
+  width: 60px;
+  height: 14px;
   background:
-    radial-gradient(circle at 6px 6px, #ff5f57 0 5.5px, transparent 6px),
-    radial-gradient(circle at 26px 6px, #febc2e 0 5.5px, transparent 6px),
-    radial-gradient(circle at 46px 6px, #28c840 0 5.5px, transparent 6px);
+    radial-gradient(circle at 7px 7px, #ff5f57 0 6.5px, transparent 7px),
+    radial-gradient(circle at 30px 7px, #febc2e 0 6.5px, transparent 7px),
+    radial-gradient(circle at 53px 7px, #28c840 0 6.5px, transparent 7px);
 }
 
 html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device:not(.sb-island) {
@@ -3944,7 +3946,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-datepicker > [hidden],
 .sb-stepper > [hidden],
 .sb-slider > [hidden],
-.sb-slider-labels > [hidden] {
+.sb-slider-labels > [hidden],
+.sb-picker > .sb-picker-label[hidden] {
   display: none;
 }
 
@@ -4659,16 +4662,32 @@ html[data-sb-platform="macos"] .device[data-theme="light"] {
   --sb-mac-control-shadow:
     0 0 0 0.5px rgba(0, 0, 0, 0.12),
     0 1px 1px rgba(0, 0, 0, 0.08);
-  /* A text field's edges: light at the sides and top, darker at the bottom. */
+  /* A text field: the text background, its edges light at the sides and top, darker at the bottom. */
+  --sb-mac-field: #ffffff;
   --sb-mac-field-shadow:
     inset 0 0 0 1px rgba(0, 0, 0, 0.11),
     inset 0 -1px 0 0 rgba(0, 0, 0, 0.27);
   --sb-mac-segment-track: #ededed;
   --sb-mac-segment: #ffffff;
-  --sb-mac-tab-selected: #f2f2f2;
+  --sb-mac-tab-selected: #d9d9d9;
+  --sb-mac-tab-rule: #e5e5e5;
   --sb-mac-sheet: #ececec;
-  /* The window background, under content; a list's background and its rows. */
-  --sb-color-system-background: #f6f6f6;
+  --sb-mac-sheet-bar: #ffffff;
+  --sb-mac-sheet-rule: #d4d4d4;
+  /* macOS 26: the toolbar's Liquid Glass (a 36 capsule, its rim lighter
+     than its fill), its glyphs, and the window title's color. */
+  --sb-glass-background: #f2f2f2;
+  --sb-glass-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.03), 0 2px 10px rgba(0, 0, 0, 0.07);
+  --sb-glass-rim: linear-gradient(#fcfcfc, #fcfcfc);
+  --sb-mac-glyph: #494949;
+  --sb-mac-title: #4d4d4d;
+  --sb-mac-rim: #fcfcfc;
+  --sb-mac-sidebar-selection: #dcdcdc;
+  --sb-mac-card: #f7f7f7;
+  --sb-mac-card-separator: #ebebeb;
+  --sb-mac-push: rgba(0, 0, 0, 0.075);
+  /* The window background, under content (white on macOS 26); a list's background and its rows. */
+  --sb-color-system-background: #ffffff;
   --sb-color-grouped-background: #ffffff;
   --sb-color-grouped-cell: #ffffff;
   --sb-color-row-separator: rgba(0, 0, 0, 0.1);
@@ -4682,66 +4701,107 @@ html[data-sb-platform="macos"] .device[data-theme="dark"] {
   --sb-mac-control-shadow:
     0 0 0 0.5px rgba(0, 0, 0, 0.4),
     0 1px 1px rgba(0, 0, 0, 0.2);
+  --sb-mac-field: #333333;
   --sb-mac-field-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.12),
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
   --sb-mac-segment-track: #333333;
   --sb-mac-segment: #666666;
-  --sb-mac-tab-selected: #292929;
-  --sb-mac-sheet: #2b2b2b;
-  --sb-color-system-background: #282828;
+  --sb-mac-tab-selected: #373737;
+  --sb-mac-tab-rule: #282828;
+  --sb-mac-sheet: #1e1e1e;
+  --sb-mac-sheet-bar: #1e1e1e;
+  --sb-mac-sheet-rule: #343434;
+  --sb-glass-background: #141414;
+  --sb-glass-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.3);
+  --sb-glass-rim: linear-gradient(#2a2a2a, #2a2a2a);
+  --sb-mac-glyph: #e7e7e7;
+  --sb-mac-title: #e8e8e8;
+  --sb-mac-rim: #2a2a2a;
+  --sb-mac-sidebar-selection: #464646;
+  --sb-mac-card: #252525;
+  --sb-mac-card-separator: #2f2f2f;
+  --sb-mac-push: rgba(255, 255, 255, 0.075);
+  --sb-color-system-background: #1e1e1e;
   --sb-color-grouped-background: #1e1e1e;
   --sb-color-grouped-cell: #1e1e1e;
   --sb-color-row-separator: rgba(255, 255, 255, 0.1);
   --sb-color-secondary: rgba(255, 255, 255, 0.55);
 }
 
-/* The title bar in place of the navigation bar: opaque, the window's chrome
-   color, a hairline under it; no scroll-edge gradient and no glass capsules
-   (the items sit on the bar). */
+/* The title bar in place of the navigation bar (macOS 26): no color or
+   rule of its own, the window's content color under it; no scroll-edge
+   gradient. Its items are on Liquid Glass capsules (the engine's
+   `leadingGlass0` …, `trailingGlass0` …: 36 tall, the Mac's colors above). */
 html[data-sb-platform="macos"] .sb-navbar {
-  background: var(--sb-mac-bar);
+  /* Over the capsules (the back button is drawn on the leading one). */
+  z-index: 3;
+  background: none;
 }
 
-/* The rule under the title bar is the row below it (the content's first). */
-html[data-sb-platform="macos"] .sb-navbar::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 1px;
-  background: var(--sb-mac-separator);
-  pointer-events: none;
+html[data-sb-platform="macos"] .sb-navbar::before {
+  display: none;
 }
 
-html[data-sb-platform="macos"] .sb-navbar::before,
 html[data-sb-platform="macos"] .sb-bar-glass {
-  display: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
-/* The back button, the More button and the sidebar toggle: bare 28
-   buttons (the engine's `back`, `more`, `toggle` rects), not glass circles;
-   the back chevron is a secondary-colored glyph (measured in the Mac app). */
+/* The back button is the first slot of the leading capsule (the engine's
+   `back` rect inside `leadingGlass0`), the More button a glass circle of its
+   own; their glyphs, as the items', the toolbar's dark gray. The sidebar
+   toggle is bare (the split view's styles below). */
 html[data-sb-platform="macos"] .sb-navbar-back,
 html[data-sb-platform="macos"] .sb-navbar-more,
 html[data-sb-platform="macos"] .sb-navsplit-toggle {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  font-size: 13px;
+  color: var(--sb-mac-glyph);
+  --sb-press-scale: 1;
+}
+
+html[data-sb-platform="macos"] .sb-navbar-back,
+html[data-sb-platform="macos"] .sb-navsplit-toggle {
   background: none;
   box-shadow: none;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
-  font-size: 13px;
-  --sb-press-scale: 1;
+}
+
+html[data-sb-platform="macos"] .sb-navbar-back::after,
+html[data-sb-platform="macos"] .sb-navsplit-toggle::after {
+  display: none;
+}
+
+/* Over the leading capsule it is the first slot of. */
+html[data-sb-platform="macos"] .sb-navbar-back {
+  z-index: 3;
 }
 
 html[data-sb-platform="macos"] .sb-navbar-back > svg {
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
   margin-left: -1px;
-  color: var(--sb-color-secondary);
+  color: var(--sb-mac-glyph);
+}
+
+/* A toolbar item is drawn in the toolbar's colors whatever its `.tint`
+   (SwiftUI on macOS 26, as the native renderer shows it): a bottom-bar item
+   is one too, at the toolbar's trailing end (the engine's `barPlacement`). */
+html[data-sb-platform="macos"] .sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="bottom"]) :is(.sb-button, .sb-menu):not([data-sb-role="destructive"]) {
+  --sb-tint: var(--sb-mac-glyph) !important;
+}
+
+html[data-sb-platform="macos"] .sb-toolbar[data-sb-placement="bottom"] .sb-image > svg {
+  stroke-width: 1.85;
+}
+
+/* A toolbar item's glyph and label: the toolbar's dark gray, not the accent. */
+html[data-sb-platform="macos"] .sb-navbar .sb-button:not([data-sb-role="destructive"]) {
+  color: var(--sb-button-color, var(--sb-mac-glyph));
 }
 
 /* A bar's text button is a bordered 28 button at its slot (the engine's
@@ -4762,6 +4822,8 @@ html[data-sb-platform="macos"] .sb-navbar-more:active {
    the leading items, 15 semibold (the engine's `title` rect and font). */
 html[data-sb-platform="macos"] .sb-navbar-title {
   font-size: var(--sb-ts-headline-size, 13px);
+  text-align: start;
+  color: var(--sb-mac-title);
 }
 
 html[data-sb-platform="macos"] .sb-navscreen[data-sb-unified] > .sb-navbar > .sb-navbar-title {
@@ -4769,20 +4831,169 @@ html[data-sb-platform="macos"] .sb-navscreen[data-sb-unified] > .sb-navbar > .sb
   font-size: var(--sb-ts-title3-size, 15px);
 }
 
-/* The tab bar: a segmented control at the top of the content (the engine's
-   Mac tab view), each tab a segment with its title alone, the selected one
-   raised; no icons, no glass. */
+/* `.navigationSubtitle`: a second line under the title in a unified title
+   bar (the engine's `subtitle` rect; in a plain bar it joins the title). */
+.sb-navbar-subtitle {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 11px;
+  color: var(--sb-color-secondary);
+}
+
+.sb-navbar-subtitle[hidden] {
+  display: none;
+}
+
+/* A `Form` is the columns style (the engine's `columns` plan): on the
+   window background with no cards or separators; the labels (chrome
+   `formLabel<i>`) right-aligned in their column, the label color; a
+   section's header and footer 13 regular, the label color; a text field's
+   title moved to the column shows no placeholder. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] {
+  background: var(--sb-color-system-background);
+}
+
+/* The rows' card spans the form (the label column is drawn in it): no card look, nothing clipped. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-rows {
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+/* A text field's row is the field (the engine's row rect): the Mac's bezel, its text 3 in. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-textfield[data-sb-style] {
+  box-sizing: border-box;
+  padding: 0 3px;
+  border-radius: 5px;
+  background: var(--sb-mac-field);
+  box-shadow: var(--sb-mac-field-shadow);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-textfield[data-sb-style]:focus {
+  box-shadow:
+    var(--sb-mac-field-shadow),
+    0 0 0 3.5px color-mix(in srgb, var(--sb-tint, var(--sb-color-accent)) 50%, transparent);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-rows > ::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] > .sb-list-content > :not(.sb-section)::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-header::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-footer::after {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-header,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section-footer {
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-form-label {
+  position: absolute;
+  white-space: pre;
+  text-align: right;
+  color: var(--sb-color-primary);
+}
+
+@supports (text-box: trim-start cap alphabetic) {
+  html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-form-label {
+    text-box: trim-start cap alphabetic;
+    padding-top: var(--sb-cap-inset);
+  }
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] input.sb-textfield::placeholder {
+  color: transparent;
+}
+
+/* A pop-up button spanning the controls column: its value at the leading end, the chevrons at the trailing. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-picker[data-sb-popup] > .sb-picker-value {
+  justify-content: space-between;
+}
+
+/* A grouped form (`.formStyle(.grouped)`, the engine's `grouped` plan):
+   each section a rounded card (11), its rows separated by a point 10 in
+   from either side; headers the label color, no rules. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section-rows {
+  border-radius: 11px;
+  background: var(--sb-mac-card);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section-rows > [data-sb-id]::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: -1px;
+  height: 1px;
+  background: var(--sb-mac-card-separator);
+  pointer-events: none;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section-rows > [data-sb-id]:last-child::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section-header::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section .sb-section-footer::after {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-picker-value {
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-section-header {
+  color: var(--sb-color-primary);
+}
+
+/* A text field's title leads its row (chrome `formLabel<i>`), its value at
+   the trailing end; a Label's icon the label color; a link's small chevron. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-form-label {
+  position: absolute;
+  white-space: pre;
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] input.sb-textfield {
+  text-align: right;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] input.sb-textfield::placeholder {
+  color: transparent;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] [data-sb-label-icon] {
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+/* A switch (36 × 18): the accent while on, white with a hairline while off; a white knob. */
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-toggle:not([data-sb-checkbox]) > .sb-switch {
+  border-radius: 9px;
+  background: var(--sb-mac-control);
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-form-grouped] .sb-toggle:not([data-sb-checkbox]) > .sb-switch[aria-checked="true"] {
+  background: var(--sb-tint, var(--sb-color-accent));
+  box-shadow: none;
+}
+
+/* The tab bar (macOS 26): a glass capsule in the toolbar (the engine's Mac
+   tab view), each tab an equal segment with its title alone, the selected
+   one a gray pill, a short rule between two unselected ones; no icons. */
 html[data-sb-platform="macos"] .sb-tabbar {
   z-index: 2;
-  border-radius: 6px;
-  background: none;
-  box-shadow: inset 0 0 0 1px var(--sb-color-row-separator);
+  border-radius: 9999px;
+  background: var(--sb-glass-background);
+  box-shadow: inset 0 0 0 1px var(--sb-mac-rim), var(--sb-glass-shadow);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
 
 html[data-sb-platform="macos"] .sb-tabbar-item {
-  border-radius: 5px;
+  border-radius: 9999px;
   color: var(--sb-color-primary);
 }
 
@@ -4792,6 +5003,16 @@ html[data-sb-platform="macos"] .sb-tabbar-item[aria-selected="true"] {
   box-shadow: none;
 }
 
+html[data-sb-platform="macos"] .sb-tabbar-item:not([aria-selected="true"]) + .sb-tabbar-item:not([aria-selected="true"])::before {
+  content: '';
+  position: absolute;
+  left: -0.5px;
+  top: 2px;
+  bottom: 2px;
+  width: 1px;
+  background: var(--sb-mac-tab-rule);
+}
+
 html[data-sb-platform="macos"] .sb-tabbar-icon,
 html[data-sb-platform="macos"] .sb-tabbar-badge {
   display: none;
@@ -4806,15 +5027,14 @@ html[data-sb-platform="macos"] .sb-tabbar-title {
 
 /* Buttons: a bordered button, and an automatic one the engine bordered
    (`data-sb-bordered`: outside a list row and a bar), is the Mac's push
-   button, 22 tall with a 6 radius, the control color with a hairline and a
-   shadow, its label the primary color; a prominent one the accent with
-   white text. */
+   button (macOS 26): a capsule of translucent gray, no rim or shadow, its
+   label the primary color; a prominent one the accent with white text. */
 html[data-sb-platform="macos"] .sb-button[data-sb-style="bordered"],
 html[data-sb-platform="macos"] .sb-button[data-sb-style="automatic"][data-sb-bordered],
 html[data-sb-platform="macos"] .sb-button[data-sb-style="borderedProminent"] {
-  border-radius: 6px;
-  background: var(--sb-mac-control);
-  box-shadow: var(--sb-mac-control-shadow);
+  border-radius: 9999px;
+  background: var(--sb-mac-push);
+  box-shadow: none;
   color: var(--sb-button-color, var(--sb-color-primary));
 }
 
@@ -4840,14 +5060,14 @@ html[data-sb-platform="macos"] .sb-button[data-sb-style="plain"] {
   color: var(--sb-button-color, var(--sb-color-secondary));
 }
 
-/* A segmented control (measured in the Mac app): 22 tall with a 5 radius,
-   a gray track under a hairline, 13-point regular labels, the selected
-   segment white (dark: lighter gray) with a shadow, 1 in; its label (the
-   engine's `label`) before it in the row's font. */
+/* A segmented control (macOS 26): a 24 capsule of translucent gray, its
+   13-point regular labels in equal segments, the selected one an accent
+   capsule with white text; its label (the engine's `label`) before it in
+   the row's font. */
 html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment-track {
-  border-radius: 5px;
-  background: var(--sb-mac-segment-track);
-  box-shadow: inset 0 0 0 0.5px var(--sb-mac-separator);
+  border-radius: 9999px;
+  background: var(--sb-mac-push);
+  box-shadow: none;
 }
 
 html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment {
@@ -4856,13 +5076,17 @@ html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-s
 }
 
 html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment::before {
-  inset: 1px;
-  border-radius: 4px;
+  inset: 0;
+  border-radius: 9999px;
 }
 
 html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment[aria-checked="true"]::before {
-  background: var(--sb-mac-segment);
-  box-shadow: var(--sb-mac-control-shadow);
+  background: var(--sb-tint, var(--sb-color-accent));
+  box-shadow: none;
+}
+
+html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment[aria-checked="true"] {
+  color: #ffffff;
 }
 
 html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"] > .sb-picker-label {
@@ -4911,87 +5135,126 @@ html[data-sb-platform="macos"] .sb-list .sb-toggle:not([data-sb-checkbox]):not([
   transform: translateX(11px);
 }
 
-/* A menu picker outside a list row is a pop-up button: its value and the
-   chevrons in a bordered button (the engine's `popup` rect), the chevrons
-   on an accent square at its trailing end. */
+/* A menu picker outside a list row is a pop-up button (macOS 26): its value
+   and the chevrons on a translucent gray rounded rect (the engine's `popup`
+   rect, as wide as the widest option), the value 13 in, the chevrons a
+   small glyph 9 from the end. */
 html[data-sb-platform="macos"] .sb-picker[data-sb-popup] > .sb-picker-value {
   box-sizing: border-box;
-  padding: 0 3px 0 8px;
+  justify-content: space-between;
+  padding: 0 7px 0 13px;
   gap: 6px;
-  border-radius: 5px;
-  background: var(--sb-mac-control);
-  box-shadow: var(--sb-mac-control-shadow);
+  border-radius: 6px;
+  background: var(--sb-mac-push);
+  box-shadow: none;
   color: var(--sb-color-primary);
 }
 
 html[data-sb-platform="macos"] .sb-picker[data-sb-popup] > .sb-picker-value > svg {
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  padding: 3px;
-  border-radius: 4px;
-  background: var(--sb-tint, var(--sb-color-accent));
-  color: #ffffff;
-  stroke-width: 3;
+  width: 12px;
+  height: 12px;
+  color: var(--sb-color-primary);
+  stroke-width: 2.5;
 }
 
-/* Lists: no cards (the rows run the list's width on its white), a separator
-   under every row from its first text to 16 before the edge, a rule across
-   the list 8 under a header and 5 under a footer; a selected row is the
-   accent with white text (the sidebar's, when the window is key). The
-   engine draws no chevrons. */
+/* Lists (SwiftUI's inset style, as the native renderer draws it on macOS
+   26): no cards; the rows inset 16 from the list's edges on its white, a
+   separator under each row from its first text to the row's trailing edge,
+   except under the last row of the list (a footer or another section after
+   it brings one back); a rule across the rows at a section's first row's
+   top under its header, and 5 under a footer another section follows; a
+   selected row is the accent with white text (the sidebar's, when the
+   window is key). The engine draws no chevrons. */
 html[data-sb-platform="macos"] .sb-section-rows,
 html[data-sb-platform="macos"] .sb-list-content > :not(.sb-section) {
   border-radius: 0;
   background: none;
 }
 
+/* No card to clip to: a row's symbol may overhang the inset rows' edge. */
+html[data-sb-platform="macos"] .sb-list:not([data-sb-form-grouped]) .sb-section-rows {
+  overflow: visible;
+}
+
+/* A Label's icon in a Mac list row is the symbol at the font's point size
+   (no icon column, docs/notes/macos.md); a sidebar's and a grouped form's
+   keep their own sizes. */
+html[data-sb-platform="macos"] .sb-list:not([data-sb-list-style="sidebar"]):not([data-sb-list-look]):not([data-sb-form-grouped]) [data-sb-label-icon] .sb-image > svg {
+  width: 1.1em;
+  height: 1.1em;
+  stroke-width: 1.6;
+}
+
 html[data-sb-platform="macos"] .sb-section-rows > [data-sb-id],
 html[data-sb-platform="macos"] .sb-section-rows > [data-sb-ghost] {
   background: var(--sb-row-background, transparent);
 }
 
-html[data-sb-platform="macos"] .sb-section-rows > :last-child::after,
-html[data-sb-platform="macos"] .sb-list-content > :not(.sb-section):last-child::after,
+html[data-sb-platform="macos"] .sb-section-rows > :not(:last-child)::after,
+html[data-sb-platform="macos"] .sb-list-content > :not(.sb-section):not(:last-child):not(:has(+ .sb-section))::after {
+  left: var(--sb-separator-leading, 0px);
+  right: 0;
+}
+
+html[data-sb-platform="macos"] .sb-section-rows > :is(input, textarea):not(:last-child),
+html[data-sb-platform="macos"] .sb-list-content > :is(input, textarea):not(:last-child):not(:has(+ .sb-section)) {
+  background-position: var(--sb-separator-leading, 0px) 100%;
+  background-size: calc(100% - var(--sb-separator-leading, 0px)) 1px;
+}
+
+html[data-sb-platform="macos"] .sb-section:not(:last-child) > .sb-section-rows > :last-child::after,
+html[data-sb-platform="macos"] .sb-section:has(> .sb-section-footer:not([hidden])) > .sb-section-rows > :last-child::after,
 html[data-sb-platform="macos"] .sb-list-content > :not(.sb-section):has(+ .sb-section)::after {
   content: "";
   position: absolute;
-  left: var(--sb-separator-leading, 16px);
-  right: 16px;
+  left: var(--sb-separator-leading, 0px);
+  right: 0;
   bottom: 0;
   height: 1px;
   background: var(--sb-color-row-separator);
   pointer-events: none;
 }
 
+/* The rule under a header (a text one or a view, `.sb-sectionheader`):
+   across the section's rows at the first row's top. */
+html[data-sb-platform="macos"] .sb-list:not([data-sb-form-grouped]):not([data-sb-form-columns]):not([data-sb-list-style="sidebar"]):not([data-sb-list-look]) .sb-section:has(> .sb-section-header:not([hidden]), > .sb-sectionheader) > .sb-section-rows::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--sb-color-row-separator);
+  pointer-events: none;
+  z-index: 1;
+}
+
 html[data-sb-platform="macos"] .sb-section-header,
 html[data-sb-platform="macos"] .sb-section-footer {
   color: var(--sb-color-secondary);
 }
 
-html[data-sb-platform="macos"] .sb-section-header::after,
 html[data-sb-platform="macos"] .sb-section-footer::after {
   content: "";
   position: absolute;
   left: -16px;
   right: -16px;
-  bottom: -9px;
+  bottom: -6px;
   height: 1px;
-  background: var(--sb-mac-separator);
+  background: var(--sb-color-row-separator);
   pointer-events: none;
-}
-
-html[data-sb-platform="macos"] .sb-section-footer::after {
   display: none;
-  bottom: -6px;
-  background: var(--sb-color-row-separator);
 }
 
-/* The rule under a footer only where another section follows. */
+/* The rule under a footer only where another section follows (a columns form has none). */
 html[data-sb-platform="macos"] .sb-section:has(+ .sb-section) > .sb-section-footer::after {
   display: block;
 }
 
+html[data-sb-platform="macos"] .sb-list[data-sb-form-columns] .sb-section:has(+ .sb-section) > .sb-section-footer::after {
+  display: none;
+}
+
 /* A button in a list row is a push button at its own size (the engine's
    `bordered` rect, `data-sb-bordered="inset"`), on the row, not the row
    itself; a destructive one is not tinted. */
@@ -5008,9 +5271,8 @@ html[data-sb-platform="macos"] .sb-button[data-sb-style][data-sb-bordered="inset
   top: var(--sb-bordered-top);
   width: var(--sb-bordered-width);
   height: var(--sb-bordered-height);
-  border-radius: 6px;
-  background: var(--sb-mac-control);
-  box-shadow: var(--sb-mac-control-shadow);
+  border-radius: 9999px;
+  background: var(--sb-mac-push);
   pointer-events: none;
 }
 
@@ -5073,16 +5335,33 @@ html[data-sb-platform="macos"] .sb-searchfield > .sb-searchfield-input::placehol
   color: var(--sb-color-tertiary-label);
 }
 
-/* A sheet is a window-modal panel hanging from the title bar (the engine's
-   form sheet on a Mac): square at the top, rounded below, a shadow; it
-   drops in from above rather than sliding up. */
-/* A sheet (measured in the Mac app): a panel centered in the window with a
-   10 radius and a shadow, its content on the window color under the white
-   title bar (the stack's bar: its title leading, 13 bold); its actions in a
-   60 bar at the bottom under a rule (the engine's `actions`). */
+/* In the toolbar (macOS 26) the field is a glass capsule like the bar's
+   items: the magnifier 11 in, the text 10 after it. */
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-search-bar] .sb-searchfield {
+  gap: 8px;
+  padding: 0 12px 0 11px;
+  border-radius: 9999px;
+  background: var(--sb-glass-background);
+  box-shadow: inset 0 0 0 1px var(--sb-mac-rim), var(--sb-glass-shadow);
+}
+
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-search-bar] .sb-searchfield > svg {
+  width: 14px;
+  height: 14px;
+}
+
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-search-bar] .sb-searchfield > .sb-searchfield-input::placeholder {
+  color: var(--sb-color-secondary);
+}
+
+/* A sheet (measured in the Mac app, macOS 26): a panel centered in the
+   window with a 26 radius and a shadow, its content on the sheet's gray
+   under the white title bar (the stack's bar: its title leading, 13 bold,
+   over a rule); its actions in a 60 bar at the bottom under a rule (the
+   engine's `actions`). It drops in from above rather than sliding up. */
 html[data-sb-platform="macos"] .sb-sheet[data-sb-form] > .sb-sheet-card {
   --sb-sheet-offscreen: -100vh;
-  border-radius: 10px;
+  border-radius: 26px;
   background: var(--sb-mac-sheet);
   box-shadow:
     0 0 0 0.5px rgba(0, 0, 0, 0.25),
@@ -5100,6 +5379,15 @@ html[data-sb-platform="macos"] .sb-sheet[data-sb-form][data-sb-actions] > .sb-sh
   pointer-events: none;
 }
 
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-sheet-bar] {
+  background: transparent;
+}
+
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-sheet-bar] > .sb-navbar {
+  background: var(--sb-mac-sheet-bar);
+  box-shadow: 0 1px 0 var(--sb-mac-sheet-rule);
+}
+
 html[data-sb-platform="macos"] .sb-navscreen[data-sb-sheet-bar] > .sb-navbar > .sb-navbar-title {
   text-align: start;
   font-size: 13px;
@@ -5118,7 +5406,7 @@ html[data-sb-platform="macos"] .sb-textfield:not([data-sb-style="plain"]) {
   padding: 0 6px;
   border: 0;
   border-radius: 5px;
-  background: var(--sb-mac-control);
+  background: var(--sb-mac-field);
   box-shadow: var(--sb-mac-field-shadow);
   font-size: 13px;
 }
@@ -5149,6 +5437,11 @@ html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control
   line-height: 0;
 }
 
+/* The arrows stand in for the plus and minus glyphs. */
+html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control > .sb-stepper-button > svg {
+  display: none;
+}
+
 html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control > .sb-stepper-button::after {
   content: "";
   width: 0;
@@ -5169,44 +5462,31 @@ html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control
   display: none;
 }
 
-/* An alert is a panel (the engine's `panel` rect, 260 wide): the window
-   color with a 10 radius and a shadow, no glass, its title and message
-   centered; its buttons are push buttons, the default one (the last that is
-   not a cancel) the accent. */
+/* An alert is a panel (the engine's `panel` rect, 260 wide; macOS 26): the
+   glass fill with a rim, an 18 radius and a shadow, its title and message
+   leading-aligned; its buttons capsules of translucent gray, a destructive
+   one red on a red tint, the default one (the last that is not a cancel)
+   the accent. */
 html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-card {
-  border-radius: 10px;
-  background: var(--sb-mac-bar);
+  border-radius: 18px;
+  background: var(--sb-glass-background);
   box-shadow:
-    0 0 0 0.5px rgba(0, 0, 0, 0.2),
-    0 12px 40px rgba(0, 0, 0, 0.3);
+    inset 0 0 0 1px var(--sb-mac-rim),
+    0 0 0 0.5px rgba(0, 0, 0, 0.12),
+    0 12px 40px rgba(0, 0, 0, 0.25);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
 
-/* The app's icon, 54 at the top of the panel (a generic one: the page has none). */
-html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-card::before {
-  content: "";
-  position: absolute;
-  top: 25px;
-  left: 50%;
-  width: 54px;
-  height: 54px;
-  margin-left: -27px;
-  border-radius: 12px;
-  background:
-    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
-    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 9px),
-    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 9px),
-    #d3e0e5;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+/* The Mac's message is the primary color, as its title. */
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-message {
+  color: var(--sb-color-primary);
 }
 
-/* Measured in the Mac app: the buttons gray (the control color darkened),
-   28 tall, 13 regular; a destructive one red; a lone OK the accent. */
 html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-buttons > .sb-button,
 html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-ok {
-  border-radius: 6px;
-  background: var(--sb-color-fill);
+  border-radius: 9999px;
+  background: var(--sb-mac-push);
   box-shadow: none;
   color: var(--sb-color-primary);
   font-size: 13px;
@@ -5218,6 +5498,7 @@ html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-ok {
 }
 
 html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-buttons > .sb-button[data-sb-role="destructive"] {
+  background: color-mix(in srgb, var(--sb-color-red) 24%, transparent);
   color: var(--sb-color-red);
 }
 
@@ -5297,3 +5578,62 @@ html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] {
   --sb-icon-knockout: var(--sb-mac-sidebar);
 }
 
+/* macOS 26: the sidebar is a floating panel (the engine's `panel` rect,
+   under the columns): the toolbar's glass fill, its top 44 the window's
+   color (the window buttons and the toggle on it), rounded 22, a rim and a
+   soft shadow. The sidebar column, its screens and its list are clear over
+   it; its rows' icons and text are the label color, the selected row a
+   gray rounded fill. */
+html[data-sb-platform="macos"] .sb-navsplit-panel {
+  position: absolute;
+  z-index: 0;
+  border-radius: 22px;
+  background: linear-gradient(var(--sb-color-system-background) 0 44px, var(--sb-glass-background) 44px);
+  box-shadow: inset 0 0 0 1px var(--sb-mac-rim), var(--sb-glass-shadow);
+  pointer-events: none;
+}
+
+.sb-navsplit-panel[hidden],
+.sb-navsplit-panel {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-navsplit-panel:not([hidden]) {
+  display: block;
+}
+
+html[data-sb-platform="macos"] .sb-navsplit-columns > [data-sb-id]:first-child,
+html[data-sb-platform="macos"] .sb-navsplit-columns > [data-sb-ghost]:first-child {
+  box-shadow: none;
+  background: transparent;
+}
+
+/* (important: a screen with a list takes the grouped background through a
+   `:has()` rule more specific than these) */
+html[data-sb-platform="macos"] .sb-navsplit-columns > :first-child .sb-navscreen,
+html[data-sb-platform="macos"] .sb-navsplit-columns > :first-child .sb-list[data-sb-list-look="sidebar"] {
+  background: transparent !important;
+  --sb-icon-knockout: var(--sb-glass-background);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] {
+  --sb-tint: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] .sb-section-header::after,
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] .sb-section-footer::after {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] .sb-navlink[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] .sb-listrow[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"][data-sb-list-style] .sb-section-rows > .sb-navlink[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"][data-sb-list-style] .sb-section-rows > .sb-listrow[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"][data-sb-list-style] > .sb-list-content > .sb-navlink[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"][data-sb-list-style] > .sb-list-content > .sb-listrow[data-sb-selected] {
+  border-radius: 8px;
+  background: var(--sb-mac-sidebar-selection);
+  color: var(--sb-color-primary);
+  --sb-button-color: var(--sb-color-primary);
+}
+