@swiftbrowser/web 0.18.3 → 0.21.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);
 }
@@ -318,12 +326,6 @@
   fill: currentColor;
 }
 
-.glyph-wifi .wifi-band {
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-}
-
 .glyph-battery .battery-shell {
   fill: none;
   stroke: currentColor;
@@ -378,6 +380,86 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+   The preview's device (html[data-sb-frame], src/deviceFrame.ts), frame mode
+   only: the iPhone above is the default; an iPad in landscape (an 11-inch
+   iPad's 1180 x 820 points, its status bar the time and date at the leading
+   edge, no island); or no device, the app filling the page under the toolbar
+   (page.css sizes the stage).
+   ------------------------------------------------------------------------- */
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) {
+  --device-screen-width: 1180px;
+  --device-screen-height: 820px;
+  --device-bezel: 20px;
+  --device-radius: 38px;
+  --device-safe-top: 24px;
+  --device-safe-bottom: 20px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .dynamic-island,
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .device::before,
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .device::after {
+  display: none;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-bar {
+  padding: 0 18px 0 22px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-time {
+  min-width: 0;
+  top: 0;
+  font-size: 13px;
+  letter-spacing: 0;
+}
+
+.status-date {
+  display: none;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-date {
+  display: inline;
+  margin-left: 6px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-glyphs {
+  gap: 6px;
+  transform: scale(0.82);
+  transform-origin: right center;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .home-indicator {
+  bottom: 7px;
+  width: 315px;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device:not(.sb-island) {
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  padding: 0;
+  border-radius: 0;
+  background: var(--sb-color-system-background);
+  box-shadow: none;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device-screen {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device::before,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device::after,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .dynamic-island,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .status-bar,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .home-indicator {
+  display: none;
+}
+
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts)
 
@@ -417,6 +499,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 +677,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 {
@@ -728,6 +835,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* Pinned section headers (src/pinnedViews.ts): each scroll view names its
+   scroll timelines, and a header moves along its nearest one, from where it
+   starts to pin (its `animation-range`) by as far as its section lets it
+   (`--sb-pinned-to`), in step with the scroll. */
+.sb-scrollview,
+.sb-list {
+  scroll-timeline: --sb-pin-y block, --sb-pin-x inline;
+}
+
+@keyframes sb-pinned {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: var(--sb-pinned-to);
+  }
+}
+
 .sb-scrollview[data-sb-axes="vertical"] {
   overflow-y: auto;
 }
@@ -1010,6 +1135,31 @@ 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;
+}
+
+/* A section outside a list (a lazy stack's, its header pinned) is a plain
+   container, as in SwiftUI: its rows draw in no card, so nothing clips them,
+   paints under them or draws lines between them (src/layoutDom.ts leaves the
+   slot unsized there). */
+:not(.sb-list-content) > .sb-section > .sb-section-rows {
+  overflow: visible;
+  background: none;
+  border-radius: 0;
+}
+
+:not(.sb-list-content) > .sb-section > .sb-section-rows > :is([data-sb-id], [data-sb-ghost]) {
+  background: none;
+}
+
+:not(.sb-list-content) > .sb-section > .sb-section-rows > *::after {
+  content: none;
+}
+
 .sb-list-content > :not(.sb-section):first-child,
 .sb-list-content > .sb-section + :not(.sb-section) {
   border-top-left-radius: 26px;
@@ -1127,6 +1277,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 +1376,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 +1979,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 +2289,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 +2329,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 +2345,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 +2367,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 +2380,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 +2559,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 +2589,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 +2611,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
@@ -3405,9 +3623,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   opacity: 0.4;
 }
 
+/* The copy lets the pointer through to the destination under it, its own
+   boxes too: a background or a content shape makes a box a target
+   (pointer-events: auto) wherever it is, and the copy keeps those. */
+.sb-drag-preview,
+.sb-drag-preview * {
+  pointer-events: none !important;
+}
+
 .sb-drag-preview {
   z-index: 60;
-  pointer-events: none;
   opacity: 0.9;
   filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
   will-change: transform;
@@ -3656,7 +3881,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 +4123,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 +4156,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 +4439,109 @@ 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);
+}
+
+/* A registered view (src/viewRegistry.ts): the package's own element fills
+   the box; the element's children are a native view's to place. */
+.sb-registered {
+  overflow: hidden;
+}
+.sb-registered > .sb-registered-content {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sb-registered > :not(.sb-registered-content) {
+  display: none;
+}
+.sb-registered-missing {
+  box-sizing: border-box;
+  border: 1px dashed currentColor;
+  font: 11px/1.2 ui-monospace, monospace;
+  opacity: 0.6;
+  padding: 2px;
+}
+
+/* SwiftUI's `.shadow` on a container falls on each view it draws, not on the
+   container as a whole (renderer.ts castShadows): a view that draws itself
+   casts the shadows of the boxes around it, set on them as
+   `--sb-shadow-filter`, and hands none to what is inside it; nor does a
+   `.compositingGroup()`, which casts them itself, as one. */
+:is([data-sb-kind="text"], [data-sb-kind="image"], [data-sb-kind="divider"], [data-sb-kind="color"], [data-sb-kind="shape"],
+  [data-sb-kind="textfield"], [data-sb-kind="toggle"], [data-sb-kind="picker"], [data-sb-kind="gauge"],
+  [data-sb-kind="searchfield"], [data-sb-kind="registered"], [data-sb-kind="chart"], [data-sb-kind="stepper"],
+  [data-sb-kind="slider"], [data-sb-kind="datepicker"], [data-sb-kind="texteditor"], [data-sb-kind="video"],
+  [data-sb-kind="canvas"]) {
+  filter: var(--sb-shadow-filter, none);
+}
+
+:is([data-sb-kind="text"], [data-sb-kind="image"], [data-sb-kind="divider"], [data-sb-kind="color"], [data-sb-kind="shape"],
+  [data-sb-kind="textfield"], [data-sb-kind="toggle"], [data-sb-kind="picker"], [data-sb-kind="gauge"],
+  [data-sb-kind="searchfield"], [data-sb-kind="registered"], [data-sb-kind="chart"], [data-sb-kind="stepper"],
+  [data-sb-kind="slider"], [data-sb-kind="datepicker"], [data-sb-kind="texteditor"], [data-sb-kind="video"],
+  [data-sb-kind="canvas"]) *,
+[data-sb-composite] > * {
+  --sb-shadow-filter: initial;
+}

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)) {
@@ -357,7 +352,7 @@ export const PERSPECTIVE_BASE_PX = 500;
  * `500px / perspective` (a smaller SwiftUI perspective is a flatter
  * projection, as `perspective: 0.5` is in SwiftUI).
  */
-export function effectsCSS(style: Style): EffectsCSS {
+export function effectsCSS(style: Style, options: { shadow?: boolean } = {}): EffectsCSS {
   const out: EffectsCSS = {};
   const transforms: string[] = [];
   if (style.offset) {
@@ -413,11 +408,7 @@ export function effectsCSS(style: Style): EffectsCSS {
     filters.push(`hue-rotate(${round(style.hueRotation)}deg)`);
   }
   if (style.colorInvert === true) filters.push('invert(1)');
-  if (style.shadow) {
-    const { color, radius, x, y } = style.shadow;
-    const css = color ? colorToCSS(color) : 'rgba(0, 0, 0, 0.33)';
-    filters.push(`drop-shadow(${finite(x)}px ${finite(y)}px ${Math.max(0, finite(radius))}px ${css})`);
-  }
+  if (style.shadow && options.shadow !== false) filters.push(`drop-shadow(${shadowCSS(style.shadow)})`);
   if (filters.length) out.filter = filters.join(' ');
   // Phase 7.
   if (style.hidden === true) out.hidden = true;
@@ -425,6 +416,13 @@ export function effectsCSS(style: Style): EffectsCSS {
   return out;
 }
 
+/** A shadow's `x y radius color`, as `drop-shadow()` and `box-shadow` both take it. */
+export function shadowCSS(shadow: NonNullable<Style['shadow']>): string {
+  const { color, radius, x, y } = shadow;
+  const css = color ? colorToCSS(color) : 'rgba(0, 0, 0, 0.33)';
+  return `${finite(x)}px ${finite(y)}px ${Math.max(0, finite(radius))}px ${css}`;
+}
+
 /**
  * Phase 7 `.mask { }` with a ShapeStyle: a CSS `mask-image` whose alpha is
  * the style's. A `linearGradient` / `radialGradient` becomes the matching CSS