@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_scale.scss

@@ -0,0 +1,298 @@
+// _scale.scss — <gtk-scale>: the trough, its highlighted part, the fill level's second
+// bar, the knob and the value text.
+//
+// WHAT CAME FROM WHERE, and the one thing that did not come from anywhere:
+//
+//   The trough and highlight are libadwaita's `%scale_trough` / `%scale_highlight`
+//   (_scale.scss:1-17) with GTK's own `GTK_CSS` colour values inlined —
+//   `_colors.scss:280-289` gives `$trough_color` 15% of `currentColor`,
+//   `$trough_color_hc` 30%, `$trough_hover_color` 20%, `$trough_hover_color_hc` 40%, and
+//   `$slider_color` as `color-mix (white 80%, var (--view-bg-color))`, the same two the
+//   package's `_progress_bar.scss` already inlines for the same reason.
+//
+//   The ONE NUMBER WITH NO CITABLE LINE is the trough's 4px thickness: `%scale_trough`
+//   sets only the radius and the colour, because in GTK that thickness comes from the
+//   TOOLKIT's Adwaita theme — `gtk-adwaita-theme`, a repository beside `refs/gtk`, not
+//   inside it. It is a thickness; nothing else in this partial or in the element's
+//   behaviour depends on it.
+//
+//   The VALUE'S PLACE comes from GTK's own `gtk_scale_allocate` (gtkscale.c:373-421),
+//   which is not a stylesheet at all: the four `value-pos` cases pick an edge of the
+//   widget for the value, and `gtk_scale_get_range_border` (:1239-1272) keeps the trough
+//   out of it. The container axis below is that switch.
+//
+// NOT PORTED, each because nothing here can select it — the same reasoning
+// `_progress_bar.scss` records for `progressbar.vertical`:
+//   · the value's placement ON THE KNOB. `gtk_scale_allocate_value` (gtkscale.c:388-425)
+//     centres it on the slider for `top`/`bottom` and on the trough for `left`/`right`, which
+//     a flow layout cannot reach for either — `align-self: center` is the cross-axis centre,
+//     the one half that needs no knowledge of the value's own width. It shows only once the
+//     value is off the middle of its range.
+//   · the `> marks` blocks and `.marks-before` / `.marks-after` (:98-111, :114-124,
+//     :152-170, :212-226). Those style classes are added ONLY by `gtk_scale_add_mark()` /
+//     `clear_marks()` (gtkscale.c:1638, :1696-1721), which have been deprecated since
+//     GTK 4.10; a scale without marks has no marks node and no class.
+//   · the `.fine-tune` blocks (:137-150, :197-210). `.fine-tune` is a `GtkRange` style
+//     class it adds for the duration of a Shift-held drag (gtkrange.c:1799-1801), and
+//     `<gtk-scale>`'s pointer handling does not run that zoom state.
+//   · the `.color` variant (:229-250), which `Gtk.ScaleButton` adds to ITSELF; the
+//     standalone `Gtk.Scale` node never carries it.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_scale.scss:1-251
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss:280-289
+// Reference: refs/gtk/gtk/gtkscale.c (gtk_scale_allocate_value, update_value_position,
+//   gtk_scale_get_range_border), refs/gtk/gtk/gtkrange.c (clamp_dimensions)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// `> value` @extends `.dimmed` and `.numeric` exactly as the scale's value node does.
+@use 'labels';
+
+gtk-scale {
+  display: flex;
+  flex: 1;
+  min-width: 10px;
+  min-height: 10px;
+  padding: 12px;
+
+  // THE CONTAINER AXIS FOLLOWS `value-pos`, NOT THE ORIENTATION. GTK's
+  // `gtk_scale_allocate` (gtkscale.c:373-421) puts the value BESIDE the trough for
+  // `left`/`right` and ABOVE or BELOW it for `top`/`bottom` — for BOTH orientations,
+  // because those four are the cross-axis ends of a horizontal scale and the main-axis
+  // ends of a vertical one. Measured, not read off the switch: a 628px horizontal scale
+  // with `draw-value` and `value-pos: top` allocates the value at `y=0` above a trough
+  // that starts at `y=29` (`gtk_scale_get_range_border`, gtkscale.c:1239-1272), and the
+  // same scale with `left` allocates the value at `x=0`, `y=0`, ON THE TROUGH'S LINE.
+  //
+  // The value node is the scale's FIRST child upstream — `gtk_scale_set_draw_value`
+  // (gtkscale.c:1097-1101) does `gtk_widget_insert_after (…, GTK_WIDGET (scale), NULL)`,
+  // ahead of the trough `gtk_range_init` appended — and `update_value_position`
+  // (gtkscale.c:1042-1073) only ever puts a position class on it. Here the DOM runs
+  // trough-then-value, so the two positions that mean "ahead of the trough in the flow"
+  // upstream — `top` and `left` — are the ones that need the axis REVERSED. The four HOST
+  // classes carry the same four names, so one `value-pos` attribute decides the axis as well
+  // as the value node's own margins.
+  &.value-top,
+  &.value-bottom {
+    flex-direction: column;
+    align-items: stretch;
+
+    // GTK centres the value on the KNOB for these two
+    // (`value_alloc.x = slider_center_x - value_alloc.width / 2`, gtkscale.c:391, :397),
+    // which the flow layout cannot reach — the cross-axis centre is what is left, and it
+    // is the one half that does not need the value's width.
+    .adw-scale-value {
+      align-self: center;
+    }
+  }
+
+  &.value-top {
+    flex-direction: column-reverse;
+  }
+
+  &.value-left,
+  &.value-right {
+    flex-direction: row;
+    // GTK centres the value on the trough (`value_alloc.y = trough_center_y -
+    // value_alloc.height / 2`, gtkscale.c:376, :382), which for one line of children is
+    // `align-items: center`.
+    align-items: center;
+
+    .adw-scale-value {
+      flex: 0 0 auto;
+    }
+  }
+
+  &.value-left {
+    flex-direction: row-reverse;
+  }
+
+  // WHERE THE VALUE SITS BESIDE THE TROUGH, the value takes its width off the track and the
+  // trough takes what is left — `gtk_scale_get_range_border` (gtkscale.c:1239-1272) shrinks
+  // the trough's allocation by the value's, never the other way round. The axis there is the
+  // scale's OWN, which is why `flex: 1` has to be asked for by orientation: the trough is an
+  // empty bar whose only size is what the layout gives it.
+  &.horizontal.value-left,
+  &.horizontal.value-right,
+  &.vertical.value-top,
+  &.vertical.value-bottom {
+    .adw-scale-trough {
+      flex: 1 1 auto;
+    }
+  }
+
+  // The other two pairs leave the trough across the cross axis, where `stretch` reaches it on
+  // its own — except for a vertical one under `align-items: center` above.
+  &.vertical.value-left,
+  &.vertical.value-right {
+    .adw-scale-trough {
+      align-self: stretch;
+    }
+  }
+
+  .adw-scale-trough {
+    // %scale_trough (_scale.scss:1-10)
+    position: relative;
+    display: flex;
+    border-radius: 99px;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+    transition:
+      background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+      box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+    @media (prefers-contrast: more) {
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
+    }
+  }
+
+  // %scale_highlight (_scale.scss:12-17) — the coloured part of the backing bit.
+  .adw-scale-highlight {
+    position: absolute;
+    border-radius: 99px;
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+    transition:
+      background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+      box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  // `> fill` (:43-47): a SECOND trough-styled bar for a media player's buffered range,
+  // which is why it is not the highlight the `has-origin` block owns.
+  .adw-scale-fill {
+    position: absolute;
+    border-radius: 99px;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+
+    @media (prefers-contrast: more) {
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
+    }
+  }
+
+  // `> slider` (:49-59). The negative margin is upstream's own comment: "the slider is
+  // inside the trough, so to make it bigger there's a negative margin".
+  .adw-scale-slider {
+    position: absolute;
+    min-width: 20px;
+    min-height: 20px;
+    margin: -8px;
+    border-radius: 100%;
+    background-color: color-mix(in srgb, white 80%, var(--view-bg-color));
+    box-shadow:
+      0 0 0 1px rgb(0 0 6 / 10%),
+      0 2px 4px rgb(0 0 6 / 20%);
+    transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  // The element positions the knob by its CENTRE (`gtk_scale_init` fixes the slider size,
+  // so `coord_to_value` divides the trough alone by it), hence the translate on both axes
+  // and the fact that only ONE of `left` / `bottom` is ever written.
+  &.horizontal {
+    .adw-scale-trough {
+      height: 4px;
+      min-height: 4px;
+    }
+
+    .adw-scale-highlight,
+    .adw-scale-fill {
+      top: 0;
+      bottom: 0;
+    }
+
+    .adw-scale-slider {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.vertical {
+    .adw-scale-trough {
+      width: 4px;
+      min-width: 4px;
+      // The trough is a fixed-width BAR and the axis above is the cross axis, so it must
+      // not stretch: `align-items: stretch` on a column would give it the full width.
+      align-self: center;
+    }
+
+    .adw-scale-highlight,
+    .adw-scale-fill {
+      right: 0;
+      left: 0;
+    }
+
+    .adw-scale-slider {
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+  }
+
+  // `&:hover, &:active { > trough { … } }` (:62-78). `currentColor` on the highlight is
+  // the accent FOREGROUND, which is why upstream's 10% wash lands as a light film.
+  &:hover,
+  &:active {
+    .adw-scale-trough {
+      background-color: color-mix(in srgb, currentColor 20%, transparent);
+
+      @media (prefers-contrast: more) {
+        background-color: color-mix(in srgb, currentColor 40%, transparent);
+      }
+    }
+
+    .adw-scale-highlight {
+      background-image: image(color-mix(in srgb, currentColor 10%, transparent));
+    }
+
+    .adw-scale-slider {
+      background-color: white;
+    }
+  }
+
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:80-91)
+  &[disabled] {
+    opacity: var(--disabled-opacity);
+
+    .adw-scale-slider {
+      box-shadow:
+        0 0 0 1px rgb(0 0 6 / 10%),
+        0 2px 4px transparent;
+    }
+  }
+
+  // `> value { @extend .dimmed; @extend .numeric; }` (:93-96) — literally upstream's two
+  // lines, now that `.dimmed` and `.numeric` exist here as the same utility classes.
+  .adw-scale-value {
+    @extend .dimmed;
+    @extend .numeric;
+
+    // `> value.top { margin-bottom: $_marks_size }` / `.bottom { margin-top: … }` /
+    // `.left { margin-right: 9px }` / `.right { margin-left: 9px }` (:126-135). The marks
+    // they were sized against are not ported; the offsets themselves still decide where the
+    // value sits beside the trough.
+    &.top {
+      margin-bottom: 12px;
+    }
+
+    &.bottom {
+      margin-top: 12px;
+    }
+
+    &.left {
+      margin-right: 9px;
+    }
+
+    &.right {
+      margin-left: 9px;
+    }
+  }
+
+  // A keyboard-focused scale draws the ring on the KNOB, as `@include focus-ring("> trough >
+  // slider", $offset: 0)` does upstream (:29). The host is the focusable node, so its
+  // `:focus-visible` is what stands in for the slider's.
+  &:focus-visible {
+    outline: none;
+
+    .adw-scale-slider {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 0;
+    }
+  }
+}

package/scss/_scale_button.scss

@@ -0,0 +1,167 @@
+// _scale_button.scss — `<gtk-scale-button>`: the icon button, its `.scale-popup` dock and
+// the range inside it.
+//
+// The node is `scalebutton.scale` holding `button.toggle`
+// (gtkscalebutton.c:87-97), and the DOCK is a `GtkPopover` with the `scale-popup` style
+// class holding a box of [minus, scale, plus] with 4px margins and 4px spacing
+// (gtk/ui/gtkscalebutton.ui) — all three of those numbers restated here, because the box is the
+// dock's whole layout and GTK sizes the scale to `SCALE_SIZE` (100px) along its axis.
+//
+// The RANGE ITSELF is libadwaita's `scale` node (_scale.scss:19-251): the 12px padding,
+// the 99px trough, the accent-coloured `highlight`, the 20px round slider with a `-8px`
+// negative margin and a two-part shadow. An `<input type="range">` is the element the
+// NativeScript port already substitutes for `GtkScale`, and the trough/highlight/slider
+// are drawn with `appearance: none` and the same numbers. The vertical case is the
+// `writing-mode` + `direction` pair that makes a range grow UPWARD, which is
+// `gtk_range_set_inverted (scale, TRUE)` for the vertical orientation (:883) — and
+// `scale-button-box` reverses its column for the same reason `apply_orientation`
+// reorders the children (:869-889).
+//
+// Reference: refs/gtk/gtk/gtkscalebutton.c:87-97 (the node), :869-889 (the orientation),
+//   :1099-1100 (the steppers' sensitivity)
+// Reference: refs/gtk/gtk/ui/gtkscalebutton.ui:13-25 (the dock, its box, its margins)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_scale.scss:1-60 (trough, highlight, slider)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web — the scale is `<input type="range">`
+//   rather than a `scale` node, and the slider is drawn with `appearance: none`.
+
+/** `SCALE_SIZE` (gtkscalebutton.c:88) — the scale's size request along its own axis. */
+$scale-size: 100px;
+
+// libadwaita's own values (`_colors.scss:280-288`), which are Sass variables over tokens
+// this package already has rather than new ones: a trough is 15% of the current text
+// colour and a slider is 80% white over the view background.
+$trough-color: color-mix(in srgb, currentColor 15%, transparent);
+$trough-hover-color: color-mix(in srgb, currentColor 20%, transparent);
+$slider-color: color-mix(in srgb, white 80%, var(--view-bg-color));
+$slider-border-color: rgb(0 0 6 / 10%);
+
+gtk-scale-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.scale-button-icon {
+  min-width: 34px;
+}
+
+// The dock's own box: 4px of margin on all four sides, 4px between the three children.
+.scale-button-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin: 4px;
+
+  // `apply_orientation` moves plus ABOVE minus when the scale is vertical
+  // (gtkscalebutton.c:876-878). Reversing the column is the same arrangement without
+  // moving nodes, which would take focus off a stepper mid-click.
+  .vertical & {
+    flex-direction: column-reverse;
+  }
+}
+
+.scale-button-step {
+  min-width: 24px;
+  min-height: 24px;
+  padding: 2px;
+}
+
+.scale-button-range {
+  appearance: none;
+  background: none;
+  margin: 0;
+  padding: 12px;
+  min-width: 10px;
+  min-height: 10px;
+  flex: 1;
+  cursor: pointer;
+
+  // libadwaita sizes the SLIDER at 20px and pulls it 8px back out of the trough
+  // (_scale.scss:49-58) — the negative margin is upstream's, not decoration.
+  &::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 99px;
+    background-color: $trough-color;
+    transition: background-color 0.2s ease;
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    margin: -8px;
+    border: none;
+    border-radius: 100%;
+    background-color: $slider-color;
+    box-shadow: 0 0 0 1px $slider-border-color, 0 2px 4px rgb(0 0 6 / 20%);
+  }
+
+  &::-moz-range-track {
+    height: 4px;
+    border-radius: 99px;
+    background-color: $trough-color;
+    transition: background-color 0.2s ease;
+  }
+
+  &::-moz-range-progress {
+    height: 4px;
+    border-radius: 99px;
+    background-color: var(--accent-bg-color);
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border: none;
+    border-radius: 100%;
+    background-color: $slider-color;
+    box-shadow: 0 0 0 1px $slider-border-color, 0 2px 4px rgb(0 0 6 / 20%);
+  }
+
+  &:hover::-webkit-slider-runnable-track,
+  &:active::-webkit-slider-runnable-track {
+    background-color: $trough-hover-color;
+  }
+
+  &:hover::-moz-range-track,
+  &:active::-moz-range-track {
+    background-color: $trough-hover-color;
+  }
+
+  &:disabled {
+    filter: opacity(var(--disabled-opacity));
+  }
+
+  // A VERTICAL scale: `writing-mode` gives the axis and `direction: rtl` makes the value
+  // grow upward, which is `gtk_range_set_inverted (scale, TRUE)` for the vertical
+  // orientation (gtkscalebutton.c:883) and the only reason a media volume button fills
+  // from the bottom.
+  .vertical & {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    width: 24px;
+    height: $scale-size;
+    flex: none;
+
+    &::-webkit-slider-runnable-track {
+      width: 4px;
+      height: $scale-size;
+    }
+
+    &::-webkit-slider-thumb {
+      margin: -8px;
+    }
+
+    &::-moz-range-track {
+      width: 4px;
+      height: $scale-size;
+    }
+  }
+
+  .horizontal & {
+    height: 24px;
+    width: $scale-size;
+    flex: none;
+  }
+}

package/scss/_scrollbar.scss

@@ -0,0 +1,230 @@
+// _scrollbar.scss — <gtk-scrollbar>: libadwaita's trough, slider and the two overlay
+// variants, with GTK's `range` level collapsed.
+//
+// THE SELECTOR REWRITE, and why it is not a guess. libadwaita addresses
+// `scrollbar > range > trough > slider` (`_scrolling.scss:6-8`) because `GtkScrollbar` builds
+// a `GtkRange` and parents it to itself (gtkscrollbar.c:263-278). There is no `<gtk-range>`
+// element in this package — `Gtk.Range` is the ancestor of `GtkScale` and `Gtk.Scrollbar` and
+// is documented through them — so the trough-and-slider pair IS the node below the range and
+// the two class names stand in for the two GTK nodes. Everything else is upstream's
+// declaration in upstream's order: the trough's `margin: 9px` (and the 8px it gives back on
+// the cross axis, `_scrolling.scss:38-48`), the slider's `$_slider_width: 8px`, its
+// `border: 8px solid transparent` with `background-clip: padding-box` — which is how an 8px
+// dot becomes a 24px pill — and the `$_slider_min_length: 40px` floor.
+//
+// THE BAR'S BOX IS THE TROUGH'S MARGINS, 24px on the cross axis, and the slider's negative
+// margin is what centres it: the border box is 24px where the trough is 8px, so
+// `top: 0; margin-top: -8px` puts the visible 8px exactly on the trough. `GtkScrollbar`
+// measures its range to the trough's size and its own allocation is what is left, so the
+// numbers here are the same ones GTK adds up.
+//
+// THE SLIDER'S LENGTH IS COMPUTED, not written here. `gtk_range_compute_slider_position`
+// derives it from `page_size / (upper - lower)` and its position from
+// `(value - lower) / (upper - lower - page_size)`, and the element writes both as
+// `--adw-scrollbar-size` / `--adw-scrollbar-position` in px. That is why the slider is
+// absolutely positioned rather than sized by a percentage: the two fractions have DIFFERENT
+// denominators, and a percentage of the trough is the wrong unit for either.
+//
+// `--scrollbar-outline-color` is upstream's own token and this package does not define it,
+// so every use falls back to the window foreground — the outline exists to keep an overlay
+// indicator legible over whatever is beneath it, which is the job the foreground does.
+
+$_slider_min_length: 40px;
+$_slider_width: 8px;
+$_scrollbar_transition: all 200ms linear;
+
+gtk-scrollbar {
+  position: relative;
+  display: block;
+  flex: none;
+  color: var(--window-fg-color);
+  touch-action: none;
+
+  // The cross axis, which is the trough's own 8px plus the 8px margin on each side.
+  &.horizontal {
+    height: $_slider_width + 16px;
+  }
+
+  &.vertical {
+    width: $_slider_width + 16px;
+  }
+
+  // `> range > trough` — the trough is the whole node and the slider rides inside it.
+  .adw-scrollbar-trough {
+    position: absolute;
+    margin: 9px;
+    border-radius: 99px;
+    transition: $_scrollbar_transition;
+
+    > .adw-scrollbar-slider {
+      position: absolute;
+      min-width: $_slider_width;
+      min-height: $_slider_width;
+      margin: -8px;
+      border: 8px solid transparent;
+      border-radius: 99px;
+      background-clip: padding-box;
+      transition: $_scrollbar_transition;
+      background-color: color-mix(in srgb, currentColor 20%, transparent);
+
+      &:hover {
+        background-color: color-mix(in srgb, currentColor 40%, transparent);
+      }
+
+      &:active {
+        background-color: color-mix(in srgb, currentColor 60%, transparent);
+      }
+
+      @media (prefers-contrast: more) {
+        background-color: color-mix(in srgb, currentColor 40%, transparent);
+
+        &:hover {
+          background-color: color-mix(in srgb, currentColor 60%, transparent);
+        }
+
+        &:active {
+          background-color: currentColor;
+        }
+      }
+    }
+  }
+
+  &.horizontal > .adw-scrollbar-trough {
+    top: 8px;
+    right: 9px;
+    bottom: 8px;
+    left: 9px;
+
+    // `&.horizontal > range > trough > slider { min-width: $_slider_min_length }`, as a floor
+    // on the computed length rather than a minimum: the element writes the WIDTH, and
+    // upstream's `MIN (width, trough_width)` with the slider's own floor in front of it is
+    // exactly `max()`.
+    > .adw-scrollbar-slider {
+      top: 0;
+      left: 0;
+      height: $_slider_width;
+      width: max(var(--adw-scrollbar-size, #{$_slider_min_length}), #{$_slider_min_length});
+      transform: translateX(var(--adw-scrollbar-position, 0));
+    }
+  }
+
+  &.vertical > .adw-scrollbar-trough {
+    top: 9px;
+    right: 8px;
+    bottom: 9px;
+    left: 8px;
+
+    // The vertical twin of the rule above — `min-height`, in libadwaita's own words.
+    > .adw-scrollbar-slider {
+      top: 0;
+      left: 0;
+      width: $_slider_width;
+      height: max(var(--adw-scrollbar-size, #{$_slider_min_length}), #{$_slider_min_length});
+      transform: translateY(var(--adw-scrollbar-position, 0));
+    }
+  }
+
+  // `&:disabled { opacity: 0 }` on the slider upstream, which is what an INOPERABLE bar
+  // looks like — `gtk_widget_set_sensitive (FALSE)` reaches the slider through the widget.
+  // Nothing in GTK makes a scrollbar insensitive on its own, so nothing here sets
+  // `disabled` either: the rule stands for an author that writes it, which is what the
+  // `[disabled]` selector (and not `:disabled`) is for — a custom element carrying
+  // `disabled` is not one the UA's `:disabled` matches.
+  &[disabled] {
+    pointer-events: none;
+
+    .adw-scrollbar-slider {
+      opacity: 0;
+    }
+  }
+
+  // `> range.fine-tune > trough > slider` — the accent, which upstream paints for a range that
+  // is being FINE-TUNED, which in GTK is what `update_zoom_state` turns on: while Shift is
+  // held (gtkrange.c:1793-1804).
+  &.fine-tune > .adw-scrollbar-trough > .adw-scrollbar-slider {
+    &,
+    &:hover,
+    &:active {
+      background-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
+
+      @media (prefers-contrast: more) {
+        background-color: var(--accent-color);
+      }
+    }
+  }
+
+  // `.overlay-indicator` — `setup_indicator`'s class, which is what turns GTK's permanent
+  // scrollbar into the "narrow, auto-hiding indicator" (`_scrolling.scss:56-118`). It sits
+  // OVER the content, so the trough keeps no background and the slider carries an outline to
+  // stay legible against whatever is beneath it. The opacity is `indicator_start_fade`'s,
+  // driven by `--adw-indicator-opacity` and transitioned over the fade duration.
+  &.overlay-indicator {
+    z-index: 2;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    opacity: var(--adw-indicator-opacity, 1);
+    transition: opacity 1000ms linear;
+
+    > .adw-scrollbar-trough {
+      outline: 1px solid transparent;
+
+      > .adw-scrollbar-slider {
+        outline: 1px solid color-mix(in srgb, var(--scrollbar-outline-color, var(--window-fg-color)) 60%, transparent);
+        outline-offset: -8px;
+
+        @media (prefers-contrast: more) {
+          outline: 1px solid var(--scrollbar-outline-color, var(--window-fg-color));
+        }
+      }
+    }
+
+    &:not(.hovering) > .adw-scrollbar-trough > .adw-scrollbar-slider {
+      min-width: 3px;
+      min-height: 3px;
+      outline-color: color-mix(in srgb, var(--scrollbar-outline-color, var(--window-fg-color)) 35%, transparent);
+
+      @media (prefers-contrast: more) {
+        outline-color: color-mix(in srgb, var(--scrollbar-outline-color, var(--window-fg-color)) 60%, transparent);
+      }
+    }
+
+    &.hovering > .adw-scrollbar-trough {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+
+      @media (prefers-contrast: more) {
+        background-color: color-mix(in srgb, currentColor 25%, transparent);
+      }
+    }
+
+    &.horizontal {
+      > .adw-scrollbar-trough > .adw-scrollbar-slider {
+        min-width: $_slider_min_length;
+      }
+
+      &.hovering > .adw-scrollbar-trough > .adw-scrollbar-slider {
+        min-height: $_slider_width;
+      }
+
+      &:not(.hovering) > .adw-scrollbar-trough {
+        margin-top: 4px;
+        margin-bottom: 4px;
+      }
+    }
+
+    &.vertical {
+      > .adw-scrollbar-trough > .adw-scrollbar-slider {
+        min-height: $_slider_min_length;
+      }
+
+      &.hovering > .adw-scrollbar-trough > .adw-scrollbar-slider {
+        min-width: $_slider_width;
+      }
+
+      &:not(.hovering) > .adw-scrollbar-trough {
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+    }
+  }
+}