@gjsify/adwaita-web 0.45.0 → 0.46.0

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

@@ -55,7 +55,7 @@
 // Reference: refs/adwaita-web/adwaita-web/scss/_about_dialog.scss (web layout)
 // Copyright (c) 2022-2024 GNOME Foundation Inc. / Purism SPC (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// icon nodes are <adw-icon>; the derivations live in @gjsify/adwaita-core.
+// icon nodes are <gtk-image>; the derivations live in @gjsify/adwaita-core.
 
 import {
     ADW_ABOUT_DIALOG_LABELS,
@@ -67,7 +67,7 @@ import {
     stripMnemonic,
 } from '@gjsify/adwaita-core';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 import { AdwModalSurface } from './modal-surface.js';
 
 /** A template label with its mnemonic marker removed — this renderer has no accelerator layer. */
@@ -440,7 +440,7 @@ export class AdwAboutDialog extends HTMLElement {
         // `image-missing` rather than three stray classes; that is also what GTK draws for
         // it on a machine without the app installed.
         if (visibility.appIcon) {
-            body.appendChild(createAdwIcon(this.applicationIcon, 'adw-about-dialog-icon'));
+            body.appendChild(createGtkImage(this.applicationIcon, 'adw-about-dialog-icon'));
         }
 
         // No fallback: an unset name means no label.
@@ -518,7 +518,7 @@ export class AdwAboutDialog extends HTMLElement {
         row.setAttribute('title', title);
         row.setAttribute('activatable', '');
 
-        const chevron = createAdwIcon('go-next', 'adw-about-dialog-chevron');
+        const chevron = createGtkImage('go-next', 'adw-about-dialog-chevron');
         chevron.setAttribute('slot', 'suffix');
         row.appendChild(chevron);
 
@@ -569,7 +569,7 @@ export class AdwAboutDialog extends HTMLElement {
         row.setAttribute('activatable', '');
         row.classList.add('adw-about-dialog-link-row');
 
-        const chevron = createAdwIcon('go-next', 'adw-about-dialog-chevron');
+        const chevron = createGtkImage('go-next', 'adw-about-dialog-chevron');
         chevron.setAttribute('slot', 'suffix');
         row.appendChild(chevron);
 
@@ -603,7 +603,7 @@ export class AdwAboutDialog extends HTMLElement {
             const uri = person.uri ?? '';
             row.setAttribute('activatable', '');
             row.classList.add('adw-about-dialog-link-row');
-            const chevron = createAdwIcon('go-next', 'adw-about-dialog-chevron');
+            const chevron = createGtkImage('go-next', 'adw-about-dialog-chevron');
             chevron.setAttribute('slot', 'suffix');
             row.appendChild(chevron);
             row.addEventListener('activated', () => this._activateLink(uri));

package/src/elements/adw-avatar.ts

@@ -7,7 +7,7 @@
 // Reference: refs/adwaita-web/adwaita-web/scss/_avatar.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// fallback icon node is <adw-icon>.
+// fallback icon node is <gtk-image>.
 //
 // The two derivations — initials from the name, and the palette colour the name hashes to
 // — are HEADLESS and live in `@gjsify/adwaita-core` (ADR 0004) as {@link avatarInitials} /
@@ -21,11 +21,11 @@
 
 import { avatarColor, avatarFontSize, avatarInitials, avatarMaxFontSize, avatarMode } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 export class AdwAvatar extends HTMLElement {
     private _textEl!: HTMLSpanElement;
-    private _iconEl!: AdwIcon;
+    private _iconEl!: GtkImage;
     private _imageEl!: HTMLImageElement;
     private _initialized = false;
 
@@ -40,7 +40,7 @@ export class AdwAvatar extends HTMLElement {
         this._textEl = document.createElement('span');
         this._textEl.className = 'adw-avatar-text';
 
-        this._iconEl = createAdwIcon(null, 'adw-avatar-icon');
+        this._iconEl = createGtkImage(null, 'adw-avatar-icon');
 
         this._imageEl = document.createElement('img');
         this._imageEl.className = 'adw-avatar-custom-image';

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

@@ -20,15 +20,15 @@
 //            (image-text-button · the splitbutton override · buttoncontent)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// icon node is <adw-icon>.
+// icon node is <gtk-image>.
 
 import { BUTTON_CONTENT_STYLE_CLASS, buttonContentIconName, buttonContentLabelText } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 /**
  * What `gtk_widget_get_ancestor (…, GTK_TYPE_BUTTON)` looks like in the DOM: a native
- * `<button>`, or anything wearing the Adwaita button class — `<adw-button>` renders an
+ * `<button>`, or anything wearing the Adwaita button class — `<gtk-button>` renders an
  * inner button with it, and the stories put it on plain ones.
  */
 const BUTTON_SELECTOR = 'button, .adw-button';
@@ -38,7 +38,7 @@ const SPLIT_BUTTON_SELECTOR = 'adw-split-button, .adw-split-button';
 
 export class AdwButtonContent extends HTMLElement {
     private _boxEl!: HTMLDivElement;
-    private _iconEl!: AdwIcon;
+    private _iconEl!: GtkImage;
     private _labelEl!: HTMLSpanElement;
     private _initialized = false;
     /** The node currently carrying `image-text-button`, so unroot can find it. */
@@ -57,9 +57,9 @@ export class AdwButtonContent extends HTMLElement {
             this._boxEl.className = 'adw-button-content-box';
 
             // The image node is GTK_ACCESSIBLE_ROLE_PRESENTATION in libadwaita: decorative,
-            // with the label carrying the accessible name — what `<adw-icon>`'s own
+            // with the label carrying the accessible name — what `<gtk-image>`'s own
             // `aria-hidden` already says.
-            this._iconEl = createAdwIcon(null);
+            this._iconEl = createGtkImage(null);
 
             this._labelEl = document.createElement('span');
             this._labelEl.className = 'adw-button-content-label';

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

@@ -21,13 +21,13 @@
 
 import { BUTTON_ROW_ACTIVATABLE, ButtonRowState } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 import { attachRowActivation } from './row-activation.js';
 
 export class AdwButtonRow extends HTMLElement {
     private _contentsEl!: HTMLDivElement;
-    private _startIconEl!: AdwIcon;
-    private _endIconEl!: AdwIcon;
+    private _startIconEl!: GtkImage;
+    private _endIconEl!: GtkImage;
     private _titleEl!: HTMLSpanElement;
     /** The headless title + start/end icon state (ADR 0004). */
     private readonly _state = new ButtonRowState();
@@ -43,12 +43,12 @@ export class AdwButtonRow extends HTMLElement {
         this._contentsEl = document.createElement('div');
         this._contentsEl.className = 'adw-button-row-contents';
 
-        this._startIconEl = createAdwIcon(null, 'start');
+        this._startIconEl = createGtkImage(null, 'start');
 
         this._titleEl = document.createElement('span');
         this._titleEl.className = 'adw-button-row-title';
 
-        this._endIconEl = createAdwIcon(null, 'end');
+        this._endIconEl = createGtkImage(null, 'end');
 
         this._contentsEl.append(this._startIconEl, this._titleEl, this._endIconEl);
         this.replaceChildren(this._contentsEl);
@@ -89,7 +89,7 @@ export class AdwButtonRow extends HTMLElement {
      * The `start` / `end` position class is set once at construction — it is
      * where the node sits, not what it draws — so only the name changes here.
      */
-    private _paintIcon(el: AdwIcon, iconName: string, visible: boolean) {
+    private _paintIcon(el: GtkImage, iconName: string, visible: boolean) {
         el.iconName = visible ? iconName : null;
         el.hidden = !visible;
     }

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

@@ -43,7 +43,7 @@ export class AdwComboRow extends HTMLElement {
         const items: string[] = JSON.parse(this.getAttribute('items') || '[]');
         // Seed the headless state BEFORE subscribing, so building the initial DOM below is
         // not driven by a change notification. The string→descriptor mapping is core's, so
-        // this row and `<adw-drop-down>` accept one option vocabulary.
+        // this row and `<gtk-drop-down>` accept one option vocabulary.
         this._state.setOptions(normalizeComboOptions(items));
         this._state.setSelectedIndex(parseInt(this.getAttribute('selected') || '0', 10));
         const selectedIdx = this._state.selectedIndex;

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

@@ -27,7 +27,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// edit icon node is <adw-icon>.
+// edit icon node is <gtk-image>.
 
 import {
     ENTRY_ROW_APPLY_ICON_NAME,
@@ -38,7 +38,7 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren, type AdwSlottedChildren } from '../slotted-children.js';
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 /**
  * Show/hide a rendered part. `hidden` carries the semantics and is what the conformance
@@ -66,7 +66,7 @@ export class AdwEntryRow extends HTMLElement {
     protected _title!: HTMLSpanElement;
     /** The `editable-area` gizmo: both titles plus the input. */
     protected _area!: HTMLDivElement;
-    protected _editIcon!: AdwIcon;
+    protected _editIcon!: GtkImage;
     protected _indicator!: HTMLSpanElement;
     protected _applyButton!: HTMLButtonElement;
     protected _prefixes!: HTMLDivElement;
@@ -326,11 +326,11 @@ export class AdwEntryRow extends HTMLElement {
         // The libadwaita name travels in `data-icon-name`; the drawn glyph is
         // the curated @gjsify/adwaita-icons spelling of the same symbolic, which
         // is a different string (`adw-entry-edit-symbolic` vs `document-edit`).
-        this._editIcon = createAdwIcon('document-edit', 'adw-row-edit', `${prefix}-edit`);
+        this._editIcon = createGtkImage('document-edit', 'adw-row-edit', `${prefix}-edit`);
         this._editIcon.dataset.iconName = ENTRY_ROW_EDIT_ICON_NAME;
 
         // Author-supplied light-DOM children are KEPT and stay LIVE: `replaceChildren` used
-        // to discard them silently, so `<adw-entry-row><adw-button>Go</adw-button>` rendered
+        // to discard them silently, so `<adw-entry-row><gtk-button>Go</gtk-button>` rendered
         // without its button, and the snapshot that fixed that was still a one-shot read — a
         // suffix appended after connect sat outside the affordance box. ELEMENTS only, on
         // both paths: GtkBuildable also only ever adopts widgets, and keeping stray

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

@@ -17,7 +17,7 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
 // disclosure state machine composed from @gjsify/adwaita-core, the enable
-// switch from <adw-switch> and the chevron from <adw-icon>.
+// switch from <gtk-switch> and the chevron from <gtk-image>.
 
 import { ExpanderState, deriveRowLabels } from '@gjsify/adwaita-core';
 
@@ -25,22 +25,22 @@ import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
-// `adw-switch` is defined before this module's `customElements.define` can upgrade a
+// `gtk-switch` is defined before this module's `customElements.define` can upgrade a
 // server-rendered `<adw-expander-row>` and build one. A combined
-// `import { AdwSwitch }` would NOT do it — the binding is only used in type position,
+// `import { GtkSwitch }` would NOT do it — the binding is only used in type position,
 // and this package compiles without `verbatimModuleSyntax`, so TypeScript would elide
 // the statement and take the registration with it.
-import './adw-switch.js';
-import type { AdwSwitch } from './adw-switch.js';
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+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';
 
 export class AdwExpanderRow extends HTMLElement {
     private _headerEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
-    private _enableSwitch!: AdwSwitch;
-    private _chevronEl!: AdwIcon;
+    private _enableSwitch!: GtkSwitch;
+    private _chevronEl!: GtkImage;
     private _contentEl!: HTMLDivElement;
     private _prefixEl!: HTMLDivElement;
     private _suffixEl!: HTMLDivElement;
@@ -118,11 +118,11 @@ export class AdwExpanderRow extends HTMLElement {
         textEl.append(this._titleEl, this._subtitleEl);
 
         // Clicking the enable switch does NOT toggle the disclosure.
-        this._enableSwitch = document.createElement('adw-switch') as AdwSwitch;
+        this._enableSwitch = document.createElement('gtk-switch') as GtkSwitch;
         this._enableSwitch.classList.add('adw-expander-row-enable-switch');
         this._enableSwitch.active = this.enableExpansion;
 
-        this._chevronEl = createAdwIcon('go-down', 'adw-expander-row-chevron');
+        this._chevronEl = createGtkImage('go-down', 'adw-expander-row-chevron');
 
         this._prefixEl = document.createElement('div');
         this._prefixEl.className = 'adw-expander-row-prefix';

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

@@ -457,7 +457,7 @@ export class AdwNavigationView extends HTMLElement {
         const start = (headerBar as { startSection?: HTMLElement | null }).startSection ?? null;
         if (!start) return;
 
-        const back = document.createElement('adw-button');
+        const back = document.createElement('gtk-button');
         back.classList.add('adw-navigation-back-button');
         back.setAttribute('icon', 'go-previous');
         back.setAttribute('flat', '');

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

@@ -22,7 +22,7 @@
 
 import { PasswordEntryRowState, type PasswordEntryRowRenderState } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 import { AdwEntryRow } from './adw-entry-row.js';
 
@@ -30,7 +30,7 @@ export class AdwPasswordEntryRow extends AdwEntryRow {
     /** The headless peek + caps-lock derivation, composing the parent row's state. */
     private readonly _password = new PasswordEntryRowState(this._state);
     private _toggle!: HTMLButtonElement;
-    private _toggleIcon!: AdwIcon;
+    private _toggleIcon!: GtkImage;
 
     static get observedAttributes(): string[] {
         return [...AdwEntryRow.observedAttributes, 'revealed'];
@@ -73,7 +73,7 @@ export class AdwPasswordEntryRow extends AdwEntryRow {
         this._toggle = document.createElement('button');
         this._toggle.type = 'button';
         this._toggle.className = `adw-button flat circular icon-only ${this._classPrefix}-toggle`;
-        this._toggleIcon = createAdwIcon(null);
+        this._toggleIcon = createGtkImage(null);
         this._toggle.append(this._toggleIcon);
         this._toggle.addEventListener('click', () => this._password.togglePeek());
         // Installed through add_suffix as C does, so it is the FIRST suffix and a

package/src/elements/adw-sidebar.ts

@@ -43,7 +43,7 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss (.navigation-sidebar, sidebar)
 // Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// icon nodes are <adw-icon>.
+// icon nodes are <gtk-image>.
 
 import {
     ADW_SIDEBAR_NO_SELECTION,
@@ -56,7 +56,7 @@ import {
     type SidebarSelectionChange,
 } from '@gjsify/adwaita-core';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
 
 // The sidebar consumes its declared children and drops them from the tree, so a later
@@ -348,7 +348,7 @@ export class AdwSidebar extends HTMLElement {
         row.hidden = item.visible === false;
         row.disabled = item.enabled === false;
 
-        const iconEl = createAdwIcon(item.iconName ?? null, 'adw-sidebar-item-icon');
+        const iconEl = createGtkImage(item.iconName ?? null, 'adw-sidebar-item-icon');
         iconEl.hidden = !flat.iconVisible;
         row.appendChild(iconEl);
 
@@ -371,7 +371,7 @@ export class AdwSidebar extends HTMLElement {
 
         // Page mode adds a trailing chevron on every row, the way the boxed-list
         // AdwActionRow carries a `go-next-symbolic` arrow.
-        row.appendChild(createAdwIcon('go-next', 'adw-sidebar-item-arrow'));
+        row.appendChild(createGtkImage('go-next', 'adw-sidebar-item-arrow'));
 
         row.addEventListener('click', () => this._activate(flat.index));
 

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

@@ -25,7 +25,7 @@
 // into state calls, pinned to the C source by the shared vectors in
 // `@gjsify/adwaita-core/conformance` (see `src/split-button.spec.ts`). Of the
 // element's own former copies only the glyph→mask-class mapping is a renderer
-// concern — see ARROW_MASK_CLASSES. The menu surface is `<adw-popover>`, which is
+// concern — see ARROW_MASK_CLASSES. The menu surface is `<gtk-popover>`, which is
 // what brings the 15px radius, Escape dismissal and arrow-key navigation; do not
 // hand-roll a surface here instead.
 //
@@ -47,16 +47,16 @@ import {
 import type { AdwArrowIcon, AdwMenuEntry, SplitButtonChange, SplitButtonDirection } from '@gjsify/adwaita-core';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it is
-// what guarantees `adw-popover` is defined before this module's own
+// what guarantees `gtk-popover` is defined before this module's own
 // `customElements.define` can upgrade a server-rendered `<adw-split-button>` and
-// build one. A combined `import { AdwPopover }` would NOT do it — the binding is
+// build one. A combined `import { GtkPopover }` would NOT do it — the binding is
 // only ever used in type position here, and this package compiles without
 // `verbatimModuleSyntax`, so TypeScript would elide the whole statement and take
 // the registration with it.
-import './adw-popover.js';
-import type { AdwPopover } from './adw-popover.js';
+import './gtk-popover.js';
+import type { GtkPopover } from './gtk-popover.js';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 const VARIANT_CLASSES: Record<string, string> = {
     flat: 'flat',
@@ -87,11 +87,11 @@ const ARROW_MASK_CLASSES: Readonly<Record<AdwArrowIcon, string>> = {
 };
 
 // The `-symbolic` strip and the single-CSS-token guard belong to `normalizeIconName`,
-// applied by <adw-icon>: never rebuild the mask class by hand, which is how five sites
+// applied by <gtk-image>: never rebuild the mask class by hand, which is how five sites
 // in this package shipped without the guard.
 
 /**
- * Direction → the CSS axis `<adw-popover>` places the surface on. WHICH
+ * Direction → the CSS axis `<gtk-popover>` places the surface on. WHICH
  * direction applies is not decided here — {@link splitButtonPopupDirection}
  * folds `none` onto `down` (GtkMenuButton's rule, not the split button's), and
  * this table is keyed by its output for the same reason ARROW_MASK_CLASSES is.
@@ -107,8 +107,8 @@ export class AdwSplitButton extends HTMLElement {
     private readonly _state = new SplitButtonState();
     private _actionEl!: HTMLButtonElement;
     private _dropdownEl!: HTMLButtonElement;
-    private _arrowEl!: AdwIcon;
-    private _menuEl!: AdwPopover;
+    private _arrowEl!: GtkImage;
+    private _menuEl!: GtkPopover;
     /** Inline text content, captured before we take over the subtree. */
     private _inlineLabel = '';
     /** Last `open` value reflected as `notify::active`, so the event fires once per flip. */
@@ -226,10 +226,10 @@ export class AdwSplitButton extends HTMLElement {
         this._dropdownEl.type = 'button';
         this._dropdownEl.className = 'adw-split-button-dropdown';
         this._dropdownEl.setAttribute('aria-haspopup', 'menu');
-        this._arrowEl = createAdwIcon(null);
+        this._arrowEl = createGtkImage(null);
         this._dropdownEl.appendChild(this._arrowEl);
 
-        this._menuEl = document.createElement('adw-popover') as AdwPopover;
+        this._menuEl = document.createElement('gtk-popover') as GtkPopover;
         this._menuEl.classList.add('adw-split-button-menu');
         this._menuEl.setAttribute('role', 'menu');
         // The dropdown half IS a GtkMenuButton (the C passes straight through to
@@ -376,7 +376,7 @@ export class AdwSplitButton extends HTMLElement {
         this._actionEl.classList.toggle('icon-only', mode === 'icon');
 
         if (mode === 'icon' && iconName !== null) {
-            this._actionEl.appendChild(createAdwIcon(iconName));
+            this._actionEl.appendChild(createGtkImage(iconName));
         } else if (mode === 'label' && label !== null) {
             // Never trimmed: two spaces are a valid label and render as one.
             this._actionEl.appendChild(document.createTextNode(label));
@@ -430,7 +430,7 @@ export class AdwSplitButton extends HTMLElement {
             const item = document.createElement('button');
             item.type = 'button';
             // `.adw-popover-item` is what makes the row navigable: it is the selector
-            // `<adw-popover>` walks for arrow/Home/End/Enter.
+            // `<gtk-popover>` walks for arrow/Home/End/Enter.
             item.className = 'adw-popover-item adw-split-button-menu-item';
             item.setAttribute('role', 'menuitem');
             item.tabIndex = -1;

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

@@ -5,16 +5,16 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss (AdwStatusPage)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// icon node is <adw-icon>.
+// icon node is <gtk-image>.
 
 import { stringIsNotEmpty } from '@gjsify/adwaita-core';
 
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 export class AdwStatusPage extends HTMLElement {
-    private _iconEl!: AdwIcon;
+    private _iconEl!: GtkImage;
     private _titleEl!: HTMLSpanElement;
     private _descEl!: HTMLSpanElement;
     private _childEl!: HTMLDivElement;
@@ -28,7 +28,7 @@ export class AdwStatusPage extends HTMLElement {
         if (this._initialized) return;
         this._initialized = true;
 
-        this._iconEl = createAdwIcon(null, 'adw-status-page-icon');
+        this._iconEl = createGtkImage(null, 'adw-status-page-icon');
 
         this._titleEl = document.createElement('span');
         this._titleEl.className = 'adw-status-page-title';

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

@@ -1,4 +1,4 @@
-// <adw-switch-row> — row with a title/subtitle and a trailing `<adw-switch>`.
+// <adw-switch-row> — row with a title/subtitle and a trailing `<gtk-switch>`.
 //
 // The ACTIVE flag, its notify rule and the toggle-on-row-activation are HEADLESS and live
 // in `@gjsify/adwaita-core` (ADR 0004) as {@link SwitchRowState}; this element keeps only
@@ -14,22 +14,22 @@
 // Copyright (c) 2025 csm. MIT License.
 // Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
 //   title/subtitle text column added to match Adw.SwitchRow; the active state
-//   composed from @gjsify/adwaita-core; the toggle markup from <adw-switch>.
+//   composed from @gjsify/adwaita-core; the toggle markup from <gtk-switch>.
 
 import { SwitchRowState, deriveRowLabels } from '@gjsify/adwaita-core';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
-// `adw-switch` is defined before this module's `customElements.define` can upgrade a
-// server-rendered `<adw-switch-row>` and build one. A combined `import { AdwSwitch }`
+// `gtk-switch` is defined before this module's `customElements.define` can upgrade a
+// server-rendered `<adw-switch-row>` and build one. A combined `import { GtkSwitch }`
 // would NOT do it — the binding is only used in type position, and this package compiles
 // without `verbatimModuleSyntax`, so TypeScript would elide the statement and take the
 // registration with it.
-import './adw-switch.js';
+import './gtk-switch.js';
 import { attachRowActivation } from './row-activation.js';
-import type { AdwSwitch } from './adw-switch.js';
+import type { GtkSwitch } from './gtk-switch.js';
 
 export class AdwSwitchRow extends HTMLElement {
-    private _switchEl!: AdwSwitch;
+    private _switchEl!: GtkSwitch;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
     /** The headless active flag + its notify rule (ADR 0004). */
@@ -62,7 +62,7 @@ export class AdwSwitchRow extends HTMLElement {
         this._subtitleEl.className = 'adw-row-subtitle';
         text.append(this._titleEl, this._subtitleEl);
 
-        this._switchEl = document.createElement('adw-switch') as AdwSwitch;
+        this._switchEl = document.createElement('gtk-switch') as GtkSwitch;
         // adw-switch-row.c:159 — the slider is not a focus target; the ROW is.
         this._switchEl.unfocusable = true;
 

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

@@ -43,12 +43,12 @@
 // Reference: packages/nativescript-bridge/adwaita/src/widgets/adw-tab-view.ts (NS twin)
 // Copyright (c) 2020-2022 Purism SPC / GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// tab icon + indicator nodes are <adw-icon>.
+// tab icon + indicator nodes are <gtk-image>.
 
 import { TabViewState, tabCloseVisible, tabIconState, tabTooltip, tabsRevealed } from '@gjsify/adwaita-core';
 import type { AdwTabPageSpec, AdwTabPageState, TabViewPagesChange, TabViewSelectionChange } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 export type AdwTabViewPage = AdwTabPageState<HTMLElement>;
 
@@ -491,10 +491,10 @@ export class AdwTabView extends HTMLElement {
         tab.setAttribute('role', 'tab');
         tab.dataset.pageId = page.id;
 
-        // Decorative mask-image nodes — <adw-icon> carries the convention, including the
+        // Decorative mask-image nodes — <gtk-image> carries the convention, including the
         // `-symbolic` strip, which is ours and not C's: there the name reaches
         // `GtkImage` untouched.
-        const icon = createAdwIcon(null, 'adw-tab-icon');
+        const icon = createGtkImage(null, 'adw-tab-icon');
         tab.appendChild(icon);
 
         // `AdwTabPage:loading` swaps the icon image for an `AdwSpinnerPaintable` — the
@@ -511,7 +511,7 @@ export class AdwTabView extends HTMLElement {
         label.className = 'adw-tab-title';
         tab.appendChild(label);
 
-        tab.appendChild(createAdwIcon(null, 'adw-tab-indicator'));
+        tab.appendChild(createGtkImage(null, 'adw-tab-indicator'));
 
         // Close affordance — a small flat button drawn with a CSS "×" glyph. NOT because
         // the glyph is unavailable: `window-close` is in the ICONS map and has a mask class
@@ -581,7 +581,7 @@ export class AdwTabView extends HTMLElement {
         tab.classList.toggle('closing', page.closing);
 
         const icons = tabIconState(page, this.getAttribute('default-icon'));
-        const icon = tab.querySelector('.adw-tab-icon') as AdwIcon | null;
+        const icon = tab.querySelector('.adw-tab-icon') as GtkImage | null;
         if (icon) {
             icon.iconName = icons.icon;
             // The two occupy the same slot and are never both visible: C
@@ -592,7 +592,7 @@ export class AdwTabView extends HTMLElement {
         // The spinner is mounted only while it spins, so an idle tab holds no
         // element in the shared rAF ticker.
         if (spinner) spinner.hidden = !(icons.spinner && icons.iconVisible);
-        const indicator = tab.querySelector('.adw-tab-indicator') as AdwIcon | null;
+        const indicator = tab.querySelector('.adw-tab-indicator') as GtkImage | null;
         if (indicator) {
             indicator.iconName = page.indicatorIcon;
             indicator.hidden = !icons.indicatorVisible;

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

@@ -20,7 +20,7 @@
 import { AdwToast, AdwToastQueue } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 import type { ToastScheduler, ToastTimerHandle } from '@gjsify/adwaita-core';
 
 // The timing seam is re-exported so a consumer can type a custom scheduler for
@@ -196,7 +196,7 @@ export class AdwToastOverlay extends HTMLElement {
         close.type = 'button';
         close.className = 'adw-toast-close-button';
         close.setAttribute('aria-label', 'Close');
-        close.appendChild(createAdwIcon('window-close'));
+        close.appendChild(createGtkImage('window-close'));
         close.addEventListener('click', () => this._queue.dismiss());
         el.appendChild(close);
 

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

@@ -52,11 +52,11 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
 // selection state machine composed from @gjsify/adwaita-core, the icon node
-// from <adw-icon>.
+// from <gtk-image>.
 
 import { ToggleGroupState } from '@gjsify/adwaita-core';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
 
 /** A single toggle. Children of <adw-toggle-group>; consumed at connect time. */
@@ -141,7 +141,7 @@ export class AdwToggleGroup extends HTMLElement {
 
             const label = toggle.getAttribute('label') ?? '';
             const icon = toggle.getAttribute('icon-name') ?? '';
-            if (icon) btn.appendChild(createAdwIcon(icon));
+            if (icon) btn.appendChild(createGtkImage(icon));
             if (label) btn.appendChild(document.createTextNode(label));
 
             // An icon-only toggle has no text — give it an accessible name.

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

@@ -23,13 +23,13 @@ import { ViewSwitcherBarState, buildViewSwitcherButtons, viewSwitcherPagesFromSt
 
 import type { AdwViewStack } from './adw-view-stack.js';
 import { applyDescription, applyIndicator, applySwitcherIcon } from './view-switcher-dom.js';
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
 
 /** The DOM nodes one bar button owns — the bar paints the derived model onto them. */
 interface BarButtonNodes {
     button: HTMLButtonElement;
-    icon: AdwIcon;
+    icon: GtkImage;
     label: HTMLSpanElement;
     indicator: HTMLSpanElement;
 }
@@ -227,7 +227,7 @@ export class AdwViewSwitcherBar extends HTMLElement {
         // recomputing the mapping — the spelling `<adw-inline-view-switcher>` uses.
         button.dataset.pageIndex = String(pageIndex);
 
-        const icon = createAdwIcon(null, 'adw-view-switcher-bar-icon');
+        const icon = createGtkImage(null, 'adw-view-switcher-bar-icon');
 
         const label = document.createElement('span');
         label.className = 'adw-view-switcher-bar-label';