@gjsify/adwaita-web 0.53.0 → 0.55.0

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);
 
@@ -118,21 +118,37 @@
   --spacing-l: 18px;
   --spacing-xl: 24px;
 
-  // Typography — GNOME default: Adwaita Sans 11. The tail is a PLATFORM-NATIVE
-  // ladder, and it is there because the families above it resolve on a GNOME desktop
-  // and NOWHERE ELSE: 'Adwaita Sans' is NAMED, not shipped (`status/stylesheet-font-
-  // families.json`), and 'Cantarell' is its predecessor. A macOS host has neither,
-  // and the `sans-serif` generic is Helvetica there — #1817, a widget set that looks
-  // right on the machine it was authored on and lands on Helvetica in every screenshot
-  // a consumer takes. `system-ui` asks the host for its own UI face (San Francisco,
-  // Segoe UI); `-apple-system` and 'Segoe UI' are the pre-`system-ui` spellings of
-  // those same two answers, kept for the engines that need them.
+  // Typography — GNOME default: Adwaita Sans 11. The stack is a PROGRESSION, and the
+  // tail is what makes it one (#1817). 'Adwaita Sans' is installed on a GNOME desktop
+  // and nowhere else; 'Cantarell' is GNOME's own earlier UI face and the right second
+  // guess there; 'Inter' is the one cross-platform name an app usually has beside it.
   //
-  // The caption is this block's FIRST SENTENCE on purpose: `generate-adwaita-tokens.mjs`
-  // titles a group from the block touching its declaration, cut at the first `. `, so a
-  // caption written as a trailing line is unreachable and an uncapped one becomes a
-  // section header on the website's theming page.
-  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  // What was MISSING is macOS, and it was missing in the worst place. With no Apple face
+  // named, `sans-serif` resolved to Helvetica — measured on a Mac carrying neither
+  // Adwaita Sans nor Cantarell — which is the one typeface no libadwaita application is
+  // meant to look like, and the stylesheet said nothing about it. `system-ui` and its
+  // `-apple-system` alias are the two spellings every current engine resolves to the
+  // platform's own UI face (SF on macOS, Segoe UI Variable on Windows, Cantarell on
+  // GNOME), so they go after the named faces and BEFORE the generic: a generic asks the
+  // host for its DEFAULT, which is the substitution this is about, while `system-ui` asks
+  // for its UI face, which is what an Adwaita app wants.
+  //
+  // 'Segoe UI' stays ahead of them as the EXPLICIT Windows face: `system-ui` reached it
+  // only from Windows 8 and Segoe UI Variable only from Windows 11, so the name is still
+  // the portable spelling there. Held honest by the `stylesheet-font-families`
+  // conformance rule, whose ledger carries the reason for 'Adwaita Sans' — never delete
+  // one without the other.
+  //
+  // THE PERIOD ending this first sentence, and the absence of a comment block between
+  // these declarations, are both load-bearing rather than stylistic.
+  // `scripts/generate-adwaita-tokens.mjs` titles each token group by the first sentence
+  // of the comment block touching its FIRST declaration, so a caption with no terminator
+  // runs on into the next words — and a block sitting between two declarations starts a
+  // NEW group, which is how a paragraph about this mechanism became a section title in
+  // the website before it was moved in here. Everything past the first sentence is prose
+  // for that one reader; `check-generated-website-data.mjs` holds both derived artifacts
+  // against the run.
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
   --font-size-base: 11pt;
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
@@ -186,14 +202,20 @@
   // second lands on a font whose figures do not line up — the exact property
   // `.monospace` exists for.
   //
-  // 'Consolas' is the same repair as `system-ui` beside it in `--font-family` (#1817):
-  // `ui-monospace` is the right way to ask and is not universally supported, and the
-  // engines without it fell to the `monospace` generic — Courier New on Windows. The
-  // `'SF Mono'` / `'Menlo'` pair answers on macOS and `ui-monospace` on Linux, so this
-  // is the Windows half, not a second opinion about the other two.
+  // The tail is the same PROGRESSION the sans stack is, for the same reason (#1817), and
+  // it had the gap in the other direction: `ui-monospace` covers macOS and GNOME but
+  // reaches Cascadia Mono only from Windows 10 1903, and no Windows face was named at
+  // all, so a Windows 10 host without it landed on the `monospace` GENERIC — Times New
+  // Roman, whose figures do not line up, which is the one thing this stack exists to
+  // provide. 'Cascadia Code' ships with Windows Terminal and 'Consolas' is on every
+  // Windows since Vista.
+  //
+  // ONE LINE, and not a style choice: the same generator reads this file with a line-based
+  // reader that REFUSES a declaration it cannot read rather than dropping the token
+  // without saying so, so a wrapped value makes it exit 1.
   --document-font-family: var(--font-family);
   --document-font-size: var(--font-size-base);
-  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
   --monospace-font-size: var(--font-size-base);
 }
 

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/_window.scss

@@ -1,6 +1,7 @@
 // _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.
@@ -20,4 +21,120 @@ 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;
+}
+
+// <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;
+}