@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/browser/feedback/toast.web.ts

@@ -0,0 +1,62 @@
+// Browser port of the Toast story. Shares metadata with toast.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { toastMeta } from '../../feedback/toast.meta.js';
+
+/** The <adw-toast-overlay> exposes addToast(title, opts) — see @gjsify/adwaita-web. */
+interface ToastOverlayElement extends HTMLElement {
+    addToast(title: string, options?: { timeout?: number; buttonLabel?: string; onAction?: () => void }): void;
+}
+
+/** Story: an Adw.Toast presented through an adw-toast-overlay on button press. */
+export class ToastWebStory extends StoryElement {
+    private _overlay: ToastOverlayElement | null = null;
+
+    constructor() {
+        super(ToastWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return toastMeta;
+    }
+
+    initialize(): void {
+        this._overlay = document.createElement('adw-toast-overlay') as ToastOverlayElement;
+        // Match the native story's fixed 360×220 viewport so the toast has a
+        // bounded overlay area to float over.
+        this._overlay.style.width = '360px';
+        this._overlay.style.height = '220px';
+
+        const center = document.createElement('div');
+        center.style.display = 'flex';
+        center.style.alignItems = 'center';
+        center.style.justifyContent = 'center';
+        center.style.width = '100%';
+        center.style.height = '100%';
+
+        const button = document.createElement('adw-button');
+        button.textContent = 'Show toast';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._showToast());
+        center.append(button);
+
+        this._overlay.append(center);
+        this.addContent(this._overlay);
+    }
+
+    private _showToast(): void {
+        if (!this._overlay) return;
+        const hasButton = this.args.hasButton as boolean;
+        this._overlay.addToast(this.args.title as string, {
+            timeout: this.args.timeout as number,
+            buttonLabel: hasButton ? (this.args.buttonLabel as string) : undefined,
+        });
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // Toasts are built on demand in _showToast(); nothing to re-apply to the overlay.
+    }
+}
+
+export const ToastWebStories: WebStoryModule = { stories: [ToastWebStory] };

package/src/browser/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Adwaita Storybook — gjsify showcase</title>
+    <style>
+        html, body { margin: 0; height: 100%; }
+        body {
+            box-sizing: border-box;
+            display: grid;
+            padding: 28px;
+            /* A neutral "desktop" so the Adwaita window's rounded corners +
+               shadow read the way a GNOME app does on a session. */
+            background: radial-gradient(120% 120% at 25% 15%, #5b6b87 0%, #353a4a 55%, #20242e 100%);
+        }
+        body > adw-window { min-height: 0; min-width: 0; }
+    </style>
+</head>
+<body>
+    <script type="module" src="browser-main.js"></script>
+</body>
+</html>

package/src/browser/layout/clamp.web.ts

@@ -0,0 +1,45 @@
+// Browser port of the Clamp story. Shares metadata with clamp.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { clampMeta } from '../../layout/clamp.meta.js';
+
+export class ClampWebStory extends StoryElement {
+    private _clamp: HTMLElement | null = null;
+
+    constructor() {
+        super(ClampWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return clampMeta;
+    }
+
+    initialize(): void {
+        // The card fills the clamp, which caps its width at maximum-size and
+        // centres it — so the text wraps within the clamped width (a fixed
+        // width wider than the clamp would overflow and clip instead).
+        const inner = document.createElement('adw-card');
+        inner.style.width = '100%';
+        inner.style.boxSizing = 'border-box';
+        inner.style.padding = '18px';
+        inner.textContent =
+            'This content is clamped — it stops growing past the maximum size and stays centred.';
+
+        this._clamp = document.createElement('adw-clamp');
+        this._clamp.append(inner);
+        this._syncClamp();
+
+        this.addContent(this._clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncClamp();
+    }
+
+    private _syncClamp(): void {
+        if (!this._clamp) return;
+        this._clamp.setAttribute('maximum-size', String(this.args.maximumSize as number));
+    }
+}
+
+export const ClampWebStories: WebStoryModule = { stories: [ClampWebStory] };

package/src/browser/layout/header-bar.web.ts

@@ -0,0 +1,56 @@
+// Browser port of the Header Bar story. Shares metadata with header-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { headerBarMeta } from '../../layout/header-bar.meta.js';
+
+export class HeaderBarWebStory extends StoryElement {
+    private _headerBar: HTMLElement | null = null;
+    private _title: HTMLElement | null = null;
+
+    constructor() {
+        super(HeaderBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return headerBarMeta;
+    }
+
+    initialize(): void {
+        // Center title widget — the equivalent of Adw.HeaderBar's title-widget.
+        this._title = document.createElement('adw-window-title');
+        this._title.setAttribute('slot', 'center');
+
+        // Start control — a flat back button.
+        const backButton = document.createElement('adw-button');
+        backButton.setAttribute('slot', 'start');
+        backButton.setAttribute('icon', 'go-previous');
+        backButton.setAttribute('flat', '');
+
+        // End control — a flat menu button.
+        const menuButton = document.createElement('adw-button');
+        menuButton.setAttribute('slot', 'end');
+        menuButton.setAttribute('icon', 'open-menu');
+        menuButton.setAttribute('flat', '');
+
+        this._headerBar = document.createElement('adw-header-bar');
+        this._headerBar.style.width = '460px';
+        this._headerBar.append(backButton, this._title, menuButton);
+
+        this._sync();
+        this.addContent(this._headerBar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._title) return;
+        this._title.setAttribute('title', this.args.title as string);
+        this._title.setAttribute('subtitle', this.args.subtitle as string);
+        // Adw.HeaderBar.showTitle toggles visibility of the title widget.
+        this._title.hidden = !(this.args.showTitle as boolean);
+    }
+}
+
+export const HeaderBarWebStories: WebStoryModule = { stories: [HeaderBarWebStory] };

package/src/browser/layout/toolbar-view.web.ts

@@ -0,0 +1,95 @@
+// Browser port of the Toolbar View story. Shares metadata with toolbar-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { toolbarViewMeta } from '../../layout/toolbar-view.meta.js';
+
+export class ToolbarViewWebStory extends StoryElement {
+    private _topBar: HTMLElement | null = null;
+    private _bottomBar: HTMLElement | null = null;
+
+    constructor() {
+        super(ToolbarViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return toolbarViewMeta;
+    }
+
+    initialize(): void {
+        const view = document.createElement('adw-toolbar-view');
+        view.style.width = '460px';
+        view.style.height = '320px';
+
+        // Top header bar with a window title (matches Adw.HeaderBar + WindowTitle).
+        const header = document.createElement('adw-header-bar');
+        header.setAttribute('slot', 'top');
+        const title = document.createElement('adw-window-title');
+        title.setAttribute('slot', 'center');
+        title.setAttribute('title', 'Documents');
+        title.setAttribute('subtitle', '12 items');
+        header.appendChild(title);
+        view.appendChild(header);
+        this._topBar = header;
+
+        // Scrollable content — a status page sits between the toolbars.
+        const content = document.createElement('adw-status-page');
+        content.setAttribute('icon', 'folder');
+        content.setAttribute('title', 'Your library');
+        content.setAttribute(
+            'description',
+            'Content sits between the toolbars and scrolls independently of them.',
+        );
+        view.appendChild(content);
+
+        // Bottom action bar — flat start buttons, a centered label and an end button
+        // (mirrors the native Gtk.ActionBar with pack_start / center / pack_end).
+        const bottomBar = document.createElement('div');
+        bottomBar.setAttribute('slot', 'bottom');
+        bottomBar.className = 'adw-action-bar';
+        bottomBar.style.display = 'flex';
+        bottomBar.style.alignItems = 'center';
+        bottomBar.style.gap = 'var(--spacing-xs, 6px)';
+        bottomBar.style.padding = 'var(--spacing-xs, 6px)';
+        bottomBar.style.borderTop = '1px solid var(--separator-color, rgba(0, 0, 0, 0.15))';
+
+        const addButton = document.createElement('adw-button');
+        addButton.setAttribute('icon', 'list-add');
+        addButton.setAttribute('flat', '');
+        addButton.setAttribute('tooltip', 'Add');
+
+        const removeButton = document.createElement('adw-button');
+        removeButton.setAttribute('icon', 'list-remove');
+        removeButton.setAttribute('flat', '');
+        removeButton.setAttribute('tooltip', 'Remove');
+
+        const selectionLabel = document.createElement('span');
+        selectionLabel.textContent = 'Selection: none';
+        selectionLabel.style.flex = '1 1 auto';
+        selectionLabel.style.textAlign = 'center';
+
+        const shareButton = document.createElement('adw-button');
+        shareButton.setAttribute('icon', 'send-to');
+        shareButton.setAttribute('flat', '');
+        shareButton.setAttribute('tooltip', 'Share');
+
+        bottomBar.append(addButton, removeButton, selectionLabel, shareButton);
+        view.appendChild(bottomBar);
+        this._bottomBar = bottomBar;
+
+        this._sync();
+        this.addContent(view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        // The web toolbar view has no reveal properties; mirror revealTopBars /
+        // revealBottomBars by collapsing the top/bottom bars themselves.
+        if (this._topBar) this._topBar.hidden = !(this.args.revealTopBars as boolean);
+        if (this._bottomBar) this._bottomBar.hidden = !(this.args.revealBottomBars as boolean);
+    }
+}
+
+export const ToolbarViewWebStories: WebStoryModule = { stories: [ToolbarViewWebStory] };

package/src/browser/layout/wrap-box.web.ts

@@ -0,0 +1,45 @@
+// Browser port of the Wrap Box story. Shares metadata with wrap-box.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { wrapBoxMeta } from '../../layout/wrap-box.meta.js';
+
+const TAGS = ['Design', 'Adwaita', 'GNOME', 'GTK', 'Typescript', 'Storybook', 'Wrapping', 'Layout'];
+
+export class WrapBoxWebStory extends StoryElement {
+    private _wrap: HTMLElement | null = null;
+
+    constructor() {
+        super(WrapBoxWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return wrapBoxMeta;
+    }
+
+    initialize(): void {
+        this._wrap = document.createElement('adw-wrap-box');
+        this._wrap.style.width = '460px';
+
+        for (const tag of TAGS) {
+            const chip = document.createElement('adw-button');
+            chip.setAttribute('label', tag);
+            chip.setAttribute('pill', '');
+            this._wrap.append(chip);
+        }
+
+        this._syncWrap();
+        this.addContent(this._wrap);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncWrap();
+    }
+
+    private _syncWrap(): void {
+        if (!this._wrap) return;
+        this._wrap.setAttribute('child-spacing', String(this.args.childSpacing as number));
+        this._wrap.setAttribute('line-spacing', String(this.args.lineSpacing as number));
+    }
+}
+
+export const WrapBoxWebStories: WebStoryModule = { stories: [WrapBoxWebStory] };

package/src/browser/main.ts

@@ -0,0 +1,14 @@
+// Browser entry — mounts the Adwaita storybook as a web app built from
+// @gjsify/adwaita-web custom elements, mirroring the native GTK storybook
+// (launched via `gjsify storybook`). Each *.web.ts story shares its metadata
+// with the GTK *.story.ts twin, so the two targets expose identical controls
+// and can be compared 1:1 via screenshots.
+//
+// The story list lives in `./stories.ts` so the standalone entry here and the
+// embeddable `mount(container)` (`./embed.ts`, used by the gjsify website) stay
+// in lockstep.
+
+import { mountStorybook } from '@gjsify/adwaita-storybook';
+import { stories } from './stories.js';
+
+mountStorybook(document.body, { title: 'Adwaita Storybook', stories });

package/src/browser/navigation/bottom-sheet.web.ts

@@ -0,0 +1,119 @@
+// Browser port of the Bottom Sheet story. Shares metadata with bottom-sheet.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { bottomSheetMeta } from '../../navigation/bottom-sheet.meta.js';
+
+/** GTK symbolic name (e.g. "list-add-symbolic") → adwaita-web icon class. */
+function iconClass(gtkName: string): string {
+    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+}
+
+export class BottomSheetWebStory extends StoryElement {
+    private _sheet: HTMLElement | null = null;
+
+    constructor() {
+        super(BottomSheetWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return bottomSheetMeta;
+    }
+
+    /** The persistent content — a centered pill button that toggles the sheet. */
+    private _buildContent(): HTMLElement {
+        const content = document.createElement('adw-bottom-sheet-content');
+
+        const center = document.createElement('div');
+        center.style.display = 'flex';
+        center.style.alignItems = 'center';
+        center.style.justifyContent = 'center';
+        center.style.width = '100%';
+        center.style.height = '100%';
+
+        const toggle = document.createElement('adw-button');
+        toggle.textContent = 'Toggle sheet';
+        toggle.setAttribute('pill', '');
+        toggle.setAttribute('suggested', '');
+        toggle.addEventListener('click', () => {
+            if (this._sheet) this._sheet.toggleAttribute('open');
+        });
+
+        center.append(toggle);
+        content.append(center);
+        return content;
+    }
+
+    /** The sheet — a title above a preferences group of share actions. */
+    private _buildSheet(): HTMLElement {
+        const sheet = document.createElement('adw-bottom-sheet-sheet');
+
+        const box = document.createElement('div');
+        box.style.display = 'flex';
+        box.style.flexDirection = 'column';
+        box.style.gap = '12px';
+        box.style.margin = '18px 18px 24px';
+
+        // Match the GTK .title-2 typography style (bold heading) inline — the
+        // adwaita-web skin has no typography utility class for it.
+        const title = document.createElement('span');
+        title.textContent = 'Share track';
+        title.style.fontSize = '15pt';
+        title.style.fontWeight = '800';
+        box.append(title);
+
+        const group = document.createElement('adw-preferences-group');
+        for (const [rowTitle, icon] of [
+            ['Copy link', 'edit-copy-symbolic'],
+            ['Send to a friend', 'mail-send-symbolic'],
+            ['Add to playlist', 'list-add-symbolic'],
+        ] as const) {
+            const row = document.createElement('adw-action-row');
+            row.setAttribute('title', rowTitle);
+            row.setAttribute('activatable', '');
+
+            const prefix = document.createElement('span');
+            prefix.setAttribute('slot', 'prefix');
+            prefix.className = iconClass(icon);
+            row.append(prefix);
+
+            group.append(row);
+        }
+        box.append(group);
+
+        sheet.append(box);
+        return sheet;
+    }
+
+    initialize(): void {
+        this._sheet = document.createElement('adw-bottom-sheet');
+        // Match the native story's fixed 480×340 viewport so the sheet has a
+        // bounded content area to slide over.
+        this._sheet.style.width = '480px';
+        this._sheet.style.height = '340px';
+
+        this._sheet.append(this._buildContent(), this._buildSheet());
+
+        this._sync();
+        this.addContent(this._sheet);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._sheet) return;
+        this._sheet.toggleAttribute('open', this.args.open as boolean);
+        this._setBool('modal', this.args.modal as boolean);
+        this._setBool('can-close', this.args.canClose as boolean);
+    }
+
+    /** Boolean attributes that default on are encoded as `="false"` when off. */
+    private _setBool(name: string, value: boolean): void {
+        if (!this._sheet) return;
+        if (value) this._sheet.setAttribute(name, '');
+        else this._sheet.setAttribute(name, 'false');
+    }
+}
+
+export const BottomSheetWebStories: WebStoryModule = { stories: [BottomSheetWebStory] };

package/src/browser/navigation/navigation-split-view.web.ts

@@ -0,0 +1,99 @@
+// Browser port of the Navigation Split View story. Shares metadata with
+// navigation-split-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { navigationSplitViewMeta } from '../../navigation/navigation-split-view.meta.js';
+
+/** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
+function iconClass(gtkName: string): string {
+    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+}
+
+export class NavigationSplitViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+
+    constructor() {
+        super(NavigationSplitViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return navigationSplitViewMeta;
+    }
+
+    /** A boxed-list of mailboxes inside a toolbar view — the sidebar page. */
+    private buildSidebar(): HTMLElement {
+        const group = document.createElement('adw-preferences-group');
+        for (const [title, subtitle, icon] of [
+            ['All Mail', '128 messages', 'mail-unread-symbolic'],
+            ['Starred', '6 messages', 'starred-symbolic'],
+            ['Drafts', '2 messages', 'document-edit-symbolic'],
+            ['Archive', '512 messages', 'folder-symbolic'],
+        ] as const) {
+            const row = document.createElement('adw-action-row');
+            row.setAttribute('title', title);
+            row.setAttribute('subtitle', subtitle);
+            row.setAttribute('activatable', '');
+
+            const image = document.createElement('span');
+            image.setAttribute('slot', 'prefix');
+            image.className = iconClass(icon);
+            row.appendChild(image);
+
+            group.appendChild(row);
+        }
+
+        const header = document.createElement('adw-header-bar');
+        header.setAttribute('slot', 'top');
+        const title = document.createElement('adw-window-title');
+        title.setAttribute('slot', 'center');
+        title.setAttribute('title', 'Mailboxes');
+        header.appendChild(title);
+
+        const toolbarView = document.createElement('adw-toolbar-view');
+        toolbarView.setAttribute('slot', 'sidebar');
+        toolbarView.append(header, group);
+        return toolbarView;
+    }
+
+    /** A status page inside a toolbar view — the content page. */
+    private buildContent(): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', 'mail-unread-symbolic');
+        status.setAttribute('title', 'All Mail');
+        status.setAttribute('description', 'Select a conversation from the list to read it here.');
+
+        const header = document.createElement('adw-header-bar');
+        header.setAttribute('slot', 'top');
+        const title = document.createElement('adw-window-title');
+        title.setAttribute('slot', 'center');
+        title.setAttribute('title', 'All Mail');
+        header.appendChild(title);
+
+        const toolbarView = document.createElement('adw-toolbar-view');
+        toolbarView.setAttribute('slot', 'content');
+        toolbarView.append(header, status);
+        return toolbarView;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('adw-navigation-split-view');
+        this._view.style.width = '480px';
+        this._view.style.height = '340px';
+        this._view.append(this.buildSidebar(), this.buildContent());
+
+        this._sync();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._view) return;
+        this._view.toggleAttribute('show-content', this.args.showContent as boolean);
+        this._view.toggleAttribute('collapsed', this.args.collapsed as boolean);
+    }
+}
+
+export const NavigationSplitViewWebStories: WebStoryModule = { stories: [NavigationSplitViewWebStory] };

package/src/browser/navigation/navigation-view.web.ts

@@ -0,0 +1,104 @@
+// Browser port of the Navigation View story. Shares metadata with
+// navigation-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { navigationViewMeta } from '../../navigation/navigation-view.meta.js';
+
+interface AdwNavigationViewEl extends HTMLElement {
+    push(pageOrTag: HTMLElement | string): void;
+}
+
+export class NavigationViewWebStory extends StoryElement {
+    private _view: AdwNavigationViewEl | null = null;
+    private _rootTitle: HTMLElement | null = null;
+    private _detailPage: HTMLElement | null = null;
+    private _detailTitle: HTMLElement | null = null;
+    private _detailStatus: HTMLElement | null = null;
+
+    constructor() {
+        super(NavigationViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return navigationViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('adw-navigation-view') as AdwNavigationViewEl;
+        this._view.style.width = '480px';
+        this._view.style.height = '340px';
+        this._view.setAttribute(
+            'animate-transitions',
+            (this.args.animateTransitions as boolean) ? 'true' : 'false',
+        );
+
+        // --- Detail page: a status page describing the contact. ---
+        this._detailTitle = document.createElement('adw-window-title');
+        this._detailTitle.setAttribute('title', this.args.detailTitle as string);
+        this._detailTitle.setAttribute('slot', 'center');
+
+        this._detailStatus = document.createElement('adw-status-page');
+        this._detailStatus.setAttribute('icon', 'avatar-default');
+        this._detailStatus.setAttribute('title', this.args.detailTitle as string);
+        this._detailStatus.setAttribute('description', 'Mathematician and writer, the first computer programmer.');
+
+        const detailHeader = document.createElement('adw-header-bar');
+        detailHeader.setAttribute('slot', 'top');
+        detailHeader.appendChild(this._detailTitle);
+
+        const detailToolbar = document.createElement('adw-toolbar-view');
+        detailToolbar.append(detailHeader, this._detailStatus);
+
+        this._detailPage = document.createElement('adw-navigation-page');
+        this._detailPage.setAttribute('tag', 'detail');
+        this._detailPage.setAttribute('title', this.args.detailTitle as string);
+        this._detailPage.appendChild(detailToolbar);
+
+        // --- Root page: an "Open contact" pill button that pushes the detail. ---
+        this._rootTitle = document.createElement('adw-window-title');
+        this._rootTitle.setAttribute('title', this.args.rootTitle as string);
+        this._rootTitle.setAttribute('slot', 'center');
+
+        const openButton = document.createElement('adw-button');
+        openButton.setAttribute('label', 'Open contact');
+        openButton.setAttribute('pill', '');
+        openButton.setAttribute('suggested', '');
+        openButton.classList.add('adw-navigation-view-root-action');
+        openButton.addEventListener('click', () => {
+            this._view?.push('detail');
+        });
+
+        const rootHeader = document.createElement('adw-header-bar');
+        rootHeader.setAttribute('slot', 'top');
+        rootHeader.appendChild(this._rootTitle);
+
+        const rootToolbar = document.createElement('adw-toolbar-view');
+        rootToolbar.append(rootHeader, openButton);
+
+        const rootPage = document.createElement('adw-navigation-page');
+        rootPage.setAttribute('tag', 'root');
+        rootPage.setAttribute('title', this.args.rootTitle as string);
+        rootPage.appendChild(rootToolbar);
+
+        // Root is the first child (auto-pushed); the detail is a static page made
+        // reachable via push-by-tag.
+        this._view.append(rootPage, this._detailPage);
+
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._view) return;
+        this._view.setAttribute(
+            'animate-transitions',
+            (this.args.animateTransitions as boolean) ? 'true' : 'false',
+        );
+        this._rootTitle?.setAttribute('title', this.args.rootTitle as string);
+        const detailTitle = this.args.detailTitle as string;
+        this._detailTitle?.setAttribute('title', detailTitle);
+        this._detailStatus?.setAttribute('title', detailTitle);
+        this._detailPage?.setAttribute('title', detailTitle);
+    }
+}
+
+export const NavigationViewWebStories: WebStoryModule = { stories: [NavigationViewWebStory] };