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

package/src/elements/gtk-stack-switcher.ts

@@ -47,6 +47,7 @@
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
 
 import type { GtkStack } from './gtk-stack.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The `GtkStackPageInfo` half this element reads — it never looks inside `child`. */
 interface SwitcherPage {
@@ -65,7 +66,7 @@ interface SwitcherButton {
     icon: HTMLElement;
 }
 
-export class GtkStackSwitcher extends HTMLElement {
+export class GtkStackSwitcher extends WidgetElement {
     private _stack: GtkStack | null = null;
     private _initialized = false;
     private _nodes: SwitcherButton[] = [];

package/src/elements/gtk-stack.ts

@@ -92,6 +92,8 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import type { DispatchedSignals } from '../signals.js';
+import { STACK_PAGE_ATTRIBUTES, pageChildOf } from './gtk-stack-page.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkStackTransitionType`, spelled as the GIR's enum nicks (gtkstack.c:95-121). */
 export type StackTransitionType =
@@ -225,7 +227,7 @@ export interface GtkStackPageInfo {
 /** The five `GtkStackPage` string/boolean properties this element reads off a child. */
 const PAGE_ATTRIBUTES = ['name', 'title', 'icon-name', 'use-underline', 'needs-attention'];
 
-export class GtkStack extends HTMLElement {
+export class GtkStack extends WidgetElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = {
         'notify::visible-child': 'notify::visible-child',
@@ -416,7 +418,7 @@ export class GtkStack extends HTMLElement {
         }
         this._initialized = true;
         this.setAttribute('role', 'group');
-        for (const child of this._children()) this._initChild(child);
+        for (const child of this._children()) this._initChild(this._adopt(child));
         // `add_page` connects the stack to each page's `notify::visible`
         // (gtkstack.c:1771), which is the browser's mutation observer.
         this._observer = new MutationObserver((records) => this._onChildMutations(records));
@@ -531,12 +533,44 @@ export class GtkStack extends HTMLElement {
         return this._children().find((child) => this._page(child).visible) ?? null;
     }
 
+    /**
+     * A `<gtk-stack-page>` record, adopted: its child takes the record's place and its properties
+     * as the attributes this element reads, the way `<adw-view-stack>` adopts a declared page.
+     * Any other child is already the page and is handed back as it is.
+     */
+    private _adopt(child: HTMLElement): HTMLElement {
+        if (child.localName !== 'gtk-stack-page') return child;
+        const content = pageChildOf(child);
+        if (content === null) {
+            throw new Error(
+                `<gtk-stack-page name="${child.getAttribute('name') ?? ''}"> has no child, so the stack would ` +
+                    'hold a page with nothing to show.',
+            );
+        }
+        for (const name of STACK_PAGE_ATTRIBUTES) {
+            const value = child.getAttribute(name);
+            if (value !== null) content.setAttribute(name, value);
+        }
+        if (child.hasAttribute('hidden')) content.setAttribute('hidden', '');
+        content.removeAttribute('slot');
+        this.replaceChild(content, child);
+        return content;
+    }
+
     private _initChild(child: HTMLElement): void {
         if (this._initializedChildren.has(child)) return;
         this._initializedChildren.add(child);
         child.classList.add('adw-stack-page');
     }
 
+    /**
+     * The observer watches the subtree, so an attribute record can come from anything below a
+     * page; only a direct child is a page of THIS stack (a nested stack's pages are its own).
+     */
+    private _isPage(node: Node): boolean {
+        return node.parentNode === this;
+    }
+
     private _onChildMutations(records: MutationRecord[]): void {
         let added = 0;
         let removed = 0;
@@ -544,13 +578,24 @@ export class GtkStack extends HTMLElement {
         let pageUpdated = false;
         for (const record of records) {
             if (record.type === 'childList') {
+                // The observer watches the subtree for page attributes; a child list changing
+                // below a page (an adopted record handing over its child) is not a page change.
+                if (record.target !== this) continue;
                 for (const node of Array.from(record.removedNodes)) {
+                    // A record leaving as its child takes its place was never a page here.
+                    if (node instanceof HTMLElement && node.localName === 'gtk-stack-page') continue;
                     if (node === this._visible) this._visible = null;
                     if (node === this._lastVisible) this._lastVisible = null;
                     removed += 1;
                 }
                 for (const node of Array.from(record.addedNodes)) {
                     if (!(node instanceof HTMLElement)) continue;
+                    // An adopted record is replaced by its child, and that replacement is the
+                    // childList record the page is counted in.
+                    if (node.localName === 'gtk-stack-page') {
+                        if (node.parentElement === this) this._adopt(node);
+                        continue;
+                    }
                     this._initChild(node);
                     added += 1;
                     if (position === -1) position = this._children().indexOf(node);
@@ -558,13 +603,14 @@ export class GtkStack extends HTMLElement {
                 continue;
             }
             const name = record.attributeName;
-            if (!name) continue;
+            if (!name || !this._isPage(record.target)) continue;
             if (name === 'hidden') {
                 // `stack_child_visibility_notify_cb` (gtkstack.c:1617-1633) re-runs
                 // `update_child_visible`: hiding the visible page falls back to the first
                 // visible one (which is what the NULL means, :1437-1450), and showing one
-                // while none is visible picks it up (:3147-3149).
-                this._show(this._firstVisible());
+                // while none is visible picks it up (:3147-3149). Any other change leaves
+                // the selection where it is.
+                if (!this._visible || !this._page(this._visible).visible) this._show(this._firstVisible());
                 continue;
             }
             if (PAGE_ATTRIBUTES.includes(name)) pageUpdated = true;
@@ -579,7 +625,7 @@ export class GtkStack extends HTMLElement {
         }
         if (pageUpdated) {
             for (const record of records) {
-                if (record.type !== 'attributes') continue;
+                if (record.type !== 'attributes' || !this._isPage(record.target)) continue;
                 const target = record.target as HTMLElement;
                 this.dispatchEvent(new CustomEvent('page-updated', { bubbles: true, detail: { child: target } }));
                 // `gtk_stack_page_set_name` re-notifies `visible-child-name` when the

package/src/elements/gtk-switch.ts

@@ -40,8 +40,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import type { DispatchedSignals } from '../signals.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkSwitch extends HTMLElement {
+export class GtkSwitch extends WidgetElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = {
         'notify::active': 'notify::active',

package/src/elements/gtk-text-view.ts

@@ -50,6 +50,7 @@
 import { normalizeLabelJustify, type LabelJustification } from '@gjsify/adwaita-core';
 
 import { JUSTIFY_TEXT_ALIGN } from './justification.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.WrapMode`'s four nicks, in enum order — Pango's enum, and the DEFAULT is `none`. */
 const WRAP_MODES = ['none', 'char', 'word', 'word-char'] as const;
@@ -83,7 +84,7 @@ export interface GtkTextBufferSubset {
     get_text(): string;
 }
 
-export class GtkTextView extends HTMLElement {
+export class GtkTextView extends WidgetElement {
     private _area!: HTMLTextAreaElement;
     private _initialized = false;
 

package/src/elements/gtk-text.ts

@@ -43,8 +43,9 @@
 //   arithmetic composed from @gjsify/adwaita-core.
 
 import { ENTRY_ROW_MAX_LENGTH_LIMIT, clampEntryText, entryTextLength } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkText extends HTMLElement {
+export class GtkText extends WidgetElement {
     private _input!: HTMLInputElement;
     private _initialized = false;
     private _maxLength = 0;

package/src/elements/gtk-tree-expander.ts

@@ -59,11 +59,13 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { createGtkImage } from './gtk-image.js';
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `TIMEOUT_EXPAND` — how long a drag hovers before the row opens (gtktreeexpander.c:717). */
 const TIMEOUT_EXPAND = 500;
 
-export class GtkTreeExpander extends HTMLElement {
+export class GtkTreeExpander extends WidgetElement {
     private _ornaments: HTMLElement[] = [];
     private _expandTimer: ReturnType<typeof setTimeout> | null = null;
     private _initialized = false;
@@ -142,6 +144,8 @@ export class GtkTreeExpander extends HTMLElement {
             if (!this.hasAttribute('tabindex')) this.tabIndex = 0;
             this._wire();
         }
+        // The NAME only, for the reason `adw-bin.ts` gives: the child already IS the content.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
         this.setAttribute('role', 'button');
         this._render();
     }

package/src/elements/gtk-video.ts

@@ -65,6 +65,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:74-81 (the 64/32 osd icon)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** The four overlay glyphs, in the order `update_overlay_icon` tests them (gtkvideo.c:626-646). */
 export type VideoOverlayIcon =
@@ -99,7 +100,7 @@ export const READY_ICON = 'media-playback-start-symbolic';
 /** `gtk_video_reveal_controls`' timeout: 3 s (gtkvideo.c:130). */
 export const CONTROLS_HIDE_MS = 3000;
 
-export class GtkVideo extends HTMLElement {
+export class GtkVideo extends WidgetElement {
     private _initialized = false;
     private _overlayIcon!: HTMLButtonElement;
     private _controlsRevealer!: HTMLDivElement;

package/src/elements/gtk-viewport.ts

@@ -65,6 +65,9 @@
 
 import { clampAdjustmentValue, normalizeAdjustment, type AdwAdjustment } from '@gjsify/adwaita-core';
 
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
+
 /** `viewport_set_adjustment_values`'s two fractions of the visible size. */
 const STEP_FRACTION = 0.1;
 const PAGE_FRACTION = 0.9;
@@ -92,7 +95,7 @@ function axisAdjustment(clip: HTMLElement, axis: Axis): AdwAdjustment {
     });
 }
 
-export class GtkViewport extends HTMLElement {
+export class GtkViewport extends WidgetElement {
     private _observer: ResizeObserver | null = null;
     private _watch: MutationObserver | null = null;
 
@@ -130,6 +133,8 @@ export class GtkViewport extends HTMLElement {
     }
 
     connectedCallback() {
+        // The NAME only, for the reason `adw-bin.ts` gives: the child already IS the content.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
         this.setAttribute('role', 'generic');
         // `scroll` does not bubble, so the platform's own is heard here, on the node that
         // raised it, and re-announced as GTK's `GtkAdjustment::value-changed`.

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

@@ -66,6 +66,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.PackType`, spelled as the GIR's enum nicks (gtkwindowcontrols.c:68). */
 type PackSide = 'start' | 'end';
@@ -120,7 +121,7 @@ const WINDOW_ATTRIBUTES = [
 /** `closest` over both window spellings — `Adw.Window` is a `GtkWindow` subclass. */
 const WINDOW_SELECTOR = 'gtk-window, adw-window';
 
-export class GtkWindowControls extends HTMLElement {
+export class GtkWindowControls extends WidgetElement {
     private _initialized = false;
     private _empty = true;
     /** The frame this controls answers to, or `null` outside one (`:257-263`). */

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

@@ -46,6 +46,9 @@
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
+
 /** `GtkTitlebarGesture`'s three gestures, as `perform_titlebar_action` decides them. */
 export type GtkTitlebarGesture = 'double-click' | 'middle-click' | 'right-click';
 
@@ -112,7 +115,7 @@ function gestureOf(button: number, presses: number): GtkTitlebarGesture | null {
  */
 const DRAG_THRESHOLD = 1;
 
-export class GtkWindowHandle extends HTMLElement {
+export class GtkWindowHandle extends WidgetElement {
     /** The gesture in progress, as `priv->drag_start_x` / `_y` are in the C. */
     private _drag: { pointerId: number; x: number; y: number } | null = null;
 
@@ -146,6 +149,8 @@ export class GtkWindowHandle extends HTMLElement {
     }
 
     connectedCallback() {
+        // The NAME only, for the reason `adw-bin.ts` gives: the child already IS the content.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
         this.setAttribute('role', 'generic');
         this.addEventListener('click', this._onClick);
         this.addEventListener('pointerdown', this._onPointerDown);

package/src/elements/gtk-window.ts

@@ -47,7 +47,7 @@
 // difference a reader of the DOM can see.
 //
 // NOT PORTED, and why — these are the KNOWN_GAPS of this element:
-//   `application`, `child`, `default-widget`, `display` — WIDGET- or
+//   `child`, `default-widget`, `display` — WIDGET- or
 //     DISPLAY-typed, so a slot or an id here rather than an attribute; `child` and
 //     `titlebar` ARE slots and `transient-for` only has to be PRESENT.
 //   `destroy-with-parent` — a DOM node has no destroy, and a page has no parent to destroy.
@@ -69,8 +69,14 @@
 //                    `set_focus(el)` calls `el.focus()` and refuses an element outside the frame;
 //                    `set_focus(null)` blurs. `focusin`/`focusout` notify; focus that merely
 //                    leaves with the window (blur) keeps its widget, as GTK keeps it.
-//   `maximized`    — the FRAME's state (square corners), not the browser window's: a page cannot
-//                    maximize its browser window. `is_maximized()` reads it.
+//   `maximized`    — the FRAME's state, not the browser window's: a page cannot maximize its
+//                    browser window. Square corners, and — as in GTK, where a maximized or
+//                    fullscreen window ignores its default size and fills the work area — the frame
+//                    fills its CONTAINING BLOCK (the viewport for a frame in a full-height body)
+//                    until it is unmaximized, which restores `default-width`/`default-height`.
+//                    `fullscreened` does the same. `maximize()`, `unmaximize()`, `fullscreen()`,
+//                    `unfullscreen()` and `toggle-maximized` all write the attribute. `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` /
@@ -92,6 +98,7 @@
 
 import { CloseRequestState, WindowMemberState, type WindowMemberProperty } from '@gjsify/adwaita-core';
 
+import { defineWindowApplication, type GtkApplication } from '../application.js';
 import { installElementApi } from '../gobject-elements.js';
 import type { DispatchedSignals } from '../signals.js';
 import { bindSlottedChildren, type AdwSlot } from '../slotted-children.js';
@@ -99,9 +106,11 @@ 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
 // a server-side decoration would have, so importing the window alone must define them.
 import './gtk-window-controls.js';
+import { fillsContainingBlock } from './adw-window-features.js';
 import type { WindowAction } from './gtk-window-controls.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkWindow extends HTMLElement {
+export class GtkWindow extends WidgetElement {
     private _initialized = false;
     /** The `titlebar` strip — `protected` so a subclass can place its own strips around it. */
     protected _titlebar!: HTMLDivElement;
@@ -138,6 +147,7 @@ export class GtkWindow extends HTMLElement {
         'close-request': 'close-request',
         ...Object.fromEntries(
             [
+                'application',
                 'decorated',
                 'default-height',
                 'default-width',
@@ -156,6 +166,11 @@ export class GtkWindow extends HTMLElement {
         ),
     };
 
+    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
+    declare application: GtkApplication | null;
+    declare get_application: () => GtkApplication | null;
+    declare set_application: (application: GtkApplication | null) => void;
+
     /** `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. */
@@ -239,6 +254,15 @@ export class GtkWindow extends HTMLElement {
         this._write('maximized', String(value));
     }
 
+    /** `Gtk.Window:fullscreened` — square corners, and the frame fills its containing block. */
+    get fullscreened(): boolean {
+        return this._offByDefault('fullscreened');
+    }
+
+    set fullscreened(value: boolean) {
+        this._write('fullscreened', String(value));
+    }
+
     /** `Gtk.Window:resizable` — whether the maximize button may appear. */
     get resizable(): boolean {
         return this._onByDefault('resizable');
@@ -300,7 +324,14 @@ export class GtkWindow extends HTMLElement {
         this._content.className = 'adw-gtk-window-content';
 
         bindSlottedChildren(this, [
-            ...(this.hasTitlebar() ? [{ name: 'titlebar', into: this._titlebar }] : []),
+            // `child` only beside a titlebar: AdwWindow and AdwApplicationWindow inherit
+            // `Gtk.Window:child` and abort on it (adw-window.c:180), `content` is theirs.
+            ...(this.hasTitlebar()
+                ? [
+                      { name: 'titlebar', into: this._titlebar },
+                      { name: 'child', into: this._content },
+                  ]
+                : []),
             ...this.extraSlots(),
             { into: this._content },
         ]).install(...this.strips());
@@ -431,16 +462,18 @@ export class GtkWindow extends HTMLElement {
 
     /**
      * The frame's box from `default-width` / `default-height`; an absent one clears it. A subclass
-     * with a size request of its own (`Adw.Window`'s 360×200) replaces this.
+     * with a size request of its own (`Adw.Window`'s 360×200) replaces this. A maximized or
+     * fullscreened frame carries no inline size: the skin fills its containing block.
      */
     protected renderFrameSize(): void {
+        const fills = fillsContainingBlock(this);
         const width = Number.parseFloat(this.getAttribute('default-width') ?? '');
         const height = Number.parseFloat(this.getAttribute('default-height') ?? '');
         for (const [axis, value] of [
             ['width', width],
             ['height', height],
         ] as const) {
-            if (Number.isFinite(value) && value > 0) this.style.setProperty(axis, `${value}px`);
+            if (!fills && Number.isFinite(value) && value > 0) this.style.setProperty(axis, `${value}px`);
             else this.style.removeProperty(axis);
         }
     }
@@ -598,6 +631,23 @@ export class GtkWindow extends HTMLElement {
     unmaximize(): void {
         this._write('maximized', 'false');
     }
+
+    /** `gtk_window_is_fullscreen`: the FRAME's state, like {@link is_maximized}. */
+    is_fullscreen(): boolean {
+        return this.fullscreened;
+    }
+
+    /** `gtk_window_fullscreen`; asynchronous in GTK, so the property is written directly. */
+    fullscreen(): void {
+        this._write('fullscreened', 'true');
+    }
+
+    /** `gtk_window_unfullscreen`, with the same caveat as {@link fullscreen}. */
+    unfullscreen(): void {
+        this._write('fullscreened', 'false');
+    }
 }
 
 customElements.define('gtk-window', GtkWindow);
+
+defineWindowApplication(GtkWindow.prototype);

package/src/gio.spec.ts

@@ -1,23 +1,33 @@
-// The `Gio.SimpleActionGroup` door of adwaita-web, held to the shared vectors (real GJS is their
-// oracle, in adwaita-core's `simple-action-group.gjs.spec.ts`). The door is the namespace module itself.
+// The `Gio.SimpleActionGroup` and `Gio.AppInfo` door of adwaita-web, held to the shared vectors (real GJS
+// is their oracle, in adwaita-core's `simple-action-group.gjs.spec.ts` / `gio-app-info.gjs.spec.ts`). The door is the namespace module itself.
 
 import {
+    GIO_APP_INFO_VECTORS,
     SIMPLE_ACTION_GROUP_VECTORS,
+    driveGioAppInfoVectors,
     driveSimpleActionGroupVectors,
     type GioActionsLike,
+    type GioAppInfoSubject,
 } from '@gjsify/adwaita-core/conformance';
 import { describe, expect, it } from '@gjsify/unit';
 
+import * as Gdk from './namespace/gdk.js';
 import * as Gio from './namespace/gio.js';
+import * as GLib from './namespace/glib.js';
 
 export const GioActionsTest = async () => {
     await driveSimpleActionGroupVectors(
         { name: 'adwaita-web', isOracle: false, Gio: Gio as unknown as GioActionsLike },
         { describe, it, expect },
     );
+    await driveGioAppInfoVectors(
+        { name: 'adwaita-web', isOracle: false, display: true, Gio, GLib, Gdk } as unknown as GioAppInfoSubject,
+        { describe, it, expect },
+        GIO_APP_INFO_VECTORS,
+    );
     await describe('adwaita-web: Gio door', async () => {
         await it('has a vector row for every vector', () => {
-            expect(SIMPLE_ACTION_GROUP_VECTORS.length > 0).toBe(true);
+            expect(SIMPLE_ACTION_GROUP_VECTORS.length > 0 && GIO_APP_INFO_VECTORS.length > 0).toBe(true);
         });
     });
 };

package/src/glib.spec.ts

@@ -5,10 +5,13 @@
 import {
     GLIB_PATH_VECTORS,
     GLIB_TIMER_VECTORS,
+    GLIB_URI_VECTORS,
     driveGLibPathVectors,
     driveGLibTimerVectors,
+    driveGLibUriVectors,
     type GLibPathsLike,
     type GLibTimersLike,
+    type GLibUriLike,
 } from '@gjsify/adwaita-core/conformance';
 import { describe, expect, it } from '@gjsify/unit';
 
@@ -36,6 +39,12 @@ export const GLibTest = async () => {
     await driveGLibPathVectors(
         { name: 'adwaita-web', isOracle: false, GLib: GLib as unknown as GLibPathsLike },
         { describe, it, expect },
+        GLIB_PATH_VECTORS,
+    );
+    await driveGLibUriVectors(
+        { name: 'adwaita-web', isOracle: false, GLib: GLib as unknown as GLibUriLike },
+        { describe, it, expect },
+        GLIB_URI_VECTORS,
     );
     await describe('adwaita-web: GLib door', async () => {
         await it('answers the host-bound path questions with the root and no data dirs', () => {

package/src/gobject-elements.ts

@@ -17,6 +17,7 @@
 import { attributeOf, propertyOf } from '@gjsify/adwaita-core/tags';
 
 import { dispatchedSignalsOf } from './signals.js';
+import { watchMapping } from './widget-mapping.js';
 
 type Handler = (emitter: HTMLElement, ...args: unknown[]) => unknown;
 
@@ -60,7 +61,7 @@ function inheritedDescriptor(el: object, member: string): PropertyDescriptor | u
     return undefined;
 }
 
-function notifyElement(el: HTMLElement, name: string): void {
+export function notifyElement(el: HTMLElement, name: string): void {
     const member = propertyOf(name);
     el.dispatchEvent(
         new CustomEvent(eventOf(el, `notify::${name}`), {
@@ -122,7 +123,12 @@ export function listenElement(el: HTMLElement, signal: string, handler: Handler)
         }
     };
     el.addEventListener(event, listener);
-    return () => el.removeEventListener(event, listener);
+    // `map` / `unmap` have no DOM event behind them: the element is watched while one is connected.
+    const unwatch = signal === 'map' || signal === 'unmap' ? watchMapping(el) : undefined;
+    return () => {
+        el.removeEventListener(event, listener);
+        unwatch?.();
+    };
 }
 
 export function dispatchElement(el: HTMLElement, signal: string, args: readonly unknown[]): void {
@@ -154,6 +160,42 @@ export function installSensitive(el: HTMLElement): void {
     });
 }
 
+const VISIBLE_INSTALLED = new WeakSet<Element>();
+
+/** The `visible` getters `WidgetElement` puts on its prototype, so a class's own accessor tells apart. */
+export const WIDGET_VISIBLE_GETTERS = new WeakSet<() => boolean>();
+
+/**
+ * Whether `el` has the port's `visible` — from `installVisible` or from `WidgetElement`. An
+ * element with its own `visible` (`<gtk-stack-page>`) keeps its own and answers false.
+ */
+export function hasInstalledVisible(el: Element): boolean {
+    if (VISIBLE_INSTALLED.has(el)) return true;
+    const getter = inheritedDescriptor(el, 'visible')?.get;
+    return getter !== undefined && WIDGET_VISIBLE_GETTERS.has(getter as () => boolean);
+}
+
+/**
+ * `Gtk.Widget:visible` for an element that has no member of that name: `gtk_widget_get_visible`
+ * and `gtk_widget_set_visible` over the DOM's `hidden` attribute, TRUE until hidden as GtkWidget's
+ * default is. It notifies only where the element declares `notify::visible`. An element that already declares `visible` (`<gtk-stack-page>`, `<adw-sidebar>`)
+ * keeps its own, and so does a registered class whose prototype has the port's members.
+ */
+export function installVisible(el: HTMLElement): void {
+    if ('visible' in el) return;
+    VISIBLE_INSTALLED.add(el);
+    const define = (name: string, descriptor: PropertyDescriptor) =>
+        Object.defineProperty(el, name, { configurable: true, enumerable: false, ...descriptor });
+    const set = (value: unknown): void => {
+        const before = !el.hidden;
+        el.toggleAttribute('hidden', !value);
+        if (!el.hidden !== before && 'notify::visible' in dispatchedSignalsOf(el)) notifyElement(el, 'visible');
+    };
+    define('visible', { get: () => !el.hidden, set });
+    if (!('get_visible' in el)) define('get_visible', { value: () => !el.hidden, writable: true });
+    if (!('set_visible' in el)) define('set_visible', { value: set, writable: true });
+}
+
 /** Gives `el` the instance API of a registered class, over the events it declares. */
 export function installElementApi(el: HTMLElement): void {
     // A registered class already has the core's four methods on its prototype.

package/src/gtk-label.spec.ts

@@ -325,6 +325,45 @@ export const GtkLabelTest = async () => {
             host.remove();
         });
 
+        // GtkLabel's wrapping MINIMUM is its longest word, not the width it first wrapped
+        // at. A pinned `width` made the measured block the label's min-content, so a card
+        // around it in a narrower pane (Learn6502's preferences: 343px) grew past the pane.
+        await it('lets a wrapped label shrink below the width it first wrapped at', () => {
+            const long = 'word '.repeat(60).trim();
+            const { el, host } = mount(long);
+            host.style.display = 'flex';
+            const card = document.createElement('div');
+            host.appendChild(card);
+            card.appendChild(el);
+            el.wrap = true;
+            const first = el.querySelector('.adw-label-text')!.getBoundingClientRect().width;
+            expect(first > 300).toBe(true);
+            host.style.width = '200px';
+            expect(card.getBoundingClientRect().width <= 200).toBe(true);
+            expect(el.getBoundingClientRect().width <= 200).toBe(true);
+            host.remove();
+        });
+
+        // gtk_label_measure: a wrapping label's minimum is its widest word, its natural
+        // width the text on one line (capped only by `max-width-chars`).
+        await it('gives a wrapped label its widest word as minimum, one line as natural', () => {
+            const long = 'word '.repeat(60).trim();
+            const { el, host } = mount(long);
+            el.wrap = true;
+            const word = mount('word');
+            const wordWidth = textRect(word.el).width;
+            word.host.remove();
+            const line = mount(long);
+            line.host.style.width = 'max-content';
+            const lineWidth = textRect(line.el).width;
+            line.host.remove();
+            host.style.width = 'min-content';
+            expect(el.getBoundingClientRect().width <= Math.ceil(wordWidth) + 1).toBe(true);
+            host.style.width = 'max-content';
+            expect(Math.abs(el.getBoundingClientRect().width - lineWidth) <= 1).toBe(true);
+            host.remove();
+        });
+
         await it('is not selectable unless asked, as GtkLabel', () => {
             const { el, host } = mount('Hi');
             expect(getComputedStyle(el).userSelect).toBe('none');

package/src/gtk-scrolled-window.spec.ts

@@ -216,24 +216,24 @@ export const GtkScrolledWindowTest = async () => {
             await fill(el, 10);
             // No request is made until one of the two asks for it: GTK only measures the
             // child when `propagate-natural-*` or a NEVER policy does (gtkscrolledwindow.c:1841-1844).
-            expect(el.viewport.style.minHeight).toBe('');
+            expect(el.viewport.style.height).toBe('');
             // The NATURAL request is the child's `max-content` size, propagated up.
             el.setAttribute('propagate-natural-height', '');
             expect(el.propagateNaturalHeight).toBe(true);
-            expect(el.viewport.style.minHeight).toBe('max-content');
+            expect(el.viewport.style.height).toBe('max-content');
             // A NEVER policy adds the child's MINIMUM request instead — and the natural one
             // is the larger of the two, so it wins when both are asked for. Both are FALSE in
             // the pspec, so their ATTRIBUTE is their presence, as `has-frame` is.
             el.removeAttribute('propagate-natural-height');
             el.setAttribute('vscrollbar-policy', 'never');
-            expect(el.viewport.style.minHeight).toBe('min-content');
+            expect(el.viewport.style.height).toBe('min-content');
             // With both asked for on ONE axis the natural wins, and the other axis keeps
             // its own answer.
             el.setAttribute('propagate-natural-width', '');
-            expect(el.viewport.style.minWidth).toBe('max-content');
-            expect(el.viewport.style.minHeight).toBe('min-content');
+            expect(el.viewport.style.width).toBe('max-content');
+            expect(el.viewport.style.height).toBe('min-content');
             el.setAttribute('propagate-natural-height', '');
-            expect(el.viewport.style.minHeight).toBe('max-content');
+            expect(el.viewport.style.height).toBe('max-content');
             host.remove();
         });
     });