@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_flow_box.scss

@@ -0,0 +1,94 @@
+// _flow_box.scss — <gtk-flow-box> and its cells, the elements GTK names `flowbox` and
+// `flowboxchild`.
+//
+// Upstream writes `flowbox > flowboxchild, gridview > child` as ONE rule (_views.scss:52-91):
+// the same 3px padding, the same `$button_radius` corner, the same focus ring and the same four
+// state colours — and `<gtk-grid-view>` already wears the grid half in `_grid_view.scss`, which
+// `@include`s `adw-list-selectable` from `_list_view.scss` for exactly that reason. The cell
+// here therefore includes the same mixin rather than restating four colours, because a drifted
+// copy is four wrong ones and the hover-over-selected pair is the pair nobody checks by eye.
+//
+// `flex-flow: row wrap` IS the allocation. GTK hands each child a slot on a running line in
+// the given orientation and starts a new one when the next would not fit
+// (gtkflowbox.c:1640-1900), and a wrapping flex line with a per-child size share is that rule
+// expressed in the browser's own layout language: `max-width: 100% / max-children-per-line`
+// caps how many can share a line, and `min-width: 100% / min-children-per-line` is
+// `min-children-per-line`, whose own documented job is that "a reasonably small height will be
+// requested for the overall minimum width of the box" (gtkflowbox.c:3747-3755).
+//
+// `homogeneous` is `flex: 1 1 0` — GTK's "all children should be allocated the same size"
+// (:3736-3739), which in a wrapping line is exactly equal growth from a zero basis.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_views.scss:1-16 (.view), :52-91
+//   (flowbox > flowboxchild), :88-91 (flowbox, gridview disabled)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-flow-box {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  // The line container. `--adw-flow-box-*` are written by `gtk-flow-box.ts` from the
+  // properties, so the stylesheet stays declarative and a `homogeneous` write is one class.
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--adw-flow-box-row-spacing, 0px) var(--adw-flow-box-column-spacing, 0px);
+
+  &.vertical {
+    flex-flow: column wrap;
+  }
+
+  &.view:disabled {
+    color: var(--view-fg-color);
+  }
+}
+
+gtk-flow-box-child {
+  @include list_view.adw-list-selectable;
+
+  display: block;
+  box-sizing: border-box;
+  // `flowbox > flowboxchild { padding: 3px; border-radius: $button_radius }`
+  // (_views.scss:52-56).
+  padding: 3px;
+  border-radius: var(--button-radius);
+  // The line share. A browser lays the children out, so this is where GTK's
+  // `min`/`max-children-per-line` and `homogeneous` are honoured — and the share has to
+  // LEAVE ROOM FOR THE SPACING. `100% / N` alone does not: N children then need N shares
+  // PLUS the (N-1) gaps between them, so the row overflows by the gaps and the browser
+  // breaks it one child early. Measured on the gallery's flow box — `min-children-per-line`
+  // 2, `max` 4, a 6px spacing in a 320px box — the share came out at 50% (160px), two
+  // children plus one gap came to 326px, and the box showed ONE child per line where
+  // libadwaita packs four. The share is therefore (100% - (N-1) × spacing) / N.
+  max-width: calc(
+    (100% - (var(--adw-flow-box-max-children-per-line, 7) - 1) *
+      var(--adw-flow-box-column-spacing, 0px)) / var(--adw-flow-box-max-children-per-line, 7)
+  );
+  min-width: calc(
+    (100% - (var(--adw-flow-box-min-children-per-line, 1) - 1) *
+      var(--adw-flow-box-column-spacing, 0px)) / var(--adw-flow-box-min-children-per-line, 1)
+  );
+  cursor: pointer;
+}
+
+gtk-flow-box.vertical > gtk-flow-box-child {
+  // The same arithmetic down the other axis, against the ROW spacing.
+  max-height: calc(
+    (100% - (var(--adw-flow-box-max-children-per-line, 7) - 1) *
+      var(--adw-flow-box-row-spacing, 0px)) / var(--adw-flow-box-max-children-per-line, 7)
+  );
+  max-width: none;
+  min-height: calc(
+    (100% - (var(--adw-flow-box-min-children-per-line, 1) - 1) *
+      var(--adw-flow-box-row-spacing, 0px)) / var(--adw-flow-box-min-children-per-line, 1)
+  );
+  min-width: 0;
+}
+
+gtk-flow-box.homogeneous > gtk-flow-box-child {
+  flex: 1 1 0;
+}

package/scss/_font_button.scss

@@ -0,0 +1,63 @@
+// _font_button.scss — `<gtk-font-dialog-button>`: the `button.font` node and the two
+// labels it holds.
+//
+// libadwaita has no rule for it either: `_linked.scss:7` is the only place upstream names
+// `fontbutton`, and it is there because the node is a button that participates in a linked
+// group. So this partial is the node's layout and nothing else — and the node's layout IS
+// the C's, which builds a horizontal box of the family label (hexpand, so it takes the
+// room) and the size box, the latter a vertical separator followed by the size label
+// (gtkfontdialogbutton.c:121-140).
+//
+// The element hides the size box itself when the level is below FONT, because
+// `update_font_info` ends with `gtk_widget_set_visible (self->font_size_box, self->level >=
+// GTK_FONT_LEVEL_FONT)` (:685) — a family chooser shows one word where a font chooser shows
+// two, and the separator with it.
+//
+// Reference: refs/gtk/gtk/gtkfontdialogbutton.c:52-60 (the node), :118-152 (init, the box,
+//   the labels), :649-687 (update_font_info, and the size box's visibility)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_linked.scss:7 (`fontbutton > button`)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web — the labels are `<span>`s inside an
+//   ordinary `<button>`, and `use-font` sets their inline `font` (apply_use_font).
+
+gtk-font-dialog-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.font-button-label {
+  flex: 1;
+  text-align: start;
+}
+
+// The size box: a separator and the size, in a row of their own — which is why the element
+// wraps them in a span rather than appending both to the button.
+.font-button-size {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 6px;
+  color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);
+}
+
+.font-button-size-label {
+  min-width: 2ch;
+  font-variant-numeric: tabular-nums;
+}
+
+// The chooser: one row of families. A popover rather than a `<select>` on the button
+// itself, because `gtk_font_dialog_button_new()` is given a dialog and shows nothing until
+// it is pressed.
+.font-button-popover {
+  .font-button-chooser {
+    min-width: 180px;
+    max-width: 320px;
+    padding: 4px;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--popover-bg-color);
+    color: var(--popover-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+  }
+}

package/scss/_frame.scss

@@ -0,0 +1,41 @@
+// _frame.scss — <gtk-frame>: the 1px border, and the label that sits inside its top edge.
+//
+// libadwaita writes this rule TWICE, once for the widget node and once for the style
+// class (`widgets/_misc.scss:4-7`); the widget half is here and the class half stays in
+// `_style_classes.scss`, where every other `.frame` consumer already is. The label's
+// `margin: 4px` (`_misc.scss:12-14`) is the inset it gets inside the border, keyed on the
+// class the element puts on whatever stands in for GtkFrame's label widget — the internal
+// `<gtk-label>` `label` builds, or an author's `label-widget`.
+//
+// The BOX is GtkFrame's, not libadwaita's: the label widget takes the top line and the
+// child the rest (`gtk_frame_real_compute_child_allocation`, gtkframe.c:554-580), so the
+// host is a flex column whose children grow into whatever the pinned label leaves.
+// `overflow: hidden` is `GTK_OVERFLOW_HIDDEN` (gtkframe.c:246) — the GIR doc calls the
+// clipping out as the way to round a child's corners, at the price of its shadows.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:4-15
+// Reference: refs/gtk/gtk/gtkframe.c:246, :519-580
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-frame {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--border-color);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+
+  // GTK sizes the label widget itself and never grows it, so it is pinned at its own size
+  // (`flex: none`) and its `align-self` is the element's, written from `label-xalign`.
+  > .adw-frame-label {
+    flex: none;
+    margin: 4px;
+  }
+
+  // Everything else is the child, and it takes the height the label leaves.
+  > * {
+    flex: 1 1 auto;
+  }
+}

package/scss/_grid.scss

@@ -0,0 +1,19 @@
+// _grid.scss — <gtk-grid>: a table of cells, sized by what is in them.
+//
+// libadwaita styles the `grid` node nowhere — the grid has no node of its own beyond what
+// GtkGridLayout builds — so this partial is `display: grid` and the one default worth
+// stating: a child written without a position is attached along the columns, which is
+// `grid-auto-flow: row` (`gtk_grid_buildable_add_child`, gtkgrid.c:493-507).
+//
+// Everything else is per-instance and inline, because a selector cannot key on a number:
+// the two spacings, the two `homogeneous` flags and the orientation all go on the element
+// as `row-gap` / `column-gap` / `grid-auto-rows` / `grid-auto-columns` / `grid-auto-flow`.
+//
+// Reference: refs/gtk/gtk/gtkgrid.c:493-507
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-grid {
+  display: grid;
+  grid-auto-flow: row;
+}

package/scss/_grid_view.scss

@@ -0,0 +1,46 @@
+// _grid_view.scss — <gtk-grid-view>: the same selectable items as a list view, reflowed
+// into equal columns.
+//
+// Upstream writes `flowbox > flowboxchild, gridview > child` as ONE rule — the same
+// padding, the same `$button_radius` corner and the same four state colours a list row
+// has — so this partial includes `adw-list-selectable` from `_list_view.scss` and adds
+// only the two things a grid has: the track container and the cell floor the column
+// count is computed against.
+//
+// THE `min-width` IS LOAD-BEARING, not cosmetic. `gtk-grid-view.ts` reads it as the item
+// size for `gridViewColumns` — GTK's `GTK_SCROLL_MINIMUM` branch — because the rendered
+// width is `1fr`, i.e. the answer the count already produced. An author who wants wider
+// cells sets `min-width` on `.adw-grid-view-child` and the count follows.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_views.scss:52-91 (gridview > child)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-grid-view {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  .adw-list-view-rows {
+    position: relative;
+    display: grid;
+    // Replaced per measurement by `_applyColumns`; one column is what a view with
+    // nothing to measure shows.
+    grid-template-columns: repeat(1, 1fr);
+    gap: 6px;
+  }
+
+  .adw-grid-view-child {
+    @include list_view.adw-list-selectable;
+
+    // `gridview > child { padding: 3px; border-radius: $button_radius }`.
+    padding: 3px;
+    border-radius: var(--button-radius);
+    box-sizing: border-box;
+    min-width: 120px;
+    text-align: center;
+  }
+}

package/scss/_gtk_about_dialog.scss

@@ -0,0 +1,186 @@
+// _gtk_about_dialog.scss — <gtk-about-dialog> styling: the GTK about window's own
+// layout, which is NOT libadwaita's `<adw-about-dialog>` (a navigation view of
+// preference rows) but a bold name over a 128px logo and a four-page stack, with a
+// stack switcher where the headerbar's title widget goes.
+//
+// The DIALOG itself (scrim, sheet, header, close button) is not restated here: it is
+// `<adw-dialog>`'s chrome, which this element inherits, so the rules below only cover
+// the parts `gtkaboutdialog.ui` declares and nothing styles upstream either.
+//
+// Reference: refs/gtk/gtk/ui/gtkaboutdialog.ui (the tree: 12px inner spacing, 5px
+//   outer margins, 8px page spacing, the 400x100 stack, the framed scrolled pages)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss:46-56
+//   (`window.aboutdialog:not(.ssd-frame)`: a FLAT titlebar, and `image.large-icons`
+//   at 128px — which is `icon-size: 2`, GTK's DIALOG size)
+// Reference: refs/gtk/gtk/gtkaboutdialog.c:1066-1082 (the bold name label, the
+//   centre justification, the version label's own markup)
+// Copyright (c) 2008-2024 Red Hat, Inc. / The GTK authors. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-about-dialog {
+  // The `.ui` spacing, verbatim: the outer box is 5px all round with 2px between the
+  // two children (the head), and the head is 5px all round with 12px between the logo,
+  // the name and the stack.
+  .adw-gtk-about-dialog-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 5px;
+    min-width: 320px;
+    min-height: 220px;
+  }
+
+  .adw-gtk-about-dialog-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 5px;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  // `image.large-icons` → 128px. The slot exists so the logo can be absent entirely
+  // without the name moving up a line: `GtkImage` is a template child and is always
+  // there in GTK, so the space above the name is always reserved.
+  .adw-gtk-about-dialog-logo-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 128px;
+  }
+
+  .adw-gtk-about-dialog-logo {
+    width: 128px;
+    height: 128px;
+    // `icon-dropshadow` on the `.ui`'s logo image.
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 6, 0.25));
+  }
+
+  // `<span weight="bold">` from `update_name_version`, centred like every label in the
+  // box (`justify: 2`).
+  .adw-gtk-about-dialog-name {
+    font-weight: bold;
+    font-size: 1.1em;
+    text-align: center;
+    user-select: text;
+  }
+
+  // `GtkStack` with `width-request: 400`, `height-request: 100`, and the crossfade
+  // transition (16) at 600ms.
+  .adw-gtk-about-dialog-stack {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 300px;
+    min-height: 100px;
+    flex: 1 1 auto;
+  }
+
+  .adw-gtk-about-dialog-page {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1 1 auto;
+    justify-content: center;
+    text-align: center;
+    padding: 6px 12px;
+    // The crossfade between pages: 600ms is the `.ui`'s `transition-duration`.
+    animation: adw-gtk-about-dialog-page-in 600ms ease;
+  }
+
+  .adw-gtk-about-dialog-version,
+  .adw-gtk-about-dialog-comments,
+  .adw-gtk-about-dialog-copyright {
+    // `wrap: 1` with `max-width-chars: 60` on the comments and copyright labels.
+    max-width: 60ch;
+    margin: 0 auto;
+  }
+
+  .adw-gtk-about-dialog-website,
+  .adw-gtk-about-dialog-license,
+  .adw-gtk-about-dialog-license-link {
+    max-width: 60ch;
+    margin: 0 auto;
+  }
+
+  // `GtkStackSwitcher` in the titlebar: a row of flat buttons, the visible page's
+  // checked. No title text beside them, because the `.ui` declares none.
+  .adw-gtk-about-dialog-switcher {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .adw-gtk-about-dialog-switcher-item {
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-weight: 500;
+    color: var(--window-fg-color);
+    background-color: transparent;
+    border: none;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:checked,
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  // The three framed pages: a scrolled window with `has-frame` around a `.view`
+  // viewport, and the credits grid inside it.
+  .adw-gtk-about-dialog-scrolled {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 9px;
+    background-color: var(--view-bg-color);
+  }
+
+  .adw-gtk-about-dialog-text {
+    margin: 5px;
+    // `GTK_WRAP_NONE` unless `wrap-license` asked for `GTK_WRAP_WORD`.
+    white-space: pre;
+    font-size: 0.9em;
+  }
+
+  .adw-gtk-about-dialog-text-view.wrap .adw-gtk-about-dialog-text {
+    white-space: pre-wrap;
+  }
+
+  // `add_credits_section`: a two-column grid, headings right-aligned in column 0 and
+  // people left-aligned in column 1, with 2px between rows and 8px between columns.
+  .adw-gtk-about-dialog-credits-grid {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 2px 8px;
+    padding: 5px;
+    align-items: center;
+  }
+
+  .adw-gtk-about-dialog-credits-heading {
+    text-align: right;
+    font-size: 0.9em;
+    font-weight: 500;
+  }
+
+  .adw-gtk-about-dialog-credits-person {
+    text-align: left;
+    font-size: 0.9em;
+    user-select: text;
+  }
+}
+
+@keyframes adw-gtk-about-dialog-page-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/scss/_headerbar.scss

@@ -128,3 +128,135 @@ adw-window.devel adw-header-bar {
       transparent 32px 64px
     );
 }
+
+/*********************
+ * Gtk.HeaderBar    *
+ *********************/
+
+// GTK's own bar, in the SAME file upstream styles `Adw.HeaderBar` in: libadwaita keys
+// `headerbar`, `windowhandle > box` and `box.start`/`box.end` off the GtkHeaderBar CSS tree
+// (refs/gtk/gtk/gtkheaderbar.c:99-116), and the element builds that tree here — so the
+// selectors are the same ones and the two bars sit on the same surface.
+//
+// `order` on the three children rather than their DOM order: the title widget is ADOPTED
+// into the centre `box` after the two side boxes are already in it, and a flex row lays out
+// in DOM order. The centring itself is the `flex: 1` centre track, which is
+// `gtk_center_layout_distribute`'s rule that the centre is clamped to
+// `size - (start.natural + end.natural)` (gtkcenterlayout.c:155-157) — the two ends keep
+// their natural width and the title takes what is left.
+//
+// The `.title` label is the derived one, and `min-width: 5ch` is `width-chars = 5`
+// (MIN_TITLE_CHARS, gtkheaderbar.c:117, :287) as CSS: a bar with a short title must not
+// collapse its centre to nothing and drop the ends on each other.
+gtk-header-bar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 47px;
+  background-color: var(--headerbar-bg-color);
+  color: var(--headerbar-fg-color);
+  box-shadow: inset 0 -1px var(--headerbar-shade-color);
+
+  > .adw-gtk-header-bar-handle > .adw-gtk-header-bar-box {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    // `_header-bar.scss:20-26` — the padding around the bar's whole content, and the 6px
+    // spacing between the packed children at either side.
+    padding: 6px 7px 7px 7px;
+
+    > .adw-gtk-header-bar-start {
+      order: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      // `:29-37` — the gap libadwaita puts between the centre and a side.
+      margin-right: 6px;
+    }
+
+    > .adw-gtk-header-bar-end {
+      order: 2;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-left: 6px;
+    }
+
+    > :not(.adw-gtk-header-bar-start):not(.adw-gtk-header-bar-end) {
+      order: 1;
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // The derived `GtkLabel` (gtkheaderbar.c:274-290): no wrap, `single-line-mode`,
+  // `ellipsize = END`, `width-chars = 5`, and the `title` style class on top — which
+  // `_header-bar.scss:213-219` gives 12px of padding either side and a bold weight.
+  > .adw-gtk-header-bar-handle > .adw-gtk-header-bar-box > .adw-gtk-header-bar-title {
+    min-width: 5ch;
+    padding: 0 12px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/************************
+ * Gtk.WindowControls  *
+ ************************/
+
+// The three frame buttons, off libadwaita's own `windowcontrols > button > image`
+// (refs/libadwaita/src/stylesheet/widgets/_header-bar.scss:175-207). A button is a 24px
+// square with 5px of padding; the IMAGE carries the whole hover/active affordance — a
+// circular `$button_color` disc that grows darker — which is why the disc and not the button
+// is what has a background here.
+gtk-window-controls {
+  display: flex;
+  align-items: center;
+  // `:176` — the gap between two controls.
+  gap: 3px;
+
+  > .adw-window-controls-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    padding: 5px;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+
+    > .adw-icon {
+      // `:189-199` — the disc, its radius and its transitions.
+      background-color: var(--button-bg-color);
+      border-radius: 100%;
+      padding: 4px;
+      transition:
+        background-color 150ms ease-out,
+        box-shadow 150ms ease-out;
+
+      @media (prefers-contrast: more) {
+        box-shadow: inset 0 0 0 1px var(--border-color);
+      }
+    }
+
+    &:hover > .adw-icon {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active > .adw-icon {
+      background-color: var(--button-active-color);
+    }
+
+    // `:204-206` — the window icon is not a button, so it takes a margin, not a padding.
+    > .icon {
+      margin: 9px;
+    }
+  }
+}