@gjsify/adwaita-web 0.10.0 → 0.12.0

package/src/elements/adw-bottom-sheet.ts

@@ -0,0 +1,205 @@
+// <adw-bottom-sheet> — A content area with a sheet that slides up from the
+// bottom edge over the content (the web counterpart of Adw.BottomSheet). The
+// content is shown persistently; the sheet is displayed above it when `open` is
+// set, with an overlaid drag handle by default. When `modal` is set, a dimming
+// layer covers the content and dismisses the sheet on click (unless `can-close`
+// is false, in which case a close attempt is signalled instead).
+//
+// Children are declared as <adw-bottom-sheet-content> (the persistent content)
+// and <adw-bottom-sheet-sheet> (the slide-up sheet); both are consumed at
+// connect time. Unslotted children fall back to the content, mirroring the
+// AdwBottomSheet GtkBuildable default (omitting the child type sets content).
+//
+// Attributes:
+//   open             (boolean — whether the sheet is revealed; default closed)
+//   modal            (boolean — dim + block the content while open; default on)
+//   can-close        (boolean — user can dismiss via the handle / dimming / Esc;
+//                       default on. When off, a dismissal raises `close-attempt`
+//                       instead of closing — mirrors Adw.BottomSheet:can-close)
+//   show-drag-handle (boolean — overlay the drag handle on the sheet; default on)
+//
+// Events:
+//   `notify::open` (CustomEvent, bubbles, `detail = { open }`) when the revealed
+//     state changes — mirrors the Adw.BottomSheet `open` GObject property.
+//   `close-attempt` (CustomEvent, bubbles) when a dismissal is attempted while
+//     `can-close` is false — mirrors the Adw.BottomSheet `close-attempt` signal.
+//
+// Reference: refs/libadwaita/src/adw-bottom-sheet.c (AdwBottomSheet behaviour)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_bottom-sheet.scss
+// Copyright (c) 2023-2024 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** The persistent content. Child of <adw-bottom-sheet>; consumed at connect time. */
+export class AdwBottomSheetContent extends HTMLElement {}
+
+/** The slide-up sheet. Child of <adw-bottom-sheet>; consumed at connect time. */
+export class AdwBottomSheetSheet extends HTMLElement {}
+
+export class AdwBottomSheet extends HTMLElement {
+    private _initialized = false;
+    private _contentEl!: HTMLDivElement;
+    private _dimmingEl!: HTMLDivElement;
+    private _sheetEl!: HTMLDivElement;
+    private _dragHandleEl!: HTMLDivElement;
+
+    static get observedAttributes() {
+        return ['open', 'modal', 'can-close', 'show-drag-handle'];
+    }
+
+    /** Whether the sheet is revealed. */
+    get open(): boolean {
+        return this.hasAttribute('open');
+    }
+
+    set open(value: boolean) {
+        if (value) this.setAttribute('open', '');
+        else this.removeAttribute('open');
+    }
+
+    /** Whether the content is dimmed + blocked while the sheet is open. */
+    get modal(): boolean {
+        return this._boolAttr('modal');
+    }
+
+    set modal(value: boolean) {
+        this._setBoolAttr('modal', value);
+    }
+
+    /** Whether the user can dismiss the sheet (handle / dimming / Escape). */
+    get canClose(): boolean {
+        return this._boolAttr('can-close');
+    }
+
+    set canClose(value: boolean) {
+        this._setBoolAttr('can-close', value);
+    }
+
+    /** Whether the overlaid drag handle is shown. */
+    get showDragHandle(): boolean {
+        return this._boolAttr('show-drag-handle');
+    }
+
+    set showDragHandle(value: boolean) {
+        this._setBoolAttr('show-drag-handle', value);
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot declared children before taking over the subtree. The sheet
+        // and content are placed by slot; anything unslotted falls back to the
+        // content (the AdwBottomSheet GtkBuildable default).
+        const sheetChildren = this._collectSlot('adw-bottom-sheet-sheet', 'sheet');
+        const contentChildren = this._collectSlot('adw-bottom-sheet-content', 'content');
+        const claimed = new Set<Node>([...sheetChildren, ...contentChildren]);
+        const unslotted = Array.from(this.childNodes).filter((n) => !claimed.has(n));
+
+        // Persistent content layer.
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-bottom-sheet-content';
+        for (const child of contentChildren) this._contentEl.appendChild(child);
+        for (const child of unslotted) this._contentEl.appendChild(child);
+
+        // Dimming layer — covers the content while the sheet is open (modal).
+        // Clicking it dismisses the sheet (or raises close-attempt when locked).
+        this._dimmingEl = document.createElement('div');
+        this._dimmingEl.className = 'adw-bottom-sheet-dimming';
+        this._dimmingEl.addEventListener('click', () => this._attemptClose());
+
+        // The slide-up sheet with its overlaid drag handle.
+        this._sheetEl = document.createElement('div');
+        this._sheetEl.className = 'adw-bottom-sheet-sheet';
+
+        this._dragHandleEl = document.createElement('div');
+        this._dragHandleEl.className = 'adw-bottom-sheet-drag-handle';
+        this._dragHandleEl.setAttribute('role', 'button');
+        this._dragHandleEl.setAttribute('aria-label', 'Drag handle');
+        this._dragHandleEl.tabIndex = 0;
+        // The handle is the primary pointer affordance for closing the sheet.
+        this._dragHandleEl.addEventListener('click', () => this._attemptClose());
+        this._dragHandleEl.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this._attemptClose();
+            }
+        });
+
+        const sheetBody = document.createElement('div');
+        sheetBody.className = 'adw-bottom-sheet-sheet-body';
+        for (const child of sheetChildren) sheetBody.appendChild(child);
+
+        this._sheetEl.append(this._dragHandleEl, sheetBody);
+
+        this.replaceChildren(this._contentEl, this._dimmingEl, this._sheetEl);
+
+        // Escape closes the sheet when open (mirrors AdwBottomSheet's Escape
+        // shortcut → maybe_close_cb).
+        this.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape' && this.open) {
+                event.stopPropagation();
+                this._attemptClose();
+            }
+        });
+
+        this._render();
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        if (!this._initialized) return;
+        if (oldValue === newValue) return;
+        this._render();
+        if (name === 'open') {
+            this.dispatchEvent(new CustomEvent('notify::open', { bubbles: true, detail: { open: this.open } }));
+        }
+    }
+
+    private _attemptClose(): void {
+        if (!this.open) return;
+        if (!this.canClose) {
+            this.dispatchEvent(new CustomEvent('close-attempt', { bubbles: true }));
+            return;
+        }
+        // Keep the attribute in sync without re-entering the guarded callback
+        // (it no-ops on an unchanged value, but the notify::open fires from the
+        // attribute write below).
+        this.open = false;
+    }
+
+    private _render(): void {
+        this.classList.toggle('open', this.open);
+        this.classList.toggle('modal', this.modal);
+        this.classList.toggle('has-drag-handle', this.showDragHandle);
+
+        // The dimming layer is only meaningful while modal; it fades in with the
+        // sheet and is non-interactive when closed.
+        this._dimmingEl.classList.toggle('visible', this.open && this.modal);
+        this._dragHandleEl.hidden = !this.showDragHandle;
+    }
+
+    /** Read a boolean attribute that defaults to `true` when absent. */
+    private _boolAttr(name: string): boolean {
+        const value = this.getAttribute(name);
+        // Absent attribute → default on; explicit `="false"` → off.
+        if (value === null) return name === 'modal' || name === 'can-close' || name === 'show-drag-handle';
+        return value !== 'false';
+    }
+
+    private _setBoolAttr(name: string, value: boolean): void {
+        if (value) this.setAttribute(name, '');
+        else this.setAttribute(name, 'false');
+    }
+
+    /** Move declared slot children out of the light-DOM tree into a list. */
+    private _collectSlot(tag: string, slot: string): Node[] {
+        const byElement = Array.from(this.querySelectorAll(`:scope > ${tag}`)).flatMap((el) =>
+            Array.from(el.childNodes),
+        );
+        const bySlotAttr = Array.from(this.querySelectorAll(`:scope > [slot="${slot}"]`));
+        return [...byElement, ...bySlotAttr];
+    }
+}
+
+customElements.define('adw-bottom-sheet-content', AdwBottomSheetContent);
+customElements.define('adw-bottom-sheet-sheet', AdwBottomSheetSheet);
+customElements.define('adw-bottom-sheet', AdwBottomSheet);

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

@@ -0,0 +1,69 @@
+// <adw-button-content> — a box-like child pairing a symbolic icon with a label,
+// intended as the child of an <adw-button> (or Gtk.Button / MenuButton /
+// SplitButton in libadwaita) when it needs both an icon and a label. With
+// `can-shrink` the label ellipsizes instead of forcing the button wider.
+// Attributes: icon-name (symbolic name, e.g. "folder-download"; empty hides the
+//   icon), label (empty hides the label), can-shrink (boolean — label
+//   ellipsizes when set).
+// Events: `notify::icon-name`, `notify::label`, `notify::can-shrink`
+//   (CustomEvent, bubbles) mirroring the AdwButtonContent GObject notify signals
+//   the native story observes.
+// Reference: refs/libadwaita/src/adw-button-content.c (AdwButtonContent)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss (buttoncontent)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwButtonContent extends HTMLElement {
+    private _boxEl!: HTMLDivElement;
+    private _iconEl!: HTMLSpanElement;
+    private _labelEl!: HTMLSpanElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['icon-name', 'label', 'can-shrink'];
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // CSS node mirrors libadwaita's `buttoncontent > box > {image, label}`.
+        this._boxEl = document.createElement('div');
+        this._boxEl.className = 'adw-button-content-box';
+
+        this._iconEl = document.createElement('span');
+        // The image node is GTK_ACCESSIBLE_ROLE_PRESENTATION in libadwaita —
+        // it is decorative, the label carries the accessible name.
+        this._iconEl.setAttribute('aria-hidden', 'true');
+
+        this._labelEl = document.createElement('span');
+        this._labelEl.className = 'adw-button-content-label';
+
+        this._boxEl.append(this._iconEl, this._labelEl);
+        this.replaceChildren(this._boxEl);
+        this._render();
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized) return;
+        this._render();
+        // Mirror the AdwButtonContent notify::<prop> signals the native story
+        // listens to (icon-name / label / can-shrink).
+        this.dispatchEvent(new CustomEvent(`notify::${name}`, { bubbles: true }));
+    }
+
+    private _render() {
+        const icon = this.getAttribute('icon-name') ?? '';
+        this._iconEl.className = icon ? `adw-icon adw-icon--${icon}` : '';
+        this._iconEl.hidden = icon.length === 0;
+
+        const label = this.getAttribute('label') ?? '';
+        this._labelEl.textContent = label;
+        this._labelEl.hidden = label.length === 0;
+
+        // can-shrink → ellipsize the label (Gtk.Label PANGO_ELLIPSIZE_END).
+        this.classList.toggle('can-shrink', this.hasAttribute('can-shrink'));
+    }
+}
+
+customElements.define('adw-button-content', AdwButtonContent);

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

@@ -0,0 +1,75 @@
+// <adw-button-row> — A boxed-list row that behaves like a button: a centered
+// title with an optional start icon, spanning the full width of the list. The
+// `suggested-action` / `destructive-action` style classes recolor it like the
+// matching Adwaita button variants.
+// Attributes: title, start-icon-name (symbolic name, e.g. "list-add"),
+//   activatable (default on — matches Adw.ButtonRow).
+// Events: `activated` (CustomEvent, bubbles) when the row is clicked — mirrors
+//   the Adw.ButtonRow `activated` GObject signal.
+// Reference: refs/libadwaita/src/adw-button-row.ui (AdwButtonRow template)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (row.button)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwButtonRow extends HTMLElement {
+    private _contentsEl!: HTMLDivElement;
+    private _startIconEl!: HTMLSpanElement;
+    private _titleEl!: HTMLSpanElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['title', 'start-icon-name', 'activatable'];
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Adw.ButtonRow is activatable by default; only an explicit
+        // activatable="false" turns it off.
+        if (!this.hasAttribute('activatable')) {
+            this.setAttribute('activatable', '');
+        }
+
+        this._contentsEl = document.createElement('div');
+        this._contentsEl.className = 'adw-button-row-contents';
+
+        this._startIconEl = document.createElement('span');
+        this._startIconEl.setAttribute('aria-hidden', 'true');
+
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-button-row-title';
+
+        this._contentsEl.append(this._startIconEl, this._titleEl);
+        this.replaceChildren(this._contentsEl);
+        this._render();
+
+        this.addEventListener('click', () => {
+            if (this._isActivatable()) {
+                this.dispatchEvent(new CustomEvent('activated', { bubbles: true }));
+            }
+        });
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._render();
+    }
+
+    private _isActivatable(): boolean {
+        return this.getAttribute('activatable') !== 'false';
+    }
+
+    private _render() {
+        const title = this.getAttribute('title') ?? '';
+        this._titleEl.textContent = title;
+        this._titleEl.hidden = title.length === 0;
+
+        const icon = this.getAttribute('start-icon-name') ?? '';
+        this._startIconEl.className = icon ? `adw-icon adw-icon--${icon}` : '';
+        this._startIconEl.hidden = icon.length === 0;
+
+        this.classList.toggle('activatable', this._isActivatable());
+    }
+}
+
+customElements.define('adw-button-row', AdwButtonRow);

package/src/elements/adw-button.ts

@@ -0,0 +1,81 @@
+// <adw-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.
+// Renders an inner <button class="adw-button …">; `click` bubbles to the host,
+// so `adwButton.addEventListener('click', …)` works.
+// 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.
+
+const VARIANT_CLASSES: Record<string, string> = {
+    flat: 'flat',
+    suggested: 'suggested-action',
+    destructive: 'destructive-action',
+    circular: 'circular',
+    pill: 'pill',
+};
+
+export class AdwButton extends HTMLElement {
+    private _button!: HTMLButtonElement;
+    private _label = '';
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['icon', 'label', 'tooltip', 'disabled', 'flat', 'suggested', 'destructive', 'circular', 'pill'];
+    }
+
+    /** The inner native button (for focus/imperative access). */
+    get button(): HTMLButtonElement {
+        return this._button;
+    }
+
+    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._button = document.createElement('button');
+        this.replaceChildren(this._button);
+        this._render();
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._render();
+    }
+
+    private _render() {
+        const btn = this._button;
+        btn.className = 'adw-button';
+        for (const [attr, cls] of Object.entries(VARIANT_CLASSES)) {
+            if (this.hasAttribute(attr)) btn.classList.add(cls);
+        }
+
+        const icon = this.getAttribute('icon');
+        const label = (this.getAttribute('label') ?? this._label).trim();
+        if (icon && !label) btn.classList.add('icon-only');
+
+        btn.replaceChildren();
+        if (icon) {
+            const span = document.createElement('span');
+            span.className = `adw-icon adw-icon--${icon}`;
+            span.setAttribute('aria-hidden', 'true'); // decorative (mask-image only, no text)
+            btn.appendChild(span);
+        }
+        if (label) btn.appendChild(document.createTextNode(label));
+
+        const tooltip = this.getAttribute('tooltip');
+        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
+        // tooltip, fall back to the symbolic icon name (WCAG 4.1.2).
+        if (icon && !label) {
+            btn.setAttribute('aria-label', tooltip ?? icon);
+        } else {
+            btn.removeAttribute('aria-label');
+        }
+        btn.disabled = this.hasAttribute('disabled');
+    }
+}
+
+customElements.define('adw-button', AdwButton);