@gjsify/adwaita-web 0.10.0 → 0.12.0

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

@@ -0,0 +1,200 @@
+// <adw-view-switcher> — An adaptive, tab-style switcher driving a set of named
+// pages (the web counterpart of Adw.ViewSwitcher paired with an Adw.ViewStack).
+// Pages are declared as <adw-view-switcher-page> children with `name`, `title`
+// and `icon-name` attributes; their own children become the page body. The
+// switcher renders one toggle button per page (always icon + label) and shows
+// exactly one page at a time, exactly like libadwaita's single `viewswitcher`
+// CSS node with the `.wide` / `.narrow` policy style classes.
+//   - wide:   icon and label side by side (horizontal button layout)
+//   - narrow: icon stacked above the label (vertical button layout)
+// Attributes:
+//   policy — 'wide' | 'narrow' (default 'narrow', matching libadwaita's default).
+//   active — zero-based index of the selected page (default 0).
+// Events:
+//   `notify::visible-child` (CustomEvent, bubbles, detail = { name, index }) when
+//     the selected page changes — mirrors Adw.ViewStack's `visible-child-name`.
+//   `notify::policy` (CustomEvent, bubbles, detail = { policy }) when the policy
+//     changes — mirrors the Adw.ViewSwitcher `policy` GObject property.
+// Reference: refs/libadwaita/src/adw-view-switcher.c (AdwViewSwitcher behaviour)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_view-switcher.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_viewswitcher.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+type Policy = 'wide' | 'narrow';
+
+interface PageInfo {
+    name: string;
+    title: string;
+    icon: string;
+    body: HTMLElement;
+    button: HTMLButtonElement;
+}
+
+/** A single page. Children of <adw-view-switcher>; consumed at connect time. */
+export class AdwViewSwitcherPage extends HTMLElement {
+    static get observedAttributes() {
+        return ['name', 'title', 'icon-name'];
+    }
+}
+
+export class AdwViewSwitcher extends HTMLElement {
+    private _barEl!: HTMLDivElement;
+    private _contentEl!: HTMLDivElement;
+    private _pages: PageInfo[] = [];
+    private _active = 0;
+    private _policy: Policy = 'narrow';
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['policy', 'active'];
+    }
+
+    /** The policy controlling the button layout ('wide' | 'narrow'). */
+    get policy(): Policy {
+        return this._policy;
+    }
+
+    set policy(value: Policy) {
+        this.setAttribute('policy', value);
+    }
+
+    /** Zero-based index of the active page. */
+    get active(): number {
+        return this._active;
+    }
+
+    set active(value: number) {
+        this.setAttribute('active', String(value));
+    }
+
+    /** The name of the currently visible page, or null when there are none. */
+    get visibleChildName(): string | null {
+        return this._pages[this._active]?.name ?? null;
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Snapshot the declared <adw-view-switcher-page> children before we take
+        // over the subtree — their name / title / icon-name + their own child
+        // nodes become the rendered tabs and page bodies.
+        const declaredPages = Array.from(this.querySelectorAll('adw-view-switcher-page')) as AdwViewSwitcherPage[];
+
+        // The single `viewswitcher` node holds the segmented button bar; a sibling
+        // content area shows the active page (the web stand-in for the paired
+        // Adw.ViewStack the switcher would otherwise drive).
+        this._barEl = document.createElement('div');
+        this._barEl.className = 'adw-view-switcher-bar';
+        this._barEl.setAttribute('role', 'tablist');
+
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-view-switcher-content';
+
+        this._pages = declaredPages.map((pageEl, index) => {
+            const name = pageEl.getAttribute('name') ?? `page-${index}`;
+            const title = pageEl.getAttribute('title') ?? '';
+            const icon = (pageEl.getAttribute('icon-name') ?? '').replace(/-symbolic$/, '');
+
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'adw-view-switcher-button';
+            button.setAttribute('role', 'tab');
+
+            const iconEl = document.createElement('span');
+            iconEl.className = `adw-icon${icon ? ` adw-icon--${icon}` : ''}`;
+            iconEl.setAttribute('aria-hidden', 'true'); // decorative (mask-image only)
+            iconEl.hidden = icon.length === 0;
+
+            const labelEl = document.createElement('span');
+            labelEl.className = 'adw-view-switcher-label';
+            labelEl.textContent = title;
+            labelEl.hidden = title.length === 0;
+
+            button.append(iconEl, labelEl);
+            // An icon-only tab has no visible text — give it an accessible name.
+            if (icon && !title) button.setAttribute('aria-label', icon);
+
+            button.addEventListener('click', () => this._selectIndex(index));
+
+            const body = document.createElement('div');
+            body.className = 'adw-view-switcher-page';
+            body.dataset.name = name;
+            for (const child of Array.from(pageEl.childNodes)) body.appendChild(child);
+
+            return { name, title, icon, body, button };
+        });
+
+        this._barEl.append(...this._pages.map((p) => p.button));
+        this._contentEl.append(...this._pages.map((p) => p.body));
+        this.replaceChildren(this._barEl, this._contentEl);
+
+        this._policy = this._readPolicyAttr();
+        this._active = this._readActiveAttr();
+        this._render();
+    }
+
+    attributeChangedCallback(name: string) {
+        if (!this._initialized) return;
+        if (name === 'policy') {
+            const next = this._readPolicyAttr();
+            if (next !== this._policy) {
+                this._policy = next;
+                this._render();
+            }
+            return;
+        }
+        if (name === 'active') {
+            const next = this._readActiveAttr();
+            if (next !== this._active) {
+                this._active = next;
+                this._render();
+            }
+        }
+    }
+
+    private _readPolicyAttr(): Policy {
+        return this.getAttribute('policy') === 'wide' ? 'wide' : 'narrow';
+    }
+
+    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 _selectIndex(index: number): void {
+        if (index === this._active) return;
+        this._active = index;
+        // Keep the attribute in sync without re-entering the guarded callback
+        // (value already matches, so attributeChangedCallback no-ops).
+        this.setAttribute('active', String(index));
+        this._render();
+        const page = this._pages[index];
+        this.dispatchEvent(
+            new CustomEvent('notify::visible-child', {
+                bubbles: true,
+                detail: { name: page?.name ?? null, index },
+            }),
+        );
+    }
+
+    private _render(): void {
+        // Single `viewswitcher` node carries the `.wide` / `.narrow` policy class.
+        this.classList.toggle('wide', this._policy === 'wide');
+        this.classList.toggle('narrow', this._policy === 'narrow');
+
+        this._pages.forEach((page, index) => {
+            const isActive = index === this._active;
+            page.button.classList.toggle('active', isActive);
+            page.button.setAttribute('aria-selected', String(isActive));
+            page.button.tabIndex = isActive ? 0 : -1;
+            page.body.classList.toggle('active-view', isActive);
+        });
+    }
+}
+
+customElements.define('adw-view-switcher-page', AdwViewSwitcherPage);
+customElements.define('adw-view-switcher', AdwViewSwitcher);

package/src/elements/adw-window-title.ts

@@ -0,0 +1,48 @@
+// <adw-window-title> — A composite title + subtitle for a header bar.
+// Attributes: title, subtitle.
+// Mirrors Adw.WindowTitle: two centered, ellipsized labels stacked vertically;
+// the subtitle is hidden when empty.
+// Reference: refs/adwaita-web/adwaita-web/docs/widgets/windowtitle.md
+// Reference: refs/libadwaita (Adw.WindowTitle)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+export class AdwWindowTitle extends HTMLElement {
+    private _titleEl!: HTMLSpanElement;
+    private _subtitleEl!: HTMLSpanElement;
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return ['title', 'subtitle'];
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        this._titleEl = document.createElement('span');
+        this._titleEl.className = 'adw-window-title-title';
+
+        this._subtitleEl = document.createElement('span');
+        this._subtitleEl.className = 'adw-window-title-subtitle';
+
+        this.replaceChildren(this._titleEl, this._subtitleEl);
+        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;
+        // Hide the subtitle slot entirely when empty so the title stays
+        // vertically centered (matches Adw.WindowTitle).
+        this._subtitleEl.hidden = subtitle.length === 0;
+    }
+}
+
+customElements.define('adw-window-title', AdwWindowTitle);

package/src/elements/adw-wrap-box.ts

@@ -0,0 +1,139 @@
+// <adw-wrap-box> — A box-like container that lays its children out in a line and
+// wraps them onto new lines when they run out of room (the web analog of
+// flexbox `flex-wrap: wrap` with a gap). Mirrors Adw.WrapBox.
+// Attributes:
+//   child-spacing   (px, default 0) — spacing between children on the same line
+//                                      → CSS column-gap
+//   line-spacing    (px, default 0) — spacing between lines → CSS row-gap
+//   orientation     ("horizontal" | "vertical", default "horizontal") — the main
+//                                      axis children are packed along
+//   align           (0..1, default 0) — alignment of children within each line
+//                                      (cross axis); 0 = start, 0.5 = center, 1 = end
+//   justify         ("none" | "fill" | "spread", default "none") — whether/how
+//                                      each line is stretched to fill the widget
+//   justify-last-line (boolean) — also justify the last (incomplete) line
+//   line-homogeneous  (boolean) — make every line take the same amount of space
+//   pack-direction  ("start-to-end" | "end-to-start", default "start-to-end") —
+//                                      direction children are packed within a line
+//   wrap-reverse    (boolean) — reverse the wrap direction (lines wrap upwards)
+// Events: notify::child-spacing, notify::line-spacing (CustomEvent, bubbles —
+//   mirrors GObject signal naming).
+// Reference: refs/libadwaita/src/adw-wrap-box.c / adw-wrap-layout.c (Adw.WrapBox)
+// Reference: refs/adwaita-web/adwaita-web/scss/_wrap_box.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+/** Adw.JustifyMode → flexbox justify-content. */
+const JUSTIFY_MAP: Record<string, string> = {
+    none: 'flex-start',
+    fill: 'space-between',
+    spread: 'space-between',
+};
+
+export class AdwWrapBox extends HTMLElement {
+    private _initialized = false;
+
+    static get observedAttributes() {
+        return [
+            'child-spacing',
+            'line-spacing',
+            'orientation',
+            'align',
+            'justify',
+            'justify-last-line',
+            'line-homogeneous',
+            'pack-direction',
+            'wrap-reverse',
+        ];
+    }
+
+    /** Spacing between children on the same line, in px (CSS column-gap). */
+    get childSpacing(): number {
+        return parseFloat(this.getAttribute('child-spacing') || '0');
+    }
+
+    set childSpacing(value: number) {
+        this.setAttribute('child-spacing', String(value));
+    }
+
+    /** Spacing between lines, in px (CSS row-gap). */
+    get lineSpacing(): number {
+        return parseFloat(this.getAttribute('line-spacing') || '0');
+    }
+
+    set lineSpacing(value: number) {
+        this.setAttribute('line-spacing', String(value));
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+        this._sync();
+    }
+
+    attributeChangedCallback(name: string, old: string | null, value: string | null) {
+        if (!this._initialized) return;
+        this._sync();
+        if (old === value) return;
+        if (name === 'child-spacing') {
+            this.dispatchEvent(
+                new CustomEvent('notify::child-spacing', {
+                    bubbles: true,
+                    detail: { childSpacing: this.childSpacing },
+                }),
+            );
+        } else if (name === 'line-spacing') {
+            this.dispatchEvent(
+                new CustomEvent('notify::line-spacing', {
+                    bubbles: true,
+                    detail: { lineSpacing: this.lineSpacing },
+                }),
+            );
+        }
+    }
+
+    private _sync() {
+        const style = this.style;
+        const vertical = this.getAttribute('orientation') === 'vertical';
+        const reverseWrap = this.hasAttribute('wrap-reverse');
+        const packEndToStart = this.getAttribute('pack-direction') === 'end-to-start';
+
+        // Main axis is the packing direction; lines wrap along the cross axis.
+        const direction = vertical ? 'column' : 'row';
+        const reversed = packEndToStart ? `${direction}-reverse` : direction;
+        style.flexDirection = reversed;
+        style.flexWrap = reverseWrap ? 'wrap-reverse' : 'wrap';
+
+        // child-spacing is along the line (main axis), line-spacing is between
+        // lines (cross axis). For a horizontal box that maps to column-gap /
+        // row-gap respectively; the mapping flips for a vertical box.
+        const childGap = `${this.childSpacing}px`;
+        const lineGap = `${this.lineSpacing}px`;
+        if (vertical) {
+            style.rowGap = childGap;
+            style.columnGap = lineGap;
+        } else {
+            style.columnGap = childGap;
+            style.rowGap = lineGap;
+        }
+
+        // justify-content stretches each complete line along the main axis; the
+        // last (incomplete) line is only stretched when justify-last-line is set.
+        const justify = this.getAttribute('justify') ?? 'none';
+        style.justifyContent = JUSTIFY_MAP[justify] ?? 'flex-start';
+
+        // align (0..1) positions children within each line on the cross axis.
+        // It is only honoured when the line is not justified.
+        const align = Math.max(0, Math.min(1, parseFloat(this.getAttribute('align') || '0')));
+        let crossAlign = 'flex-start';
+        if (align >= 0.75) crossAlign = 'flex-end';
+        else if (align >= 0.25) crossAlign = 'center';
+        style.alignItems = crossAlign;
+
+        // line-homogeneous makes every line take the same amount of space, which
+        // flexbox approximates by stretching the lines across the cross axis.
+        style.alignContent = this.hasAttribute('line-homogeneous') ? 'stretch' : 'flex-start';
+    }
+}
+
+customElements.define('adw-wrap-box', AdwWrapBox);

package/src/index.js

@@ -1 +1 @@
-import{AdwCard as e}from"./elements/adw-card2.js";import{AdwWindow as t}from"./elements/adw-window2.js";import{AdwHeaderBar as n}from"./elements/adw-header-bar2.js";import{AdwPreferencesGroup as r}from"./elements/adw-preferences-group2.js";import{AdwSwitchRow as i}from"./elements/adw-switch-row2.js";import{AdwComboRow as a}from"./elements/adw-combo-row2.js";import{AdwSpinRow as o}from"./elements/adw-spin-row2.js";import{AdwToastOverlay as s}from"./elements/adw-toast-overlay2.js";import{AdwOverlaySplitView as c}from"./elements/adw-overlay-split-view2.js";import"@gjsify/adwaita-fonts";export{e as AdwCard,a as AdwComboRow,n as AdwHeaderBar,c as AdwOverlaySplitView,r as AdwPreferencesGroup,o as AdwSpinRow,i as AdwSwitchRow,s as AdwToastOverlay,t as AdwWindow};
+import{e}from"./styles2.generated.js";import{AdwAvatar as t}from"./elements/adw-avatar2.js";import{AdwBanner as n}from"./elements/adw-banner2.js";import{AdwCard as r}from"./elements/adw-card2.js";import{AdwClamp as i}from"./elements/adw-clamp2.js";import{AdwSpinner as a}from"./elements/adw-spinner2.js";import{AdwStatusPage as o}from"./elements/adw-status-page2.js";import{AdwWindow as s}from"./elements/adw-window2.js";import{AdwHeaderBar as c}from"./elements/adw-header-bar2.js";import{AdwWindowTitle as l}from"./elements/adw-window-title2.js";import{AdwButton as u}from"./elements/adw-button2.js";import{AdwButtonContent as d}from"./elements/adw-button-content2.js";import{AdwSplitButton as f}from"./elements/adw-split-button2.js";import{AdwToggle as p,AdwToggleGroup as m}from"./elements/adw-toggle-group2.js";import{AdwEntry as h}from"./elements/adw-entry2.js";import{AdwPreferencesGroup as g}from"./elements/adw-preferences-group2.js";import{AdwActionRow as _}from"./elements/adw-action-row2.js";import{AdwEntryRow as v}from"./elements/adw-entry-row2.js";import{AdwSwitchRow as y}from"./elements/adw-switch-row2.js";import{AdwComboRow as b}from"./elements/adw-combo-row2.js";import{AdwSpinRow as x}from"./elements/adw-spin-row2.js";import{AdwButtonRow as S}from"./elements/adw-button-row2.js";import{AdwExpanderRow as C}from"./elements/adw-expander-row2.js";import{AdwPasswordEntryRow as w}from"./elements/adw-password-entry-row2.js";import{AdwToastOverlay as T}from"./elements/adw-toast-overlay2.js";import{AdwToolbarView as E}from"./elements/adw-toolbar-view2.js";import{AdwWrapBox as D}from"./elements/adw-wrap-box2.js";import{AdwOverlaySplitView as O}from"./elements/adw-overlay-split-view2.js";import{AdwNavigationSplitView as k}from"./elements/adw-navigation-split-view2.js";import{AdwCarousel as A,AdwCarouselIndicatorDots as j,AdwCarouselIndicatorLines as M}from"./elements/adw-carousel2.js";import{AdwTabPage as N,AdwTabView as P}from"./elements/adw-tab-view2.js";import{AdwViewSwitcher as F,AdwViewSwitcherPage as I}from"./elements/adw-view-switcher2.js";import{AdwInlineViewSwitcher as L,AdwViewStackPage as R}from"./elements/adw-inline-view-switcher2.js";import{AdwNavigationPage as z,AdwNavigationView as B}from"./elements/adw-navigation-view2.js";import{AdwBottomSheet as V,AdwBottomSheetContent as H,AdwBottomSheetSheet as U}from"./elements/adw-bottom-sheet2.js";import{AdwSidebar as W,AdwSidebarItem as G,AdwSidebarSection as K}from"./elements/adw-sidebar2.js";import{AdwAboutDialog as q}from"./elements/adw-about-dialog2.js";import{AdwAlertDialog as J,AdwAlertResponse as Y}from"./elements/adw-alert-dialog2.js";import{AdwPreferencesDialog as X,AdwPreferencesPage as Z}from"./elements/adw-preferences-dialog2.js";import"@gjsify/adwaita-fonts";if(typeof document<`u`&&!document.getElementById(`adwaita-web-style`)){let t=document.createElement(`style`);t.id=`adwaita-web-style`,t.textContent=e,document.head.appendChild(t)}export{q as AdwAboutDialog,_ as AdwActionRow,J as AdwAlertDialog,Y as AdwAlertResponse,t as AdwAvatar,n as AdwBanner,V as AdwBottomSheet,H as AdwBottomSheetContent,U as AdwBottomSheetSheet,u as AdwButton,d as AdwButtonContent,S as AdwButtonRow,r as AdwCard,A as AdwCarousel,j as AdwCarouselIndicatorDots,M as AdwCarouselIndicatorLines,i as AdwClamp,b as AdwComboRow,h as AdwEntry,v as AdwEntryRow,C as AdwExpanderRow,c as AdwHeaderBar,L as AdwInlineViewSwitcher,z as AdwNavigationPage,k as AdwNavigationSplitView,B as AdwNavigationView,O as AdwOverlaySplitView,w as AdwPasswordEntryRow,X as AdwPreferencesDialog,g as AdwPreferencesGroup,Z as AdwPreferencesPage,W as AdwSidebar,G as AdwSidebarItem,K as AdwSidebarSection,x as AdwSpinRow,a as AdwSpinner,f as AdwSplitButton,o as AdwStatusPage,y as AdwSwitchRow,N as AdwTabPage,P as AdwTabView,T as AdwToastOverlay,p as AdwToggle,m as AdwToggleGroup,E as AdwToolbarView,R as AdwViewStackPage,F as AdwViewSwitcher,I as AdwViewSwitcherPage,s as AdwWindow,l as AdwWindowTitle,D as AdwWrapBox};

package/src/index.ts

@@ -1,18 +1,61 @@
 // @gjsify/adwaita-web — Adwaita/Libadwaita web components for browser targets.
-// Importing this module registers all custom elements. The accompanying
-// stylesheet must be imported separately as `@gjsify/adwaita-web/style.css`
-// (or via SCSS partials at `@gjsify/adwaita-web/scss/...`).
+// Importing this module registers all custom elements AND self-applies the
+// compiled stylesheet — no separate CSS import is needed. The compiled CSS is
+// still exported at `@gjsify/adwaita-web/style.css` (e.g. for a <link>) and the
+// SCSS partials at `@gjsify/adwaita-web/scss/...` for custom theming.
 // Reference: refs/libadwaita (colors/sizing), refs/adwaita-web (component patterns).
 
 import '@gjsify/adwaita-fonts'; // Registers @font-face (fontsource pattern)
+import { ADWAITA_WEB_CSS } from './styles.generated.js';
+
+// Self-apply the compiled stylesheet on import. This makes `import
+// '@gjsify/adwaita-web'` enough to style the components under ANY bundler —
+// a separate `import '@gjsify/adwaita-web/style.css'` is a no-op under a gjsify
+// `--app browser` build (css-as-string yields a string a side-effect import
+// discards), which used to leave consumers unstyled. Idempotent + browser-only.
+if (typeof document !== 'undefined' && !document.getElementById('adwaita-web-style')) {
+    const style = document.createElement('style');
+    style.id = 'adwaita-web-style';
+    style.textContent = ADWAITA_WEB_CSS;
+    document.head.appendChild(style);
+}
 
 // Register custom elements (side-effect imports)
+export { AdwAvatar } from './elements/adw-avatar.js';
+export { AdwBanner } from './elements/adw-banner.js';
 export { AdwCard } from './elements/adw-card.js';
+export { AdwClamp } from './elements/adw-clamp.js';
+export { AdwSpinner } from './elements/adw-spinner.js';
+export { AdwStatusPage } from './elements/adw-status-page.js';
 export { AdwWindow } from './elements/adw-window.js';
 export { AdwHeaderBar } from './elements/adw-header-bar.js';
+export { AdwWindowTitle } from './elements/adw-window-title.js';
+export { AdwButton } from './elements/adw-button.js';
+export { AdwButtonContent } from './elements/adw-button-content.js';
+export { AdwSplitButton } from './elements/adw-split-button.js';
+export { AdwToggle, AdwToggleGroup } from './elements/adw-toggle-group.js';
+export { AdwEntry } from './elements/adw-entry.js';
 export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';
+export { AdwActionRow } from './elements/adw-action-row.js';
+export { AdwEntryRow } from './elements/adw-entry-row.js';
 export { AdwSwitchRow } from './elements/adw-switch-row.js';
 export { AdwComboRow } from './elements/adw-combo-row.js';
 export { AdwSpinRow } from './elements/adw-spin-row.js';
+export { AdwButtonRow } from './elements/adw-button-row.js';
+export { AdwExpanderRow } from './elements/adw-expander-row.js';
+export { AdwPasswordEntryRow } from './elements/adw-password-entry-row.js';
 export { AdwToastOverlay } from './elements/adw-toast-overlay.js';
+export { AdwToolbarView } from './elements/adw-toolbar-view.js';
+export { AdwWrapBox } from './elements/adw-wrap-box.js';
 export { AdwOverlaySplitView } from './elements/adw-overlay-split-view.js';
+export { AdwNavigationSplitView } from './elements/adw-navigation-split-view.js';
+export { AdwCarousel, AdwCarouselIndicatorDots, AdwCarouselIndicatorLines } from './elements/adw-carousel.js';
+export { AdwTabPage, AdwTabView } from './elements/adw-tab-view.js';
+export { AdwViewSwitcher, AdwViewSwitcherPage } from './elements/adw-view-switcher.js';
+export { AdwInlineViewSwitcher, AdwViewStackPage } from './elements/adw-inline-view-switcher.js';
+export { AdwNavigationPage, AdwNavigationView } from './elements/adw-navigation-view.js';
+export { AdwBottomSheet, AdwBottomSheetContent, AdwBottomSheetSheet } from './elements/adw-bottom-sheet.js';
+export { AdwSidebar, AdwSidebarItem, AdwSidebarSection } from './elements/adw-sidebar.js';
+export { AdwAboutDialog } from './elements/adw-about-dialog.js';
+export { AdwAlertDialog, AdwAlertResponse } from './elements/adw-alert-dialog.js';
+export { AdwPreferencesDialog, AdwPreferencesPage } from './elements/adw-preferences-dialog.js';