@gjsify/adwaita-web 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.44.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.44.0",
-        "@gjsify/adwaita-fonts": "^0.44.0",
-        "@gjsify/adwaita-icons": "^0.44.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.44.0",
-        "@gjsify/unit": "^0.44.0",
+        "@gjsify/cli": "^0.46.0",
+        "@gjsify/unit": "^0.46.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -75,6 +75,9 @@
                 "navigator",
                 "process"
             ]
+        },
+        "widgetVocabulary": {
+            "role": "renderer"
         }
     },
     "license": "MIT",

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/adw-header-bar.spec.ts

@@ -4,9 +4,13 @@
 // the open document keeps its construction-time title otherwise, and nothing notices
 // because the attribute is still there and A title still renders.
 //
-// `Adw.HeaderBar` builds its centre from `title`/`subtitle` through a derived
-// `AdwWindowTitle` bound to the properties, unless a `title-widget` replaces it — the
-// either/or the `slot="center"` case below asserts.
+// The either/or the `slot="center"` case below asserts IS `Adw.HeaderBar`'s: setting
+// `title-widget` empties the centre bin (adw-header-bar.c:1201), and clearing it builds the
+// derived centre again (:1211). What C builds there is a plain `gtk_label_new (NULL)`
+// (`construct_title_label`, :512) with no subtitle, and no `title` property behind it —
+// `update_title` (:475) resolves one from the ancestry. The `<adw-window-title>` centre and
+// the title/subtitle PAIR are this port's DIVERGENCE, named in `elements/adw-header-bar.ts`
+// and recorded as `HeaderBarRenderState.derivedSubtitle` in `@gjsify/adwaita-core`.
 
 import { describe, expect, it } from '@gjsify/unit';
 
@@ -122,7 +126,8 @@ export const AdwHeaderBarTest = async () => {
         });
     });
 
-    // The centre is the `<adw-window-title>` Adw.HeaderBar itself derives, so the three
+    // The centre is an `<adw-window-title>` — this port's divergence, not the bare
+    // `GtkLabel` `construct_title_label` builds (adw-header-bar.c:512) — so the three
     // rules that element holds through @gjsify/adwaita-core reach the header bar too.
     // None of them did while the centre was a bare span.
     await describe('<adw-header-bar> derives an <adw-window-title>', async () => {

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

@@ -75,6 +75,77 @@ export const AdwTabViewTest = async () => {
         });
     });
 
+    // ONE HALF of the upgrade-order defect; the other half is the define order at the
+    // foot of `elements/adw-tab-view.ts`, which no test in this realm can observe —
+    // both names are already registered by the time a spec runs, and `define` is what
+    // upgrades. What IS reproducible here is the STATE that order produced: a real
+    // `<adw-tab-page>` next to an `<adw-tab-view>` that is still an ordinary
+    // HTMLElement. `document.implementation.createHTMLDocument()` has no browsing
+    // context, so nothing it creates is ever upgraded; adopting the element carries it
+    // into this document without upgrading it, which INSERTING it would do.
+    //
+    // Constructing both with `document.createElement` instead would pass either way —
+    // both are defined, so both come back upgraded and the ancestor always has the
+    // method. The parse-then-define order the site hits is covered in
+    // `tests/browser/specs/adwaita-upgrade-order.spec.ts`.
+    await describe('adw-tab-page beside an un-upgraded view', async () => {
+        await it('reports nothing when the view has none of its methods yet', async () => {
+            const view = document.adoptNode(
+                document.implementation.createHTMLDocument('').createElement('adw-tab-view'),
+            );
+            expect('syncDeclaredPage' in view).toBe(false);
+            const page = document.createElement('adw-tab-page');
+            view.appendChild(page);
+
+            // A custom-element reaction never throws INTO its caller: the exception is
+            // REPORTED, so `setAttribute` returns normally whether or not the callback
+            // blew up and only a listener sees the difference. `preventDefault` keeps a
+            // red run from also logging it at the console.
+            const reported: string[] = [];
+            const onError = (event: ErrorEvent) => {
+                reported.push(event.message);
+                event.preventDefault();
+            };
+            window.addEventListener('error', onError);
+            page.setAttribute('title', 'One');
+            window.removeEventListener('error', onError);
+
+            expect(reported).toStrictEqual([]);
+            expect(page.getAttribute('title')).toBe('One');
+        });
+
+        await it('leaves a page appended after connect unadopted rather than throwing', async () => {
+            // The imperative surface is `appendPage`; a bare DOM append is out of
+            // contract, and the point here is only that it fails QUIETLY — the page
+            // carries no `data-page-id`, so `syncDeclaredPage` has no record to touch.
+            //
+            // "rather than throwing" is ASSERTED and not assumed. Without the listener
+            // this test measured only the two counts, and both hold whether or not the
+            // callback blew up: a custom-element reaction is REPORTED, never rethrown
+            // into `setAttribute`, so the model is untouched either way. Measured — with
+            // `syncDeclaredPage` mutated to throw on exactly this path, the whole
+            // in-bundle suite of 4631 stayed green and only an unrelated spec's global
+            // error sweep noticed.
+            const view = makeTabView();
+            const late = document.createElement('adw-tab-page');
+            view.appendChild(late);
+
+            const reported: string[] = [];
+            const onError = (event: ErrorEvent) => {
+                reported.push(event.message);
+                event.preventDefault();
+            };
+            window.addEventListener('error', onError);
+            late.setAttribute('title', 'Late');
+            window.removeEventListener('error', onError);
+
+            expect(reported).toStrictEqual([]);
+            expect(view.nPages).toBe(3);
+            expect(chips(view).length).toBe(3);
+            view.parentElement?.remove();
+        });
+    });
+
     await describe('adw-tab-view expand-tabs / no-close', async () => {
         await it('no-close hides every close affordance', async () => {
             const view = makeTabView('no-close');

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