@gjsify/adwaita-web 0.51.1 → 0.53.0

package/scss/_status_page.scss

@@ -4,57 +4,71 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
+// THE METRICS ARE UPSTREAM'S, measured against a GTK render of the gallery's status page
+// `.blp`. They were the vendored web port's — a 96px icon, an 18pt title, the description
+// capped at 32ch and 12px gaps all round — and beside GTK the page was a different
+// composition: the description wrapped at 290px where GTK sets it on one line, and the child
+// sat 61px higher. `_misc.scss` (statuspage) has a 36px 12px margin, 12px between icon,
+// title and description, 24px more under the icon, `.title-1` for the title and 36px
+// between that column and the child; `adw-status-page.ui` clamps the column at AdwClamp's
+// default 600px.
 adw-status-page {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  gap: var(--spacing-m);
-  padding: var(--spacing-xl);
+  gap: 12px;
+  padding: 36px 12px;
   color: var(--window-fg-color);
 
   .adw-status-page-icon {
-    width: 96px;
-    height: 96px;
+    width: 128px;
+    height: 128px;
+    margin-bottom: 24px;
     background-color: currentColor;
     opacity: 0.45;
     -webkit-mask-size: contain;
     mask-size: contain;
   }
 
+  // `.title-1` (`_labels.scss`), restated: each partial compiles on its own, so an
+  // `@extend` across them finds no target.
   .adw-status-page-title {
-    font-size: 18pt;
     font-weight: 800;
+    font-size: 181%;
+    max-width: 600px;
   }
 
   .adw-status-page-description {
     font-size: var(--font-size-base);
     opacity: var(--dim-opacity);
-    max-width: 32ch;
+    max-width: 600px;
   }
 
+  // 36px from the column, of which the flex gap already gives 12.
   .adw-status-page-child {
-    margin-top: var(--spacing-s);
+    margin-top: 24px;
   }
 
   // `.compact` — the documented smaller status page, for a sidebar or a popover
-  // (style-classes.md "Compact Status Page"). Upstream drops the outer margins
-  // 36px → 24px, the icon 128px → 96px and the title from `.title-1` to
-  // `.title-2` (`_misc.scss:154-172`); this port's resting icon is already 96px
-  // because it renders at the size the vendored web port used, so `.compact`
-  // steps down from there in the same proportion.
+  // (style-classes.md "Compact Status Page"): margins 24px 12px, the icon 96px with 12px
+  // under it, `.title-2`, and 24px to the child (`_misc.scss`, statuspage.compact).
   &.compact {
-    gap: var(--spacing-s);
-    padding: var(--spacing-m);
+    padding: 24px 12px;
 
     .adw-status-page-icon {
-      width: 72px;
-      height: 72px;
+      width: 96px;
+      height: 96px;
+      margin-bottom: 12px;
     }
 
     .adw-status-page-title {
-      font-size: 14pt;
+      font-size: 136%;
+    }
+
+    .adw-status-page-child {
+      margin-top: 12px;
     }
   }
 }

package/scss/_theme.scss

@@ -45,6 +45,7 @@
   --entry-border-hover-color: rgba(255, 255, 255, 0.26);
   --destructive-bg-color: #c01c28;
   --destructive-fg-color: #ffffff;
+  --destructive-color: oklab(from var(--destructive-bg-color) max(l, 0.85) a b);
   // Semantic states — libadwaita's dark overrides (_colors.scss:83-92): the
   // backgrounds darken (green_5 / a hand-picked amber / red_4) and the
   // standalone colour LIGHTENS instead of darkening, so it stays readable on a
@@ -57,9 +58,16 @@
   --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
   --switch-off-bg: rgba(255, 255, 255, 0.2);
   --switch-knob-bg: #deddda;
-  // The active toggle is a raised near-white chip in both themes, so its text
-  // must be dark in dark mode (the default token is the light window-fg).
-  --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
+  // The active toggle chip is NOT near-white in both themes — that premise was
+  // wrong, and it is what made the selected toggle a solid white pill on a dark
+  // window while GTK draws a grey one. libadwaita's own _colors.scss:247-248 says
+  // dark takes a TRANSLUCENT white over the dark background, with white text:
+  //   --active-toggle-bg-color: rgb(255 255 255 / 20%);
+  //   --active-toggle-fg-color: #ffffff;
+  // The foreground needs no entry at all — _toggle_group.scss defaults it to
+  // var(--window-fg-color), which is already #ffffff here. Only the background
+  // was ever missing; the old dark override forced dark text to compensate for it.
+  --active-toggle-bg-color: rgb(255 255 255 / 20%);
 }
 
 // Auto dark theme via prefers-color-scheme — opt out with .theme-light

package/scss/_toolbar_view.scss

@@ -60,6 +60,16 @@ adw-toolbar-view {
     flex: 1 1 auto;
   }
 
+  // …UNLESS IT ASKED FOR LESS. A content widget with a `valign` other than fill is
+  // allocated its natural height and placed by that alignment (`_widget.scss`'s auto
+  // margin), which a growing flex item cannot be: the grow claims the free space before
+  // an auto margin sees any. Measured on the gallery's navigation view, whose `.blp`
+  // centres a pill button in a toolbar view: GTK drew it 44px tall mid-pane, this port
+  // stretched it over the whole 293px content rect.
+  .adw-toolbar-view-content > :only-child:is([valign='start'], [valign='end'], [valign='center']) {
+    flex-grow: 0;
+  }
+
   // top-bar-style / bottom-bar-style: an opaque background plus a persistent
   // shadow, which `.border` swaps for a hairline (adw-toolbar-view.c:1011-1024,
   // _toolbars.scss `> .top-bar.raised`).

package/scss/_variables.scss

@@ -83,6 +83,7 @@
   // Destructive action
   --destructive-bg-color: #e01b24;
   --destructive-fg-color: #ffffff;
+  --destructive-color: oklab(from var(--destructive-bg-color) min(l, 0.5) a b);
 
   // Semantic states. `.error` / `.warning` / `.success` (see _labels.scss) do
   // not just recolour text — they REBIND the three accent tokens to these, so
@@ -117,8 +118,21 @@
   --spacing-l: 18px;
   --spacing-xl: 24px;
 
-  // Typography — GNOME default: Adwaita Sans 11
-  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  // 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.
+  //
+  // 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;
   --font-size-base: 11pt;
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
@@ -171,9 +185,15 @@
   // GNOME's PROPORTIONAL UI font, so a monospace fallback chain that reaches it
   // 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.
   --document-font-family: var(--font-family);
   --document-font-size: var(--font-size-base);
-  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
   --monospace-font-size: var(--font-size-base);
 }
 

package/scss/_widget.scss

@@ -0,0 +1,55 @@
+// _widget.scss — the GtkWidget layout properties an element carries as attributes.
+//
+// Every GTK widget inherits `halign`, `valign`, `hexpand` and `vexpand` from GtkWidget, and a
+// 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.
+//
+// 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
+// size and places it inside the space its parent gave it, and an auto margin shrinks a flex
+// or grid item to its content and puts the leftover on the named side. It does NOT place a
+// child of a BLOCK container on the vertical axis, where CSS resolves an auto block margin to
+// zero — so a GTK bin that lays its child out by alignment is a grid or a flex box here
+// (`.adw-bottom-sheet-content`, `gtk-box`). And it takes the side it pushes from: a centred
+// child cannot also keep a `margin-start`, where GTK would centre it inside the remaining
+// space.
+//
+// EXPAND IS FLEX-GROW ALONG THE BOX'S OWN AXIS, which is why it lives with the box rules
+// below and not on the attribute alone: `vexpand` in a horizontal box asks for the cross
+// axis, which `align-items: stretch` already fills, and a `flex-grow` there would widen the
+// child instead.
+//
+// Reference: refs/gtk/gtk/gtkwidget.c (halign, valign, hexpand, vexpand)
+// Reference: refs/gtk/gtk/gtkboxlayout.c (spare space shared among expanding children)
+// Copyright (c) The GTK Team. LGPLv2.1+.
+
+[halign='start'] {
+  margin-inline-end: auto;
+}
+
+[halign='end'] {
+  margin-inline-start: auto;
+}
+
+[halign='center'] {
+  margin-inline: auto;
+}
+
+[valign='start'] {
+  margin-block-end: auto;
+}
+
+[valign='end'] {
+  margin-block-start: auto;
+}
+
+[valign='center'] {
+  margin-block: auto;
+}
+
+gtk-box:not([orientation='vertical']) > [hexpand],
+gtk-box[orientation='vertical'] > [vexpand] {
+  flex-grow: 1;
+}

package/scss/_window_title.scss

@@ -11,6 +11,15 @@ adw-window-title {
   line-height: 1.15;
   min-width: 0;
 
+  // Both labels carry 12px sides upstream (_header-bar.scss:214-227). Without them the
+  // gallery's window title measured 27px narrower than GTK's render of the same `.blp`,
+  // and a header bar's title could run up against the buttons beside it.
+  .adw-window-title-title,
+  .adw-window-title-subtitle {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
   .adw-window-title-title {
     font-size: var(--font-size-base);
     font-weight: 700;

package/scss/adwaita-skin.scss

@@ -19,12 +19,14 @@
 // specificity.
 @use 'icon';
 // libadwaita's typography + semantic-colour UTILITY CLASSES (`.dimmed`,
-// `.numeric`, `.monospace`, `.title-1`…). Classes only — there is deliberately
-// no <adw-label>, see _labels.scss. Emitted BEFORE every widget so a widget's
+// `.numeric`, `.monospace`, `.title-1`…), and <gtk-label>, the element they are
+// written for — see _labels.scss. Emitted BEFORE every widget so a widget's
 // own rule wins on ordinary specificity, and because two partials @extend from
 // it (`_progress_bar.scss`'s text node, `_data_grid.scss`'s cells) exactly as
 // libadwaita's own `_progress-bar.scss` does.
 @use 'labels';
+// <gtk-box>. Before every widget, which may place its own children in one.
+@use 'box';
 // The REST of libadwaita's documented style-class surface — the widget-
 // independent half: the surfaces (`.background`, `.view`, `.frame`), `.card` and
 // the two boxed lists, `.toolbar`, `.spacer`, `.osd`, `.linked`, the app-icon
@@ -36,6 +38,7 @@
 @use 'style_classes';
 @use 'window';
 @use 'headerbar';
+@use 'action_bar';
 @use 'window_title';
 @use 'button';
 @use 'button_content';
@@ -95,6 +98,9 @@
 @use 'alert_dialog';
 @use 'preferences_dialog';
 @use 'dialog';
+// Last among the widgets: an authored `halign` / `valign` is placement the author asked
+// for, and an element rule that sets a margin must not win it back on source order.
+@use 'widget';
 
 // Ensure the `hidden` attribute always wins: components that toggle visibility
 // via `element.hidden = true` set the HTML attribute, but a custom `display`

package/src/accent.ts

@@ -58,17 +58,40 @@ export function isAdwaitaDark(element: HTMLElement): boolean {
     return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
 }
 
-/** Set the accent custom properties for `name`. */
-export function applyAdwaitaAccent(name: AdwAccentColorName, options: ApplyAccentOptions = {}): void {
-    const target = options.target ?? document.documentElement;
-    const dark = options.dark ?? isAdwaitaDark(target);
+/**
+ * Elements whose accent the APP chose. The desktop-appearance follower
+ * (`appearance.ts`) never writes over one: an explicit choice outranks every
+ * source it reads (ADR 0078). A WeakSet, so a removed element is not kept alive.
+ */
+const appChosen = new WeakSet<HTMLElement>();
 
+/** Whether the app has chosen `target`'s accent with {@link applyAdwaitaAccent}. */
+export function hasAppChosenAccent(target: HTMLElement): boolean {
+    return appChosen.has(target);
+}
+
+/** Write the two properties — the one place they are set, for the app's choice and the follower's alike. */
+export function writeAdwaitaAccent(name: AdwAccentColorName, target: HTMLElement, dark: boolean): void {
     target.style.setProperty(ACCENT_BG_PROPERTY, adwaitaAccentBgColor(name));
     target.style.setProperty(ACCENT_PROPERTY, adwaitaAccentColor(name, dark));
 }
 
-/** Drop the properties, so the stylesheet's own values apply again. */
+/**
+ * Set the accent custom properties for `name` — the app's own choice, which
+ * from now on wins over the desktop's appearance on this element.
+ */
+export function applyAdwaitaAccent(name: AdwAccentColorName, options: ApplyAccentOptions = {}): void {
+    const target = options.target ?? document.documentElement;
+    appChosen.add(target);
+    writeAdwaitaAccent(name, target, options.dark ?? isAdwaitaDark(target));
+}
+
+/**
+ * Drop the properties, so the stylesheet's own values apply again, and hand
+ * the element back to the desktop's appearance.
+ */
 export function clearAdwaitaAccent(target: HTMLElement = document.documentElement): void {
+    appChosen.delete(target);
     target.style.removeProperty(ACCENT_BG_PROPERTY);
     target.style.removeProperty(ACCENT_PROPERTY);
 }

package/src/adw-appearance.spec.ts

@@ -0,0 +1,178 @@
+// Following the desktop's appearance in a real browser (ADR 0078): the handoff
+// tags, live JSON, the CSS system colour, and the precedence between them — all
+// read back through the root's COMPUTED style, since the point is what reaches
+// the cascade.
+//
+// Every test restores the root: the follower acts on `document.documentElement`,
+// which every other suite in this bundle renders under.
+
+import { describe, expect, it } from '@gjsify/unit';
+import { ADW_ACCENT_BG_COLORS, renderAppearanceMeta } from '@gjsify/adwaita-core';
+import { APPEARANCE_HANDOFF_VECTORS, NEAREST_ACCENT_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import '@gjsify/adwaita-web';
+import { ACCENT_BG_PROPERTY, applyAdwaitaAccent, clearAdwaitaAccent } from './accent.js';
+import { adwaitaAccentSource, applyDesktopAppearance, applySystemAccent, readSystemAccent } from './appearance.js';
+
+const root = () => document.documentElement;
+const rootAccent = () => getComputedStyle(root()).getPropertyValue(ACCENT_BG_PROPERTY).trim();
+
+/** MutationObserver callbacks are microtasks; one macrotask later they have run. */
+const settle = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+function addMeta(name: string, content: string): HTMLMetaElement {
+    const meta = document.createElement('meta');
+    meta.name = name;
+    meta.content = content;
+    document.head.append(meta);
+    return meta;
+}
+
+async function restore(...metas: HTMLMetaElement[]): Promise<void> {
+    for (const meta of metas) meta.remove();
+    await settle();
+    applySystemAccent(false);
+    applyDesktopAppearance({});
+    clearAdwaitaAccent(root());
+}
+
+export const AdwAppearanceTest = async () => {
+    await describe('desktop appearance: the <meta> handoff', async () => {
+        await it('applies a handed-over accent without any code in the page', async () => {
+            const defaultAccent = rootAccent();
+            const meta = addMeta('adw-accent', 'purple');
+            await settle();
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.purple);
+            expect(adwaitaAccentSource()).toBe('handoff');
+
+            // Removing the tag hands the root back to the stylesheet.
+            meta.remove();
+            await settle();
+            expect(rootAccent()).toBe(defaultAccent);
+            expect(adwaitaAccentSource()).toBe('default');
+            await restore();
+        });
+
+        await it('follows a changed content attribute', async () => {
+            const meta = addMeta('adw-accent', 'teal');
+            await settle();
+            meta.content = 'orange';
+            await settle();
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.orange);
+            await restore(meta);
+        });
+
+        await it('hands over the colour scheme as a theme class, and takes it back', async () => {
+            const meta = addMeta('adw-color-scheme', 'dark');
+            await settle();
+            expect(root().classList.contains('theme-dark')).toBe(true);
+            meta.content = 'no-preference';
+            await settle();
+            expect(root().classList.contains('theme-dark')).toBe(false);
+            await restore(meta);
+        });
+
+        await it('does not re-read the tags for an unrelated <head> change', async () => {
+            // A live JSON handoff must survive a framework injecting a <style>.
+            applyDesktopAppearance({ accent: 'green' });
+            document.head.append(document.createElement('style'));
+            await settle();
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.green);
+            document.head.lastElementChild?.remove();
+            await restore();
+        });
+    });
+
+    await describe('desktop appearance: APPEARANCE_HANDOFF_VECTORS through a real <head>', async () => {
+        for (const vector of APPEARANCE_HANDOFF_VECTORS) {
+            await it(`${JSON.stringify(vector.meta)} paints ${vector.paints ?? 'the default'}`, async () => {
+                const defaultAccent = rootAccent();
+                const holder = document.createElement('template');
+                holder.innerHTML = renderAppearanceMeta(vector.appearance);
+                const metas = [...holder.content.children] as HTMLMetaElement[];
+                document.head.append(...metas);
+                await settle();
+                expect(rootAccent()).toBe(vector.paints ? ADW_ACCENT_BG_COLORS[vector.paints] : defaultAccent);
+                const themeClass = root().classList.contains('theme-dark')
+                    ? 'theme-dark'
+                    : root().classList.contains('theme-light')
+                      ? 'theme-light'
+                      : null;
+                expect(themeClass).toBe(vector.themeClass);
+                await restore(...metas);
+            });
+        }
+    });
+
+    await describe('desktop appearance: a colour-only handoff is snapped (NEAREST_ACCENT_VECTORS)', async () => {
+        // A server that sends only `accentRgb` gets libadwaita's snapping in the page, read
+        // back from the cascade: the table is held by what the page paints, not by the function.
+        for (const vector of NEAREST_ACCENT_VECTORS) {
+            await it(`${vector.source}: ${vector.color} paints ${vector.expected}`, async () => {
+                applyDesktopAppearance({ accentRgb: vector.color });
+                expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS[vector.expected]);
+                await restore();
+            });
+        }
+    });
+
+    await describe('desktop appearance: live JSON and precedence', async () => {
+        await it('applies validated JSON and ignores what is not an accent', async () => {
+            applyDesktopAppearance({ accent: 'red', colorScheme: 'light' });
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.red);
+            applyDesktopAppearance({ accent: '"><script>' });
+            expect(adwaitaAccentSource()).toBe('default');
+            await restore();
+        });
+
+        await it("never overrides the app's own choice", async () => {
+            applyAdwaitaAccent('yellow');
+            applyDesktopAppearance({ accent: 'pink' });
+            const meta = addMeta('adw-accent', 'slate');
+            await settle();
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.yellow);
+            expect(adwaitaAccentSource()).toBe('app');
+
+            // Clearing the app's choice hands the root back to the desktop.
+            clearAdwaitaAccent(root());
+            applyDesktopAppearance({ accent: 'pink' });
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.pink);
+            await restore(meta);
+        });
+
+        await it('ranks the handoff above the CSS system colour', async () => {
+            applySystemAccent();
+            applyDesktopAppearance({ accent: 'teal' });
+            expect(adwaitaAccentSource()).toBe('handoff');
+            expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS.teal);
+            await restore();
+        });
+    });
+
+    await describe('desktop appearance: the CSS system colour (#1821)', async () => {
+        await it('snaps AccentColor to one of the nine where the engine resolves it, else keeps blue', async () => {
+            // Both outcomes are asserted: support for `AccentColor` differs per engine and
+            // per OS, and "unsupported" must leave the stylesheet's blue, not a guess.
+            const defaultAccent = rootAccent();
+            const system = readSystemAccent();
+            const applied = applySystemAccent();
+            expect(applied).toBe(system?.accent ?? null);
+            if (system) {
+                expect(adwaitaAccentSource()).toBe('system');
+                expect(rootAccent()).toBe(ADW_ACCENT_BG_COLORS[system.accent]);
+            } else {
+                expect(adwaitaAccentSource()).toBe('default');
+                expect(rootAccent()).toBe(defaultAccent);
+            }
+            await restore();
+            expect(rootAccent()).toBe(defaultAccent);
+        });
+
+        await it('the meta keyword "system" asks for the same thing', async () => {
+            const meta = addMeta('adw-accent', 'system');
+            await settle();
+            expect(adwaitaAccentSource()).toBe(readSystemAccent() ? 'system' : 'default');
+            await restore(meta);
+        });
+    });
+};

package/src/adw-banner.spec.ts

@@ -146,4 +146,20 @@ export const AdwBannerTest = async () => {
             host.remove();
         });
     });
+
+    // adw-banner.ui: the title is a `.heading` label and the button a plain text button.
+    // Beside a GTK render of the gallery's banner `.blp` this banner was 8px shorter,
+    // with a regular-weight title.
+    await describe('adw-banner geometry (adw-banner.ui)', async () => {
+        await it('draws a bold title and a 34px text button, so the banner is 46px tall', () => {
+            const { el, host } = mount({ revealed: '', title: 'Updates paused', 'button-label': 'Resume' });
+            host.style.width = '460px';
+            expect(getComputedStyle(titleEl(el)).fontWeight).toBe('700');
+            const button = getComputedStyle(buttonEl(el));
+            expect([button.paddingLeft, button.paddingRight]).toStrictEqual(['17px', '17px']);
+            expect(Math.round(buttonEl(el).getBoundingClientRect().height)).toBe(34);
+            expect(Math.round(el.getBoundingClientRect().height)).toBe(46);
+            host.remove();
+        });
+    });
 };

package/src/adw-button-row.spec.ts

@@ -53,6 +53,14 @@ export const AdwButtonRowTest = async () => {
         // adw-action-rows.spec.ts, which asserts that every spelling of the
         // attribute leaves the row activatable.
 
+        // `row.button > box { min-height: 40px }` (_lists.scss:458-462): a GTK render of the
+        // gallery's button-row `.blp` measures the row at 44, where this one stood at 50.
+        await it('stands 44px tall, as a GTK button row does', () => {
+            const { row, host } = parseRow('<adw-button-row title="Add account"></adw-button-row>');
+            expect(Math.round(row.getBoundingClientRect().height)).toBe(44);
+            host.remove();
+        });
+
         await it('emits `activated` on click', async () => {
             const { row, host } = parseRow('<adw-button-row title="Add account"></adw-button-row>');
             let activated = false;

package/src/adw-header-bar.spec.ts

@@ -212,4 +212,21 @@ export const AdwHeaderBarTest = async () => {
             unmountAll();
         });
     });
+
+    // `windowtitle .title, .subtitle { padding: 0 12px }` (_header-bar.scss:214-227).
+    // Measured beside a GTK render of the gallery's window-title `.blp`: 27px narrower here.
+    await describe('adw-window-title label sides', async () => {
+        await it('pads its title and subtitle 12px on each side', () => {
+            const title = document.createElement('adw-window-title');
+            title.setAttribute('title', 'Inbox');
+            title.setAttribute('subtitle', '3 unread messages');
+            document.body.appendChild(title);
+            const sides = ['.adw-window-title-title', '.adw-window-title-subtitle'].map((selector) => {
+                const style = getComputedStyle(title.querySelector(selector) as HTMLElement);
+                return `${style.paddingLeft} ${style.paddingRight}`;
+            });
+            title.remove();
+            expect(sides).toStrictEqual(['12px 12px', '12px 12px']);
+        });
+    });
 };