@gjsify/adwaita-web 0.10.0 → 0.12.0

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

@@ -0,0 +1,184 @@
+// <adw-tab-view> — A dynamic tabbed container with a tab bar header (the web
+// counterpart of Adw.TabView + Adw.TabBar). One page is shown at a time; the
+// tab bar renders one chip per page (title + close affordance) over a
+// headerbar-colored strip, with the selected chip raised onto the view
+// background. Pages are declared as <adw-tab-page> children (each with a
+// `title` attribute and arbitrary content); the view snapshots them at connect
+// time, builds the bar, and toggles the active page's visibility.
+// Attributes:
+//   selected (zero-based index of the visible page, default 0)
+//   autohide (boolean — hide the tab bar when only one page remains, mirroring
+//     the Adw.TabBar `autohide` property)
+// Events:
+//   `notify::selected-page` (CustomEvent, bubbles, `detail = { selected }`) when
+//     the visible page changes — mirrors the Adw.TabView `selected-page` property.
+//   `close-page` (CustomEvent, bubbles, `detail = { index }`) when a page's close
+//     affordance is activated — mirrors the Adw.TabView `close-page` signal.
+// Reference: refs/libadwaita/src/adw-tab-view.c (AdwTabView behaviour)
+// Reference: refs/libadwaita/src/adw-tab-bar.c (AdwTabBar autohide)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_tab-view.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_tabs.scss
+// Copyright (c) 2020-2022 Purism SPC / GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** A single page. Children of <adw-tab-view>; consumed at connect time. */
+export class AdwTabPage extends HTMLElement {
+    static get observedAttributes() {
+        return ['title'];
+    }
+}
+
+export class AdwTabView extends HTMLElement {
+    private _barEl!: HTMLDivElement;
+    private _pagesEl!: HTMLDivElement;
+    private _tabs: HTMLButtonElement[] = [];
+    private _pages: HTMLDivElement[] = [];
+    private _selected = 0;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['selected', 'autohide'];
+    }
+
+    /** Zero-based index of the visible page. */
+    get selected(): number {
+        return this._selected;
+    }
+
+    set selected(value: number) {
+        this.setAttribute('selected', String(value));
+    }
+
+    /** Whether the tab bar hides itself when only one page remains. */
+    get autohide(): boolean {
+        return this.hasAttribute('autohide');
+    }
+
+    set autohide(value: boolean) {
+        if (value) this.setAttribute('autohide', '');
+        else this.removeAttribute('autohide');
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot the declared <adw-tab-page> children before we take over the
+        // subtree — their title attribute + content become the rendered pages.
+        const pages = Array.from(this.querySelectorAll('adw-tab-page')) as AdwTabPage[];
+
+        // The tab bar (headerbar-colored strip of chips), built first so it sits
+        // above the pages.
+        this._barEl = document.createElement('div');
+        this._barEl.className = 'adw-tab-bar';
+        this._barEl.setAttribute('role', 'tablist');
+
+        const tabBox = document.createElement('div');
+        tabBox.className = 'adw-tab-box';
+        this._barEl.appendChild(tabBox);
+
+        this._pagesEl = document.createElement('div');
+        this._pagesEl.className = 'adw-tab-view-pages';
+
+        this._tabs = [];
+        this._pages = [];
+
+        pages.forEach((page, index) => {
+            const title = page.getAttribute('title') ?? '';
+
+            const tab = document.createElement('button');
+            tab.type = 'button';
+            tab.className = 'adw-tab';
+            tab.setAttribute('role', 'tab');
+
+            const label = document.createElement('span');
+            label.className = 'adw-tab-title';
+            label.textContent = title;
+            tab.appendChild(label);
+
+            // Close affordance — a small flat button drawn with a CSS "×" glyph
+            // (no symbolic close icon ships in @gjsify/adwaita-icons).
+            const close = document.createElement('button');
+            close.type = 'button';
+            close.className = 'adw-tab-close';
+            close.setAttribute('aria-label', 'Close tab');
+            close.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.dispatchEvent(new CustomEvent('close-page', { bubbles: true, detail: { index } }));
+            });
+            tab.appendChild(close);
+
+            tab.addEventListener('click', () => this._selectIndex(index));
+            tabBox.appendChild(tab);
+            this._tabs.push(tab);
+
+            // The page content area — the declared element's children are moved
+            // into a panel that the view toggles visible.
+            const panel = document.createElement('div');
+            panel.className = 'adw-tab-page';
+            panel.setAttribute('role', 'tabpanel');
+            for (const child of Array.from(page.childNodes)) panel.appendChild(child);
+            this._pagesEl.appendChild(panel);
+            this._pages.push(panel);
+        });
+
+        this.replaceChildren(this._barEl, this._pagesEl);
+
+        this._selected = this._readSelectedAttr();
+        this._render();
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized) return;
+        if (name === 'selected') {
+            const next = this._readSelectedAttr();
+            if (next !== this._selected) {
+                this._selected = next;
+                this._render();
+            }
+            return;
+        }
+        // autohide is styling/visibility-only.
+        this._render();
+    }
+
+    private _readSelectedAttr(): number {
+        const raw = Number.parseInt(this.getAttribute('selected') ?? '0', 10);
+        if (Number.isNaN(raw)) return 0;
+        const max = Math.max(0, this._pages.length - 1);
+        return Math.min(Math.max(raw, 0), max);
+    }
+
+    private _selectIndex(index: number): void {
+        if (index === this._selected) return;
+        this._selected = index;
+        // Keep the attribute in sync without re-entering via the guarded
+        // attributeChangedCallback (value already matches, so it no-ops).
+        this.setAttribute('selected', String(index));
+        this._render();
+        this.dispatchEvent(new CustomEvent('notify::selected-page', { bubbles: true, detail: { selected: index } }));
+    }
+
+    private _render(): void {
+        // Autohide: collapse the bar when only one page (or none) remains.
+        const hidden = this.autohide && this._pages.length <= 1;
+        this._barEl.hidden = hidden;
+        this._barEl.classList.toggle('single-tab', this._pages.length <= 1);
+
+        this._tabs.forEach((tab, index) => {
+            const isActive = index === this._selected;
+            tab.classList.toggle('active', isActive);
+            tab.setAttribute('aria-selected', String(isActive));
+            tab.tabIndex = isActive ? 0 : -1;
+        });
+
+        this._pages.forEach((panel, index) => {
+            const isActive = index === this._selected;
+            panel.classList.toggle('active-page', isActive);
+            panel.hidden = !isActive;
+        });
+    }
+}
+
+customElements.define('adw-tab-page', AdwTabPage);
+customElements.define('adw-tab-view', AdwTabView);

package/src/elements/adw-toast-overlay.ts

@@ -1,44 +1,123 @@
 // <adw-toast-overlay> — Adwaita toast notification overlay.
-// Displays temporary feedback messages at the bottom of the viewport.
+// The web counterpart of Adw.ToastOverlay: it wraps arbitrary content and shows
+// transient `.adw-toast` banners (the Adw.Toast equivalent — a title, an
+// optional action button and a close affordance) layered over the bottom of its
+// own bounds, each auto-dismissing after a timeout.
 // Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
 // Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss, _toast_overlay.scss
-// Reference: refs/libadwaita/src/adw-toast-overlay.c
+// Reference: refs/libadwaita/src/adw-toast-overlay.c, adw-toast.c (Adw.Toast.add_toast)
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
-// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
+// extended addToast() with action button + close button + options API.
+
+/** Options for {@link AdwToastOverlay.addToast}, mirroring Adw.Toast's properties. */
+export interface AdwToastOptions {
+    /** Seconds before the toast auto-dismisses; `0` keeps it until dismissed. Mirrors Adw.Toast:timeout (default 5). */
+    timeout?: number;
+    /** Label for the action button; omitted/empty means no button. Mirrors Adw.Toast:button-label. */
+    buttonLabel?: string;
+    /** Invoked when the action button is pressed. Mirrors the activation of Adw.Toast:action-name. */
+    onAction?: () => void;
+}
 
 export class AdwToastOverlay extends HTMLElement {
+    private _toasts!: HTMLDivElement;
+    private _initialized = false;
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Adopt the declared children as the wrapped content (the Adw.ToastOverlay
+        // :child) and layer a dedicated toast container over the bottom edge.
+        const content = document.createElement('div');
+        content.className = 'adw-toast-overlay-content';
+        for (const child of Array.from(this.childNodes)) content.appendChild(child);
+
+        this._toasts = document.createElement('div');
+        this._toasts.className = 'adw-toast-overlay-toasts';
+
+        this.replaceChildren(content, this._toasts);
+    }
+
     /**
-     * Show a toast notification.
-     * @param title - The text to display.
-     * @param timeout - Time in ms before the toast auto-dismisses (default 2000).
+     * Show a toast notification — the web equivalent of Adw.ToastOverlay.add_toast()
+     * with a freshly-built Adw.Toast.
+     *
+     * @param title   The text to display.
+     * @param options Either a timeout in seconds (legacy shorthand) or an
+     *                {@link AdwToastOptions} bag (title text already supplied here).
      */
-    addToast(title: string, timeout = 2000): void {
+    addToast(title: string, options: number | AdwToastOptions = {}): void {
+        // Ensure the toast container exists even if addToast() races a not-yet
+        // connected element (mirrors Adw.ToastOverlay queuing before realize).
+        if (!this._toasts) this.connectedCallback();
+
+        // Back-compat: the original signature was addToast(title, timeoutMs).
+        const opts: AdwToastOptions =
+            typeof options === 'number' ? { timeout: options / 1000 } : options;
+        const timeoutSeconds = opts.timeout ?? 5;
+
         const toast = document.createElement('div');
         toast.className = 'adw-toast';
 
+        const wrapper = document.createElement('div');
+        wrapper.className = 'adw-toast-content-wrapper';
+
         const titleEl = document.createElement('span');
         titleEl.className = 'adw-toast-title';
         titleEl.textContent = title;
-        toast.appendChild(titleEl);
-
-        this.appendChild(toast);
+        wrapper.appendChild(titleEl);
+        toast.appendChild(wrapper);
 
-        // Trigger enter animation on next frame
-        requestAnimationFrame(() => {
-            toast.classList.add('visible');
-        });
-
-        // Auto-dismiss after timeout
-        setTimeout(() => {
+        let dismissTimer = 0;
+        const dismiss = (): void => {
+            if (dismissTimer) {
+                clearTimeout(dismissTimer);
+                dismissTimer = 0;
+            }
             toast.classList.remove('visible');
             toast.classList.add('hiding');
             toast.addEventListener('transitionend', () => toast.remove(), { once: true });
-            // Fallback if transitionend doesn't fire
+            // Fallback if transitionend doesn't fire (e.g. reduced motion).
             setTimeout(() => {
                 if (toast.parentNode) toast.remove();
             }, 300);
-        }, timeout);
+        };
+
+        if (opts.buttonLabel) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'adw-toast-action-button';
+            button.textContent = opts.buttonLabel;
+            button.addEventListener('click', () => {
+                opts.onAction?.();
+                dismiss();
+            });
+            toast.appendChild(button);
+        }
+
+        // Close affordance — a CSS-drawn "×" (no symbolic close icon ships in the
+        // curated @gjsify/adwaita-icons set), mirroring adw-tab-view's .adw-tab-close.
+        const close = document.createElement('button');
+        close.type = 'button';
+        close.className = 'adw-toast-close-button';
+        close.setAttribute('aria-label', 'Close');
+        close.addEventListener('click', dismiss);
+        toast.appendChild(close);
+
+        this._toasts.appendChild(toast);
+
+        // Trigger the enter animation on the next frame.
+        requestAnimationFrame(() => {
+            toast.classList.add('visible');
+        });
+
+        // Auto-dismiss after the timeout (0 = stay until manually dismissed).
+        if (timeoutSeconds > 0) {
+            dismissTimer = setTimeout(dismiss, timeoutSeconds * 1000) as unknown as number;
+        }
     }
 }
 

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

@@ -0,0 +1,126 @@
+// <adw-toggle-group> — A linked set of toggle buttons where exactly one is
+// active at a time (the web counterpart of Adw.ToggleGroup). Toggles are
+// declared as <adw-toggle> children with `label` and/or `icon-name` attributes;
+// the group renders them inside an inner container, tracks the active index, and
+// recolors the active toggle with the Adwaita active-toggle accent.
+// Attributes: active (zero-based index of the active toggle, default 0), and the
+//   style flags flat / round (mirroring the Adw.ToggleGroup `.flat` / `.round`
+//   style classes).
+// Events: `notify::active` (CustomEvent, bubbles, `detail = { active }`) when the
+//   active toggle changes — mirrors the Adw.ToggleGroup `active` GObject property.
+// Reference: refs/libadwaita/src/adw-toggle-group.c (AdwToggleGroup behaviour)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toggle-group.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_toggle_group.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** A single toggle. Children of <adw-toggle-group>; consumed at connect time. */
+export class AdwToggle extends HTMLElement {
+    static get observedAttributes() {
+        return ['label', 'icon-name'];
+    }
+}
+
+export class AdwToggleGroup extends HTMLElement {
+    private _innerEl!: HTMLDivElement;
+    private _buttons: HTMLButtonElement[] = [];
+    private _active = 0;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['active', 'flat', 'round'];
+    }
+
+    /** Zero-based index of the active toggle. */
+    get active(): number {
+        return this._active;
+    }
+
+    set active(value: number) {
+        this.setAttribute('active', String(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[];
+
+        this._innerEl = document.createElement('div');
+        this._innerEl.className = 'adw-toggle-group-inner';
+
+        this._buttons = toggles.map((toggle, index) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'adw-toggle';
+
+            const label = toggle.getAttribute('label') ?? '';
+            const icon = toggle.getAttribute('icon-name') ?? '';
+            if (icon) {
+                const span = document.createElement('span');
+                span.className = `adw-icon adw-icon--${icon}`;
+                span.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
+                btn.appendChild(span);
+            }
+            if (label) btn.appendChild(document.createTextNode(label));
+
+            // An icon-only toggle has no text — give it an accessible name.
+            if (icon && !label) btn.setAttribute('aria-label', icon);
+
+            btn.addEventListener('click', () => this._selectIndex(index));
+            return btn;
+        });
+
+        this._innerEl.append(...this._buttons);
+        this.replaceChildren(this._innerEl);
+
+        this._active = this._readActiveAttr();
+        this._render();
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized) return;
+        if (name === 'active') {
+            const next = this._readActiveAttr();
+            if (next !== this._active) {
+                this._active = next;
+                this._render();
+            }
+            return;
+        }
+        // flat / round are styling-only.
+        this._render();
+    }
+
+    private _readActiveAttr(): number {
+        const raw = Number.parseInt(this.getAttribute('active') ?? '0', 10);
+        if (Number.isNaN(raw)) return 0;
+        const max = Math.max(0, this._buttons.length - 1);
+        return Math.min(Math.max(raw, 0), max);
+    }
+
+    private _selectIndex(index: number): void {
+        if (index === this._active) return;
+        this._active = index;
+        // Keep the attribute in sync without re-entering via the guarded
+        // attributeChangedCallback (value already matches, so it no-ops).
+        this.setAttribute('active', String(index));
+        this._render();
+        this.dispatchEvent(new CustomEvent('notify::active', { bubbles: true, detail: { active: index } }));
+    }
+
+    private _render(): void {
+        this.classList.toggle('flat', this.hasAttribute('flat'));
+        this.classList.toggle('round', this.hasAttribute('round'));
+        this._buttons.forEach((btn, index) => {
+            const isActive = index === this._active;
+            btn.classList.toggle('active', isActive);
+            btn.setAttribute('aria-pressed', String(isActive));
+        });
+    }
+}
+
+customElements.define('adw-toggle', AdwToggle);
+customElements.define('adw-toggle-group', AdwToggleGroup);

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

@@ -0,0 +1,60 @@
+// <adw-toolbar-view> — A content area framed by flat top and/or bottom bars
+// (typically header bars). Mirrors Adw.ToolbarView.
+// Slots: slot="top" (top bars, stacked), slot="bottom" (bottom bars), and any
+//   remaining children become the scrollable content.
+// Reference: refs/adwaita-web/adwaita-web/docs/widgets/toolbarview.md
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwToolbarView extends HTMLElement {
+    private _topEl!: HTMLDivElement;
+    private _contentEl!: HTMLDivElement;
+    private _bottomEl!: HTMLDivElement;
+    private _initialized = false;
+
+    /** The top-bar container — append header bars here imperatively. */
+    get topBar(): HTMLDivElement {
+        return this._topEl;
+    }
+
+    /** The scrollable content container. */
+    get contentArea(): HTMLDivElement {
+        return this._contentEl;
+    }
+
+    /** The bottom-bar container. */
+    get bottomBar(): HTMLDivElement {
+        return this._bottomEl;
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const topChildren = Array.from(this.querySelectorAll(':scope > [slot="top"]'));
+        const bottomChildren = Array.from(this.querySelectorAll(':scope > [slot="bottom"]'));
+        const contentChildren = Array.from(this.childNodes).filter(
+            (n) => !topChildren.includes(n as Element) && !bottomChildren.includes(n as Element),
+        );
+
+        this._topEl = document.createElement('div');
+        this._topEl.className = 'adw-toolbar-view-top';
+        for (const child of topChildren) this._topEl.appendChild(child);
+
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-toolbar-view-content';
+        for (const child of contentChildren) this._contentEl.appendChild(child);
+
+        this._bottomEl = document.createElement('div');
+        this._bottomEl.className = 'adw-toolbar-view-bottom';
+        for (const child of bottomChildren) this._bottomEl.appendChild(child);
+
+        this._topEl.hidden = this._topEl.childElementCount === 0;
+        this._bottomEl.hidden = this._bottomEl.childElementCount === 0;
+
+        this.replaceChildren(this._topEl, this._contentEl, this._bottomEl);
+    }
+}
+
+customElements.define('adw-toolbar-view', AdwToolbarView);