@gjsify/adwaita-web 0.64.1 → 0.64.2-next.254

package/src/adw-alert-dialog.spec.ts

@@ -124,8 +124,8 @@ export const AdwAlertDialogTest = async () => {
             // directly would assert a contract this element does not have.
             const { el, host } = mount({ 'close-response': 'cancel', open: '' });
             let seen: string | null = null;
-            el.addEventListener('response', (event) => {
-                seen = (event as CustomEvent<{ response: string }>).detail.response;
+            el.connect('response', (_dialog, response: string) => {
+                seen = response;
             });
             (el.querySelector('.adw-alert-dialog-scrim') as HTMLElement).click();
             expect(seen).toBe('cancel');
@@ -147,9 +147,9 @@ export const AdwAlertDialogTest = async () => {
     await describe('adw-alert-dialog responses before the first connect', async () => {
         await it('buttons added while detached appear once connected', () => {
             const el = document.createElement('adw-alert-dialog') as AdwAlertDialog;
-            el.addResponse('cancel', 'Cancel');
-            el.addResponse('ok', 'OK');
-            expect(el.getResponseLabel('ok')).toBe('OK');
+            el.add_response('cancel', 'Cancel');
+            el.add_response('ok', 'OK');
+            expect(el.get_response_label('ok')).toBe('OK');
             const host = document.createElement('div');
             document.body.appendChild(host);
             host.appendChild(el);
@@ -158,4 +158,70 @@ export const AdwAlertDialogTest = async () => {
             host.remove();
         });
     });
+
+    // The calls a GJS app makes (Learn6502's `notification.service.ts`), run as written.
+    await describe('adw-alert-dialog in the GJS construct-props form', async () => {
+        const Dialog = customElements.get('adw-alert-dialog') as unknown as new (
+            props?: Record<string, unknown>,
+        ) => AdwAlertDialog;
+
+        const confirmDialog = () => {
+            const dialog = new Dialog({
+                heading: 'Reset?',
+                body: 'This clears the memory.',
+                close_response: 'cancel',
+                default_response: 'confirm',
+            });
+            dialog.add_response('cancel', 'Cancel');
+            dialog.add_response('confirm', 'Confirm');
+            return dialog;
+        };
+
+        await it('takes the snake_case bag', () => {
+            const dialog = confirmDialog();
+            expect(dialog.heading).toBe('Reset?');
+            expect(dialog.body).toBe('This clears the memory.');
+            expect(dialog.get_close_response()).toBe('cancel');
+            expect(dialog.get_default_response()).toBe('confirm');
+        });
+
+        await it('refuses a key that is no Adw.AlertDialog property', () => {
+            expect(() => new Dialog({ no_such_prop: 1 })).toThrow();
+        });
+
+        await it('present() attaches it, a click emits response with the id, and closing detaches it', () => {
+            const dialog = confirmDialog();
+            const seen: unknown[][] = [];
+            dialog.connect('response', (emitter, response: string) => seen.push([emitter, response]));
+            dialog.present(null);
+            expect(dialog.isConnected).toBe(true);
+            expect(dialog.open).toBe(true);
+            const buttons = [...dialog.querySelectorAll('.adw-alert-dialog-response')] as HTMLButtonElement[];
+            buttons.find((b) => b.textContent === 'Confirm')!.click();
+            expect(seen.length).toBe(1);
+            expect(seen[0]![0]).toBe(dialog);
+            expect(seen[0]![1]).toBe('confirm');
+            expect(dialog.open).toBe(false);
+            expect(dialog.isConnected).toBe(false);
+        });
+
+        await it('a dismissal emits the close_response once, not the clicked one too', () => {
+            const dialog = confirmDialog();
+            const seen: string[] = [];
+            dialog.connect('response', (_dialog, response: string) => seen.push(response));
+            dialog.present(null);
+            (dialog.querySelector('.adw-alert-dialog-scrim') as HTMLElement).click();
+            expect(seen.join(',')).toBe('cancel');
+            expect(dialog.isConnected).toBe(false);
+        });
+
+        await it('remove_response drops the response and its button', () => {
+            const dialog = confirmDialog();
+            dialog.present(null);
+            dialog.remove_response('confirm');
+            expect(dialog.has_response('confirm')).toBe(false);
+            expect(dialog.querySelectorAll('.adw-alert-dialog-response').length).toBe(1);
+            dialog.remove();
+        });
+    });
 };

package/src/adw-bin.spec.ts

@@ -61,12 +61,13 @@ export const AdwBinTest = async () => {
             other.remove();
         });
 
-        await it('an empty bin is a block box, and its only child fills it', () => {
+        await it('a bin is a column flex box, and its only child fills it', () => {
             const { el, host } = mount([document.createElement('div')]);
             // A bin takes the size it is GIVEN and hands all of it to the child, which
-            // `GtkBinLayout` does on both axes (gtkbinlayout.c:81).
+            // `GtkBinLayout` does on both axes (gtkbinlayout.c:81). Flex stretch, not a
+            // percentage, so it also holds when the bin is itself a flex item.
             el.style.height = '120px';
-            expect(getComputedStyle(el).display).toBe('block');
+            expect(getComputedStyle(el).display).toBe('flex');
             const child = el.firstElementChild as HTMLElement;
             expect(child.getBoundingClientRect().height).toBe(120);
             host.remove();

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

@@ -20,7 +20,7 @@ import {
     BUTTON_CONTENT_TEXT_VECTORS,
 } from '@gjsify/adwaita-core/conformance';
 import type { AdwButtonContent } from './elements/adw-button-content.js';
-import { fallbackMask, maskOf } from './icon-registry.spec.js';
+import { fallbackMask, maskOf } from './icon-masks.spec.js';
 
 /** Mount a button content inside a plain Adwaita button, the way the stories do. */
 function mount(attributes: Record<string, string> = {}): {

package/src/adw-carousel.spec.ts

@@ -11,11 +11,13 @@ import { describe, expect, it } from '@gjsify/unit';
 
 import type { CarouselPageMeasurement } from '@gjsify/adwaita-core';
 import {
+    CAROUSEL_DOOR_VECTORS,
     CAROUSEL_PAGE_ALLOCATION_VECTORS,
     CAROUSEL_PAGE_AT_POSITION_VECTORS,
     CAROUSEL_PAGE_LIST_VECTORS,
+    driveCarouselDoorVectors,
 } from '@gjsify/adwaita-core/conformance';
-import type { CarouselPageOp } from '@gjsify/adwaita-core/conformance';
+import type { CarouselDoorLike, CarouselPageOp } from '@gjsify/adwaita-core/conformance';
 
 /** The carousel surface this suite drives — the element's own public API. */
 interface CarouselElement extends HTMLElement {
@@ -513,4 +515,50 @@ export const AdwCarouselTest = async () => {
             host.remove();
         });
     });
+
+    // The GIR doors, on the vectors real `gi://Adw` passes. `mount` makes the animated
+    // scroll instant too, so `settle` waits for the rAF-throttled read-back only.
+    const hosts: HTMLElement[] = [];
+    await driveCarouselDoorVectors(
+        {
+            name: 'adw-carousel',
+            isOracle: false,
+            makeCarousel(count) {
+                const { carousel, host } = mount(Array.from({ length: count }, (_unused, i) => `p${i}`));
+                hosts.push(host);
+                const pages = Array.from(carousel.querySelectorAll('.adw-carousel-page')).map(
+                    (slot) => slot.firstElementChild as HTMLElement,
+                );
+                return { carousel: carousel as unknown as CarouselDoorLike, pages };
+            },
+            makeStranger: () => card('stranger'),
+            async settle() {
+                await flush();
+                await flush();
+            },
+            dispose() {
+                for (const host of hosts.splice(0)) host.remove();
+            },
+        },
+        { describe, it, expect },
+        CAROUSEL_DOOR_VECTORS,
+    );
+
+    await describe('adw-carousel scroll_to before the pages are adopted', async () => {
+        await it('lands where a declared position would, as upstream defers it to an idle', async () => {
+            const carousel = document.createElement('adw-carousel') as CarouselElement & CarouselDoorLike;
+            carousel.style.cssText = 'display:block;width:200px;height:80px;';
+            const pages = ['a', 'b', 'c'].map((label) => card(label));
+            for (const page of pages) carousel.appendChild(page);
+            expect(carousel.get_n_pages()).toBe(3);
+            expect(carousel.get_nth_page(2)).toBe(pages[2]);
+            carousel.scroll_to(pages[2], false);
+
+            document.body.appendChild(carousel);
+            await flush();
+            await flush();
+            expect(carousel.get_position()).toBe(2);
+            carousel.remove();
+        });
+    });
 };

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

@@ -233,6 +233,24 @@ export const AdwHeaderBarTest = async () => {
 
     // `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-header-bar> packing', async () => {
+        await it('packs an untyped child from the start, declared or appended', async () => {
+            // adw-header-bar.c:1040-1041 — `type == NULL` is pack_start. A Blueprint `[start]`
+            // tags only the next child, so the buttons after it arrive untyped.
+            const tagged = document.createElement('button');
+            tagged.setAttribute('slot', 'start');
+            const declared = document.createElement('button');
+            const bar = mountHeaderBar({ title: 'T' }, [tagged, declared]);
+            const late = document.createElement('button');
+            bar.appendChild(late);
+            await Promise.resolve();
+            const start = bar.querySelector('.adw-header-bar-start');
+            const report = [tagged, declared, late].map((el) => el.parentElement === start);
+            unmountAll();
+            expect(report).toStrictEqual([true, true, true]);
+        });
+    });
+
     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');

package/src/adw-toast-overlay.spec.ts

@@ -1,12 +1,14 @@
 // DOM-level behaviour tests for <adw-toast-overlay>, in a real browser via the
 // @gjsify/adwaita-web browser test axis.
 //
-// `Adw.ToastOverlay` shows exactly ONE toast at a time and queues the rest FIFO,
+// `Adw.ToastOverlay` shows exactly ONE toast at a time and queues the rest,
 // advancing only when the visible one is dismissed (manually or by its timeout) — the
-// policy `AdwToastQueue` owns in `@gjsify/adwaita-core` and this element composes.
+// policy `ToastOverlayQueue` owns in `@gjsify/adwaita-core` and this element composes.
+// A toast is an `Adw.Toast`, added with `add_toast(toast)` as on GTK.
 //
 // Timing runs through core's injected `ToastScheduler` seam (a virtual clock), so the
 // auto-dismiss lifecycle is deterministic with no real timers.
+import { Toast } from '@gjsify/adwaita-core';
 import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwToastOverlay, ToastScheduler, ToastTimerHandle } from './elements/adw-toast-overlay.js';
@@ -65,12 +67,10 @@ export const AdwToastOverlayTest = async () => {
         await it('shows exactly one toast at a time, in FIFO order', async () => {
             const { overlay, clock, host } = mountOverlay();
 
-            overlay.addToast('First', { timeout: 3 });
-            overlay.addToast('Second', { timeout: 3 });
-            overlay.addToast('Third', { timeout: 3 });
+            overlay.add_toast(new Toast({ title: 'First', timeout: 3 }));
+            overlay.add_toast(new Toast({ title: 'Second', timeout: 3 }));
+            overlay.add_toast(new Toast({ title: 'Third', timeout: 3 }));
 
-            // BEFORE the fix this was ['First', 'Second', 'Third'] — all three
-            // strips mounted at once.
             expect(toastTitles(overlay)).toStrictEqual(['First']);
             expect(overlay.pendingToasts).toBe(2);
             expect(overlay.currentToast?.title).toBe('First');
@@ -96,8 +96,9 @@ export const AdwToastOverlayTest = async () => {
         await it('holds the queue while a sticky toast (timeout 0) is shown', async () => {
             const { overlay, clock, host } = mountOverlay();
 
-            overlay.addToast('Sticky', { timeout: 0 });
-            overlay.addToast('Next', { timeout: 3 });
+            const sticky = new Toast({ title: 'Sticky', timeout: 0 });
+            overlay.add_toast(sticky);
+            overlay.add_toast(new Toast({ title: 'Next', timeout: 3 }));
 
             // No timer was scheduled for the sticky toast, so time does not advance it.
             clock.advance(60_000);
@@ -105,7 +106,7 @@ export const AdwToastOverlayTest = async () => {
             expect(overlay.pendingToasts).toBe(1);
 
             // Dismissing it hands the slot to the queued toast.
-            overlay.dismiss();
+            sticky.dismiss();
             expect(toastTitles(overlay)).toStrictEqual(['Next']);
             expect(overlay.pendingToasts).toBe(0);
 
@@ -115,30 +116,34 @@ export const AdwToastOverlayTest = async () => {
         await it('advances the queue when the close button is pressed', async () => {
             const { overlay, host } = mountOverlay();
 
-            overlay.addToast('First', { timeout: 3 });
-            overlay.addToast('Second', { timeout: 3 });
+            const first = new Toast({ title: 'First', timeout: 3 });
+            let dismissed = 0;
+            first.connect('dismissed', () => {
+                dismissed += 1;
+            });
+            overlay.add_toast(first);
+            overlay.add_toast(new Toast({ title: 'Second', timeout: 3 }));
 
             const close = overlay.querySelector('.adw-toast-close-button') as HTMLButtonElement;
             close.click();
 
+            expect(dismissed).toBe(1);
             expect(toastTitles(overlay)).toStrictEqual(['Second']);
             expect(overlay.pendingToasts).toBe(0);
 
             host.remove();
         });
 
-        await it('runs the action callback and advances the queue', async () => {
+        await it('emits button-clicked and advances the queue', async () => {
             const { overlay, host } = mountOverlay();
 
+            const toast = new Toast({ title: 'File moved to Trash', timeout: 3, button_label: 'Undo' });
             let undone = 0;
-            overlay.addToast('File moved to Trash', {
-                timeout: 3,
-                buttonLabel: 'Undo',
-                onAction: () => {
-                    undone += 1;
-                },
+            toast.connect('button-clicked', () => {
+                undone += 1;
             });
-            overlay.addToast('Second', { timeout: 3 });
+            overlay.add_toast(toast);
+            overlay.add_toast(new Toast({ title: 'Second', timeout: 3 }));
 
             const action = overlay.querySelector('.adw-toast-action-button') as HTMLButtonElement;
             expect(action.textContent).toBe('Undo');
@@ -150,12 +155,51 @@ export const AdwToastOverlayTest = async () => {
             host.remove();
         });
 
-        await it('drops the queued toasts on clearToasts()', async () => {
+        await it('draws no action button without a button_label', async () => {
+            const { overlay, host } = mountOverlay();
+
+            overlay.add_toast(new Toast({ title: 'Saved' }));
+            expect(overlay.querySelector('.adw-toast-action-button')).toBeNull();
+
+            host.remove();
+        });
+
+        await it('renders the title as markup unless use_markup is off', async () => {
+            const { overlay, host } = mountOverlay();
+
+            overlay.add_toast(new Toast({ title: '<b>Bold</b>', timeout: 0 }));
+            expect(overlay.querySelector('.adw-toast-title b')?.textContent).toBe('Bold');
+            overlay.dismiss_all();
+
+            const { overlay: plain, host: plainHost } = mountOverlay();
+            plain.add_toast(new Toast({ title: '<b>Bold</b>', timeout: 0, use_markup: false }));
+            expect(plain.querySelector('.adw-toast-title b')).toBeNull();
+            expect(toastTitles(plain)).toStrictEqual(['<b>Bold</b>']);
+
+            host.remove();
+            plainHost.remove();
+        });
+
+        await it('shows a HIGH priority toast ahead of the current one', async () => {
+            const { overlay, host } = mountOverlay();
+
+            overlay.add_toast(new Toast({ title: 'Normal', timeout: 0 }));
+            const urgent = new Toast({ title: 'Urgent', timeout: 0, priority: 1 });
+            overlay.add_toast(urgent);
+
+            expect(toastTitles(overlay)).toStrictEqual(['Urgent']);
+            urgent.dismiss();
+            expect(toastTitles(overlay)).toStrictEqual(['Normal']);
+
+            host.remove();
+        });
+
+        await it('dismisses the visible toast and the queue on dismiss_all()', async () => {
             const { overlay, clock, host } = mountOverlay();
 
-            overlay.addToast('First', { timeout: 3 });
-            overlay.addToast('Second', { timeout: 3 });
-            overlay.clearToasts();
+            overlay.add_toast(new Toast({ title: 'First', timeout: 3 }));
+            overlay.add_toast(new Toast({ title: 'Second', timeout: 3 }));
+            overlay.dismiss_all();
 
             expect(overlay.currentToast).toBeNull();
             expect(overlay.pendingToasts).toBe(0);

package/src/application.spec.ts

@@ -95,6 +95,50 @@ export const ApplicationTest = async () => {
             (window as unknown as { application: object | null }).application = null;
             expect(press({ key: 's', ctrlKey: true })).toBe(false);
         });
+        await it('inhibit(LOGOUT) cancels beforeunload until uninhibit', () => {
+            const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebInhibit' });
+            const unload = (): boolean => {
+                const event = new Event('beforeunload', { cancelable: true });
+                window.dispatchEvent(event);
+                return event.defaultPrevented;
+            };
+            expect(unload()).toBe(false);
+            const cookie = app.inhibit(null, Gtk.ApplicationInhibitFlags.LOGOUT, 'unsaved changes');
+            expect(cookie > 0).toBe(true);
+            expect(unload()).toBe(true);
+            app.uninhibit(cookie);
+            expect(unload()).toBe(false);
+        });
+        await it('every window class has application, get_application and set_application', () => {
+            const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebWindowApp' });
+            const other = new Adw.Application({ application_id: 'org.gjsify.vec.WebWindowOther' });
+            for (const tag of ['gtk-window', 'gtk-application-window', 'adw-window', 'adw-application-window']) {
+                const window = document.createElement(tag) as unknown as Gtk.WindowCommon<Element>;
+                const notified: unknown[] = [];
+                window.connect('notify::application', () => notified.push(window.application));
+                expect(window.get_application()).toBe(null);
+                window.set_application(app as never);
+                expect(window.get_application()).toBe(app);
+                expect(window.application).toBe(app);
+                expect(app.get_windows().includes(window)).toBe(true);
+                window.set_application(other as never);
+                expect(app.get_windows().includes(window)).toBe(false);
+                expect(other.get_windows().includes(window)).toBe(true);
+                window.application = null;
+                expect(window.get_application()).toBe(null);
+                expect(other.get_windows().includes(window)).toBe(false);
+                expect(notified).toStrictEqual([app, other, null]);
+            }
+        });
+        await it('a window reaches inhibit through get_application()', () => {
+            const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebWindowInhibit' });
+            const window = document.createElement('gtk-window') as unknown as Gtk.WindowCommon<Element>;
+            window.set_application(app as never);
+            const cookie = window.get_application()?.inhibit(window, Gtk.ApplicationInhibitFlags.LOGOUT, 'unsaved');
+            expect((cookie ?? 0) > 0).toBe(true);
+            window.get_application()?.uninhibit(cookie ?? 0);
+            window.set_application(null);
+        });
         await it('quit() takes the windows it added off the page', async () => {
             const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebQuit' });
             const window = scene.window(app as never) as Element;

package/src/application.ts

@@ -10,10 +10,9 @@ import {
     withGtkApplication,
     activateWidgetAction as activateIn,
     activateMenuItem,
-    applicationOfWindow,
+    defineWindowApplicationMembers,
     dispatchAccelerator,
     menuActionsFor,
-    installActionMap,
     type AdwMenuItem,
     type AdwMenuActions,
     type AdwMenuModel,
@@ -40,8 +39,18 @@ export const webHost: ApplicationHost = {
     },
     exit() {},
     iconTheme: () => IconTheme.get_for_display(null),
+    guardUnload(active) {
+        if (active) window.addEventListener('beforeunload', confirmUnload);
+        else window.removeEventListener('beforeunload', confirmUnload);
+    },
 };
 
+/** The only hook a page has on Ctrl+Q, closing the tab and reload; the browser words the prompt. */
+function confirmUnload(event: BeforeUnloadEvent): void {
+    event.preventDefault();
+    event.returnValue = '';
+}
+
 /** An element's parent for action resolution; a popover is rooted at the widget that owns it. */
 export function parentOfElement(node: object): object | null {
     if (!(node instanceof Element)) return null;
@@ -88,23 +97,9 @@ function followAccelerators(window: object, application: WindowApplication | nul
 }
 
 /**
- * `Gtk.Window:application` and the window's `Gio.ActionMap` (`win.` actions) on an element class.
+ * `Gtk.Window:application`, `get_application()` and `set_application()` on a window element class.
  * Setting the property is `add_window`, as on GTK; setting it to `null` is `remove_window`.
  */
 export function defineWindowApplication(proto: object): void {
-    installActionMap(proto);
-    Object.defineProperty(proto, 'application', {
-        configurable: true,
-        enumerable: true,
-        get(this: object) {
-            return applicationOfWindow(this);
-        },
-        set(this: object, value: WindowApplication | null) {
-            const current = applicationOfWindow(this) as unknown as WindowApplication | null;
-            if (current === value) return;
-            current?.remove_window(this);
-            value?.add_window(this);
-            followAccelerators(this, value);
-        },
-    });
+    defineWindowApplicationMembers(proto, followAccelerators);
 }

package/src/capabilities.mjs

@@ -5,6 +5,7 @@
 /** @type {import('./capabilities.d.mts').capabilities} */
 export const capabilities = {
     layout: 'implemented',
+    accessibility: 'implemented',
     strings: 'implemented',
     responses: 'implemented',
     page: 'implemented',
@@ -12,7 +13,5 @@ export const capabilities = {
     signal: 'implemented',
     bind: 'implemented',
     breakpoint: 'implemented',
-    'sibling-object': {
-        refused: 'the web builder mounts one root element and has no consumer for a second root yet (ADR 0093)',
-    },
+    'sibling-object': 'implemented',
 };

package/src/checks.spec.ts

@@ -12,9 +12,10 @@
 // so two scenarios sharing the literal name `colour` would share a selection.
 
 import { describe, expect, it } from '@gjsify/unit';
-import { RADIO_GROUP_VECTORS } from '@gjsify/adwaita-core/conformance';
+import { RADIO_GROUP_VECTORS, driveCheckGroupVectors, type CheckButtonLike } from '@gjsify/adwaita-core/conformance';
 
 import type { GtkCheckButton, AdwRadio } from './elements/checks.js';
+import { buildSharedTree } from './shared-tree-builder.js';
 
 function host(): HTMLElement {
     const el = document.createElement('div');
@@ -354,4 +355,53 @@ export const AdwChecksTest = async () => {
             parent.remove();
         });
     });
+
+    await describe('<gtk-check-button> group (CHECK_GROUP_VECTORS)', async () => {
+        await driveCheckGroupVectors(
+            {
+                name: 'adwaita-web',
+                isOracle: false,
+                make: () => mountCheckbox().el as unknown as CheckButtonLike,
+                activate: (button) => parts(button as unknown as HTMLElement).indicator.click(),
+                countToggled(button) {
+                    let count = 0;
+                    (button as unknown as HTMLElement).addEventListener('toggled', () => void (count += 1));
+                    return () => count;
+                },
+            },
+            { describe, it, expect },
+        );
+
+        await it('a grouped button draws the radio and its input announces role=radio', () => {
+            const [a, b] = [mountCheckbox().el, mountCheckbox().el];
+            b.set_group(a);
+            expect([a.hasAttribute('radio'), parts(b).input.getAttribute('role')].join()).toBe('true,radio');
+            b.set_group(null);
+            expect([a.hasAttribute('radio'), b.hasAttribute('radio'), parts(b).input.hasAttribute('role')].join()).toBe(
+                'true,false,false',
+            );
+        });
+
+        await it('a projected `group: follow` resolves by id once the tree is in the document', () => {
+            const tree = buildSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkCheckButton', id: 'group-follow', props: { active: true } },
+                    { tag: 'GtkCheckButton', id: 'group-dark', props: { group: 'group-follow' } },
+                ],
+            });
+            host().appendChild(tree);
+            const [follow, dark] = ['group-follow', 'group-dark'].map(
+                (id) => document.getElementById(id) as GtkCheckButton,
+            );
+            dark.set_active(true);
+            expect([follow.get_active(), dark.get_active()].join()).toBe('false,true');
+        });
+
+        await it('a group id nothing carries is refused', () => {
+            const el = document.createElement('gtk-check-button') as GtkCheckButton;
+            el.setAttribute('group', 'group-nowhere');
+            expect(() => (el as unknown as { connectedCallback(): void }).connectedCallback()).toThrow();
+        });
+    });
 };

package/src/child-slot.spec.ts

@@ -0,0 +1,71 @@
+// A `.blp`'s `child:` (and every other widget-valued property) becomes `slot: '<property>'` in the
+// shared tree (`packages/infra/blueprint/src/project.mjs`). An element that routed only its
+// DEFAULT slot refused that name on mount, and before the refusal existed it left the child
+// beside the structure it had built — Learn6502's `Overlay { child: Adw.ToastOverlay { … } }`
+// was the measured case. Every element whose GTK class has such a property is mounted here
+// with it, and the child has to land where the element's own binding says that slot goes.
+import { describe, expect, it } from '@gjsify/unit';
+import type { SharedTreeNode } from '@gjsify/adwaita-core/conformance';
+
+import { mountSharedTree } from './shared-tree-builder.js';
+import { slottedChildrenOf } from './slotted-children.js';
+
+/** The GIR class, and the widget-valued property the tree writes as its child's slot. */
+const CASES: ReadonlyArray<readonly [string, string]> = [
+    ['GtkOverlay', 'child'],
+    ['AdwToastOverlay', 'child'],
+    ['AdwDialog', 'child'],
+    ['AdwAlertDialog', 'extra-child'],
+    ['GtkListBoxRow', 'child'],
+    ['GtkFlowBoxChild', 'child'],
+    ['GtkGraphicsOffload', 'child'],
+    ['GtkPaned', 'start-child'],
+    ['GtkPaned', 'end-child'],
+    ['GtkWindow', 'child'],
+    ['GtkWindowHandle', 'child'],
+    ['GtkPopover', 'child'],
+    ['AdwBreakpointBin', 'child'],
+    ['GtkPopoverBin', 'child'],
+    ['GtkViewport', 'child'],
+    ['GtkTreeExpander', 'child'],
+    ['GtkDragIcon', 'child'],
+    ['GtkSearchBar', 'child'],
+    ['AdwBin', 'child'],
+    ['AdwClamp', 'child'],
+    ['GtkScrolledWindow', 'child'],
+    ['GtkRevealer', 'child'],
+    ['GtkFrame', 'child'],
+    ['GtkExpander', 'child'],
+    ['AdwStatusPage', 'child'],
+];
+
+/** Where `child` ended up, read against the slot the parent itself declares. */
+function report(root: HTMLElement, child: Element, slot: string): string {
+    const declared = slottedChildrenOf(root)?.slots.find((candidate) => candidate.name === slot);
+    if (declared === undefined) return 'undeclared';
+    if (!root.contains(child)) return 'outside';
+    if (!('into' in declared)) return 'consumed';
+    return child.parentElement === declared.into ? 'routed' : `beside, under <${child.parentElement?.localName}>`;
+}
+
+export const AdwChildSlotTest = async () => {
+    await describe('adwaita-web: a widget-valued property in a tree is the slot it names', async () => {
+        for (const [tag, slot] of CASES) {
+            await it(`${tag} { ${slot}: … }`, () => {
+                const tree: SharedTreeNode = {
+                    tag,
+                    children: [{ tag: 'GtkBox', id: 'probe', slot }],
+                };
+                let outcome: string;
+                try {
+                    const { root, unmount } = mountSharedTree(tree);
+                    outcome = report(root, root.querySelector('#probe')!, slot);
+                    unmount();
+                } catch (error) {
+                    outcome = `refused: ${(error as Error).message}`;
+                }
+                expect(`${tag} ${slot}: ${outcome}`).toBe(`${tag} ${slot}: routed`);
+            });
+        }
+    });
+};