@swiftbrowser/web 0.26.2 → 0.26.4

package/src/styles.css

@@ -434,6 +434,68 @@ html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .home-indicator {
   width: 315px;
 }
 
+/* A Mac window (docs/notes/macos.md): 1024 x 700 points with a 28-point
+   title bar the page draws over the app's top (the safe area, as the
+   iPhone's status bar is), its traffic lights at the leading edge; no
+   island, side buttons, status glyphs or home indicator. The window's title
+   is the app's to draw (its navigation title, from the Mac idiom). */
+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;
+  --device-safe-bottom: 0px;
+}
+
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device:not(.sb-island) {
+  background: none;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.18),
+    0 22px 70px 4px rgba(0, 0, 0, 0.45);
+}
+
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device::before,
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .device::after,
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .dynamic-island,
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .status-time,
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .status-glyphs,
+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
+   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;
+  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);
+}
+
+html[data-sb-frame="mac"]:not([data-sb-mode="device"]) .status-bar::before {
+  content: "";
+  width: 52px;
+  height: 12px;
+  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);
+}
+
 html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device:not(.sb-island) {
   flex: 1 1 auto;
   align-self: stretch;
@@ -3882,7 +3944,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;
 }
 
@@ -4469,6 +4532,35 @@ svg.sb-path {
   transform: rotate(90deg);
 }
 
+/* In a list a disclosure group is an outline (src/layout/engine.ts
+   `outlineRows`): its label and its content are rows of the card, each
+   with its line below it while a shown row follows, and a button or link
+   among them fills while pressed, as the card's own rows do. The group
+   element, a row of the card itself, keeps the card's paint and the line
+   under its last row. */
+.sb-disclosuregroup[data-sb-outline] > .sb-slot > [data-sb-id]:has(~ [data-sb-id]:not([hidden]))::after {
+  content: "";
+  position: absolute;
+  left: var(--sb-separator-leading, 16px);
+  right: 16px;
+  bottom: 0;
+  height: 1px;
+  background: var(--sb-color-row-separator);
+  pointer-events: none;
+}
+
+.sb-disclosuregroup[data-sb-outline] > .sb-slot > .sb-button {
+  border-radius: 0;
+  font-size: var(--sb-font-size-body);
+}
+
+.sb-disclosuregroup[data-sb-outline] > .sb-slot > .sb-button:active,
+.sb-disclosuregroup[data-sb-outline] > .sb-slot > .sb-navlink:active,
+.sb-disclosuregroup[data-sb-outline] > .sb-slot > [data-sb-row-pressed] {
+  opacity: 1;
+  background: var(--sb-color-fill);
+}
+
 /* 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],
@@ -4545,3 +4637,758 @@ svg.sb-path {
 [data-sb-composite] > * {
   --sb-shadow-filter: initial;
 }
+
+/* ---------------------------------------------------------------------------
+   The Mac idiom (docs/notes/macos.md): the renderer draws macOS when the
+   platform is `macos` (`html[data-sb-platform]`, set by the renderer's
+   environment and pre-set by the page from the device picker's Mac window).
+   The layout engine's MAC_* metrics place everything; this restyles what the
+   iOS idiom draws as Liquid Glass. First pass, to be measured against the
+   real app (the Mac fidelity harness, stage 3).
+   --------------------------------------------------------------------------- */
+
+/* Measured in the Mac app (macOS 15, scripts/mac-screenshots.sh): the
+   window's title bar is white (#1e1e1e dark) with a #cfcfcf rule under it,
+   its content the window background #f6f6f6 (#282828), a list white
+   (#1e1e1e) with #e6e6e6 (#343434) separators and a rule the bar's color
+   under a header; secondary text is half the label color. */
+html[data-sb-platform="macos"] .device[data-theme="light"] {
+  /* The window's title bar and toolbar, its controls, the separators. */
+  --sb-mac-bar: #ffffff;
+  --sb-mac-separator: rgba(0, 0, 0, 0.19);
+  --sb-mac-control: #ffffff;
+  --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: 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-sheet: #ececec;
+  /* The window background, under content; a list's background and its rows. */
+  --sb-color-system-background: #f6f6f6;
+  --sb-color-grouped-background: #ffffff;
+  --sb-color-grouped-cell: #ffffff;
+  --sb-color-row-separator: rgba(0, 0, 0, 0.1);
+  --sb-color-secondary: rgba(0, 0, 0, 0.5);
+}
+
+html[data-sb-platform="macos"] .device[data-theme="dark"] {
+  --sb-mac-bar: #1e1e1e;
+  --sb-mac-separator: rgba(255, 255, 255, 0.2);
+  --sb-mac-control: #5c5c5c;
+  --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-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). */
+html[data-sb-platform="macos"] .sb-navbar {
+  background: var(--sb-mac-bar);
+}
+
+/* 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,
+html[data-sb-platform="macos"] .sb-bar-glass {
+  display: 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). */
+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;
+  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 > svg {
+  width: 14px;
+  height: 14px;
+  margin-left: -1px;
+  color: var(--sb-color-secondary);
+}
+
+/* A bar's text button is a bordered 28 button at its slot (the engine's
+   `bordered` rect, `data-sb-bordered="inset"` as a list row's), 6 beside
+   its label; its label the primary color. */
+html[data-sb-platform="macos"] .sb-navbar .sb-button[data-sb-bordered="inset"] {
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+html[data-sb-platform="macos"] .sb-navbar-back:active,
+html[data-sb-platform="macos"] .sb-navbar-more:active {
+  opacity: 1;
+  background: var(--sb-color-fill);
+}
+
+/* The title: the headline (13 semibold) centered in a plain title bar; in a
+   unified one the window title, leading-aligned after the back button and
+   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);
+}
+
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-unified] > .sb-navbar > .sb-navbar-title {
+  text-align: start;
+  font-size: var(--sb-ts-title3-size, 15px);
+}
+
+/* `.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;
+}
+
+/* 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. */
+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);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-sb-platform="macos"] .sb-tabbar-item {
+  border-radius: 5px;
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-tabbar-item[aria-selected="true"] {
+  color: var(--sb-color-primary);
+  background: var(--sb-mac-tab-selected);
+  box-shadow: none;
+}
+
+html[data-sb-platform="macos"] .sb-tabbar-icon,
+html[data-sb-platform="macos"] .sb-tabbar-badge {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-tabbar-title {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+/* 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. */
+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);
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+html[data-sb-platform="macos"] .sb-button[data-sb-style="borderedProminent"] {
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+}
+
+/* A disabled push button is faded, not grayed; a plain button's label is
+   the secondary color (measured in the Mac app). */
+html[data-sb-platform="macos"] [data-sb-disabled] > .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"], [data-sb-bordered]) {
+  background: var(--sb-mac-control);
+  color: var(--sb-color-primary);
+  opacity: 0.5;
+}
+
+html[data-sb-platform="macos"] [data-sb-disabled] > .sb-button[data-sb-style="borderedProminent"] {
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+}
+
+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. */
+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);
+}
+
+html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment {
+  font: 400 13px/16px var(--sb-font-family);
+  letter-spacing: 0;
+}
+
+html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"]:not([data-sb-bar]) > .sb-segment::before {
+  inset: 1px;
+  border-radius: 4px;
+}
+
+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);
+}
+
+html[data-sb-platform="macos"] .sb-picker[data-sb-style="segmented"] > .sb-picker-label {
+  color: var(--sb-color-primary);
+}
+
+/* A toggle outside a list row is a checkbox (the engine's `checkbox` rect:
+   14 square before the label), the accent with a check mark while on. */
+html[data-sb-platform="macos"] .sb-toggle[data-sb-checkbox] > .sb-switch {
+  border-radius: 3px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+}
+
+html[data-sb-platform="macos"] .sb-toggle[data-sb-checkbox] > .sb-switch[aria-checked="true"] {
+  background: var(--sb-tint, var(--sb-color-accent));
+}
+
+html[data-sb-platform="macos"] .sb-toggle[data-sb-checkbox] > .sb-switch > .sb-switch-knob {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-toggle[data-sb-checkbox] > .sb-switch[aria-checked="true"]::after {
+  content: "";
+  position: absolute;
+  left: 4.5px;
+  top: 1.5px;
+  width: 3.5px;
+  height: 7.5px;
+  border: solid #ffffff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* A toggle in a list row (a grouped form's) is the small switch, 26 × 15. */
+html[data-sb-platform="macos"] .sb-list .sb-toggle:not([data-sb-checkbox]):not([data-sb-toggle-style="button"]) > .sb-switch > .sb-switch-knob {
+  top: 1px;
+  left: 1px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+html[data-sb-platform="macos"] .sb-list .sb-toggle:not([data-sb-checkbox]):not([data-sb-toggle-style="button"]) > .sb-switch[aria-checked="true"] > .sb-switch-knob {
+  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. */
+html[data-sb-platform="macos"] .sb-picker[data-sb-popup] > .sb-picker-value {
+  box-sizing: border-box;
+  padding: 0 3px 0 8px;
+  gap: 6px;
+  border-radius: 5px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+  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;
+}
+
+/* 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. */
+html[data-sb-platform="macos"] .sb-section-rows,
+html[data-sb-platform="macos"] .sb-list-content > :not(.sb-section) {
+  border-radius: 0;
+  background: none;
+}
+
+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-list-content > :not(.sb-section):has(+ .sb-section)::after {
+  content: "";
+  position: absolute;
+  left: var(--sb-separator-leading, 16px);
+  right: 16px;
+  bottom: 0;
+  height: 1px;
+  background: var(--sb-color-row-separator);
+  pointer-events: none;
+}
+
+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;
+  height: 1px;
+  background: var(--sb-mac-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 (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. */
+html[data-sb-platform="macos"] .sb-button[data-sb-style][data-sb-bordered="inset"] {
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+
+html[data-sb-platform="macos"] .sb-button[data-sb-style][data-sb-bordered="inset"]::before {
+  content: "";
+  position: absolute;
+  left: var(--sb-bordered-left);
+  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);
+  pointer-events: none;
+}
+
+html[data-sb-platform="macos"] .sb-button[data-sb-bordered][data-sb-role="destructive"],
+html[data-sb-platform="macos"] .sb-button[data-sb-style="bordered"][data-sb-role="destructive"] {
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-navlink[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-style] > .sb-list-content > .sb-navlink[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-style] .sb-section-rows > .sb-navlink[data-sb-selected] {
+  border-radius: 5px;
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+  --sb-button-color: #ffffff;
+}
+
+/* A selected `listrow` (a sidebar's rows select as rows) is the accent too;
+   the link in it stays clear, as above. */
+html[data-sb-platform="macos"] .sb-listrow[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-style] > .sb-list-content > .sb-listrow[data-sb-selected],
+html[data-sb-platform="macos"] .sb-list[data-sb-list-style] .sb-section-rows > .sb-listrow[data-sb-selected] {
+  border-radius: 5px;
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+  --sb-button-color: #ffffff;
+}
+
+html[data-sb-platform="macos"] .sb-listrow .sb-navlink[data-sb-selected] {
+  background: transparent;
+}
+
+/* A search field, in the title bar (the engine's `searchBar`) or on its
+   own (a list row's, 22 tall): a bordered field with the magnifier, no glass. */
+html[data-sb-platform="macos"] .sb-searchfield {
+  gap: 4px;
+  padding: 0 6px 0 5px;
+  border-radius: 6px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-sb-platform="macos"] .sb-searchfield::after {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-searchfield > svg {
+  width: 13px;
+  height: 13px;
+  color: var(--sb-color-secondary);
+}
+
+html[data-sb-platform="macos"] .sb-searchfield > .sb-searchfield-input {
+  font-size: 13px;
+}
+
+html[data-sb-platform="macos"] .sb-searchfield > .sb-searchfield-input::placeholder {
+  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`). */
+html[data-sb-platform="macos"] .sb-sheet[data-sb-form] > .sb-sheet-card {
+  --sb-sheet-offscreen: -100vh;
+  border-radius: 10px;
+  background: var(--sb-mac-sheet);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.25),
+    0 12px 40px rgba(0, 0, 0, 0.35);
+}
+
+html[data-sb-platform="macos"] .sb-sheet[data-sb-form][data-sb-actions] > .sb-sheet-card::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 60px;
+  box-shadow: inset 0 1px 0 var(--sb-color-row-separator);
+  pointer-events: none;
+}
+
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-sheet-bar] > .sb-navbar > .sb-navbar-title {
+  text-align: start;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+/* The sheet's actions are push buttons (the engine places them in the bottom bar). */
+html[data-sb-platform="macos"] .sb-navscreen[data-sb-sheet-bar] > .sb-toolbar .sb-button[data-sb-bordered] {
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+/* Text fields: 22 tall and bordered in every style but `plain`, the control
+   color with a hairline, a 5 radius, the text 6 in. */
+html[data-sb-platform="macos"] .sb-textfield:not([data-sb-style="plain"]) {
+  box-sizing: border-box;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 5px;
+  background: var(--sb-mac-field);
+  box-shadow: var(--sb-mac-field-shadow);
+  font-size: 13px;
+}
+
+html[data-sb-platform="macos"] .sb-textfield:not([data-sb-style="plain"]):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);
+}
+
+/* A text editor draws its own white (the Mac's text background), whatever is behind it. */
+html[data-sb-platform="macos"] .sb-texteditor {
+  background: var(--sb-color-grouped-cell);
+}
+
+/* A stepper's control is the Mac's pair of arrows (the engine's `arrows`
+   rect, 13 × 22): up over down, in one bordered control. */
+html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control {
+  flex-direction: column-reverse;
+  border-radius: 5px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+}
+
+html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control > .sb-stepper-button {
+  min-height: 0;
+  font-size: 0;
+  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;
+  height: 0;
+  border: 3px solid transparent;
+  border-bottom: 4px solid var(--sb-color-primary);
+  border-top: 0;
+  transform: translateY(-1px);
+}
+
+html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control > .sb-stepper-button:first-child::after {
+  border-bottom: 0;
+  border-top: 4px solid var(--sb-color-primary);
+  transform: translateY(1px);
+}
+
+html[data-sb-platform="macos"] .sb-stepper[data-sb-arrows] > .sb-stepper-control > .sb-stepper-button + .sb-stepper-button::before {
+  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. */
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-card {
+  border-radius: 10px;
+  background: var(--sb-mac-bar);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.2),
+    0 12px 40px rgba(0, 0, 0, 0.3);
+  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);
+}
+
+/* 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);
+  box-shadow: none;
+  color: var(--sb-color-primary);
+  font-size: 13px;
+}
+
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-ok {
+  background: var(--sb-tint, var(--sb-color-accent));
+  color: #ffffff;
+}
+
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-buttons > .sb-button[data-sb-role="destructive"] {
+  color: var(--sb-color-red);
+}
+
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-buttons > .sb-button:active,
+html[data-sb-platform="macos"] .sb-alert[data-sb-panel] .sb-alert-ok:active {
+  filter: brightness(0.92);
+}
+
+/* A slider's knob is the Mac's round one (the engine's `knob` rect, 20) on
+   a 4 track. */
+html[data-sb-platform="macos"] .sb-slider[data-sb-knob] > .sb-slider-track,
+html[data-sb-platform="macos"] .sb-slider[data-sb-knob] > .sb-slider-fill {
+  border-radius: 2px;
+}
+
+html[data-sb-platform="macos"] .sb-slider[data-sb-knob] > .sb-slider-thumb {
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* A compact date picker's date and time are bordered fields (the engine's
+   `fields` rect spans them), 22 tall. */
+html[data-sb-platform="macos"] .sb-datepicker[data-sb-fields] > .sb-datepicker-capsule,
+html[data-sb-platform="macos"] .sb-datepicker[data-sb-fields] > .sb-datepicker-date,
+html[data-sb-platform="macos"] .sb-datepicker[data-sb-fields] > .sb-datepicker-time {
+  border-radius: 5px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+  font-size: 13px;
+}
+
+/* A menu outside a bar and a list row is a pull-down button (the engine's
+   `pulldown` rect): a push button around the label with the chevrons on an
+   accent square at its trailing end. */
+html[data-sb-platform="macos"] .sb-menu[data-sb-pulldown] {
+  position: relative;
+  border-radius: 6px;
+  background: var(--sb-mac-control);
+  box-shadow: var(--sb-mac-control-shadow);
+  color: var(--sb-color-primary);
+}
+
+html[data-sb-platform="macos"] .sb-menu[data-sb-pulldown]:active {
+  opacity: 1;
+  filter: brightness(0.92);
+}
+
+html[data-sb-platform="macos"] .sb-menu[data-sb-pulldown]::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  border-radius: 4px;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
+    var(--sb-tint, var(--sb-color-accent));
+  pointer-events: none;
+}
+
+/* The sidebar material: a sidebar list sits on the Mac's sidebar gray, the
+   window's chrome color (lighter than the grouped background). */
+html[data-sb-platform="macos"] .device[data-theme="light"] {
+  --sb-mac-sidebar: #e8e8e8;
+}
+
+html[data-sb-platform="macos"] .device[data-theme="dark"] {
+  --sb-mac-sidebar: #2b2b2b;
+}
+
+html[data-sb-platform="macos"] .sb-list[data-sb-list-look="sidebar"] {
+  background: var(--sb-mac-sidebar);
+  --sb-icon-knockout: var(--sb-mac-sidebar);
+}
+