@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_column_view.scss

@@ -0,0 +1,126 @@
+// _column_view.scss — <gtk-column-view>: a header of column buttons over the same rows a
+// list view draws, with one cell per column.
+//
+// Every number here is upstream's: the header button's `3px 6px` padding and its
+// `border-left: 1px solid transparent` (which `.column-separators` then COLOURS rather
+// than adds, so turning separators on cannot shift the layout), the cells' `8px 6px`, and
+// the header text at 40% of `currentColor` rising to 70% on hover
+// (_column-view.scss:12-48).
+//
+// `.separators` is deliberately the SAME class a list view uses: `show-row-separators` is
+// passed straight through to the inner list view upstream, whose node then carries
+// `.separators` — so the rule reads `columnview.separators > row`, one hop shorter than
+// the C's node tree and with the same meaning.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_column-view.scss:1-112
+// Reference: refs/libadwaita/src/stylesheet/widgets/_labels.scss (.caption-heading)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-column-view {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  .adw-column-view-header {
+    display: grid;
+  }
+
+  .adw-column-view-header-cell {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    // `> header > button { padding: 3px 6px; border-radius: 0; background: transparent }`.
+    padding: 3px 6px;
+    border: 0;
+    border-left: 1px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    font: inherit;
+    font-size: var(--font-size-small);
+    font-weight: 700;
+    text-align: start;
+    color: color-mix(in srgb, currentColor 40%, transparent);
+    cursor: pointer;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+
+    &:hover {
+      color: color-mix(in srgb, currentColor 70%, transparent);
+    }
+
+    &:active {
+      color: currentColor;
+    }
+
+    // A column with no sorter is not a button in any useful sense: upstream simply never
+    // activates it, and the cursor is what says so here.
+    &:disabled {
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+  }
+
+  .adw-column-view-header-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // `sort-indicator { min-height: 16px; min-width: 16px }`, drawn as pan-up when
+  // ascending — here one `go-down` icon turned over, the substitution the element header
+  // records.
+  .adw-column-view-sort-indicator {
+    flex: none;
+    margin-inline-start: auto;
+
+    &.ascending {
+      transform: rotate(180deg);
+    }
+  }
+
+  .adw-list-view-rows {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .adw-column-view-row {
+    @include list_view.adw-list-selectable;
+
+    // `> listview > row { padding: 0 }` — the padding moved to the cells.
+    display: grid;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .adw-column-view-cell {
+    padding: 8px 6px;
+    box-sizing: border-box;
+    border-left: 1px solid transparent;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+  }
+
+  &.column-separators {
+    .adw-column-view-cell,
+    .adw-column-view-header-cell {
+      border-left-color: var(--border-color);
+    }
+  }
+
+  &.separators .adw-column-view-row:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+  }
+}

package/scss/_drag_icon.scss

@@ -0,0 +1,55 @@
+// _drag_icon.scss — <gtk-drag-icon>: the one widget whose CSS node libadwaita styles for
+// the WHOLE widget rather than for one state.
+//
+// `gtk_widget_class_set_css_name (widget_class, "dnd")` (gtkdragicon.c:383) is the whole
+// of the widget's styling, and libadwaita's only rule on that node is a foreground colour
+// (`_common.scss:30-32`). The second rule naming it — `dnd tab` in `_tab-view.scss` — is a
+// `GtkTabView` tab being dragged out of a tab view, which is that widget's node to style,
+// not a property of this one.
+//
+// EVERYTHING ELSE HERE IS GEOMETRY, and each value says which part of the C it stands in
+// for. The box is FIXED-POSITIONED because a drag icon has no parent to lay out in: it is
+// a `GtkRoot` with its own surface (:106-108), and `gtk_drag_icon_move_resize` (:138-150)
+// does the one thing a layout would have done — put the icon where the pointer is, at the
+// child's preferred size (`:180-188`).
+//
+// Reference: refs/gtk/gtk/gtkdragicon.c:106-108,138-150,180-188,380,386-390
+// Reference: refs/libadwaita/src/stylesheet/_common.scss:30-32
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-drag-icon {
+  // `dnd { color: var(--window-fg-color) }` — the whole of libadwaita's rule, and the
+  // reason a drag icon's LABEL is the window foreground rather than its own.
+  color: var(--window-fg-color);
+  // `gtk_widget_set_can_target (self, FALSE)` (:386-390) has no CSS of its own, but this
+  // is the layer it describes: an icon that is pointed at takes no pointer event.
+  pointer-events: none;
+  // The drag surface is a root of its own (:106-108), so it is placed against the
+  // VIEWPORT rather than a parent box. The element writes the position itself, on every
+  // `dragover` — which is `gtk_drag_icon_move_resize` (:138-150) on the surface.
+  position: fixed;
+  left: 0;
+  top: 0;
+  // Above the window chrome and below the toasts, which is where a drag image belongs: it
+  // is over the window it was dragged out of, and under a toast that arrived after it.
+  z-index: 5000;
+  // `surface_compute_size` (:180-188) sizes the surface to the child's PREFERRED size, so
+  // the icon is exactly as big as what it carries: `max-content` is the one CSS length that
+  // measures content rather than a box.
+  width: max-content;
+  height: max-content;
+
+  // The `GtkColorSwatch` `createWidgetForValue` builds for a `GdkRGBA`
+  // (gtkdragicon.c:544-553), which is a square of the colour it carries — nothing else,
+  // because `set_can_drag`/`set_can_drop` are FALSE and the two states are the only thing
+  // a swatch has that this one does not need. The large size is `ICON_SIZE_LARGE`, which
+  // is the 32px `.large-icons` sets (_common.scss:38-41).
+  .adw-drag-icon-swatch {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+}

package/scss/_drawing.scss

@@ -0,0 +1,85 @@
+// _drawing.scss — <gtk-drawing-area>, and the page's other hand-drawn surfaces.
+//
+// THERE IS NO UPSTREAM FILE TO PORT. `GtkDrawingArea` sets no CSS name of its own, so
+// its node is the default `widget` node (gtkwidget.c:1982), and libadwaita's stylesheet
+// has no rule for it — nor for `glarea`, which sets no name either, nor for
+// `graphicsoffload`, whose only rule is the widget-node layout GTK gives a bin. So this
+// partial is GEOMETRY, and every value in it is transcribed from a measure function in
+// the C rather than from a stylesheet upstream does not have. Saying that is the point:
+// the rules below are not a re-skin, they are the measurement written out.
+//
+// CONTENT-WIDTH IS A FLOOR, NOT A SIZE. `gtk_drawing_area_measure` returns
+// `content_width` as the minimum AND the natural width (gtkdrawingarea.c:210-231), so a
+// parent may hand the area MORE than it asked for — which is what `width: <length>`
+// means for a block box — and cannot hand it less, which is `min-width`. The zero default
+// is "no intrinsic size", and `auto` is the block box's own answer to that.
+//
+// Reference: refs/gtk/gtk/gtkdrawingarea.c:210-231,240-267
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-drawing-area {
+  display: block;
+  // The natural half: a parent with room to spare gives the area more, and a parent
+  // without gives it exactly the floor below.
+  width: var(--adw-drawing-width, auto);
+  height: var(--adw-drawing-height, auto);
+  // The minimum half — the same number, which is why both read one custom property.
+  min-width: var(--adw-drawing-width, 0);
+  min-height: var(--adw-drawing-height, 0);
+
+  // The cairo region GTK hands the draw function is the whole allocation
+  // (gtkdrawingarea.c:248-262), so the canvas is the whole box rather than a scaled
+  // child of it.
+  .adw-drawing-area-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// <gtk-gl-area> — `GtkGLArea` sets no CSS name (no `gtk_widget_class_set_css_name` in
+// gtkglarea.c), so its node is the generic `widget` node and libadwaita has no rule for
+// it. It also has NO measure function, which is the rule that shapes what follows: the
+// area reports no intrinsic size on either axis, so a parent gives it one.
+gtk-gl-area {
+  display: block;
+  position: relative;
+
+  .adw-gl-area-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  // `gtk_gl_area_draw_error_screen` (:701-723): the error message laid out across the
+  // widget's width and centred vertically — `pango_layout_set_width (width *
+  // PANGO_SCALE)` and `PANGO_ALIGN_CENTER`, at `(height - layout_height) / 2`. The
+  // canvas stays behind it, as GTK's snapshot replaces a frame's contents rather than
+  // the widget's node.
+  .adw-gl-area-error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 12px;
+  }
+}
+// <gtk-graphics-offload> — `GTK_TYPE_BIN_LAYOUT` (gtkgraphicsoffload.c:290) gives the
+// child the whole allocation, and the black rectangle `black_background` paints over that
+// allocation BEFORE the child (:222-229) is a BACKGROUND rather than a layer: what the
+// letterbox bars need is the wrapper black exactly where the child does not cover it.
+gtk-graphics-offload {
+  display: block;
+  position: relative;
+  // No `overflow: hidden` here: GTK's subsurface is rectangular and a rounded corner or a
+  // clip is one of the things that PROHIBITS offload (:66-68), so clipping this box would
+  // be the very condition the widget exists to avoid. It does not clip.
+  .adw-graphics-offload-child {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

package/scss/_emoji_chooser.scss

@@ -0,0 +1,213 @@
+// _emoji_chooser.scss — <gtk-emoji-chooser> styling, mirroring libadwaita's
+// `_emoji-chooser.scss` node for node.
+//
+// The upstream partial is short because GTK does the work: `popover.emoji-picker > contents`
+// gets no padding, the two boxes get theirs, and the section buttons are circular flat
+// image buttons. What it does NOT style is the list itself — GTK's `.view` scrolled
+// window and `GtkFlowBox` do that — so the flow box, the headings and the empty page are
+// spelled out here from the `.ui` instead (6px margins and spacing, a heading label per
+// section, and the `edit-find` glyph at 72px over "No Results Found").
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_emoji-chooser.scss:1-57
+//   (`popover.emoji-picker > contents`, `.emoji-searchbar`, `.emoji-toolbar`,
+//   `button.emoji-section.image-button` as a 32px circular flat button,
+//   `popover.emoji-picker emoji` at `font-size: x-large` with 6px padding and
+//   `$button_radius` corners, hover/active fills and a high-contrast outline,
+//   `scrolledwindow.view` with undershoot shading)
+// Reference: refs/gtk/gtk/ui/gtkemojichooser.ui (6px margins and spacing, the headings,
+//   the empty page's 72px glyph, `max-content-height: 320`)
+// Copyright (c) 2021-2024 The GTK authors. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-emoji-chooser {
+  // `popover.emoji-picker > contents { padding: 0 }` — the surface carries no padding
+  // of its own; the searchbar and the toolbar bring theirs.
+  padding: 0;
+
+  .emoji-picker-root {
+    display: flex;
+    flex-direction: column;
+    min-width: 260px;
+  }
+
+  .emoji-searchbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+  }
+
+  .emoji-search-icon {
+    flex: 0 0 auto;
+  }
+
+  .emoji-search-entry {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 6px 8px;
+    font: inherit;
+    color: inherit;
+    background-color: var(--entry-bg-color);
+    border: 1px solid var(--entry-border-color);
+    border-radius: 9px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--accent-color);
+    }
+  }
+
+  .emoji-stack {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  // `scrolledwindow.view` (`max-content-height: 320`) with the undershoot shading the
+  // upstream rule draws at the two ends the scroll position is not at.
+  .emoji-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 6px;
+    background-color: var(--view-bg-color);
+    color: var(--view-fg-color);
+  }
+
+  .emoji-heading {
+    font-weight: 500;
+    text-align: start;
+    padding: 2px 0;
+  }
+
+  // `GtkFlowBox` with `homogeneous: 1`: every emoji the same width, wrapping by row.
+  .emoji-flowbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  // `popover.emoji-picker emoji` — `font-size: x-large`, 6px padding, the button radius.
+  .emoji {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 6px;
+    font-size: 1.5em;
+    line-height: 1;
+    border-radius: var(--button-radius);
+    border: none;
+    background-color: transparent;
+    color: inherit;
+
+    &:focus,
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    @media (prefers-contrast: more) {
+      &:focus,
+      &:hover,
+      &:active {
+        box-shadow: inset 0 0 0 1px var(--border-color);
+      }
+    }
+  }
+
+  .emoji-recent-box {
+    margin-bottom: 2px;
+  }
+
+  // The `empty` stack page: `dim-label` throughout, the glyph at 72px.
+  .emoji-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 12px;
+    color: var(--dim-label-color, var(--window-fg-color));
+    opacity: 0.6;
+  }
+
+  .emoji-empty-icon {
+    width: 72px;
+    height: 72px;
+  }
+
+  .emoji-empty-title {
+    font-weight: bold;
+    font-size: 1.4em;
+  }
+
+  .emoji-empty-hint {
+    font-size: 0.95em;
+  }
+
+  // `emoji-toolbar`: 3px of padding, because the flow box children already carry 3px.
+  .emoji-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 3px;
+    border-top: 1px solid var(--separator-color);
+  }
+
+  // `button.emoji-section.image-button` — circular, flat, 32x32, unchecked by default and
+  // checked for the section the list is scrolled into.
+  .emoji-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background-color: transparent;
+    color: inherit;
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-hover-color);
+    }
+
+    &:checked,
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+
+  .emoji-section-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  // `show_variations` (:508-548): a `view`-backed box beside the emoji holding the six
+  // variants, so the second click on an emoji with skin tones lands somewhere.
+  .emoji-variations {
+    position: absolute;
+    z-index: 1;
+    padding: 6px;
+    border-radius: var(--button-radius);
+    background-color: var(--popover-bg-color);
+    color: var(--popover-fg-color);
+    box-shadow:
+      0 1px 4px rgba(0, 0, 6, 0.2),
+      0 2px 8px rgba(0, 0, 6, 0.12);
+  }
+
+  .emoji-variations-row {
+    display: flex;
+    gap: 2px;
+  }
+}

package/scss/_entry.scss

@@ -22,7 +22,12 @@ gtk-entry {
   color: var(--view-fg-color);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
-  box-shadow: inset 0 0 0 1px var(--entry-border-color);
+  // NO FRAME. `%entry_basic` (_entries.scss:1-11) draws a fill and a radius and
+  // nothing else: the one-pixel border appears ONLY under `prefers-contrast: more`
+  // (:13-15). The frame sat here unconditionally, so every entry — entry, search entry,
+  // password entry, the text view — read as an outlined box where libadwaita draws a
+  // flat grey one. Confirmed against the native reference: a focused entry carries the
+  // accent ring, an unfocused one carries no edge at all.
   transition: box-shadow 0.1s ease;
 
   &::placeholder {
@@ -30,10 +35,6 @@ gtk-entry {
     opacity: var(--dim-opacity);
   }
 
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--entry-border-hover-color);
-  }
-
   &:focus,
   &:focus-visible {
     outline: none;
@@ -44,6 +45,13 @@ gtk-entry {
   &:disabled {
     opacity: 0.45;
     cursor: default;
+  }
+
+  @media (prefers-contrast: more) {
     box-shadow: inset 0 0 0 1px var(--entry-border-color);
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--entry-border-hover-color);
+    }
   }
 }

package/scss/_entry_row.scss

@@ -10,7 +10,7 @@ adw-entry-row {
   align-items: center;
   gap: var(--spacing-m);
   min-height: 50px;
-  padding: var(--spacing-xs) var(--spacing-m);
+  padding: 0 var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 
   &:last-child {

package/scss/_expander.scss

@@ -0,0 +1,113 @@
+// _expander.scss — <gtk-expander>: the disclosure title, its arrow, and the row beneath.
+//
+// libadwaita's `_expanders.scss` is TWO selectors — the `expander` node and
+// `expander-widget` — and the element has to keep them apart, because they are different
+// nodes: `expander` is the ARROW and `expander-widget` is the widget. So the arrow is the
+// `.adw-expander-arrow` box and the widget is the tag.
+//
+// THE ARROW is upstream's whole rule, with `-gtk-icon-source` as a mask swap:
+//
+//   min-width/min-height 16px   `.adw-icon`'s own size, so this repeats it only to say the
+//                              node has no intrinsic size of its own;
+//   pan-end-symbolic           the closed glyph;
+//   pan-end-symbolic-rtl       `:dir(rtl)`, as upstream's second `-gtk-icon-source`;
+//   pan-down-symbolic           `:checked`, which this stylesheet spells `.checked` — and
+//                              `gtk_expander_set_expanded` sets the pseudoclass on the
+//                              arrow, not on the widget (gtkexpander.c:897-900);
+//   disabled                   `Opacity(var(--disabled-opacity))`.
+//
+// The `:disabled` line has nothing to bite on here, because a custom element is never
+// `:disabled` — the widget is a plain GtkWidget with no insensitive state of its own, and
+// upstream's rule exists for the `expander` node when a `Gtk.TreeView` row disables it.
+// It is written against `[disabled]` so an author who puts the attribute there gets
+// upstream's dimming rather than nothing.
+//
+// THE TITLE is `expander-widget > box > title` (`_expanders.scss:13-28`): a 6px radius, the
+// focus ring, and the arrow at 70% until the title is hovered or pressed. The box between
+// them is `.adw-expander-box`, so the selector chain is the node tree rather than a
+// coincidence.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_expanders.scss
+// Reference: refs/libadwaita/src/stylesheet/_drawing.scss (the focus-ring mixin: a 2px
+//   outline at offset -2px, which is what `outline` below spells out)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-expander {
+  display: block;
+
+  > .adw-expander-box {
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .adw-expander-box > .adw-expander-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    min-height: 30px;
+    padding: var(--spacing-xs) var(--spacing-m);
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    // `focus-ring ("> box > title")` with its default `$width: 2px` and `$offset: -$width`.
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+
+    .adw-expander-arrow {
+      opacity: 0.7;
+    }
+
+    &:hover .adw-expander-arrow,
+    &:active .adw-expander-arrow {
+      opacity: 1;
+    }
+  }
+
+  > .adw-expander-box > .adw-expander-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+.adw-expander-arrow {
+  min-width: 16px;
+  min-height: 16px;
+  flex-shrink: 0;
+  // `expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic') }`. The element sets
+  // `icon-name="pan-end"`, so the `.checked` and `:dir(rtl)` rules below are the two
+  // `-gtk-icon-source` overrides — same three glyphs, same two conditions.
+  mask-image: var(--icon-pan-end);
+  -webkit-mask-image: var(--icon-pan-end);
+
+  &[disabled] {
+    opacity: var(--disabled-opacity);
+  }
+
+  // `&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic') }`
+  &.checked {
+    mask-image: var(--icon-pan-down);
+    -webkit-mask-image: var(--icon-pan-down);
+  }
+}
+
+:dir(rtl) .adw-expander-arrow:not(.checked) {
+  // `&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl') }` — upstream
+  // states the RTL glyph on its own line, BEFORE the `:checked` one, so `:checked` wins for
+  // an RTL expander that is open. The `:not(.checked)` keeps that order without relying on
+  // it.
+  mask-image: var(--icon-pan-end-rtl);
+  -webkit-mask-image: var(--icon-pan-end-rtl);
+}

package/scss/_fixed.scss

@@ -0,0 +1,29 @@
+// _fixed.scss — <gtk-fixed>: children at pixel positions, and a box around all of them.
+//
+// `gtk_fixed_init` sets `GTK_OVERFLOW_HIDDEN` (gtkfixed.c:189-195), so the fixed clips a
+// child that reaches past its own bounds — and the element sizes those bounds from the
+// union of the children (`gtk_fixed_layout_measure`, gtkfixedlayout.c:224-300), which is
+// what makes `overflow: hidden` a clipping rule rather than a layout one.
+//
+// The children are out of flow, which is what a position means: `position: absolute` against
+// the fixed's own padding box, which `gtk_fixed_layout_allocate` does by handing each child
+// its measured size at (x, y). `left` / `top` DEFAULT TO ZERO and not to CSS's `auto`
+// because `gtk_fixed_buildable_add_child` puts an unpositioned child at 0, 0
+// (gtkfixed.c:171-177), and `auto` would resolve it to its STATIC position instead.
+//
+// Reference: refs/gtk/gtk/gtkfixed.c:171-177, :189-195
+// Reference: refs/gtk/gtk/gtkfixedlayout.c:224-300
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-fixed {
+  display: block;
+  position: relative;
+  overflow: hidden;
+
+  > * {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}