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

package/src/elements/adw-clamp.ts

@@ -27,8 +27,9 @@
 import { ADW_CLAMP_DEFAULTS, ADW_CLAMP_SIZE_CLASSES, clampAllocate, normalizeClampSize } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwClamp extends HTMLElement {
+export class AdwClamp extends WidgetElement {
     private _resize: ResizeObserver | null = null;
     private _mutations: MutationObserver | null = null;
 

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

@@ -65,8 +65,9 @@ import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { stringListSlot } from '../string-list-slot.js';
 import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
+import { TooltipElement } from '../widget-element.js';
 
-export class AdwComboRow extends HTMLElement {
+export class AdwComboRow extends TooltipElement {
     private _select!: HTMLSelectElement;
     private _valueEl!: HTMLSpanElement;
     /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */
@@ -92,6 +93,11 @@ export class AdwComboRow extends HTMLElement {
         this._state.setModel(normalizeComboOptions(value));
     }
 
+    /** `adw_combo_row_set_model`. */
+    set_model(model: AdwListModelInput | null): void {
+        this.model = model ?? [];
+    }
+
     /**
      * The selected index (Adw.ComboRow:selected). PERMISSIVE: an index past the end is
      * accepted and reads back with an empty {@link selectedValue}, mirroring the `guint`
@@ -107,6 +113,14 @@ export class AdwComboRow extends HTMLElement {
         this.setAttribute('selected', String(value));
     }
 
+    get_selected(): number {
+        return this.selected;
+    }
+
+    set_selected(position: number): void {
+        this.selected = position;
+    }
+
     /**
      * The selected option's `value`, or '' when nothing is selected (Adw.ComboRow:selected-item).
      *

package/src/elements/adw-data-grid.ts

@@ -72,6 +72,7 @@ import {
     normalizeDataGridVariant,
 } from '@gjsify/adwaita-core';
 import type { AdwDataGridColumn, AdwDataGridRow } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 export type {
     AdwDataGridAlign,
@@ -81,7 +82,7 @@ export type {
     AdwDataGridRowVariant,
 } from '@gjsify/adwaita-core';
 
-export class AdwDataGrid extends HTMLElement {
+export class AdwDataGrid extends WidgetElement {
     private _captionEl!: HTMLDivElement;
     private _scrollEl!: HTMLDivElement;
     private _tableEl!: HTMLDivElement;

package/src/elements/adw-dialog.ts

@@ -32,6 +32,7 @@
 
 import { bindSlottedChildren } from '../slotted-children.js';
 import { AdwModalSurface } from './modal-surface.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** Adaptive presentation of the dialog — mirrors Adw.DialogPresentationMode. */
 export type AdwDialogPresentationMode = 'auto' | 'floating' | 'bottom-sheet';
@@ -39,7 +40,7 @@ export type AdwDialogPresentationMode = 'auto' | 'floating' | 'bottom-sheet';
 const DEFAULT_CONTENT_WIDTH = 360;
 const PRESENTATION_MODES: readonly AdwDialogPresentationMode[] = ['auto', 'floating', 'bottom-sheet'];
 
-export class AdwDialog extends HTMLElement {
+export class AdwDialog extends WidgetElement {
     private _initialized = false;
     private _scrimEl!: HTMLDivElement;
     private _boxEl!: HTMLDivElement;
@@ -196,7 +197,9 @@ export class AdwDialog extends HTMLElement {
         // Everything the author places inside is the dialog content — LIVE, because
         // `Adw.Dialog:child` is a property and a dialog whose body is filled in after it
         // was created is the ordinary case. `src/slotted-children.ts` has the incident.
-        bindSlottedChildren(this, [{ into: this._contentEl }]).install(this._scrimEl);
+        bindSlottedChildren(this, [{ name: 'child', into: this._contentEl }, { into: this._contentEl }]).install(
+            this._scrimEl,
+        );
 
         this._render();
     }

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

@@ -41,6 +41,7 @@ import { booleanAttribute } from '../attributes.js';
 import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren, type AdwSlottedChildren } from '../slotted-children.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
+import { TooltipElement } from '../widget-element.js';
 
 /**
  * Show/hide a rendered part. `hidden` carries the semantics and is what the conformance
@@ -53,7 +54,7 @@ function setPartVisible(part: HTMLElement, visible: boolean): void {
     part.style.display = visible ? '' : 'none';
 }
 
-export class AdwEntryRow extends HTMLElement {
+export class AdwEntryRow extends TooltipElement {
     /** The headless `update_empty` derivation + apply latch (ADR 0004). */
     protected readonly _state = new EntryRowState();
     protected _input!: HTMLInputElement;

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

@@ -42,8 +42,9 @@ import './gtk-switch.js';
 import type { GtkSwitch } from './gtk-switch.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
 import { attachRowActivation } from './row-activation.js';
+import { TooltipElement } from '../widget-element.js';
 
-export class AdwExpanderRow extends HTMLElement {
+export class AdwExpanderRow extends TooltipElement {
     private _headerEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;

package/src/elements/adw-header-bar.ts

@@ -33,8 +33,9 @@ import { bindSlottedChildren } from '../slotted-children.js';
 // Registers <adw-window-title>: the derived centre is one, so importing the bar
 // alone must still define it.
 import './adw-window-title.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwHeaderBar extends HTMLElement {
+export class AdwHeaderBar extends WidgetElement {
     private _initialized = false;
     private _startEl: HTMLDivElement | null = null;
     private _centerEl: HTMLDivElement | null = null;
@@ -119,6 +120,10 @@ export class AdwHeaderBar extends HTMLElement {
                 // gallery's own fences are written in.
                 { name: 'title-widget', into: this._centerEl },
                 { name: 'end', into: this._endEl },
+                // An untyped `<child>` packs from the start (adw-header-bar.c:1040-1041). A
+                // Blueprint `[start]` tags only the NEXT child, so every button after it
+                // arrives untyped and had no destination at all.
+                { into: this._startEl },
             ],
             (_node, slot) => {
                 if ('into' in slot && slot.into === this._centerEl) this._dropDerivedTitle();

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

@@ -57,9 +57,10 @@ import {
 } from './view-switcher-dom.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { attachRovingFocus } from './roving-focus.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** A single page. Children of <adw-inline-view-switcher>; consumed at connect time. */
-export class AdwViewStackPage extends HTMLElement {
+export class AdwViewStackPage extends WidgetElement {
     static get observedAttributes() {
         return ['name', 'title', 'icon-name', 'badge-number', 'needs-attention', 'use-underline'];
     }
@@ -75,7 +76,7 @@ export class AdwViewStackPage extends HTMLElement {
     }
 }
 
-export class AdwInlineViewSwitcher extends HTMLElement {
+export class AdwInlineViewSwitcher extends WidgetElement {
     /**
      * The dwell timer, injectable: a property rather than an inline
      * `new ViewSwitcherState({ scheduler: domViewSwitcherScheduler })`, so a test can

package/src/elements/adw-layout-slot.ts

@@ -31,8 +31,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { AdwMultiLayoutView } from './adw-multi-layout-view.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwLayoutSlot extends HTMLElement {
+export class AdwLayoutSlot extends WidgetElement {
     private _registered = false;
 
     static get observedAttributes() {

package/src/elements/adw-multi-layout-view.ts

@@ -57,6 +57,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import type { AdwLayoutSlot } from './adw-layout-slot.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** One layout: the element itself, plus the name `AdwLayout:name` carries. */
 interface Layout {
@@ -64,7 +65,7 @@ interface Layout {
     readonly content: Element;
 }
 
-export class AdwMultiLayoutView extends HTMLElement {
+export class AdwMultiLayoutView extends WidgetElement {
     /** The C's own tables: layouts in order, children by id, and the current layout. */
     private _layouts: Layout[] = [];
     private _children = new Map<string, Element>();

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

@@ -37,6 +37,7 @@ import {
 
 import { bindBreakpointSetter } from '../breakpoints.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** Detail of the `navigation-push` / `navigation-pop` delegation event. */
 export interface NavigationDelegateDetail {
@@ -46,7 +47,7 @@ export interface NavigationDelegateDetail {
     handled: boolean;
 }
 
-export class AdwNavigationSplitView extends HTMLElement {
+export class AdwNavigationSplitView extends WidgetElement {
     private _sidebarEl!: HTMLDivElement;
     private _contentEl!: HTMLDivElement;
     private _initialized = false;

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

@@ -57,6 +57,7 @@ import type { AdwNavigationPageProps, NavigationDiagnostic, NavigationStackChang
 import { bindSlottedChildren } from '../slotted-children.js';
 import { installElementApi } from '../gobject-elements.js';
 import type { DispatchedSignals } from '../signals.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The page properties the core owns, read off the element's attributes. */
 function readPageProps(page: AdwNavigationPage): AdwNavigationPageProps {
@@ -64,7 +65,7 @@ function readPageProps(page: AdwNavigationPage): AdwNavigationPageProps {
 }
 
 /** A single navigation page. Children of <adw-navigation-view>. */
-export class AdwNavigationPage extends HTMLElement {
+export class AdwNavigationPage extends WidgetElement {
     /** Set while the owning view writes an attribute back, so the sync cannot recurse. */
     private _syncing = false;
 
@@ -136,7 +137,7 @@ export class AdwNavigationPage extends HTMLElement {
     }
 }
 
-export class AdwNavigationView extends HTMLElement {
+export class AdwNavigationView extends WidgetElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = {
         pushed: 'pushed',

package/src/elements/adw-overlay-split-view.ts

@@ -28,6 +28,7 @@ import {
 import { bindBreakpointSetter } from '../breakpoints.js';
 import type { DispatchedSignals } from '../signals.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * The reveal spring, as a CSS-timed animator: libadwaita animates with a spring
@@ -80,7 +81,7 @@ function readTriStateAttr(element: Element, name: string, fallback: boolean): bo
     return raw !== 'false' && raw !== '0';
 }
 
-export class AdwOverlaySplitView extends HTMLElement {
+export class AdwOverlaySplitView extends WidgetElement {
     /** The GTK signals this element dispatches, which is what a `.blp` `bind` of `show-sidebar` follows. */
     static readonly signals: DispatchedSignals = { 'notify::show-sidebar': 'notify::show-sidebar' };
 

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

@@ -52,6 +52,7 @@ import type { PreferencesSearchResult, SearchPreferencesOptions } from '@gjsify/
 import { searchPreferencesDom } from '../preferences-search.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { AdwModalSurface } from './modal-surface.js';
+import { WidgetElement } from '../widget-element.js';
 
 const DEFAULT_CONTENT_WIDTH = 640;
 
@@ -63,7 +64,7 @@ const DEFAULT_CONTENT_WIDTH = 640;
  * / name / use-underline / visible onto the view-stack page, and
  * `create_search_row_subtitle` needs the title back the moment a second page is visible.
  */
-export class AdwPreferencesPage extends HTMLElement {
+export class AdwPreferencesPage extends WidgetElement {
     static get observedAttributes() {
         return ['title', 'icon-name', 'name', 'use-underline', 'open'];
     }
@@ -100,7 +101,7 @@ export class AdwPreferencesPage extends HTMLElement {
     }
 }
 
-export class AdwPreferencesDialog extends HTMLElement {
+export class AdwPreferencesDialog extends WidgetElement {
     private _initialized = false;
     private _scrimEl!: HTMLDivElement;
     private _dialogEl!: HTMLDivElement;
@@ -146,8 +147,9 @@ export class AdwPreferencesDialog extends HTMLElement {
         this.setAttribute('content-width', String(value));
     }
 
-    /** Reveal the dialog (mirrors Adw.Dialog.present). */
-    present(): void {
+    /** Reveal the dialog (mirrors Adw.Dialog.present). Auto-attaches if disconnected. */
+    present(parent?: Element): void {
+        if (!this.isConnected) (parent ?? document.body).appendChild(this);
         this.open = true;
     }
 

package/src/elements/adw-preferences-group.ts

@@ -25,13 +25,14 @@
 import { derivePreferencesGroupHeader } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** A child that asked to sit in the header rather than in the boxed list. */
 function isHeaderSuffix(node: Node): boolean {
     return node instanceof Element && node.getAttribute('slot') === 'header-suffix';
 }
 
-export class AdwPreferencesGroup extends HTMLElement {
+export class AdwPreferencesGroup extends WidgetElement {
     private _headerEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _descriptionEl!: HTMLSpanElement;

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

@@ -47,8 +47,9 @@ import { labelDisplayText, stringIsNotEmpty } from '@gjsify/adwaita-core';
 import { applyRowTooltip } from '../row-tooltip.js';
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { TooltipElement } from '../widget-element.js';
 
-export class AdwPreferencesRow extends HTMLElement {
+export class AdwPreferencesRow extends TooltipElement {
     private _titleEl!: HTMLSpanElement;
     private _contentEl!: HTMLDivElement;
     private _initialized = false;

package/src/elements/adw-shortcut-label.ts

@@ -26,8 +26,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { parseShortcutLabel } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwShortcutLabel extends HTMLElement {
+export class AdwShortcutLabel extends WidgetElement {
     private _initialized = false;
 
     static get observedAttributes() {

package/src/elements/adw-shortcuts-item.ts

@@ -36,6 +36,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_shortcuts-dialog.scss:16-27
 // Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+import { WidgetElement } from '../widget-element.js';
 
 /**
  * `AdwShortcutsItem:direction` is a `GtkTextDirection`, so it carries `none` beside the
@@ -48,7 +49,7 @@ export type AdwShortcutsItemDirection = 'ltr' | 'rtl' | 'none';
 
 const DIRECTIONS: readonly AdwShortcutsItemDirection[] = ['ltr', 'rtl', 'none'];
 
-export class AdwShortcutsItem extends HTMLElement {
+export class AdwShortcutsItem extends WidgetElement {
     private _initialized = false;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;

package/src/elements/adw-shortcuts-section.ts

@@ -27,8 +27,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 AdwShortcutsSection extends HTMLElement {
+export class AdwShortcutsSection extends WidgetElement {
     private _initialized = false;
     private _bodyEl!: HTMLDivElement;
     private _titleEl!: HTMLElement;

package/src/elements/adw-sidebar.ts

@@ -65,6 +65,7 @@ import {
 import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
 import { booleanAttribute } from '../attributes.js';
+import { WidgetElement } from '../widget-element.js';
 
 // The sidebar consumes its declared children and drops them from the tree, so a later
 // `setAttribute` on one cannot find its sidebar with `closest()`. These keep the link —
@@ -74,7 +75,7 @@ const itemBindings = new WeakMap<AdwSidebarItem, { sidebar: AdwSidebar; spec: Ad
 const sectionBindings = new WeakMap<AdwSidebarSection, { sidebar: AdwSidebar; spec: AdwSidebarSectionSpec }>();
 
 /** A single sidebar item. Child of <adw-sidebar-section>; consumed at connect time. */
-export class AdwSidebarItem extends HTMLElement {
+export class AdwSidebarItem extends WidgetElement {
     static get observedAttributes() {
         return [
             'title',
@@ -144,7 +145,7 @@ export class AdwSidebarItem extends HTMLElement {
 }
 
 /** A titled group of items. Child of <adw-sidebar>; consumed at connect time. */
-export class AdwSidebarSection extends HTMLElement {
+export class AdwSidebarSection extends WidgetElement {
     static get observedAttributes() {
         return ['title'];
     }
@@ -158,7 +159,7 @@ export class AdwSidebarSection extends HTMLElement {
     }
 }
 
-export class AdwSidebar extends HTMLElement {
+export class AdwSidebar extends WidgetElement {
     private readonly _state = new SidebarState();
     private _listEl!: HTMLDivElement;
     private _rows: { el: HTMLButtonElement; index: number }[] = [];

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

@@ -42,6 +42,7 @@ import { attributeOf } from '@gjsify/adwaita-core/tags';
 import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
+import { TooltipElement } from '../widget-element.js';
 
 /** `Gtk.Adjustment`'s six properties, as `AdwAdjustmentInput` names them. */
 const ADJUSTMENT_FIELDS = ['value', 'lower', 'upper', 'stepIncrement', 'pageIncrement', 'pageSize'] as const;
@@ -63,7 +64,7 @@ function authoredAdjustment(node: Node): AdwAdjustmentInput {
     return input;
 }
 
-export class AdwSpinRow extends HTMLElement {
+export class AdwSpinRow extends TooltipElement {
     private _input!: HTMLInputElement;
     /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */
     private _textEl!: HTMLDivElement;

package/src/elements/adw-spinner.ts

@@ -30,6 +30,7 @@ import {
     spinnerGeometry,
     spinnerProgressAt,
 } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
@@ -52,7 +53,7 @@ function startTicking(): void {
     if (frameHandle === 0 && mapped.size > 0) frameHandle = requestAnimationFrame(tick);
 }
 
-export class AdwSpinner extends HTMLElement {
+export class AdwSpinner extends WidgetElement {
     static get observedAttributes() {
         return ['size'];
     }

package/src/elements/adw-split-button.ts

@@ -72,6 +72,7 @@ import './gtk-popover.js';
 import type { GtkPopover } from './gtk-popover.js';
 
 import { type GtkImage, createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 const VARIANT_CLASSES: Record<string, string> = {
     flat: 'flat',
@@ -118,7 +119,7 @@ const POPOVER_POSITIONS = {
     right: 'end',
 } as const;
 
-export class AdwSplitButton extends HTMLElement {
+export class AdwSplitButton extends WidgetElement {
     private readonly _state = new SplitButtonState();
     private _actionEl!: HTMLButtonElement;
     private _dropdownEl!: HTMLButtonElement;

package/src/elements/adw-status-page.ts

@@ -14,8 +14,9 @@ import { stringIsNotEmpty } from '@gjsify/adwaita-core';
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwStatusPage extends HTMLElement {
+export class AdwStatusPage extends WidgetElement {
     private _iconEl!: GtkImage;
     private _titleEl!: HTMLSpanElement;
     private _descEl!: HTMLSpanElement;

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

@@ -42,8 +42,9 @@ import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js'
 import './gtk-switch.js';
 import { attachRowActivation } from './row-activation.js';
 import type { GtkSwitch } from './gtk-switch.js';
+import { TooltipElement } from '../widget-element.js';
 
-export class AdwSwitchRow extends HTMLElement {
+export class AdwSwitchRow extends TooltipElement {
     /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
     static readonly signals: DispatchedSignals = { 'notify::active': 'notify::active' };
 
@@ -76,6 +77,14 @@ export class AdwSwitchRow extends HTMLElement {
         this.toggleAttribute('active', !!value);
     }
 
+    get_active(): boolean {
+        return this.active;
+    }
+
+    set_active(active: boolean): void {
+        this.active = active;
+    }
+
     constructor() {
         super();
         installElementApi(this);

package/src/elements/adw-tab-bar.ts

@@ -79,6 +79,7 @@ import { tabsRevealed } from '@gjsify/adwaita-core';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type TabChip, createTabChip, refreshTabChip, refreshTabChipClose, scrollChipIntoBar } from '../tab-chip.js';
 import type { AdwTabView } from './adw-tab-view.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `set_view`'s connections: the page list, the selection, and each page's own state. */
 const VIEW_EVENTS = [
@@ -92,7 +93,7 @@ const VIEW_EVENTS = [
 
 /** The CSS classes a chip's own layout reads — the states C puts on the widget. */
 
-export class AdwTabBar extends HTMLElement {
+export class AdwTabBar extends WidgetElement {
     private _boxEl!: HTMLDivElement;
     private _startEl!: HTMLDivElement;
     private _endEl!: HTMLDivElement;

package/src/elements/adw-tab-button.ts

@@ -49,6 +49,7 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import type { AdwTabView } from './adw-tab-view.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** `update_icon`: a label from ten pages up, because two digits do not fit the plate. */
 const SMALL_LABEL_PAGES = 10;
@@ -57,7 +58,7 @@ const OVERFLOW_PAGES = 100;
 /** What `set_view` connects to: the page list, the selection and each page's attention. */
 const VIEW_EVENTS = ['page-attached', 'page-detached', 'page-updated', 'notify::selected-page'] as const;
 
-export class AdwTabButton extends HTMLElement {
+export class AdwTabButton extends WidgetElement {
     private _button!: HTMLButtonElement;
     private _binEl!: HTMLSpanElement;
     private _labelEl!: HTMLSpanElement;

package/src/elements/adw-tab-overview.ts

@@ -81,6 +81,7 @@ import { assertMenuRenderable, ADW_MENU_SURFACE_WEB } from '@gjsify/adwaita-core
 
 import type { AdwTabView, AdwTabViewPage } from './adw-tab-view.js';
 import { createGtkImage, type GtkImage } from './gtk-image.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** The thumbnail nodes of one page, kept so a re-render edits them in place. */
 interface Thumbnail {
@@ -98,7 +99,7 @@ interface Thumbnail {
     attention: HTMLDivElement;
 }
 
-export class AdwTabOverview extends HTMLElement {
+export class AdwTabOverview extends WidgetElement {
     private _childEl!: HTMLDivElement;
     private _overviewEl!: HTMLDivElement;
     private _headerEl!: HTMLDivElement;

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

@@ -50,6 +50,7 @@ import type { AdwTabPageSpec, AdwTabPageState, TabViewPagesChange, TabViewSelect
 
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type TabChip, createTabChip, refreshTabChip, refreshTabChipClose, scrollChipIntoBar } from '../tab-chip.js';
+import { WidgetElement } from '../widget-element.js';
 
 export type AdwTabViewPage = AdwTabPageState<HTMLElement>;
 
@@ -73,7 +74,7 @@ const PAGE_ATTRIBUTES = [
  * moves the children out and discards the element leaves `observedAttributes` with
  * nothing to act on.
  */
-export class AdwTabPage extends HTMLElement {
+export class AdwTabPage extends WidgetElement {
     static get observedAttributes() {
         return PAGE_ATTRIBUTES;
     }
@@ -106,7 +107,7 @@ export class AdwTabPage extends HTMLElement {
     }
 }
 
-export class AdwTabView extends HTMLElement {
+export class AdwTabView extends WidgetElement {
     private readonly _state = new TabViewState<HTMLElement>({
         onClosePage: (page) => this._requestClose(page),
     });