@gjsify/adwaita-web 0.10.0 → 0.12.0

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

@@ -1,12 +1,15 @@
-// <adw-spin-row> — Row with a label and numeric spin control (+/− buttons).
-// Attributes: title, min, max, step, value
+// <adw-spin-row> — Row with a title/subtitle and a numeric spin control (+/− buttons).
+// Attributes: title, subtitle, min, max, step, value
 // Events: notify::value (CustomEvent, mirrors GJS GObject signal naming)
 // 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.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
+//   title/subtitle text column added to match Adw.SpinRow.
 
 export class AdwSpinRow extends HTMLElement {
     private _input!: HTMLInputElement;
+    private _titleEl!: HTMLSpanElement;
+    private _subtitleEl!: HTMLSpanElement;
     private _min = 0;
     private _max = 100;
     private _step = 1;
@@ -14,7 +17,7 @@ export class AdwSpinRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['value', 'min', 'max', 'step'];
+        return ['title', 'subtitle', 'value', 'min', 'max', 'step'];
     }
 
     get value(): number {
@@ -36,34 +39,34 @@ export class AdwSpinRow extends HTMLElement {
         if (this._initialized) return;
         this._initialized = true;
 
-        const title = this.getAttribute('title') || '';
         this._min = parseFloat(this.getAttribute('min') || '0');
         this._max = parseFloat(this.getAttribute('max') || '100');
         this._step = parseFloat(this.getAttribute('step') || '1');
         this._value = parseFloat(this.getAttribute('value') || String(this._min));
 
-        // Title
-        const titleEl = document.createElement('span');
-        titleEl.className = 'adw-row-title';
-        titleEl.textContent = title;
+        const text = document.createElement('div');
+        text.className = 'adw-row-text';
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-row-title';
+        this._subtitleEl = document.createElement('span');
+        this._subtitleEl.className = 'adw-row-subtitle';
+        text.append(this._titleEl, this._subtitleEl);
 
         // Spin control container
         const control = document.createElement('div');
         control.className = 'adw-spin-control';
 
-        // Decrement button
         const decBtn = document.createElement('button');
         decBtn.className = 'adw-spin-dec';
         decBtn.textContent = '−';
         decBtn.addEventListener('click', () => this._adjust(-this._step));
 
-        // Value input
         const input = document.createElement('input');
         input.type = 'text';
         input.value = this._formatValue(this._value);
         input.addEventListener('change', () => {
             const parsed = parseFloat(input.value);
-            if (!isNaN(parsed)) {
+            if (!Number.isNaN(parsed)) {
                 this.value = parsed;
                 this._emitChange();
             } else {
@@ -71,19 +74,23 @@ export class AdwSpinRow extends HTMLElement {
             }
         });
 
-        // Increment button
         const incBtn = document.createElement('button');
         incBtn.className = 'adw-spin-inc';
         incBtn.textContent = '+';
         incBtn.addEventListener('click', () => this._adjust(this._step));
 
         control.append(decBtn, input, incBtn);
-        this.append(titleEl, control);
+        this.replaceChildren(text, control);
         this._input = input;
+        this._renderText();
     }
 
     attributeChangedCallback(name: string, _old: string | null, val: string | null) {
         if (!this._initialized) return;
+        if (name === 'title' || name === 'subtitle') {
+            this._renderText();
+            return;
+        }
         const num = parseFloat(val || '0');
         switch (name) {
             case 'value':
@@ -104,6 +111,13 @@ export class AdwSpinRow extends HTMLElement {
         }
     }
 
+    private _renderText() {
+        this._titleEl.textContent = this.getAttribute('title') ?? '';
+        const subtitle = this.getAttribute('subtitle') ?? '';
+        this._subtitleEl.textContent = subtitle;
+        this._subtitleEl.hidden = subtitle.length === 0;
+    }
+
     private _adjust(delta: number) {
         this.value = this._value + delta;
         this._emitChange();

package/src/elements/adw-spinner.ts

@@ -0,0 +1,31 @@
+// <adw-spinner> — A continuously-spinning loading indicator.
+// Attributes: size (px, default 24).
+// Reference: refs/adwaita-web/adwaita-web/scss/_spinner.scss
+// Reference: refs/libadwaita (Adw.Spinner)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwSpinner extends HTMLElement {
+    static get observedAttributes() {
+        return ['size'];
+    }
+
+    connectedCallback() {
+        this._sync();
+    }
+
+    attributeChangedCallback() {
+        this._sync();
+    }
+
+    private _sync() {
+        const size = parseFloat(this.getAttribute('size') || '24');
+        this.style.width = `${size}px`;
+        this.style.height = `${size}px`;
+        // Scale the ring thickness with the diameter (libadwaita's arc thickens
+        // with size); clamp so tiny spinners stay visible.
+        this.style.borderWidth = `${Math.max(2, Math.round(size / 12))}px`;
+    }
+}
+
+customElements.define('adw-spinner', AdwSpinner);

package/src/elements/adw-split-button.ts

@@ -0,0 +1,206 @@
+// <adw-split-button> — Adwaita split button: a primary action button paired
+// with an attached dropdown that opens a menu of related actions. The two
+// halves are separated by a thin divider; the .suggested-action /
+// .destructive-action / .flat style classes recolor the whole control like the
+// matching Adwaita button variants.
+// Attributes: label, icon-name (symbolic name, e.g. "document-save"; an icon
+//   without a label collapses the action half to icon-only), tooltip,
+//   dropdown-tooltip, disabled, and the boolean variant flags
+//   suggested / destructive / flat.
+//   Menu entries are provided as a JSON array on the `menu` attribute, each
+//   entry `{ "label": "Save as…", "action": "app.save-as" }`.
+// Events (all CustomEvent, bubbles — mirror the Adw.SplitButton GObject signals):
+//   `clicked`            — the primary action half was activated.
+//   `notify::active`     — the dropdown menu was opened/closed (detail.active).
+//   `menu-activated`     — a menu entry was chosen (detail.action / detail.label).
+// Reference: refs/libadwaita/src/adw-split-button.c (AdwSplitButton)
+// Reference: refs/adwaita-web/adwaita-web/scss/_split_button.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+const VARIANT_CLASSES: Record<string, string> = {
+    flat: 'flat',
+    suggested: 'suggested-action',
+    destructive: 'destructive-action',
+};
+
+interface MenuEntry {
+    label: string;
+    action?: string;
+}
+
+export class AdwSplitButton extends HTMLElement {
+    private _actionEl!: HTMLButtonElement;
+    private _dropdownEl!: HTMLButtonElement;
+    private _menuEl!: HTMLDivElement;
+    private _label = '';
+    private _active = false;
+    private _initialized = false;
+    private _onDocumentPointerDown = (event: Event): void => {
+        if (!this.contains(event.target as Node)) this._setActive(false);
+    };
+
+    static get observedAttributes() {
+        return [
+            'label',
+            'icon-name',
+            'tooltip',
+            'dropdown-tooltip',
+            'menu',
+            'disabled',
+            'flat',
+            'suggested',
+            'destructive',
+        ];
+    }
+
+    /** Whether the dropdown menu is currently open. */
+    get active(): boolean {
+        return this._active;
+    }
+
+    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();
+
+        this.classList.add('adw-split-button');
+
+        this._actionEl = document.createElement('button');
+        this._actionEl.type = 'button';
+        this._actionEl.className = 'adw-split-button-action';
+
+        this._dropdownEl = document.createElement('button');
+        this._dropdownEl.type = 'button';
+        this._dropdownEl.className = 'adw-split-button-dropdown';
+        const arrow = document.createElement('span');
+        arrow.className = 'adw-icon adw-icon--go-down';
+        arrow.setAttribute('aria-hidden', 'true');
+        this._dropdownEl.appendChild(arrow);
+
+        this._menuEl = document.createElement('div');
+        this._menuEl.className = 'adw-split-button-menu';
+        this._menuEl.hidden = true;
+
+        this.replaceChildren(this._actionEl, this._dropdownEl, this._menuEl);
+
+        this._actionEl.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this.dispatchEvent(new CustomEvent('clicked', { bubbles: true }));
+        });
+        this._dropdownEl.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this._setActive(!this._active);
+        });
+
+        this._render();
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this._onDocumentPointerDown);
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._render();
+    }
+
+    private _setActive(active: boolean): void {
+        if (this._active === active) return;
+        this._active = active;
+        this._menuEl.hidden = !active;
+        this.classList.toggle('active', active);
+        this._dropdownEl.setAttribute('aria-expanded', String(active));
+        if (active) {
+            document.addEventListener('pointerdown', this._onDocumentPointerDown);
+        } else {
+            document.removeEventListener('pointerdown', this._onDocumentPointerDown);
+        }
+        this.dispatchEvent(new CustomEvent('notify::active', { bubbles: true, detail: { active } }));
+    }
+
+    private _parseMenu(): MenuEntry[] {
+        const raw = this.getAttribute('menu');
+        if (!raw) return [];
+        try {
+            const parsed: unknown = JSON.parse(raw);
+            if (!Array.isArray(parsed)) return [];
+            return parsed
+                .filter((entry): entry is MenuEntry => typeof entry === 'object' && entry !== null && 'label' in entry)
+                .map((entry) => ({ label: String(entry.label), action: entry.action }));
+        } catch {
+            return [];
+        }
+    }
+
+    private _render() {
+        const disabled = this.hasAttribute('disabled');
+        this.classList.toggle('disabled', disabled);
+        this._actionEl.disabled = disabled;
+        this._dropdownEl.disabled = disabled;
+
+        this.classList.remove('flat', 'suggested-action', 'destructive-action');
+        for (const [attr, cls] of Object.entries(VARIANT_CLASSES)) {
+            if (this.hasAttribute(attr)) this.classList.add(cls);
+        }
+
+        // --- Primary action half ---
+        const icon = this.getAttribute('icon-name');
+        const label = (this.getAttribute('label') ?? this._label).trim();
+        this._actionEl.classList.toggle('icon-only', Boolean(icon) && !label);
+
+        this._actionEl.replaceChildren();
+        if (icon) {
+            const span = document.createElement('span');
+            span.className = `adw-icon adw-icon--${icon}`;
+            span.setAttribute('aria-hidden', 'true');
+            this._actionEl.appendChild(span);
+        }
+        if (label) this._actionEl.appendChild(document.createTextNode(label));
+
+        const tooltip = this.getAttribute('tooltip');
+        this._actionEl.title = tooltip ?? '';
+        // An icon-only action half has no text, so give it an accessible name —
+        // prefer the tooltip, fall back to the symbolic icon name (WCAG 4.1.2).
+        if (icon && !label) {
+            this._actionEl.setAttribute('aria-label', tooltip ?? icon);
+        } else {
+            this._actionEl.removeAttribute('aria-label');
+        }
+
+        // --- Dropdown half ---
+        const dropdownTooltip = this.getAttribute('dropdown-tooltip');
+        this._dropdownEl.title = dropdownTooltip ?? '';
+        this._dropdownEl.setAttribute('aria-label', dropdownTooltip ?? 'Menu');
+        this._dropdownEl.setAttribute('aria-haspopup', 'menu');
+        this._dropdownEl.setAttribute('aria-expanded', String(this._active));
+
+        // --- Menu ---
+        const entries = this._parseMenu();
+        this._menuEl.replaceChildren();
+        this._menuEl.setAttribute('role', 'menu');
+        for (const entry of entries) {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.className = 'adw-split-button-menu-item';
+            item.setAttribute('role', 'menuitem');
+            item.textContent = entry.label;
+            item.addEventListener('click', () => {
+                this._setActive(false);
+                this.dispatchEvent(
+                    new CustomEvent('menu-activated', {
+                        bubbles: true,
+                        detail: { label: entry.label, action: entry.action },
+                    }),
+                );
+            });
+            this._menuEl.appendChild(item);
+        }
+        // A split button with no menu entries hides its (empty) popover entirely.
+        if (entries.length === 0) this._setActive(false);
+    }
+}
+
+customElements.define('adw-split-button', AdwSplitButton);

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

@@ -0,0 +1,66 @@
+// <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.
+// Reference: refs/adwaita-web/adwaita-web/scss/_status_page.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_status-page.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwStatusPage extends HTMLElement {
+    private _iconEl!: HTMLSpanElement;
+    private _titleEl!: HTMLSpanElement;
+    private _descEl!: HTMLSpanElement;
+    private _childEl!: HTMLDivElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['icon', 'title', 'description'];
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const children = Array.from(this.childNodes);
+
+        this._iconEl = document.createElement('span');
+        this._iconEl.className = 'adw-status-page-icon adw-icon';
+        this._iconEl.setAttribute('aria-hidden', 'true');
+
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-status-page-title';
+
+        this._descEl = document.createElement('span');
+        this._descEl.className = 'adw-status-page-description';
+
+        this._childEl = document.createElement('div');
+        this._childEl.className = 'adw-status-page-child';
+        for (const child of children) this._childEl.appendChild(child);
+
+        this.replaceChildren(this._iconEl, this._titleEl, this._descEl, this._childEl);
+        this._render();
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._render();
+    }
+
+    private _render() {
+        const icon = (this.getAttribute('icon') ?? '').replace(/-symbolic$/, '');
+        // Swap the icon mask class (keep the base + size class).
+        this._iconEl.className = `adw-status-page-icon adw-icon${icon ? ` adw-icon--${icon}` : ''}`;
+        this._iconEl.hidden = icon.length === 0;
+
+        const title = this.getAttribute('title') ?? '';
+        this._titleEl.textContent = title;
+        this._titleEl.hidden = title.length === 0;
+
+        const description = this.getAttribute('description') ?? '';
+        this._descEl.textContent = description;
+        this._descEl.hidden = description.length === 0;
+
+        this._childEl.hidden = this._childEl.childElementCount === 0;
+    }
+}
+
+customElements.define('adw-status-page', AdwStatusPage);

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

@@ -1,16 +1,19 @@
-// <adw-switch-row> — Row with a label and toggle switch.
-// Attributes: title, active (boolean)
+// <adw-switch-row> — Row with a title/subtitle and a trailing toggle switch.
+// Attributes: title, subtitle, active (boolean)
 // Events: notify::active (CustomEvent, mirrors GJS GObject signal naming)
 // 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.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
+//   title/subtitle text column added to match Adw.SwitchRow.
 
 export class AdwSwitchRow extends HTMLElement {
     private _checkbox!: HTMLInputElement;
+    private _titleEl!: HTMLSpanElement;
+    private _subtitleEl!: HTMLSpanElement;
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['active'];
+        return ['title', 'subtitle', 'active'];
     }
 
     get active(): boolean {
@@ -26,30 +29,24 @@ export class AdwSwitchRow extends HTMLElement {
         if (this._initialized) return;
         this._initialized = true;
 
-        const title = this.getAttribute('title') || '';
-        const checked = this.hasAttribute('active');
+        const text = document.createElement('div');
+        text.className = 'adw-row-text';
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-row-title';
+        this._subtitleEl = document.createElement('span');
+        this._subtitleEl.className = 'adw-row-subtitle';
+        text.append(this._titleEl, this._subtitleEl);
 
-        // Title
-        const titleEl = document.createElement('span');
-        titleEl.className = 'adw-row-title';
-        titleEl.textContent = title;
-
-        // Switch label with hidden checkbox + slider
         const label = document.createElement('label');
         label.className = 'adw-switch';
-
         const input = document.createElement('input');
         input.type = 'checkbox';
-        input.checked = checked;
-
+        input.checked = this.hasAttribute('active');
         const slider = document.createElement('span');
         slider.className = 'adw-switch-slider';
+        label.append(input, slider);
 
-        label.appendChild(input);
-        label.appendChild(slider);
-
-        this.appendChild(titleEl);
-        this.appendChild(label);
+        this.replaceChildren(text, label);
 
         this._checkbox = input;
         this._checkbox.addEventListener('change', () => {
@@ -61,12 +58,21 @@ export class AdwSwitchRow extends HTMLElement {
                 }),
             );
         });
+
+        this._renderText();
     }
 
     attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-        if (name === 'active' && this._checkbox) {
-            this._checkbox.checked = value !== null;
-        }
+        if (!this._initialized) return;
+        if (name === 'active') this._checkbox.checked = value !== null;
+        else this._renderText();
+    }
+
+    private _renderText() {
+        this._titleEl.textContent = this.getAttribute('title') ?? '';
+        const subtitle = this.getAttribute('subtitle') ?? '';
+        this._subtitleEl.textContent = subtitle;
+        this._subtitleEl.hidden = subtitle.length === 0;
     }
 }