@gjsify/adwaita-web 0.11.0 → 0.12.0

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

@@ -0,0 +1,167 @@
+// <adw-expander-row> — A boxed-list row that discloses nested rows when expanded,
+// with an optional enable switch. Mirrors Adw.ExpanderRow.
+// Attributes: title, subtitle, expanded (boolean), enable-expansion (boolean),
+//   show-enable-switch (boolean).
+// Slots: slot="prefix" / slot="suffix" widgets sit in the header row beside the
+//   title (before the enable switch + disclosure chevron), like Adw.ExpanderRow's
+//   add_prefix / add_suffix; any other child <adw-*-row> is moved into the
+//   disclosed content listbox.
+// Properties: expanded, enableExpansion (get/set, reflect to attributes).
+// Events: notify::expanded (CustomEvent), notify::enable-expansion (CustomEvent)
+//   — mirror Adw.ExpanderRow's GObject signal names so the same code path drives
+//   both the web and GTK renderers.
+// Reference: refs/adwaita-web/adwaita-web/scss/_expander_row.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_expander-row.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwExpanderRow extends HTMLElement {
+    private _headerEl!: HTMLDivElement;
+    private _titleEl!: HTMLSpanElement;
+    private _subtitleEl!: HTMLSpanElement;
+    private _enableSwitch!: HTMLInputElement;
+    private _enableLabel!: HTMLLabelElement;
+    private _chevronEl!: HTMLSpanElement;
+    private _contentEl!: HTMLDivElement;
+    private _prefixEl!: HTMLDivElement;
+    private _suffixEl!: HTMLDivElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['title', 'subtitle', 'expanded', 'enable-expansion', 'show-enable-switch'];
+    }
+
+    get expanded(): boolean {
+        return this.hasAttribute('expanded');
+    }
+
+    set expanded(value: boolean) {
+        if (value) this.setAttribute('expanded', '');
+        else this.removeAttribute('expanded');
+    }
+
+    get enableExpansion(): boolean {
+        return !this.hasAttribute('enable-expansion') || this.getAttribute('enable-expansion') !== 'false';
+    }
+
+    set enableExpansion(value: boolean) {
+        this.setAttribute('enable-expansion', value ? 'true' : 'false');
+    }
+
+    /** The disclosed content section — append nested rows here imperatively. */
+    get contentSection(): HTMLDivElement {
+        return this._contentEl;
+    }
+
+    /** The header suffix section — append controls here imperatively. */
+    get suffixSection(): HTMLDivElement {
+        return this._suffixEl;
+    }
+
+    /** The header prefix section — append icons/widgets here imperatively. */
+    get prefixSection(): HTMLDivElement {
+        return this._prefixEl;
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Slotted prefix/suffix widgets go in the header; everything else is a
+        // nested row to disclose.
+        const prefixChildren = Array.from(this.querySelectorAll(':scope > [slot="prefix"]'));
+        const suffixChildren = Array.from(this.querySelectorAll(':scope > [slot="suffix"]'));
+        const claimed = new Set<Node>([...prefixChildren, ...suffixChildren]);
+        const rows = Array.from(this.childNodes).filter((node) => !claimed.has(node));
+
+        // Header row — looks like an action row: a text column, an optional
+        // enable switch, and the disclosure chevron.
+        this._headerEl = document.createElement('div');
+        this._headerEl.className = 'adw-expander-row-header';
+
+        const textEl = document.createElement('div');
+        textEl.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';
+        textEl.append(this._titleEl, this._subtitleEl);
+
+        // Optional enable switch (the same toggle Adw.ExpanderRow shows when
+        // show-enable-switch is set). Clicking it does NOT toggle the disclosure.
+        this._enableLabel = document.createElement('label');
+        this._enableLabel.className = 'adw-switch adw-expander-row-enable-switch';
+        this._enableSwitch = document.createElement('input');
+        this._enableSwitch.type = 'checkbox';
+        this._enableSwitch.checked = this.enableExpansion;
+        const slider = document.createElement('span');
+        slider.className = 'adw-switch-slider';
+        this._enableLabel.append(this._enableSwitch, slider);
+
+        this._chevronEl = document.createElement('span');
+        this._chevronEl.className = 'adw-icon adw-icon--go-down adw-expander-row-chevron';
+
+        // Header prefix / suffix widget slots (Adw.ExpanderRow add_prefix/add_suffix).
+        this._prefixEl = document.createElement('div');
+        this._prefixEl.className = 'adw-expander-row-prefix';
+        for (const child of prefixChildren) this._prefixEl.appendChild(child);
+
+        this._suffixEl = document.createElement('div');
+        this._suffixEl.className = 'adw-expander-row-suffix';
+        for (const child of suffixChildren) this._suffixEl.appendChild(child);
+
+        this._headerEl.append(this._prefixEl, textEl, this._suffixEl, this._enableLabel, this._chevronEl);
+
+        // Disclosed content — a nested listbox holding the rows.
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-expander-row-content';
+        for (const row of rows) this._contentEl.appendChild(row);
+
+        this.replaceChildren(this._headerEl, this._contentEl);
+
+        this._headerEl.addEventListener('click', (event) => {
+            // Clicks on the enable switch toggle expansion-enable, not disclosure.
+            if (this._enableLabel.contains(event.target as Node)) return;
+            this.expanded = !this.expanded;
+            this.dispatchEvent(
+                new CustomEvent('notify::expanded', { bubbles: true, detail: { expanded: this.expanded } }),
+            );
+        });
+
+        this._enableSwitch.addEventListener('change', () => {
+            this.setAttribute('enable-expansion', this._enableSwitch.checked ? 'true' : 'false');
+            this.dispatchEvent(
+                new CustomEvent('notify::enable-expansion', {
+                    bubbles: true,
+                    detail: { enableExpansion: this._enableSwitch.checked },
+                }),
+            );
+        });
+
+        this._render();
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._render();
+    }
+
+    private _render() {
+        const title = this.getAttribute('title') ?? '';
+        const subtitle = this.getAttribute('subtitle') ?? '';
+        this._titleEl.textContent = title;
+        this._subtitleEl.textContent = subtitle;
+        this._subtitleEl.hidden = subtitle.length === 0;
+
+        const showSwitch = this.hasAttribute('show-enable-switch');
+        this._enableLabel.hidden = !showSwitch;
+        this._enableSwitch.checked = this.enableExpansion;
+
+        this._prefixEl.hidden = this._prefixEl.childElementCount === 0;
+        this._suffixEl.hidden = this._suffixEl.childElementCount === 0;
+
+        this.classList.toggle('expanded', this.expanded);
+        this._contentEl.classList.toggle('expanded', this.expanded);
+    }
+}
+
+customElements.define('adw-expander-row', AdwExpanderRow);

package/src/elements/adw-header-bar.ts

@@ -6,6 +6,7 @@
 export class AdwHeaderBar extends HTMLElement {
     private _initialized = false;
     private _startEl: HTMLDivElement | null = null;
+    private _centerEl: HTMLDivElement | null = null;
     private _endEl: HTMLDivElement | null = null;
 
     /** The start (left) section container — append buttons/widgets here. */
@@ -13,6 +14,12 @@ export class AdwHeaderBar extends HTMLElement {
         return this._startEl;
     }
 
+    /** The center (title) section — holds the `title` text or any `slot="center"`
+     * widget (the equivalent of Adw.HeaderBar's title-widget, e.g. a URL entry). */
+    get centerSection(): HTMLDivElement | null {
+        return this._centerEl;
+    }
+
     /** The end (right) section container — append buttons/widgets here. */
     get endSection(): HTMLDivElement | null {
         return this._endEl;
@@ -26,6 +33,7 @@ export class AdwHeaderBar extends HTMLElement {
 
         // Capture any pre-existing slotted children before clearing
         const startChildren = Array.from(this.querySelectorAll(':scope > [slot="start"]'));
+        const centerChildren = Array.from(this.querySelectorAll(':scope > [slot="center"]'));
         const endChildren = Array.from(this.querySelectorAll(':scope > [slot="end"]'));
 
         // Start section
@@ -33,13 +41,18 @@ export class AdwHeaderBar extends HTMLElement {
         this._startEl.className = 'adw-header-bar-start';
         for (const child of startChildren) this._startEl.appendChild(child);
 
-        // Center section with title
-        const center = document.createElement('div');
-        center.className = 'adw-header-bar-center';
-        const titleEl = document.createElement('span');
-        titleEl.className = 'adw-header-bar-title';
-        titleEl.textContent = title;
-        center.appendChild(titleEl);
+        // Center section — a `slot="center"` widget (title-widget) wins over the
+        // plain `title` text.
+        this._centerEl = document.createElement('div');
+        this._centerEl.className = 'adw-header-bar-center';
+        if (centerChildren.length > 0) {
+            for (const child of centerChildren) this._centerEl.appendChild(child);
+        } else {
+            const titleEl = document.createElement('span');
+            titleEl.className = 'adw-header-bar-title';
+            titleEl.textContent = title;
+            this._centerEl.appendChild(titleEl);
+        }
 
         // End section
         this._endEl = document.createElement('div');
@@ -47,7 +60,7 @@ export class AdwHeaderBar extends HTMLElement {
         for (const child of endChildren) this._endEl.appendChild(child);
 
         // Replace all children atomically
-        this.replaceChildren(this._startEl, center, this._endEl);
+        this.replaceChildren(this._startEl, this._centerEl, this._endEl);
     }
 }
 

package/src/elements/adw-inline-view-switcher.ts

@@ -0,0 +1,222 @@
+// <adw-inline-view-switcher> — A compact, toolbar-friendly view switcher (the
+// web counterpart of Adw.InlineViewSwitcher). It pairs a toggle-group-style
+// switcher bar with a stack of pages: each declared <adw-view-stack-page> child
+// (with a `title` and/or `icon-name` attribute plus arbitrary content) becomes a
+// toggle in the bar and a panel in the stack, and exactly one page is visible at
+// a time. The toggles can show labels, icons, or both via `display-mode`, just
+// like the native widget's AdwInlineViewSwitcherDisplayMode.
+// Attributes:
+//   active (zero-based index of the visible page, default 0)
+//   display-mode (labels | icons | both, default both) — what the toggles show
+//   flat / round (mirroring the Adw.InlineViewSwitcher `.flat` / `.round` style
+//     classes, which it inherits from Adw.ToggleGroup)
+// Events:
+//   `notify::active` (CustomEvent, bubbles, `detail = { active }`) when the
+//     visible page changes — mirrors selecting a page in the paired Adw.ViewStack.
+//   `notify::display-mode` (CustomEvent, bubbles, `detail = { displayMode }`)
+//     when the display mode changes — mirrors the Adw.InlineViewSwitcher
+//     `display-mode` GObject property.
+// Reference: refs/libadwaita/src/adw-inline-view-switcher.c (AdwInlineViewSwitcher behaviour)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toggle-group.scss (inline-view-switcher > toggle-group)
+// Reference: refs/adwaita-web/adwaita-web/scss/_viewswitcher.scss
+// Copyright (c) 2023 Maximiliano Sandoval / 2024 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** The three display modes, mirroring AdwInlineViewSwitcherDisplayMode. */
+const DISPLAY_MODES = ['labels', 'icons', 'both'] as const;
+type DisplayMode = (typeof DISPLAY_MODES)[number];
+
+/** A single page. Children of <adw-inline-view-switcher>; consumed at connect time. */
+export class AdwViewStackPage extends HTMLElement {
+    static get observedAttributes() {
+        return ['title', 'icon-name'];
+    }
+}
+
+export class AdwInlineViewSwitcher extends HTMLElement {
+    private _groupEl!: HTMLDivElement;
+    private _pagesEl!: HTMLDivElement;
+    private _toggles: HTMLButtonElement[] = [];
+    private _pages: HTMLDivElement[] = [];
+    private _active = 0;
+    private _displayMode: DisplayMode = 'both';
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['active', 'display-mode', 'flat', 'round'];
+    }
+
+    /** Zero-based index of the visible page. */
+    get active(): number {
+        return this._active;
+    }
+
+    set active(value: number) {
+        this.setAttribute('active', String(value));
+    }
+
+    /** What the toggles display: 'labels', 'icons' or 'both'. */
+    get displayMode(): DisplayMode {
+        return this._displayMode;
+    }
+
+    set displayMode(value: DisplayMode) {
+        this.setAttribute('display-mode', value);
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot the declared <adw-view-stack-page> children before we take
+        // over the subtree — their title / icon-name + content become the
+        // rendered toggles and panels.
+        const pages = Array.from(this.querySelectorAll('adw-view-stack-page')) as AdwViewStackPage[];
+
+        // The switcher bar — a toggle-group of one toggle per page.
+        this._groupEl = document.createElement('div');
+        this._groupEl.className = 'adw-inline-view-switcher-group';
+        this._groupEl.setAttribute('role', 'tablist');
+
+        this._pagesEl = document.createElement('div');
+        this._pagesEl.className = 'adw-inline-view-switcher-pages';
+
+        this._toggles = [];
+        this._pages = [];
+
+        pages.forEach((page, index) => {
+            const title = page.getAttribute('title') ?? '';
+            const icon = (page.getAttribute('icon-name') ?? '').replace(/-symbolic$/, '');
+
+            const toggle = document.createElement('button');
+            toggle.type = 'button';
+            toggle.className = 'adw-inline-view-switcher-toggle';
+            toggle.setAttribute('role', 'tab');
+            // The toggle stores both title + icon; _render() shows the parts the
+            // current display mode calls for (mirrors libadwaita rebuilding the
+            // toggle child on a display-mode change).
+            toggle.dataset.title = title;
+            toggle.dataset.icon = icon;
+
+            const iconEl = document.createElement('span');
+            iconEl.className = `adw-icon${icon ? ` adw-icon--${icon}` : ''} adw-inline-view-switcher-icon`;
+            iconEl.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
+            toggle.appendChild(iconEl);
+
+            const labelEl = document.createElement('span');
+            labelEl.className = 'adw-inline-view-switcher-label';
+            labelEl.textContent = title;
+            toggle.appendChild(labelEl);
+
+            toggle.addEventListener('click', () => this._selectIndex(index));
+            this._groupEl.appendChild(toggle);
+            this._toggles.push(toggle);
+
+            // The page content area — the declared element's children are moved
+            // into a panel that the switcher toggles visible.
+            const panel = document.createElement('div');
+            panel.className = 'adw-inline-view-switcher-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._groupEl, this._pagesEl);
+
+        this._active = this._readActiveAttr();
+        this._displayMode = this._readDisplayModeAttr();
+        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;
+        }
+        if (name === 'display-mode') {
+            const next = this._readDisplayModeAttr();
+            if (next !== this._displayMode) {
+                this._displayMode = 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._pages.length - 1);
+        return Math.min(Math.max(raw, 0), max);
+    }
+
+    private _readDisplayModeAttr(): DisplayMode {
+        const raw = this.getAttribute('display-mode') ?? 'both';
+        return (DISPLAY_MODES as readonly string[]).includes(raw) ? (raw as DisplayMode) : 'both';
+    }
+
+    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'));
+
+        // The bar carries the active display mode as a class — mirrors
+        // libadwaita's inline-view-switcher > toggle-group.{labels,icons,both}.
+        for (const mode of DISPLAY_MODES) this._groupEl.classList.toggle(mode, mode === this._displayMode);
+
+        const showIcon = this._displayMode !== 'labels';
+        const showLabel = this._displayMode !== 'icons';
+
+        this._toggles.forEach((toggle, index) => {
+            const isActive = index === this._active;
+            toggle.classList.toggle('active', isActive);
+            toggle.setAttribute('aria-selected', String(isActive));
+            toggle.tabIndex = isActive ? 0 : -1;
+
+            const iconEl = toggle.querySelector('.adw-inline-view-switcher-icon') as HTMLElement | null;
+            const labelEl = toggle.querySelector('.adw-inline-view-switcher-label') as HTMLElement | null;
+            const hasIcon = (toggle.dataset.icon ?? '').length > 0;
+            const title = toggle.dataset.title ?? '';
+
+            if (iconEl) iconEl.hidden = !showIcon || !hasIcon;
+            if (labelEl) labelEl.hidden = !showLabel || title.length === 0;
+
+            // In icons-only mode the toggle has no visible text — surface the
+            // title as an accessible name + a hover tooltip (the native widget
+            // sets the toggle tooltip to the page title in ICONS mode).
+            if (!showLabel && title) {
+                toggle.setAttribute('aria-label', title);
+                toggle.title = title;
+            } else {
+                toggle.removeAttribute('aria-label');
+                toggle.removeAttribute('title');
+            }
+        });
+
+        this._pages.forEach((panel, index) => {
+            const isActive = index === this._active;
+            panel.classList.toggle('active-view', isActive);
+            panel.hidden = !isActive;
+        });
+    }
+}
+
+customElements.define('adw-view-stack-page', AdwViewStackPage);
+customElements.define('adw-inline-view-switcher', AdwInlineViewSwitcher);

package/src/elements/adw-navigation-split-view.ts

@@ -0,0 +1,89 @@
+// <adw-navigation-split-view> — A docked sidebar beside content. Both panes are
+// visible when expanded; when `collapsed` it shows one pane at a time
+// (`show-content` decides which), mirroring Adw.NavigationSplitView's
+// push-navigation on narrow widths.
+// Attributes: collapsed, show-content, min-sidebar-width, max-sidebar-width.
+// Slots: slot="sidebar", slot="content".
+// Reference: refs/adwaita-web/adwaita-web/docs/widgets/navigationsplitview.md
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwNavigationSplitView extends HTMLElement {
+    private _sidebarEl!: HTMLDivElement;
+    private _contentEl!: HTMLDivElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['collapsed', 'show-content', 'min-sidebar-width', 'max-sidebar-width'];
+    }
+
+    get collapsed(): boolean {
+        return this.hasAttribute('collapsed');
+    }
+
+    set collapsed(v: boolean) {
+        this.toggleAttribute('collapsed', v);
+    }
+
+    /** When collapsed, whether the content pane (true) or sidebar (false) shows. */
+    get showContent(): boolean {
+        return this.hasAttribute('show-content');
+    }
+
+    set showContent(v: boolean) {
+        this.toggleAttribute('show-content', v);
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const sidebarChildren = Array.from(this.querySelectorAll(':scope > [slot="sidebar"]'));
+        const contentChildren = Array.from(this.querySelectorAll(':scope > [slot="content"]'));
+
+        this._sidebarEl = document.createElement('div');
+        this._sidebarEl.className = 'adw-nsv-sidebar';
+        for (const child of sidebarChildren) this._sidebarEl.appendChild(child);
+
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-nsv-content';
+        for (const child of contentChildren) this._contentEl.appendChild(child);
+
+        this.replaceChildren(this._sidebarEl, this._contentEl);
+        this._syncWidth();
+        this._syncClasses();
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized) return;
+        if (name === 'min-sidebar-width' || name === 'max-sidebar-width') this._syncWidth();
+        else {
+            this._syncClasses();
+            // Collapsing flips whether the sidebar is width-capped, so re-apply.
+            this._syncWidth();
+        }
+    }
+
+    private _syncWidth() {
+        // When collapsed the visible pane fills the whole view, so the sidebar's
+        // min/max width caps must not apply (an inline cap would otherwise win
+        // over any stylesheet rule and leave a dead strip beside the pane).
+        if (this.collapsed) {
+            this._sidebarEl.style.minWidth = '';
+            this._sidebarEl.style.maxWidth = '';
+            return;
+        }
+        const min = this.getAttribute('min-sidebar-width');
+        const max = this.getAttribute('max-sidebar-width');
+        this._sidebarEl.style.minWidth = min ? `${parseFloat(min)}px` : '';
+        this._sidebarEl.style.maxWidth = max ? `${parseFloat(max)}px` : '';
+    }
+
+    private _syncClasses() {
+        this.classList.toggle('collapsed', this.collapsed);
+        this.classList.toggle('show-content', this.showContent);
+    }
+}
+
+customElements.define('adw-navigation-split-view', AdwNavigationSplitView);