@gjsify/adwaita-web 0.45.0 → 0.47.0

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

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

@@ -1,11 +1,11 @@
-// <adw-menu-button> — the web counterpart of Gtk.MenuButton, which libadwaita styles
+// <gtk-menu-button> — the web counterpart of Gtk.MenuButton, which libadwaita styles
 // but never subclassed: by default the flat `open-menu-symbolic` app-menu button used
 // at the end of a header bar. Clicking it toggles an Adwaita-styled popover under the
 // button, dismissed on an outside click or Escape, with arrow-key navigation.
 //
-// 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); this element keeps only what is a menu button:
-// the icon, the item model, the title. Icons go through `<adw-icon>`, whose
+// the icon, the item model, the title. Icons go through `<gtk-image>`, whose
 // `normalizeIconName` guard is what keeps a multi-token `icon-name="a b"` from
 // shipping a stray CSS class — for the button icon and for every menu entry's.
 //
@@ -30,19 +30,28 @@ import {
 import type { AdwMenuEntry, SplitButtonDirection } from '@gjsify/adwaita-core';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
-// `adw-popover` is defined before this module's `customElements.define` can upgrade a
-// server-rendered `<adw-menu-button>` and build one. A combined
-// `import { AdwPopover }` would NOT do it — the binding is only used in type position,
+// `gtk-popover` is defined before this module's `customElements.define` can upgrade a
+// server-rendered `<gtk-menu-button>` and build one. A combined
+// `import { GtkPopover }` 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-popover.js';
-import type { AdwPopover } from './adw-popover.js';
+import './gtk-popover.js';
+import type { GtkPopover } from './gtk-popover.js';
 
-import { createAdwIcon } from './adw-icon.js';
+import { createGtkImage } from './gtk-image.js';
 
 /**
- * A menu entry — `@gjsify/adwaita-core`'s {@link AdwMenuEntry}, re-exported under the
- * name this element has always used.
+ * A menu entry — `@gjsify/adwaita-core`'s {@link AdwMenuEntry} under the name both
+ * renderers export it as.
+ *
+ * IT KEEPS THE `Adw` PREFIX WHILE THE ELEMENT ABOVE IT DOES NOT, and the reason is not
+ * "the name it has always used" — ADR 0034 clause 1 just moved every name in this file
+ * that had one. It is that this is not a WIDGET name: clause 1 is about the tag, and
+ * this is the descriptor a consumer writes menu entries with. `@gjsify/adwaita-
+ * nativescript` exports `AdwMenuItem` for the same type, and that port deliberately
+ * keeps `Adw` throughout, so renaming this half would give one object two spellings —
+ * which is the thing the ADR is removing, not applying. (`GtkDropDownOption` next door
+ * DID move: its NativeScript twin exports no such name, so there was nothing to split.)
  *
  * It used to be a SECOND declaration of the same shape, and the NativeScript menu
  * button declared a THIRD that was missing `icon` entirely. One type, so a consumer
@@ -65,9 +74,9 @@ const POPOVER_POSITIONS = {
     right: 'end',
 } as const;
 
-export class AdwMenuButton extends HTMLElement {
+export class GtkMenuButton extends HTMLElement {
     private _buttonEl!: HTMLButtonElement;
-    private _popoverEl!: AdwPopover;
+    private _popoverEl!: GtkPopover;
     private _items: AdwMenuItem[] = [];
     private _menuTitle = '';
     private _initialized = false;
@@ -124,7 +133,7 @@ export class AdwMenuButton extends HTMLElement {
         this._buttonEl.setAttribute('aria-haspopup', 'menu');
         this._buttonEl.setAttribute('aria-expanded', 'false');
 
-        this._popoverEl = document.createElement('adw-popover') as AdwPopover;
+        this._popoverEl = document.createElement('gtk-popover') as GtkPopover;
         this._popoverEl.classList.add('adw-menu-button-popover');
         this._popoverEl.setAttribute('role', 'menu');
         // `gtk_menu_button_set_menu_model` builds a GtkPopoverMenu, whose CSS
@@ -190,7 +199,7 @@ export class AdwMenuButton extends HTMLElement {
 
         this._buttonEl.replaceChildren();
         this._buttonEl.appendChild(
-            createAdwIcon(this.getAttribute('icon-name') ?? 'open-menu', 'adw-menu-button-icon'),
+            createGtkImage(this.getAttribute('icon-name') ?? 'open-menu', 'adw-menu-button-icon'),
         );
         this._buttonEl.setAttribute('aria-label', this.getAttribute('menu-title') || 'Menu');
 
@@ -219,8 +228,8 @@ export class AdwMenuButton extends HTMLElement {
             // An entry that asked for NO icon gets no icon node — the emptiness of the
             // declared name, not whether it resolved. Testing `resolvedIconName` dropped
             // the node for a name that was given and merely undrawable, which is the one
-            // case a reader needs to SEE; `<adw-icon>` draws `image-missing` there.
-            const entryIcon = createAdwIcon(entry.icon ?? null, 'adw-menu-button-item-icon');
+            // case a reader needs to SEE; `<gtk-image>` draws `image-missing` there.
+            const entryIcon = createGtkImage(entry.icon ?? null, 'adw-menu-button-item-icon');
             if (stringIsNotEmpty(entry.icon)) item.appendChild(entryIcon);
             const labelEl = document.createElement('span');
             labelEl.className = 'adw-menu-button-item-label';
@@ -245,4 +254,4 @@ export class AdwMenuButton extends HTMLElement {
     }
 }
 
-customElements.define('adw-menu-button', AdwMenuButton);
+customElements.define('gtk-menu-button', GtkMenuButton);

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

@@ -1,6 +1,6 @@
-// <adw-popover> — the elevated surface that pops up next to an anchor, the web
+// <gtk-popover> — the elevated surface that pops up next to an anchor, the web
 // counterpart of GtkPopover as libadwaita styles it. It is the ONE popover in this
-// package: `<adw-menu-button>`, `<adw-drop-down>` and `<adw-split-button>` all use it
+// package: `<gtk-menu-button>`, `<gtk-drop-down>` and `<adw-split-button>` all use it
 // rather than building their own, which is what keeps the 15px radius, the
 // three-layer shadow, Escape dismissal and the wrap arithmetic in one place.
 //
@@ -51,22 +51,22 @@
 import { PopoverState, resolvePopoverKey } from '@gjsify/adwaita-core';
 
 /** Which side of the anchor the surface sits on. */
-export type AdwPopoverPosition = 'bottom' | 'top' | 'start' | 'end';
+export type GtkPopoverPosition = 'bottom' | 'top' | 'start' | 'end';
 
 /** Which edge of the anchor the surface lines up with. */
-export type AdwPopoverAlign = 'start' | 'end';
+export type GtkPopoverAlign = 'start' | 'end';
 
 /** The ARIA role of the surface — it decides the row role consumers give their items. */
-export type AdwPopoverRole = 'menu' | 'listbox';
+export type GtkPopoverRole = 'menu' | 'listbox';
 
-const POSITIONS: readonly AdwPopoverPosition[] = ['bottom', 'top', 'start', 'end'];
-const ALIGNS: readonly AdwPopoverAlign[] = ['start', 'end'];
-const ROLES: readonly AdwPopoverRole[] = ['menu', 'listbox'];
+const POSITIONS: readonly GtkPopoverPosition[] = ['bottom', 'top', 'start', 'end'];
+const ALIGNS: readonly GtkPopoverAlign[] = ['start', 'end'];
+const ROLES: readonly GtkPopoverRole[] = ['menu', 'listbox'];
 
 /** The row selector keyboard navigation walks. */
 const ITEM_SELECTOR = '.adw-popover-item';
 
-export class AdwPopover extends HTMLElement {
+export class GtkPopover extends HTMLElement {
     private readonly _state = new PopoverState();
     private _anchor: HTMLElement | null = null;
     private _initialized = false;
@@ -116,27 +116,27 @@ export class AdwPopover extends HTMLElement {
         this._anchor = value;
     }
 
-    get position(): AdwPopoverPosition {
+    get position(): GtkPopoverPosition {
         const value = this.getAttribute('position');
-        return POSITIONS.includes(value as AdwPopoverPosition) ? (value as AdwPopoverPosition) : 'bottom';
+        return POSITIONS.includes(value as GtkPopoverPosition) ? (value as GtkPopoverPosition) : 'bottom';
     }
 
-    set position(value: AdwPopoverPosition) {
+    set position(value: GtkPopoverPosition) {
         this.setAttribute('position', value);
     }
 
-    get align(): AdwPopoverAlign {
+    get align(): GtkPopoverAlign {
         const value = this.getAttribute('align');
-        return ALIGNS.includes(value as AdwPopoverAlign) ? (value as AdwPopoverAlign) : 'start';
+        return ALIGNS.includes(value as GtkPopoverAlign) ? (value as GtkPopoverAlign) : 'start';
     }
 
-    set align(value: AdwPopoverAlign) {
+    set align(value: GtkPopoverAlign) {
         this.setAttribute('align', value);
     }
 
-    get popoverRole(): AdwPopoverRole {
+    get popoverRole(): GtkPopoverRole {
         const value = this.getAttribute('role');
-        return ROLES.includes(value as AdwPopoverRole) ? (value as AdwPopoverRole) : 'menu';
+        return ROLES.includes(value as GtkPopoverRole) ? (value as GtkPopoverRole) : 'menu';
     }
 
     /** The navigable rows, in DOM order. Hidden rows are skipped — a filtered list navigates what it shows. */
@@ -275,4 +275,4 @@ export class AdwPopover extends HTMLElement {
     }
 }
 
-customElements.define('adw-popover', AdwPopover);
+customElements.define('gtk-popover', GtkPopover);

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

@@ -1,4 +1,4 @@
-// <adw-progress-bar> — the DETERMINATE progress indicator, and the partner to
+// <gtk-progress-bar> — the DETERMINATE progress indicator, and the partner to
 // <adw-spinner>, which only ever covers "busy, no idea how long".
 //
 // NO CORE STATE MACHINE: the whole behaviour is `CLAMP(fraction, 0, 1)` plus a pulsing
@@ -9,9 +9,9 @@
 // `gtk_progress_bar_pulse()`'s step semantics (the `pulse-step` default, how the block
 // reflects at the ends, whether it resets `fraction`) are NOT reproduced: GtkProgressBar
 // is a GTK widget, `refs/gtk` is an uninitialized submodule here and libadwaita vendors
-// no `adw-progress-bar.c`, so none of it is verifiable. What ships instead is the
+// no `gtk-progress-bar.c`, so none of it is verifiable. What ships instead is the
 // vendored port's web idiom — a CSS keyframe animation that runs while `pulsing` is set
-// — so {@link AdwProgressBar.pulse} ENTERS that state and is idempotent afterwards. The
+// — so {@link GtkProgressBar.pulse} ENTERS that state and is idempotent afterwards. The
 // default `show-text` label `NN%` is likewise this port's, not GTK's format string.
 //
 // `osd` is libadwaita's `.osd` STYLE CLASS: a 2px troughless bar for under a header bar.
@@ -29,7 +29,7 @@
 
 import { glibClamp } from '@gjsify/adwaita-core';
 
-export class AdwProgressBar extends HTMLElement {
+export class GtkProgressBar extends HTMLElement {
     private _trough!: HTMLSpanElement;
     private _progress!: HTMLSpanElement;
     private _text!: HTMLSpanElement;
@@ -166,4 +166,4 @@ export class AdwProgressBar extends HTMLElement {
     }
 }
 
-customElements.define('adw-progress-bar', AdwProgressBar);
+customElements.define('gtk-progress-bar', GtkProgressBar);

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

@@ -1,4 +1,4 @@
-// <adw-switch> — the Adwaita toggle, as an element. A 44×24 track with a hidden
+// <gtk-switch> — the Adwaita toggle, as an element. A 44×24 track with a hidden
 // checkbox behind it and a knob that slides on `active`.
 //
 // The styles are the UNSCOPED `scss/_switch.scss`, so `.adw-switch` exists outside a
@@ -29,7 +29,7 @@
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-export class AdwSwitch extends HTMLElement {
+export class GtkSwitch extends HTMLElement {
     private _input!: HTMLInputElement;
     private _slider!: HTMLSpanElement;
     private _initialized = false;
@@ -44,7 +44,7 @@ export class AdwSwitch extends HTMLElement {
      * `adw_switch_row_init` does `gtk_widget_set_can_focus (self->slider, FALSE)`
      * (adw-switch-row.c:159) and makes the ROW activatable instead, so a switch row is ONE
      * tab stop announced as its own title — not a bare checkbox followed by a label that
-     * cannot be reached. A standalone `<adw-switch>` keeps its checkbox focusable.
+     * cannot be reached. A standalone `<gtk-switch>` keeps its checkbox focusable.
      */
     get unfocusable(): boolean {
         return this.hasAttribute('unfocusable');
@@ -125,4 +125,4 @@ export class AdwSwitch extends HTMLElement {
     }
 }
 
-customElements.define('adw-switch', AdwSwitch);
+customElements.define('gtk-switch', GtkSwitch);

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

@@ -20,7 +20,7 @@
 import { viewSwitcherIconName } from '@gjsify/adwaita-core';
 import type { AdwViewSwitcherPageInit, ViewSwitcherScheduler, ViewSwitcherTimerHandle } from '@gjsify/adwaita-core';
 
-import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 /**
  * The browser's timer behind the core's scheduler seam. One shared instance rather than
@@ -41,16 +41,16 @@ export const domViewSwitcherScheduler: ViewSwitcherScheduler = {
  *
  * The core resolves NULL/empty to `image-missing` (which the stylesheet carries
  * a real glyph for); the `-symbolic` strip and the CSS-token guard are
- * `normalizeIconName`'s, applied by `<adw-icon>` — that strip is this package's
+ * `normalizeIconName`'s, applied by `<gtk-image>` — that strip is this package's
  * own mask-class convention and has no counterpart in C, where the name reaches
  * `GtkImage` untouched.
  */
-export function createSwitcherIcon(iconName: string, extra: string): AdwIcon {
-    return createAdwIcon(viewSwitcherIconName(iconName), extra);
+export function createSwitcherIcon(iconName: string, extra: string): GtkImage {
+    return createGtkImage(viewSwitcherIconName(iconName), extra);
 }
 
 /** Repaint an existing switcher icon from a page's declared name. */
-export function applySwitcherIcon(icon: AdwIcon, iconName: string): void {
+export function applySwitcherIcon(icon: GtkImage, iconName: string): void {
     icon.iconName = viewSwitcherIconName(iconName);
 }
 

package/src/exported-elements.ts

@@ -0,0 +1,50 @@
+// Every custom-element constructor this package's barrel exports, however it exports it.
+//
+// THE INCIDENT THIS EXISTS TO PREVENT, in the shape it was caught. Two browser drivers
+// derive their element set from the package rather than from a list — `Object.values` of
+// the module namespace, kept to the functions whose prototype is an `HTMLElement`. That
+// read the widget classes because the barrel re-exported every one of them flat. ADR 0034
+// § Amendment 6 removed those re-exports: the same scan would have gone on passing while
+// its subject shrank to the handful of web-only classes that keep a flat name. Measured
+// on chromium: the narrow scan drops 187 of the package's 4633 browser assertions, and
+// the only thing that noticed was `connect-lifecycle.spec.ts`'s `tags.length > 40`
+// floor. A floor catches the collapse; it does not catch a scan that is merely narrower
+// than it reads, and the next removal will be smaller.
+//
+// So the walk goes ONE LEVEL into the exported objects, which is where `Adw` and `Gtk`
+// put their members. `typeof` is what picks them out and it does not care that they are
+// MODULE namespaces rather than plain objects (`export * as Adw from
+// ./namespace/adw.js`) — a module namespace answers `object` and enumerates under
+// `Object.values` like any other. One level and not a recursion: both barrels are flat
+// by construction, and a deep walk would start reporting whatever a future export
+// happens to hang off itself.
+//
+// It is a module rather than a copy in each spec because the second copy is where a
+// helper gets lifted, and this was already the second copy.
+
+/** A constructor the `CustomElementRegistry` could hold — the filter both drivers used. */
+function isElementClass(value: unknown): value is CustomElementConstructor {
+    return typeof value === 'function' && value.prototype instanceof HTMLElement;
+}
+
+/**
+ * The element classes reachable from `barrel`, de-duplicated.
+ *
+ * De-duplicated because a class can arrive twice: `Adw.CheckBox`-style aliasing is not
+ * used today, but a widget that is both a namespace member and a flat web-only export
+ * would otherwise be driven twice and counted twice in the floors below the callers.
+ *
+ * @param barrel the module namespace of `index.ts` (`import * as adwaitaWeb`)
+ */
+export function exportedElementClasses(barrel: Record<string, unknown>): CustomElementConstructor[] {
+    const found = new Set<CustomElementConstructor>();
+    for (const exported of Object.values(barrel)) {
+        if (isElementClass(exported)) {
+            found.add(exported);
+            continue;
+        }
+        if (typeof exported !== 'object' || exported === null) continue;
+        for (const member of Object.values(exported)) if (isElementClass(member)) found.add(member);
+    }
+    return [...found];
+}