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

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

@@ -56,6 +56,7 @@ import {
 } from './view-switcher-dom.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The DOM nodes one page owns — the switcher paints the derived model onto them. */
 interface PageNodes {
@@ -75,9 +76,9 @@ interface PageNodes {
  * switcher watches them with a `MutationObserver` instead — the DOM stand-in for
  * the per-page `notify` C rebinds on.
  */
-export class AdwViewSwitcherPage extends HTMLElement {}
+export class AdwViewSwitcherPage extends WidgetElement {}
 
-export class AdwViewSwitcher extends HTMLElement {
+export class AdwViewSwitcher extends WidgetElement {
     /**
      * The dwell timer, injectable so a test can hand in a clock and drive
      * `VIEW_SWITCHER_DRAG_VECTORS` against the real element. Replace it before the

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

@@ -22,8 +22,9 @@
 // title/subtitle state composed from @gjsify/adwaita-core.
 
 import { WindowTitleState } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwWindowTitle extends HTMLElement {
+export class AdwWindowTitle extends WidgetElement {
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
     /** The headless title/subtitle pair + change detection (ADR 0004). */

package/src/elements/adw-wrap-box.ts

@@ -41,6 +41,7 @@ import {
     wrapPolicyFlexShrink,
     type AdwLengthUnit,
 } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * The attributes that carry a property, in the order the C installs them.
@@ -80,7 +81,7 @@ function alignToJustifyContent(align: number): string {
     return 'flex-end';
 }
 
-export class AdwWrapBox extends HTMLElement {
+export class AdwWrapBox extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/checks.ts

@@ -37,7 +37,9 @@
 //   · The active member of a group cannot be clicked off: both the gesture handler and
 //     `real_activate` return early when the button is active AND has a group neighbour
 //     (:395-396, :617-622). `<adw-radio>` gets this from `RadioGroupState`, and
-//     `<gtk-check-button>` cannot reach a group at all here.
+//     `<gtk-check-button>` from `group` / `set_group` over the core's `check-group.ts`. A
+//     grouped `<gtk-check-button>` draws the round radio (the `radio` attribute) and its
+//     input announces `role="radio"`.
 //
 // ONE PLACE THIS PORT DIVERGES, DELIBERATELY AND CITED. GTK does NOT clear
 // `inconsistent` when the user activates the button — `real_activate` only flips
@@ -75,7 +77,8 @@
 // A11Y: the inner input carries the role (native `checkbox` / `radio`) and an
 // explicit `aria-checked` derived from {@link resolveCheckState}, so the
 // indeterminate state announces as `mixed` for BOTH — HTML has a native mixed
-// checkbox (`input.indeterminate`) but no mixed radio.
+// checkbox (`input.indeterminate`) but no mixed radio. The host's `aria-label` /
+// `aria-description` (a `.blp`'s `accessibility { }`) are copied onto it too.
 //
 // Reference: refs/gtk/gtk/gtkcheckbutton.c:99-112,395-426,617-628,647-714,773-774,849-886,925-974
 // Reference: refs/libadwaita/src/stylesheet/widgets/_checks.scss
@@ -85,9 +88,18 @@
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Implemented as Web Components for @gjsify/adwaita-web.
 
-import { RadioGroupState, resolveCheckState } from '@gjsify/adwaita-core';
+import {
+    RadioGroupState,
+    checkActivationFlips,
+    checkGroupNeighbours,
+    isRadioCheck,
+    resolveCheckState,
+    setCheckGroup,
+} from '@gjsify/adwaita-core';
 
+import { FORWARDED_ARIA, forwardAccessibleName } from '../accessible.js';
 import type { DispatchedSignals } from '../signals.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * The document's radio groups. ONE registry, as global as a bare
@@ -104,7 +116,7 @@ const radioGroups = new RadioGroupState();
  * `.adw-check-indicator` and `.adw-check-label`, which are the Adwaita SKIN, and the
  * skin is not what the tag names. It is also not a widget — nothing registers it.
  */
-abstract class AdwCheckBase extends HTMLElement {
+abstract class AdwCheckBase extends WidgetElement {
     protected _input!: HTMLInputElement;
     protected _indicator!: HTMLSpanElement;
     protected _label!: HTMLSpanElement;
@@ -240,6 +252,7 @@ abstract class AdwCheckBase extends HTMLElement {
         this._input.setAttribute('aria-checked', state === 'indeterminate' ? 'mixed' : String(state === 'checked'));
         this._input.disabled = this.disabled;
         this._label.hidden = this._label.childNodes.length === 0;
+        forwardAccessibleName(this, this._input);
     }
 }
 
@@ -252,14 +265,80 @@ export class GtkCheckButton extends AdwCheckBase {
     };
 
     static get observedAttributes() {
-        return ['checked', 'active', 'indeterminate', 'disabled', 'label'];
+        return ['checked', 'active', 'indeterminate', 'disabled', 'label', 'group', ...FORWARDED_ARIA];
     }
 
     protected get inputType(): 'checkbox' {
         return 'checkbox';
     }
 
+    /**
+     * `Gtk.CheckButton:group`, WRITE-ONLY as in GTK (`G_PARAM_WRITABLE`, gtkcheckbutton.c:665-668):
+     * another check button, or its id as a projected `.blp` writes it, or `null` to leave.
+     */
+    set group(value: GtkCheckButton | string | null) {
+        if (typeof value === 'string') {
+            this.setAttribute('group', value);
+            return;
+        }
+        this.set_group(value);
+    }
+
+    /** `gtk_check_button_set_group`. */
+    set_group(group: GtkCheckButton | null): void {
+        setCheckGroup(this, group);
+        this.render();
+        group?.render();
+    }
+
+    get_active(): boolean {
+        return this.checked;
+    }
+
+    set_active(active: boolean): void {
+        this.checked = active;
+    }
+
+    attributeChangedCallback(name: string) {
+        // `set_active (TRUE)` deactivates every member of the group (gtkcheckbutton.c:955-968).
+        if (name === 'checked' && this.checked) {
+            for (const other of checkGroupNeighbours(this)) other.checked = false;
+        }
+        if (name === 'group' && this.isConnected) this._resolveGroup();
+        super.attributeChangedCallback(name);
+    }
+
+    protected onConnected(): void {
+        this._resolveGroup();
+    }
+
+    /** The `group` attribute names a check button by id, looked up once the tree is in a document. */
+    private _resolveGroup(): void {
+        const id = this.getAttribute('group');
+        if (id === null) return;
+        const root = this.getRootNode() as Document | ShadowRoot;
+        const found = root.getElementById?.(id) ?? document.getElementById(id);
+        if (!(found instanceof GtkCheckButton)) {
+            throw new Error(`gtk-check-button group="${id}" names no gtk-check-button in this document`);
+        }
+        this.set_group(found);
+    }
+
+    protected render(): void {
+        if (this._input === undefined) return;
+        super.render();
+        const radio = isRadioCheck(this);
+        this.toggleAttribute('radio', radio);
+        if (radio) this._input.setAttribute('role', 'radio');
+        else this._input.removeAttribute('role');
+    }
+
     protected activate(): void {
+        // The active member of a group cannot be activated off (gtkcheckbutton.c:395-396, :617-622).
+        if (!checkActivationFlips(this, this.checked)) {
+            this.render();
+            return;
+        }
         // HTML's pre-click activation steps clear `indeterminate` before the toggle, so a
         // user can always reach a definite state. GTK does NOT: `gtk_check_button_real_activate`
         // only flips `active` (gtkcheckbutton.c:617-628) and says turning the inconsistent
@@ -274,7 +353,7 @@ export class AdwRadio extends AdwCheckBase {
     private _unsubscribe: (() => void) | null = null;
 
     static get observedAttributes() {
-        return ['checked', 'indeterminate', 'disabled', 'label', 'name', 'value'];
+        return ['checked', 'indeterminate', 'disabled', 'label', 'name', 'value', ...FORWARDED_ARIA];
     }
 
     protected get inputType(): 'radio' {

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

@@ -20,8 +20,9 @@
 // Copyright (c) The GTK Team. LGPLv2.1+.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkActionBar extends HTMLElement {
+export class GtkActionBar extends WidgetElement {
     private _initialized = false;
     private _startEl: HTMLDivElement | null = null;
     private _centerEl: HTMLDivElement | null = null;

package/src/elements/gtk-aspect-frame.ts

@@ -38,6 +38,7 @@
 import { glibClamp, labelYalignAlignItems } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.AspectFrame:ratio`'s pspec range and default (gtkaspectframe.c:124-125, :172-175). */
 const RATIO_MIN = 0.0001;
@@ -58,7 +59,7 @@ function normalizeRatio(value: string | null): number {
     return Number.isFinite(parsed) ? glibClamp(parsed, RATIO_MIN, RATIO_MAX) : RATIO_DEFAULT;
 }
 
-export class GtkAspectFrame extends HTMLElement {
+export class GtkAspectFrame extends WidgetElement {
     static get observedAttributes() {
         return ['ratio', 'xalign', 'yalign', 'obey-child'];
     }

package/src/elements/gtk-box.ts

@@ -19,15 +19,35 @@
 // Children are not moved or wrapped: the element IS the flex container, so a child in the
 // light DOM is a child of the layout, which is what `gtk_box_append` means.
 //
+// EXPAND IS THE COMPUTED VALUE, not the attribute: GtkBoxLayout grows a child when
+// `gtk_widget_compute_expand` says so (gtkboxlayout.c:391), and that is true for a bin whose
+// descendant set `hexpand` too. `compute-expand.ts` computes it; the box writes it on each
+// child that authored no value of its own as `data-computed-hexpand` / `-vexpand`, which
+// `_widget.scss` grows like the attribute. A MutationObserver over the box's subtree is the
+// substitute for `gtk_widget_queue_compute_expand`, which walks up from any widget whose
+// expand or visibility changed — so a runtime reparent or a toggled `hexpand` deep inside a
+// child lands one microtask later.
+//
 // Reference: refs/gtk/gtk/gtkbox.c (the three properties, the `box` CSS name)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 
 import { normalizeBoxOrientation, normalizeBoxSpacing, type BoxOrientation } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
+
+import { computeExpand, explicitExpand, type ExpandOrientation } from '../compute-expand.js';
 
 /** The attributes that carry a property — also the `notify::` roster. */
 const PROPERTY_ATTRIBUTES = ['orientation', 'spacing', 'homogeneous'] as const;
 
-export class GtkBox extends HTMLElement {
+/** The marker per axis a child carries while its computed expand is true. */
+const COMPUTED_EXPAND: Record<ExpandOrientation, string> = {
+    horizontal: 'data-computed-hexpand',
+    vertical: 'data-computed-vexpand',
+};
+
+export class GtkBox extends WidgetElement {
+    private _expandObserver: MutationObserver | null = null;
+
     static get observedAttributes() {
         return [...PROPERTY_ATTRIBUTES];
     }
@@ -61,6 +81,22 @@ export class GtkBox extends HTMLElement {
 
     connectedCallback() {
         this._sync();
+        this._syncComputedExpand();
+        if (this._expandObserver) return;
+        this._expandObserver = new MutationObserver((records) => {
+            if (records.some(affectsExpand)) this._syncComputedExpand();
+        });
+        this._expandObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['hexpand', 'vexpand', 'hidden'],
+        });
+    }
+
+    disconnectedCallback() {
+        this._expandObserver?.disconnect();
+        this._expandObserver = null;
     }
 
     attributeChangedCallback(name: string, old: string | null, value: string | null) {
@@ -82,6 +118,25 @@ export class GtkBox extends HTMLElement {
         this.style.flexDirection = this.orientation === 'vertical' ? 'column' : 'row';
         this.style.gap = `${this.spacing}px`;
     }
+
+    private _syncComputedExpand(): void {
+        for (const child of this.children) {
+            for (const orientation of ['horizontal', 'vertical'] as const) {
+                const grows = explicitExpand(child, orientation) === undefined && computeExpand(child, orientation);
+                child.toggleAttribute(COMPUTED_EXPAND[orientation], grows);
+            }
+        }
+    }
+}
+
+/**
+ * Text rewritten inside a label (a hex dump does it every frame) adds and removes only text
+ * nodes; no widget came or went, so the computed expand cannot have changed.
+ */
+function affectsExpand(record: MutationRecord): boolean {
+    if (record.type !== 'childList') return true;
+    const isElement = (node: Node): boolean => node.nodeType === Node.ELEMENT_NODE;
+    return [...record.addedNodes].some(isElement) || [...record.removedNodes].some(isElement);
 }
 
 customElements.define('gtk-box', GtkBox);

package/src/elements/gtk-button.ts

@@ -16,14 +16,16 @@
 
 import { buttonStyleClasses } from '@gjsify/adwaita-core';
 
+import { FORWARDED_ARIA, forwardAccessibleName } from '../accessible.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import type { DispatchedSignals } from '../signals.js';
 import { createGtkImage } from './gtk-image.js';
+import { TooltipElement } from '../widget-element.js';
 
 /** The boolean attributes that select a style class; the mapping lives in the core. */
 const STYLE_ATTRIBUTES = ['flat', 'suggested', 'destructive', 'circular', 'pill'] as const;
 
-export class GtkButton extends HTMLElement {
+export class GtkButton extends TooltipElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = { clicked: 'click' };
 
@@ -47,12 +49,14 @@ export class GtkButton extends HTMLElement {
             'circular',
             'pill',
             'class',
+            ...FORWARDED_ARIA,
         ];
     }
 
     /**
-     * `Gtk.Button:icon-name` and `Gtk.Widget:tooltip-text`, the GObject spellings: a class that
-     * holds a button as a template child writes `button.icon_name = …`, which must reach the DOM.
+     * `Gtk.Button:icon-name`, the GObject spelling: a class that holds a button as a template
+     * child writes `button.icon_name = …`, which must reach the DOM. `Gtk.Widget:tooltip-text`
+     * comes from `TooltipElement`.
      */
     get icon_name(): string | null {
         return this.getAttribute('icon-name');
@@ -66,18 +70,6 @@ export class GtkButton extends HTMLElement {
     set iconName(value: string | null) {
         this.icon_name = value;
     }
-    get tooltip_text(): string | null {
-        return this.getAttribute('tooltip-text');
-    }
-    set tooltip_text(value: string | null) {
-        this.reflect('tooltip-text', value);
-    }
-    get tooltipText(): string | null {
-        return this.tooltip_text;
-    }
-    set tooltipText(value: string | null) {
-        this.tooltip_text = value;
-    }
 
     private reflect(attribute: string, value: string | null): void {
         if (value === null || value === undefined) this.removeAttribute(attribute);
@@ -148,13 +140,9 @@ export class GtkButton extends HTMLElement {
         const tooltip = this.getAttribute('tooltip') ?? this.getAttribute('tooltip-text');
         btn.title = tooltip ?? '';
         // An icon-only button has no text content, so screen readers would
-        // announce it as unlabeled. Give it an accessible name — prefer the
-        // tooltip, fall back to the symbolic icon name (WCAG 4.1.2).
-        if (icon && !label) {
-            btn.setAttribute('aria-label', tooltip ?? icon);
-        } else {
-            btn.removeAttribute('aria-label');
-        }
+        // announce it as unlabeled. Give it an accessible name — the one the tree
+        // wrote first, then the tooltip, then the symbolic icon name (WCAG 4.1.2).
+        if (!forwardAccessibleName(this, btn) && icon && !label) btn.setAttribute('aria-label', tooltip ?? icon);
         btn.disabled = this.hasAttribute('disabled');
         this.decorate(btn);
     }

package/src/elements/gtk-calendar.ts

@@ -68,6 +68,7 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The seven abbreviated day names, Sunday first — `default_abbreviated_dayname` (:745-757). */
 const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -99,7 +100,7 @@ const ARROWS: readonly { step: AdwCalendarStep; icon: string; tooltip: string }[
 /** The arrow a cell's disabled state keys off — `calendar_update_navigation_buttons` (:1055-1084). */
 type ArrowName = 'previousMonth' | 'nextMonth' | 'previousYear' | 'nextYear';
 
-export class GtkCalendar extends HTMLElement {
+export class GtkCalendar extends WidgetElement {
     private _headerEl!: HTMLDivElement;
     private _monthEl!: HTMLSpanElement;
     private _yearEl!: HTMLSpanElement;

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

@@ -41,6 +41,7 @@
 import { labelYalignAlignItems } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.BaselinePosition`'s three nicks, in the order GTK measures them (gtkcenterbox.c:267-271). */
 const BASELINE_POSITIONS = { top: 0, center: 0.5, bottom: 1 } as const;
@@ -51,7 +52,7 @@ export type BaselinePosition = keyof typeof BASELINE_POSITIONS;
 const SHRINK_FIRST = 100;
 const SHRINK_LAST = 1;
 
-export class GtkCenterBox extends HTMLElement {
+export class GtkCenterBox extends WidgetElement {
     static get observedAttributes() {
         return ['baseline-position', 'shrink-center-last'];
     }

package/src/elements/gtk-color-dialog-button.ts

@@ -37,6 +37,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_linked.scss:6 (`colorbutton > button`)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** A `GdkRGBA` — the four channels of `GtkColorDialogButton:rgba`, each 0…1. */
 export interface GdkRgbaValue {
@@ -62,7 +63,7 @@ export interface ColorDialogParameters {
 /** `gtk_color_dialog_button_init`'s own colour: `{ 0.75, 0.25, 0.25, 1.0 }` (:170). */
 const INITIAL_RGBA: GdkRgbaValue = { red: 0.75, green: 0.25, blue: 0.25, alpha: 1 };
 
-export class GtkColorDialogButton extends HTMLElement {
+export class GtkColorDialogButton extends WidgetElement {
     private _buttonEl!: HTMLButtonElement;
     private _swatchEl!: HTMLSpanElement;
     private _inputEl!: HTMLInputElement;

package/src/elements/gtk-drag-icon.ts

@@ -54,6 +54,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The `rgba()` string a `GdkRGBA` value paints, as the colour swatch shows it. */
 interface Rgba {
@@ -66,7 +67,7 @@ interface Rgba {
 /** One icon per drag operation, keyed on the `dataTransfer` a browser gives per drag. */
 const ICON_BY_DRAG = new WeakMap<DataTransfer, GtkDragIcon>();
 
-export class GtkDragIcon extends HTMLElement {
+export class GtkDragIcon extends WidgetElement {
     private _pointerX = 0;
     private _pointerY = 0;
     private _dragging = false;

package/src/elements/gtk-drawing-area.ts

@@ -53,6 +53,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { glibClamp } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * `GtkDrawingAreaDrawFunc` with the `user_data` / `destroy` pair dropped — see the header.
@@ -78,7 +79,7 @@ function intAttribute(element: HTMLElement, name: string): number {
     return Number.isFinite(raw) ? raw : 0;
 }
 
-export class GtkDrawingArea extends HTMLElement {
+export class GtkDrawingArea extends WidgetElement {
     private _canvas!: HTMLCanvasElement;
     private _context: CanvasRenderingContext2D | null = null;
     private _initialized = false;

package/src/elements/gtk-drop-down.ts

@@ -75,6 +75,7 @@ import type { DispatchedSignals } from '../signals.js';
 import { stringListSlot } from '../string-list-slot.js';
 
 import { createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * A dropdown option — `value` is the stable id, `label` the shown text. An alias of
@@ -83,7 +84,7 @@ import { createGtkImage } from './gtk-image.js';
  */
 export type GtkDropDownOption = AdwComboOption;
 
-export class GtkDropDown extends HTMLElement {
+export class GtkDropDown extends WidgetElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = {
         'notify::selected': 'notify::selected',

package/src/elements/gtk-editable-label.ts

@@ -38,11 +38,12 @@
 //   (`label {}`, `editablelabel > stack > text`)
 // Copyright (c) The GTK Team, GNOME contributors. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** The C's grace period between a focus leaving the widget and the commit it triggers. */
 const FOCUS_OUT_GRACE_MS = 100;
 
-export class GtkEditableLabel extends HTMLElement {
+export class GtkEditableLabel extends WidgetElement {
     private _label!: HTMLSpanElement;
     private _entry!: HTMLInputElement;
     private _initialized = false;

package/src/elements/gtk-entry.ts

@@ -23,8 +23,9 @@
 import { ENTRY_ROW_MAX_LENGTH_LIMIT, clampEntryText, entryTextLength } from '@gjsify/adwaita-core';
 
 import type { DispatchedSignals } from '../signals.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkEntry extends HTMLElement {
+export class GtkEntry extends WidgetElement {
     /**
      * `protected`, not `private`: `GtkPasswordEntry` and `GtkSearchEntry` subclass this
      * element and restyle or wrap the very input it builds (the password field's Caps Lock

package/src/elements/gtk-expander.ts

@@ -78,6 +78,7 @@ import { attachRowActivation } from './row-activation.js';
 // elided by TypeScript and take the `customElements.define` with it.
 import './gtk-label.js';
 import type { GtkLabel } from './gtk-label.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic') }` (_expanders.scss). */
 const ARROW_ICON = 'pan-end';
@@ -85,7 +86,7 @@ const ARROW_ICON = 'pan-end';
 /** Stable ids for the `aria-controls` relation, which GTK sets on the child itself. */
 let labelChildCounter = 0;
 
-export class GtkExpander extends HTMLElement {
+export class GtkExpander extends WidgetElement {
     private _box!: HTMLDivElement;
     private _titleEl!: HTMLDivElement;
     private _arrowEl!: HTMLElement;

package/src/elements/gtk-fixed.ts

@@ -32,8 +32,9 @@
 // Reference: refs/gtk/gtk/gtkfixedlayout.c:224-300
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkFixed extends HTMLElement {
+export class GtkFixed extends WidgetElement {
     private _resize: ResizeObserver | null = null;
     private _mutations: MutationObserver | null = null;
 

package/src/elements/gtk-flow-box-child.ts

@@ -26,8 +26,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class GtkFlowBoxChild extends HTMLElement {
+export class GtkFlowBoxChild extends WidgetElement {
     private _contentsEl!: HTMLDivElement;
     private _initialized = false;
 

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

@@ -66,6 +66,7 @@ import { attachRovingFocus } from './roving-focus.js';
 // `gtk-list-box.ts` states at its own: a combined import would be elided and take the
 // registration with it.
 import './gtk-flow-box-child.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkFlowBox:max-children-per-line`'s default — `DEFAULT_MAX_CHILDREN_PER_LINE` (:728). */
 export const ADW_FLOW_BOX_MAX_CHILDREN_PER_LINE = 7;
@@ -73,7 +74,7 @@ export const ADW_FLOW_BOX_MAX_CHILDREN_PER_LINE = 7;
 /** `GtkFlowBox:orientation` — HORIZONTAL by default here, unlike a `GtkListBase` (:3981). */
 export type AdwFlowBoxOrientation = 'horizontal' | 'vertical';
 
-export class GtkFlowBox extends HTMLElement {
+export class GtkFlowBox extends WidgetElement {
     private _children: GtkFlowBoxChild[] = [];
     private _selection: number[] = [];
     /** `priv->selected_child`, `-1` for the C's NULL. */

package/src/elements/gtk-font-dialog-button.ts

@@ -71,6 +71,7 @@ import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
 
 import './gtk-separator.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkFontLevel`'s four values, under the nicks a string property carries. */
 export type FontLevel = 'family' | 'face' | 'font' | 'features';
@@ -103,7 +104,7 @@ const FACE_GRID: readonly { weight: number; slant: PangoFontDescription['slant']
     { weight: 700, slant: 'italic' },
 ];
 
-export class GtkFontDialogButton extends HTMLElement {
+export class GtkFontDialogButton extends WidgetElement {
     private _buttonEl!: HTMLButtonElement;
     private _labelEl!: HTMLSpanElement;
     private _sizeBoxEl!: HTMLSpanElement;

package/src/elements/gtk-frame.ts

@@ -32,6 +32,7 @@
 import { glibClamp, labelYalignAlignItems } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `Gtk.Frame:label-xalign`'s pspec default (gtkframe.c:180-183, and `:253`). */
 const LABEL_XALIGN_DEFAULT = 0;
@@ -42,7 +43,7 @@ function normalizeLabelXalign(value: string | null): number {
     return Number.isFinite(parsed) ? glibClamp(parsed, 0, 1) : LABEL_XALIGN_DEFAULT;
 }
 
-export class GtkFrame extends HTMLElement {
+export class GtkFrame extends WidgetElement {
     private _mutations: MutationObserver | null = null;
 
     static get observedAttributes() {

package/src/elements/gtk-gl-area.ts

@@ -58,6 +58,7 @@
 // Reference: refs/gtk/gtk/gtkglarea.c
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /** `GdkGLAPI`'s nicks, as `GdkGLAPINickSet` spells them. */
 const APIS = ['gl', 'gles'] as const;
@@ -85,7 +86,7 @@ function booleanAttribute(element: HTMLElement, name: string, fallback: boolean)
     return raw !== 'false' && raw !== '0';
 }
 
-export class GtkGLArea extends HTMLElement {
+export class GtkGLArea extends WidgetElement {
     private _canvas!: HTMLCanvasElement;
     private _messageEl: HTMLDivElement | null = null;
     private _initialized = false;

package/src/elements/gtk-graphics-offload.ts

@@ -42,6 +42,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `GtkGraphicsOffloadEnabled`, spelled as the GIR's enum nicks. */
 type OffloadEnabled = 'enabled' | 'disabled';
@@ -52,7 +53,7 @@ function booleanAttribute(element: HTMLElement, name: string, fallback: boolean)
     return raw !== 'false' && raw !== '0';
 }
 
-export class GtkGraphicsOffload extends HTMLElement {
+export class GtkGraphicsOffload extends WidgetElement {
     private _childEl!: HTMLDivElement;
     private _initialized = false;