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

package/src/elements/gtk-level-bar.ts

@@ -47,6 +47,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkLevelBarMode`, spelled as the GIR's enum nicks (:1004-1008). */
 type LevelBarMode = 'continuous' | 'discrete';
@@ -81,7 +82,7 @@ function numberAttribute(element: HTMLElement, name: string, fallback: number):
     return Number.isFinite(raw) ? raw : fallback;
 }
 
-export class GtkLevelBar extends HTMLElement {
+export class GtkLevelBar extends WidgetElement {
     private _trough!: HTMLSpanElement;
     private _initialized = false;
     /** Offset name → value, kept sorted ascending exactly as the C's `GList` is. */

package/src/elements/gtk-list-box-row.ts

@@ -44,8 +44,9 @@
 
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type AdwRowActivation, attachRowActivation } from './row-activation.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkListBoxRow extends HTMLElement {
+export class GtkListBoxRow extends WidgetElement {
     private _contentsEl!: HTMLDivElement;
     private _activation?: AdwRowActivation;
     private _initialized = false;
@@ -110,7 +111,9 @@ export class GtkListBoxRow extends HTMLElement {
         // `child` is a WIDGET property, so it is a slot here (gtklistbox.c:3307-3331): the
         // authored child lands in the same node `gtk_list_box_row_set_child` would put it in,
         // and a child appended after connect lands there too.
-        bindSlottedChildren(this, [{ into: this._contentsEl }]).install(this._contentsEl);
+        bindSlottedChildren(this, [{ name: 'child', into: this._contentsEl }, { into: this._contentsEl }]).install(
+            this._contentsEl,
+        );
 
         // GTK declares the accessible role unconditionally (gtklistbox.c:3955), so there is
         // no `selection-mode` to condition it on here.

package/src/elements/gtk-list-box.ts

@@ -67,6 +67,7 @@ import { attachRovingFocus } from './roving-focus.js';
 // server-rendered box and collect its rows. See `adw-expander-row.ts` for why a combined
 // `import { GtkListBoxRow }` would not do it.
 import './gtk-list-box-row.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkListTabBehavior`'s nicks — `cell` behaves as `item` outside a cell-based box. */
 export type GtkListTabBehavior = 'all' | 'item' | 'cell';
@@ -78,7 +79,7 @@ export function normalizeListTabBehavior(raw: string | null | undefined): GtkLis
     return raw !== null && raw !== undefined && TAB_BEHAVIORS.has(raw) ? (raw as GtkListTabBehavior) : 'all';
 }
 
-export class GtkListBox extends HTMLElement {
+export class GtkListBox extends WidgetElement {
     private _rows: GtkListBoxRow[] = [];
     private _selection: number[] = [];
     /** `box->selected_row`, `-1` for the C's NULL. */

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

@@ -68,6 +68,7 @@ import { bindSlottedChildren } from '../slotted-children.js';
 import { stringListSlot } from '../string-list-slot.js';
 
 import { attachRovingFocus } from './roving-focus.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkListTabBehavior`'s nicks — `cell` behaves as `item` outside a cell-based view. */
 export type GtkListTabBehavior = 'all' | 'item' | 'cell';
@@ -79,7 +80,7 @@ export function normalizeListTabBehavior(raw: string | null | undefined): GtkLis
     return raw !== null && raw !== undefined && TAB_BEHAVIORS.has(raw) ? (raw as GtkListTabBehavior) : 'all';
 }
 
-export class GtkListView extends HTMLElement {
+export class GtkListView extends WidgetElement {
     protected _listEl!: HTMLDivElement;
     protected _rows: HTMLElement[] = [];
     /** The model + selection machine all three views share (ADR 0004, ADR 0089). */

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

@@ -85,6 +85,7 @@
 //   :296-306, `play_button_clicked`)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 // The play/pause pair `ui/gtkvideo.ui`'s `play_button` carries, as constants for the same
 // reason the video's four overlay glyphs are constants — `check-adwaita-icon-masks.mjs` finds
@@ -185,7 +186,7 @@ export function mediaTimeToString(seconds: number, remaining = false, forceHour
     return `${min}:${String(sec).padStart(2, '0')}`;
 }
 
-export class GtkMediaControls extends HTMLElement {
+export class GtkMediaControls extends WidgetElement {
     private _initialized = false;
     private _playButton!: HTMLButtonElement;
     private _timeLabel!: HTMLSpanElement;

package/src/elements/gtk-menu-button.ts

@@ -49,6 +49,7 @@ import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
 
 import { createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * Where the popover sits, per `GtkArrowType`. `menuButtonPopupDirection` folds `none`
@@ -65,7 +66,7 @@ const POPOVER_POSITIONS = {
     right: 'end',
 } as const;
 
-export class GtkMenuButton extends HTMLElement {
+export class GtkMenuButton extends WidgetElement {
     private _buttonEl!: HTMLButtonElement;
     private _popoverEl!: GtkPopover;
     private _model: AdwMenuModel = [];

package/src/elements/gtk-notebook.ts

@@ -70,6 +70,7 @@
 // Reference: refs/gtk/gtk/gtknotebook.c
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkPositionType`, spelled as the GIR's enum nicks. `top` is the property default. */
 export type NotebookTabPos = 'top' | 'bottom' | 'left' | 'right';
@@ -99,7 +100,7 @@ export interface NotebookPageInfo {
     child: HTMLElement;
 }
 
-export class GtkNotebook extends HTMLElement {
+export class GtkNotebook extends WidgetElement {
     private _current: HTMLElement | null = null;
     private _initialized = false;
     private _initializedChildren = new WeakSet<HTMLElement>();

package/src/elements/gtk-overlay.ts

@@ -48,11 +48,12 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The edges `gtk_overlay_child_update_style_classes` can pin a child to. */
 const EDGES = ['left', 'right', 'top', 'bottom'] as const;
 
-export class GtkOverlay extends HTMLElement {
+export class GtkOverlay extends WidgetElement {
     private _childEl!: HTMLDivElement;
     private _layerEl!: HTMLDivElement;
     private _initialized = false;
@@ -98,10 +99,11 @@ export class GtkOverlay extends HTMLElement {
         // bare `<child>` — the default — is the main child, which is the pairing
         // `packages/framework/gtk-host/src/descriptors/gtk.ts` curates for `GtkOverlay`
         // (`slots: { child, overlay }`, `defaultSlot: 'child'`).
-        bindSlottedChildren(this, [{ into: this._childEl }, { name: 'overlay', into: this._layerEl }]).install(
-            this._childEl,
-            this._layerEl,
-        );
+        bindSlottedChildren(this, [
+            { name: 'child', into: this._childEl },
+            { into: this._childEl },
+            { name: 'overlay', into: this._layerEl },
+        ]).install(this._childEl, this._layerEl);
 
         this._observe();
     }

package/src/elements/gtk-paned.ts

@@ -69,6 +69,7 @@
 import { glibClamp, normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `gtkpaned.c:131` — `HANDLE_EXTRA_SIZE`, how far the hit area reaches past the node. */
 const HANDLE_EXTRA_SIZE = 6;
@@ -162,7 +163,7 @@ export function computePanedPosition(input: PanedPositionInput): PanedPosition {
     return { min, max, position: glibClamp(position, min, max) };
 }
 
-export class GtkPaned extends HTMLElement {
+export class GtkPaned extends WidgetElement {
     private _startEl!: HTMLDivElement;
     private _handleEl!: HTMLDivElement;
     private _endEl!: HTMLDivElement;
@@ -278,7 +279,13 @@ export class GtkPaned extends HTMLElement {
         // (gtkpaned.c:816-826).
         bindSlottedChildren(
             this,
-            [{ into: this._startEl }, { name: 'start', into: this._startEl }, { name: 'end', into: this._endEl }],
+            [
+                { into: this._startEl },
+                { name: 'start', into: this._startEl },
+                { name: 'end', into: this._endEl },
+                { name: 'start-child', into: this._startEl },
+                { name: 'end-child', into: this._endEl },
+            ],
             () => this._observe(),
         ).install(this._startEl, this._handleEl, this._endEl);
 

package/src/elements/gtk-picture.ts

@@ -62,6 +62,7 @@
 //   `gtk_picture_set_content_fit` :1092-1131)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkContentFit`, in enum order — the four nicks the GIR and CSS share. */
 export const PICTURE_CONTENT_FIT_MODES = ['fill', 'contain', 'cover', 'scale-down'] as const;
@@ -82,7 +83,7 @@ export function normalizePictureContentFit(value: unknown): PictureContentFit {
         : DEFAULT_PICTURE_CONTENT_FIT;
 }
 
-export class GtkPicture extends HTMLElement {
+export class GtkPicture extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/gtk-popover-bin.ts

@@ -75,11 +75,13 @@ import type { AdwMenuActions, AdwMenuInput, AdwMenuModel } from '@gjsify/adwaita
 import './gtk-popover-menu.js';
 
 import type { GtkPopoverMenu } from './gtk-popover-menu.js';
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** How long a press must last to count as a long press — GTK's own default. */
 const LONG_PRESS_MS = 500;
 
-export class GtkPopoverBin extends HTMLElement {
+export class GtkPopoverBin extends WidgetElement {
     private _model: AdwMenuModel = [];
     private _popover: GtkPopoverMenu | null = null;
     private _actions: AdwMenuActions | null = null;
@@ -150,6 +152,8 @@ export class GtkPopoverBin extends HTMLElement {
         this._initialized = true;
         // `gtk_widget_class_set_css_name (widget_class, "popoverbin")` (gtkpopoverbin.c:382).
         this.classList.add('adw-popover-bin');
+        // The NAME only, for the reason `adw-bin.ts` gives: the child already IS the content.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
         this.addEventListener('contextmenu', (event) => this._onContextMenu(event));
         this.addEventListener('keydown', (event) => this._onKeyDown(event));
         this._wireGestures();

package/src/elements/gtk-popover-menu-bar.ts

@@ -73,6 +73,7 @@ import type { AdwMenuActions, AdwMenuInput, AdwMenuModel, AdwMenuPath, AdwMenuSu
 import './gtk-popover-menu.js';
 
 import type { GtkPopoverMenu } from './gtk-popover-menu.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** One bar item: its submenu node, the popover below it, and the DOM that draws both. */
 interface MenuBarItem {
@@ -85,7 +86,7 @@ interface MenuBarItem {
     popover: GtkPopoverMenu;
 }
 
-export class GtkPopoverMenuBar extends HTMLElement {
+export class GtkPopoverMenuBar extends WidgetElement {
     private _model: AdwMenuModel = [];
     private _actions: AdwMenuActions | null = null;
     private _items: MenuBarItem[] = [];

package/src/elements/gtk-popover-menu.ts

@@ -161,6 +161,11 @@ export class GtkPopoverMenu extends GtkPopover {
         this.openSubmenu(value);
     }
 
+    /** The menu's own stack is the child (gtkpopovermenu.c `gtk_popover_menu_init`). */
+    protected override takesChild(): boolean {
+        return false;
+    }
+
     connectedCallback() {
         super.connectedCallback();
         if (this._menuInitialized) return;

package/src/elements/gtk-popover.ts

@@ -82,6 +82,9 @@
 
 import { PopoverState, resolvePopoverKey } from '@gjsify/adwaita-core';
 
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
+
 /** Which side of the anchor the surface sits on. */
 export type GtkPopoverPosition = 'bottom' | 'top' | 'start' | 'end';
 
@@ -107,7 +110,7 @@ const ROLES: readonly GtkPopoverRole[] = [...LIST_ROLES, 'dialog'];
 /** The row selector keyboard navigation walks. */
 const ITEM_SELECTOR = '.adw-popover-item';
 
-export class GtkPopover extends HTMLElement {
+export class GtkPopover extends WidgetElement {
     private readonly _state = new PopoverState();
     private _anchor: HTMLElement | null = null;
     private _initialized = false;
@@ -257,10 +260,20 @@ export class GtkPopover extends HTMLElement {
         if (this._state.open) this._bindDocument();
     }
 
+    /**
+     * Whether `Gtk.Popover:child` is the author's to set. A subclass that builds its own
+     * content (GtkPopoverMenu, GtkEmojiChooser) sets the child itself, as their C does.
+     */
+    protected takesChild(): boolean {
+        return true;
+    }
+
     private _buildOnce() {
         if (this._initialized) return;
         this._initialized = true;
 
+        // The NAME only, for the reason `adw-bin.ts` gives: the child already IS the content.
+        if (this.takesChild()) bindSlottedChildren(this, [{ name: 'child', into: this }]);
         this.classList.add('adw-popover');
         if (!this.hasAttribute('role')) this.setAttribute('role', 'menu');
         // The `menu` variant is NOT defaulted or inferred here — it is GTK's `.menu`

package/src/elements/gtk-progress-bar.ts

@@ -41,8 +41,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { glibClamp } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkProgressBar extends HTMLElement {
+export class GtkProgressBar extends WidgetElement {
     private _trough!: HTMLSpanElement;
     private _progress!: HTMLSpanElement;
     private _text!: HTMLSpanElement;

package/src/elements/gtk-revealer.ts

@@ -60,6 +60,7 @@
 import { easeOutCubic } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** Every `GtkRevealerTransitionType` nick, in GIR order. */
 const TRANSITION_TYPES = [
@@ -116,7 +117,7 @@ const RTL_FLIP: Partial<Record<RevealerTransitionType, RevealerTransitionType>>
     'fade-slide-right': 'fade-slide-left',
 };
 
-export class GtkRevealer extends HTMLElement {
+export class GtkRevealer extends WidgetElement {
     private _clipEl!: HTMLDivElement;
     private _initialized = false;
     /** `current_pos` — 0 hidden, 1 shown. */

package/src/elements/gtk-scale-button.ts

@@ -53,6 +53,7 @@ import { createGtkImage } from './gtk-image.js';
 // TypeScript and take the registration with it.
 import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `gtk_adjustment_new (0, 0, 100, 2, 20, 0)` — the adjustment a bare scale button has. */
 const GTK_ADJUSTMENT: AdwAdjustmentInput = {
@@ -63,7 +64,7 @@ const GTK_ADJUSTMENT: AdwAdjustmentInput = {
     pageSize: 0,
 };
 
-export class GtkScaleButton extends HTMLElement {
+export class GtkScaleButton extends WidgetElement {
     private readonly _state = new SpinState();
     private _buttonEl!: HTMLButtonElement;
     private _glyph!: HTMLElement;

package/src/elements/gtk-scale.ts

@@ -43,6 +43,7 @@ import {
     parseAdjustment,
 } from '@gjsify/adwaita-core';
 import type { AdwAdjustment, AdwAdjustmentInput, BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.PositionType` nicks, as `GtkScale:value-pos` spells them. */
 const VALUE_POSITIONS = ['left', 'right', 'top', 'bottom'] as const;
@@ -90,7 +91,7 @@ export function formatScaleValue(value: number, digits: number): string {
     return text;
 }
 
-export class GtkScale extends HTMLElement {
+export class GtkScale extends WidgetElement {
     /** The headless `Gtk.Adjustment`: the range, the clamp and the two signals (ADR 0004, ADR 0047). */
     private readonly _range = new SpinState();
     private _trough!: HTMLElement;

package/src/elements/gtk-scrollbar.ts

@@ -66,6 +66,7 @@ import {
     type AdwAdjustmentInput,
     type BoxOrientation,
 } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /** The two nodes below GTK's `range` level, spelled as GTK spells them. */
 const TROUGH_CLASS = 'adw-scrollbar-trough';
@@ -112,7 +113,7 @@ const ZERO_ADJUSTMENT: AdwAdjustment = Object.freeze({
     pageSize: 0,
 });
 
-export class GtkScrollbar extends HTMLElement {
+export class GtkScrollbar extends WidgetElement {
     private _trough!: HTMLElement;
     private _slider!: HTMLElement;
     private _observer: ResizeObserver | null = null;

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

@@ -93,6 +93,7 @@ import { AdwScrollShading } from '../scroll-shading.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import type { GtkScrollType } from './gtk-scrollbar.js';
 import type { GtkViewport } from './gtk-viewport.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * `INDICATOR_FADE_OUT_DELAY` — how long an indicator waits, after the last scroll, before
@@ -148,7 +149,7 @@ const AXES = [
         bar: 'horizontal',
         policy: 'hscrollbar-policy',
         natural: 'propagate-natural-width',
-        cssMin: 'minWidth',
+        cssSize: 'width',
         end: 'left',
         farEnd: 'right',
     },
@@ -157,7 +158,7 @@ const AXES = [
         bar: 'vertical',
         policy: 'vscrollbar-policy',
         natural: 'propagate-natural-height',
-        cssMin: 'minHeight',
+        cssSize: 'height',
         end: 'top',
         farEnd: 'bottom',
     },
@@ -198,7 +199,7 @@ function resolveScrollKey(event: KeyboardEvent): { scroll: GtkScrollType; horizo
     }
 }
 
-export class GtkScrolledWindow extends HTMLElement {
+export class GtkScrolledWindow extends WidgetElement {
     private _viewport!: GtkViewport;
     private _bars: Record<'horizontal' | 'vertical', HTMLElement> | null = null;
     /** The size clamps `_writeSize` last wrote, which are the only ones it may clear. */
@@ -567,8 +568,10 @@ export class GtkScrolledWindow extends HTMLElement {
             // `gtk_scrolled_window_measure`'s request for the CHILD'S size, written on the
             // scrollport that has to ask its parent for it: `propagate-natural-*` is the
             // child's NATURAL size (`max-content`), a NEVER policy is its MINIMUM one
-            // (`min-content`), and the natural is the larger of the two.
-            this._viewport.style[axis.cssMin] = this.hasAttribute(axis.natural)
+            // (`min-content`), and the natural is the larger of the two. It is the SIZE, not
+            // the minimum: `_scrolled_window.scss` holds the scrollport at 0 by default and
+            // fills the cell through `min-*: 100%`, which a minimum here would overwrite.
+            this._viewport.style[axis.cssSize] = this.hasAttribute(axis.natural)
                 ? 'max-content'
                 : policy === 'never'
                   ? 'min-content'

package/src/elements/gtk-search-bar.ts

@@ -37,7 +37,10 @@
 // Copyright (c) The GTK Team, GNOME contributors. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-export class GtkSearchBar extends HTMLElement {
+import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
+
+export class GtkSearchBar extends WidgetElement {
     private _box!: HTMLDivElement;
     private _center!: HTMLDivElement;
     private _close!: HTMLButtonElement;
@@ -93,10 +96,6 @@ export class GtkSearchBar extends HTMLElement {
 
         this._center = document.createElement('div');
         this._center.className = 'adw-search-bar-center';
-        // Whatever the author put inside the bar is the child, moved into the box's centre —
-        // the `GtkCenterBox` the C builds around it (gtksearchbar.c:378-386).
-        this._center.append(...this.childNodes);
-
         this._close = document.createElement('button');
         this._close.className = 'adw-search-bar-close';
         this._close.type = 'button';
@@ -106,7 +105,9 @@ export class GtkSearchBar extends HTMLElement {
         this._box = document.createElement('div');
         this._box.className = 'adw-search-bar-box';
         this._box.append(this._center, this._close);
-        this.replaceChildren(this._box);
+        // Whatever the author put inside the bar is the child, moved into the box's centre —
+        // the `GtkCenterBox` the C builds around it (gtksearchbar.c:378-386).
+        bindSlottedChildren(this, [{ name: 'child', into: this._center }, { into: this._center }]).install(this._box);
 
         // `input-intercepted`: typing into the connected editable reveals the bar
         // (gtksearchbar.c:210-218). Captured, because the editable may be nested two

package/src/elements/gtk-separator.ts

@@ -17,8 +17,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { normalizeBoxOrientation, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkSeparator extends HTMLElement {
+export class GtkSeparator extends WidgetElement {
     static get observedAttributes() {
         return ['orientation'];
     }

package/src/elements/gtk-spin-button.ts

@@ -34,6 +34,7 @@ import type { AdwAdjustment, AdwAdjustmentInput } from '@gjsify/adwaita-core';
 import { createGtkImage } from './gtk-image.js';
 
 import { formatScaleValue } from './gtk-scale.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `EPSILON` in gtkspinbutton.c:64 — the "is the value already at the bound" test. */
 const EPSILON = 1e-10;
@@ -46,7 +47,7 @@ const MAX_TIMER_CALLS = 5;
 /** `Gtk.SpinButtonUpdatePolicy` nicks; `always` is the pspec default (gtkspinbutton.c:472-475). */
 const UPDATE_POLICIES = ['always', 'if-valid'] as const;
 
-export class GtkSpinButton extends HTMLElement {
+export class GtkSpinButton extends WidgetElement {
     private readonly _range = new SpinState();
     private _input!: HTMLInputElement;
     private _down!: HTMLButtonElement;

package/src/elements/gtk-spinner.ts

@@ -43,13 +43,14 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_spinner.scss:1-3 (the disabled rule)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
 /** The radius-7 ring `process-working-symbolic.svg` traces through (1,8)…(15,8). */
 const RADIUS = 7;
 
-export class GtkSpinner extends HTMLElement {
+export class GtkSpinner extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

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

@@ -0,0 +1,112 @@
+// <gtk-stack-page> — the page record a `<gtk-stack>` is AUTHORED with.
+//
+// NOT A WIDGET, AS UPSTREAM. `GtkStackPage` descends from `GObject.Object` (gtkstack.c:212-233):
+// it carries a page's `name`, `title`, `icon-name` and attention state beside the `child` that IS
+// the page. A Blueprint spells it `Stack { StackPage { name: "debugger"; child: … } }`, and
+// without an element for it the shared-tree builder refused every such `.blp`.
+//
+// THE STACK ADOPTS IT AND KEEPS NO RECORD, the shape `<adw-view-stack>` gives
+// `<adw-view-stack-page>`: `<gtk-stack>` already reads a page's six properties as attributes on
+// its CHILD (see `gtk-stack.ts`), so adopting a record copies them onto the child and puts the
+// child where the record was. The record leaves the tree, which is the browser half of what
+// `@gjsify/adwaita-nativescript`'s `stack-page.ts` refuses after adoption: a write to a record
+// the stack no longer reads would be a silent no-op.
+//   name / title / icon-name / needs-attention / use-underline — the same attributes
+//   visible — the DOM's own `hidden`, as on the child (`GtkStackPage:visible`, gtkstack.c:567)
+//   child   — the slot `child`, or the record's one element child (a bare child IS the page)
+//
+// Reference: refs/gtk/gtk/gtkstack.c (GtkStackPage)
+// 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';
+
+/** The attributes a record hands to its child on adoption — `GtkStackPage`'s string/boolean properties. */
+export const STACK_PAGE_ATTRIBUTES = ['name', 'title', 'icon-name', 'needs-attention', 'use-underline'] as const;
+
+export class GtkStackPage extends WidgetElement {
+    static get observedAttributes() {
+        return [...STACK_PAGE_ATTRIBUTES];
+    }
+
+    /** `GtkStackPage:name` — what `visible-child-name` selects by. */
+    get name(): string {
+        return this.getAttribute('name') ?? '';
+    }
+
+    set name(value: string | null) {
+        if (value === null) this.removeAttribute('name');
+        else this.setAttribute('name', value);
+    }
+
+    // `GtkStackPage:title` is `HTMLElement.title`, which already reflects the `title` attribute.
+
+    /** `GtkStackPage:icon-name`. */
+    get iconName(): string | null {
+        return this.getAttribute('icon-name');
+    }
+
+    set iconName(value: string | null) {
+        if (value === null) this.removeAttribute('icon-name');
+        else this.setAttribute('icon-name', value);
+    }
+
+    /** `GtkStackPage:needs-attention`. */
+    get needsAttention(): boolean {
+        return this.hasAttribute('needs-attention');
+    }
+
+    set needsAttention(value: boolean) {
+        this.toggleAttribute('needs-attention', !!value);
+    }
+
+    /** `GtkStackPage:use-underline`. */
+    get useUnderline(): boolean {
+        return this.hasAttribute('use-underline');
+    }
+
+    set useUnderline(value: boolean) {
+        this.toggleAttribute('use-underline', !!value);
+    }
+
+    /** `GtkStackPage:visible` — `hidden`, as on the child the stack reads it from. */
+    get visible(): boolean {
+        return !this.hasAttribute('hidden');
+    }
+
+    set visible(value: boolean) {
+        this.toggleAttribute('hidden', !value);
+    }
+
+    /** `GtkStackPage:child` — the element the stack shows for this page, while not yet adopted. */
+    get child(): HTMLElement | null {
+        return pageChildOf(this);
+    }
+
+    connectedCallback(): void {
+        // `child:` in a `.blp` authors `slot="child"`, and the mount refuses a name this element
+        // never declared. The stack adopts on ITS connect, which runs first, so by now this
+        // record is usually detached; enrolling the name is all that is left to do.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
+    }
+}
+
+/**
+ * The one element a record holds: its `slot="child"` child or its only element child. A record
+ * with none, or with more than one, is refused by name — GtkStackPage has exactly one `child`.
+ */
+export function pageChildOf(page: HTMLElement): HTMLElement | null {
+    const elements = Array.from(page.children) as HTMLElement[];
+    const slotted = elements.filter((child) => child.getAttribute('slot') === 'child');
+    const candidates = slotted.length > 0 ? slotted : elements;
+    if (candidates.length > 1) {
+        throw new Error(
+            `<gtk-stack-page name="${page.getAttribute('name') ?? ''}"> holds ${candidates.length} children, ` +
+                'and a GtkStackPage has one `child`.',
+        );
+    }
+    return candidates[0] ?? null;
+}
+
+customElements.define('gtk-stack-page', GtkStackPage);

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

@@ -39,6 +39,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 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 SidebarPage {
@@ -49,7 +50,7 @@ interface SidebarPage {
     child: HTMLElement;
 }
 
-export class GtkStackSidebar extends HTMLElement {
+export class GtkStackSidebar extends WidgetElement {
     private _stack: GtkStack | null = null;
     private _list!: HTMLDivElement;
     private _initialized = false;