@gjsify/adwaita-web 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.45.0",
+    "version": "0.46.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -45,14 +45,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.45.0",
-        "@gjsify/adwaita-fonts": "^0.45.0",
-        "@gjsify/adwaita-icons": "^0.45.0",
+        "@gjsify/adwaita-core": "^0.46.0",
+        "@gjsify/adwaita-fonts": "^0.46.0",
+        "@gjsify/adwaita-icons": "^0.46.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.45.0",
-        "@gjsify/unit": "^0.45.0",
+        "@gjsify/cli": "^0.46.0",
+        "@gjsify/unit": "^0.46.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_about_dialog.scss

@@ -149,7 +149,7 @@ adw-about-dialog {
     height: 96px;
     margin-top: var(--spacing-s);
     margin-bottom: var(--spacing-m);
-    // Mask-driven adw-icon scaled up to the about-dialog app-icon size.
+    // Mask-driven .adw-icon skin scaled up to the about-dialog app-icon size.
     -webkit-mask-size: contain;
     mask-size: contain;
     background-color: currentColor;

package/scss/_button.scss

@@ -1,11 +1,11 @@
-// _button.scss — adw-button + Adwaita button styles + symbolic icons + .linked.
+// _button.scss — gtk-button + Adwaita button styles + symbolic icons + .linked.
 // Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-// <adw-button> is a thin host that renders an inner <button class="adw-button">;
+// <gtk-button> is a thin host that renders an inner <button class="adw-button">;
 // the class set is the real styling API and works on a plain <button> too.
-adw-button {
+gtk-button {
   display: inline-flex;
 }
 
@@ -159,7 +159,7 @@ adw-button {
 
 // The symbolic icon (`.adw-icon`) used to be declared here, because the first
 // widget that needed one was the button. It is `scss/_icon.scss` now — every
-// other widget needs one too, and `<adw-icon>` is an element.
+// other widget needs one too, and `<gtk-image>` is an element.
 
 // The linked group is `scss/_style_classes.scss` now, under libadwaita's own
 // `.linked` name (with `.adw-linked` kept as an alias): the documented class is

package/scss/_checks.scss

@@ -1,4 +1,4 @@
-// _checks.scss — <adw-checkbox> AND <adw-radio>, in ONE partial.
+// _checks.scss — <gtk-check-button> AND <adw-radio>, in ONE partial.
 //
 // WHY ONE FILE FOR TWO ELEMENTS. Upstream's
 // `refs/libadwaita/src/stylesheet/widgets/_checks.scss` merges them deliberately:
@@ -51,7 +51,7 @@ $bullet-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
 $dash-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 3 5 A 2 2 0 0 0 1 7 A 2 2 0 0 0 3 9 L 11 9 A 2 2 0 0 0 13 7 A 2 2 0 0 0 11 5 Z'/%3E%3C/svg%3E");
 
 // `checkbutton { … }` (:3-18) — the host is the button, not the indicator.
-adw-checkbox,
+gtk-check-button,
 adw-radio {
   position: relative;
   display: inline-flex;
@@ -176,7 +176,7 @@ adw-radio {
 }
 
 // `check { border-radius: $check_radius }` (:67-68)
-adw-checkbox .adw-check-indicator {
+gtk-check-button .adw-check-indicator {
   border-radius: 6px;
 }
 
@@ -186,7 +186,7 @@ adw-radio .adw-check-indicator {
 }
 
 // `check:checked` → check.svg (:70) / `radio:checked` → bullet.svg (:76)
-adw-checkbox[checked] .adw-check-indicator::after {
+gtk-check-button[checked] .adw-check-indicator::after {
   mask-image: $check-glyph;
   -webkit-mask-image: $check-glyph;
 }
@@ -201,7 +201,7 @@ adw-radio[checked] .adw-check-indicator::after {
 // wins over the check/bullet on a control that is both. Same order, same
 // specificity, same outcome here — and the same precedence `resolveCheckState`
 // in `@gjsify/adwaita-core` encodes for the a11y value.
-adw-checkbox[indeterminate] .adw-check-indicator::after,
+gtk-check-button[indeterminate] .adw-check-indicator::after,
 adw-radio[indeterminate] .adw-check-indicator::after {
   mask-image: $dash-glyph;
   -webkit-mask-image: $dash-glyph;
@@ -209,7 +209,7 @@ adw-radio[indeterminate] .adw-check-indicator::after {
 
 // `checkbutton.selection-mode { … }` (:83-95) — the big round check used in a
 // selection-mode header bar.
-adw-checkbox.selection-mode,
+gtk-check-button.selection-mode,
 adw-radio.selection-mode {
   border-radius: 100px;
 

package/scss/_drop_down.scss

@@ -1,8 +1,8 @@
-// _drop_down.scss — adw-drop-down: a standalone dropdown selector (the web
+// _drop_down.scss — gtk-drop-down: a standalone dropdown selector (the web
 // counterpart of Gtk.DropDown). A normal Adwaita button showing the current
 // selection + a `pan-down` chevron, dropping an elevated Adwaita popover list of
 // options. The popover reproduces libadwaita's popover.menu > contents surface
-// (soft triple shadow), the items its modelbutton rows, matching <adw-menu-button>.
+// (soft triple shadow), the items its modelbutton rows, matching <gtk-menu-button>.
 // Reference: refs/libadwaita/src/stylesheet/widgets/_popovers.scss (popover > contents)
 // Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss (modelbutton rows)
 // Reference: refs/libadwaita/src/stylesheet/widgets/_dropdowns.scss (dropdown button)
@@ -76,7 +76,7 @@
     opacity: 0.55;
   }
 
-  // The popover SURFACE is `<adw-popover>`'s (`_popover.scss`, the `[menu]`
+  // The popover SURFACE is `<gtk-popover>`'s (`_popover.scss`, the `[menu]`
   // variant — a dropdown's popover is a `popover.menu`, _dropdowns.scss:22).
   // What stays here is what libadwaita ALSO scopes to `dropdown`:
   //   - the extra 6px above the contents (`popover.menu { padding-top: 6px }`,

package/scss/_entry.scss

@@ -1,10 +1,10 @@
-// _entry.scss — adw-entry / .adw-entry text input (e.g. a browser URL bar).
+// _entry.scss — gtk-entry / .adw-entry text input (e.g. a browser URL bar).
 // Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-// <adw-entry> hosts an inner <input class="adw-entry">; it fills its flex slot.
-adw-entry {
+// <gtk-entry> hosts an inner <input class="adw-entry">; it fills its flex slot.
+gtk-entry {
   display: flex;
   flex: 1;
   min-width: 0;

package/scss/_expander_row.scss

@@ -69,7 +69,7 @@ adw-expander-row {
     transform: rotate(180deg);
   }
 
-  // The optional enable switch is `<adw-switch>` and needs no geometry of its
+  // The optional enable switch is `<gtk-switch>` and needs no geometry of its
   // own — `.adw-expander-row-enable-switch` is a query/override hook only. This
   // block used to be a character-for-character copy of the switch row's toggle
   // (44×24 box, hidden input, 20px knob, translateX(20px), focus ring), because

package/scss/_icon.scss

@@ -1,4 +1,4 @@
-// _icon.scss — the symbolic icon box behind <adw-icon>.
+// _icon.scss — the symbolic icon box behind <gtk-image>.
 //
 // A symbolic icon is rendered as a CSS mask rather than an <img> or inline SVG,
 // so `currentColor` drives the fill and the glyph re-themes with whatever
@@ -36,7 +36,7 @@
 
   // `currentColor` IS the icon: the mask is painted with the inherited colour,
   // so a suggested-action button's `--accent-fg-color` has to reach it. Since
-  // <adw-icon> is a custom element it is also in `$adw-components`, and the
+  // <gtk-image> is a custom element it is also in `$adw-components`, and the
   // ADR-0010 boundary reset re-roots `color` on every entry there — which would
   // otherwise repaint every icon in `--window-fg-color` regardless of its host.
   // Class beats type selector, so this restores inheritance.
@@ -66,7 +66,7 @@
 // adw-inline-view-switcher.c:142), and GTK's icon theme returns the same
 // broken-image paintable for a name it cannot find. So the three renderers end
 // up on ONE glyph: GTK draws it from the system theme, the web draws it from
-// here, and NativeScript cannot reach the state at all — its AdwIcon takes SVG
+// here, and NativeScript cannot reach the state at all — its GtkImage takes SVG
 // SOURCE, not a name, so a missing icon there is a missing import the compiler
 // rejects. Nothing THROWS, on any of the three: an icon is decorative and taking
 // an application down over a glyph is a failure mode none of them has.
@@ -82,7 +82,7 @@
   -webkit-mask-image: var(--icon-image-missing);
 }
 
-// …and NO name at all draws nothing, rather than the broken glyph. `<adw-icon>`
+// …and NO name at all draws nothing, rather than the broken glyph. `<gtk-image>`
 // leaves the node classless only when `icon-name` is ABSENT or EMPTY, which is the
 // state where the HOST decided against an icon — the tab strip's indicator slot,
 // the avatar's fallback while initials show. `Gtk.Image` with a NULL icon-name

package/scss/_menu_button.scss

@@ -1,4 +1,4 @@
-// _menu_button.scss — adw-menu-button styling: a flat (or circular) icon button
+// _menu_button.scss — gtk-menu-button styling: a flat (or circular) icon button
 // that drops an Adwaita-styled popover menu (the web counterpart of
 // Adw.MenuButton / Gtk.MenuButton). The button mirrors libadwaita's flat/circular
 // `menubutton > button`; the popover reproduces `popover.menu > contents` with
@@ -77,8 +77,8 @@
         }
     }
 
-    // The surface, the heading and the item row are `<adw-popover>`'s —
-    // `_popover.scss` (`adw-popover`, `.adw-popover-title`, `.adw-popover-item`).
+    // The surface, the heading and the item row are `<gtk-popover>`'s —
+    // `_popover.scss` (`gtk-popover`, `.adw-popover-title`, `.adw-popover-item`).
     // What used to be here was one of three hand-rolled copies: a
     // `--card-radius` (12px) surface where libadwaita's is 15px, and a
     // `calc(var(--button-radius) - 2px)` (7px) row where `modelbutton` is 9px.

package/scss/_popover.scss

@@ -1,4 +1,4 @@
-// _popover.scss — <adw-popover>, the one popover surface in this package.
+// _popover.scss — <gtk-popover>, the one popover surface in this package.
 //
 // It replaces three hand-rolled copies (`.adw-menu-button-popover`,
 // `.adw-drop-down-popover`, `.adw-split-button-menu`) that disagreed with
@@ -38,7 +38,7 @@
 // drop-down already used; the split button's 4px was the odd one out.
 $popover-gap: 6px;
 
-adw-popover {
+gtk-popover {
   // $popover_radius = $menu_radius + 6 (_common.scss:10,13). Exposed as a token
   // so consumers re-theme it the same way as the rest (ADR 0010), with the
   // libadwaita value as the fallback.

package/scss/_progress_bar.scss

@@ -1,4 +1,4 @@
-// _progress_bar.scss — <adw-progress-bar>, the determinate partner to
+// _progress_bar.scss — <gtk-progress-bar>, the determinate partner to
 // <adw-spinner>.
 //
 // TWO SOURCES, AND WHICH HALF CAME FROM WHICH — the two disagree, so this is not
@@ -24,7 +24,7 @@
 //
 // NOT PORTED, deliberately: `progressbar.vertical` (:10-15) and the four
 // `progress.{left,right,top,bottom}` corner-radius rules (:37-55). Both exist
-// for orientations and trough-splitting `<adw-progress-bar>` does not expose —
+// for orientations and trough-splitting `<gtk-progress-bar>` does not expose —
 // there is no `orientation` attribute — and a rule nothing can ever select is a
 // rule that rots.
 //
@@ -39,7 +39,7 @@
 // `.dimmed` / `.numeric`, which the text node @extends exactly as upstream does.
 @use 'labels';
 
-adw-progress-bar {
+gtk-progress-bar {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
@@ -104,7 +104,7 @@ adw-progress-bar {
   // The `.osd` variant (:59-83): a hairline bar with no trough at all, the way
   // it is drawn under a header bar. `[osd]` is the attribute this element takes;
   // `.osd` is libadwaita's DOCUMENTED spelling for the same variant, and
-  // `_style_classes.scss` excludes `adw-progress-bar` from the generic OSD
+  // `_style_classes.scss` excludes `gtk-progress-bar` from the generic OSD
   // surface exactly so the class lands here instead of turning the bar into a
   // dark translucent box.
   &[osd],

package/scss/_reset.scss

@@ -18,7 +18,9 @@
 // neutralises.
 
 // Every custom element adwaita-web defines — one entry per `customElements
-// .define('adw-…')` call under `src/`.
+// .define(…)` call under `src/`, in BOTH namespaces: a tag carries the prefix of
+// the library that owns its GType (ADR 0034 clause 1), so `gtk-entry` is on this
+// list beside `adw-action-row`.
 //
 // DERIVED, NOT REMEMBERED: `scripts/check-adwaita-reset-components.mjs` walks
 // those calls and fails on any tag missing from this list (and on any entry with
@@ -29,19 +31,19 @@
 $adw-components:
   adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response,
   adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content,
-  adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row,
+  adw-bottom-sheet-sheet, gtk-button, adw-button-content, adw-button-row,
   adw-card, adw-carousel, adw-carousel-indicator-dots,
-  adw-carousel-indicator-lines, adw-checkbox, adw-clamp, adw-combo-row,
+  adw-carousel-indicator-lines, gtk-check-button, adw-clamp, adw-combo-row,
   adw-data-grid,
-  adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row,
-  adw-header-bar, adw-icon, adw-inline-view-switcher, adw-menu-button,
+  adw-dialog, gtk-drop-down, gtk-entry, adw-entry-row, adw-expander-row,
+  adw-header-bar, gtk-image, adw-inline-view-switcher, gtk-menu-button,
   adw-navigation-page,
   adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view,
-  adw-password-entry-row, adw-popover, adw-preferences-dialog,
-  adw-preferences-group, adw-preferences-page, adw-progress-bar, adw-radio,
+  adw-password-entry-row, gtk-popover, adw-preferences-dialog,
+  adw-preferences-group, adw-preferences-page, gtk-progress-bar, adw-radio,
   adw-shortcut-label, adw-sidebar, adw-sidebar-item,
   adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row,
-  adw-split-button, adw-status-page, adw-switch, adw-switch-row,
+  adw-split-button, adw-status-page, gtk-switch, adw-switch-row,
   adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group,
   adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher,
   adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title,

package/scss/_split_button.scss

@@ -111,7 +111,7 @@
     }
   }
 
-  // The dropdown menu is `<adw-popover>` (`_popover.scss`), and this was the
+  // The dropdown menu is `<gtk-popover>` (`_popover.scss`), and this was the
   // WORST of the three hand-rolled surfaces: `--button-radius` (9px) where
   // libadwaita's popover is 15px, under a two-layer shadow that exists nowhere
   // in the vendored stylesheet (`popover > contents` has three,

package/scss/_style_classes.scss

@@ -186,7 +186,7 @@
 // split buttons go flat — unless they are `.raised`, `.suggested-action`,
 // `.destructive-action`, `.opaque`, or sit inside a `.linked` group. Text-only
 // buttons keep their frame, which is why this cannot be a blanket
-// `.toolbar adw-button { … }`.
+// `.toolbar gtk-button { … }`.
 $_keeps-frame: ':not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque)';
 
 .toolbar {
@@ -195,9 +195,9 @@ $_keeps-frame: ':not(.raised):not(.suggested-action):not(.destructive-action):no
   gap: 6px;
   padding: 6px;
 
-  adw-button#{$_keeps-frame} .adw-button.icon-only,
-  adw-button#{$_keeps-frame}:has(adw-button-content) .adw-button,
-  adw-menu-button#{$_keeps-frame} .adw-button,
+  gtk-button#{$_keeps-frame} .adw-button.icon-only,
+  gtk-button#{$_keeps-frame}:has(adw-button-content) .adw-button,
+  gtk-menu-button#{$_keeps-frame} .adw-button,
   adw-split-button#{$_keeps-frame} .adw-button {
     background-color: transparent;
 
@@ -215,8 +215,8 @@ $_keeps-frame: ':not(.raised):not(.suggested-action):not(.destructive-action):no
   // group only reads as one control if its members are raised.
   .linked,
   .adw-linked {
-    adw-button#{$_keeps-frame} .adw-button,
-    adw-menu-button#{$_keeps-frame} .adw-button,
+    gtk-button#{$_keeps-frame} .adw-button,
+    gtk-menu-button#{$_keeps-frame} .adw-button,
     adw-split-button#{$_keeps-frame} .adw-button {
       background-color: var(--button-bg-color);
 
@@ -265,7 +265,7 @@ $_keeps-frame: ':not(.raised):not(.suggested-action):not(.destructive-action):no
 //
 // This is a token REBIND, not just a colour: everything accent-coloured inside
 // an OSD surface turns white without knowing it is inside one.
-.osd:not(adw-progress-bar):not(adw-button):not(adw-menu-button):not(adw-split-button):not(
+.osd:not(gtk-progress-bar):not(gtk-button):not(gtk-menu-button):not(adw-split-button):not(
     adw-inline-view-switcher
   ) {
   --accent-bg-color: rgb(255 255 255 / 75%);
@@ -295,8 +295,8 @@ $_keeps-frame: ':not(.raised):not(.suggested-action):not(.destructive-action):no
 // it USED to add a 2px gap between children, which is a segmented look, not a
 // linked one. The gap is gone; a consumer who wanted it can say `gap`.
 // The styled node is either the child itself (a bare `.adw-button` /
-// `.adw-entry`) or one rendered inside the child host element (`<adw-button>`,
-// `<adw-menu-button>`, `<adw-drop-down>`, …) — so both spellings are matched
+// `.adw-entry`) or one rendered inside the child host element (`<gtk-button>`,
+// `<gtk-menu-button>`, `<gtk-drop-down>`, …) — so both spellings are matched
 // rather than enumerating host tags the way GTK has to.
 $_linked-nodes: '.adw-button', '.adw-entry';
 

package/scss/_switch.scss

@@ -1,4 +1,4 @@
-// _switch.scss — the <adw-switch> control: a track, a hidden checkbox and a
+// _switch.scss — the <gtk-switch> control: a track, a hidden checkbox and a
 // sliding knob. UNSCOPED, which is the whole point of the partial.
 //
 // WHY IT IS ITS OWN FILE. These rules used to live inside `_switch_row.scss`,
@@ -24,7 +24,7 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components; lifted out of
-//   `adw-switch-row {}` so <adw-switch> is usable anywhere.
+//   `adw-switch-row {}` so <gtk-switch> is usable anywhere.
 
 .adw-switch {
   position: relative;

package/scss/_switch_row.scss

@@ -1,6 +1,6 @@
 // _switch_row.scss — adw-switch-row styling.
 //
-// The TOGGLE is not here: it is `<adw-switch>` and `scss/_switch.scss`. It used
+// The TOGGLE is not here: it is `<gtk-switch>` and `scss/_switch.scss`. It used
 // to be, nested under `adw-switch-row {`, which is exactly why `.adw-switch` was
 // unreachable from anywhere else and `_expander_row.scss` grew a
 // character-for-character copy of it.

package/scss/_toast.scss

@@ -121,7 +121,7 @@ adw-toast-overlay {
   }
 
   // Close affordance — `window-close-symbolic` in a 24px circle, as upstream builds it
-  // (adw-toast-widget.ui:64). The element supplies the <adw-icon>; this only places it.
+  // (adw-toast-widget.ui:64). The element supplies the <gtk-image>; this only places it.
   .adw-toast-close-button {
     box-sizing: border-box;
     flex-shrink: 0;

package/scss/adwaita-skin.scss

@@ -13,7 +13,7 @@
 // Style-isolation boundary — emitted before the components so their own rules
 // override this typographic/box-model floor (see _reset.scss).
 @use 'reset';
-// The ONE symbolic-icon box, behind <adw-icon>. Emitted before every widget that
+// The ONE symbolic-icon box, behind <gtk-image>. Emitted before every widget that
 // draws one, so a context that sizes its own icons (the about dialog's 96px, the
 // split button's 14px arrows, the view switcher's 16px) still wins on ordinary
 // specificity.
@@ -46,7 +46,7 @@
 @use 'menu_button';
 @use 'drop_down';
 @use 'toggle_group';
-// The ONE toggle, behind <adw-switch>. Emitted before `switch_row` and
+// The ONE toggle, behind <gtk-switch>. Emitted before `switch_row` and
 // `expander_row`, the two widgets that host one — and which each carried their
 // own copy of it until it was lifted out of `adw-switch-row {}`.
 @use 'switch';

package/src/adw-action-rows.spec.ts

@@ -253,9 +253,9 @@ export const AdwActionRowsTest = async () => {
                 setAttr(row, 'start-icon-name', vector.startIconName);
                 setAttr(row, 'end-icon-name', vector.endIconName);
 
-                // The two `image.icon.{start,end}` nodes are <adw-icon>, not hand-rolled
+                // The two `image.icon.{start,end}` nodes are <gtk-image>, not hand-rolled
                 // decorative spans.
-                const icons = Array.from(row.querySelectorAll('adw-icon')) as HTMLElement[];
+                const icons = Array.from(row.querySelectorAll('gtk-image')) as HTMLElement[];
                 expect(icons.length).toBe(2);
                 expect(!icons[0]!.hidden).toBe(vector.startIconVisible);
                 expect(!icons[1]!.hidden).toBe(vector.endIconVisible);

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

@@ -122,7 +122,7 @@ export const AdwButtonContentTest = async () => {
                 // the generated classes never carry `-symbolic`. This element used
                 // to interpolate the raw name, so `icon-name="folder-download-symbolic"`
                 // asked for `.adw-icon--folder-download-symbolic`, a class that has
-                // never existed, and drew an empty 16px box. `<adw-icon>` applies
+                // never existed, and drew an empty 16px box. `<gtk-image>` applies
                 // `normalizeIconName`, which also makes the `' '` row assertable
                 // instead of skipped: a space is not one CSS token, so it lands on
                 // `image-missing` — the missing icon that row's own rule records GTK

package/src/bottom-sheet.spec.ts

@@ -259,7 +259,7 @@ export const AdwBottomSheetTest = async () => {
             const tpl = document.createElement('template');
             tpl.innerHTML =
                 '<adw-bottom-sheet open="true" modal="true" can-close="true">' +
-                '<adw-bottom-sheet-content><adw-button pill>Toggle sheet</adw-button></adw-bottom-sheet-content>' +
+                '<adw-bottom-sheet-content><gtk-button pill>Toggle sheet</gtk-button></adw-bottom-sheet-content>' +
                 '<adw-bottom-sheet-sheet><button id="inside">Inside</button></adw-bottom-sheet-sheet>' +
                 '</adw-bottom-sheet>';
             const stage = document.createElement('div');
@@ -269,7 +269,7 @@ export const AdwBottomSheetTest = async () => {
             const sheet = stage.querySelector('adw-bottom-sheet') as AdwBottomSheet;
             expect(sheet.open).toBe(true);
 
-            const toggle = sheet.querySelector('.adw-bottom-sheet-content adw-button') as HTMLElement;
+            const toggle = sheet.querySelector('.adw-bottom-sheet-content gtk-button') as HTMLElement;
             expect(toggle).toBeTruthy();
             expect(insideSheet(sheet).id).toBe('inside');
             // What the page binds: a listener on the custom element, driven by a click

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

@@ -1,4 +1,4 @@
-// DOM-level tests for <adw-checkbox> and <adw-radio>, plus the browser side of
+// DOM-level tests for <gtk-check-button> and <adw-radio>, plus the browser side of
 // the `RADIO_GROUP_VECTORS` conformance table.
 //
 // The browser's native radio exclusivity is NOT enough: `<input type="radio" name="g">`
@@ -14,7 +14,7 @@
 import { describe, expect, it } from '@gjsify/unit';
 import { RADIO_GROUP_VECTORS } from '@gjsify/adwaita-core/conformance';
 
-import type { AdwCheckbox, AdwRadio } from './elements/adw-checks.js';
+import type { GtkCheckButton, AdwRadio } from './elements/checks.js';
 
 function host(): HTMLElement {
     const el = document.createElement('div');
@@ -22,9 +22,9 @@ function host(): HTMLElement {
     return el;
 }
 
-function mountCheckbox(): { el: AdwCheckbox; parent: HTMLElement } {
+function mountCheckbox(): { el: GtkCheckButton; parent: HTMLElement } {
     const parent = host();
-    const el = document.createElement('adw-checkbox') as AdwCheckbox;
+    const el = document.createElement('gtk-check-button') as GtkCheckButton;
     parent.appendChild(el);
     return { el, parent };
 }
@@ -51,7 +51,7 @@ function glyph(check: HTMLElement): string {
 }
 
 export const AdwChecksTest = async () => {
-    await describe('<adw-checkbox> state', async () => {
+    await describe('<gtk-check-button> state', async () => {
         await it('builds the input + indicator + label markup', () => {
             const { el, parent } = mountCheckbox();
             const { input, indicator, label } = parts(el);
@@ -69,13 +69,13 @@ export const AdwChecksTest = async () => {
 
         await it('adopts authored child nodes as the label, and the attribute wins', () => {
             const parent = host();
-            const authored = document.createElement('adw-checkbox') as AdwCheckbox;
+            const authored = document.createElement('gtk-check-button') as GtkCheckButton;
             authored.textContent = 'Enable';
             parent.appendChild(authored);
             expect(parts(authored).label.textContent).toBe('Enable');
             expect(parts(authored).label.hidden).toBe(false);
 
-            const labelled = document.createElement('adw-checkbox') as AdwCheckbox;
+            const labelled = document.createElement('gtk-check-button') as GtkCheckButton;
             labelled.setAttribute('label', 'From the attribute');
             labelled.textContent = 'ignored';
             parent.appendChild(labelled);
@@ -133,7 +133,7 @@ export const AdwChecksTest = async () => {
         });
     });
 
-    await describe('<adw-checkbox> indeterminate', async () => {
+    await describe('<gtk-check-button> indeterminate', async () => {
         await it('announces as mixed and outranks checked', () => {
             const { el, parent } = mountCheckbox();
             el.checked = true;
@@ -152,7 +152,7 @@ export const AdwChecksTest = async () => {
             // three states proves the cascade, not just that a mask exists.
             const parent = host();
             const make = (attrs: string[]) => {
-                const el = document.createElement('adw-checkbox') as AdwCheckbox;
+                const el = document.createElement('gtk-check-button') as GtkCheckButton;
                 for (const attr of attrs) el.setAttribute(attr, '');
                 parent.appendChild(el);
                 return el;
@@ -181,7 +181,7 @@ export const AdwChecksTest = async () => {
     await describe('check and radio share one stylesheet', async () => {
         await it('both draw the 14px + 3px indicator, differing only in the radius', () => {
             const parent = host();
-            const check = document.createElement('adw-checkbox') as AdwCheckbox;
+            const check = document.createElement('gtk-check-button') as GtkCheckButton;
             const radio = document.createElement('adw-radio') as AdwRadio;
             parent.append(check, radio);
 
@@ -219,7 +219,7 @@ export const AdwChecksTest = async () => {
             radio.setAttribute('name', 'fill-checked');
             radio.setAttribute('value', 'x');
             radio.setAttribute('checked', '');
-            const check = document.createElement('adw-checkbox') as AdwCheckbox;
+            const check = document.createElement('gtk-check-button') as GtkCheckButton;
             check.setAttribute('checked', '');
             parent.append(plain, radio, check);
 

package/src/chrome.spec.ts

@@ -153,7 +153,7 @@ const ROOT_ACTION_PREVIEW = `
     <adw-window-title slot="center" title="Contacts"></adw-window-title>
   </adw-header-bar>
   <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
-    <adw-button label="Open contact" pill suggested></adw-button>
+    <gtk-button label="Open contact" pill suggested></gtk-button>
   </div>
 </adw-toolbar-view>`;
 
@@ -530,7 +530,7 @@ export const AdwChromeTest = async () => {
             const host = mountPreview(ROOT_ACTION_PREVIEW);
             await settle();
             const area = host.querySelector('.adw-toolbar-view-content') as HTMLElement;
-            const button = host.querySelector('adw-button') as HTMLElement;
+            const button = host.querySelector('gtk-button') as HTMLElement;
 
             expect(heightOf(area.firstElementChild)).toBe(heightOf(area));
             // A pill button that grew to the pane's height would be the fill applied

package/src/connect-lifecycle.spec.ts

@@ -24,10 +24,14 @@
 import { describe, expect, it } from '@gjsify/unit';
 
 import * as adwaitaWeb from './index.js';
+// Not a bare `Object.values` walk: since ADR 0034 § Amendment 6 the widget classes are
+// members of the exported `Adw`/`Gtk` objects, so a top-level scan reaches only the
+// web-only stragglers while reading as if it swept the package.
+import { exportedElementClasses } from './exported-elements.js';
 
 /**
  * Elements that cannot RENDER a child, however the DOM lets you append one. A container
- * getter returning one of these is an imperative handle (`<adw-entry>.input`, for
+ * getter returning one of these is an imperative handle (`<gtk-entry>.input`, for
  * focus and selection), not an append point, and appending to it measures 0 forever.
  * The HTML void-element set, not a per-widget ledger — a new container still enrols
  * itself; only a new void element in the spec would need a line here.
@@ -85,9 +89,8 @@ function reveal(el: HTMLElement): void {
 function registeredElements(): { tags: string[]; unregistered: string[] } {
     const tags: string[] = [];
     const unregistered: string[] = [];
-    for (const exported of Object.values(adwaitaWeb)) {
-        if (typeof exported !== 'function' || !(exported.prototype instanceof HTMLElement)) continue;
-        const tag = customElements.getName(exported as CustomElementConstructor);
+    for (const exported of exportedElementClasses(adwaitaWeb)) {
+        const tag = customElements.getName(exported);
         if (tag === null) unregistered.push(exported.name);
         else tags.push(tag);
     }
@@ -101,7 +104,7 @@ function registeredElements(): { tags: string[]; unregistered: string[] } {
  * Each half earns its place. No setter, because a container you append into is not one
  * you replace by assignment — that is what separates `topBar` from `anchor` and
  * `activatableWidget`. Contained, because the handle has to be part of THIS widget's
- * own subtree — `<adw-popover>.anchor` defaults to `parentElement` and is not. And a
+ * own subtree — `<gtk-popover>.anchor` defaults to `parentElement` and is not. And a
  * value that is not an element at all (`items`, `groups`, a `null` slot on an empty
  * widget) is nothing to append to.
  *
@@ -326,9 +329,9 @@ export const AdwConnectLifecycleTest = async () => {
             });
         }
 
-        await it('<adw-popover> still dismisses on an outside click after a move', async () => {
+        await it('<gtk-popover> still dismisses on an outside click after a move', async () => {
             const first = visibleHost();
-            const popover = document.createElement('adw-popover');
+            const popover = document.createElement('gtk-popover');
             first.appendChild(popover);
             (popover as HTMLElement & { popup(): void }).popup();