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

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;

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;

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),
     });

package/src/elements/adw-toast-overlay.ts

@@ -25,6 +25,7 @@ import { renderPangoMarkup } from '../pango-markup.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { createGtkImage } from './gtk-image.js';
 import type { Toast, ToastScheduler, ToastTimerHandle } from '@gjsify/adwaita-core';
+import { WidgetElement } from '../widget-element.js';
 
 // The timing seam is re-exported so a consumer can type a custom scheduler for
 // {@link AdwToastOverlay.scheduler} without depending on the core package.
@@ -43,7 +44,7 @@ const domScheduler: ToastScheduler = {
     cancel: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
 };
 
-export class AdwToastOverlay extends HTMLElement {
+export class AdwToastOverlay extends WidgetElement {
     private _toasts!: HTMLDivElement;
     private _initialized = false;
     /** The headless queue of `adw-toast-overlay.c` (ADR 0004). */

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

@@ -83,9 +83,10 @@ import { ToggleGroupState, keptToggles, toggleIndexOfName } from '@gjsify/adwait
 import { booleanAttribute } from '../attributes.js';
 import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
+import { WidgetElement } from '../widget-element.js';
 
 /** A single toggle. Children of <adw-toggle-group>; consumed at connect time. */
-export class AdwToggle extends HTMLElement {
+export class AdwToggle extends WidgetElement {
     // `tooltip` joins because `AdwToggle:tooltip` exists upstream (:467) and an
     // icon-only toggle has no other text — `tooltip` is what NAMES it, so it is not a
     // decoration. It produces no disabled or hidden button, which is the invariant
@@ -111,7 +112,7 @@ export class AdwToggle extends HTMLElement {
     }
 }
 
-export class AdwToggleGroup extends HTMLElement {
+export class AdwToggleGroup extends WidgetElement {
     private _innerEl!: HTMLDivElement;
     private _buttons: HTMLButtonElement[] = [];
     /** The headless segment list + guarded selection state machine (ADR 0004). */

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

@@ -33,8 +33,9 @@ import {
 import { bindEmptySections } from '../empty-sections.js';
 import { AdwScrollShading } from '../scroll-shading.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwToolbarView extends HTMLElement {
+export class AdwToolbarView extends WidgetElement {
     private _topEl!: HTMLDivElement;
     private _contentEl!: HTMLDivElement;
     private _bottomEl!: HTMLDivElement;

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

@@ -51,10 +51,11 @@ import { ViewStackState } from '@gjsify/adwaita-core';
 import type { AdwViewStackPageInfo as CorePageInfo, ViewStackStateChange } from '@gjsify/adwaita-core';
 
 import type { DispatchedSignals } from '../signals.js';
+import { WidgetElement } from '../widget-element.js';
 
 export type AdwViewStackPageInfo = CorePageInfo<HTMLElement>;
 
-export class AdwViewStack extends HTMLElement {
+export class AdwViewStack 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',
@@ -73,6 +74,11 @@ export class AdwViewStack extends HTMLElement {
         // Subscribing touches no attributes and no children, so it is legal in a
         // custom element constructor — unlike anything DOM-shaped.
         this._state.subscribe((change) => this._onStateChange(change));
+        // A page moved out by plain DOM (`otherBox.append(page)`) is `gtk_widget_unparent`
+        // reaching the stack's `remove`: `stack_remove` (adw-view-stack.c:1184-1205) drops
+        // the page, so it must not stay in the model or keep the stack's marks elsewhere.
+        // Observing the element itself touches no attribute and no child.
+        new MutationObserver((records) => this._onChildrenRemoved(records)).observe(this, { childList: true });
     }
 
     get pages(): readonly AdwViewStackPageInfo[] {
@@ -217,6 +223,7 @@ export class AdwViewStack extends HTMLElement {
         const content = this._state.pages[this._state.indexOfName(name)]?.content;
         if (!this._state.removePage(name)) return false;
         content?.remove();
+        if (content) clearPageMarks(content);
         this._applyVisibility();
         this._reflectName();
         this._emitItemsChanged();
@@ -271,6 +278,25 @@ export class AdwViewStack extends HTMLElement {
         );
     }
 
+    private _onChildrenRemoved(records: MutationRecord[]): void {
+        let changed = false;
+        for (const record of records) {
+            for (const node of record.removedNodes) {
+                // Re-appended into this same stack (a reorder) is still a child.
+                if (!(node instanceof HTMLElement) || node.parentElement === this) continue;
+                const page = this._state.pages.find((p) => p.content === node);
+                if (page === undefined) continue;
+                this._state.removePage(page.name);
+                clearPageMarks(node);
+                changed = true;
+            }
+        }
+        if (!changed) return;
+        this._applyVisibility();
+        this._reflectName();
+        this._emitItemsChanged();
+    }
+
     private _applyVisibility(): void {
         const selected = this._state.visibleIndex;
         this._state.pages.forEach((page, index) => {
@@ -299,3 +325,15 @@ export class AdwViewStack extends HTMLElement {
 }
 
 customElements.define('adw-view-stack', AdwViewStack);
+
+/**
+ * What the stack wrote on a page's content, taken back once it is no longer a page: the
+ * class, the name, `active-view` and the `hidden` that is `gtk_widget_set_child_visible`
+ * (adw-view-stack.c:1138) — a child-visible flag the stack owns, which `gtk_widget_unparent`
+ * resets, not the widget's own visibility.
+ */
+function clearPageMarks(content: HTMLElement): void {
+    content.classList.remove('adw-view-stack-child', 'active-view');
+    delete content.dataset.name;
+    content.hidden = false;
+}

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

@@ -25,6 +25,7 @@ import type { AdwViewStack } from './adw-view-stack.js';
 import { applyDescription, applyIndicator, applySwitcherIcon } 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 bar button owns — the bar paints the derived model onto them. */
 interface BarButtonNodes {
@@ -34,7 +35,7 @@ interface BarButtonNodes {
     indicator: HTMLSpanElement;
 }
 
-export class AdwViewSwitcherBar extends HTMLElement {
+export class AdwViewSwitcherBar extends WidgetElement {
     private readonly _barState = new ViewSwitcherBarState();
     private _barEl!: HTMLDivElement;
     private _nodes: BarButtonNodes[] = [];

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

@@ -57,8 +57,9 @@ import type { AdwSidebarItemSpec, AdwSidebarSectionSpec, SidebarItemFilter } fro
 import { bindSlottedChildren } from '../slotted-children.js';
 import type { AdwSidebar } from './adw-sidebar.js';
 import type { AdwViewStack } from './adw-view-stack.js';
+import { WidgetElement } from '../widget-element.js';
 
-export class AdwViewSwitcherSidebar extends HTMLElement {
+export class AdwViewSwitcherSidebar extends WidgetElement {
     private _sidebar!: AdwSidebar;
     private _placeholderEl!: HTMLDivElement;
     private _prefixEl!: HTMLDivElement;