@gjsify/adwaita-web 0.64.1-next.240 → 0.64.1-next.243

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.64.1-next.240",
+    "version": "0.64.1-next.243",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -58,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "0.64.1-next.240",
-        "@gjsify/adwaita-fonts": "0.64.1-next.240",
-        "@gjsify/adwaita-icons": "0.64.1-next.240",
-        "@gjsify/gtksource-core": "0.64.1-next.240",
+        "@gjsify/adwaita-core": "0.64.1-next.243",
+        "@gjsify/adwaita-fonts": "0.64.1-next.243",
+        "@gjsify/adwaita-icons": "0.64.1-next.243",
+        "@gjsify/gtksource-core": "0.64.1-next.243",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "0.64.1-next.240"
+        "@gjsify/app-settings": "0.64.1-next.243"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "0.64.1-next.240",
-        "@gjsify/blueprint": "0.64.1-next.240",
-        "@gjsify/cli": "0.64.1-next.240",
-        "@gjsify/unit": "0.64.1-next.240",
-        "@gjsify/vite-plugin-blueprint": "0.64.1-next.240",
+        "@gjsify/app-settings": "0.64.1-next.243",
+        "@gjsify/blueprint": "0.64.1-next.243",
+        "@gjsify/cli": "0.64.1-next.243",
+        "@gjsify/unit": "0.64.1-next.243",
+        "@gjsify/vite-plugin-blueprint": "0.64.1-next.243",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -115,5 +115,5 @@
         "url": "https://github.com/gjsify/gjsify/issues"
     },
     "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
-    "gitHead": "9cc65385593e615e921d7c3b2ceb31fd03e98e4b"
+    "gitHead": "f88c7b1074d454e211094963a9f4dc7d0982bf32"
 }

package/scss/_about_dialog.scss

@@ -149,10 +149,10 @@ adw-about-dialog {
     height: 96px;
     margin-top: var(--spacing-s);
     margin-bottom: var(--spacing-m);
-    // Mask-driven .adw-icon skin scaled up to the about-dialog app-icon size.
+    // A symbolic glyph scales with the box; the fill stays `.adw-icon`'s `currentColor`,
+    // which `.adw-icon-color` turns off for a registered colour application icon.
     -webkit-mask-size: contain;
     mask-size: contain;
-    background-color: currentColor;
   }
 
   // --- App name (title-1) ---

package/scss/_icon.scss

@@ -96,3 +96,21 @@
 .adw-icon:not([class*='adw-icon--']) {
   background-color: transparent;
 }
+
+// A FULL-COLOUR icon — what `registerColorIcon()` registers and `<gtk-image>` resolves a
+// name to before (or, for `-symbolic` names, after) the symbolic glyph, in the order GTK's
+// theme tries them. It is drawn as-is, the way GTK draws `hicolor/…/apps/<app-id>.svg`: no
+// mask and no `currentColor` fill, only the image the element puts in `background-image`.
+//
+// The modifier is NOT `adw-icon--…`, so the rule above never sees it as a mask class.
+// Two classes beat both `:where(.adw-icon)` and the one-class sizing rules a context sets
+// (`.adw-about-dialog-icon`'s mask-size), so an icon box drawn in colour never picks up a
+// leftover mask from them.
+.adw-icon.adw-icon-color {
+  mask-image: none;
+  -webkit-mask-image: none;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

package/scss/_window.scss

@@ -26,6 +26,13 @@ adw-application-window {
   outline: 1px solid rgb(255 255 255 / 7%);
   outline-offset: -1px;
 
+  // No authored size (the element sets an inline one from `width`/`default-width`): a page
+  // has no window manager to size a toplevel, so it fills the viewport. The 360×200
+  // minimum (Adw.Window's size request) is the inline min-size the element sets.
+  width: 100%;
+  height: 100dvh;
+  box-sizing: border-box;
+
   // `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.

package/src/adw-action-rows.spec.ts

@@ -674,4 +674,24 @@ export const AdwActionRowsTest = async () => {
             host.remove();
         });
     });
+
+    await describe('declared GTK signals reach connect()', async () => {
+        await it('<adw-action-row> connects `activated`', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            let seen = 0;
+            (el as unknown as { connect(s: string, h: () => void): number }).connect('activated', () => seen++);
+            el.dispatchEvent(new CustomEvent('activated'));
+            expect(seen).toBe(1);
+            host.remove();
+        });
+
+        await it('<adw-switch-row> connects `notify::active`', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            let seen = 0;
+            (el as unknown as { connect(s: string, h: () => void): number }).connect('notify::active', () => seen++);
+            el.setAttribute('active', '');
+            expect(seen).toBe(1);
+            host.remove();
+        });
+    });
 };

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

@@ -143,4 +143,19 @@ export const AdwAlertDialogTest = async () => {
             host.remove();
         });
     });
+
+    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');
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.appendChild(el);
+            const labels = [...el.querySelectorAll('.adw-alert-dialog-response')].map((b) => b.textContent);
+            expect(labels.join(',')).toBe('Cancel,OK');
+            host.remove();
+        });
+    });
 };

package/src/adw-application-window.spec.ts

@@ -47,7 +47,8 @@ export const AdwApplicationWindowTest = async () => {
 
         await it('keeps the inherited size request', async () => {
             const win = makeWindow();
-            expect(win.style.width).toBe('360px');
+            expect(win.style.minWidth).toBe('360px');
+            expect(win.style.width).toBe('');
             win.setAttribute('width', '520');
             expect(win.style.width).toBe('520px');
             win.remove();

package/src/adw-window.spec.ts

@@ -53,13 +53,32 @@ export const AdwWindowTest = async () => {
             win.remove();
         });
 
-        await it('applies the default 360×200 size', async () => {
+        await it('keeps 360×200 as a minimum and fills the viewport without an authored size', async () => {
             const win = makeWindow();
-            expect(win.style.width).toBe('360px');
-            expect(win.style.height).toBe('200px');
+            expect(win.style.minWidth).toBe('360px');
+            expect(win.style.minHeight).toBe('200px');
+            expect(win.style.width).toBe('');
+            expect(win.style.height).toBe('');
+            expect(Math.round(win.getBoundingClientRect().width)).toBe(document.documentElement.clientWidth);
+            expect(Math.round(win.getBoundingClientRect().height)).toBe(window.innerHeight);
             win.remove();
         });
 
+        await it('width-request/height-request override the minimum; gtk-window has none', async () => {
+            const win = document.createElement('adw-window') as AdwWindow;
+            win.setAttribute('width-request', '100');
+            win.setAttribute('height-request', '50');
+            document.body.appendChild(win);
+            expect(win.style.minWidth).toBe('100px');
+            expect(win.style.minHeight).toBe('50px');
+            win.remove();
+            const plain = document.createElement('gtk-window');
+            document.body.appendChild(plain);
+            expect(plain.style.minWidth).toBe('');
+            expect(plain.style.minHeight).toBe('');
+            plain.remove();
+        });
+
         await it('width/height attributes override the default size', async () => {
             const win = document.createElement('adw-window') as AdwWindow;
             win.setAttribute('width', '500');

package/src/bottom-sheet.spec.ts

@@ -577,4 +577,15 @@ export const AdwBottomSheetTest = async () => {
             sheet.remove();
         });
     });
+
+    await describe('<adw-bottom-sheet> declared signals', async () => {
+        await it('connects `notify::open`', () => {
+            const sheet = mountSheet();
+            let seen = 0;
+            (sheet as unknown as { connect(s: string, h: () => void): number }).connect('notify::open', () => seen++);
+            sheet.open = true;
+            expect(seen).toBe(1);
+            sheet.remove();
+        });
+    });
 };

package/src/canvas2d/canvas2d-bridge.ts

@@ -63,7 +63,55 @@ export class Canvas2DBridgeElement extends HostElement {
     private _drawFrame: number | null = null;
 
     static get observedAttributes() {
-        return ['content-width', 'content-height'];
+        return ['content-width', 'content-height', 'focusable', 'can-focus'];
+    }
+
+    /**
+     * `Gtk.Widget:focusable`, whether the widget can hold the keyboard focus. `Gtk.DrawingArea`
+     * leaves it FALSE, so it is read by PRESENCE; a blueprint's `focusable: true` writes it.
+     */
+    get focusable(): boolean {
+        return this.hasAttribute('focusable');
+    }
+
+    set focusable(v: boolean) {
+        this.toggleAttribute('focusable', !!v);
+    }
+
+    /** `Gtk.Widget:can-focus`, TRUE by default, so it is read by VALUE. */
+    get canFocus(): boolean {
+        return this.getAttribute('can-focus') !== 'false';
+    }
+
+    set canFocus(v: boolean) {
+        this.setAttribute('can-focus', v ? 'true' : 'false');
+    }
+
+    get can_focus(): boolean {
+        return this.canFocus;
+    }
+
+    set can_focus(v: boolean) {
+        this.canFocus = v;
+    }
+
+    /**
+     * `gtk_widget_grab_focus`: moves the keyboard focus here and says whether it landed.
+     * FALSE when the widget is not focusable or cannot focus, as in GTK.
+     */
+    grab_focus(): boolean {
+        if (!this.focusable || !this.canFocus) return false;
+        this.focus();
+        return this.ownerDocument.activeElement === this;
+    }
+
+    grabFocus(): boolean {
+        return this.grab_focus();
+    }
+
+    private _syncFocus(): void {
+        if (this.focusable && this.canFocus) this.tabIndex = 0;
+        else this.removeAttribute('tabindex');
     }
 
     /** `Gtk.DrawingArea:content-width`, the minimum and natural width. Defaults to 0. */
@@ -161,6 +209,7 @@ export class Canvas2DBridgeElement extends HostElement {
         this.style.overflow = 'hidden';
         this.style.position = 'relative';
         this._publishSize();
+        this._syncFocus();
         this._observe();
     }
 
@@ -171,6 +220,7 @@ export class Canvas2DBridgeElement extends HostElement {
 
     attributeChangedCallback(name: string) {
         if (name === 'content-width' || name === 'content-height') this._publishSize();
+        else this._syncFocus();
     }
 
     private _publishSize(): void {

package/src/canvas2d-bridge.spec.ts

@@ -0,0 +1,47 @@
+// DOM-level tests for <gjsify-canvas2d-bridge>: the keyboard focus a game console needs for its keys.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { Canvas2DBridgeElement } from './canvas2d/canvas2d-bridge.js';
+
+function mount(attrs: Record<string, string> = {}): { el: Canvas2DBridgeElement; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gjsify-canvas2d-bridge') as Canvas2DBridgeElement;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const Canvas2DBridgeTest = async () => {
+    await describe('<gjsify-canvas2d-bridge> focus', async () => {
+        await it('is not focusable by default, so grab_focus returns false', () => {
+            const { el, host } = mount();
+            expect(el.focusable).toBe(false);
+            expect(el.grab_focus()).toBe(false);
+            expect(document.activeElement === el).toBe(false);
+            host.remove();
+        });
+
+        await it('grab_focus takes the keyboard focus when focusable', () => {
+            const { el, host } = mount({ focusable: '' });
+            expect(el.grab_focus()).toBe(true);
+            expect(document.activeElement === el).toBe(true);
+            host.remove();
+        });
+
+        await it('a focusable set after connect makes the element focusable', () => {
+            const { el, host } = mount();
+            el.focusable = true;
+            expect(el.grab_focus()).toBe(true);
+            host.remove();
+        });
+
+        await it('can-focus false refuses the focus', () => {
+            const { el, host } = mount({ focusable: '' });
+            el.canFocus = false;
+            expect(el.can_focus).toBe(false);
+            expect(el.grab_focus()).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/elements/adw-about-dialog.ts

@@ -19,8 +19,10 @@
 // Properties / attributes (all reflected, mirroring the AdwAboutDialog GObject
 // properties of the same name, hyphenated):
 //   application-name   the application's display name (shown as a title-1)
-//   application-icon   a symbolic icon name (with or without -symbolic); absent
-//                        one, no icon is drawn
+//   application-icon   an icon name, by convention the application ID; drawn in
+//                        colour once `registerColorIcon(id, …)` registered it, else
+//                        as a symbolic glyph or `image-missing` (`<gtk-image>`'s
+//                        lookup); absent one, no icon is drawn
 //   developer-name     the developer / vendor line below the name
 //   version            the version, shown as a clickable pill
 //   comments           a longer description (Details page)

package/src/elements/adw-action-row.ts

@@ -27,6 +27,7 @@ import { ActionRowState } from '@gjsify/adwaita-core';
 import { bindEmptySections } from '../empty-sections.js';
 import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import type { DispatchedSignals } from '../signals.js';
 import { type AdwRowActivation, attachRowActivation } from './row-activation.js';
 import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
@@ -44,6 +45,9 @@ function isSensitive(widget: HTMLElement): boolean {
 }
 
 export class AdwActionRow extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = { activated: 'activated' };
+
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
     private _suffixEl!: HTMLDivElement;

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

@@ -222,6 +222,10 @@ export class AdwAlertDialog extends HTMLElement {
         this._responseAreaEl = document.createElement('div');
         this._responseAreaEl.className = 'adw-alert-dialog-responses';
 
+        // Responses added before the first connect already own a button (`addResponse` is
+        // callable at any point in the dialog's life); only the area to hang them in was missing.
+        this._responseAreaEl.append(...this._buttons.values());
+
         this._dialogEl.append(messageArea, this._responseAreaEl);
 
         // Two slots, both LIVE. An `<adw-alert-response>` is DATA — read for its id, label
@@ -463,6 +467,8 @@ export class AdwAlertDialog extends HTMLElement {
     }
 
     private _render(): void {
+        // Before the first connect there is no DOM to render into; `connectedCallback` renders.
+        if (!this._initialized) return;
         this.classList.toggle('open', this.open);
 
         const heading = this.heading;

package/src/elements/adw-application-window.ts

@@ -57,7 +57,14 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
     // resolves a `[...Base.observedAttributes]` spread across files, and reports a
     // `super` one as unreadable rather than as empty).
     static get observedAttributes(): string[] {
-        return [...GtkApplicationWindow.observedAttributes, 'width', 'height', 'menu-model'];
+        return [
+            ...GtkApplicationWindow.observedAttributes,
+            'width',
+            'height',
+            'width-request',
+            'height-request',
+            'menu-model',
+        ];
     }
 
     /** The content area — the Adw.Window:content property. */
@@ -131,7 +138,7 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
     }
 
     attributeChangedCallback(name: string) {
-        if (name === 'width' || name === 'height') {
+        if (name === 'width' || name === 'height' || name === 'width-request' || name === 'height-request') {
             this.renderFrameSize();
             return;
         }

package/src/elements/adw-bottom-sheet.ts

@@ -64,6 +64,7 @@ import type {
 } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren, type AdwSlot } from '../slotted-children.js';
+import type { DispatchedSignals } from '../signals.js';
 
 /** The persistent content. Child of <adw-bottom-sheet>; consumed at connect time. */
 export class AdwBottomSheetContent extends HTMLElement {}
@@ -75,6 +76,9 @@ export class AdwBottomSheetSheet extends HTMLElement {}
 export class AdwBottomSheetBottomBar extends HTMLElement {}
 
 export class AdwBottomSheet extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = { 'notify::open': 'notify::open' };
+
     private _initialized = false;
     private _contentEl!: HTMLDivElement;
     private _dimmingEl!: HTMLDivElement;

package/src/elements/adw-navigation-view.ts

@@ -55,6 +55,7 @@ import { BACK_BUTTON_FALLBACK_TOOLTIP, NavigationViewState, describeNavigationDi
 import type { AdwNavigationPageProps, NavigationDiagnostic, NavigationStackChange } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import type { DispatchedSignals } from '../signals.js';
 
 /** The page properties the core owns, read off the element's attributes. */
 function readPageProps(page: AdwNavigationPage): AdwNavigationPageProps {
@@ -135,6 +136,14 @@ export class AdwNavigationPage extends HTMLElement {
 }
 
 export class AdwNavigationView extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = {
+        pushed: 'pushed',
+        popped: 'popped',
+        replaced: 'replaced',
+        'notify::visible-page': 'notify::visible-page',
+    };
+
     private _pagesEl!: HTMLDivElement;
     // The back button injected into each visible page (so we can remove it).
     private readonly _backButtons = new WeakMap<AdwNavigationPage, HTMLElement>();
@@ -178,6 +187,11 @@ export class AdwNavigationView extends HTMLElement {
         return this._state.visiblePageTag;
     }
 
+    /** `adw_navigation_view_get_visible_page_tag`. */
+    get_visible_page_tag(): string | null {
+        return this.visiblePageTag;
+    }
+
     get depth(): number {
         return this._state.depth;
     }
@@ -303,6 +317,11 @@ export class AdwNavigationView extends HTMLElement {
         return pushed;
     }
 
+    /** `adw_navigation_view_push_by_tag`, under the name a GJS caller uses. */
+    push_by_tag(tag: string): boolean {
+        return this.pushByTag(tag);
+    }
+
     /** Push the page carrying `tag` (mirrors AdwNavigationView.push_by_tag). */
     pushByTag(tag: string): boolean {
         const pushed = this._state.pushByTag(tag);

package/src/elements/adw-switch-row.ts

@@ -29,6 +29,7 @@ import { SwitchRowState, deriveRowLabels } from '@gjsify/adwaita-core';
 import { bindEmptySections } from '../empty-sections.js';
 import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import type { DispatchedSignals } from '../signals.js';
 import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
@@ -42,6 +43,9 @@ import { attachRowActivation } from './row-activation.js';
 import type { GtkSwitch } from './gtk-switch.js';
 
 export class AdwSwitchRow extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = { 'notify::active': 'notify::active' };
+
     private _switchEl!: GtkSwitch;
     private _prefixEl!: HTMLDivElement;
     /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */

package/src/elements/adw-window-features.ts

@@ -13,10 +13,16 @@
 import { AdwBreakpoint } from '@gjsify/adwaita-core';
 import { addBreakpoints } from '../breakpoints.js';
 
-/** The default minimum size of an AdwWindow, from adw_window_init (C:344). */
+/** `adw_window_init`'s size request: a MINIMUM, overridable by `width-request`/`height-request`. */
 const DEFAULT_WIDTH = 360;
 const DEFAULT_HEIGHT = 200;
 
+/** A `width-request`/`height-request` attribute as px; absent, unparsable or -1 means unset. */
+function requested(host: HTMLElement, name: string, fallback: number): number {
+    const value = Number.parseFloat(host.getAttribute(name) ?? '');
+    return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+
 export class AdwWindowFeatures {
     private _contentEl: HTMLDivElement | null = null;
     private _breakpoints: AdwBreakpoint[] = [];
@@ -117,12 +123,21 @@ export class AdwWindowFeatures {
         this._disposeBreakpoints = null;
     }
 
-    /** The window's size request — GTK's, not CSS's, so an absent attribute means the default. */
+    /**
+     * The window's size. `Adw.Window` defaults to a 360×200 MINIMUM (a size request, not the
+     * size; `width-request`/`height-request` override it). `default-width/height` is only
+     * a default: an authored size is the box, and an absent one leaves the box to the
+     * stylesheet, which fills the viewport — a page has no window manager to pick a size.
+     */
     applySizeRequest(): void {
         const host = this._host;
+        host.style.minWidth = `${requested(host, 'width-request', DEFAULT_WIDTH)}px`;
+        host.style.minHeight = `${requested(host, 'height-request', DEFAULT_HEIGHT)}px`;
         const width = host.getAttribute('default-width') ?? host.getAttribute('width');
         const height = host.getAttribute('default-height') ?? host.getAttribute('height');
-        host.style.width = width ? `${width}px` : `${DEFAULT_WIDTH}px`;
-        host.style.height = height ? `${height}px` : `${DEFAULT_HEIGHT}px`;
+        if (width) host.style.width = `${width}px`;
+        else host.style.removeProperty('width');
+        if (height) host.style.height = `${height}px`;
+        else host.style.removeProperty('height');
     }
 }

package/src/elements/adw-window.ts

@@ -48,7 +48,7 @@ export class AdwWindow extends GtkWindow {
     private readonly _features = new AdwWindowFeatures(this);
 
     static get observedAttributes() {
-        return [...GtkWindow.observedAttributes, 'width', 'height'];
+        return [...GtkWindow.observedAttributes, 'width', 'height', 'width-request', 'height-request'];
     }
 
     /** The content area — the Adw.Window:content property. */
@@ -105,7 +105,7 @@ export class AdwWindow extends GtkWindow {
     attributeChangedCallback(name: string) {
         // The size request is read from the ATTRIBUTE, so it is applied on every change —
         // including one that arrived before the element was connected.
-        if (name === 'width' || name === 'height') {
+        if (name === 'width' || name === 'height' || name === 'width-request' || name === 'height-request') {
             this.renderFrameSize();
             return;
         }

package/src/elements/gtk-application-window.ts

@@ -28,6 +28,7 @@
 
 import type { ActionLike } from '@gjsify/adwaita-core';
 import type { GtkApplication } from '../application.js';
+import type { DispatchedSignals } from '../signals.js';
 import type { AdwSlot } from '../slotted-children.js';
 import { GtkWindow } from './gtk-window.js';
 import { defineWindowApplication } from '../application.js';
@@ -45,6 +46,11 @@ export class GtkApplicationWindow extends GtkWindow {
     private _menubar: HTMLDivElement | null = null;
     private _menubarObserver: MutationObserver | null = null;
 
+    static override readonly signals: DispatchedSignals = {
+        ...GtkWindow.signals,
+        'notify::show-menubar': 'notify::show-menubar',
+    };
+
     static get observedAttributes(): string[] {
         return [...GtkWindow.observedAttributes, 'show-menubar'];
     }