@gjsify/adwaita-web 0.44.0 → 0.46.0

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

@@ -1,17 +1,17 @@
-// DOM-level tests for <adw-icon>, driven by the SAME `normalizeIconName` vectors the
+// DOM-level tests for <gtk-image>, driven by the SAME `normalizeIconName` vectors the
 // core suite asserts against (`@gjsify/adwaita-core/conformance`).
 //
 // The icon-name class must never be built by hand: a name is only usable once it is
 // known to be a SINGLE CSS token, and hand-built spans skipped that check, so
 // `icon-name="a b"` interpolated a stray second class and shipped it through
-// `<adw-menu-button>` for its own icon and for every JSON menu entry's. The vectors run
+// `<gtk-menu-button>` for its own icon and for every JSON menu entry's. The vectors run
 // against the ELEMENT, so hand-building the class again fails naming the input.
 import { describe, expect, it } from '@gjsify/unit';
 
 import { VIEW_STACK_ICON_NAME_VECTORS } from '@gjsify/adwaita-core/conformance';
 
-import type { AdwIcon } from './elements/adw-icon.js';
-import type { AdwMenuButton } from './elements/adw-menu-button.js';
+import type { GtkImage } from './elements/gtk-image.js';
+import type { GtkMenuButton } from './elements/gtk-menu-button.js';
 
 function mount<T extends HTMLElement>(tag: string): { el: T; host: HTMLElement } {
     const host = document.createElement('div');
@@ -26,11 +26,11 @@ function extraClasses(el: HTMLElement): string[] {
     return [...el.classList].filter((c) => c !== 'adw-icon').sort();
 }
 
-export const AdwIconTest = async () => {
-    await describe('<adw-icon> mask class (normalizeIconName vectors)', async () => {
+export const GtkImageTest = async () => {
+    await describe('<gtk-image> mask class (normalizeIconName vectors)', async () => {
         for (const { icon, normalized, rule } of VIEW_STACK_ICON_NAME_VECTORS) {
             await it(`${JSON.stringify(icon)} → ${JSON.stringify(normalized)} — ${rule}`, () => {
-                const { el, host } = mount<AdwIcon>('adw-icon');
+                const { el, host } = mount<GtkImage>('gtk-image');
                 el.iconName = icon ?? null;
 
                 expect(el.resolvedIconName).toBe(normalized);
@@ -51,15 +51,15 @@ export const AdwIconTest = async () => {
         }
     });
 
-    await describe('<adw-icon> node contract', async () => {
+    await describe('<gtk-image> node contract', async () => {
         await it('is decorative — the accessible name belongs to the host control', () => {
-            const { el, host } = mount<AdwIcon>('adw-icon');
+            const { el, host } = mount<GtkImage>('gtk-image');
             expect(el.getAttribute('aria-hidden')).toBe('true');
             host.remove();
         });
 
         await it('swaps ONLY the mask class, keeping the caller position classes', () => {
-            const { el, host } = mount<AdwIcon>('adw-icon');
+            const { el, host } = mount<GtkImage>('gtk-image');
             el.classList.add('adw-drop-down-arrow', 'start');
             el.iconName = 'go-down';
             expect(extraClasses(el)).toStrictEqual(['adw-drop-down-arrow', 'adw-icon--go-down', 'start']);
@@ -75,7 +75,7 @@ export const AdwIconTest = async () => {
         });
 
         await it('sizes the box AND the mask together', () => {
-            const { el, host } = mount<AdwIcon>('adw-icon');
+            const { el, host } = mount<GtkImage>('gtk-image');
             el.iconName = 'go-next';
             // Unset: the stylesheet's 16px.
             expect(el.size).toBe(null);
@@ -97,13 +97,13 @@ export const AdwIconTest = async () => {
         });
 
         await it('paints in the INHERITED colour, not the boundary reset colour', () => {
-            // `.adw-icon` masks with `currentColor` and <adw-icon> is a custom element, so
+            // `.adw-icon` masks with `currentColor` and <gtk-image> is a custom element, so
             // the ADR-0010 `$adw-components` reset re-roots `color` on it: without
             // `color: inherit` in `_icon.scss` every icon repaints in `--window-fg-color`
             // regardless of the button it sits in.
             const { el: box, host } = mount<HTMLElement>('div');
             box.style.color = 'rgb(255, 0, 0)';
-            const icon = document.createElement('adw-icon') as AdwIcon;
+            const icon = document.createElement('gtk-image') as GtkImage;
             icon.iconName = 'go-next';
             box.appendChild(icon);
             expect(getComputedStyle(icon).backgroundColor).toBe('rgb(255, 0, 0)');
@@ -112,8 +112,8 @@ export const AdwIconTest = async () => {
     });
 
     await describe('the hand-rolled copies are gone', async () => {
-        await it('<adw-menu-button> no longer injects a stray class from its icon-name', () => {
-            const { el, host } = mount<AdwMenuButton>('adw-menu-button');
+        await it('<gtk-menu-button> no longer injects a stray class from its icon-name', () => {
+            const { el, host } = mount<GtkMenuButton>('gtk-menu-button');
             el.setAttribute('icon-name', 'a b');
             const icon = el.querySelector('.adw-icon') as HTMLElement;
             // `adw-icon--a b` would have added a second, unrelated `b` class. What it gets
@@ -122,8 +122,8 @@ export const AdwIconTest = async () => {
             host.remove();
         });
 
-        await it('<adw-menu-button> menu entries guard their icons too', () => {
-            const { el, host } = mount<AdwMenuButton>('adw-menu-button');
+        await it('<gtk-menu-button> menu entries guard their icons too', () => {
+            const { el, host } = mount<GtkMenuButton>('gtk-menu-button');
             el.menuItems = [
                 { label: 'Bad', icon: 'a b' },
                 { label: 'Good', icon: 'view-refresh-symbolic' },
@@ -142,17 +142,17 @@ export const AdwIconTest = async () => {
             host.remove();
         });
 
-        await it('every icon in the package is an <adw-icon>', () => {
+        await it('every icon in the package is a <gtk-image>', () => {
             // Asserted structurally: a page of every icon-drawing widget, and no bare span
             // carrying the base class — so a new hand-rolled `<span class="adw-icon …">`
             // fails here even when it guards its own name correctly.
             const { el: page, host } = mount<HTMLElement>('div');
             page.innerHTML = `
-                <adw-button icon="go-next" label="Next"></adw-button>
+                <gtk-button icon="go-next" label="Next"></gtk-button>
                 <adw-button-row title="Row" start-icon-name="list-add" end-icon-name="go-next"></adw-button-row>
                 <adw-status-page icon="folder" title="Empty"></adw-status-page>
                 <adw-split-button label="Save" menu='[{"label":"Save As"}]'></adw-split-button>
-                <adw-drop-down options='["a","b"]'></adw-drop-down>
+                <gtk-drop-down options='["a","b"]'></gtk-drop-down>
                 <adw-expander-row title="More" show-enable-switch></adw-expander-row>
                 <adw-avatar text="Ada" icon="avatar-default"></adw-avatar>
                 <adw-toggle-group><adw-toggle icon-name="view-list"></adw-toggle></adw-toggle-group>
@@ -160,7 +160,7 @@ export const AdwIconTest = async () => {
             const bareSpans = [...host.querySelectorAll('span.adw-icon')];
             expect(bareSpans.length).toBe(0);
             // …and the icons really are there, so the check is not vacuous.
-            expect(host.querySelectorAll('adw-icon.adw-icon').length > 5).toBe(true);
+            expect(host.querySelectorAll('gtk-image.adw-icon').length > 5).toBe(true);
             host.remove();
         });
     });

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

@@ -1,4 +1,4 @@
-// DOM-level tests for <adw-menu-button>'s `menu` attribute.
+// DOM-level tests for <gtk-menu-button>'s `menu` attribute.
 //
 // The element parsed the JSON itself, and the copy was weaker than the core parser
 // the split button next to it already used: it kept `id` and `icon` whatever their
@@ -11,7 +11,7 @@ import { SPLIT_BUTTON_MENU_PARSE_VECTORS } from '@gjsify/adwaita-core/conformanc
 
 /** Mount a menu button carrying `menu` as JSON, and return its rendered item labels. */
 function mountWithMenu(json: string): { el: HTMLElement; labels: string[] } {
-    const el = document.createElement('adw-menu-button');
+    const el = document.createElement('gtk-menu-button');
     el.setAttribute('menu', json);
     document.body.appendChild(el);
     const labels = Array.from(el.querySelectorAll('.adw-popover button')).map((b) => b.textContent?.trim() ?? '');
@@ -19,11 +19,11 @@ function mountWithMenu(json: string): { el: HTMLElement; labels: string[] } {
 }
 
 function unmountAll(): void {
-    for (const el of Array.from(document.querySelectorAll('adw-menu-button'))) el.remove();
+    for (const el of Array.from(document.querySelectorAll('gtk-menu-button'))) el.remove();
 }
 
-export const AdwMenuButtonTest = async () => {
-    await describe('<adw-menu-button> menu attribute', async () => {
+export const GtkMenuButtonTest = async () => {
+    await describe('<gtk-menu-button> menu attribute', async () => {
         for (const { json, entries, rule } of SPLIT_BUTTON_MENU_PARSE_VECTORS) {
             await it(`${rule}`, () => {
                 const { labels } = mountWithMenu(json ?? '');
@@ -33,7 +33,7 @@ export const AdwMenuButtonTest = async () => {
         }
 
         await it('drops a non-string id instead of leaking a number into the event', () => {
-            const el = document.createElement('adw-menu-button');
+            const el = document.createElement('gtk-menu-button');
             el.setAttribute('menu', '[{"label":"Open","id":7}]');
             document.body.appendChild(el);
 

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

@@ -1,4 +1,4 @@
-// DOM-level tests for <adw-progress-bar>.
+// DOM-level tests for <gtk-progress-bar>.
 //
 // Three things matter more than the attribute round-trips: the CLAMP is GLib's
 // (`glibClamp` from `@gjsify/adwaita-core`, not a local `Math.min/max`); a ZERO fraction
@@ -9,18 +9,18 @@
 
 import { describe, expect, it } from '@gjsify/unit';
 
-import type { AdwProgressBar } from './elements/adw-progress-bar.js';
+import type { GtkProgressBar } from './elements/gtk-progress-bar.js';
 
-function mount(): { el: AdwProgressBar; host: HTMLElement } {
+function mount(): { el: GtkProgressBar; host: HTMLElement } {
     const host = document.createElement('div');
     document.body.appendChild(host);
-    const el = document.createElement('adw-progress-bar') as AdwProgressBar;
+    const el = document.createElement('gtk-progress-bar') as GtkProgressBar;
     host.appendChild(el);
     return { el, host };
 }
 
 /** The parts, by the markup contract the stylesheet selects on. */
-function parts(bar: AdwProgressBar): { trough: HTMLElement; progress: HTMLElement; text: HTMLElement } {
+function parts(bar: GtkProgressBar): { trough: HTMLElement; progress: HTMLElement; text: HTMLElement } {
     return {
         trough: bar.querySelector('.adw-progress-bar-trough') as HTMLElement,
         progress: bar.querySelector('.adw-progress-bar-progress') as HTMLElement,
@@ -28,8 +28,8 @@ function parts(bar: AdwProgressBar): { trough: HTMLElement; progress: HTMLElemen
     };
 }
 
-export const AdwProgressBarTest = async () => {
-    await describe('<adw-progress-bar> fraction', async () => {
+export const GtkProgressBarTest = async () => {
+    await describe('<gtk-progress-bar> fraction', async () => {
         await it('starts empty, with the trough flagged so the indicator disappears', () => {
             const { el, host } = mount();
             const { trough, progress } = parts(el);
@@ -68,7 +68,7 @@ export const AdwProgressBarTest = async () => {
         });
     });
 
-    await describe('<adw-progress-bar> indeterminate', async () => {
+    await describe('<gtk-progress-bar> indeterminate', async () => {
         await it('pulse() enters the pulsing state and drops aria-valuenow', () => {
             const { el, host } = mount();
             el.fraction = 0.4;
@@ -98,7 +98,7 @@ export const AdwProgressBarTest = async () => {
         });
     });
 
-    await describe('<adw-progress-bar> text', async () => {
+    await describe('<gtk-progress-bar> text', async () => {
         await it('hides the text node until show-text, then shows the percentage', () => {
             const { el, host } = mount();
             expect(parts(el).text.hidden).toBe(true);
@@ -134,7 +134,7 @@ export const AdwProgressBarTest = async () => {
         });
     });
 
-    await describe('<adw-progress-bar> variants', async () => {
+    await describe('<gtk-progress-bar> variants', async () => {
         await it('is an 8px trough by default and a 2px hairline with osd', () => {
             // The 8px is libadwaita's (_progress-bar.scss) and the 2px is its
             // `.osd` variant — NOT the vendored web port's 6px, which
@@ -148,8 +148,8 @@ export const AdwProgressBarTest = async () => {
             // transition to be part-way through.
             const host = document.createElement('div');
             document.body.appendChild(host);
-            const plain = document.createElement('adw-progress-bar') as AdwProgressBar;
-            const osd = document.createElement('adw-progress-bar') as AdwProgressBar;
+            const plain = document.createElement('gtk-progress-bar') as GtkProgressBar;
+            const osd = document.createElement('gtk-progress-bar') as GtkProgressBar;
             osd.setAttribute('osd', '');
             host.append(plain, osd);
 

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

@@ -1,4 +1,4 @@
-// DOM-level tests for <adw-switch>, plus the proof that both <adw-switch-row> and
+// DOM-level tests for <gtk-switch>, plus the proof that both <adw-switch-row> and
 // <adw-expander-row> still work now that the switch is lifted out of them. Two
 // invariants:
 //
@@ -12,7 +12,7 @@
 import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwExpanderRow } from './elements/adw-expander-row.js';
-import type { AdwSwitch } from './elements/adw-switch.js';
+import type { GtkSwitch } from './elements/gtk-switch.js';
 import type { AdwSwitchRow } from './elements/adw-switch-row.js';
 
 function mount<T extends HTMLElement>(tag: string): { el: T; host: HTMLElement } {
@@ -31,7 +31,7 @@ function record(el: HTMLElement, event: string): unknown[] {
 }
 
 /** The switch's own parts, by the markup contract the stylesheet selects on. */
-function parts(sw: AdwSwitch): { input: HTMLInputElement; slider: HTMLElement } {
+function parts(sw: GtkSwitch): { input: HTMLInputElement; slider: HTMLElement } {
     return {
         input: sw.querySelector('input[type="checkbox"]') as HTMLInputElement,
         slider: sw.querySelector('.adw-switch-slider') as HTMLElement,
@@ -45,10 +45,10 @@ function measure(sw: HTMLElement): { width: string; height: string; radius: stri
     return { width: box.width, height: box.height, radius: slider.borderTopLeftRadius };
 }
 
-export const AdwSwitchTest = async () => {
-    await describe('<adw-switch> state', async () => {
+export const GtkSwitchTest = async () => {
+    await describe('<gtk-switch> state', async () => {
         await it('starts off and builds the input + slider markup', () => {
-            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { el, host } = mount<GtkSwitch>('gtk-switch');
             const { input, slider } = parts(el);
             expect(el.active).toBe(false);
             expect(input).toBeTruthy();
@@ -63,7 +63,7 @@ export const AdwSwitchTest = async () => {
         await it('adopts a declarative active attribute without emitting', () => {
             const host = document.createElement('div');
             document.body.appendChild(host);
-            const el = document.createElement('adw-switch') as AdwSwitch;
+            const el = document.createElement('gtk-switch') as GtkSwitch;
             el.setAttribute('active', '');
             const events = record(el, 'notify::active');
             host.appendChild(el);
@@ -74,7 +74,7 @@ export const AdwSwitchTest = async () => {
         });
 
         await it('a programmatic set notifies, and re-setting the same value does not', () => {
-            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { el, host } = mount<GtkSwitch>('gtk-switch');
             const events = record(el, 'notify::active');
             el.active = true;
             expect(events).toStrictEqual([{ active: true }]);
@@ -87,7 +87,7 @@ export const AdwSwitchTest = async () => {
         });
 
         await it('a click on the track toggles exactly once', () => {
-            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { el, host } = mount<GtkSwitch>('gtk-switch');
             const events = record(el, 'notify::active');
             parts(el).slider.click();
             expect(el.active).toBe(true);
@@ -100,7 +100,7 @@ export const AdwSwitchTest = async () => {
             // The checkbox is 0×0, so a pointer never reaches it — but keyboard
             // activation and `input.click()` do, and the track listener must not
             // toggle a second time on the way out.
-            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { el, host } = mount<GtkSwitch>('gtk-switch');
             const events = record(el, 'notify::active');
             parts(el).input.click();
             expect(el.active).toBe(true);
@@ -109,7 +109,7 @@ export const AdwSwitchTest = async () => {
         });
 
         await it('a disabled switch does not toggle', () => {
-            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { el, host } = mount<GtkSwitch>('gtk-switch');
             el.disabled = true;
             const events = record(el, 'notify::active');
             parts(el).slider.click();
@@ -125,11 +125,11 @@ export const AdwSwitchTest = async () => {
         });
     });
 
-    await describe('<adw-switch-row> still toggles and emits through <adw-switch>', async () => {
+    await describe('<adw-switch-row> still toggles and emits through <gtk-switch>', async () => {
         await it('a programmatic row.active drives the switch and emits once', () => {
             const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
             const events = record(row, 'notify::active');
-            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            const sw = row.querySelector('gtk-switch') as GtkSwitch;
             expect(sw).toBeTruthy();
 
             row.active = true;
@@ -148,7 +148,7 @@ export const AdwSwitchTest = async () => {
             const events = record(row, 'notify::active');
             row.click();
             expect(row.active).toBe(true);
-            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(true);
+            expect((row.querySelector('gtk-switch') as GtkSwitch).active).toBe(true);
             expect(events.length).toBe(1);
             host.remove();
         });
@@ -156,7 +156,7 @@ export const AdwSwitchTest = async () => {
         await it('a click on the switch toggles the row once, not twice', () => {
             const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
             const events = record(row, 'notify::active');
-            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            const sw = row.querySelector('gtk-switch') as GtkSwitch;
             parts(sw).slider.click();
             expect(row.active).toBe(true);
             expect(events.length).toBe(1);
@@ -169,7 +169,7 @@ export const AdwSwitchTest = async () => {
             const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
             row.setAttribute('show-enable-switch', '');
             const events = record(row, 'notify::enable-expansion');
-            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            const sw = row.querySelector('gtk-switch') as GtkSwitch;
             expect(sw.active).toBe(true); // enable-expansion defaults to true
 
             parts(sw).slider.click();
@@ -191,7 +191,7 @@ export const AdwSwitchTest = async () => {
 
             row.enableExpansion = false;
 
-            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(false);
+            expect((row.querySelector('gtk-switch') as GtkSwitch).active).toBe(false);
             expect(enableEvents.length).toBe(0);
             // The switch's own notify never escapes the row either.
             expect(activeEvents.length).toBe(0);
@@ -201,7 +201,7 @@ export const AdwSwitchTest = async () => {
         await it('a click on the enable switch does not disclose the row', () => {
             const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
             row.setAttribute('show-enable-switch', '');
-            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            const sw = row.querySelector('gtk-switch') as GtkSwitch;
 
             parts(sw).slider.click();
             expect(row.expanded).toBe(false);
@@ -218,8 +218,8 @@ export const AdwSwitchTest = async () => {
             const { el: expander, host: expanderHost } = mount<AdwExpanderRow>('adw-expander-row');
             expander.setAttribute('show-enable-switch', '');
 
-            const rowBox = measure(row.querySelector('adw-switch') as HTMLElement);
-            const expanderBox = measure(expander.querySelector('adw-switch') as HTMLElement);
+            const rowBox = measure(row.querySelector('gtk-switch') as HTMLElement);
+            const expanderBox = measure(expander.querySelector('gtk-switch') as HTMLElement);
 
             expect(rowBox).toStrictEqual(expanderBox);
             // Pin the actual numbers too, so "both unstyled" cannot pass as

package/src/icon-registry.spec.ts

@@ -1,4 +1,4 @@
-// What an icon actually DRAWS — the assertion `adw-icon.spec.ts` did not make.
+// What an icon actually DRAWS — the assertion `gtk-image.spec.ts` did not make.
 //
 // THE INCIDENT. `_icon.scss` set `background-color: currentColor` plus mask sizing and no
 // `mask-image`, so a name outside the compiled `.adw-icon--<name>` set painted a solid 16px
@@ -15,7 +15,7 @@
 import { describe, expect, it } from '@gjsify/unit';
 
 import { isIconAvailable, registerIcon } from './icon-registry.js';
-import type { AdwIcon } from './elements/adw-icon.js';
+import type { GtkImage } from './elements/gtk-image.js';
 
 /** A name no compiled entry can collide with, for the "not shipped" arm. */
 const ABSENT = 'gjsify-registry-probe';
@@ -25,10 +25,10 @@ const PROBE_SVG = `<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="ht
     <path d="m 4 4 h 8 v 8 h -8 z m 0 0" fill="currentColor"/>
 </svg>`;
 
-function mount(iconName: string | null): { el: AdwIcon; host: HTMLElement } {
+function mount(iconName: string | null): { el: GtkImage; host: HTMLElement } {
     const host = document.createElement('div');
     document.body.appendChild(host);
-    const el = document.createElement('adw-icon') as AdwIcon;
+    const el = document.createElement('gtk-image') as GtkImage;
     if (iconName !== null) el.iconName = iconName;
     host.appendChild(el);
     return { el, host };
@@ -56,7 +56,7 @@ export function fallbackMask(): string {
 }
 
 export const AdwIconRegistryTest = async () => {
-    await describe('<adw-icon> resolves a name to a real mask', async () => {
+    await describe('<gtk-image> resolves a name to a real mask', async () => {
         await it('a compiled name draws its OWN glyph, not the fallback', () => {
             const { el, host } = mount('go-next');
             const mask = maskOf(el);
@@ -111,7 +111,7 @@ export const AdwIconRegistryTest = async () => {
 
     await describe('a name carried by STATE still resolves', async () => {
         await it("the password row's peek toggle draws both of its glyphs", () => {
-            // These two reach `<adw-icon>.iconName` as `state.peekIconName`, a property of
+            // These two reach `<gtk-image>.iconName` as `state.peekIconName`, a property of
             // the core's `PasswordEntryRowState`, so no literal spells them at the point of
             // use. `check-adwaita-icon-masks.mjs` reads their DECLARATIONS
             // (`PASSWORD_REVEAL_ICON_NAME`), which proves the map entry exists — never that

package/src/icon-registry.ts

@@ -10,16 +10,16 @@
 // That is this module. `registerIcon` writes the SAME pair the generator writes — the
 // custom property on the document element, the mask class into a stylesheet this module
 // owns — so a registered icon is indistinguishable from a compiled one at every later
-// point: `<adw-icon icon-name="…">`, a hand-written `class="adw-icon adw-icon--…"`, a
+// point: `<gtk-image icon-name="…">`, a hand-written `class="adw-icon adw-icon--…"`, a
 // widget attribute, `var(--icon-…)` in the consumer's own CSS.
 //
 //   import { registerIcon } from '@gjsify/adwaita-web';
 //   import { dialogErrorSymbolic } from '@gjsify/adwaita-icons/status';
 //
 //   registerIcon('dialog-error-symbolic', dialogErrorSymbolic);
-//   // …then anywhere: <adw-icon icon-name="dialog-error-symbolic"></adw-icon>
+//   // …then anywhere: <gtk-image icon-name="dialog-error-symbolic"></gtk-image>
 //
-// Register BEFORE the icon is mounted where you can. An `<adw-icon>` already in the
+// Register BEFORE the icon is mounted where you can. A `<gtk-image>` already in the
 // document draws the `image-missing` fallback (see `_icon.scss`) until the registration
 // lands; the CSS is live, so it corrects itself on the next style recalculation with no
 // re-render, but there is a visible frame in between.
@@ -30,7 +30,7 @@
 import { normalizeIconName } from '@gjsify/adwaita-core';
 import { toDataUri } from '@gjsify/adwaita-icons/utils';
 
-import { MASK_CLASS_PREFIX } from './elements/adw-icon.js';
+import { MASK_CLASS_PREFIX } from './elements/gtk-image.js';
 
 /** Marks the one `<style>` element this module owns, so a reload reuses it. */
 const REGISTRY_STYLE_ID = 'adwaita-web-icon-registry';
@@ -96,8 +96,8 @@ function svgRootOf(source: string): Element {
  * BOTH arguments are checked and a wrong one THROWS rather than registering nothing: unlike
  * a render, this is an explicit call with a wrong argument, and silently doing nothing is
  * the failure mode this whole area exists to end. The name is normalized exactly as
- * `<adw-icon icon-name>` normalizes it — a single `-symbolic` suffix comes off, and the rest
- * must be one CSS token; the SVG has to parse to an `<svg>` root. `<adw-icon>` draws
+ * `<gtk-image icon-name>` normalizes it — a single `-symbolic` suffix comes off, and the rest
+ * must be one CSS token; the SVG has to parse to an `<svg>` root. `<gtk-image>` draws
  * `image-missing` for the same unusable name instead — there it came from markup, and
  * taking the page down over a typo is not proportionate.
  *

package/src/index.ts

@@ -63,8 +63,42 @@ export type { AdwUndershootEdges } from './scroll-shading.js';
 // `icon-registry.ts` for the full recipe.
 export { isIconAvailable, registerIcon } from './icon-registry.js';
 
-export { AdwAvatar } from './elements/adw-avatar.js';
-export { AdwBanner } from './elements/adw-banner.js';
+// THE WIDGET CLASSES ARE REACHABLE ONLY AS `Adw.<Name>` / `Gtk.<Name>` (ADR 0034
+// clause 2 + § Amendment 6). The namespace used to be the LAST line in the file, under a
+// run of `export { AdwActionRow } …` re-exports it duplicated one for one; those are
+// gone, and with them the second spelling. `<adw-action-row>` and `<gtk-entry>` are
+// unchanged — this was never about the tags.
+//
+// IT IS ALSO WHAT PULLS THE ELEMENT MODULES IN, so importing this barrel still
+// registers everything. The old order comment ("exported before the widgets that build
+// them") described a sequence that is not load-bearing and never was: every host
+// imports its prerequisite itself (`import './gtk-switch.js'` in the switch rows,
+// `createGtkImage` from `./gtk-image.js` in every widget that draws an icon), so the
+// module graph fixes the order whatever a barrel does. The order that IS load-bearing
+// is the one inside a single module, and `scripts/check-adwaita-upgrade-order.mjs`
+// holds that.
+//
+// `export * as`, NOT an object literal, and that is a bundler constraint rather than a
+// preference: a module namespace carries the TYPE meaning of every name in it, so
+// `as Adw.HeaderBar` works with no second list of instance types — and the merge that
+// would have produced those types (`export const Adw` beside `export namespace Adw`) is
+// a PARSE_ERROR in rolldown's oxc parser even though `tsc` accepts it. The reasoning is
+// in `namespace/adw.ts`.
+export * as Adw from './namespace/adw.js';
+export * as Gtk from './namespace/gtk.js';
+
+// WHAT DID NOT MOVE INTO THE NAMESPACE, and the rule that decides it. A member exists
+// for an element whose GIR tag names a real widget; `WEB_ELEMENT_ALIGNMENT` declares the
+// rest `webOnly`, meaning no widget in the reference vocabulary stands behind it, so
+// there is no GIR name to export it under and inventing one would be held against
+// nothing but prose (ADR 0034 § 5). Those classes therefore keep their flat name, and
+// that is not a second spelling: it is their only one.
+//
+// Everything else below is not a widget class at all — a factory, a helper, or a type —
+// and a type has no namespace member to move to.
+
+// Two elements with no GTK counterpart: `.adw-card` is a style class here and a styled
+// container on GTK, and the grid is presentational where GTK would use a plain Gtk.Grid.
 export { AdwCard } from './elements/adw-card.js';
 export { AdwDataGrid } from './elements/adw-data-grid.js';
 export type {
@@ -73,66 +107,33 @@ export type {
     AdwDataGridRow,
     AdwDataGridRowVariant,
 } from './elements/adw-data-grid.js';
-export { AdwClamp } from './elements/adw-clamp.js';
-export { AdwSpinner } from './elements/adw-spinner.js';
-export { AdwStatusPage } from './elements/adw-status-page.js';
-export { AdwWindow } from './elements/adw-window.js';
-export { AdwHeaderBar } from './elements/adw-header-bar.js';
-export { AdwWindowTitle } from './elements/adw-window-title.js';
-export { AdwButton } from './elements/adw-button.js';
-export { AdwButtonContent } from './elements/adw-button-content.js';
-// The ONE symbolic-icon node and the ONE toggle, exported before the widgets that build
-// them so the barrel's definition order matches theirs. Each host ALSO imports them
-// directly, which is what actually guarantees the tags are defined before a
-// server-rendered host upgrades.
-export { AdwIcon, createAdwIcon } from './elements/adw-icon.js';
-export { AdwSwitch } from './elements/adw-switch.js';
-// The two form-control primitives. ONE module, because upstream merges their
-// stylesheet (`_checks.scss`; there is no `_radio.scss` in libadwaita) and
-// everything but the corner radius, the glyph and the group is shared.
-export { AdwCheckbox, AdwRadio } from './elements/adw-checks.js';
-// The determinate progress indicator — <adw-spinner> covers only the indeterminate case.
-export { AdwProgressBar } from './elements/adw-progress-bar.js';
-// A keyboard shortcut, drawn as keycaps. The accelerator GRAMMAR lives in
-// @gjsify/adwaita-core; this element only builds the nodes.
-export { AdwShortcutLabel } from './elements/adw-shortcut-label.js';
-// The ONE popover surface, exported before its three hosts for the same reason as
-// <adw-icon> above.
-export { AdwPopover } from './elements/adw-popover.js';
-export type { AdwPopoverAlign, AdwPopoverPosition, AdwPopoverRole } from './elements/adw-popover.js';
-export { AdwSplitButton } from './elements/adw-split-button.js';
-export { AdwToggle, AdwToggleGroup } from './elements/adw-toggle-group.js';
-export { AdwEntry } from './elements/adw-entry.js';
-export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';
-export { AdwActionRow } from './elements/adw-action-row.js';
-export { AdwEntryRow } from './elements/adw-entry-row.js';
-export { AdwSwitchRow } from './elements/adw-switch-row.js';
-export { AdwComboRow } from './elements/adw-combo-row.js';
-export { AdwSpinRow } from './elements/adw-spin-row.js';
-export { AdwButtonRow } from './elements/adw-button-row.js';
-export { AdwExpanderRow } from './elements/adw-expander-row.js';
-export { AdwPasswordEntryRow } from './elements/adw-password-entry-row.js';
-export { AdwToastOverlay } from './elements/adw-toast-overlay.js';
-export { AdwToolbarView } from './elements/adw-toolbar-view.js';
-export { AdwWrapBox } from './elements/adw-wrap-box.js';
-export { AdwOverlaySplitView } from './elements/adw-overlay-split-view.js';
-export { AdwNavigationSplitView } from './elements/adw-navigation-split-view.js';
-export { AdwCarousel, AdwCarouselIndicatorDots, AdwCarouselIndicatorLines } from './elements/adw-carousel.js';
-export { AdwTabPage, AdwTabView } from './elements/adw-tab-view.js';
-export { AdwViewSwitcher, AdwViewSwitcherPage } from './elements/adw-view-switcher.js';
-export { AdwInlineViewSwitcher, AdwViewStackPage } from './elements/adw-inline-view-switcher.js';
-export { AdwViewStack } from './elements/adw-view-stack.js';
+
+// The symbolic-icon FACTORY. `Gtk.Image` is the element; this builds one without a tag,
+// which the icon-drawing element modules use internally and a consumer with its own
+// chrome needs.
+export { createGtkImage } from './elements/gtk-image.js';
+
+// GTK4 has no radio TYPE — a radio is a GtkCheckButton with its `group` set — so
+// `Gtk.CheckButton` is the plain form and the grouped one has only this name.
+export { AdwRadio } from './elements/checks.js';
+
+// The declarative children of four composites. Each descends from `GObject.Object` and
+// not `GtkWidget` on GTK, so the table of concrete widgets has no row for them; the day
+// it grows one, its member appears in `namespace.ts` by itself.
+export { AdwTabPage } from './elements/adw-tab-view.js';
+export { AdwViewSwitcherPage } from './elements/adw-view-switcher.js';
+export { AdwViewStackPage } from './elements/adw-inline-view-switcher.js';
+export { AdwSidebarItem, AdwSidebarSection } from './elements/adw-sidebar.js';
+
+// Slot wrappers and a declarative response: on GTK these are `set_content()`,
+// `set_sheet()` and `add_response()` — calls, not widgets.
+export { AdwBottomSheetContent, AdwBottomSheetSheet } from './elements/adw-bottom-sheet.js';
+export { AdwAlertResponse } from './elements/adw-alert-dialog.js';
+
+// Supporting types — the option bags, enums and unions the widgets above take and
+// return. Not widgets, so clause 2 has nothing to say about them.
+export type { GtkPopoverAlign, GtkPopoverPosition, GtkPopoverRole } from './elements/gtk-popover.js';
 export type { AdwViewStackPageInfo } from './elements/adw-view-stack.js';
-export { AdwViewSwitcherBar } from './elements/adw-view-switcher-bar.js';
-export { AdwMenuButton } from './elements/adw-menu-button.js';
-export type { AdwMenuItem } from './elements/adw-menu-button.js';
-export { AdwDropDown } from './elements/adw-drop-down.js';
-export type { AdwDropDownOption } from './elements/adw-drop-down.js';
-export { AdwNavigationPage, AdwNavigationView } from './elements/adw-navigation-view.js';
-export { AdwBottomSheet, AdwBottomSheetContent, AdwBottomSheetSheet } from './elements/adw-bottom-sheet.js';
-export { AdwSidebar, AdwSidebarItem, AdwSidebarSection } from './elements/adw-sidebar.js';
-export { AdwAboutDialog } from './elements/adw-about-dialog.js';
-export { AdwAlertDialog, AdwAlertResponse } from './elements/adw-alert-dialog.js';
-export { AdwPreferencesDialog, AdwPreferencesPage } from './elements/adw-preferences-dialog.js';
-export { AdwDialog } from './elements/adw-dialog.js';
+export type { AdwMenuItem } from './elements/gtk-menu-button.js';
+export type { GtkDropDownOption } from './elements/gtk-drop-down.js';
 export type { AdwDialogPresentationMode } from './elements/adw-dialog.js';