@gjsify/adwaita-web 0.51.1 → 0.52.0

package/src/elements/adw-spin-row.ts

@@ -16,6 +16,14 @@
 // the NativeScript row and the React Native widget take. The same markup door
 // `<adw-combo-row model=…>` opens for its list, on the same reasoning.
 //
+// A `.blp` writes the range as an OBJECT, `adjustment: Adjustment { upper: 20; }`, and the
+// shared-tree builder hands that over as a `<gtk-adjustment slot="adjustment" upper="20">`
+// child. The slot consumes it: the child is data, read for the six `Gtk.Adjustment`
+// properties under their GObject spelling, then dropped — GtkBuilder leaves no adjustment
+// in the widget tree either. It REPLACES the range rather than merging into it, because
+// `adjustment:` sets the property to a whole new object: an unwritten field takes the
+// adjustment's own default, not what the row held (`ADJUSTMENT_AUTHORED_VECTORS`).
+//
 // Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
 // Copyright (c) 2025 csm. MIT License.
 // Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
@@ -24,6 +32,29 @@
 
 import { SpinState, deriveRowLabels, normalizeAdjustment, parseAdjustment } from '@gjsify/adwaita-core';
 import type { AdwAdjustment, AdwAdjustmentInput } from '@gjsify/adwaita-core';
+import { attributeOf } from '@gjsify/adwaita-core/tags';
+
+import { bindSlottedChildren } from '../slotted-children.js';
+
+/** `Gtk.Adjustment`'s six properties, as `AdwAdjustmentInput` names them. */
+const ADJUSTMENT_FIELDS = ['value', 'lower', 'upper', 'stepIncrement', 'pageIncrement', 'pageSize'] as const;
+
+/**
+ * The range a `<gtk-adjustment>` child authors: every field written as a number, under its
+ * GObject attribute spelling (`step-increment`). An absent or non-numeric field is not
+ * authored, so it cannot overwrite what the row already holds — the same contract
+ * `parseAdjustment` gives the JSON attribute.
+ */
+function authoredAdjustment(node: Node): AdwAdjustmentInput {
+    const input: Record<string, number> = {};
+    if (!(node instanceof Element)) return input;
+    for (const field of ADJUSTMENT_FIELDS) {
+        const raw = node.getAttribute(attributeOf(field));
+        const value = raw === null ? Number.NaN : Number.parseFloat(raw);
+        if (Number.isFinite(value)) input[field] = value;
+    }
+    return input;
+}
 
 export class AdwSpinRow extends HTMLElement {
     private _input!: HTMLInputElement;
@@ -73,10 +104,6 @@ export class AdwSpinRow extends HTMLElement {
         // rather than against whatever a partly-seeded state held.
         const range = normalizeAdjustment(parseAdjustment(this.getAttribute('adjustment')));
         this._state.configure(range);
-        const authoredValue = this.getAttribute('value');
-        this._state.setValue(
-            this._roundToStep(authoredValue === null ? range.value : Number.parseFloat(authoredValue)),
-        );
 
         const text = document.createElement('div');
         text.className = 'adw-row-text';
@@ -113,7 +140,19 @@ export class AdwSpinRow extends HTMLElement {
         incBtn.addEventListener('click', () => this._adjust(this._state.adjustment.stepIncrement));
 
         control.append(decBtn, input, incBtn);
-        this.replaceChildren(text, control);
+        // The install reads an authored `<gtk-adjustment>` into the range; the authored
+        // `value` is applied after it, against the range it was authored beside.
+        bindSlottedChildren(this, [
+            {
+                name: 'adjustment',
+                consume: (node) => this._state.configure(normalizeAdjustment(authoredAdjustment(node))),
+            },
+        ]).install(text, control);
+        const authoredValue = this.getAttribute('value');
+        this._state.setValue(
+            this._roundToStep(authoredValue === null ? this._state.value : Number.parseFloat(authoredValue)),
+        );
+        input.value = this._formatValue(this._state.value);
         this._input = input;
 
         // Every core change (a set, or a re-clamp after a bound moved) refreshes

package/src/elements/adw-status-page.ts

@@ -1,6 +1,7 @@
 // <adw-status-page> — A centered empty/placeholder state: a large symbolic
 // icon, a title, a description and an optional action (slotted child).
-// Attributes: icon (symbolic name, with or without -symbolic), title, description.
+// Attributes: icon (symbolic name, with or without -symbolic) or icon-name, the GObject
+// spelling a projected `.blp` writes; title, description.
 // Reference: refs/adwaita-web/adwaita-web/scss/_status_page.scss
 // Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss (AdwStatusPage)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
@@ -21,7 +22,7 @@ export class AdwStatusPage extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['icon', 'title', 'description'];
+        return ['icon', 'icon-name', 'title', 'description'];
     }
 
     connectedCallback() {
@@ -41,8 +42,12 @@ export class AdwStatusPage extends HTMLElement {
 
         // `Adw.StatusPage:child` is a property, so the action a status page offers can be
         // set at any point — a button appended after connect has to land in the child box,
-        // not beside it. `src/slotted-children.ts` has the incident.
-        bindSlottedChildren(this, [{ into: this._childEl }]).install(
+        // not beside it. `src/slotted-children.ts` has the incident. NAMED beside the
+        // default for the same reason `adw-toolbar-view.ts` names `content` beside ITS
+        // default: an authored `child: …` carries `slot: 'child'`
+        // (`shared-tree-builder.ts`'s `refuseUnknownSlots`), a name the bare default claim
+        // does not answer to, so the placement was refused sight unseen until this line.
+        bindSlottedChildren(this, [{ name: 'child', into: this._childEl }, { into: this._childEl }]).install(
             this._iconEl,
             this._titleEl,
             this._descEl,
@@ -59,15 +64,16 @@ export class AdwStatusPage extends HTMLElement {
     }
 
     private _render() {
+        const icon = this.getAttribute('icon') ?? this.getAttribute('icon-name');
         // The element swaps the mask class and keeps the size class.
-        this._iconEl.iconName = this.getAttribute('icon');
+        this._iconEl.iconName = icon;
         // `has_image`: `paintable || (icon_name && icon_name[0])` — a name that was GIVEN
         // shows the image whether or not the theme can resolve it, and GTK draws
         // `image-missing` in it. Reading `resolvedIconName` instead hid the slot for every
         // name that is not one CSS token, a branch the C does not have.
         // Reference: refs/libadwaita/src/adw-status-page.c:88 (has_image), bound from
         //   `<binding name="visible">` in adw-status-page.ui:27-31.
-        this._iconEl.hidden = !stringIsNotEmpty(this.getAttribute('icon'));
+        this._iconEl.hidden = !stringIsNotEmpty(icon);
 
         // `string_is_not_empty` from the core, not a local `.length === 0`: the same
         // closure the NativeScript port binds its labels to, and the reason a title of

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

@@ -48,6 +48,7 @@
 import { TabViewState, tabCloseVisible, tabIconState, tabTooltip, tabsRevealed } from '@gjsify/adwaita-core';
 import type { AdwTabPageSpec, AdwTabPageState, TabViewPagesChange, TabViewSelectionChange } from '@gjsify/adwaita-core';
 
+import { bindSlottedChildren } from '../slotted-children.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
 
 export type AdwTabViewPage = AdwTabPageState<HTMLElement>;
@@ -71,6 +72,13 @@ export class AdwTabPage extends HTMLElement {
         return PAGE_ATTRIBUTES;
     }
 
+    connectedCallback(): void {
+        // `AdwTabPage:child` is a PROPERTY, so a `.blp`'s `child: …` authors `slot="child"`.
+        // The page's children already ARE its panel content, so this only enrols the
+        // name, for the reason `adw-clamp.ts` gives for not calling `.install()`.
+        bindSlottedChildren(this, [{ name: 'child', into: this }]);
+    }
+
     attributeChangedCallback(name: string, _old: string | null, value: string | null) {
         // `closest` still finds the view after adoption: the element is moved
         // into the view's page container, not replaced by a wrapper.
@@ -194,10 +202,19 @@ export class AdwTabView extends HTMLElement {
         const declaredSelection = this.getAttribute('selected-page');
 
         // Snapshot the declared pages, then take over the subtree. The elements
-        // themselves become the panels, so they must survive replaceChildren.
-        const declared = Array.from(this.querySelectorAll(':scope > adw-tab-page')) as AdwTabPage[];
+        // themselves become the panels, so they must survive replaceChildren. A child
+        // that is not an `<adw-tab-page>` is a page too, untitled and around itself, as
+        // `adw_tab_view_append` makes one of a bare widget (adw-tab-view.c:2884) — it was
+        // dropped by the `replaceChildren` before.
+        const declared = Array.from(this.children) as HTMLElement[];
         this.replaceChildren(this._barEl, this._pagesEl);
-        for (const pageEl of declared) this._adoptDeclaredPage(pageEl);
+        for (const el of declared) {
+            // By NAME, not `instanceof`: this view is defined before `<adw-tab-page>`, so
+            // markup parsed before the module loaded reaches here with its pages not yet
+            // upgraded — and `_adoptDeclaredPage` reads only attributes, which they have.
+            if (el.localName === 'adw-tab-page') this._adoptDeclaredPage(el as AdwTabPage);
+            else this.appendPage({ id: this._nextId(), content: el });
+        }
 
         if (declaredSelection !== null) this._applySelectedAttribute(declaredSelection);
         this._applyBarVisibility();

package/src/elements/adw-toggle-group.ts

@@ -1,6 +1,7 @@
 // <adw-toggle-group> — the web counterpart of Adw.ToggleGroup: a linked set of toggle
 // buttons where exactly one is active. Toggles are `<adw-toggle>` children carrying
-// `label` and/or `icon-name`, and the `flat` / `round` attributes mirror the upstream
+// `label` and/or `icon-name` and an optional `name`, which the group's `active-name`
+// selects by (read at connect, like the rest). The `flat` / `round` attributes mirror the upstream
 // `.flat` / `.round` style classes. `notify::active` (CustomEvent, bubbles, detail
 // `{ active }`) mirrors the `active` GObject property.
 //
@@ -54,7 +55,7 @@
 // selection state machine composed from @gjsify/adwaita-core, the icon node
 // from <gtk-image>.
 
-import { ToggleGroupState } from '@gjsify/adwaita-core';
+import { ToggleGroupState, keptToggles, toggleIndexOfName } from '@gjsify/adwaita-core';
 
 import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
@@ -74,9 +75,11 @@ export class AdwToggleGroup extends HTMLElement {
     private _initialized = false;
     /** `aria-checked` under `radio`, `aria-selected` under `tab` — decided at connect. */
     private _stateAttr: 'aria-checked' | 'aria-selected' = 'aria-checked';
+    /** Each toggle's `name`, in order — what `active-name` resolves against. */
+    private _names: (string | null)[] = [];
 
     static get observedAttributes() {
-        return ['active', 'flat', 'round'];
+        return ['active', 'active-name', 'flat', 'round'];
     }
 
     /** Zero-based index of the active toggle. */
@@ -88,13 +91,31 @@ export class AdwToggleGroup extends HTMLElement {
         this.setAttribute('active', String(value));
     }
 
+    /** `Adw.ToggleGroup:active-name` — the `name` of the active toggle, or `null`. */
+    get activeName(): string | null {
+        return this._names[this._state.selected] ?? null;
+    }
+
+    set activeName(value: string | null) {
+        if (value === null) this.removeAttribute('active-name');
+        else this.setAttribute('active-name', value);
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
 
         // Snapshot the declared <adw-toggle> children before we take over the
         // subtree — their label / icon-name become the rendered buttons.
-        const toggles = Array.from(this.querySelectorAll('adw-toggle')) as AdwToggle[];
+        // A second toggle claiming a name is refused whole, as `add_toggle` refuses it
+        // (adw-toggle-group.c:849) — the core's rule, not this element's.
+        const authored = Array.from(this.querySelectorAll('adw-toggle')) as AdwToggle[];
+        const toggles = keptToggles(authored.map((el) => ({ el, name: el.getAttribute('name') }))).map(
+            (toggle) => toggle.el,
+        );
+        if (toggles.length < authored.length) {
+            console.warn('[adw-toggle-group] a toggle name already exists; the later toggle is not added');
+        }
 
         // `gtk_widget_class_set_accessible_role` sets a CLASS DEFAULT that an instance's
         // construct-time `accessible-role` overrides, and `add_toggle` then reads
@@ -159,8 +180,12 @@ export class AdwToggleGroup extends HTMLElement {
         this._state.setLabels(
             toggles.map((toggle) => toggle.getAttribute('label') || toggle.getAttribute('icon-name') || ''),
         );
+        this._names = toggles.map((toggle) => toggle.getAttribute('name'));
         this._state.subscribe(() => this._render());
         this._state.setSelected(this._readActiveAttr());
+        // After `active`, and after the toggles are in, as `parser_finished` applies it
+        // (adw-toggle-group.c:1247): a group whose markup names both ends on the name.
+        this._applyActiveName();
         this._render();
 
         // No `disabled`/`hidden` filter, because no `<adw-toggle>` attribute can produce
@@ -185,10 +210,26 @@ export class AdwToggleGroup extends HTMLElement {
             this._state.setSelected(this._readActiveAttr());
             return;
         }
+        if (name === 'active-name') {
+            this._applyActiveName();
+            return;
+        }
         // flat / round are styling-only.
         this._render();
     }
 
+    /**
+     * `adw_toggle_group_set_active_name`: the toggle carrying the name becomes active, and
+     * a name nothing carries leaves the selection where it was — the C's `g_critical` and
+     * return (:2001). Which toggle a name means is the core's answer, not this element's.
+     */
+    private _applyActiveName(): void {
+        const name = this.getAttribute('active-name');
+        if (name === null) return;
+        const index = toggleIndexOfName(this._names, name);
+        if (index !== -1) this._state.setSelected(index);
+    }
+
     private _readActiveAttr(): number {
         const raw = Number.parseInt(this.getAttribute('active') ?? '0', 10);
         if (Number.isNaN(raw)) return 0;

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

@@ -85,9 +85,18 @@ export class AdwToolbarView extends HTMLElement {
             // reach the same box whenever it is written — including after connect, which a
             // snapshot here cannot see. The unnamed slot is the content, the
             // Adw.ToolbarView buildable default. `src/slotted-children.ts` has the incident.
+            //
+            // `content` IS NAMED BESIDE THAT DEFAULT, and it is the same destination rather
+            // than a fourth one: `Adw.ToolbarView:content` is the property a source that
+            // spells the placement writes it at, and GTK reaches this box through either —
+            // the buildable default for a bare child, `adw_toolbar_view_set_content` for a
+            // named one. A tree authored at the property position (a Blueprint
+            // `content: …`) carried a name this element had no destination for, so the
+            // child stayed a stray sibling of all three boxes.
             bindSlottedChildren(this, [
                 { name: 'top', into: this._topEl },
                 { name: 'bottom', into: this._bottomEl },
+                { name: 'content', into: this._contentEl },
                 { into: this._contentEl },
             ]).install(this._topEl, this._contentEl, this._bottomEl);
 

package/src/elements/gtk-action-bar.ts

@@ -0,0 +1,90 @@
+// <gtk-action-bar> — GTK's bottom bar: widgets packed from the start, from the end, and
+// one in the centre.
+//
+// NAMED FOR THE LIBRARY THAT OWNS THE GTYPE (ADR 0034 clause 1): `Gtk.ActionBar` is GTK's,
+// and libadwaita only styles it (`actionbar > revealer > box` in `_toolbars.scss`).
+//
+// THE PLACEMENT IS GtkBuildable's (gtkactionbar.c:220): `[start]` packs from the start,
+// `[end]` packs from the end, `[center]` is the centre widget, and a child with no type
+// packs from the start. There is no `center-widget` slot: GTK has `set_center_widget` but
+// no property of that name, and `Gtk.Builder` refuses a `.blp` that writes one. Packing
+// from the end is `gtk_box_insert_child_after (end_box, child, NULL)` — a PREPEND — so the
+// first `[end]` child sits nearest the edge and each later one lands in front of it,
+// exactly as `adw_header_bar_pack_end` does.
+//
+// `revealed` defaults to TRUE, as `GtkActionBar:revealed` does: only `revealed="false"`
+// hides the bar.
+//
+// Reference: refs/gtk/gtk/gtkactionbar.c (the buildable child types, pack_start/pack_end)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss (GtkActionBar)
+// Copyright (c) The GTK Team. LGPLv2.1+.
+
+import { bindSlottedChildren } from '../slotted-children.js';
+
+export class GtkActionBar extends HTMLElement {
+    private _initialized = false;
+    private _startEl: HTMLDivElement | null = null;
+    private _centerEl: HTMLDivElement | null = null;
+    private _endEl: HTMLDivElement | null = null;
+
+    static get observedAttributes() {
+        return ['revealed'];
+    }
+
+    /** `GtkActionBar:revealed` — whether the bar shows its contents. */
+    get revealed(): boolean {
+        return this.getAttribute('revealed') !== 'false';
+    }
+
+    set revealed(value: boolean) {
+        this.setAttribute('revealed', value ? 'true' : 'false');
+    }
+
+    /** The start box — what `pack_start` appends to. */
+    get startSection(): HTMLDivElement | null {
+        return this._startEl;
+    }
+
+    /** The centre — what `gtk_action_bar_set_center_widget` sets. */
+    get centerSection(): HTMLDivElement | null {
+        return this._centerEl;
+    }
+
+    /** The end box — what `pack_end` prepends to. */
+    get endSection(): HTMLDivElement | null {
+        return this._endEl;
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        this._startEl = document.createElement('div');
+        this._startEl.className = 'adw-action-bar-start';
+        this._centerEl = document.createElement('div');
+        this._centerEl.className = 'adw-action-bar-center';
+        this._endEl = document.createElement('div');
+        this._endEl.className = 'adw-action-bar-end';
+        const endEl = this._endEl;
+
+        bindSlottedChildren(this, [
+            { name: 'start', into: this._startEl },
+            { name: 'center', into: this._centerEl },
+            { name: 'end', consume: (node) => endEl.prepend(node) },
+            // An untyped child packs from the start (gtkactionbar.c:233).
+            { into: this._startEl },
+        ]).install(this._startEl, this._centerEl, this._endEl);
+
+        this._renderRevealed();
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._renderRevealed();
+    }
+
+    private _renderRevealed(): void {
+        this.hidden = !this.revealed;
+    }
+}
+
+customElements.define('gtk-action-bar', GtkActionBar);

package/src/elements/gtk-box.ts

@@ -0,0 +1,87 @@
+// <gtk-box> — GTK's one-axis container: children in a row or a column, a fixed gap
+// between them.
+//
+// NAMED FOR THE LIBRARY THAT OWNS THE GTYPE (ADR 0034 clause 1): libadwaita ships no box,
+// it styles what a caller puts in one. Without this element a Blueprint layout mounted
+// through `mountSharedTree` realised every `Gtk.Box` as an unknown inline element, so a
+// vertical stack of preference groups laid out as one run of inline boxes.
+//
+// NO CORE STATE MACHINE (ADR 0004, trivial behaviour): the stacking is flexbox's. What is
+// shared is how an authored value becomes the property — `normalizeBoxSpacing` and
+// `normalizeBoxOrientation` in `@gjsify/adwaita-core`, which the NativeScript `GtkBox`
+// reads too. The gap is the flex `gap`, which is GTK's spacing exactly: between children
+// only, never at the box's own edges.
+//
+// `homogeneous` gives every child an equal share along the axis (`flex: 1 1 0`, in
+// `_box.scss`). A child's minimum still holds, as in `gtk_box_layout`'s homogeneous
+// allocation, because flex never shrinks an item below its min-content size.
+//
+// Children are not moved or wrapped: the element IS the flex container, so a child in the
+// light DOM is a child of the layout, which is what `gtk_box_append` means.
+//
+// Reference: refs/gtk/gtk/gtkbox.c (the three properties, the `box` CSS name)
+// Copyright (c) The GTK Team. LGPLv2.1+.
+
+import { normalizeBoxOrientation, normalizeBoxSpacing, type BoxOrientation } from '@gjsify/adwaita-core';
+
+/** The attributes that carry a property — also the `notify::` roster. */
+const PROPERTY_ATTRIBUTES = ['orientation', 'spacing', 'homogeneous'] as const;
+
+export class GtkBox extends HTMLElement {
+    static get observedAttributes() {
+        return [...PROPERTY_ATTRIBUTES];
+    }
+
+    /** `GtkOrientable:orientation` — `horizontal` (the default) or `vertical`. */
+    get orientation(): BoxOrientation {
+        return normalizeBoxOrientation(this.getAttribute('orientation'));
+    }
+
+    set orientation(value: BoxOrientation) {
+        this.setAttribute('orientation', value);
+    }
+
+    /** `Gtk.Box:spacing` — the gap between children, in px. Defaults to 0. */
+    get spacing(): number {
+        return normalizeBoxSpacing(this.getAttribute('spacing'));
+    }
+
+    set spacing(value: number) {
+        this.setAttribute('spacing', String(value));
+    }
+
+    /** `Gtk.Box:homogeneous` — whether every child gets the same size along the axis. */
+    get homogeneous(): boolean {
+        return this.hasAttribute('homogeneous');
+    }
+
+    set homogeneous(value: boolean) {
+        this.toggleAttribute('homogeneous', !!value);
+    }
+
+    connectedCallback() {
+        this._sync();
+    }
+
+    attributeChangedCallback(name: string, old: string | null, value: string | null) {
+        this._sync();
+        const next = this._normalized(name, value);
+        if (next === this._normalized(name, old)) return;
+        this.dispatchEvent(new CustomEvent(`notify::${name}`, { bubbles: true, detail: { [name]: next } }));
+    }
+
+    private _normalized(name: string, raw: string | null): string | number | boolean {
+        if (name === 'orientation') return normalizeBoxOrientation(raw);
+        if (name === 'spacing') return normalizeBoxSpacing(raw);
+        return raw !== null;
+    }
+
+    private _sync(): void {
+        // Inline, from the NORMALISED values, so an unknown nick or a negative spacing
+        // lays out as the GTK default rather than whatever the raw attribute says.
+        this.style.flexDirection = this.orientation === 'vertical' ? 'column' : 'row';
+        this.style.gap = `${this.spacing}px`;
+    }
+}
+
+customElements.define('gtk-box', GtkBox);

package/src/elements/gtk-button.ts

@@ -1,9 +1,14 @@
 // <gtk-button> — Adwaita button.
-// Attributes: icon (symbolic name, e.g. "go-previous" / "view-refresh"),
-//   label, tooltip, disabled, and the boolean variant flags
-//   flat / suggested / destructive / circular / pill.
+// Attributes: icon (symbolic name, e.g. "go-previous" / "view-refresh"), or
+//   icon-name, the GObject spelling a projected `.blp` writes; label, tooltip or
+//   tooltip-text (the `.blp` spelling again),
+//   disabled, and the boolean variant flags flat / suggested / destructive /
+//   circular / pill. The GTK style classes on the host (`class="pill"`, which is
+//   what a `.blp`'s `styles ["pill"]` becomes) select the same classes.
 // Renders an inner <button class="adw-button …">; `click` bubbles to the host,
-// so `adwButton.addEventListener('click', …)` works.
+// so `adwButton.addEventListener('click', …)` works. An element child — what a
+// `.blp`'s `child: Adw.ButtonContent { … }` becomes — is `Gtk.Button:child` and
+// replaces the icon and the label inside that inner button.
 // Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
@@ -11,6 +16,7 @@
 
 import { buttonStyleClasses } from '@gjsify/adwaita-core';
 
+import { bindSlottedChildren } from '../slotted-children.js';
 import { createGtkImage } from './gtk-image.js';
 
 /** The boolean attributes that select a style class; the mapping lives in the core. */
@@ -20,9 +26,24 @@ export class GtkButton extends HTMLElement {
     private _button!: HTMLButtonElement;
     private _label = '';
     private _initialized = false;
+    /** `Gtk.Button:child`, or `null` while the icon and the label fill the button. */
+    private _child: Element | null = null;
 
     static get observedAttributes() {
-        return ['icon', 'label', 'tooltip', 'disabled', 'flat', 'suggested', 'destructive', 'circular', 'pill'];
+        return [
+            'icon',
+            'icon-name',
+            'label',
+            'tooltip',
+            'tooltip-text',
+            'disabled',
+            'flat',
+            'suggested',
+            'destructive',
+            'circular',
+            'pill',
+            'class',
+        ];
     }
 
     /** The inner native button (for focus/imperative access). */
@@ -33,10 +54,28 @@ export class GtkButton extends HTMLElement {
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
-        // Capture any inline text as the label before we take over the subtree.
-        this._label = (this.getAttribute('label') ?? this.textContent ?? '').trim();
+        // Capture any inline text as the label before we take over the subtree. Only the
+        // host's own text: an element child is `child`, and its text is not a label.
+        const inlineText = Array.from(this.childNodes)
+            .filter((node) => node.nodeType === Node.TEXT_NODE)
+            .map((node) => node.textContent ?? '')
+            .join('');
+        this._label = (this.getAttribute('label') ?? inlineText).trim();
         this._button = document.createElement('button');
-        this.replaceChildren(this._button);
+        // An authored `child: …` names the `child` slot, and a bare element child means the
+        // same thing, as GtkBuildable's untyped `<child>` does. Consumed rather than moved:
+        // `_render` rebuilds the inner button's content, so it is `_render` that places it.
+        // Stray text is claimed by nothing and leaves with the host's old children.
+        bindSlottedChildren(this, [
+            {
+                name: 'child',
+                claims: (node) => node instanceof Element,
+                consume: (node) => {
+                    this._child = node as Element;
+                    this._render();
+                },
+            },
+        ]).install(this._button);
         this._render();
     }
 
@@ -50,17 +89,25 @@ export class GtkButton extends HTMLElement {
         // The attribute → class mapping is `@gjsify/adwaita-core`'s, so this element
         // and the NativeScript one cannot disagree about which classes exist —
         // `circular` was in this table and missing from that one.
-        btn.classList.add(...buttonStyleClasses(STYLE_ATTRIBUTES.filter((attr) => this.hasAttribute(attr))));
+        // The host's own classes go through the same table: a built `.blp` spells the
+        // style as GTK does, a class on the widget, and reading only the attributes
+        // rendered its pill and flat buttons as plain ones.
+        const styles = [...STYLE_ATTRIBUTES.filter((attr) => this.hasAttribute(attr)), ...this.classList];
+        btn.classList.add(...buttonStyleClasses(styles));
 
-        const icon = this.getAttribute('icon');
-        const label = (this.getAttribute('label') ?? this._label).trim();
+        const child = this._child;
+        const icon = child ? null : (this.getAttribute('icon') ?? this.getAttribute('icon-name'));
+        const label = child ? '' : (this.getAttribute('label') ?? this._label).trim();
         if (icon && !label) btn.classList.add('icon-only');
+        // GTK's `.text-button`: what `gtk_button_set_label` stamps on a label-only button.
+        if (label && !icon) btn.classList.add('text-button');
 
-        btn.replaceChildren();
+        if (child) btn.replaceChildren(child);
+        else btn.replaceChildren();
         if (icon) btn.appendChild(createGtkImage(icon));
         if (label) btn.appendChild(document.createTextNode(label));
 
-        const tooltip = this.getAttribute('tooltip');
+        const tooltip = this.getAttribute('tooltip') ?? this.getAttribute('tooltip-text');
         btn.title = tooltip ?? '';
         // An icon-only button has no text content, so screen readers would
         // announce it as unlabeled. Give it an accessible name — prefer the

package/src/elements/gtk-drop-down.ts

@@ -68,6 +68,9 @@ import type { GtkPopover } from './gtk-popover.js';
 import { ComboState, normalizeComboOptions, parseListModel } from '@gjsify/adwaita-core';
 import type { AdwComboOption, AdwListItemsChanged, AdwListModelInput } from '@gjsify/adwaita-core';
 
+import { bindSlottedChildren } from '../slotted-children.js';
+import { stringListSlot } from '../string-list-slot.js';
+
 import { createGtkImage } from './gtk-image.js';
 
 /**
@@ -176,6 +179,13 @@ export class GtkDropDown extends HTMLElement {
         this._listEl.className = 'adw-drop-down-list';
         this._popoverEl.appendChild(this._listEl);
 
+        // A `<gtk-string-list slot="model">` child is the list a `.blp` authored (ADR 0072),
+        // consumed first so the attribute seed below sees a model and leaves it alone.
+        bindSlottedChildren(this, [stringListSlot((model) => this._state.setModel(model))]).install(
+            this._buttonEl,
+            this._popoverEl,
+        );
+
         // Seed options BEFORE anything subscribes, so building the initial DOM below is
         // not driven by a change notification.
         if (this._state.count === 0) this._state.setModel(parseListModel(this.getAttribute('model')));
@@ -186,7 +196,6 @@ export class GtkDropDown extends HTMLElement {
         // assignment reaches the splice rather than a rebuild.
         this._state.subscribeItems((change) => this._applyItemsChanged(change));
 
-        this.replaceChildren(this._buttonEl, this._popoverEl);
         this._popoverEl.anchor = this._buttonEl;
         this._popoverEl.subscribe((open) => this._onPopoverToggled(open));
         // Type-ahead is the ONE key class the shared popover deliberately leaves to the