@gjsify/example-gtk-adwaita-storybook 0.19.0

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@gjsify/example-gtk-adwaita-storybook",
+  "version": "0.19.0",
+  "description": "Interactive component browser for Libadwaita widgets — a native Adwaita storybook built on @gjsify/storybook, debuggable over DBus/MCP via @gjsify/devtools",
+  "type": "module",
+  "main": "dist/gjs.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    "./browser": "./src/browser/embed.ts",
+    "./metas": "./src/metas.ts",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "clear": "rm -rf dist tsconfig.tsbuildinfo node_modules/.cache/gjsify-storybook",
+    "check": "gjsify tsc --noEmit",
+    "start": "gjsify storybook",
+    "start:watch": "gjsify storybook --watch",
+    "start:browser": "http-server dist -o -c-1",
+    "build": "gjsify storybook --build-only --out dist/gjs.js",
+    "build:browser": "gjsify build src/browser/main.ts --app browser --outfile dist/browser-main.js",
+    "build:assets": "mkdir -p dist && cp -f src/browser/index.html dist/index.html",
+    "build:web": "gjsify run build:browser && gjsify run build:assets",
+    "debug": "gjsify debug --profile storybook"
+  },
+  "gjsify": {
+    "main": "dist/gjs.js",
+    "storybook": {
+      "applicationId": "org.gjsify.AdwaitaStorybook",
+      "title": "Adwaita Storybook",
+      "stories": "src",
+      "globals": "auto"
+    },
+    "tier": 2
+  },
+  "devDependencies": {
+    "@girs/adw-1": "^4.1.0",
+    "@girs/gio-2.0": "^4.1.0",
+    "@girs/gjs": "^4.1.0",
+    "@girs/glib-2.0": "^4.1.0",
+    "@girs/gobject-2.0": "^4.1.0",
+    "@girs/gtk-4.0": "^4.1.0",
+    "@gjsify/adwaita-web": "^0.19.0",
+    "@gjsify/cli": "^0.19.0",
+    "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
+    "@gjsify/storybook": "^0.19.0",
+    "@gjsify/adwaita-storybook": "^0.19.0",
+    "@types/node": "^25.9.2",
+    "typescript": "^6.0.3"
+  },
+  "author": "Pascal Garber <pascal@artandcode.studio>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gjsify/gjsify.git",
+    "directory": "showcases/gtk/adwaita-storybook"
+  },
+  "bugs": {
+    "url": "https://github.com/gjsify/gjsify/issues"
+  },
+  "homepage": "https://github.com/gjsify/gjsify/tree/main/showcases/gtk/adwaita-storybook#readme"
+}

package/src/browser/buttons/button-content.web.ts

@@ -0,0 +1,55 @@
+// Browser port of the Button Content story — an <adw-button-content> (icon +
+// label) inside a suggested-action pill <adw-button>, mirroring the GTK twin
+// (button-content.story.ts) which places an Adw.ButtonContent inside a
+// Gtk.Button with the .suggested-action + .pill style classes.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { buttonContentMeta } from '../../buttons/button-content.meta.js';
+
+/** GTK symbolic name (e.g. "folder-download-symbolic") → adwaita-web icon-name. */
+function iconName(gtkName: string): string {
+    return gtkName.replace(/-symbolic$/, '');
+}
+
+export class ButtonContentWebStory extends StoryElement {
+    private _content: HTMLElement | null = null;
+
+    constructor() {
+        super(ButtonContentWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return buttonContentMeta;
+    }
+
+    initialize(): void {
+        this._content = document.createElement('adw-button-content');
+        this._syncContent();
+
+        // The native story wraps the content in a suggested-action pill button.
+        // Use a plain button carrying the adw-button style classes (the
+        // <adw-button> custom element rebuilds its subtree from attributes and
+        // would discard the nested <adw-button-content>).
+        const button = document.createElement('button');
+        button.className = 'adw-button suggested-action pill';
+        button.append(this._content);
+
+        this.addContent(button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncContent();
+    }
+
+    private _syncContent(): void {
+        if (!this._content) return;
+
+        this._content.setAttribute('label', this.args.label as string);
+        this._content.setAttribute('icon-name', iconName(this.args.iconName as string));
+
+        if (this.args.canShrink) this._content.setAttribute('can-shrink', '');
+        else this._content.removeAttribute('can-shrink');
+    }
+}
+
+export const ButtonContentWebStories: WebStoryModule = { stories: [ButtonContentWebStory] };

package/src/browser/buttons/button-styles.web.ts

@@ -0,0 +1,79 @@
+// Browser port of the Button Styles story — adw-button with Adwaita style
+// variants. Shares its metadata/controls with the GTK twin (button-styles.story.ts).
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { buttonStylesMeta } from '../../buttons/button-styles.meta.js';
+
+const VARIANT_ATTRS = ['pill', 'circular', 'suggested', 'destructive', 'flat'] as const;
+
+/** Map the storybook `style` value to an <adw-button> variant attribute. */
+const VARIANT_BY_STYLE: Record<string, (typeof VARIANT_ATTRS)[number]> = {
+    pill: 'pill',
+    circular: 'circular',
+    'suggested-action': 'suggested',
+    'destructive-action': 'destructive',
+    flat: 'flat',
+};
+
+function button(opts: { label?: string; icon?: string; variant?: (typeof VARIANT_ATTRS)[number] }): HTMLElement {
+    const btn = document.createElement('adw-button');
+    if (opts.label) btn.setAttribute('label', opts.label);
+    if (opts.icon) btn.setAttribute('icon', opts.icon);
+    if (opts.variant) btn.setAttribute(opts.variant, '');
+    return btn;
+}
+
+export class ButtonStylesWebStory extends StoryElement {
+    private _demo: HTMLElement | null = null;
+
+    constructor() {
+        super(ButtonStylesWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return buttonStylesMeta;
+    }
+
+    initialize(): void {
+        // A flex-wrap row mirrors the native Adw.WrapBox so the demo reflows
+        // instead of overflowing in a narrow preview.
+        const box = document.createElement('div');
+        box.style.cssText = 'display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;';
+
+        box.append(
+            button({ label: 'Pill', variant: 'pill' }),
+            button({ icon: 'list-add', variant: 'circular' }),
+            button({ label: 'Suggested', variant: 'suggested' }),
+            button({ label: 'Delete', variant: 'destructive' }),
+            button({ label: 'Flat', variant: 'flat' }),
+        );
+
+        this._demo = button({ label: this.args.label as string });
+        this._applyStyle(this.args.style as string);
+        box.append(this._demo);
+
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._demo) return;
+        this._applyStyle(this.args.style as string);
+    }
+
+    private _applyStyle(style: string): void {
+        if (!this._demo) return;
+        for (const attr of VARIANT_ATTRS) this._demo.removeAttribute(attr);
+        const variant = VARIANT_BY_STYLE[style];
+        if (variant) this._demo.setAttribute(variant, '');
+        // The circular variant is icon-only (no label), like the native demo.
+        if (variant === 'circular') {
+            this._demo.setAttribute('icon', 'list-add');
+            this._demo.removeAttribute('label');
+        } else {
+            this._demo.removeAttribute('icon');
+            this._demo.setAttribute('label', this.args.label as string);
+        }
+    }
+}
+
+export const ButtonStylesWebStories: WebStoryModule = { stories: [ButtonStylesWebStory] };

package/src/browser/buttons/split-button.web.ts

@@ -0,0 +1,86 @@
+// Browser port of the Split Button stories — adw-split-button, a primary action
+// paired with a dropdown menu. Shares its metadata/controls with the GTK twins
+// (split-button.story.ts) so the two render identically.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { splitButtonFlatMeta, splitButtonMeta } from '../../buttons/split-button.meta.js';
+
+// The shared dropdown menu model used by both split-button variants — the web
+// twin of buildMenu() in the GTK story.
+const MENU = JSON.stringify([
+    { label: 'Save as…', action: 'app.save-as' },
+    { label: 'Export', action: 'app.export' },
+    { label: 'Print', action: 'app.print' },
+]);
+
+/** Strip the libadwaita `-symbolic` suffix to the adwaita-web base icon name. */
+function iconBaseName(symbolic: string): string {
+    return symbolic.replace(/-symbolic$/, '');
+}
+
+/** Build an <adw-split-button> from the current story args. */
+function splitButton(args: StoryArgs, opts: { flat?: boolean } = {}): HTMLElement {
+    const el = document.createElement('adw-split-button');
+    el.setAttribute('menu', MENU);
+    el.setAttribute('label', args.label as string);
+    const iconName = args.iconName as string;
+    if (iconName) el.setAttribute('icon-name', iconBaseName(iconName));
+    if (opts.flat) el.setAttribute('flat', '');
+    return el;
+}
+
+abstract class SplitButtonWebStoryBase extends StoryElement {
+    protected _widget: HTMLElement | null = null;
+    protected abstract get flat(): boolean;
+
+    initialize(): void {
+        this._widget = splitButton(this.args, { flat: this.flat });
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._widget) return;
+        const iconName = this.args.iconName as string;
+        // Mirror the GTK story: with an icon set, only the icon is shown; without
+        // one, the label drives the action half.
+        if (iconName) {
+            this._widget.setAttribute('icon-name', iconBaseName(iconName));
+            this._widget.removeAttribute('label');
+        } else {
+            this._widget.removeAttribute('icon-name');
+            this._widget.setAttribute('label', this.args.label as string);
+        }
+    }
+}
+
+/** Story: Adw.SplitButton with a primary action and a dropdown menu. */
+export class SplitButtonWebStory extends SplitButtonWebStoryBase {
+    protected get flat(): boolean {
+        return false;
+    }
+
+    constructor() {
+        super(SplitButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return splitButtonMeta;
+    }
+}
+
+/** Story: a flat-styled Adw.SplitButton, suited to header bars and toolbars. */
+export class SplitButtonFlatWebStory extends SplitButtonWebStoryBase {
+    protected get flat(): boolean {
+        return true;
+    }
+
+    constructor() {
+        super(SplitButtonFlatWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return splitButtonFlatMeta;
+    }
+}
+
+export const SplitButtonWebStories: WebStoryModule = { stories: [SplitButtonWebStory, SplitButtonFlatWebStory] };

package/src/browser/buttons/toggle-group.web.ts

@@ -0,0 +1,56 @@
+// Browser port of the Toggle Group story — adw-toggle-group with three
+// adw-toggle children and the Adwaita style variants. Shares its
+// metadata/controls with the GTK twin (toggle-group.story.ts).
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { toggleGroupMeta } from '../../buttons/toggle-group.meta.js';
+
+const STYLE_CLASSES = ['flat', 'round'] as const;
+
+// The three toggles, mirroring the native demo. (`view-dual` stands in for the
+// native `view-columns-symbolic` — the closest icon in @gjsify/adwaita-icons.)
+const TOGGLES: ReadonlyArray<{ label: string; icon: string }> = [
+    { label: 'List', icon: 'view-list' },
+    { label: 'Grid', icon: 'view-grid' },
+    { label: 'Columns', icon: 'view-dual' },
+];
+
+export class ToggleGroupWebStory extends StoryElement {
+    private _group: HTMLElement | null = null;
+
+    constructor() {
+        super(ToggleGroupWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return toggleGroupMeta;
+    }
+
+    initialize(): void {
+        const group = document.createElement('adw-toggle-group');
+        for (const { label, icon } of TOGGLES) {
+            const toggle = document.createElement('adw-toggle');
+            toggle.setAttribute('label', label);
+            toggle.setAttribute('icon-name', icon);
+            group.appendChild(toggle);
+        }
+        group.setAttribute('active', String(this.args.active as number));
+        this._group = group;
+        this._applyStyle(this.args.style as string);
+        this.addContent(group);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._group) return;
+        this._group.setAttribute('active', String(this.args.active as number));
+        this._applyStyle(this.args.style as string);
+    }
+
+    private _applyStyle(style: string): void {
+        if (!this._group) return;
+        for (const cls of STYLE_CLASSES) this._group.classList.remove(cls);
+        if (style !== 'default') this._group.classList.add(style);
+    }
+}
+
+export const ToggleGroupWebStories: WebStoryModule = { stories: [ToggleGroupWebStory] };

package/src/browser/embed.ts

@@ -0,0 +1,46 @@
+// Embeddable browser target — `mount(container)` renders the Adwaita storybook
+// into any DOM element, mirroring the `mount()` contract the DOM showcases
+// expose (e.g. `@gjsify/example-dom-minimalist-browser/browser`). The gjsify
+// website uses it to embed the storybook live in its showcase pages and the
+// home-page slideshow.
+//
+// The storybook's root is an `<adw-window class="sb-window">`; the website's
+// embed CSS sizes any `adw-window` to fill its slot, so the storybook fills the
+// container the same way the native window fills its toplevel. The renderer is
+// responsive (it collapses to single-pane navigation below 720px, like the
+// native `Adw.Breakpoint`), so it adapts to both the wide doc-page embed and
+// narrow mobile layouts.
+
+import { mountStorybook } from '@gjsify/adwaita-storybook';
+import { stories } from './stories.js';
+
+export interface ShowcaseHandle {
+    /** No-op: the storybook renders no animation, so there's nothing to pause. */
+    pause(): void;
+    resume(): void;
+    readonly isPaused: boolean;
+}
+
+export interface MountOptions {
+    /** Window title shown in the sidebar header (default "Adwaita Storybook"). */
+    title?: string;
+}
+
+export function mount(container: HTMLElement, options?: MountOptions): ShowcaseHandle {
+    mountStorybook(container, { title: options?.title ?? 'Adwaita Storybook', stories });
+
+    // The storybook is static (no rAF loop), so pause/resume are inert — they
+    // exist only to satisfy the slideshow's optional ShowcaseHandle contract.
+    let paused = false;
+    return {
+        pause(): void {
+            paused = true;
+        },
+        resume(): void {
+            paused = false;
+        },
+        get isPaused(): boolean {
+            return paused;
+        },
+    };
+}

package/src/browser/feedback/about-dialog.web.ts

@@ -0,0 +1,82 @@
+// Browser port of the About Dialog story. Shares metadata with about-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { aboutDialogMeta } from '../../feedback/about-dialog.meta.js';
+
+/** Imperatively-set list/scalar properties on the <adw-about-dialog> element. */
+interface AboutDialogElement extends HTMLElement {
+    developers: string[];
+    designers: string[];
+    present(): void;
+}
+
+export class AboutDialogWebStory extends StoryElement {
+    private _dialog: AboutDialogElement | null = null;
+
+    constructor() {
+        super(AboutDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return aboutDialogMeta;
+    }
+
+    initialize(): void {
+        // The persistent content — a centered pill button that presents the
+        // dialog (mirrors the native story's "Show dialog" button).
+        const center = document.createElement('div');
+        center.style.display = 'flex';
+        center.style.alignItems = 'center';
+        center.style.justifyContent = 'center';
+        center.style.minHeight = '160px';
+
+        const button = document.createElement('adw-button');
+        button.textContent = 'Show dialog';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._present());
+        center.append(button);
+
+        // The dialog is a fixed full-cover overlay — mount it on the body so the
+        // scrim covers the whole viewport, not just the clamped story stage.
+        this._dialog = document.createElement('adw-about-dialog') as AboutDialogElement;
+        document.body.appendChild(this._dialog);
+
+        this.addContent(center);
+    }
+
+    private _present(): void {
+        if (!this._dialog) return;
+        const dialog = this._dialog;
+        dialog.setAttribute('application-name', (this.args.applicationName as string) ?? 'Adwaita Storybook');
+        // The native story uses `application-x-executable-symbolic`; that glyph
+        // does not ship in the web icon set, so leave it unset to fall back to
+        // the component's generic application icon (emblem-system).
+        dialog.setAttribute('developer-name', 'A GJSify Project');
+        dialog.setAttribute('version', (this.args.version as string) ?? '0.11.0');
+        dialog.setAttribute('comments', 'A live catalogue of native GTK and Adwaita widgets, rendered under GJS.');
+        dialog.setAttribute('website', 'https://github.com/gjsify/gjsify');
+        dialog.setAttribute('issue-url', 'https://github.com/gjsify/gjsify/issues');
+        dialog.setAttribute('license', 'The MIT License (MIT)');
+        dialog.setAttribute('license-url', 'https://opensource.org/licenses/mit-license.php');
+        dialog.setAttribute('copyright', '© 2026 The GJSify Project');
+        dialog.developers = ['Ada Lovelace', 'Grace Hopper'];
+        dialog.designers = ['Margaret Hamilton'];
+        dialog.present();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+
+    teardown(): void {
+        // The dialog lives on the body, not the story stage — remove it when the
+        // story is deselected so it does not leak across navigations.
+        if (this._dialog && this._dialog.parentNode) {
+            this._dialog.parentNode.removeChild(this._dialog);
+        }
+        this._dialog = null;
+    }
+}
+
+export const AboutDialogWebStories: WebStoryModule = { stories: [AboutDialogWebStory] };

package/src/browser/feedback/alert-dialog.web.ts

@@ -0,0 +1,72 @@
+// Browser port of the Alert Dialog story. Shares metadata with alert-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { alertDialogMeta } from '../../feedback/alert-dialog.meta.js';
+
+/**
+ * Story: adw-alert-dialog presented from a button, with cancel/destructive
+ * responses — a 1:1 port of the GTK AlertDialogStory.
+ */
+export class AlertDialogWebStory extends StoryElement {
+    constructor() {
+        super(AlertDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return alertDialogMeta;
+    }
+
+    initialize(): void {
+        const button = document.createElement('adw-button');
+        button.textContent = 'Show dialog';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._present());
+
+        // Centre the trigger button so the preview matches the GTK story's
+        // centred halign/valign placement.
+        const center = document.createElement('div');
+        center.style.display = 'flex';
+        center.style.alignItems = 'center';
+        center.style.justifyContent = 'center';
+        center.style.minHeight = '160px';
+        center.append(button);
+
+        this.addContent(center);
+    }
+
+    /** Build + present a fresh dialog, reading the latest args (as the GTK story does). */
+    private _present(): void {
+        const dialog = document.createElement('adw-alert-dialog') as HTMLElement & {
+            addResponse(id: string, label: string): void;
+            setResponseAppearance(id: string, appearance: 'default' | 'suggested' | 'destructive'): void;
+            setDefaultResponse(id: string | null): void;
+            setCloseResponse(id: string): void;
+            present(): void;
+        };
+        dialog.setAttribute('heading', this.args.heading as string);
+        dialog.setAttribute('body', this.args.body as string);
+
+        // The custom element only wires up its responses once connected, so add
+        // it to the document before driving the imperative API.
+        document.body.appendChild(dialog);
+
+        dialog.addResponse('cancel', 'Cancel');
+        dialog.addResponse('delete', 'Delete');
+        dialog.setResponseAppearance('delete', 'destructive');
+        dialog.setDefaultResponse('cancel');
+        dialog.setCloseResponse('cancel');
+
+        // Remove the dialog from the DOM once the user responds — the GTK dialog
+        // is likewise destroyed on response.
+        dialog.addEventListener('response', () => dialog.remove(), { once: true });
+
+        dialog.present();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+}
+
+export const AlertDialogWebStories: WebStoryModule = { stories: [AlertDialogWebStory] };

package/src/browser/feedback/preferences-dialog.web.ts

@@ -0,0 +1,106 @@
+// Browser port of the Preferences Dialog story. Shares metadata with
+// preferences-dialog.story.ts and presents the same single-page dialog from a
+// "Show dialog" pill button.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { preferencesDialogMeta } from '../../feedback/preferences-dialog.meta.js';
+
+export class PreferencesDialogWebStory extends StoryElement {
+    private _dialog: HTMLElement | null = null;
+
+    constructor() {
+        super(PreferencesDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return preferencesDialogMeta;
+    }
+
+    /** Build the single page of grouped rows, mirroring the native story. */
+    private _buildDialog(): HTMLElement {
+        const dialog = document.createElement('adw-preferences-dialog');
+        dialog.setAttribute('title', 'Preferences');
+
+        const page = document.createElement('adw-preferences-page');
+        page.setAttribute('title', (this.args.pageTitle as string) ?? 'General');
+        page.setAttribute('icon-name', 'preferences-system-symbolic');
+
+        const group = document.createElement('adw-preferences-group');
+        group.setAttribute('title', (this.args.groupTitle as string) ?? 'Appearance');
+        group.setAttribute('description', 'Control how the application looks and behaves.');
+
+        // Dark style — a switch row, on by default (matches the native SwitchRow).
+        const darkStyle = document.createElement('adw-switch-row');
+        darkStyle.setAttribute('title', 'Dark style');
+        darkStyle.setAttribute('subtitle', 'Use a dark colour scheme');
+        darkStyle.setAttribute('active', '');
+        group.append(darkStyle);
+
+        // Accent colour — a combo row over the same five options.
+        const accent = document.createElement('adw-combo-row');
+        accent.setAttribute('title', 'Accent colour');
+        accent.setAttribute('items', JSON.stringify(['Blue', 'Teal', 'Green', 'Orange', 'Purple']));
+        accent.setAttribute('selected', '0');
+        group.append(accent);
+
+        // Font size — a spin row bounded 8–24, defaulting to 12.
+        const fontSize = document.createElement('adw-spin-row');
+        fontSize.setAttribute('title', 'Font size');
+        fontSize.setAttribute('min', '8');
+        fontSize.setAttribute('max', '24');
+        fontSize.setAttribute('step', '1');
+        fontSize.setAttribute('value', '12');
+        group.append(fontSize);
+
+        page.append(group);
+        dialog.append(page);
+        return dialog;
+    }
+
+    initialize(): void {
+        // The persistent story content: a centered pill button that presents the
+        // dialog (the native story's "Show dialog" trigger).
+        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%';
+        center.style.minHeight = '200px';
+
+        const button = document.createElement('adw-button');
+        button.textContent = 'Show dialog';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._present());
+
+        center.append(button);
+        this.addContent(center);
+    }
+
+    private _present(): void {
+        // Rebuild the dialog from the latest args each time it is presented (the
+        // native story does the same), then reveal it. The dialog appends itself
+        // to <body> so its fixed scrim covers the whole viewport.
+        if (this._dialog) this._dialog.remove();
+        this._dialog = this._buildDialog();
+        this._dialog.addEventListener('closed', () => {
+            this._dialog?.remove();
+            this._dialog = null;
+        });
+        document.body.appendChild(this._dialog);
+        // Reveal after connect so the element is upgraded + initialized.
+        requestAnimationFrame(() => this._dialog?.setAttribute('open', ''));
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog is rebuilt from the latest args each time it is presented.
+    }
+
+    teardown(): void {
+        this._dialog?.remove();
+        this._dialog = null;
+    }
+}
+
+export const PreferencesDialogWebStories: WebStoryModule = { stories: [PreferencesDialogWebStory] };