@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/buttons/button-styles.story.ts

@@ -0,0 +1,77 @@
+// Gtk.Button style classes — .pill, .circular, .suggested-action,
+// .destructive-action, .flat. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { buttonStylesMeta } from './button-styles.meta.js';
+
+const STYLE_CLASSES = ['pill', 'circular', 'suggested-action', 'destructive-action', 'flat'] as const;
+
+/** Story: a row of Gtk.Buttons demonstrating the standard Adwaita style classes. */
+export class ButtonStylesStory extends StoryWidget {
+    private _demo: Gtk.Button | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookButtonStyles' }, ButtonStylesStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ButtonStylesStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...buttonStylesMeta, component: Gtk.Button.$gtype };
+    }
+
+    initialize(): void {
+        // Adw.WrapBox so the row reflows onto multiple lines instead of
+        // overflowing when the preview is narrow.
+        const box = new Adw.WrapBox({ childSpacing: 12, lineSpacing: 12, halign: Gtk.Align.CENTER });
+
+        const pill = new Gtk.Button({ label: 'Pill' });
+        pill.add_css_class('pill');
+        box.append(pill);
+
+        const circular = new Gtk.Button({ iconName: 'list-add-symbolic' });
+        circular.add_css_class('circular');
+        box.append(circular);
+
+        const suggested = new Gtk.Button({ label: 'Suggested' });
+        suggested.add_css_class('suggested-action');
+        box.append(suggested);
+
+        const destructive = new Gtk.Button({ label: 'Delete' });
+        destructive.add_css_class('destructive-action');
+        box.append(destructive);
+
+        const flat = new Gtk.Button({ label: 'Flat' });
+        flat.add_css_class('flat');
+        box.append(flat);
+
+        this._demo = new Gtk.Button({ label: this.args.label as string });
+        this._applyStyle(this.args.style as string);
+        box.append(this._demo);
+
+        this.addContent(box);
+    }
+
+    private _applyStyle(style: string): void {
+        if (!this._demo) return;
+        for (const cls of STYLE_CLASSES) {
+            this._demo.remove_css_class(cls);
+        }
+        this._demo.add_css_class(style);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._demo) return;
+        this._demo.label = this.args.label as string;
+        this._applyStyle(this.args.style as string);
+    }
+}
+
+GObject.type_ensure(ButtonStylesStory.$gtype);
+
+export const ButtonStylesStories: StoryModule = { stories: [ButtonStylesStory] };

package/src/buttons/split-button.meta.ts

@@ -0,0 +1,45 @@
+// Shared, renderer-agnostic metadata for the Split Button stories. Imported by
+// both the GTK renderer (split-button.story.ts) and the browser renderer
+// (browser/buttons/split-button.web.ts) so the two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const splitButtonMeta: StoryMeta = {
+    title: 'Buttons/Split Button',
+    description: 'Adw.SplitButton — a primary action button paired with a dropdown menu of related actions.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'Save' },
+        {
+            name: 'iconName',
+            label: 'Icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'None', value: '' },
+                { label: 'Save', value: 'document-save-symbolic' },
+                { label: 'Send', value: 'mail-send-symbolic' },
+                { label: 'Add', value: 'list-add-symbolic' },
+            ],
+            defaultValue: 'document-save-symbolic',
+        },
+    ],
+};
+
+export const splitButtonFlatMeta: StoryMeta = {
+    title: 'Buttons/Split Button Flat',
+    description: 'Adw.SplitButton with the .flat style class, as used inside header bars and toolbars.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'Reply' },
+        {
+            name: 'iconName',
+            label: 'Icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'None', value: '' },
+                { label: 'Reply', value: 'mail-reply-sender-symbolic' },
+                { label: 'Edit', value: 'document-edit-symbolic' },
+                { label: 'Open', value: 'document-open-symbolic' },
+            ],
+            defaultValue: 'mail-reply-sender-symbolic',
+        },
+    ],
+};

package/src/buttons/split-button.story.ts

@@ -0,0 +1,102 @@
+// Adw.SplitButton — a button with a main action plus an attached dropdown menu.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gio from '@girs/gio-2.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { splitButtonFlatMeta, splitButtonMeta } from './split-button.meta.js';
+
+/** Builds the shared dropdown menu model used by both split-button variants. */
+function buildMenu(): Gio.Menu {
+    const menu = new Gio.Menu();
+    menu.append('Save as…', 'app.save-as');
+    menu.append('Export', 'app.export');
+    menu.append('Print', 'app.print');
+    return menu;
+}
+
+/** Story: Adw.SplitButton with a primary action and a dropdown menu. */
+export class SplitButtonStory extends StoryWidget {
+    private _widget: Adw.SplitButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookSplitButton' }, SplitButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(SplitButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...splitButtonMeta, component: Adw.SplitButton.$gtype };
+    }
+
+    initialize(): void {
+        this._widget = new Adw.SplitButton({
+            label: this.args.label as string,
+            menuModel: buildMenu(),
+        });
+        const iconName = this.args.iconName as string;
+        if (iconName) {
+            this._widget.iconName = iconName;
+        }
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._widget) return;
+        const iconName = this.args.iconName as string;
+        if (iconName) {
+            this._widget.iconName = iconName;
+        } else {
+            this._widget.label = this.args.label as string;
+        }
+    }
+}
+
+GObject.type_ensure(SplitButtonStory.$gtype);
+
+/** Story: a flat-styled Adw.SplitButton, suited to header bars and toolbars. */
+export class SplitButtonFlatStory extends StoryWidget {
+    private _widget: Adw.SplitButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookSplitButtonFlat' }, SplitButtonFlatStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(SplitButtonFlatStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...splitButtonFlatMeta, component: Adw.SplitButton.$gtype };
+    }
+
+    initialize(): void {
+        this._widget = new Adw.SplitButton({
+            label: this.args.label as string,
+            menuModel: buildMenu(),
+        });
+        this._widget.add_css_class('flat');
+        const iconName = this.args.iconName as string;
+        if (iconName) {
+            this._widget.iconName = iconName;
+        }
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._widget) return;
+        const iconName = this.args.iconName as string;
+        if (iconName) {
+            this._widget.iconName = iconName;
+        } else {
+            this._widget.label = this.args.label as string;
+        }
+    }
+}
+
+GObject.type_ensure(SplitButtonFlatStory.$gtype);
+
+export const SplitButtonStories: StoryModule = { stories: [SplitButtonStory, SplitButtonFlatStory] };

package/src/buttons/toggle-group.meta.ts

@@ -0,0 +1,34 @@
+// Shared, renderer-agnostic metadata for the Toggle Group story. Imported by
+// both the GTK renderer (toggle-group.story.ts) and the browser renderer
+// (browser/buttons/toggle-group.web.ts) so the two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const toggleGroupMeta: StoryMeta = {
+    title: 'Buttons/Toggle Group',
+    description: 'Adw.ToggleGroup — a linked group of Adw.Toggle buttons where exactly one is active.',
+    controls: [
+        {
+            name: 'active',
+            label: 'Active toggle',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'List', value: 0 },
+                { label: 'Grid', value: 1 },
+                { label: 'Columns', value: 2 },
+            ],
+            defaultValue: 0,
+        },
+        {
+            name: 'style',
+            label: 'Style',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Default', value: 'default' },
+                { label: 'Flat', value: 'flat' },
+                { label: 'Round', value: 'round' },
+            ],
+            defaultValue: 'default',
+        },
+    ],
+};

package/src/buttons/toggle-group.story.ts

@@ -0,0 +1,56 @@
+// Adw.ToggleGroup — a linked set of Adw.Toggle buttons with a single active item.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { toggleGroupMeta } from './toggle-group.meta.js';
+
+const STYLE_CLASSES = ['flat', 'round'] as const;
+
+/** Story: Adw.ToggleGroup populated with three Adw.Toggle items. */
+export class ToggleGroupStory extends StoryWidget {
+    private _toggleGroup: Adw.ToggleGroup | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookToggleGroup' }, ToggleGroupStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ToggleGroupStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...toggleGroupMeta, component: Adw.ToggleGroup.$gtype };
+    }
+
+    initialize(): void {
+        this._toggleGroup = new Adw.ToggleGroup();
+        this._toggleGroup.add(new Adw.Toggle({ label: 'List', iconName: 'view-list-symbolic' }));
+        this._toggleGroup.add(new Adw.Toggle({ label: 'Grid', iconName: 'view-grid-symbolic' }));
+        this._toggleGroup.add(new Adw.Toggle({ label: 'Columns', iconName: 'view-columns-symbolic' }));
+        this._toggleGroup.active = this.args.active as number;
+        this._applyStyle(this.args.style as string);
+        this.addContent(this._toggleGroup);
+    }
+
+    private _applyStyle(style: string): void {
+        if (!this._toggleGroup) return;
+        for (const cls of STYLE_CLASSES) {
+            this._toggleGroup.remove_css_class(cls);
+        }
+        if (style !== 'default') {
+            this._toggleGroup.add_css_class(style);
+        }
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._toggleGroup) return;
+        this._toggleGroup.active = this.args.active as number;
+        this._applyStyle(this.args.style as string);
+    }
+}
+
+GObject.type_ensure(ToggleGroupStory.$gtype);
+
+export const ToggleGroupStories: StoryModule = { stories: [ToggleGroupStory] };

package/src/feedback/about-dialog.meta.ts

@@ -0,0 +1,13 @@
+// Shared, renderer-agnostic metadata for the About Dialog story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const aboutDialogMeta: StoryMeta = {
+    title: 'Feedback/About Dialog',
+    description:
+        'Adw.AboutDialog — the standard Adwaita about window with application name, version, credits and license.',
+    controls: [
+        { name: 'applicationName', label: 'Application name', type: ControlType.TEXT, defaultValue: 'Adwaita Storybook' },
+        { name: 'version', label: 'Version', type: ControlType.TEXT, defaultValue: '0.11.0' },
+    ],
+};

package/src/feedback/about-dialog.story.ts

@@ -0,0 +1,64 @@
+// Adw.AboutDialog — the standard Adwaita "About" window for an application.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { aboutDialogMeta } from './about-dialog.meta.js';
+
+/** Story: Adw.AboutDialog presented from a button, with app metadata + credits. */
+export class AboutDialogStory extends StoryWidget {
+    private _button: Gtk.Button | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookAboutDialog' }, AboutDialogStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(AboutDialogStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...aboutDialogMeta, component: Adw.AboutDialog.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.Button({
+            label: 'Show dialog',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        this._button.add_css_class('pill');
+        this._button.add_css_class('suggested-action');
+        this._button.connect('clicked', () => this._present());
+
+        this.addContent(this._button);
+    }
+
+    private _present(): void {
+        const dialog = new Adw.AboutDialog({
+            applicationName: this.args.applicationName as string,
+            applicationIcon: 'application-x-executable-symbolic',
+            developerName: 'A GJSify Project',
+            version: this.args.version as string,
+            comments: 'A live catalogue of native GTK and Adwaita widgets, rendered under GJS.',
+            website: 'https://github.com/gjsify/gjsify',
+            issueUrl: 'https://github.com/gjsify/gjsify/issues',
+            licenseType: Gtk.License.MIT_X11,
+            developers: ['Ada Lovelace', 'Grace Hopper'],
+            designers: ['Margaret Hamilton'],
+            copyright: '© 2026 The GJSify Project',
+        });
+
+        dialog.present(this);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+}
+
+GObject.type_ensure(AboutDialogStory.$gtype);
+
+export const AboutDialogStories: StoryModule = { stories: [AboutDialogStory] };

package/src/feedback/alert-dialog.meta.ts

@@ -0,0 +1,19 @@
+// Shared, renderer-agnostic metadata for the Alert Dialog story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const alertDialogMeta: StoryMeta = {
+    title: 'Feedback/Alert Dialog',
+    description:
+        'Adw.AlertDialog — a modal dialog with a heading, body text and responses, including a destructive action.',
+    controls: [
+        { name: 'heading', label: 'Heading', type: ControlType.TEXT, defaultValue: 'Delete Project?' },
+        {
+            name: 'body',
+            label: 'Body',
+            type: ControlType.TEXT,
+            defaultValue:
+                'This will permanently remove the project and all of its files. This action cannot be undone.',
+        },
+    ],
+};

package/src/feedback/alert-dialog.story.ts

@@ -0,0 +1,61 @@
+// Adw.AlertDialog — a modal dialog with a heading, body and a row of responses.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { alertDialogMeta } from './alert-dialog.meta.js';
+
+/** Story: Adw.AlertDialog presented from a button, with cancel/destructive responses. */
+export class AlertDialogStory extends StoryWidget {
+    private _button: Gtk.Button | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookAlertDialog' }, AlertDialogStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(AlertDialogStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...alertDialogMeta, component: Adw.AlertDialog.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.Button({
+            label: 'Show dialog',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        this._button.add_css_class('pill');
+        this._button.add_css_class('suggested-action');
+        this._button.connect('clicked', () => this._present());
+
+        this.addContent(this._button);
+    }
+
+    private _present(): void {
+        const dialog = new Adw.AlertDialog({
+            heading: this.args.heading as string,
+            body: this.args.body as string,
+        });
+
+        dialog.add_response('cancel', 'Cancel');
+        dialog.add_response('delete', 'Delete');
+        dialog.set_response_appearance('delete', Adw.ResponseAppearance.DESTRUCTIVE);
+        dialog.set_default_response('cancel');
+        dialog.set_close_response('cancel');
+
+        dialog.present(this);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+}
+
+GObject.type_ensure(AlertDialogStory.$gtype);
+
+export const AlertDialogStories: StoryModule = { stories: [AlertDialogStory] };

package/src/feedback/preferences-dialog.meta.ts

@@ -0,0 +1,13 @@
+// Shared, renderer-agnostic metadata for the Preferences Dialog story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const preferencesDialogMeta: StoryMeta = {
+    title: 'Feedback/Preferences Dialog',
+    description:
+        'Adw.PreferencesDialog — a preferences window with a page, a group and a handful of boxed-list rows.',
+    controls: [
+        { name: 'pageTitle', label: 'Page title', type: ControlType.TEXT, defaultValue: 'General' },
+        { name: 'groupTitle', label: 'Group title', type: ControlType.TEXT, defaultValue: 'Appearance' },
+    ],
+};

package/src/feedback/preferences-dialog.story.ts

@@ -0,0 +1,92 @@
+// Adw.PreferencesDialog — a multi-page preferences window built from pages,
+// groups and rows. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { preferencesDialogMeta } from './preferences-dialog.meta.js';
+
+/** Story: Adw.PreferencesDialog presented from a button, with one page of rows. */
+export class PreferencesDialogStory extends StoryWidget {
+    private _button: Gtk.Button | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookPreferencesDialog' }, PreferencesDialogStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(PreferencesDialogStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...preferencesDialogMeta, component: Adw.PreferencesDialog.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.Button({
+            label: 'Show dialog',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        this._button.add_css_class('pill');
+        this._button.add_css_class('suggested-action');
+        this._button.connect('clicked', () => this._present());
+
+        this.addContent(this._button);
+    }
+
+    private _present(): void {
+        const dialog = new Adw.PreferencesDialog();
+
+        const page = new Adw.PreferencesPage({
+            title: this.args.pageTitle as string,
+            iconName: 'preferences-system-symbolic',
+        });
+
+        const group = new Adw.PreferencesGroup({
+            title: this.args.groupTitle as string,
+            description: 'Control how the application looks and behaves.',
+        });
+
+        group.add(
+            new Adw.SwitchRow({
+                title: 'Dark style',
+                subtitle: 'Use a dark colour scheme',
+                active: true,
+            }),
+        );
+        group.add(
+            new Adw.ComboRow({
+                title: 'Accent colour',
+                model: new Gtk.StringList({ strings: ['Blue', 'Teal', 'Green', 'Orange', 'Purple'] }),
+                selected: 0,
+            }),
+        );
+        group.add(
+            new Adw.SpinRow({
+                title: 'Font size',
+                adjustment: new Gtk.Adjustment({
+                    lower: 8,
+                    upper: 24,
+                    value: 12,
+                    stepIncrement: 1,
+                    pageIncrement: 4,
+                }),
+            }),
+        );
+
+        page.add(group);
+        dialog.add(page);
+
+        dialog.present(this);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog is rebuilt from the latest args each time it is presented.
+    }
+}
+
+GObject.type_ensure(PreferencesDialogStory.$gtype);
+
+export const PreferencesDialogStories: StoryModule = { stories: [PreferencesDialogStory] };

package/src/feedback/toast.meta.ts

@@ -0,0 +1,23 @@
+// Shared, renderer-agnostic metadata for the Toast story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const toastMeta: StoryMeta = {
+    title: 'Feedback/Toast',
+    description:
+        'Adw.Toast — a transient notification, with an optional action button, shown over an Adw.ToastOverlay.',
+    controls: [
+        { name: 'title', label: 'Toast text', type: ControlType.TEXT, defaultValue: 'File moved to Trash' },
+        {
+            name: 'timeout',
+            label: 'Timeout (s)',
+            type: ControlType.NUMBER,
+            min: 0,
+            max: 10,
+            step: 1,
+            defaultValue: 3,
+        },
+        { name: 'hasButton', label: 'Action button', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'buttonLabel', label: 'Button label', type: ControlType.TEXT, defaultValue: 'Undo' },
+    ],
+};

package/src/feedback/toast.story.ts

@@ -0,0 +1,66 @@
+// Adw.Toast — a transient notification shown over content via Adw.ToastOverlay.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { toastMeta } from './toast.meta.js';
+
+/** Story: Adw.Toast presented through an Adw.ToastOverlay on button press. */
+export class ToastStory extends StoryWidget {
+    private _overlay: Adw.ToastOverlay | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookToast' }, ToastStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ToastStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...toastMeta, component: Adw.Toast.$gtype };
+    }
+
+    initialize(): void {
+        const button = new Gtk.Button({
+            label: 'Show toast',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        button.add_css_class('pill');
+        button.add_css_class('suggested-action');
+        button.connect('clicked', () => this._showToast());
+
+        this._overlay = new Adw.ToastOverlay({
+            child: button,
+            widthRequest: 360,
+            heightRequest: 220,
+        });
+        this.addContent(this._overlay);
+    }
+
+    private _showToast(): void {
+        if (!this._overlay) return;
+
+        const toast = new Adw.Toast({
+            title: this.args.title as string,
+            timeout: this.args.timeout as number,
+        });
+
+        if (this.args.hasButton as boolean) {
+            toast.buttonLabel = this.args.buttonLabel as string;
+        }
+
+        this._overlay.add_toast(toast);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // Toasts are built on demand in _showToast(); nothing to re-apply to the overlay.
+    }
+}
+
+GObject.type_ensure(ToastStory.$gtype);
+
+export const ToastStories: StoryModule = { stories: [ToastStory] };