@gjsify/adwaita-web 0.30.0 → 0.32.0

package/scss/_progress_bar.scss

@@ -0,0 +1,161 @@
+// _progress_bar.scss — <adw-progress-bar>, the determinate partner to
+// <adw-spinner>.
+//
+// TWO SOURCES, AND WHICH HALF CAME FROM WHICH — the two disagree, so this is not
+// bookkeeping:
+//
+//   GEOMETRY + COLOUR + THE OSD VARIANT come from
+//   `refs/libadwaita/src/stylesheet/widgets/_progress-bar.scss`: an 8px trough
+//   (:6), the 99px `$_progress-radius` (:33-35), the `%scale_trough` /
+//   `%scale_highlight` placeholders it shares with the scale
+//   (`_scale.scss:1-17`), the `> trough.empty > progress { all: unset }` rule
+//   that makes a zero fraction draw NOTHING rather than a 0px sliver (:85), and
+//   the `.osd` variant — a 2px bar with no trough, for under a header bar
+//   (:59-83).
+//
+//   THE INDETERMINATE ANIMATION comes from
+//   `refs/adwaita-web/adwaita-web/scss/_progressbar.scss:25-66`, because
+//   libadwaita has NO CSS equivalent: GTK animates a pulsing block from C
+//   (`gtk_progress_bar_pulse`), so the stylesheet has nothing to copy. Its
+//   keyframes and its `prefers-reduced-motion` fallback are the only parts taken
+//   from there. Its GEOMETRY is NOT: it draws a 6px bar with a 3px radius and
+//   has no trough placeholder, no OSD variant and no text node, so copying its
+//   numbers would put a bar in this package that matches neither source.
+//
+// NOT PORTED, deliberately: `progressbar.vertical` (:10-15) and the four
+// `progress.{left,right,top,bottom}` corner-radius rules (:37-55). Both exist
+// for orientations and trough-splitting `<adw-progress-bar>` does not expose —
+// there is no `orientation` attribute — and a rule nothing can ever select is a
+// rule that rots.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_progress-bar.scss:5-6,17-21,23-25,27-35,59-85
+// Reference: refs/libadwaita/src/stylesheet/_scale.scss:1-17 (%scale_trough, %scale_highlight)
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss:280-286 (the trough colours)
+// Reference: refs/adwaita-web/adwaita-web/scss/_progressbar.scss:25-66 (indeterminate keyframes + reduced-motion fallback ONLY)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+// `.dimmed` / `.numeric`, which the text node @extends exactly as upstream does.
+@use 'labels';
+
+adw-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  // `progressbar.horizontal > trough { min-width: 150px }` (:5) is a WIDGET
+  // minimum in GTK, so it belongs on the element rather than on the trough.
+  min-width: 150px;
+
+  .adw-progress-bar-trough {
+    // %scale_trough (_scale.scss:1-10)
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    height: 8px; // :6 — `&, > progress { min-height: 8px }`
+    border-radius: 99px;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+    transition: background 200ms ease-out;
+
+    @media (prefers-contrast: more) {
+      // $trough_color_hc (_colors.scss:284)
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
+    }
+  }
+
+  .adw-progress-bar-progress {
+    // %scale_highlight (_scale.scss:12-17) + $_progress-radius (:33-35)
+    height: 100%;
+    border-radius: 99px;
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+    transition:
+      width 200ms ease-out,
+      background 200ms ease-out;
+  }
+
+  // `> text { @extend .dimmed; @extend .numeric; font-size: smaller; }` (:17-21)
+  // — literally upstream's three lines, now that `.dimmed` and `.numeric` exist
+  // here as the same utility classes they are there.
+  .adw-progress-bar-text {
+    @extend .dimmed;
+    @extend .numeric;
+
+    font-size: smaller;
+  }
+
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:23-25). This
+  // package defines no `--disabled-opacity`, so `--dim-opacity` stands in — the
+  // same substitution `_switch.scss` documents, not a fourth invented token.
+  &[disabled] {
+    opacity: var(--dim-opacity);
+  }
+
+  // Fill from the far end. GTK spells this `:inverted`; flexbox handles the
+  // writing direction, so nothing here needs an RTL branch.
+  &[inverted] .adw-progress-bar-trough {
+    justify-content: flex-end;
+  }
+
+  // `> trough.empty > progress { all: unset }` (:85) — at fraction 0 the
+  // indicator DISAPPEARS instead of drawing a rounded 0px stub.
+  .adw-progress-bar-trough.empty .adw-progress-bar-progress {
+    all: unset;
+  }
+
+  // The `.osd` variant (:59-83): a hairline bar with no trough at all, the way
+  // it is drawn under a header bar.
+  &[osd] {
+    min-width: 2px;
+
+    .adw-progress-bar-trough {
+      height: 2px;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    .adw-progress-bar-progress {
+      border-radius: 0;
+    }
+  }
+
+  // Indeterminate. The block leaves the flex flow and bounces across the trough;
+  // this is the ONLY part of the widget taken from the vendored web port, since
+  // GTK pulses from C and its stylesheet has no equivalent to copy.
+  &[pulsing] .adw-progress-bar-progress {
+    position: absolute;
+    inset-block: 0;
+    width: 30%;
+    animation: adw-progress-bar-indeterminate 1.5s infinite ease-in-out;
+
+    // `_progressbar.scss:42-49` — with motion suppressed the block stops moving
+    // and fills the trough, so the bar still reads as "busy" and not as "0%".
+    @media (prefers-reduced-motion: reduce) {
+      left: 0;
+      width: 100%;
+      animation: none;
+    }
+  }
+}
+
+// refs/adwaita-web/adwaita-web/scss/_progressbar.scss:53-66, verbatim offsets.
+// `left` rather than `inset-inline-start`: the port animates a physical offset,
+// and a keyframe that flipped with the writing direction would no longer be the
+// animation being cited.
+@keyframes adw-progress-bar-indeterminate {
+  0% {
+    left: -35%;
+    width: 30%;
+  }
+
+  50% {
+    left: 50%;
+    width: 40%;
+  }
+
+  100% {
+    left: 105%;
+    width: 30%;
+  }
+}

package/scss/_reset.scss

@@ -17,20 +17,31 @@
 // inherited typography + a host `* {}` box-sizing reset, which is what this
 // neutralises.
 
-// Every custom element adwaita-web defines. Keep in sync with
-// `src/elements/*` (the `customElements.define('adw-…')` calls).
+// Every custom element adwaita-web defines — one entry per `customElements
+// .define('adw-…')` call under `src/`.
+//
+// DERIVED, NOT REMEMBERED: `scripts/check-adwaita-reset-components.mjs` walks
+// those calls and fails on any tag missing from this list (and on any entry with
+// no call behind it). A hand-kept list is a second copy of the registry, and it
+// had already drifted — `adw-source-view` was defined for its whole life and
+// never listed, so it silently ran without the isolation floor. Nothing noticed,
+// because the only spec touching this file instantiates `adw-switch-row`.
 $adw-components:
   adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response,
   adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content,
   adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row,
   adw-card, adw-carousel, adw-carousel-indicator-dots,
-  adw-carousel-indicator-lines, adw-clamp, adw-combo-row, adw-data-grid,
+  adw-carousel-indicator-lines, adw-checkbox, adw-clamp, adw-combo-row,
+  adw-data-grid,
   adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row,
-  adw-header-bar, adw-inline-view-switcher, adw-menu-button, adw-navigation-page,
+  adw-header-bar, adw-icon, adw-inline-view-switcher, adw-menu-button,
+  adw-navigation-page,
   adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view,
-  adw-password-entry-row, adw-preferences-dialog, adw-preferences-group,
-  adw-preferences-page, adw-sidebar, adw-sidebar-item, adw-sidebar-section,
-  adw-spinner, adw-spin-row, adw-split-button, adw-status-page, adw-switch-row,
+  adw-password-entry-row, adw-popover, adw-preferences-dialog,
+  adw-preferences-group, adw-preferences-page, adw-progress-bar, adw-radio,
+  adw-sidebar, adw-sidebar-item,
+  adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row,
+  adw-split-button, adw-status-page, adw-switch, adw-switch-row,
   adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group,
   adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher,
   adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title,

package/scss/_spinner.scss

@@ -7,11 +7,15 @@
 adw-spinner {
   display: inline-block;
   box-sizing: border-box;
-  width: 24px;
-  height: 24px;
+  // Adw.Spinner measures 16 as BOTH its minimum and its natural size
+  // (adw-spinner.c:78-81), stroked at the documented "2px for 16px". The element
+  // overwrites both from `spinnerGeometry` when it upgrades; these are the values
+  // in force until then — the 24px/3px they replace were not from any source.
+  width: 16px;
+  height: 16px;
   // Neutral arc (currentColor, theme-aware) over a faint track — Adw.Spinner
   // is a neutral indicator, NOT accent-coloured.
-  border: 3px solid rgba(127, 127, 127, 0.25);
+  border: 2px solid rgba(127, 127, 127, 0.25);
   border-top-color: currentColor;
   border-radius: 50%;
   animation: adw-spinner-spin 0.8s linear infinite;

package/scss/_split_button.scss

@@ -111,56 +111,12 @@
     }
   }
 
-  // --- Dropdown menu (popover) ---
-  .adw-split-button-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    min-width: 160px;
-    padding: var(--spacing-xs);
-    border-radius: var(--button-radius);
-    background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
-    color: var(--window-fg-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--separator-color);
-
-    &[hidden] {
-      display: none;
-    }
-  }
-
-  .adw-split-button-menu-item {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 32px;
-    margin: 0;
-    padding: var(--spacing-xs) var(--spacing-s);
-    border: none;
-    border-radius: calc(var(--button-radius) - 2px);
-    background-color: transparent;
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-
-    &:hover {
-      background-color: var(--button-hover-color);
-    }
-
-    &:active {
-      background-color: var(--button-active-color);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--accent-color);
-      outline-offset: -2px;
-    }
-  }
+  // The dropdown menu is `<adw-popover>` (`_popover.scss`), and this was the
+  // WORST of the three hand-rolled surfaces: `--button-radius` (9px) where
+  // libadwaita's popover is 15px, under a two-layer shadow that exists nowhere
+  // in the vendored stylesheet (`popover > contents` has three,
+  // _popovers.scss:18-20), and a `calc(var(--button-radius) - 2px)` (7px) row
+  // where `modelbutton` is 9px. Nothing element-specific was left to keep.
 
   // --- Suggested action — accent-coloured whole control ---
   &.suggested-action {

package/scss/_switch.scss

@@ -0,0 +1,90 @@
+// _switch.scss — the <adw-switch> control: a track, a hidden checkbox and a
+// sliding knob. UNSCOPED, which is the whole point of the partial.
+//
+// WHY IT IS ITS OWN FILE. These rules used to live inside `_switch_row.scss`,
+// nested under `adw-switch-row { … }` — so `.adw-switch` did not exist anywhere
+// else, and the moment a second widget needed a toggle it could not use it.
+// `_expander_row.scss` therefore carried a character-for-character copy of the
+// whole block (same 44×24 box, same hidden input, same 20px knob, same
+// `translateX(20px)`, same focus ring) under a different class name. Two copies
+// of a control is how a hover state gets fixed in one of them.
+//
+// FIDELITY, RECORDED RATHER THAN "FIXED": the 44×24 track with the 20px knob is
+// `refs/adwaita-web/adwaita-web/scss/_switch.scss`'s geometry, NOT libadwaita's.
+// libadwaita draws `switch` as a 3px-padded trough around a 20px slider with
+// `border-radius: 14px` (refs/libadwaita/src/stylesheet/widgets/_switch.scss:3-4,
+// :24-26) — about 26px tall, not 24, and correspondingly narrower. What ships
+// here is the vendored web port's box, unchanged by the extraction; changing the
+// geometry is a visual decision for a separate change, and citing libadwaita for
+// numbers that came from somewhere else would be the misreading the conformance
+// header warns about.
+//
+// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss (the geometry that ships)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss:3-4,20-26 (the geometry that does not, + the disabled treatment)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components; lifted out of
+//   `adw-switch-row {}` so <adw-switch> is usable anywhere.
+
+.adw-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+
+  // The real control: focusable and keyboard-toggleable, but never painted —
+  // the slider below is what the user sees and clicks.
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+}
+
+.adw-switch-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: var(--switch-off-bg);
+  border-radius: 12px;
+  transition: background-color 0.15s ease-out;
+
+  &::before {
+    content: "";
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    left: 2px;
+    bottom: 2px;
+    background-color: var(--switch-knob-bg);
+    border-radius: 50%;
+    transition: transform 0.15s ease-out;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+  }
+}
+
+.adw-switch input:checked + .adw-switch-slider {
+  background-color: var(--accent-bg-color);
+
+  &::before {
+    transform: translateX(20px);
+  }
+}
+
+.adw-switch input:focus-visible + .adw-switch-slider {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+// libadwaita dims the whole widget (`filter: Opacity(var(--disabled-opacity))`,
+// _switch.scss:20-22). This package has no `--disabled-opacity` token, so the
+// existing `--dim-opacity` stands in rather than a fourth invented colour.
+.adw-switch.disabled {
+  opacity: var(--dim-opacity);
+
+  .adw-switch-slider {
+    cursor: not-allowed;
+  }
+}

package/scss/_switch_row.scss

@@ -1,7 +1,11 @@
 // _switch_row.scss — adw-switch-row styling.
+//
+// The TOGGLE is not here: it is `<adw-switch>` and `scss/_switch.scss`. It used
+// to be, nested under `adw-switch-row {`, which is exactly why `.adw-switch` was
+// unreachable from anywhere else and `_expander_row.scss` grew a
+// character-for-character copy of it.
+//
 // Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss
-// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss
-// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
@@ -11,54 +15,4 @@ adw-switch-row {
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
   }
-
-  .adw-switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
-    flex-shrink: 0;
-
-    input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-      position: absolute;
-    }
-  }
-
-  .adw-switch-slider {
-    position: absolute;
-    cursor: pointer;
-    inset: 0;
-    background-color: var(--switch-off-bg);
-    border-radius: 12px;
-    transition: background-color 0.15s ease-out;
-
-    &::before {
-      content: "";
-      position: absolute;
-      height: 20px;
-      width: 20px;
-      left: 2px;
-      bottom: 2px;
-      background-color: var(--switch-knob-bg);
-      border-radius: 50%;
-      transition: transform 0.15s ease-out;
-      box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
-    }
-  }
-
-  .adw-switch input:checked + .adw-switch-slider {
-    background-color: var(--accent-bg-color);
-
-    &::before {
-      transform: translateX(20px);
-    }
-  }
-
-  .adw-switch input:focus-visible + .adw-switch-slider {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
 }

package/scss/_tab_view.scss

@@ -127,7 +127,67 @@ adw-tab-view {
     min-width: 0;
   }
 
+  // --- Icon + indicator slots (AdwTab update_icons) ---
+  // Both are mask-image spans carrying `adw-icon adw-icon--<name>`; the element
+  // toggles `hidden` from `tabIconState`, whose rules decide which of the two
+  // shows — on a pinned tab the indicator REPLACES the icon.
+  // Reference: refs/libadwaita/src/adw-tab.c (update_icons, :171-198)
+  .adw-tab-icon,
+  .adw-tab-indicator {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // `AdwTabPage:loading` swaps the icon image for a spinner in the same slot
+  // (adw-tab.c:178-183) — the arc geometry and the keyframes are adw-spinner's,
+  // not a second copy of them.
+  .adw-tab-icon.loading {
+    background: none;
+    mask-image: none;
+    border: 2px solid rgba(127, 127, 127, 0.25);
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: adw-spinner-spin 0.8s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  // A pinned tab is a single-glyph chip: libadwaita hides both the title and the
+  // close button at construction (refs/libadwaita/src/adw-tab.c:645-650). The
+  // close button is gated in JS by `tabCloseVisible`, which carries the same rule.
+  .adw-tab.pinned {
+    padding: 0 var(--spacing-xs);
+
+    .adw-tab-title {
+      display: none;
+    }
+  }
+
+  // `AdwTabPage:needs-attention` — the accent underline libadwaita animates in
+  // (refs/libadwaita/src/adw-tab.c update_needs_attention).
+  .adw-tab.needs-attention::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    width: 12px;
+    height: 2px;
+    transform: translateX(-50%);
+    border-radius: 1px;
+    background-color: var(--accent-bg-color);
+  }
+
   // --- Close affordance (CSS-drawn "×", no symbolic icon ships) ---
+  // Presence is decided in JS by `tabCloseVisible` — `(hovering && fullyVisible)
+  // || selected || dragging`, and never on a pinned tab (adw-tab.c:124, :645-650)
+  // — which is why the `[hidden]` rule below is load-bearing rather than cosmetic.
   .adw-tab-close {
     box-sizing: border-box;
     flex-shrink: 0;
@@ -146,6 +206,10 @@ adw-tab-view {
       background-color 150ms ease-in-out,
       opacity 150ms ease-in-out;
 
+    &[hidden] {
+      display: none;
+    }
+
     &:hover {
       opacity: 1;
       background-color: var(--button-hover-color);

package/scss/_theme.scss

@@ -31,6 +31,16 @@
   --entry-border-hover-color: rgba(255, 255, 255, 0.26);
   --destructive-bg-color: #c01c28;
   --destructive-fg-color: #ffffff;
+  // Semantic states — libadwaita's dark overrides (_colors.scss:83-92): the
+  // backgrounds darken (green_5 / a hand-picked amber / red_4) and the
+  // standalone colour LIGHTENS instead of darkening, so it stays readable on a
+  // dark surface. Upstream does not re-declare the `*-fg-color`s here either.
+  --success-bg-color: #26a269;
+  --success-color: oklab(from var(--success-bg-color) max(l, 0.85) a b);
+  --warning-bg-color: #cd9309;
+  --warning-color: oklab(from var(--warning-bg-color) max(l, 0.85) a b);
+  --error-bg-color: #c01c28;
+  --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
   --switch-off-bg: rgba(255, 255, 255, 0.2);
   --switch-knob-bg: #deddda;
   // The active toggle is a raised near-white chip in both themes, so its text

package/scss/_toolbar_view.scss

@@ -11,6 +11,8 @@ adw-toolbar-view {
   min-height: 0;
   min-width: 0;
   flex: 1 1 auto;
+  // Positioning context for the extend-content-to-*-edge overlays below.
+  position: relative;
 
   .adw-toolbar-view-top,
   .adw-toolbar-view-bottom {
@@ -28,4 +30,76 @@ adw-toolbar-view {
     flex-direction: column;
     background-color: var(--window-bg-color);
   }
+
+  // top-bar-style / bottom-bar-style: an opaque background plus a persistent
+  // shadow, which `.border` swaps for a hairline (adw-toolbar-view.c:1011-1024,
+  // _toolbars.scss `> .top-bar.raised`).
+  .adw-toolbar-view-top.raised,
+  .adw-toolbar-view-bottom.raised {
+    background-color: var(--headerbar-bg-color);
+    color: var(--headerbar-fg-color);
+  }
+
+  .adw-toolbar-view-top.raised {
+    box-shadow:
+      0 1px var(--headerbar-shade-color),
+      0 2px 4px var(--headerbar-shade-color);
+
+    &.border {
+      box-shadow: 0 1px var(--headerbar-shade-color);
+    }
+  }
+
+  .adw-toolbar-view-bottom.raised {
+    box-shadow:
+      0 -1px var(--headerbar-shade-color),
+      0 -2px 4px var(--headerbar-shade-color);
+
+    &.border {
+      box-shadow: 0 -1px var(--headerbar-shade-color);
+    }
+  }
+
+  // The scroll fade under a FLAT bar. libadwaita paints it on the scrolled
+  // window; the browser equivalent is a non-interactive gradient stuck to the
+  // scrollport edge, taking no space of its own — a NEGATIVE margin equal to its
+  // height (_toolbars.scss :342-343, _scrolling.scss :150-157).
+  &.undershoot-top .adw-toolbar-view-content::before,
+  &.undershoot-bottom .adw-toolbar-view-content::after {
+    content: '';
+    position: sticky;
+    height: 6px;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  &.undershoot-top .adw-toolbar-view-content::before {
+    top: 0;
+    margin-bottom: -6px;
+    background: linear-gradient(to bottom, var(--headerbar-shade-color), transparent);
+  }
+
+  &.undershoot-bottom .adw-toolbar-view-content::after {
+    bottom: 0;
+    margin-top: -6px;
+    background: linear-gradient(to top, var(--headerbar-shade-color), transparent);
+  }
+}
+
+// extend-content-to-*-edge: the content spans the full height and the bar is
+// drawn OVER it, which is `content_offset = 0` / `content_height = height` in
+// adw_toolbar_view_size_allocate (adw-toolbar-view.c:390-397).
+adw-toolbar-view[extend-content-to-top-edge] > .adw-toolbar-view-top,
+adw-toolbar-view[extend-content-to-bottom-edge] > .adw-toolbar-view-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+adw-toolbar-view[extend-content-to-top-edge] > .adw-toolbar-view-top {
+  top: 0;
+}
+
+adw-toolbar-view[extend-content-to-bottom-edge] > .adw-toolbar-view-bottom {
+  bottom: 0;
 }

package/scss/_variables.scss

@@ -60,6 +60,23 @@
   --destructive-bg-color: #e01b24;
   --destructive-fg-color: #ffffff;
 
+  // Semantic states. `.error` / `.warning` / `.success` (see _labels.scss) do
+  // not just recolour text — they REBIND the three accent tokens to these, so
+  // anything accent-coloured inside them follows. Values are libadwaita's
+  // (_colors.scss:16-29): red_3 / yellow_5 / green_4 from _palette.scss:106-121.
+  // The standalone `*-color` is upstream's own relative-colour derivation of the
+  // background, kept as an expression rather than resolved to a hex so it tracks
+  // a re-themed `*-bg-color`.
+  --success-bg-color: #2ec27e;
+  --success-fg-color: #ffffff;
+  --success-color: oklab(from var(--success-bg-color) min(l, 0.5) a b);
+  --warning-bg-color: #e5a50a;
+  --warning-fg-color: rgba(0, 0, 0, 0.8);
+  --warning-color: oklab(from var(--warning-bg-color) min(l, 0.5) a b);
+  --error-bg-color: #e01b24;
+  --error-fg-color: #ffffff;
+  --error-color: oklab(from var(--error-bg-color) min(l, 0.5) a b);
+
   // Switch
   --switch-off-bg: rgba(0, 0, 0, 0.2);
   --switch-knob-bg: #ffffff;
@@ -82,4 +99,21 @@
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
   --dim-opacity: 0.55;
+
+  // Document + monospace families, behind `.document` / `.monospace`
+  // (_labels.scss:75-84). In GTK these four are written into `:root` at RUNTIME
+  // by AdwStyleManager from the desktop's font settings
+  // (adw-style-manager.c:169-218), defaulting to `Sans 10` / `Monospace 10`
+  // (:50-56). A browser has no style manager, so they are ordinary tokens here
+  // — same names, so re-theming goes through the documented contract. The
+  // monospace stack is the one `_data_grid.scss` used to inline; it has ONE home
+  // now, and Adwaita Mono heads it because `@gjsify/adwaita-fonts` ships it.
+  // `'Cantarell'` is dropped from that stack on the way here: Cantarell is
+  // GNOME's PROPORTIONAL UI font, so a monospace fallback chain that reaches it
+  // second lands on a font whose figures do not line up — the exact property
+  // `.monospace` exists for.
+  --document-font-family: var(--font-family);
+  --document-font-size: var(--font-size-base);
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-size: var(--font-size-base);
 }