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

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

@@ -2,44 +2,35 @@
 // content and shows transient toast strips (title, optional action button, close
 // affordance) layered over the bottom of its own bounds.
 //
-// The QUEUE — the one-at-a-time policy, FIFO ordering and auto-dismiss lifecycle —
-// is HEADLESS and lives in `@gjsify/adwaita-core` (ADR 0004) as {@link AdwToastQueue};
-// this element composes it and keeps only the DOM half: build the strip on `onShow`,
-// tear it down on `onHide`, run the enter/exit transitions.
+// A toast is an `Adw.Toast` and goes in through `add_toast(toast)`, exactly as on GTK, so a
+// GNOME app's toast code runs here unchanged. The QUEUE — one toast at a time, priority,
+// re-add, auto-dismiss — is HEADLESS and lives in `@gjsify/adwaita-core` (ADR 0004) as
+// {@link ToastOverlayQueue}; this element keeps only the DOM half: build the strip on
+// `onShow`, tear it down on `onHide`, run the enter/exit transitions.
 //
 // Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
 // Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss, _toast_overlay.scss
-// Reference: refs/libadwaita/src/adw-toast-overlay.c, adw-toast.c (add_toast queues,
-//   one toast is shown at a time, dismissing advances to the next)
+// Reference: refs/libadwaita/src/adw-toast-overlay.c, adw-toast-widget.c (add_toast queues,
+//   one toast is shown at a time, the button emits button-clicked, activates the action and
+//   dismisses)
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
-// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
-// extended addToast() with action button + close button + options API; the
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web; the
 // queue/auto-dismiss state machine composed from @gjsify/adwaita-core.
 
-import { AdwToast, AdwToastQueue } from '@gjsify/adwaita-core';
+import { ToastOverlayQueue } from '@gjsify/adwaita-core';
 
+import { activateWidgetAction } from '../application.js';
+import { renderPangoMarkup } from '../pango-markup.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { createGtkImage } from './gtk-image.js';
-import type { ToastScheduler, ToastTimerHandle } from '@gjsify/adwaita-core';
+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.
 export type { ToastScheduler, ToastTimerHandle } from '@gjsify/adwaita-core';
 
-/** Options for {@link AdwToastOverlay.addToast}, mirroring Adw.Toast's properties. */
-export interface AdwToastOptions {
-    /** Seconds before the toast auto-dismisses; `0` keeps it until dismissed. Mirrors Adw.Toast:timeout (default 5). */
-    timeout?: number;
-    /** Label for the action button; omitted/empty means no button. Mirrors Adw.Toast:button-label. */
-    buttonLabel?: string;
-    /** Invoked when the action button is pressed. Mirrors the activation of Adw.Toast:action-name. */
-    onAction?: () => void;
-}
-
-/** Default toast lifetime in SECONDS — this element's public unit (Adw.Toast:timeout). */
-const DEFAULT_TIMEOUT_SECONDS = 5;
-
 /**
  * Fallback budget in ms for the exit transition: must stay at or above the
  * `.adw-toast.hiding` transition-duration in `_toast.scss` (0.15s today), because it
@@ -53,21 +44,19 @@ 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 one-at-a-time + FIFO + auto-dismiss state machine (ADR 0004). */
-    private readonly _queue: AdwToastQueue;
+    /** The headless queue of `adw-toast-overlay.c` (ADR 0004). */
+    private readonly _queue: ToastOverlayQueue;
     /** The timing source the queue's auto-dismiss runs on — swappable, see {@link scheduler}. */
     private _scheduler: ToastScheduler = domScheduler;
-    /** The strip currently mounted for {@link AdwToastQueue.current}, if any. */
+    /** The strip currently mounted for {@link ToastOverlayQueue.current}, if any. */
     private _currentEl: HTMLDivElement | null = null;
-    /** Per-toast action callbacks (the core toast descriptor carries only the label). */
-    private readonly _actions = new WeakMap<AdwToast, () => void>();
 
     constructor() {
         super();
-        this._queue = new AdwToastQueue({
+        this._queue = new ToastOverlayQueue({
             // Indirect through `this._scheduler` so the timing source stays
             // swappable after construction (the queue takes its scheduler once).
             scheduler: {
@@ -97,7 +86,7 @@ export class AdwToastOverlay extends HTMLElement {
         this._toasts = document.createElement('div');
         this._toasts.className = 'adw-toast-overlay-toasts';
 
-        bindSlottedChildren(this, [{ into: content }]).install(content, this._toasts);
+        bindSlottedChildren(this, [{ name: 'child', into: content }, { into: content }]).install(content, this._toasts);
     }
 
     /**
@@ -115,7 +104,7 @@ export class AdwToastOverlay extends HTMLElement {
     }
 
     /** The toast currently on screen, or `null` when nothing is shown. */
-    get currentToast(): AdwToast | null {
+    get currentToast(): Toast | null {
         return this._queue.current;
     }
 
@@ -124,45 +113,21 @@ export class AdwToastOverlay extends HTMLElement {
         return this._queue.pending;
     }
 
-    /**
-     * Show a toast — the web equivalent of Adw.ToastOverlay.add_toast() with a
-     * freshly-built Adw.Toast. Only ONE toast is visible at a time; this one shows
-     * immediately when the slot is free, otherwise it waits its turn.
-     *
-     * `options` is either an {@link AdwToastOptions} bag or, as a legacy shorthand, a
-     * timeout in MILLISECONDS.
-     */
-    addToast(title: string, options: number | AdwToastOptions = {}): void {
-        // Ensure the toast container exists even if addToast() races a not-yet
+    /** `adw_toast_overlay_add_toast`: show `toast` now, or queue it by its priority. */
+    add_toast(toast: Toast): void {
+        // Ensure the toast container exists even if add_toast() races a not-yet
         // connected element (mirrors Adw.ToastOverlay queuing before realize).
         if (!this._toasts) this.connectedCallback();
-
-        // Back-compat: the original signature was addToast(title, timeoutMs).
-        const opts: AdwToastOptions = typeof options === 'number' ? { timeout: options / 1000 } : options;
-
-        // This element's public timeout unit is SECONDS (Adw.Toast:timeout); the
-        // headless descriptor counts milliseconds.
-        const toast = new AdwToast(title, {
-            timeout: (opts.timeout ?? DEFAULT_TIMEOUT_SECONDS) * 1000,
-            buttonLabel: opts.buttonLabel,
-        });
-        if (opts.onAction) this._actions.set(toast, opts.onAction);
-
-        this._queue.add(toast);
-    }
-
-    /** Dismiss the visible toast early; the next queued toast takes its place. */
-    dismiss(): void {
-        this._queue.dismiss();
+        this._queue.add_toast(toast);
     }
 
-    /** Dismiss the visible toast and discard everything still queued behind it. */
-    clearToasts(): void {
-        this._queue.clear();
+    /** `adw_toast_overlay_dismiss_all`: dismiss every queued toast, then the visible one. */
+    dismiss_all(): void {
+        this._queue.dismiss_all();
     }
 
     /** Build + attach the strip for `toast` — the DOM half of the queue's `onShow`. */
-    private _mountToast(toast: AdwToast): void {
+    private _mountToast(toast: Toast): void {
         const el = document.createElement('div');
         el.className = 'adw-toast';
 
@@ -171,18 +136,20 @@ export class AdwToastOverlay extends HTMLElement {
 
         const titleEl = document.createElement('span');
         titleEl.className = 'adw-toast-title';
-        titleEl.textContent = toast.title;
+        if (toast.use_markup) renderPangoMarkup(titleEl, toast.title);
+        else titleEl.textContent = toast.title;
         wrapper.appendChild(titleEl);
         el.appendChild(wrapper);
 
-        if (toast.hasButton) {
+        if (toast.button_label) {
             const button = document.createElement('button');
             button.type = 'button';
             button.className = 'adw-toast-action-button';
-            button.textContent = toast.buttonLabel;
+            button.textContent = toast.button_label;
             button.addEventListener('click', () => {
-                this._actions.get(toast)?.();
-                this._queue.dismiss();
+                toast.emit('button-clicked');
+                if (toast.action_name) activateWidgetAction(this, toast.action_name);
+                toast.dismiss();
             });
             el.appendChild(button);
         }
@@ -197,7 +164,7 @@ export class AdwToastOverlay extends HTMLElement {
         close.className = 'adw-toast-close-button';
         close.setAttribute('aria-label', 'Close');
         close.appendChild(createGtkImage('window-close'));
-        close.addEventListener('click', () => this._queue.dismiss());
+        close.addEventListener('click', () => toast.dismiss());
         el.appendChild(close);
 
         this._toasts.appendChild(el);

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;

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-features.ts

@@ -23,6 +23,15 @@ function requested(host: HTMLElement, name: string, fallback: number): number {
     return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
 
+/**
+ * A maximized or fullscreen `Gtk.Window` ignores its default size and fills the monitor's work
+ * area (gtkwindow.c: the default size is only the RESTORED size). The page's work area is the
+ * frame's containing block, which the skin sizes from these two attributes.
+ */
+export function fillsContainingBlock(host: HTMLElement): boolean {
+    return ['maximized', 'fullscreened'].some((name) => host.hasAttribute(name) && host.getAttribute(name) !== 'false');
+}
+
 export class AdwWindowFeatures {
     private _contentEl: HTMLDivElement | null = null;
     private _breakpoints: AdwBreakpoint[] = [];
@@ -128,13 +137,16 @@ export class AdwWindowFeatures {
      * size; `width-request`/`height-request` override it). `default-width/height` is only
      * a default: an authored size is the box, and an absent one leaves the box to the
      * stylesheet, which fills the viewport — a page has no window manager to pick a size.
+     * While maximized or fullscreened the default size is not applied at all: the stylesheet
+     * fills the containing block, and the minimum still holds.
      */
     applySizeRequest(): void {
         const host = this._host;
         host.style.minWidth = `${requested(host, 'width-request', DEFAULT_WIDTH)}px`;
         host.style.minHeight = `${requested(host, 'height-request', DEFAULT_HEIGHT)}px`;
-        const width = host.getAttribute('default-width') ?? host.getAttribute('width');
-        const height = host.getAttribute('default-height') ?? host.getAttribute('height');
+        const fills = fillsContainingBlock(host);
+        const width = fills ? null : (host.getAttribute('default-width') ?? host.getAttribute('width'));
+        const height = fills ? null : (host.getAttribute('default-height') ?? host.getAttribute('height'));
         if (width) host.style.width = `${width}px`;
         else host.style.removeProperty('width');
         if (height) host.style.height = `${height}px`;

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-application-window.ts

@@ -16,7 +16,7 @@
 //
 // THE `win.` / `app.` PREFIXES. `GtkApplicationWindow` exports window actions under `win.` and
 // application-wide ones under `app.` (:48-56), and any `GtkActionable` inside the window can
-// activate either. `defineWindowApplication` installs the `Gio.ActionMap` half on the prototype
+// activate either. `installActionMap` installs the `Gio.ActionMap` half on the prototype
 // (`add_action`, `lookup_action`, `remove_action`, the `win.` registry); the `Gio.ActionGroup`
 // half stays off because a window's `activate_action` is the widget's. Plain `<gtk-window>` has
 // no ActionMap. What this element adds over it is that map, the strip and the property that shows it.
@@ -26,17 +26,12 @@
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-import type { ActionLike } from '@gjsify/adwaita-core';
-import type { GtkApplication } from '../application.js';
+import { installActionMap, type ActionLike } from '@gjsify/adwaita-core';
 import type { DispatchedSignals } from '../signals.js';
 import type { AdwSlot } from '../slotted-children.js';
 import { GtkWindow } from './gtk-window.js';
-import { defineWindowApplication } from '../application.js';
 
 export class GtkApplicationWindow extends GtkWindow {
-    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
-    declare application: GtkApplication | null;
-
     /** `Gio.ActionMap.add_action`: installed by `installActionMap`; the action is reachable as `win.<name>`. */
     declare add_action: (action: ActionLike) => void;
     /** `Gio.ActionMap.lookup_action`: the window's own action, or `null`. */
@@ -127,4 +122,4 @@ export class GtkApplicationWindow extends GtkWindow {
 
 customElements.define('gtk-application-window', GtkApplicationWindow);
 
-defineWindowApplication(GtkApplicationWindow.prototype);
+installActionMap(GtkApplicationWindow.prototype);

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'];
     }