@gjsify/adwaita-web 0.44.0 → 0.46.0

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>;
 
@@ -74,8 +74,21 @@ export class AdwTabPage extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, value: string | null) {
         // `closest` still finds the view after adoption: the element is moved
         // into the view's page container, not replaced by a wrapper.
-        const view = this.closest('adw-tab-view') as AdwTabView | null;
-        view?.syncDeclaredPage(this, name, value);
+        //
+        // `instanceof` rather than a cast plus `?.`, because the two failures the
+        // `?.` conflated are different: a MISSING ancestor, and an ancestor that is
+        // there but is still an ordinary HTMLElement because its own definition has
+        // not upgraded it. The cast asserted the second away, and it is the one that
+        // happened — `syncDeclaredPage is not a function`, 19 times on
+        // `/getting-started/`, once per declared page.
+        //
+        // Dropping the notification for an un-upgraded view is correct and not
+        // merely quiet: such a view has not adopted this page yet, and
+        // `_adoptDeclaredPage` reads every attribute in PAGE_ATTRIBUTES straight off
+        // the element when it does, so there is nothing to lose and nothing to defer.
+        const view = this.closest('adw-tab-view');
+        if (!(view instanceof AdwTabView)) return;
+        view.syncDeclaredPage(this, name, value);
     }
 }
 
@@ -478,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
@@ -498,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
@@ -568,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
@@ -579,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;
@@ -797,5 +810,14 @@ export class AdwTabView extends HTMLElement {
     }
 }
 
-customElements.define('adw-tab-page', AdwTabPage);
+// The VIEW first, and the order carries weight: `define` upgrades every matching
+// element already in the document, immediately. Registering the page first therefore
+// upgraded every declared `<adw-tab-page>` while its `<adw-tab-view>` parent was still
+// un-upgraded, and `AdwTabPage.attributeChangedCallback` reaches for that parent.
+// Parent before child keeps the window shut; the `instanceof` guard in the callback is
+// what holds when something outside this file reopens it — and because the guard makes
+// the order UNOBSERVABLE (with it in place, page-first renders identically and every
+// test still passes, measured), the order itself is held by
+// `scripts/check-adwaita-upgrade-order.mjs` rather than by a spec.
 customElements.define('adw-tab-view', AdwTabView);
+customElements.define('adw-tab-page', AdwTabPage);

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

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

@@ -54,13 +54,13 @@ import {
     domViewSwitcherScheduler,
     readSwitcherPage,
 } 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 page owns — the switcher paints the derived model onto them. */
 interface PageNodes {
     button: HTMLButtonElement;
-    icon: AdwIcon;
+    icon: GtkImage;
     label: HTMLSpanElement;
     indicator: HTMLSpanElement;
     body: HTMLDivElement;
@@ -271,7 +271,7 @@ export class AdwViewSwitcher extends HTMLElement {
 
         // Both children always exist, as in AdwViewSwitcherButton's template — the icon
         // carries `image-missing` rather than disappearing.
-        const icon = createAdwIcon(null, 'adw-view-switcher-icon');
+        const icon = createGtkImage(null, 'adw-view-switcher-icon');
 
         const label = document.createElement('span');
         label.className = 'adw-view-switcher-label';

package/src/elements/{adw-checks.ts → checks.ts}

@@ -1,4 +1,4 @@
-// <adw-checkbox> and <adw-radio> — the two form-control primitives, in ONE module,
+// <gtk-check-button> and <adw-radio> — the two form-control primitives, in ONE module,
 // for the same reason `scss/_checks.scss` is one partial: upstream merges them
 // (`refs/libadwaita/src/stylesheet/widgets/_checks.scss` has no `_radio.scss` beside
 // it), and everything but the corner radius, the glyph and the group is shared.
@@ -35,7 +35,7 @@
 //   disabled      — boolean; the control does not respond and is dimmed.
 //   label         — the text beside the indicator. When absent, the element's
 //                   existing child nodes become the label (so a server-rendered
-//                   `<adw-checkbox>Enable</adw-checkbox>` upgrades intact).
+//                   `<gtk-check-button>Enable</gtk-check-button>` upgrades intact).
 // Attributes (<adw-radio> only):
 //   name          — the group. Exclusivity is scoped to it, exactly as `name`
 //                   scopes `<input type="radio">` — including the empty case:
@@ -68,7 +68,14 @@ import { RadioGroupState, resolveCheckState } from '@gjsify/adwaita-core';
  */
 const radioGroups = new RadioGroupState();
 
-/** The markup + state shared by `<adw-checkbox>` and `<adw-radio>`. */
+/**
+ * The markup + state shared by `<gtk-check-button>` and `<adw-radio>`.
+ *
+ * It keeps the `Adw` prefix while the element above it does not, and the split is the
+ * same one the stylesheet makes: this class builds `.adw-check-input`,
+ * `.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 {
     protected _input!: HTMLInputElement;
     protected _indicator!: HTMLSpanElement;
@@ -124,7 +131,7 @@ abstract class AdwCheckBase extends HTMLElement {
         this._initialized = true;
 
         // Captured BEFORE the element takes over its own children, so a server-rendered
-        // `<adw-checkbox>Enable</adw-checkbox>` keeps its text.
+        // `<gtk-check-button>Enable</gtk-check-button>` keeps its text.
         const authored = [...this.childNodes];
 
         this._input = document.createElement('input');
@@ -193,7 +200,7 @@ abstract class AdwCheckBase extends HTMLElement {
 }
 
 /** The Adwaita checkbox — `checkbutton > check` as a custom element. */
-export class AdwCheckbox extends AdwCheckBase {
+export class GtkCheckButton extends AdwCheckBase {
     static get observedAttributes() {
         return ['checked', 'indeterminate', 'disabled', 'label'];
     }
@@ -282,5 +289,5 @@ export class AdwRadio extends AdwCheckBase {
     }
 }
 
-customElements.define('adw-checkbox', AdwCheckbox);
+customElements.define('gtk-check-button', GtkCheckButton);
 customElements.define('adw-radio', AdwRadio);

package/src/elements/{adw-button.ts → gtk-button.ts}

@@ -1,4 +1,4 @@
-// <adw-button> — Adwaita button.
+// <gtk-button> — Adwaita button.
 // Attributes: icon (symbolic name, e.g. "go-previous" / "view-refresh"),
 //   label, tooltip, disabled, and the boolean variant flags
 //   flat / suggested / destructive / circular / pill.
@@ -7,16 +7,16 @@
 // Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss
 // 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 { buttonStyleClasses } from '@gjsify/adwaita-core';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 
 /** The boolean attributes that select a style class; the mapping lives in the core. */
 const STYLE_ATTRIBUTES = ['flat', 'suggested', 'destructive', 'circular', 'pill'] as const;
 
-export class AdwButton extends HTMLElement {
+export class GtkButton extends HTMLElement {
     private _button!: HTMLButtonElement;
     private _label = '';
     private _initialized = false;
@@ -57,7 +57,7 @@ export class AdwButton extends HTMLElement {
         if (icon && !label) btn.classList.add('icon-only');
 
         btn.replaceChildren();
-        if (icon) btn.appendChild(createAdwIcon(icon));
+        if (icon) btn.appendChild(createGtkImage(icon));
         if (label) btn.appendChild(document.createTextNode(label));
 
         const tooltip = this.getAttribute('tooltip');
@@ -74,4 +74,4 @@ export class AdwButton extends HTMLElement {
     }
 }
 
-customElements.define('adw-button', AdwButton);
+customElements.define('gtk-button', GtkButton);

package/src/elements/{adw-drop-down.ts → gtk-drop-down.ts}

@@ -1,4 +1,4 @@
-// <adw-drop-down> — A standalone dropdown selector: the web counterpart of
+// <gtk-drop-down> — A standalone dropdown selector: the web counterpart of
 // Gtk.DropDown. It is a flat Adwaita button showing the current selection (its
 // label + a `pan-down` chevron) that opens an Adwaita popover list of options;
 // picking one updates the selection. This is the toolbar/inline control twin of
@@ -12,7 +12,7 @@
 // Escape and supports arrow-key navigation, Home/End, Enter to pick, and
 // type-ahead (typing jumps to the next matching option).
 //
-// The popover is `<adw-popover>` and the dismissal/keyboard machine is
+// The popover is `<gtk-popover>` and the dismissal/keyboard machine is
 // `@gjsify/adwaita-core`'s (ADR 0004). So is the SELECTION: the options list, the
 // index↔value mapping, the bounds guards and the programmatic-vs-interactive split are
 // {@link ComboState}, the same state machine `<adw-combo-row>` composes — so both
@@ -47,31 +47,31 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it is
-// what guarantees `adw-popover` is defined before this module's own
-// `customElements.define` can upgrade a server-rendered `<adw-drop-down>` and
-// build one. A combined `import { AdwPopover }` would NOT do it — the binding is
+// what guarantees `gtk-popover` is defined before this module's own
+// `customElements.define` can upgrade a server-rendered `<gtk-drop-down>` and
+// 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 { ComboState, normalizeComboOptions } from '@gjsify/adwaita-core';
 import type { AdwComboOption, AdwComboOptionInput } from '@gjsify/adwaita-core';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 
 /**
  * A dropdown option — `value` is the stable id, `label` the shown text. An alias of
  * core's {@link AdwComboOption}, since the drop-down and the combo row are the same
  * selection model behind two chromes; still exported so the published name keeps working.
  */
-export type AdwDropDownOption = AdwComboOption;
+export type GtkDropDownOption = AdwComboOption;
 
-export class AdwDropDown extends HTMLElement {
+export class GtkDropDown extends HTMLElement {
     private _buttonEl!: HTMLButtonElement;
     private _labelEl!: HTMLSpanElement;
-    private _popoverEl!: AdwPopover;
+    private _popoverEl!: GtkPopover;
     private _listEl!: HTMLDivElement;
     private _searchEl: HTMLInputElement | null = null;
     private _itemButtons: HTMLButtonElement[] = [];
@@ -86,7 +86,7 @@ export class AdwDropDown extends HTMLElement {
     }
 
     /** The options list. Setting it rebuilds the popover and clamps the selection. */
-    get options(): AdwDropDownOption[] {
+    get options(): GtkDropDownOption[] {
         return this._state.options;
     }
 
@@ -97,7 +97,7 @@ export class AdwDropDown extends HTMLElement {
         if (this._initialized) this._renderAll();
     }
 
-    get items(): AdwDropDownOption[] {
+    get items(): GtkDropDownOption[] {
         return this._state.options;
     }
 
@@ -124,7 +124,7 @@ export class AdwDropDown extends HTMLElement {
         if (index >= 0) this._selectIndex(index);
     }
 
-    get selectedItem(): AdwDropDownOption | null {
+    get selectedItem(): GtkDropDownOption | null {
         return this._state.options[this._state.selectedIndex] ?? null;
     }
 
@@ -156,7 +156,7 @@ export class AdwDropDown extends HTMLElement {
         this._labelEl = document.createElement('span');
         this._labelEl.className = 'adw-drop-down-label';
 
-        this._buttonEl.append(this._labelEl, createAdwIcon('go-down', 'adw-drop-down-arrow'));
+        this._buttonEl.append(this._labelEl, createGtkImage('go-down', 'adw-drop-down-arrow'));
         this._buttonEl.addEventListener('click', () => {
             if (this.hasAttribute('disabled')) return;
             if (!this._popoverEl.open && this._state.count === 0) return;
@@ -164,7 +164,7 @@ export class AdwDropDown extends HTMLElement {
         });
         this._buttonEl.addEventListener('keydown', (event) => this._onButtonKeyDown(event));
 
-        this._popoverEl = document.createElement('adw-popover') as AdwPopover;
+        this._popoverEl = document.createElement('gtk-popover') as GtkPopover;
         this._popoverEl.classList.add('adw-drop-down-popover');
         this._popoverEl.setAttribute('role', 'listbox');
         // A dropdown's popover is a `popover.menu` too — `dropdown { popover.menu { … } }`
@@ -208,7 +208,7 @@ export class AdwDropDown extends HTMLElement {
         }
     }
 
-    private _parseOptionsAttr(): AdwDropDownOption[] {
+    private _parseOptionsAttr(): GtkDropDownOption[] {
         const raw = this.getAttribute('options') ?? this.getAttribute('items');
         if (!raw) return [];
         try {
@@ -378,4 +378,4 @@ export class AdwDropDown extends HTMLElement {
     }
 }
 
-customElements.define('adw-drop-down', AdwDropDown);
+customElements.define('gtk-drop-down', GtkDropDown);

package/src/elements/{adw-entry.ts → gtk-entry.ts}

@@ -1,4 +1,4 @@
-// <adw-entry> — Adwaita single-line text entry (e.g. a browser URL bar).
+// <gtk-entry> — Adwaita single-line text entry (e.g. a browser URL bar).
 // Attributes: value, placeholder, type, disabled, maxlength.
 // Properties: value (get/set, proxies the inner input), maxLength, textLength.
 // Events: native `input` bubbles from the inner input; `activate` (CustomEvent)
@@ -6,7 +6,7 @@
 //
 // The character arithmetic is HEADLESS and lives in `@gjsify/adwaita-core`
 // (ADR 0004): `entryTextLength` counts CODE POINTS and `clampEntryText` truncates
-// on them. `@gjsify/adwaita-nativescript`'s AdwEntry has composed the same two
+// on them. `@gjsify/adwaita-nativescript`'s GtkEntry has composed the same two
 // since it shipped; this element counted nothing at all, so the same consumer
 // got a max length on one renderer and none on the other — and the native
 // `maxlength` attribute would not have closed the gap, because the browser
@@ -21,7 +21,7 @@
 
 import { ENTRY_ROW_MAX_LENGTH_LIMIT, clampEntryText, entryTextLength } from '@gjsify/adwaita-core';
 
-export class AdwEntry extends HTMLElement {
+export class GtkEntry extends HTMLElement {
     private _input!: HTMLInputElement;
     private _initialized = false;
     private _maxLength = 0;
@@ -103,4 +103,4 @@ export class AdwEntry extends HTMLElement {
     }
 }
 
-customElements.define('adw-entry', AdwEntry);
+customElements.define('gtk-entry', GtkEntry);

package/src/elements/{adw-icon.ts → gtk-image.ts}

@@ -1,4 +1,4 @@
-// <adw-icon> — the symbolic icon node as an element. Every icon in this package is a
+// <gtk-image> — the symbolic icon node as an element. Every icon in this package is a
 // CSS-masked box whose glyph comes from a generated `.adw-icon--<name>` class and
 // whose colour is `currentColor`, so it themes with whatever contains it. The name
 // derivation and its guard live once in `@gjsify/adwaita-core`'s
@@ -46,7 +46,7 @@ export const MASK_CLASS_PREFIX = 'adw-icon--';
  */
 export const MISSING_ICON_NAME = 'image-missing';
 
-export class AdwIcon extends HTMLElement {
+export class GtkImage extends HTMLElement {
     static get observedAttributes() {
         return ['icon-name', 'size'];
     }
@@ -141,11 +141,11 @@ export class AdwIcon extends HTMLElement {
  * Build one icon node. `extraClasses` are the caller's own positioning/context
  * classes, added alongside the managed `.adw-icon` + mask class, not replacing them.
  */
-export function createAdwIcon(iconName: string | null, ...extraClasses: string[]): AdwIcon {
-    const icon = document.createElement('adw-icon') as AdwIcon;
+export function createGtkImage(iconName: string | null, ...extraClasses: string[]): GtkImage {
+    const icon = document.createElement('gtk-image') as GtkImage;
     if (iconName !== null) icon.setAttribute('icon-name', iconName);
     if (extraClasses.length > 0) icon.classList.add(...extraClasses);
     return icon;
 }
 
-customElements.define('adw-icon', AdwIcon);
+customElements.define('gtk-image', GtkImage);