@gjsify/adwaita-web 0.51.1 → 0.52.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

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/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']);
+        });
+    });
 };

package/src/blueprint-layout.spec.ts

@@ -0,0 +1,223 @@
+// A REAL `.blp` OF GtkWidget LAYOUT PROPERTIES, MOUNTED AND MEASURED.
+//
+// `bottom-sheet-layout.blp` (`@gjsify/adwaita-core/src/conformance/blueprints/`) is the shape
+// the gallery's `Adw.BottomSheet` block writes: a button placed with `halign`/`valign`, a box
+// inset by four `margin-*` lines, a title at the start edge, and one expanding child. The
+// NativeScript port builds the same file (`adwaita-nativescript`'s `blueprint-trees.spec.ts`).
+//
+// Before `_widget.scss` and the builder's margin table, this renderer wrote every one of these
+// as an attribute nothing read — no refusal, since the web builder refuses nothing it writes as
+// an attribute, and no effect: the centred button stretched across the sheet's content. So the
+// assertions here are about GEOMETRY, read off the laid-out page, never about the attribute
+// being present.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import { mountSharedTree } from './shared-tree-builder.js';
+
+import sheetTree from '../../adwaita-core/src/conformance/blueprints/bottom-sheet-layout.blp?shared-tree';
+import carouselTree from '../../adwaita-core/src/conformance/blueprints/carousel-indicators.blp?shared-tree';
+
+import { GALLERY_BLUEPRINTS } from './blueprint-markup.spec.js';
+
+/** Mount the fixture at a size a layout can be measured in; the caller unmounts. */
+function mountSheet() {
+    const mounted = mountSharedTree(sheetTree);
+    mounted.root.style.width = '400px';
+    mounted.root.style.height = '340px';
+    const byId = (id: string): HTMLElement => {
+        const el = mounted.root.querySelector<HTMLElement>(`#${id}`);
+        if (el === null) throw new Error(`the mounted tree has no element with the id '${id}'`);
+        return el;
+    };
+    return { ...mounted, byId };
+}
+
+export const AdwBlueprintLayoutTest = async () => {
+    await describe('adwaita-web: bottom-sheet-layout.blp, laid out', async () => {
+        await it('halign/valign center place the button in the middle of the content at its own size', async () => {
+            const { root, unmount, byId } = mountSheet();
+            try {
+                const content = root.querySelector('.adw-bottom-sheet-content') as HTMLElement;
+                const area = content.getBoundingClientRect();
+                const button = byId('toggle').getBoundingClientRect();
+
+                expect(button.width < area.width).toBe(true);
+                expect(button.height < area.height).toBe(true);
+                expect(Math.abs(button.left - area.left - (area.right - button.right)) <= 1).toBe(true);
+                expect(Math.abs(button.top - area.top - (area.bottom - button.bottom)) <= 1).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('the four margins inset the box, start and end on the logical edges', async () => {
+            const { unmount, byId } = mountSheet();
+            try {
+                const style = getComputedStyle(byId('box'));
+
+                expect(style.marginLeft).toBe('18px');
+                expect(style.marginRight).toBe('12px');
+                expect(style.marginTop).toBe('18px');
+                expect(style.marginBottom).toBe('24px');
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('halign start keeps the title at the start edge of the box at its own width', async () => {
+            const { unmount, byId } = mountSheet();
+            try {
+                const box = byId('box').getBoundingClientRect();
+                const title = byId('title').getBoundingClientRect();
+
+                expect(Math.abs(title.left - box.left) <= 1).toBe(true);
+                expect(title.width < box.width).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('expand grows along the box axis only', async () => {
+            const { unmount, byId } = mountSheet();
+            try {
+                // The box is vertical: `vexpand` is its own axis and takes the spare height,
+                // `hexpand` is the cross axis, which `align-items: stretch` already fills.
+                expect(getComputedStyle(byId('body')).flexGrow).toBe('1');
+                expect(getComputedStyle(byId('caption')).flexGrow).toBe('0');
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('the open modal sheet shows its dimming, and the non-modal one would not', async () => {
+            const { root, unmount } = mountSheet();
+            try {
+                const sheet = root as HTMLElement & { modal: boolean };
+                const dimming = root.querySelector('.adw-bottom-sheet-dimming') as HTMLElement;
+
+                expect(dimming.classList.contains('visible')).toBe(true);
+                sheet.modal = false;
+                expect(dimming.classList.contains('visible')).toBe(false);
+            } finally {
+                unmount();
+            }
+        });
+    });
+
+    // `carousel: carousel` projects as the attribute `carousel="carousel"`: GTK's property
+    // name, which the indicators now read beside the `for` they had first.
+    await describe('adwaita-web: carousel-indicators.blp, mounted', async () => {
+        await it('both indicators bind to the carousel by id and mark its first page', async () => {
+            const { root, unmount } = mountSharedTree(carouselTree);
+            try {
+                const dots = [...root.querySelectorAll('#dots .adw-carousel-dot')];
+                const lines = [...root.querySelectorAll('#lines .adw-carousel-line')];
+
+                expect(dots.length).toBe(3);
+                expect(lines.length).toBe(3);
+                expect(dots.map((dot) => dot.classList.contains('active'))).toStrictEqual([true, false, false]);
+                expect(lines[0]?.classList.contains('active')).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+    });
+
+    // The gallery's third batch of `.blp` files, mounted at the size of the gallery's stage
+    // and held to a GTK render of the same file (GJS, `Gtk.Builder`, an `Adw.ApplicationWindow`
+    // of that size, libadwaita 1.9). The GTK numbers are written beside each assertion; the
+    // tolerance is the 1-2px a header bar and text metrics differ by.
+    await describe('adwaita-web: the gallery Blueprints, laid out beside GTK', async () => {
+        /** The tree mounted in a grid of `width` x `height`, as the gallery stage holds it. */
+        const mountAt = (file: string, width: number, height: number) => {
+            const tree = GALLERY_BLUEPRINTS[file];
+            if (tree === undefined) throw new Error(`no gallery Blueprint ${file}`);
+            const mounted = mountSharedTree(tree);
+            const host = mounted.root.parentElement as HTMLElement;
+            host.style.cssText = `display: grid; width: ${width}px; height: ${height}px;`;
+            const box = (el: Element) => {
+                const r = el.getBoundingClientRect();
+                const h = host.getBoundingClientRect();
+                return { x: r.left - h.left, y: r.top - h.top, width: r.width, height: r.height };
+            };
+            const byId = (id: string): HTMLElement => {
+                const el = host.querySelector<HTMLElement>(`#${id}`);
+                if (el === null) throw new Error(`${file} mounted no element with the id '${id}'`);
+                return el;
+            };
+            return { ...mounted, host, box, byId };
+        };
+        const near = (actual: number, gtk: number, tolerance = 2) => Math.abs(actual - gtk) <= tolerance;
+
+        await it('a split view page fills its pane, and its header bar shows the page title', async () => {
+            const { unmount, box, byId, host } = mountAt('adwaita/navigation-split-view.blp', 652, 340);
+            try {
+                // GTK: sidebar 0,46 180x294 — the list fills the pane under the header bar.
+                expect(near(box(byId('sidebar')).height, 294)).toBe(true);
+                const titles = [...host.querySelectorAll('adw-header-bar')].map(
+                    (bar) => bar.querySelector('adw-window-title')?.getAttribute('title') ?? null,
+                );
+                expect(titles).toStrictEqual(['Mailboxes', 'All Mail']);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('an overlay split view sidebar fills its pane', async () => {
+            const { unmount, box, byId } = mountAt('adwaita/overlay-split-view.blp', 652, 340);
+            try {
+                // GTK: sidebar 0,46 180x294.
+                expect(near(box(byId('sidebar')).height, 294)).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('a centred toolbar-view content widget keeps its own height', async () => {
+            const { unmount, box, byId } = mountAt('adwaita/navigation-view.blp', 652, 340);
+            try {
+                // GTK: open_button 245,171 161x44.
+                const button = box(byId('open_button'));
+                expect(near(button.height, 44)).toBe(true);
+                expect(near(button.y, 171)).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it("a status page has upstream's metrics: a 128px icon, the child where GTK puts it", async () => {
+            const { unmount, box, byId, host } = mountAt('adwaita/status-page.blp', 652, 400);
+            try {
+                const icon = host.querySelector('.adw-status-page-icon') as HTMLElement;
+                expect(box(icon).width).toBe(128);
+                expect(box(icon).height).toBe(128);
+                // GTK: new_button 239,311 174x44.
+                expect(near(box(byId('new_button')).y, 311, 3)).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('a carousel does not widen the box it fills to the sum of its pages', async () => {
+            const { unmount, box, root } = mountAt('adwaita/carousel.blp', 652, 260);
+            try {
+                // GTK: the box is 652 wide, the window's width.
+                expect(box(root).width).toBe(652);
+            } finally {
+                unmount();
+            }
+        });
+
+        await it('tooltip-text becomes the icon button tooltip and accessible name', async () => {
+            const { unmount, byId } = mountAt('adwaita/toolbar-view.blp', 652, 300);
+            try {
+                const inner = byId('add_button').querySelector('button') as HTMLButtonElement;
+                expect(inner.title).toBe('Add');
+                expect(inner.getAttribute('aria-label')).toBe('Add');
+            } finally {
+                unmount();
+            }
+        });
+    });
+};