@gjsify/adwaita-web 0.64.0 → 0.64.1-next.241

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.64.0",
+    "version": "0.64.1-next.241",
     "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.0",
-        "@gjsify/adwaita-fonts": "^0.64.0",
-        "@gjsify/adwaita-icons": "^0.64.0",
-        "@gjsify/gtksource-core": "^0.64.0",
+        "@gjsify/adwaita-core": "0.64.1-next.241",
+        "@gjsify/adwaita-fonts": "0.64.1-next.241",
+        "@gjsify/adwaita-icons": "0.64.1-next.241",
+        "@gjsify/gtksource-core": "0.64.1-next.241",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "^0.64.0"
+        "@gjsify/app-settings": "0.64.1-next.241"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "^0.64.0",
-        "@gjsify/blueprint": "^0.64.0",
-        "@gjsify/cli": "^0.64.0",
-        "@gjsify/unit": "^0.64.0",
-        "@gjsify/vite-plugin-blueprint": "^0.64.0",
+        "@gjsify/app-settings": "0.64.1-next.241",
+        "@gjsify/blueprint": "0.64.1-next.241",
+        "@gjsify/cli": "0.64.1-next.241",
+        "@gjsify/unit": "0.64.1-next.241",
+        "@gjsify/vite-plugin-blueprint": "0.64.1-next.241",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -114,5 +114,6 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
+    "gitHead": "9937e8d27d18d159e35471b6669bdca6dff0cd05"
 }

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

package/src/elements/gtk-window.ts

@@ -73,6 +73,13 @@
 //                    maximize its browser window. `is_maximized()` reads it.
 //   `present()`    — un-hides the frame; a page cannot raise or focus a window it does not own.
 //
+// THE GOBJECT DOOR (ADR 0096 § 3, ADR 0098 Amendment 3): `connect` / `disconnect` / `emit` /
+// `notify` / `get_property` / `set_property` come from `installElementApi`, over the events in
+// `static signals`; an undeclared signal throws. A `close-request` handler that returns true is
+// `preventDefault()` and stops later listeners. `emit('close-request')` throws: the signal is
+// `close()`'s, which also runs the default handler. `is_active` and `focus_widget` are PROPERTIES,
+// as in GJS and `@girs/gtk-4.0` (GTK 4 has no `gtk_window_is_active()`); `is_active()` is gone.
+//
 // Events: `notify::<prop>` (CustomEvent, bubbles, detail `{ <prop>: value }`) on every real
 // change, and `close-request` (CustomEvent, bubbles, CANCELLABLE, no detail), which is
 // `Gtk.Window::close-request`: a listener that calls `preventDefault()` is a GTK handler that
@@ -85,6 +92,8 @@
 
 import { CloseRequestState, WindowMemberState, type WindowMemberProperty } from '@gjsify/adwaita-core';
 
+import { installElementApi } from '../gobject-elements.js';
+import type { DispatchedSignals } from '../signals.js';
 import { bindSlottedChildren, type AdwSlot } from '../slotted-children.js';
 
 // Registers <gtk-window-controls>: a frame with no titlebar of its own draws the two of them
@@ -120,6 +129,64 @@ export class GtkWindow extends HTMLElement {
         this._members.reportFocus(null);
     };
 
+    /**
+     * The GObject door (ADR 0096 § 3): `connect` / `disconnect` / `emit` / `notify` / `get_property` /
+     * `set_property` over these events, the same ones every element declares in `static signals`.
+     * A `close-request` handler that returns true is `preventDefault()`.
+     */
+    static readonly signals: DispatchedSignals = {
+        'close-request': 'close-request',
+        ...Object.fromEntries(
+            [
+                'decorated',
+                'default-height',
+                'default-width',
+                'deletable',
+                'focus-widget',
+                'fullscreened',
+                'hide-on-close',
+                'icon-name',
+                'is-active',
+                'maximized',
+                'modal',
+                'resizable',
+                'title',
+                'transient-for',
+            ].map((name) => [`notify::${name}`, `notify::${name}`]),
+        ),
+    };
+
+    /** `GObject.Object.connect`: installed per instance by `installElementApi`; refuses an undeclared signal. */
+    declare connect: (signal: string, handler: (emitter: this, ...args: any[]) => unknown) => number;
+    /** `GObject.Object.disconnect`: throws for an id that is not connected. */
+    declare disconnect: (id: number) => void;
+    /** `GObject.Object.emit`; `close-request` is refused, call `close()`. */
+    declare emit: (signal: string, ...args: unknown[]) => void;
+    /** `GObject.Object.notify`. */
+    declare notify: (name: string) => void;
+    /** `GObject.Object.get_property`, by GTK's dashed name. */
+    declare get_property: (name: string) => unknown;
+    /** `GObject.Object.set_property`; a read-only property throws. */
+    declare set_property: (name: string, value: unknown) => void;
+
+    constructor() {
+        super();
+        installElementApi(this);
+        // `Gtk.Window::close-request` is emitted by `close()`, which also runs the default handler
+        // (hide or destroy). Emitting it bare would be a different thing under the same name.
+        const emit = (this as unknown as { emit: (signal: string, ...args: unknown[]) => void }).emit;
+        Object.defineProperty(this, 'emit', {
+            configurable: true,
+            writable: true,
+            value: (signal: string, ...args: unknown[]): void => {
+                if (signal === 'close-request') {
+                    throw new Error("<gtk-window>.emit('close-request') is not supported; call close()");
+                }
+                emit(signal, ...args);
+            },
+        });
+    }
+
     static get observedAttributes() {
         return [
             'decorated',
@@ -460,13 +527,16 @@ export class GtkWindow extends HTMLElement {
         this.hidden = false;
     }
 
-    /** `Gtk.Window:is-active` — see the header: the document's focus, while this frame is shown. */
+    /**
+     * `Gtk.Window:is-active` — see the header: the document's focus, while this frame is shown.
+     * A PROPERTY, as in GJS and `@girs/gtk-4.0`: GTK 4 has no `gtk_window_is_active`, so
+     * `window.is_active` is the value and `window.is_active()` does not exist.
+     */
     get isActive(): boolean {
         return this._members.active;
     }
 
-    /** `gtk_window_is_active`. */
-    is_active(): boolean {
+    get is_active(): boolean {
         return this._members.active;
     }
 
@@ -475,6 +545,15 @@ export class GtkWindow extends HTMLElement {
         return this.get_focus();
     }
 
+    /** `Gtk.Window:focus-widget` under its GJS spelling; writing it is `set_focus`. */
+    get focus_widget(): Element | null {
+        return this.get_focus();
+    }
+
+    set focus_widget(widget: Element | null) {
+        this.set_focus(widget);
+    }
+
     /** `gtk_window_get_focus`: the element inside the frame that has focus, or `null`. */
     get_focus(): Element | null {
         const active = document.activeElement;

package/src/gobject-elements.ts

@@ -113,7 +113,13 @@ export function listenElement(el: HTMLElement, signal: string, handler: Handler)
     const listener = (domEvent: Event) => {
         // A notification bubbles, and a parent must not hear its child's property as its own.
         if (notification && domEvent.target !== el) return;
-        handler(el, ...(EMITTED.has(domEvent) ? ((domEvent as CustomEvent).detail as unknown[]) : []));
+        const handled = handler(el, ...(EMITTED.has(domEvent) ? ((domEvent as CustomEvent).detail as unknown[]) : []));
+        // A GTK handler of a boolean-handled signal (`close-request`) returns true to take it over,
+        // which on a cancelable DOM event is `preventDefault()`; the handlers after it do not run.
+        if (handled === true && domEvent.cancelable) {
+            domEvent.preventDefault();
+            domEvent.stopImmediatePropagation();
+        }
     };
     el.addEventListener(event, listener);
     return () => el.removeEventListener(event, listener);
@@ -148,13 +154,26 @@ export function installElementApi(el: HTMLElement): void {
     });
     define('emit', (signal: string, ...args: unknown[]): void => dispatchElement(el, signal, args));
     define('notify', (name: string): void => notifyElement(el, name));
+    define('get_property', (name: string): unknown => {
+        eventOf(el, `notify::${name}`);
+        return (el as unknown as Record<string, unknown>)[propertyOf(name)];
+    });
+    define('set_property', (name: string, value: unknown): void => {
+        eventOf(el, `notify::${name}`);
+        const member = propertyOf(name);
+        const descriptor = inheritedDescriptor(el, member);
+        if (descriptor !== undefined && descriptor.get !== undefined && descriptor.set === undefined) {
+            throw new Error(`Property '${name}' of <${el.localName}> is read-only`);
+        }
+        (el as unknown as Record<string, unknown>)[member] = value;
+    });
     // The `Gtk.Widget` CSS-class calls a template's TypeScript makes on its children.
     define('add_css_class', (name: string): void => el.classList.add(name));
     define('remove_css_class', (name: string): void => el.classList.remove(name));
     define('has_css_class', (name: string): boolean => el.classList.contains(name));
 }
 
-const API_MEMBERS = new Set(['connect', 'disconnect', 'emit', 'notify']);
+const API_MEMBERS = new Set(['connect', 'disconnect', 'emit', 'notify', 'get_property', 'set_property']);
 
 /**
  * The end of a bind the core's engine drives. An element speaks camelCase members where a `.blp`