@gjsify/adwaita-web 0.10.0 → 0.12.0

package/src/elements/adw-preferences-dialog.ts

@@ -0,0 +1,240 @@
+// <adw-preferences-dialog> — A modal preferences dialog (the web counterpart of
+// Adw.PreferencesDialog). It is a centred floating dialog over a full-cover
+// scrim, hosting one or more <adw-preferences-page> children — each a scrollable
+// clamp of <adw-preferences-group> boxed lists — under a flat header bar that
+// shows the dialog title and a trailing close button.
+//
+// Pages are declared as <adw-preferences-page> children (each with optional
+// `title` / `icon-name` attributes + arbitrary group content); the dialog
+// snapshots them at connect time and stacks their content in the scrolled body.
+// (Adw shows a view-switcher when there is more than one page and the window is
+// wide; the web port renders the pages stacked, matching the single-page common
+// case the storybook exercises.)
+//
+// Like Adw.Dialog the dialog starts hidden; `present()` / setting the `open`
+// attribute reveals it. It is dismissed by Escape, by clicking the scrim, or by
+// the header close button — each routed through the same close path. When
+// `can-close` is false a dismissal raises `close-attempt` instead of closing,
+// mirroring Adw.Dialog:can-close / ::close-attempt. The content width follows
+// the `content-width` attribute (Adw.Dialog:content-width, default 640 — the
+// AdwPreferencesDialog template default).
+//
+// Attributes:
+//   title         (the dialog title shown in the header — Adw.Dialog:title)
+//   open          (boolean — whether the dialog is revealed; default hidden)
+//   can-close     (boolean — user can dismiss via scrim / Escape / close button;
+//                    default on. When off a dismissal raises `close-attempt`
+//                    instead — mirrors Adw.Dialog:can-close)
+//   content-width (the dialog's preferred width in px; default 640)
+//
+// Events:
+//   `notify::open` (CustomEvent, bubbles, `detail = { open }`) when the revealed
+//     state changes — mirrors the Adw.Dialog `open`-ness (presented/closed).
+//   `closed` (CustomEvent, bubbles) when the dialog finishes closing — mirrors
+//     the Adw.Dialog `closed` signal.
+//   `close-attempt` (CustomEvent, bubbles) when a dismissal is attempted while
+//     `can-close` is false — mirrors the Adw.Dialog `close-attempt` signal.
+//
+// Reference: refs/libadwaita/src/adw-preferences-dialog.c (AdwPreferencesDialog)
+// Reference: refs/libadwaita/src/adw-preferences-dialog.ui (toolbar/title layout)
+// Reference: refs/libadwaita/src/adw-dialog.c (present/close/can-close, Escape)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss (floating sheet)
+// Copyright (c) 2023-2024 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+const DEFAULT_CONTENT_WIDTH = 640;
+
+/**
+ * A single preferences page. Child of <adw-preferences-dialog>; consumed at
+ * connect time. Carries optional `title` / `icon-name` attributes and any
+ * <adw-preferences-group> content — mirrors Adw.PreferencesPage.
+ */
+export class AdwPreferencesPage extends HTMLElement {
+    static get observedAttributes() {
+        return ['title', 'icon-name', 'open'];
+    }
+}
+
+export class AdwPreferencesDialog extends HTMLElement {
+    private _initialized = false;
+    private _scrimEl!: HTMLDivElement;
+    private _dialogEl!: HTMLDivElement;
+    private _titleEl!: HTMLSpanElement;
+    private _bodyEl!: HTMLDivElement;
+    private _closeBtn!: HTMLButtonElement;
+
+    static get observedAttributes() {
+        return ['title', 'open', 'can-close', 'content-width'];
+    }
+
+    /** Whether the dialog is revealed. */
+    get open(): boolean {
+        return this.hasAttribute('open');
+    }
+
+    set open(value: boolean) {
+        if (value) this.setAttribute('open', '');
+        else this.removeAttribute('open');
+    }
+
+    /** Whether the user can dismiss the dialog (scrim / Escape / close button). */
+    get canClose(): boolean {
+        const value = this.getAttribute('can-close');
+        // Absent → default on; explicit `="false"` → off.
+        if (value === null) return true;
+        return value !== 'false';
+    }
+
+    set canClose(value: boolean) {
+        if (value) this.setAttribute('can-close', '');
+        else this.setAttribute('can-close', 'false');
+    }
+
+    /** The dialog's preferred content width in px (Adw.Dialog:content-width). */
+    get contentWidth(): number {
+        const raw = Number.parseInt(this.getAttribute('content-width') ?? '', 10);
+        return Number.isNaN(raw) ? DEFAULT_CONTENT_WIDTH : raw;
+    }
+
+    set contentWidth(value: number) {
+        this.setAttribute('content-width', String(value));
+    }
+
+    /** Reveal the dialog (mirrors Adw.Dialog.present). */
+    present(): void {
+        this.open = true;
+    }
+
+    /** Dismiss the dialog, respecting `can-close` (mirrors Adw.Dialog.close). */
+    close(): void {
+        this._attemptClose();
+    }
+
+    /** Dismiss the dialog regardless of `can-close` (mirrors Adw.Dialog.force_close). */
+    forceClose(): void {
+        if (!this.open) return;
+        this.open = false;
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot the declared pages before taking over the subtree. Each page's
+        // content (its groups) is stacked in the scrolled body; any unwrapped
+        // children fall back to the body too (Adw.PreferencesDialog's buildable
+        // default adds a child as a page).
+        const pages = Array.from(this.querySelectorAll(':scope > adw-preferences-page')) as AdwPreferencesPage[];
+        const pageContent = pages.flatMap((page) => Array.from(page.childNodes));
+        const claimed = new Set<Node>([...pages, ...pageContent]);
+        const unwrapped = Array.from(this.childNodes).filter((node) => !claimed.has(node));
+
+        // Full-cover scrim — clicking it dismisses the dialog (or raises
+        // close-attempt when locked).
+        this._scrimEl = document.createElement('div');
+        this._scrimEl.className = 'adw-preferences-dialog-scrim';
+        this._scrimEl.addEventListener('click', () => this._attemptClose());
+
+        // The centred dialog box: a flat header bar (title + close button) above
+        // a scrolled preferences body.
+        this._dialogEl = document.createElement('div');
+        this._dialogEl.className = 'adw-preferences-dialog-box';
+        this._dialogEl.setAttribute('role', 'dialog');
+        this._dialogEl.setAttribute('aria-modal', 'true');
+        // Clicks inside the dialog must not bubble to the scrim's dismiss handler.
+        this._dialogEl.addEventListener('click', (event) => event.stopPropagation());
+
+        const header = document.createElement('div');
+        header.className = 'adw-preferences-dialog-header';
+
+        // A leading spacer keeps the title visually centred against the trailing
+        // close button (the AdwHeaderBar `centering-policy: strict` behaviour).
+        const leading = document.createElement('div');
+        leading.className = 'adw-preferences-dialog-header-side';
+
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-preferences-dialog-title';
+
+        const trailing = document.createElement('div');
+        trailing.className = 'adw-preferences-dialog-header-side adw-preferences-dialog-header-side--end';
+
+        this._closeBtn = document.createElement('button');
+        this._closeBtn.type = 'button';
+        this._closeBtn.className = 'adw-preferences-dialog-close';
+        this._closeBtn.setAttribute('aria-label', 'Close');
+        // No symbolic close icon ships in @gjsify/adwaita-icons; draw the "×"
+        // glyph in CSS (same approach as <adw-tab-view>'s close affordance).
+        this._closeBtn.addEventListener('click', () => this._attemptClose());
+        trailing.appendChild(this._closeBtn);
+
+        header.append(leading, this._titleEl, trailing);
+
+        // Scrolled body — a clamped column of the declared pages' content.
+        this._bodyEl = document.createElement('div');
+        this._bodyEl.className = 'adw-preferences-dialog-body';
+
+        const clamp = document.createElement('div');
+        clamp.className = 'adw-preferences-dialog-pages';
+        for (const child of pageContent) clamp.appendChild(child);
+        for (const child of unwrapped) clamp.appendChild(child);
+        this._bodyEl.appendChild(clamp);
+
+        this._dialogEl.append(header, this._bodyEl);
+
+        this.replaceChildren(this._scrimEl, this._dialogEl);
+
+        // Escape closes the dialog while open (mirrors Adw.Dialog's Escape
+        // shortcut → maybe_close_cb). The element is focusable so it can receive
+        // the key event when the dialog has focus.
+        if (!this.hasAttribute('tabindex')) this.tabIndex = -1;
+        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 } }));
+            if (!this.open) this.dispatchEvent(new CustomEvent('closed', { bubbles: true }));
+        }
+    }
+
+    private _attemptClose(): void {
+        if (!this.open) return;
+        if (!this.canClose) {
+            this.dispatchEvent(new CustomEvent('close-attempt', { bubbles: true }));
+            return;
+        }
+        // Drives attributeChangedCallback → notify::open + closed.
+        this.open = false;
+    }
+
+    private _render(): void {
+        this.classList.toggle('open', this.open);
+
+        const title = this.getAttribute('title') ?? '';
+        this._titleEl.textContent = title;
+
+        this._dialogEl.style.setProperty('--adw-dialog-content-width', `${this.contentWidth}px`);
+
+        // While locked the close button has no effect; reflect that visually +
+        // for assistive tech.
+        const locked = !this.canClose;
+        this._closeBtn.disabled = locked;
+        this._closeBtn.classList.toggle('locked', locked);
+
+        // Move focus into the dialog on present so Escape works immediately.
+        if (this.open) this.focus();
+    }
+}
+
+customElements.define('adw-preferences-page', AdwPreferencesPage);
+customElements.define('adw-preferences-dialog', AdwPreferencesDialog);

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

@@ -1,33 +1,100 @@
-// <adw-preferences-group> — Groups child rows in a boxed list with a title label.
+// <adw-preferences-group> — Groups child rows in a boxed list with a title,
+// an optional dimmed description line and an optional trailing header-suffix
+// widget (e.g. a flat "Sign out" button at the trailing edge of the header).
+// Attributes: title, description.
+// Property: description (get/set, proxies the attribute).
+// Header-suffix: any child carrying `slot="header-suffix"` is hoisted into the
+//   trailing edge of the header instead of the boxed list — mirroring
+//   Adw.PreferencesGroup's `header-suffix` property / buildable type.
+// Reference: refs/libadwaita/src/adw-preferences-group.ui (header_box layout)
+// Reference: refs/adwaita-web/adwaita-web/scss/_preferences.scss
 // 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.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
+//   description line + header-suffix slot added to match Adw.PreferencesGroup.
 
 export class AdwPreferencesGroup extends HTMLElement {
+    private _titleEl!: HTMLSpanElement;
+    private _descriptionEl!: HTMLSpanElement;
+    private _suffixEl!: HTMLDivElement;
     private _initialized = false;
 
+    static get observedAttributes() {
+        return ['title', 'description'];
+    }
+
+    get description(): string {
+        return this.getAttribute('description') ?? '';
+    }
+
+    set description(value: string) {
+        if (value) this.setAttribute('description', value);
+        else this.removeAttribute('description');
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
 
-        const title = this.getAttribute('title') || '';
         const children = Array.from(this.childNodes);
+        // Children opting into the header-suffix slot are hoisted to the
+        // trailing edge of the header; everything else goes into the boxed list.
+        const suffixChildren = children.filter(
+            (child) => child instanceof Element && child.getAttribute('slot') === 'header-suffix',
+        );
+        const rowChildren = children.filter((child) => !suffixChildren.includes(child));
 
-        // Build header with title
+        // Header: a flex row with a title/description label column on the left
+        // and the optional header-suffix on the trailing edge.
         const header = document.createElement('div');
         header.className = 'adw-preferences-group-header';
-        const titleEl = document.createElement('span');
-        titleEl.className = 'adw-preferences-group-title';
-        titleEl.textContent = title;
-        header.appendChild(titleEl);
 
-        // Build boxed list container and move children into it
+        const labels = document.createElement('div');
+        labels.className = 'adw-preferences-group-labels';
+
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-preferences-group-title';
+
+        this._descriptionEl = document.createElement('span');
+        this._descriptionEl.className = 'adw-preferences-group-description';
+
+        labels.append(this._titleEl, this._descriptionEl);
+
+        this._suffixEl = document.createElement('div');
+        this._suffixEl.className = 'adw-preferences-group-suffix';
+        suffixChildren.forEach((child) => this._suffixEl.appendChild(child));
+
+        header.append(labels, this._suffixEl);
+
+        // Boxed list container — the remaining children move into it.
         const listbox = document.createElement('div');
         listbox.className = 'adw-preferences-group-listbox';
-        children.forEach((child) => listbox.appendChild(child));
+        rowChildren.forEach((child) => listbox.appendChild(child));
+
+        this.replaceChildren(header, listbox);
+
+        this._renderHeader();
+    }
+
+    attributeChangedCallback() {
+        if (this._initialized) this._renderHeader();
+    }
+
+    private _renderHeader() {
+        const title = this.getAttribute('title') ?? '';
+        this._titleEl.textContent = title;
+        this._titleEl.hidden = title.length === 0;
+
+        const description = this.getAttribute('description') ?? '';
+        this._descriptionEl.textContent = description;
+        this._descriptionEl.hidden = description.length === 0;
 
-        this.appendChild(header);
-        this.appendChild(listbox);
+        // The header only takes space when it carries a title, a description or
+        // a suffix — an empty group has no header padding, like Adw's.
+        const hasSuffix = this._suffixEl.childElementCount > 0;
+        const headerEl = this._titleEl.parentElement?.parentElement;
+        if (headerEl) headerEl.hidden = title.length === 0 && description.length === 0 && !hasSuffix;
     }
 }
 

package/src/elements/adw-sidebar.ts

@@ -0,0 +1,238 @@
+// <adw-sidebar> — A selectable navigation sidebar (the web counterpart of
+// Adw.Sidebar). It holds <adw-sidebar-section> groups, each of which holds
+// <adw-sidebar-item> children (icon + title + optional subtitle). Zero or one
+// item is selected at a time; clicking an item selects it and activates it. In
+// `sidebar` mode it renders as a flat navigation list (the AdwSidebar
+// `navigation-sidebar`); in `page` mode it renders as boxed lists with a
+// chevron arrow on each row (the AdwPreferencesPage look the native widget
+// switches to when collapsed).
+// Sub-elements (declared as children, consumed at connect time — mirrors
+// adw-tab-page in adw-tab-view):
+//   <adw-sidebar-section title="…"> — a titled group of items. An untitled
+//     section renders a separator before its rows (first section: nothing),
+//     mirroring AdwSidebar's stack header (title vs separator child).
+//   <adw-sidebar-item title="…" subtitle="…" icon-name="…"> — one row.
+// Attributes (on <adw-sidebar>):
+//   mode (sidebar | page, default sidebar) — mirrors Adw.Sidebar:mode.
+//   selected (zero-based flat item index, default 0; -1 = no selection,
+//     mirroring Gtk.INVALID_LIST_POSITION) — mirrors Adw.Sidebar:selected.
+// Events:
+//   `notify::selected` (CustomEvent, bubbles, `detail = { selected }`) when the
+//     selected index changes — mirrors the Adw.Sidebar:selected property.
+//   `activated` (CustomEvent, bubbles, `detail = { index }`) when an item is
+//     activated (clicked) — mirrors the Adw.Sidebar::activated signal.
+// Reference: refs/libadwaita/src/adw-sidebar.c (AdwSidebar behaviour)
+// Reference: refs/libadwaita/src/adw-sidebar-item.h (AdwSidebarItem properties)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss (.navigation-sidebar, sidebar)
+// Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** Index meaning "no selection" — the web mirror of Gtk.INVALID_LIST_POSITION. */
+const NO_SELECTION = -1;
+
+/** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
+function iconClass(gtkName: string): string {
+    const name = gtkName.replace(/-symbolic$/, '');
+    return name ? `adw-icon adw-icon--${name}` : 'adw-icon';
+}
+
+/** A single sidebar item. Child of <adw-sidebar-section>; consumed at connect time. */
+export class AdwSidebarItem extends HTMLElement {
+    static get observedAttributes() {
+        return ['title', 'subtitle', 'icon-name'];
+    }
+}
+
+/** A titled group of items. Child of <adw-sidebar>; consumed at connect time. */
+export class AdwSidebarSection extends HTMLElement {
+    static get observedAttributes() {
+        return ['title'];
+    }
+}
+
+export class AdwSidebar extends HTMLElement {
+    private _listEl!: HTMLDivElement;
+    private _rows: HTMLButtonElement[] = [];
+    private _selected = 0;
+    private _mode: 'sidebar' | 'page' = 'sidebar';
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['mode', 'selected'];
+    }
+
+    /** Zero-based flat index of the selected item, or -1 for no selection. */
+    get selected(): number {
+        return this._selected;
+    }
+
+    set selected(value: number) {
+        this.setAttribute('selected', String(value));
+    }
+
+    /** 'sidebar' (flat navigation list) or 'page' (boxed lists). */
+    get mode(): 'sidebar' | 'page' {
+        return this._mode;
+    }
+
+    set mode(value: 'sidebar' | 'page') {
+        this.setAttribute('mode', value);
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot the declared <adw-sidebar-section> children before we take
+        // over the subtree — their title + <adw-sidebar-item> descendants become
+        // the rendered sections and rows.
+        const sections = Array.from(this.querySelectorAll('adw-sidebar-section')) as AdwSidebarSection[];
+
+        this._listEl = document.createElement('div');
+        this._listEl.className = 'adw-sidebar-list';
+        this._listEl.setAttribute('role', 'listbox');
+
+        this._rows = [];
+
+        sections.forEach((section, sectionIndex) => {
+            const title = section.getAttribute('title') ?? '';
+            const items = Array.from(section.querySelectorAll('adw-sidebar-item')) as AdwSidebarItem[];
+
+            // The section header — a heading when titled, an empty separator
+            // otherwise (mirrors AdwSidebar's header stack: "title" vs
+            // "separator" child). The very first section never draws a leading
+            // separator (matches the `.header.first` rule).
+            const header = document.createElement('div');
+            header.className = 'adw-sidebar-section-header';
+            if (title) {
+                header.classList.add('has-title');
+                const heading = document.createElement('span');
+                heading.className = 'adw-sidebar-section-heading';
+                heading.textContent = title;
+                header.appendChild(heading);
+                if (sectionIndex === 0) header.classList.add('first');
+            } else {
+                header.classList.add('separator');
+                if (sectionIndex === 0) header.hidden = true;
+            }
+            this._listEl.appendChild(header);
+
+            const sectionEl = document.createElement('div');
+            sectionEl.className = 'adw-sidebar-section';
+
+            items.forEach((item) => {
+                const flatIndex = this._rows.length;
+                const itemTitle = item.getAttribute('title') ?? '';
+                const subtitle = item.getAttribute('subtitle') ?? '';
+                const icon = item.getAttribute('icon-name') ?? '';
+
+                const row = document.createElement('button');
+                row.type = 'button';
+                row.className = 'adw-sidebar-item';
+                row.setAttribute('role', 'option');
+
+                const iconEl = document.createElement('span');
+                iconEl.className = `${iconClass(icon)} adw-sidebar-item-icon`;
+                iconEl.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
+                iconEl.hidden = icon.length === 0;
+                row.appendChild(iconEl);
+
+                const textEl = document.createElement('span');
+                textEl.className = 'adw-sidebar-item-text';
+
+                const titleEl = document.createElement('span');
+                titleEl.className = 'adw-sidebar-item-title';
+                titleEl.textContent = itemTitle;
+                titleEl.hidden = itemTitle.length === 0;
+                textEl.appendChild(titleEl);
+
+                const subtitleEl = document.createElement('span');
+                subtitleEl.className = 'adw-sidebar-item-subtitle';
+                subtitleEl.textContent = subtitle;
+                subtitleEl.hidden = subtitle.length === 0;
+                textEl.appendChild(subtitleEl);
+
+                row.appendChild(textEl);
+
+                // Page mode adds a trailing chevron on every row, the way the
+                // boxed-list AdwActionRow carries a `go-next-symbolic` arrow.
+                const arrowEl = document.createElement('span');
+                arrowEl.className = 'adw-icon adw-icon--go-next adw-sidebar-item-arrow';
+                arrowEl.setAttribute('aria-hidden', 'true');
+                row.appendChild(arrowEl);
+
+                row.addEventListener('click', () => this._activateIndex(flatIndex));
+                sectionEl.appendChild(row);
+                this._rows.push(row);
+            });
+
+            this._listEl.appendChild(sectionEl);
+        });
+
+        this.replaceChildren(this._listEl);
+
+        this._mode = this._readModeAttr();
+        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;
+        }
+        if (name === 'mode') {
+            const next = this._readModeAttr();
+            if (next !== this._mode) {
+                this._mode = next;
+                this._render();
+            }
+        }
+    }
+
+    private _readModeAttr(): 'sidebar' | 'page' {
+        return this.getAttribute('mode') === 'page' ? 'page' : 'sidebar';
+    }
+
+    private _readSelectedAttr(): number {
+        const raw = Number.parseInt(this.getAttribute('selected') ?? '0', 10);
+        if (Number.isNaN(raw)) return 0;
+        if (raw < 0) return NO_SELECTION;
+        const max = Math.max(0, this._rows.length - 1);
+        return Math.min(raw, max);
+    }
+
+    /** Click handler — selects the row (if changed) and always emits `activated`. */
+    private _activateIndex(index: number): void {
+        if (index !== this._selected) {
+            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', { bubbles: true, detail: { selected: index } }));
+        }
+        this.dispatchEvent(new CustomEvent('activated', { bubbles: true, detail: { index } }));
+    }
+
+    private _render(): void {
+        this.classList.toggle('page', this._mode === 'page');
+        this.classList.toggle('mode-sidebar', this._mode === 'sidebar');
+
+        this._rows.forEach((row, index) => {
+            const isSelected = index === this._selected;
+            row.classList.toggle('selected', isSelected);
+            row.setAttribute('aria-selected', String(isSelected));
+            row.tabIndex = isSelected || (this._selected === NO_SELECTION && index === 0) ? 0 : -1;
+        });
+    }
+}
+
+customElements.define('adw-sidebar-item', AdwSidebarItem);
+customElements.define('adw-sidebar-section', AdwSidebarSection);
+customElements.define('adw-sidebar', AdwSidebar);