@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_scrolled_window.scss

@@ -0,0 +1,131 @@
+// _scrolled_window.scss — <gtk-scrolled-window>: the allocation GTK's
+// `gtk_scrolled_window_allocate_child` / `allocate_scrollbar` pair performs.
+//
+// THE PLACEMENT IS A GRID of two cells and one corner, because that is what
+// `gtk_scrolled_window_allocate_scrollbar` (gtkscrolledwindow.c:3227-3305) computes: the
+// content takes what is left after each bar has taken its edge, and which edge that is comes
+// from two booleans the C derives from `window-placement`.
+//
+//   · `is_top` — `window-placement` is `top-left` or `top-right` — decides whether the
+//     HORIZONTAL bar is on the far (bottom) row or the near (top) one.
+//   · `is_left = ltr != is_start` — `is_start` being the same corner's left half — decides
+//     whether the VERTICAL bar is on the end edge or the start one. The direction half is
+//     `:dir(rtl)` here rather than a class, because C reads it off the widget and CSS reads it
+//     off the document.
+//
+// The third corner cell is `junction`, the node GTK draws where two bars meet
+// (gtkscrolledwindow.c:134-135); libadwaita paints nothing there, and neither does this — an
+// empty grid cell is the same absence with no node to hold it.
+//
+// AN OVERLAY INDICATOR IS LAID OUT INSIDE THE CONTENT, not beside it. That is
+// `priv->use_indicators` in the same function (gtkscrolledwindow.c:3255-3300): the bar's
+// allocation starts at the content's far edge MINUS the bar's own thickness, so it lies over
+// the content instead of shrinking it. Hence the second template — positioned against the
+// window, which is `position: relative` here for the reason GTK's is a child of the
+// scrolledwindow node.
+//
+// `.frame` is `GtkScrolledWindow:has-frame`, which its own CSS-node documentation spells out:
+// "It gets a .frame style class added when `has-frame` is TRUE" (gtkscrolledwindow.c:122-124).
+// The rule behind the class is libadwaita's `_misc.scss:4-7`, which `_style_classes.scss`
+// already carries, so no selector for it is repeated here.
+
+gtk-scrolled-window {
+  position: relative;
+  display: grid;
+  // GTK asks its parent for as little as it can: `gtk_scrolled_window_measure` reports the
+  // child's minimum only under `POLICY_NEVER` (gtkscrolledwindow.c:1846-1895) and the bars'
+  // own thickness otherwise. `minmax(0, 1fr)` is that request — a track that may collapse to
+  // nothing rather than one that demands its content's height, which is what
+  // `gtk_widget_set_size_request` lets an author override afterwards.
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr) auto;
+  min-width: 0;
+  min-height: 0;
+  // GTK GIVES THIS WIDGET AN ALLOCATION from its parent and never decides its own size:
+  // `gtk_scrolled_window_measure` reports the child's MINIMUM and the bars' own thickness
+  // (gtkscrolledwindow.c:1846-1895), and `size_allocate` fills whatever it is
+  // given. A browser scrolled window needs the same from its author — a height, a
+  // `flex-basis`, a parent track — because an auto-height box grows with its content and then
+  // has nothing to scroll. `flex: 1 1 0%` is that allocation for the ordinary case of a
+  // window in a column, and it is 0 in an auto-height column, so an author who wants the
+  // natural size writes one.
+  flex: 1 1 0%;
+  overflow: hidden;
+
+  > gtk-viewport {
+    grid-area: 1 / 1;
+  }
+
+  // The vertical bar spans BOTH rows, which is `gtk_widget_size_allocate` giving it the
+  // whole content height (gtkscrolledwindow.c:3295-3305) minus whatever the horizontal bar
+  // takes when that one is a layout neighbour rather than an overlay.
+  > gtk-scrollbar.vertical {
+    grid-row: 1 / 3;
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  > gtk-scrollbar.horizontal {
+    grid-column: 1 / 3;
+    grid-row: 2;
+    align-self: end;
+  }
+
+  // `is_top` false: the horizontal bar takes the NEAR row, and the content is what is left.
+  &.bottom-left,
+  &.bottom-right {
+    grid-template-rows: auto minmax(0, 1fr);
+
+    > gtk-scrollbar.horizontal {
+      grid-row: 1;
+      align-self: start;
+    }
+  }
+
+  // `is_left` true: the vertical bar takes the START column.
+  &.top-right,
+  &.bottom-right {
+    grid-template-columns: auto minmax(0, 1fr);
+
+    > gtk-scrollbar.vertical {
+      grid-column: 1;
+      justify-self: start;
+    }
+  }
+
+  // The direction half of `is_left = ltr != is_start`: everything the C inverts under RTL.
+  &:dir(rtl) {
+    grid-template-columns: auto minmax(0, 1fr);
+
+    > gtk-scrollbar.vertical {
+      grid-column: 1;
+      justify-self: start;
+    }
+
+    &.top-right,
+    &.bottom-right {
+      grid-template-columns: minmax(0, 1fr) auto;
+
+      > gtk-scrollbar.vertical {
+        grid-column: 2;
+        justify-self: end;
+      }
+    }
+  }
+
+  // The overlay case, which is the whole of what `use_indicators` changes in the allocation:
+  // both bars leave the grid and lie over the content.
+  &.overlay-scrolling > gtk-scrollbar.overlay-indicator {
+    position: absolute;
+
+    &.vertical {
+      inset-block: 0;
+      right: 0;
+    }
+
+    &.horizontal {
+      inset-inline: 0;
+      bottom: 0;
+    }
+  }
+}

package/scss/_search_bar.scss

@@ -0,0 +1,118 @@
+// _search_bar.scss — `<gtk-search-bar>`, the strip that reveals a search entry.
+//
+// The whole of libadwaita's rule is `searchbar > revealer > box` plus a `.close` button
+// (_toolbars.scss:113-159): the box is a HEADER BAR surface — the same `--headerbar-bg-color`
+// pair and the same 1px shade along its bottom edge as `adw-header-bar` draws
+// (`_header-bar.scss`) — and the strip sits at the bottom of a window, so that edge is the
+// one that separates it from the content.
+//
+// THE REVEALER IS THE STATE. `search-mode-enabled` IS `reveal-child` (gtksearchbar.c:183-205,
+// 512-517), so the strip animates its own height and the element drives nothing else. One
+// grid row that goes `0fr` → `1fr` is the one CSS mechanism that animates to a height the
+// CONTENT decides; `max-height` would be a guess at that height, and `display: none` would
+// not animate at all.
+//
+// TWO RULES ARE DELIBERATELY ABSENT. `:backdrop` — the dimmed variant libadwaita draws when
+// the window is unfocused (_toolbars.scss:125-133) — has no state here: this port has no
+// toplevel whose focus it could follow. And `%toolbar`'s reset rules (_toolbars.scss:5-66)
+// only classify the BUTTON classes inside a toolbar, which `<gtk-button>` already owns
+// (`_button.scss`).
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss:109-185 (searchbar)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-search-bar {
+  display: grid;
+  // THE REVEALER (`reveal-child`). `0fr` clips the box to nothing without taking it out of
+  // the layout, which is what a GTK revealer does; `1fr` gives the box its own height.
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+
+  &.revealed {
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  .adw-search-bar-box {
+    // The clip the `0fr` row needs, and the header-bar surface libadwaita puts on it
+    // (_toolbars.scss:115-122).
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 6px 7px 6px;
+    background-color: var(--headerbar-bg-color);
+    color: var(--headerbar-fg-color);
+    box-shadow: inset 0 -1px var(--headerbar-shade-color);
+
+    @media (prefers-contrast: more) {
+      box-shadow: inset 0 -1px var(--separator-color);
+    }
+  }
+
+  // The `GtkCenterBox` the C wraps the child in (gtksearchbar.c:378-386): the entry takes
+  // the free space, the close button sits at its end.
+  .adw-search-bar-center {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  // `button.close` (_toolbars.scss:137-153): a 18px round flat button, with the 10px/4px
+  // ltr margins upstream writes and the 4px/10px rtl mirror.
+  .adw-search-bar-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    min-height: 18px;
+    margin-left: 10px;
+    margin-right: 4px;
+    padding: 4px;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 150ms ease-in-out;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // `&:dir(rtl)` (_toolbars.scss:150-153) — the margins swap sides, not the order.
+  &:dir(rtl) .adw-search-bar-close {
+    margin-left: 4px;
+    margin-right: 10px;
+  }
+
+  // `searchbar.inline` (_toolbars.scss:156-158) drops the header-bar surface, which is what
+  // an author adds when the strip sits inside a page rather than at a window's edge.
+  &.inline .adw-search-bar-box {
+    background-color: transparent;
+    color: inherit;
+    box-shadow: none;
+    padding-bottom: 6px;
+  }
+}

package/scss/_search_entry.scss

@@ -0,0 +1,86 @@
+// _search_entry.scss — <gtk-search-entry>: the same `entry` box with a magnifying glass
+// leading and a clear button trailing.
+//
+// libadwaita has no `entry.search` rule at all: `Gtk.SearchEntry`'s CSS node is `entry`
+// carrying the `.search` STYLE CLASS (gtksearchentry.c:884), and every rule that reaches it
+// is one `_entries.scss` already states for `entry` (:1-96) — the box, the focus ring, the
+// icons at 70%, and their `&.right { margin-left: 6px }`. So this partial is those same
+// rules applied to the two extra nodes this widget has, and it deliberately adds nothing of
+// its own: a rule that could select `entry.search` but does not is a rule that rots, which
+// is the reasoning `_progress_bar.scss` records for `progressbar.vertical`.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss:1-96
+// Reference: refs/gtk/gtk/gtksearchentry.c:884 (the `.search` style class, and the CSS node name `entry`)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-search-entry {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 34px;
+  padding: 0 9px;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  background-clip: padding-box;
+  caret-color: currentColor;
+
+  @media (prefers-contrast: more) {
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+
+  // `@include focus-ring($focus-state: ':focus-within')` (_entries.scss:17). The host is the
+  // focusable node here rather than a wrapping box, so it is the host's own focus that
+  // paints the ring — which is the same ring `:focus-within` draws, one node further out.
+  &:focus-within {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+  }
+
+  .adw-entry {
+    flex: 1;
+    min-width: 0;
+    min-height: auto;
+    padding: 0 6px;
+    background-color: transparent;
+    box-shadow: none;
+
+    &:focus,
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  // `> image { opacity: 70%; &.left { margin-right: 6px } }` (_entries.scss:42-61)
+  .adw-search-entry-icon {
+    flex: none;
+    margin-right: 6px;
+    opacity: 70%;
+    color: inherit;
+
+    @media (prefers-contrast: more) {
+      opacity: 85%;
+    }
+  }
+
+  .adw-search-entry-clear {
+    flex: none;
+    margin-left: 6px;
+    opacity: 70%;
+    color: inherit;
+
+    @media (prefers-contrast: more) {
+      opacity: 85%;
+    }
+
+    &:hover {
+      opacity: 100%;
+    }
+
+    &:active {
+      opacity: 80%;
+    }
+  }
+}

package/scss/_separator.scss

@@ -0,0 +1,44 @@
+// _separator.scss — <gtk-separator>: a one-pixel rule, and the `.spacer` variant that draws
+// nothing and only keeps its distance.
+//
+// libadwaita's whole rule is `separator { background: $border_color; min-width: 1px;
+// min-height: 1px }` plus `.spacer` (_misc.scss:21-31). GTK gives the widget its extent from
+// the orientation: a horizontal separator is 1px tall and as wide as it is given, a vertical
+// one the reverse. A flex or block parent hands that width through `align-self: stretch`,
+// which is why the cross-axis size is `auto` rather than a number.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:21-31
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-separator {
+  display: block;
+  flex: none;
+  align-self: stretch;
+  background: var(--border-color);
+  min-width: 1px;
+  min-height: 1px;
+
+  &.horizontal {
+    height: 1px;
+  }
+
+  &.vertical {
+    width: 1px;
+  }
+
+  &.spacer {
+    background: none;
+
+    &.horizontal {
+      min-width: 12px;
+    }
+
+    // The generic `.spacer` in `_style_classes.scss` also floors the WIDTH at 12px for an
+    // element with no orientation; a vertical separator's width is its 1px, so say so.
+    &.vertical {
+      min-width: 1px;
+      min-height: 12px;
+    }
+  }
+}

package/scss/_shortcuts_dialog.scss

@@ -0,0 +1,100 @@
+// _shortcuts_dialog.scss — the shortcuts dialog: sections of shortcut rows, and the
+// rows themselves.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_shortcuts-dialog.scss (16-27 the
+//   `.shortcut-row` padding and the `.title-box` subtitle; 1-14 the spacing between the
+//   groups inside the dialog's page)
+// Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+
+// Modifications: Implemented for @gjsify/adwaita-web Web Components.
+
+// The class list libadwaita gives the dialog itself is `dialog.shortcuts`, and the
+// stylesheet reaches through it into a preferences page. Here the sections are the
+// dialog's children in the base's own content area, so the element is the same hook
+// in one selector — and the CONTENT AREA is the box the stylesheet spaces out
+// (`border-spacing: 18px` there, which is a `GtkBox` doing what a gap does).
+adw-shortcuts-dialog .adw-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+adw-shortcuts-dialog adw-shortcuts-section {
+  flex: 0 0 auto;
+}
+
+adw-shortcuts-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.adw-shortcuts-section-title {
+  font-weight: 700;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.adw-shortcuts-section-body {
+  display: flex;
+  flex-direction: column;
+  // The boxed-list surface the sections read as — a card with a hairline, exactly the
+  // one `adw-preferences-group` draws and the one `_shortcuts-dialog.scss` inherits.
+  border: 1px solid var(--card-shade-color);
+  border-radius: var(--card-radius);
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  overflow: hidden;
+}
+
+adw-shortcuts-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  // `.shortcut-row { padding: 9px 12px; min-height: 36px }` (_shortcuts-dialog.scss:16-19)
+  padding: 9px 12px;
+  min-height: 36px;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--card-shade-color);
+  }
+
+  + adw-shortcuts-item {
+    border-top: 1px solid var(--card-shade-color);
+  }
+}
+
+// `.title-box { border-spacing: 3px }` with the subtitle under the title: the source
+// is a vertical box, so the title and the subtitle stack and the subtitle is dimmed
+// and caption-sized (`@extend .caption; @extend .dimmed`).
+.adw-shortcuts-item-title,
+.adw-shortcuts-item-subtitle {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adw-shortcuts-item-subtitle {
+  font-size: var(--font-size-small);
+  opacity: var(--dim-opacity);
+  margin-top: 3px;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.adw-shortcuts-item-label {
+  flex: 0 0 auto;
+
+  &[hidden] {
+    display: none;
+  }
+}

package/scss/_spin_button.scss

@@ -0,0 +1,172 @@
+// _spin_button.scss — <gtk-spin-button>: an entry-shaped box with a decrement and an
+// increment arrow inside it.
+//
+// libadwaita merges this into `_entries.scss`'s shape: `spinbutton { @extend %entry }`
+// (:1-2), so the OUTER box is an entry — `min-height: 34px`, the 9px horizontal padding,
+// `$button_radius` and `$button_color` — and only the two ARROWS are styled here. That is
+// why the partial below adds no background of its own and why the arrows are `.image-button`
+// with `border-radius: 0` and a hairline of their own.
+//
+// THE CHILD ORDER THE `&:last-child` / `&:first-child` RULES BELOW DEPEND ON is
+// `Gtk.SpinButton`'s, not the one a spinner usually draws: C parents its children as text,
+// down, up (gtkspinbutton.c:1091-1126) and the box layout lays them out in that order, so
+// the horizontal widget reads `text ▼ ▲` and the vertical one `▲ text ▼`. The element
+// re-parents on an orientation change exactly as `gtk_spin_button_set_orientation` does
+// (gtkspinbutton.c:1290-1299), so the selectors below select what they select on a desktop:
+// the up arrow hugs the rounded end, whichever end that is.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss:1-76
+// Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss:1-19 (%entry)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// `> text { @extend .dimmed; > placeholder { @extend .dimmed } }` is the entry's own rule
+// (_entries.scss:19-28) and this package states it on `.adw-entry` instead; the placeholder
+// colour is the browser's.
+@use 'labels';
+
+gtk-spin-button {
+  // `spinbutton { @extend %entry; @extend .numeric; }` (:1-3), taken apart: this package's
+  // `_entry.scss` writes the entry shape as the `.adw-entry` CLASS on an `<input>` rather
+  // than as a placeholder every node can extend, so the eight declarations `%entry`
+  // contributes are written out here and `.numeric` is @extended on the text instead.
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 34px;
+  padding: 0 9px;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  background-clip: padding-box;
+  caret-color: currentColor;
+
+  @media (prefers-contrast: more) {
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (_entries.scss:40)
+  &[disabled] {
+    opacity: var(--disabled-opacity);
+  }
+
+  // The numeric text. `.numeric` is `spinbutton`'s own `@extend .numeric` (:3).
+  .adw-spin-button-text {
+    @extend .numeric;
+
+    flex: 1;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 6px;
+    border: none;
+    outline: none;
+    background: none;
+    color: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    text-align: start;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &::placeholder {
+      @extend .dimmed;
+    }
+  }
+
+  // `> button.image-button.up` and `.down` (:9-24) — `:not` there upstream only to outrank
+  // the list button styling, which has no counterpart here; the flat treatment does.
+  .image-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 4px;
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    box-shadow: none;
+    border-style: solid;
+    border-width: 0;
+    border-color: color-mix(in srgb, currentColor 10%, transparent);
+
+    @media (prefers-contrast: more) {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
+    }
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    // `update_buttons_sensitivity` (gtkspinbutton.c:1214-1226) disables an arrow that has
+    // no room to move, and a disabled button has to LOOK it: libadwaita's `&:disabled`
+    // dimming is on the widget, which is here.
+    &:disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+    }
+  }
+
+  &:not(.vertical) {
+    .adw-spin-button-text {
+      min-width: 28px;
+    }
+
+    .image-button {
+      min-height: 16px;
+      min-width: 22px;
+      padding-top: 0;
+      padding-bottom: 0;
+      border-left-width: 1px;
+
+      &:dir(rtl) {
+        border-left-width: 0;
+        border-right-width: 1px;
+      }
+
+      // The up arrow is the LAST child in a horizontal box (see the file header), so it is
+      // the one that carries the rounded right end — and `:dir(rtl)` mirrors it.
+      &:dir(ltr):last-child {
+        border-radius: 0 var(--button-radius) var(--button-radius) 0;
+      }
+
+      &:dir(rtl):last-child {
+        border-radius: var(--button-radius) 0 0 var(--button-radius);
+      }
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+    padding: 9px 0;
+
+    .adw-spin-button-text {
+      min-height: 30px;
+      min-width: 30px;
+      padding: 0;
+      text-align: center;
+    }
+
+    // The up arrow is FIRST here and the down arrow LAST, so the two rules land on the two
+    // ends the way they do vertically on a desktop.
+    .image-button {
+      &:first-child {
+        border-bottom-width: 1px;
+        border-radius: var(--button-radius) var(--button-radius) 0 0;
+      }
+
+      &:last-child {
+        border-top-width: 1px;
+        border-radius: 0 0 var(--button-radius) var(--button-radius);
+      }
+    }
+  }
+}