@gjsify/adwaita-web 0.54.0 → 0.56.0

package/scss/_toggle_group.scss

@@ -24,6 +24,13 @@ adw-toggle-group {
   border-radius: var(--button-radius);
   background-color: var(--button-bg-color);
 
+  // `toggle-group:disabled` (libadwaita `_toggle-group.scss:16`) — the whole group's
+  // background mixed toward transparent. Written against `[disabled]` and not `:disabled`:
+  // a custom element is never `:disabled`, the way `_expander.scss` records.
+  &[disabled] {
+    background-color: color-mix(in srgb, var(--button-bg-color) var(--disabled-opacity), transparent);
+  }
+
   .adw-toggle-group-inner {
     display: flex;
     align-items: stretch;
@@ -70,6 +77,20 @@ adw-toggle-group {
       outline-offset: 1px;
     }
 
+    // A `<button disabled>` carries GTK's `:disabled` dimming — `_buttons.scss:58`,
+    // `filter: Opacity(var(--disabled-opacity))` — and `cursor: default` with it
+    // (`_button.scss`). Hover and active are suppressed because a disabled button takes
+    // neither, so the hover fill would linger over a toggle that cannot be pressed.
+    &:disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+
+      &:hover,
+      &:active {
+        background-color: transparent;
+      }
+    }
+
     // The active toggle — a raised white chip, the way libadwaita draws it.
     &.active {
       background-color: var(--active-toggle-bg-color);
@@ -81,6 +102,13 @@ adw-toggle-group {
       &:hover {
         background-color: var(--active-toggle-bg-color);
       }
+
+      // The raised chip is what makes it read as raised; libadwaita drops the shadow on a
+      // disabled active toggle (`_toggle-group.scss:131`) so an unavailable choice does not
+      // look pressed.
+      &:disabled {
+        box-shadow: none;
+      }
     }
   }
 

package/scss/_tree_expander.scss

@@ -0,0 +1,62 @@
+// _tree_expander.scss — <gtk-tree-expander>: the indents and the disclosure arrow in
+// front of a tree row's contents.
+//
+// libadwaita gives the widget itself ONE declaration — `treeexpander { border-spacing:
+// 4px }` (_column-view.scss:128-130), which is the gap between the indents, the expander
+// and the child — and styles the arrow through the generic `expander` node: a 16×16 box
+// drawn with `pan-end-symbolic`, turning to `pan-down-symbolic` when `:checked`
+// (_expanders.scss:1-10).
+//
+// An INDENT has no rule upstream at all: `GtkBuiltinIcon` with css-name `indent` draws
+// nothing and occupies the icon's own 16px. That is why the indent below is a fixed box
+// rather than a margin on the child — the child keeps its own box, and an expandable row
+// and its leaf sibling line up because they have the SAME number of boxes in front of
+// them, which is the whole point of `indent-for-icon`.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_column-view.scss:128-130
+// Reference: refs/libadwaita/src/stylesheet/widgets/_expanders.scss:1-10
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-tree-expander {
+  display: flex;
+  align-items: center;
+  // `border-spacing: 4px` between every node the widget holds.
+  gap: 4px;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+    border-radius: var(--button-radius);
+  }
+
+  .adw-tree-expander-indent {
+    flex: none;
+    display: block;
+    // The `indent` node is an icon-sized box that draws nothing.
+    width: 16px;
+    height: 16px;
+  }
+
+  .adw-tree-expander-icon {
+    flex: none;
+    opacity: 0.7;
+    transform: rotate(0deg);
+    transition: transform 0.2s ease-out;
+    cursor: pointer;
+
+    // `:checked` turns pan-end into pan-down; one quarter turn is the same picture.
+    &.expanded {
+      transform: rotate(90deg);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &[aria-disabled='true'] .adw-tree-expander-icon {
+    filter: opacity(var(--disabled-opacity));
+  }
+}

package/scss/_variables.scss

@@ -76,7 +76,7 @@
   --button-active-color: rgba(0, 0, 6, 0.19);
 
   // Entries
-  --entry-bg-color: #ffffff;
+  --entry-bg-color: rgba(0, 0, 6, 0.1);
   --entry-border-color: rgba(0, 0, 6, 0.18);
   --entry-border-hover-color: rgba(0, 0, 6, 0.28);
 

package/scss/_video.scss

@@ -0,0 +1,146 @@
+// _video.scss — <gtk-video>: the overlay, the big circular play glyph, and the controls
+// bar that reveals itself for three seconds.
+//
+// libadwaita styles `GtkVideo` in ONE place, and it is three lines
+// (refs/libadwaita/src/stylesheet/widgets/_misc.scss:74-81):
+//
+//   video {
+//     & image.osd {
+//       min-width: 64px;
+//       min-height: 64px;
+//       border-radius: 32px;
+//     }
+//   }
+//
+// Those three values are kept VERBATIM below, and the reason they are interesting is that
+// they are a `.circular` button at a LARGER size: libadwaita's own circular button is 34px
+// with a 9999px radius (refs/libadwaita/src/stylesheet/widgets/_buttons.scss:311-319), and
+// the video's icon is 64px with a 32px radius — half its own width, which for a circle is
+// the same shape at twice the size. So the radius here is `min-width / 2` and not the 9999px
+// the button uses, and that difference is upstream's, not a porting shortcut.
+//
+// The `.osd` HALF is `%osd` (refs/libadwaita/src/stylesheet/_common.scss:43-60): the
+// on-screen-display surface — a translucent dark plate, a near-white foreground and the
+// accent colours recomputed to sit on it. `_style_classes.scss` already owns `.osd` for every
+// widget, so the icon here gets it for free and nothing in this partial restates it.
+//
+// The controls bar wears `.osd` AND `.bottom` (refs/gtk/gtk/ui/gtkvideo.ui). `.osd` is the
+// half with a rule — the same `%osd` surface — and `.bottom` is a PLACEMENT class with no
+// libadwaita rule anywhere: `grep` over `refs/libadwaita/src/stylesheet/` finds `bottom`
+// only on `bottom-sheet`, `bottom-bar`, `notebook.bottom` and `colorchooser.bottom`, none of
+// which is a video. It is GTK's own hint from the template and it is honoured here as the
+// vertical placement it plainly is — the bar sits at the end of the cross axis — with the
+// padding the `.osd` toolbar takes (12px, refs/libadwaita/src/stylesheet/widgets/
+// _toolbars.scss:96-100).
+//
+// THE REVEALER IS A TRANSITION, NOT A TOGGLE WITH A DELAY. `gtk_video_reveal_controls`
+// (gtkvideo.c:125-133) reveals a `GtkRevealer` and arms a 3 s timeout that hides it again,
+// and the motion controller re-arms on every movement — so the bar is out after three
+// seconds of stillness, not three seconds after the first movement, and the element's
+// `revealControls()` re-arms for the same reason. The `transition` below is the revealer's
+// own cross-fade, and `.revealed` is the only state selector: there is no `hidden` to fight
+// because the revealer never leaves the layout.
+//
+// `graphics-offload` HAS NO RULE, AND SAYS SO. `GtkGraphicsOffload` moves a subtree into a
+// shared GL texture so it and its neighbours composite on the GPU; CSS has no such
+// mechanism, so the class the element sets is deliberately UNSTYLED. A page may target it,
+// nothing in this package does, and the property is observed rather than listed as a gap in
+// `check-adwaita-element-properties.mjs` — the property is read and written faithfully, what
+// it does not buy is a faster composite.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:74-81 (the whole GtkVideo
+//   block), _common.scss:43-60 (`%osd`), _buttons.scss:311-319 (`.circular`),
+//   _toolbars.scss:96-100 (`.toolbar.osd`)
+// Reference: refs/gtk/gtk/ui/gtkvideo.ui (the `.osd .circular` icon, the `.osd .bottom`
+//   controls, the 3 s reveal), gtkvideo.c:125-133
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-video {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  // The overlay of ui/gtkvideo.ui: the media underneath, the icon over it, the revealer
+  // over that.
+  .adw-video-surface {
+    position: relative;
+    display: flex;
+
+    > video {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  // `ui/gtkvideo.ui`'s `overlay_icon`: `halign`/`valign` 3, i.e. FILL, which is what makes
+  // it centred in an overlay on both axes — GTK's own `GTK_ALIGN_FILL` on an overlay child
+  // stretches it, and this is the web's answer for "fill the overlay and centre inside it".
+  .adw-video-overlay-icon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+
+    // `min-width: 64px; min-height: 64px; border-radius: 32px` — libadwaita's own three
+    // lines for `video image.osd` (_misc.scss:76-80). The radius is half the width, which is
+    // the same shape `.circular` gives at 34px (_buttons.scss:311-319) at twice the size.
+    min-width: 64px;
+    min-height: 64px;
+    border-radius: 32px;
+
+    // `GtkImage`'s icon inside the button, and `icon-size` 2 in the template
+    // (ui/gtkvideo.ui) is GTK's dialog-scale — which is the 64px above.
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    // A GtkImage with `has-frame` unset inside an OSD plate: the plate IS the surface, so
+    // the button adds no background of its own.
+    background: none;
+    color: inherit;
+    cursor: pointer;
+
+    // `gtk_video_update_playing` (gtkvideo.c:665) sets the icon's VISIBILITY to
+    // `!playing`, so this is `visibility` rather than `display`: the icon keeps its box and
+    // the OSD plate under it is unaffected either way, which is what `[hidden]` would also
+    // give — but `hidden` is the UA rule and this one is the C's.
+    &[hidden] {
+      visibility: hidden;
+    }
+  }
+
+  // `ui/gtkvideo.ui`'s `controls_revealer`: a `GtkRevealer` with `valign` 2 (END) and
+  // `transition-type` 1 (CROSS-FADE), and `measure` 1 so the bar is allocated even while
+  // hidden — which is why this is an opacity transition and not `display: none`.
+  .adw-video-controls-revealer {
+    position: absolute;
+    inset: auto 0 0 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease-out;
+
+    &.revealed {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    // `.osd .bottom` (ui/gtkvideo.ui). The bar is `osd` — the `%osd` surface from
+    // `_common.scss:43-60` — with the padding a standalone OSD toolbar takes: 12px against
+    // the 6px of a plain one (_toolbars.scss:91-102).
+    gtk-media-controls {
+      padding: 12px;
+    }
+  }
+
+  // Playing hides the overlay icon and shows nothing over the frames. Declared as a class so
+  // a page can see the state without reading the icon's `hidden`, and because GTK's own state
+  // is a widget VISIBILITY (gtkvideo.c:665) rather than a style class.
+  &.playing .adw-video-overlay-icon {
+    pointer-events: none;
+  }
+
+  // `GtkVideo:graphics-offload` — deliberately UNSTYLED. See the header.
+}

package/scss/_view_switcher_sidebar.scss

@@ -0,0 +1,112 @@
+// _view_switcher_sidebar.scss — <adw-view-switcher-sidebar>: an <adw-sidebar> driven
+// from an <adw-view-stack>'s page list. libadwaita styles exactly ONE thing of its own —
+// the row indicator, and only the number/dot shape inside it — because the sidebar look
+// comes from `_sidebars.scss` and this element drives that widget rather than
+// reimplementing it.
+//
+// Ported from `view-switcher-sidebar .indicator` (adw-view-switcher-sidebar.c:133-181):
+//   · `background: color-mix(in srgb, currentColor 40%, transparent)`, `border-radius: 999px`
+//   · `min-width/min-height: 1.6em`, `font-weight: bold`, `font-size: smaller`
+//   · `.dot` shrinks it to 8×8 — the unread mark with no count
+//   · `> label` is white with 6px of padding each side
+//   · `.needs-attention` swaps in `--accent-bg-color`/`--accent-fg-color`
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss:250-277
+// Reference: refs/libadwaita/src/adw-view-switcher-sidebar.c:104-112, :133-181, :225-249
+// Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1-or-later.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-switcher-sidebar {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
+  color: inherit;
+}
+
+adw-view-switcher-sidebar > .view-switcher-sidebar-box {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+adw-view-switcher-sidebar > adw-sidebar {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+adw-view-switcher-sidebar > .view-switcher-sidebar-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: var(--sidebar-bg-color, var(--window-bg-color));
+  color: var(--sidebar-fg-color, var(--window-fg-color));
+}
+
+adw-view-switcher-sidebar > .view-switcher-sidebar-placeholder[hidden] {
+  display: none;
+}
+
+// `&:not(.page).empty statuspage { @extend .compact }` — the empty state is compact in
+// sidebar mode and a full page in `page` mode, where it is one of several boxed pages.
+adw-view-switcher-sidebar.page > .view-switcher-sidebar-placeholder {
+  position: static;
+  margin: var(--spacing-m);
+}
+
+adw-view-switcher-sidebar > .view-switcher-sidebar-prefix,
+adw-view-switcher-sidebar > .view-switcher-sidebar-suffix {
+  flex-shrink: 0;
+}
+
+adw-view-switcher-sidebar > .view-switcher-sidebar-prefix:empty,
+adw-view-switcher-sidebar > .view-switcher-sidebar-suffix:empty,
+adw-view-switcher-sidebar > .view-switcher-sidebar-placeholder:empty {
+  display: none;
+}
+
+// --- The row indicator ----------------------------------------------------
+
+adw-view-switcher-sidebar .indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  min-width: 1.6em;
+  min-height: 1.6em;
+  margin-inline-start: auto;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 40%, transparent);
+  font-weight: bold;
+  font-size: smaller;
+  line-height: 1;
+}
+
+adw-view-switcher-sidebar .indicator[hidden] {
+  display: none;
+}
+
+adw-view-switcher-sidebar .indicator.dot {
+  min-width: 8px;
+  min-height: 8px;
+}
+
+adw-view-switcher-sidebar .indicator > label,
+adw-view-switcher-sidebar .indicator > .numeric {
+  color: white;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+adw-view-switcher-sidebar .indicator.needs-attention {
+  background: var(--accent-bg-color);
+}
+
+adw-view-switcher-sidebar .indicator.needs-attention > label,
+adw-view-switcher-sidebar .indicator.needs-attention > .numeric {
+  color: var(--accent-fg-color);
+}

package/scss/_viewport.scss

@@ -0,0 +1,50 @@
+// _viewport.scss — <gtk-viewport>: the scrollport a `GtkScrolledWindow` puts its child in.
+//
+// LIBADWAITA STYLES NOTHING HERE, and that is the whole file's justification for existing:
+// `_scrolling.scss` has rules for `scrollbar` and for `scrolledwindow` and none for
+// `viewport`, because GTK gives the node no surface to paint (gtkviewport.c:353). What is
+// below is therefore the CSS of the NODE GTK builds — the measurement, the clipping and the
+// one allocation `gtk_viewport_size_allocate` performs — and each declaration says which half
+// of it it is.
+//
+// THE CHILD IS ALLOCATED ITS NATURAL SIZE. GTK measures the child and hands it that
+// (gtkviewport.c:517-560), so content wider than the window scrolls sideways instead of being
+// squeezed into it. A flex container whose items are `flex: none` is that rule in CSS:
+// `flex-basis: auto` sizes an item to its content and `flex-shrink: 0` keeps it there, and
+// `align-items: flex-start` stops the cross axis from stretching it to fill.
+//
+// THE SCROLLING IS THE PLATFORM'S. GTK's viewport translates its child by the adjustment
+// instead of scrolling it, and the browser's equivalent of a scrollport that scrolls is a
+// scroll container — with the SCROLLBAR hidden, because in GTK those belong to the scrolled
+// window (which builds them, gtkscrolledwindow.c:4356-4363) and never to the viewport. The one
+// consequence worth writing down is the momentum after a touch release: GTK's
+// `GtkKineticScrolling` is a deceleration curve a page cannot hand a browser, so what a reader
+// gets is the platform's own — see `GtkScrolledWindow:kinetic-scrolling`.
+//
+// `overflow: auto`, not `hidden`: a browser clamps either way, but only `auto` runs the
+// platform's momentum and rubber-banding, which is the whole of what a touch scroll does here.
+
+gtk-viewport {
+  display: flex;
+  // A COLUMN, which is a statement about markup rather than about GTK: a GtkViewport holds
+  // exactly ONE child, so a row and a column are the same layout there. Markup can hand a
+  // viewport several children, and stacking them is the arrangement every one of them came
+  // for — a row would lay ten labels side by side, which is the one answer no reader of a
+  // scrollable expects. A single child is unaffected by the direction.
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow: auto;
+  // Both axes' scrollbars, hidden — `-webkit-scrollbar` for the engine that honours
+  // `scrollbar-width: none` only since 121, the pairing `_carousel.scss` already uses.
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  // `flex: none` is `flex: 0 0 auto` — GTK's "the child's natural size, not less".
+  > * {
+    flex: none;
+  }
+}

package/scss/_widget.scss

@@ -4,7 +4,8 @@
 // projected `.blp` hands them to `buildSharedTree` as attributes (`halign="center"`). Until
 // this partial nothing read them, so the gallery's bottom sheet stretched the button its
 // Blueprint centres. The margins are not here: an attribute cannot carry a length into CSS
-// portably, so `shared-tree-builder.ts` writes them as inline style.
+// portably, so `shared-tree-builder.ts` writes them as inline style — and so are
+// `width-request` / `height-request`, as the `min-width` / `min-height` they are.
 //
 // ALIGNMENT IS AN AUTO MARGIN, because that is the one CSS placement that means the same on
 // both axes of a flex container and of a grid: GTK allocates a non-FILL child its natural
@@ -49,7 +50,17 @@
   margin-block: auto;
 }
 
-gtk-box:not([orientation='vertical']) > [hexpand],
-gtk-box[orientation='vertical'] > [vexpand] {
+gtk-box:not([orientation='vertical']) > [hexpand]:not([hexpand='false']),
+gtk-box[orientation='vertical'] > [vexpand]:not([vexpand='false']) {
   flex-grow: 1;
 }
+
+// An AUTHORED `hexpand: false` is the one case where absence is not enough: a widget that
+// grows by default (`<gtk-scrolled-window>` is `flex: 1 1 0%`, the allocation of a window in a
+// column) must stop, and GTK then gives it its NATURAL size rather than nothing — hence the
+// `auto` basis, not just a zero grow. `width-request` (an inline `min-width`) is the floor.
+gtk-box:not([orientation='vertical']) > [hexpand='false'],
+gtk-box[orientation='vertical'] > [vexpand='false'] {
+  flex-grow: 0;
+  flex-basis: auto;
+}

package/scss/_window.scss

@@ -1,11 +1,16 @@
 // _window.scss — adw-window styling.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss (the frame; the
+//   `.maximized`/`.fullscreen` rules at 66-72 are the ones an in-page frame can use)
 // Reference: refs/adwaita-web/adwaita-web/scss/_window.scss
-// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-adw-window {
+// `adw-application-window` is `adw-window` plus a menubar (it extends the class and adds nothing
+// else), so it is the same frame: without this an application window was an inline box with no
+// size at all, and a tree rooted at one measured 0 x 0.
+adw-window,
+adw-application-window {
   display: flex;
   flex-direction: column;
   background-color: var(--window-bg-color);
@@ -20,4 +25,128 @@ adw-window {
   overflow: hidden;
   outline: 1px solid rgb(255 255 255 / 7%);
   outline-offset: -1px;
+
+  // `window.maximized` / `window.fullscreen` zero the radius and drop the shadow
+  // (_window.scss:66-72). A page-sized window IS the maximised one here: the frame
+  // is in-page, so there is nothing outside it to cast a shadow on.
+  &.maximized,
+  &.fullscreen {
+    --window-radius: 0px;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// The content area — the one child slot `Adw.Window:content` fills. It takes the
+// window's own column, so a toolbar view dropped in stretches both ways.
+.adw-window-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+// A window hands its one child the WHOLE allocation, whatever that child's own expand flags say.
+// On the web a box is only as tall as what it holds, so the `Gtk.Box` a `.blp` roots its content
+// in stopped at its header bar and the split view below it drew a quarter of the window.
+.adw-window-content > gtk-box {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+// <gtk-window> — the GTK frame, in the SAME file upstream styles `Adw.Window` in: libadwaita
+// keys `window { &.csd { … } }` off the GtkWindow CSS node
+// (refs/libadwaita/src/stylesheet/widgets/_window.scss:1-31), and this element IS a window
+// as far as the stylesheet is concerned.
+//
+// The frame rules are `<adw-window>`'s, restated for the `gtk-` tag rather than shared
+// through a selector list: `_reset.scss` re-roots the box model at each registered element,
+// and a shared `adw-window, gtk-window` block would put two component resets in one rule.
+//
+// NOT the same as `<adw-window>`, deliberately. `Adw.Window` is a plain styled container —
+// nothing about it is GTK's `GtkWindow` — while this one answers the FRAME properties:
+// `decorated` drops the titlebar strip, `maximized` and `fullscreened` square the corners
+// off and drop the shadow (`_window.scss:66-72`), and the strip itself is either the
+// application's `titlebar` or the two `<gtk-window-controls>` a server-side decoration would
+// have had. See `gtk-window.ts` for the whole list and each source line.
+gtk-window,
+gtk-application-window {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  border-radius: var(--window-radius);
+  outline: 1px solid rgb(255 255 255 / 7%);
+  outline-offset: -1px;
+  box-shadow:
+    0 0 14px 5px rgb(0 0 0 / 15%),
+    0 0 5px 2px rgb(0 0 0 / 10%),
+    0 0 0 1px rgb(0 0 0 / 5%);
+  overflow: hidden;
+
+  // `_window.scss:66-72` — a maximized or fullscreen window fills the screen, so it has no
+  // corners to round and no frame to cast a shadow from.
+  &.maximized,
+  &.fullscreen {
+    --window-radius: 0px;
+    outline: none;
+    box-shadow: none;
+  }
+
+  // The strip: an application's `titlebar` slot, or the two window-control groups and the
+  // window's own title. `min-width: 0` on the title is what lets a long one ellipsize
+  // instead of pushing the end controls out of the frame.
+  > .adw-gtk-window-titlebar {
+    display: flex;
+    align-items: center;
+    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-window-title {
+      flex: 1;
+      min-width: 0;
+      padding: 0 12px;
+      font-weight: bold;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // A window with no title shows no title; GTK would draw the empty SSD label, and an
+    // empty flex track is exactly that.
+    &:has(> .adw-gtk-window-title:not([title])) > .adw-gtk-window-title {
+      display: none;
+    }
+  }
+
+  > .adw-gtk-application-window-menubar {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 6px;
+    padding: 0 6px;
+    background-color: var(--headerbar-bg-color);
+    color: var(--headerbar-fg-color);
+    box-shadow: inset 0 -1px var(--headerbar-shade-color);
+  }
+
+  // `Gtk.Box`'s own `border-spacing` is 0 here; the gap between the window's children is the
+  // application's business, and the content box exists so it can have one without the strip
+  // taking part.
+  > .adw-gtk-window-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
 }

package/scss/_window_handle.scss

@@ -0,0 +1,20 @@
+// _window_handle.scss — <gtk-window-handle>: the box GTK's `GtkBinLayout` gives the child.
+//
+// `gtk_window_handle_class_init` sets `GTK_TYPE_BIN_LAYOUT` and the `windowhandle` CSS name
+// (gtkwindowhandle.c:553-554), and libadwaita has NO rule for either — the widget contributes
+// no surface, a shadow or a border, only the titlebar's gestures. `display: contents` is that
+// in CSS: the child keeps its own box, participates in its PARENT's layout as if the handle
+// were not there, and a titlebar strip can go anywhere a header bar goes without moving
+// anything around it.
+//
+// `user-select: none` is the one declaration that is not C: a titlebar is dragged, not
+// selected, and GTK's drag gesture swallows the text selection a browser would otherwise
+// start on the way to a triple click.
+
+gtk-window-handle {
+  display: contents;
+
+  // The drag belongs to the strip, not to the text inside it, and a double click on the
+  // title is the `toggle-maximize` gesture rather than a word selection.
+  user-select: none;
+}