@swiftbrowser/web 0.5.6 → 0.6.0

package/src/styles.css

@@ -106,6 +106,8 @@
     rgba(255, 255, 255, 0.6) 360deg
   );
   --sb-glass-selected: rgba(120, 120, 128, 0.16);
+  /* The glass under a pressed button brightens (src/press.ts). */
+  --sb-glass-pressed: rgba(255, 255, 255, 0.92);
   --sb-color-segment-track: rgba(118, 118, 128, 0.12);
   --sb-color-segment-selected: #ffffff;
   /* Menus, floating sheets and alerts are Liquid Glass too: translucent
@@ -163,6 +165,7 @@
     rgba(255, 255, 255, 0.125) 360deg
   );
   --sb-glass-selected: rgba(120, 120, 128, 0.32);
+  --sb-glass-pressed: rgba(72, 72, 72, 0.92);
   /* 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);
@@ -480,6 +483,12 @@ html[data-sb-mode="device"] .device-screen {
    Phase 2: button styles, disabled, image, divider, scrollview
    ------------------------------------------------------------------------- */
 
+/* `.buttonStyle(.plain)`: the label in the foreground it is in (the label
+   color unless a `.foregroundStyle` says otherwise), not the tint. */
+.sb-button[data-sb-style="plain"] {
+  color: var(--sb-button-color, inherit);
+}
+
 .sb-button[data-sb-style="bordered"],
 .sb-button[data-sb-style="borderedProminent"] {
   border-radius: 9999px;
@@ -849,14 +858,21 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* Rows: every direct child of a section's card, and every non-section child
-   of a list (loose rows form their own card). */
+   of a list (loose rows form their own card). `.listRowBackground(_:)` sets
+   `--sb-row-background` on its row (src/layoutDom.ts). */
 .sb-section-rows > [data-sb-id],
 .sb-section-rows > [data-sb-ghost],
 .sb-list-content > :not(.sb-section) {
-  background: var(--sb-color-grouped-cell);
+  background: var(--sb-row-background, var(--sb-color-grouped-cell));
   text-align: left;
 }
 
+/* A card with such a row leaves the cell paint to its rows, so a clear row
+   shows the list's background. */
+.sb-section-rows:has(> [data-sb-row-background]) {
+  background: transparent;
+}
+
 .sb-list-content > :not(.sb-section):first-child,
 .sb-list-content > .sb-section + :not(.sb-section) {
   border-top-left-radius: 26px;
@@ -1390,7 +1406,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 /* A sheet is a root-level layer covering the screen: a scrim over the
    presenting tree and the card at the engine's frame (large: screen height −
-   status bar − 10; medium: half), sliding up from the bottom. */
+   status bar; medium: half), sliding up from the bottom. */
 .screen > .sb-sheet,
 .sb-sheet {
   position: absolute;
@@ -1401,17 +1417,19 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: block;
 }
 
+/* iOS 26: the dim behind a sheet is 20% black (measured). */
 .sb-sheet-scrim {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.2);
   animation: sb-sheet-scrim-in 0.4s ease-out both;
 }
 
 .sb-sheet-card {
   position: absolute;
   box-sizing: border-box;
-  border-radius: 10px 10px 0 0;
+  /* iOS 26: a large sheet's top corners follow the screen's (about 38). */
+  border-radius: 38px 38px 0 0;
   background: var(--sb-color-sheet-background);
   box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
   overflow: hidden;
@@ -1502,15 +1520,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   transform-origin: 50% 0;
 }
 
-/* Behind a `large` sheet the presenting tree scales to 0.92 and dims. */
-.screen > :not(.sb-sheet) {
-  transform-origin: 50% 0;
-  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.screen[data-sb-sheet="large"]:where(:not(:has(> .sb-sheet[data-sb-sheet-position="top"][data-sb-form]))) > :not(.sb-sheet, .sb-exit-clone, .sb-picker-menu, .sb-picker-menu-exit) {
-  transform: scale(0.92);
-}
+/* iOS 26: the presenting tree stays as it is behind a sheet (only dimmed);
+   earlier versions scaled it to 0.92 behind a large one. */
 
 @keyframes sb-sheet-in {
   from {
@@ -1553,8 +1564,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   .sb-sheet-card,
   .sb-sheet--in > .sb-sheet-card,
   .sb-sheet--out > .sb-sheet-card,
-  .sb-sheet--out > .sb-sheet-scrim,
-  .screen > :not(.sb-sheet) {
+  .sb-sheet--out > .sb-sheet-scrim {
     animation-duration: 0.01s;
     transition-duration: 0.01s;
   }
@@ -1705,6 +1715,25 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   stroke-width: 1.75;
 }
 
+/* A catalog icon: a custom symbol masks the item's color; a bitmap fits the slot. */
+.sb-tabbar-icon > .sb-tabbar-mask,
+.sb-tabbar-icon > img {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
+
+.sb-tabbar-icon > .sb-tabbar-mask {
+  background-color: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
 .sb-tabbar-icon[data-sb-missing] {
   border: 1px dashed currentColor;
   border-radius: 4px;
@@ -2025,13 +2054,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   overflow: visible;
 }
 
+/* iOS 26: the value in the tint, else the primary color; the track in the
+   same color at 35%. */
 .sb-gauge-ring-track {
-  stroke: var(--sb-color-fill);
+  stroke: var(--sb-tint, var(--sb-color-primary));
+  stroke-opacity: 0.35;
   stroke-linecap: round;
 }
 
 .sb-gauge-ring-value {
-  stroke: var(--sb-tint, var(--sb-color-accent));
+  stroke: var(--sb-tint, var(--sb-color-primary));
   stroke-linecap: round;
 }
 
@@ -2337,6 +2369,84 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+/* iOS 26 press feedback on Liquid Glass (src/press.ts): while a pointer is
+   down on a bar button or a glass button, the glass under it (a bar group's
+   capsule, a bottom bar capsule, the back and More circles, the sidebar
+   toggle, a `.glass` button, a `.glassEffect` box) swells and brightens;
+   when it lifts, the glass springs back (an overshooting ease-out). The
+   pressed item in a group gets a highlight capsule of its own; buttons on
+   glass do not dim as plain buttons do. The swell is the `scale` property,
+   apart from `transform`, which the renderer sets (offsets, rotations) and
+   the Animator tweens. */
+.sb-toolbar[data-sb-placement="leading"],
+.sb-toolbar[data-sb-placement="trailing"],
+.sb-bottom-glass,
+.sb-navbar-back,
+.sb-navbar-more,
+.sb-navsplit-toggle,
+.sb-button[data-sb-style="glass"],
+[data-sb-glass] {
+  --sb-press-scale: 1.08;
+  transition:
+    scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
+    background-color 0.3s ease,
+    opacity 0.1s ease;
+}
+
+/* A capsule of several items swells less: it is wider. */
+.sb-toolbar[data-sb-placement="leading"],
+.sb-toolbar[data-sb-placement="trailing"],
+.sb-bottom-glass {
+  --sb-press-scale: 1.05;
+}
+
+[data-sb-pressed] {
+  scale: var(--sb-press-scale);
+  background-color: var(--sb-glass-pressed);
+  transition:
+    scale 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
+    background-color 0.14s ease;
+}
+
+.sb-toolbar > [data-sb-pressed-item]::before {
+  content: "";
+  position: absolute;
+  inset: -11px -10px;
+  border-radius: 9999px;
+  background: var(--sb-glass-selected);
+  pointer-events: none;
+}
+
+.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="bottom"]) :is(.sb-button, .sb-menu):active,
+.sb-button[data-sb-style="glass"]:active,
+.sb-navbar-back:active,
+.sb-navbar-more:active,
+.sb-navsplit-toggle:active {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-sb-pressed] {
+    scale: none;
+  }
+}
+
+/* The exit clone of a bar item (src/animation.ts) is drawn as its toolbar
+   drew it: the bar's symbol size and weight, the label color. */
+.sb-exit-clone[data-sb-bar-item] {
+  --sb-color-accent: var(--sb-color-primary);
+}
+
+.sb-exit-clone[data-sb-bar-item] .sb-image > svg {
+  width: 1.57em;
+  height: 1.57em;
+  stroke-width: 1.85;
+}
+
+.sb-exit-clone[data-sb-bar-item="bottom"] .sb-image > svg {
+  stroke-width: 1.5;
+}
+
 /* A ToolbarSpacer draws nothing (the engine also hides it). */
 .sb-toolbar[data-sb-spacer] {
   display: none;
@@ -2359,6 +2469,62 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   z-index: 2;
 }
 
+/* iOS 26 in a tab view: the field sits under the title (engine
+   `searchTop`), drawn as the bar's: a gray capsule, no glass. When the
+   screen's scroll view (the one carrying the large title) scrolls, the
+   field moves with its content and fades under the bar: a scroll-driven
+   animation on that scroll view's timeline, so it keeps step with the
+   scrolling as the title (which is in the scroll view) does. */
+.sb-navscreen[data-sb-search-top] > .sb-navscreen-body > .sb-navscreen-content > .sb-searchfield {
+  background: var(--sb-color-tertiary-fill);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  padding: 0 12px;
+  gap: 6px;
+  z-index: 0;
+}
+
+.sb-navscreen[data-sb-search-top] > .sb-navscreen-body > .sb-navscreen-content > .sb-searchfield::after {
+  display: none;
+}
+
+@supports (animation-timeline: scroll()) {
+  .sb-navscreen[data-sb-search-top] {
+    timeline-scope: --sb-screen-scroll;
+  }
+
+  .sb-navscreen[data-sb-search-top] [data-sb-under-bar]:has(> .sb-navbar-large-title) {
+    scroll-timeline: --sb-screen-scroll y;
+  }
+
+  .sb-navscreen[data-sb-search-top] > .sb-navscreen-body > .sb-navscreen-content > .sb-searchfield {
+    animation:
+      sb-search-follow linear both,
+      sb-search-fade linear both;
+    animation-timeline: --sb-screen-scroll, --sb-screen-scroll;
+    animation-range: 0px 2000px, 0px 44px;
+  }
+}
+
+@keyframes sb-search-follow {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes sb-search-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 .sb-searchfield > svg {
   display: block;
   width: 17px;
@@ -2466,10 +2632,6 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
-.sb-navsplit-toggle:active {
-  opacity: 0.3;
-}
-
 .sb-navsplit-toggle > svg {
   width: 22px;
   height: 22px;
@@ -3126,13 +3288,6 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: block;
 }
 
-/* Above a `large` sheet the presenting tree scales down; an alert never does. */
-.screen[data-sb-sheet] > .sb-alert,
-.screen > .sb-alert {
-  transform: none;
-  transition: none;
-}
-
 .sb-alert-scrim {
   position: absolute;
   inset: 0;

package/src/styles.ts

@@ -38,6 +38,9 @@ import {
 
 const SEMANTIC_COLOR_VAR: Record<string, string> = {
   primary: 'var(--sb-color-primary)',
+  // `.foreground` (ForegroundStyle): the color where it is drawn, as SwiftUI
+  // resolves it (white inside a prominent button, a `.foregroundStyle` above).
+  foreground: 'currentColor',
   secondary: 'var(--sb-color-secondary)',
   accent: 'var(--sb-color-accent)',
   systemBackground: 'var(--sb-color-system-background)',

package/src/symbols.ts

@@ -366,6 +366,7 @@ import {
   Target,
   Tent,
   Terminal,
+  Cpu,
   TextAlignCenter,
   TextAlignEnd,
   TextAlignJustify,
@@ -887,7 +888,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   bluetooth: outline(Bluetooth),
   'battery.100': outline(Battery),
   power: outline(Power),
-  'cpu': outline(Terminal),
+  cpu: outline(Cpu),
+  'cpu.fill': knockout(Cpu),
   'chevron.left.forwardslash.chevron.right': outline(Code),
   terminal: outline(Terminal),
   'ant': outline(Bug),

package/src/vite-env.d.ts

@@ -24,6 +24,24 @@ interface SBLandingApp {
 
 /** The registered apps, in registry order. */
 declare const __SB_APPS__: readonly SBLandingApp[];
+/** The app the app page runs without `?app=` (`SiteOptions.defaultApp`, node/config.ts). */
+declare const __SB_DEFAULT_APP__: string;
+/** What a wide screen shows: `auto` (the frame) or `device` (the full window, a built single-app site). See plugins/site-layout.ts. */
+declare const __SB_PAGE_MODE__: 'auto' | 'device';
+
+/** `window.__SB_SITE__`, what the app page's inline scripts read (`SiteInfo` in plugins/site-layout.ts). */
+interface SBSiteInfo {
+  layout: 'app' | 'landing';
+  defaultApp: string;
+  displayName: string;
+  pageMode: 'auto' | 'device';
+}
+
+interface Window {
+  __SB_SITE__?: SBSiteInfo;
+  /** `name -> icon URL` for apps with their own icon (plugins/app-manifests.ts). */
+  __SB_APP_ICONS__?: Record<string, string>;
+}
 /** Commit sha the site was built from (`GITHUB_SHA`, else `git rev-parse --short HEAD`, else "dev"). */
 declare const __SB_COMMIT__: string;
 /** Branch the site was built from (`GITHUB_REF_NAME`, else `git rev-parse --abbrev-ref HEAD`, else ""). */