@swiftbrowser/web 0.18.2 → 0.19.0

package/src/styles.css

@@ -67,6 +67,9 @@
   --sb-color-tertiary-system-background: #ffffff;
   --sb-color-tertiary-system-grouped-background: #f2f2f7;
   --sb-color-opaque-separator: #c6c6c8;
+  /* The stepper's capsule and the line between its halves. */
+  --sb-stepper-fill: var(--sb-color-tertiary-fill);
+  --sb-stepper-divider: var(--sb-color-opaque-separator);
   --sb-color-system-gray2: #aeaeb2;
   --sb-color-system-gray3: #c7c7cc;
   --sb-color-system-gray4: #d1d1d6;
@@ -115,7 +118,7 @@
   --sb-color-segment-selected: #ffffff;
   /* Menus, floating sheets and alerts are Liquid Glass too: translucent
      over a heavier backdrop blur, with the glass rim. */
-  --sb-color-menu-background: rgba(250, 250, 250, 0.82);
+  --sb-color-menu-background: rgba(250, 250, 250, 0.97);
   --sb-sheet-glass: rgba(255, 255, 255, 0.55);
 }
 
@@ -141,6 +144,11 @@
   --sb-color-tertiary-system-background: #2c2c2e;
   --sb-color-tertiary-system-grouped-background: #2c2c2e;
   --sb-color-opaque-separator: #38383a;
+  /* iOS 26 in dark mode, measured: a fainter capsule than the tertiary fill
+     (rgba(120,120,128,.15) reads (18,18,19) over black) and a divider in the
+     tertiary label color ((83,83,86) over it). */
+  --sb-stepper-fill: rgba(120, 120, 128, 0.15);
+  --sb-stepper-divider: rgba(235, 235, 245, 0.3);
   --sb-color-system-gray2: #636366;
   --sb-color-system-gray3: #48484a;
   --sb-color-system-gray4: #3a3a3c;
@@ -177,7 +185,7 @@
   --sb-color-tabbar-background: rgba(29, 29, 29, 0.94);
   --sb-color-segment-track: rgba(118, 118, 128, 0.24);
   --sb-color-segment-selected: #5a5a5f;
-  --sb-color-menu-background: rgba(37, 37, 37, 0.82);
+  --sb-color-menu-background: rgba(44, 44, 46, 0.97);
   /* The iPhone's dark floating sheet reads 42 over black: dark gray glass. */
   --sb-sheet-glass: rgba(60, 60, 60, 0.7);
 }
@@ -417,6 +425,16 @@ html[data-sb-mode="device"] .device {
 }
 
 html[data-sb-mode="device"] .device::before,
+/* `.statusBarHidden` on the screen showing: the drawn status bar fades, as
+   iOS fades the real one (the safe area stays, as it does under a notch). */
+.status-bar {
+  transition: opacity 0.25s ease;
+}
+
+html[data-sb-status-hidden] .status-bar {
+  opacity: 0;
+}
+
 html[data-sb-mode="device"] .device::after,
 html[data-sb-mode="device"] .dynamic-island,
 html[data-sb-mode="device"] .status-bar,
@@ -585,6 +603,21 @@ html[data-sb-mode="device"] .device-screen {
   user-select: none;
 }
 
+/* Text is not selectable, as on iOS, unless `.textSelection(.enabled)` is
+   on it or above it (the renderer marks that box). Fields and editors are
+   inputs, selectable as ever. */
+.sb-text {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-sb-text-selection] .sb-text,
+.sb-text[data-sb-text-selection] {
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
+}
+
 /* Image(systemName:): a 1em glyph centered in its line-height square; the
    renderer sets font-size from the resolved font. */
 .sb-image {
@@ -1010,6 +1043,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: transparent;
 }
 
+/* A card of clear rows alone paints nothing, so it clips nothing either: a
+   search field drawn in such a row (Notes', Reminders', Files') keeps its own
+   corners instead of the card's larger ones cutting them. */
+.sb-section-rows:not(:has(> [data-sb-id]:not([data-sb-row-background='clear']))) {
+  overflow: visible;
+}
+
 .sb-list-content > :not(.sb-section):first-child,
 .sb-list-content > .sb-section + :not(.sb-section) {
   border-top-left-radius: 26px;
@@ -1127,6 +1167,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-grouped-background);
 }
 
+/* So does a tab with a list as its content: the list is inset from the
+   horizontal safe area (a phone on its side), the tab fills it. */
+.sb-tab:has(> .sb-list:not([data-sb-background="hidden"])) {
+  background: var(--sb-color-grouped-background);
+}
+
 /* Screens below the top one slide partially left and are hidden once the
    transition has finished. */
 .sb-navscreen[data-sb-nav-position="below"] {
@@ -1220,6 +1266,19 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
+/* `.toolbar(.hidden, for: .navigationBar)`: the bar fades where it was (its
+   items are gone from the layout; the capsules play their exit). */
+.sb-navbar {
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s;
+}
+
+.sb-navscreen[data-sb-bar-hidden] > .sb-navbar {
+  opacity: 0;
+  visibility: hidden;
+}
+
 .sb-navbar-trailing:empty {
   pointer-events: none;
 }
@@ -1810,24 +1869,26 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-system-background);
 }
 
-/* `sidebar` (iPadOS; a NavigationSplitView's sidebar list): the rows sit on
-   the list's background, without cards or hairlines, and only a selected
-   row is filled (its rounded fill, below). The engine lays it out like
-   `insetGrouped` with 44pt rows. */
-.sb-list[data-sb-list-style="sidebar"] .sb-section-rows,
-.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > [data-sb-id],
-.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > [data-sb-ghost],
-.sb-list[data-sb-list-style="sidebar"] > .sb-list-content > :not(.sb-section) {
+/* `sidebar` (iPadOS; a NavigationSplitView's sidebar list) in a regular
+   width (layoutDom's `data-sb-list-look`): the rows sit on the list's
+   background, without cards or hairlines, and only a selected row is filled
+   (its rounded fill, below). The engine lays it out like `insetGrouped` with
+   44pt rows. In a compact width the list looks like `insetGrouped`; its
+   sections still fold (above). */
+.sb-list[data-sb-list-look="sidebar"] .sb-section-rows,
+.sb-list[data-sb-list-look="sidebar"] .sb-section-rows > [data-sb-id],
+.sb-list[data-sb-list-look="sidebar"] .sb-section-rows > [data-sb-ghost],
+.sb-list[data-sb-list-look="sidebar"] > .sb-list-content > :not(.sb-section) {
   background: transparent;
   border-radius: 0;
 }
 
-.sb-list[data-sb-list-style="sidebar"] .sb-section-rows > *::after,
-.sb-list[data-sb-list-style="sidebar"] > .sb-list-content > :not(.sb-section)::after {
+.sb-list[data-sb-list-look="sidebar"] .sb-section-rows > *::after,
+.sb-list[data-sb-list-look="sidebar"] > .sb-list-content > :not(.sb-section)::after {
   display: none;
 }
 
-.sb-list[data-sb-list-style="sidebar"] :is(.sb-section-rows, .sb-list-content) > :is(input, textarea) {
+.sb-list[data-sb-list-look="sidebar"] :is(.sb-section-rows, .sb-list-content) > :is(input, textarea) {
   background-image: none;
 }
 
@@ -2118,13 +2179,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   stroke-width: 2.5;
 }
 
-/* The option menu: anchored under (or above) the control by the renderer.
+/* The option menu, as iOS 26 draws one: an inset panel (10px above and
+   below the rows, 12px beside them) with large rounded corners, anchored
+   under (or above) the control by the renderer, over a toolbar button.
    Closed, it fades out where it was (`.sb-picker-menu-exit`) and leaves. */
 .sb-picker-menu,
 .sb-picker-menu-exit {
   position: absolute;
   z-index: 6;
-  border-radius: 13px;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: 26px;
   background: var(--sb-color-menu-background);
   backdrop-filter: blur(40px) saturate(180%);
   -webkit-backdrop-filter: blur(40px) saturate(180%);
@@ -2154,12 +2219,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   appearance: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 13px;
   width: 100%;
   height: 44px;
   margin: 0;
   padding: 0 16px;
   border: 0;
+  border-radius: 14px;
   background: none;
   color: var(--sb-color-primary);
   font: 400 var(--sb-font-size-body) / 1.3 var(--sb-font-family);
@@ -2169,19 +2235,19 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   -webkit-tap-highlight-color: transparent;
 }
 
-:is(.sb-picker-menu-item, .sb-picker-menu-static) + :is(.sb-picker-menu-item, .sb-picker-menu-static) {
-  box-shadow: inset 0 1px 0 var(--sb-color-separator);
-}
-
 .sb-picker-menu-item:active {
   background: var(--sb-color-fill);
 }
 
+/* The checkmark's column (iOS 26): in a menu with checkable rows every item
+   keeps it, empty unless checked, so titles and symbols line up; it sits
+   closer to what follows than a symbol does. */
 .sb-picker-menu-check {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
+  width: 16px;
+  margin-right: -4px;
   flex-shrink: 0;
   visibility: hidden;
 }
@@ -2191,8 +2257,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 .sb-picker-menu-check > svg {
-  width: 1em;
-  height: 1em;
+  width: 0.95em;
+  height: 0.95em;
   stroke: currentColor;
   stroke-width: 2.5;
 }
@@ -2204,6 +2270,47 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   white-space: nowrap;
 }
 
+/* A menu with a check column (iOS 26): the check sits 24px in from the
+   panel's edge, plain titles and section titles start together after it, and
+   a symbol's column starts a little past them, its title further in. */
+.sb-picker-menu[data-sb-checks] .sb-picker-menu-item {
+  padding-left: 12px;
+}
+
+.sb-picker-menu[data-sb-checks] .sb-picker-menu-check {
+  margin-right: -5px;
+}
+
+.sb-picker-menu[data-sb-checks] .sb-picker-menu-symbol {
+  width: 28px;
+  margin: 0 4px 0 2px;
+}
+
+.sb-picker-menu[data-sb-checks] .sb-picker-menu-caption {
+  padding-left: 36px;
+}
+
+/* A title with a subtitle under it, in a taller row. */
+.sb-picker-menu-item[data-sb-subtitled] {
+  height: 58px;
+}
+
+.sb-picker-menu-titles {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sb-picker-menu-subtitle {
+  overflow: hidden;
+  color: var(--sb-color-secondary);
+  font-size: 15px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @keyframes sb-menu-in {
   from {
     opacity: 0;
@@ -2342,15 +2449,15 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   border-radius: 6px;
 }
 
-/* Popover rows for menu items: a tap row shows its symbol trailing; a
-   destructive role is red; a disabled item dims; section headers are 32px
-   captions; `text` items are static 44px rows; groups are split by 8px bands. */
+/* Popover rows for menu items (iOS 26): a tap row's symbol leads its title;
+   a destructive role is red; a disabled item dims; section headers are 30px
+   captions; `text` items are static 44px rows; groups are split by a hairline
+   with 9px above and below, inset from the panel's edges. No lines between items. */
 .sb-picker-menu-symbol {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  margin-left: auto;
+  width: 24px;
   flex-shrink: 0;
 }
 
@@ -2372,10 +2479,10 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-picker-menu-caption {
   display: flex;
   align-items: center;
-  height: 32px;
+  height: 30px;
   padding: 0 16px;
   color: var(--sb-color-secondary);
-  font: 400 13px/16px var(--sb-font-family);
+  font: 400 15px/20px var(--sb-font-family);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2394,8 +2501,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 .sb-picker-menu-separator {
-  height: 8px;
-  background: var(--sb-color-fill);
+  height: 1px;
+  margin: 9px 12px;
+  background: var(--sb-color-separator);
 }
 
 /* Inline picker: a dim label row (when the label is non-empty) and 44px
@@ -3656,7 +3764,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-alert-layer > [hidden],
 .sb-datepicker > [hidden],
 .sb-stepper > [hidden],
-.sb-slider > [hidden] {
+.sb-slider > [hidden],
+.sb-slider-labels > [hidden] {
   display: none;
 }
 
@@ -3897,7 +4006,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: flex;
   box-sizing: border-box;
   border-radius: 16px;
-  background: var(--sb-color-tertiary-fill);
+  background: var(--sb-stepper-fill);
   overflow: hidden;
 }
 
@@ -3930,7 +4039,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   top: 7px;
   bottom: 7px;
   width: 1px;
-  background: var(--sb-color-opaque-separator);
+  background: var(--sb-stepper-divider);
 }
 
 .sb-stepper-button > svg {
@@ -4213,3 +4322,66 @@ svg.sb-path {
 .sb-styled[data-sb-hover] {
   pointer-events: auto;
 }
+
+/* ---------------------------------------------------------------------------
+   `disclosuregroup`: the label (the first child) with a chevron at its
+   trailing edge that turns down as the content opens below it; a button
+   over the label takes the tap (layoutDom places both from the label's
+   frame). `section` headers of `Section(isExpanded:)` get the chevron too,
+   in a sidebar-style list, where the section collapses as on iOS.
+   --------------------------------------------------------------------------- */
+.sb-disclosure-toggle {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-disclosure-chevron {
+  position: absolute;
+  stroke-width: 2.5;
+  color: var(--sb-color-accent);
+  pointer-events: none;
+  transition: transform 0.25s ease-in-out;
+}
+
+.sb-disclosuregroup[data-sb-expanded] > .sb-disclosure-chevron {
+  transform: rotate(90deg);
+}
+
+/* Collapsed: the content (a disclosure group's, a sidebar section's rows) is hidden by the engine, without a frame. */
+.sb-disclosuregroup > .sb-slot > [data-sb-id][hidden],
+.sb-disclosuregroup > .sb-slot > [data-sb-ghost][hidden],
+.sb-section[data-sb-collapsible] .sb-section-rows > [data-sb-id][hidden],
+.sb-section[data-sb-collapsible] .sb-section-rows > [data-sb-ghost][hidden] {
+  display: none;
+}
+
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible] > .sb-section-header,
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible] .sb-sectionheader {
+  cursor: pointer;
+}
+
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible] > .sb-section-header::after,
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible] .sb-sectionheader::after {
+  /* Centered 10 in from the content's trailing edge, over the rows' own chevrons (the engine's 20pt chevron box). */
+  content: '';
+  position: absolute;
+  right: 6.5px;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  margin-top: -5px;
+  border-right: 2px solid var(--sb-color-accent);
+  border-bottom: 2px solid var(--sb-color-accent);
+  transform: rotate(-45deg);
+  transition: transform 0.25s ease-in-out;
+}
+
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible][data-sb-expanded] > .sb-section-header::after,
+.sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible][data-sb-expanded] .sb-sectionheader::after {
+  transform: rotate(45deg);
+}

package/src/styles.ts

@@ -147,13 +147,6 @@ const HIERARCHICAL_TEXT: Record<1 | 2 | 3 | 4, string> = {
  * colors' ratio has it).
  */
 export const HIERARCHY_OPACITY: Record<1 | 2 | 3 | 4, number> = { 1: 1, 2: 0.5, 3: 0.25, 4: 0.18 };
-const HIERARCHICAL_PAINT: Record<1 | 2 | 3 | 4, string> = {
-  1: 'var(--sb-color-fill)',
-  2: 'var(--sb-color-secondary-fill)',
-  3: 'var(--sb-color-tertiary-fill)',
-  4: 'var(--sb-color-quaternary-fill)',
-};
-
 /** Opacity of the system background each material shows over the blurred backdrop. */
 export const MATERIAL_ALPHA: Record<Exclude<MaterialName, 'glass' | 'glassClear'>, number> = {
   ultraThin: 0.55,
@@ -178,7 +171,7 @@ export function materialAlpha(name: MaterialName): number {
  * stand out. A non-color style's top-level `opacity` multiplies the result
  * (each stop of a gradient, the material's alpha) like a semantic color's `a`.
  */
-export function styleToCSS(style: ShapeStyle, role: PaintRole): PaintCSS {
+export function styleToCSS(style: ShapeStyle, _role: PaintRole): PaintCSS {
   if (isColor(style)) {
     const value = colorToCSS(style);
     return { kind: 'color', value, solid: value };
@@ -186,7 +179,9 @@ export function styleToCSS(style: ShapeStyle, role: PaintRole): PaintCSS {
   const opacity = style.opacity;
   if (isHierarchicalStyle(style)) {
     const level = hierarchicalLevel(style.hierarchical);
-    const value = withOpacity(role === 'text' ? HIERARCHICAL_TEXT[level] : HIERARCHICAL_PAINT[level], opacity);
+    // The levels of the foreground, as SwiftUI paints them in any role: a
+    // shape filled or stroked with `.primary` is the label color, not a fill gray.
+    const value = withOpacity(HIERARCHICAL_TEXT[level], opacity);
     return { kind: 'color', value, solid: value };
   }
   if (isLinearGradientStyle(style)) {

package/src/symbols.ts

@@ -294,6 +294,7 @@ import {
   Puzzle,
   QrCode,
   Rabbit,
+  Rainbow,
   Radio,
   RectangleHorizontal,
   RectangleVertical,
@@ -748,6 +749,9 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   bolt: outline(Zap),
   'bolt.fill': solid(Zap),
   sparkles: outline(Sparkles),
+  // Apple Intelligence's mark: the sparkles stand in for it.
+  'apple.intelligence': outline(Sparkles),
+  rainbow: outline(Rainbow),
 
   // Chevrons and arrows
   'chevron.left': outline(ChevronLeft),
@@ -773,6 +777,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'arrow.left.circle': outline(CircleArrowLeft),
   'arrow.right.circle': outline(CircleArrowRight),
   'arrow.up.circle': outline(CircleArrowUp),
+  'arrow.up.circle.fill': knockout(CircleArrowUp),
   'arrow.down.circle': outline(CircleArrowDown),
   'arrow.down.to.line': outline(ArrowDownToLine),
   'arrow.up.to.line': outline(ArrowUpFromLine),
@@ -898,6 +903,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'pause.circle': outline(CirclePause),
   'pause.circle.fill': knockout(CirclePause),
   'stop.circle': outline(CircleStop),
+  'stop.circle.fill': knockout(CircleStop),
   pause: outline(Pause),
   'pause.fill': solid(Pause),
   stop: outline(Square),