@gjsify/example-gtk-adwaita-storybook 0.54.0 → 0.56.0

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

@@ -0,0 +1,45 @@
+// Browser port of the Center Box story. Shares metadata with center-box.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { centerBoxMeta } from '../../layout/center-box.meta.js';
+
+export class CenterBoxWebStory extends StoryElement {
+    private _box: HTMLElement | null = null;
+
+    constructor() {
+        super(CenterBoxWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return centerBoxMeta;
+    }
+
+    initialize(): void {
+        this._box = document.createElement('gtk-center-box');
+        this._box.style.padding = '12px';
+        for (const [slot, text] of [
+            ['start-widget', 'Start'],
+            ['center-widget', 'Centre'],
+            ['end-widget', 'End'],
+        ] as const) {
+            const child = document.createElement('gtk-label');
+            child.setAttribute('slot', slot);
+            child.setAttribute('label', text);
+            this._box.append(child);
+        }
+        this._apply();
+        this.addContent(this._box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._box) return;
+        this._box.toggleAttribute('shrink-center-last', this.args.shrinkCenterLast as boolean);
+        this._box.setAttribute('baseline-position', this.args.baselinePosition as string);
+    }
+}
+
+export const CenterBoxWebStories: WebStoryModule = { stories: [CenterBoxWebStory] };

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

@@ -0,0 +1,47 @@
+// Browser port of the Clamp Scrollable story. Shares metadata with clamp-scrollable.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { clampScrollableMeta } from '../../layout/clamp-scrollable.meta.js';
+
+const LINES = Array.from({ length: 24 }, (_, i) => `Line ${i + 1}: held at the clamp's width while it scrolls.`);
+
+export class ClampScrollableWebStory extends StoryElement {
+    private _clamp: HTMLElement | null = null;
+
+    constructor() {
+        super(ClampScrollableWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return clampScrollableMeta;
+    }
+
+    initialize(): void {
+        const text = document.createElement('div');
+        text.style.padding = '12px 0';
+        for (const line of LINES) {
+            const row = document.createElement('div');
+            row.textContent = line;
+            text.append(row);
+        }
+
+        this._clamp = document.createElement('adw-clamp-scrollable');
+        this._clamp.style.width = '640px';
+        this._clamp.style.height = '240px';
+        this._clamp.append(text);
+        this._sync();
+        this.addContent(this._clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._clamp) return;
+        this._clamp.setAttribute('maximum-size', String(this.args.maximumSize as number));
+        this._clamp.setAttribute('tightening-threshold', String(this.args.tighteningThreshold as number));
+    }
+}
+
+export const ClampScrollableWebStories: WebStoryModule = { stories: [ClampScrollableWebStory] };

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

@@ -0,0 +1,52 @@
+// Browser port of the Expander story. Shares metadata with expander.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { expanderMeta } from '../../layout/expander.meta.js';
+
+export class ExpanderWebStory extends StoryElement {
+    private _expander: HTMLElement | null = null;
+
+    constructor() {
+        super(ExpanderWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return expanderMeta;
+    }
+
+    initialize(): void {
+        this._expander = document.createElement('gtk-expander');
+        this._expander.style.width = '320px';
+
+        const content = document.createElement('gtk-box');
+        content.setAttribute('orientation', 'vertical');
+        content.setAttribute('spacing', '6');
+        content.style.padding = '12px';
+        for (const line of ['Notifications', 'Sound', 'Network']) {
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', line);
+            content.appendChild(label);
+        }
+        this._expander.appendChild(content);
+
+        this._apply();
+        this.addContent(this._expander);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._expander) return;
+        // `set_label` builds a real GtkLabel out of the string with `use_underline` and
+        // `use_markup` forwarded to it (gtkexpander.c:974-979), so the two flags are set
+        // BEFORE the text — the order the C's own docs give.
+        this._expander.toggleAttribute('use-underline', this.args.useUnderline as boolean);
+        this._expander.setAttribute('label', String(this.args.label));
+        this._expander.toggleAttribute('resize-toplevel', this.args.resizeToplevel as boolean);
+        this._expander.toggleAttribute('expanded', this.args.expanded as boolean);
+    }
+}
+
+export const ExpanderWebStories: WebStoryModule = { stories: [ExpanderWebStory] };

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

@@ -0,0 +1,51 @@
+// Browser port of the Fixed story. Shares metadata with fixed.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { fixedMeta } from '../../layout/fixed.meta.js';
+
+/** What `move()` is on `<gtk-fixed>`, and the only reason this story casts. */
+type MovableFixed = HTMLElement & { move(child: HTMLElement, x: number, y: number): void };
+
+export class FixedWebStory extends StoryElement {
+    private _fixed: MovableFixed | null = null;
+    private _cells: HTMLElement[] = [];
+
+    constructor() {
+        super(FixedWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return fixedMeta;
+    }
+
+    initialize(): void {
+        const fixed = document.createElement('gtk-fixed') as MovableFixed;
+        this._fixed = fixed;
+        for (const text of ['at (x, y)', 'at (x + 96, y + 40)']) {
+            const cell = document.createElement('gtk-label');
+            cell.setAttribute('label', text);
+            this._cells.push(cell);
+            fixed.append(cell);
+        }
+        this._apply();
+        this.addContent(fixed);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const fixed = this._fixed;
+        if (fixed === null) return;
+        const x = this.args.offsetX as number;
+        const y = this.args.offsetY as number;
+        const [first, second] = this._cells;
+        // The two offsets the GTK story hands to `gtk_fixed_move`, through `move()` — the
+        // markup form of the same numbers is the child's own CSS position.
+        if (first !== undefined) fixed.move(first, x, y);
+        if (second !== undefined) fixed.move(second, x + 96, y + 40);
+    }
+}
+
+export const FixedWebStories: WebStoryModule = { stories: [FixedWebStory] };

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

@@ -0,0 +1,40 @@
+// Browser port of the Frame story. Shares metadata with frame.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { frameMeta } from '../../layout/frame.meta.js';
+
+export class FrameWebStory extends StoryElement {
+    private _frame: HTMLElement | null = null;
+
+    constructor() {
+        super(FrameWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return frameMeta;
+    }
+
+    initialize(): void {
+        this._frame = document.createElement('gtk-frame');
+        const body = document.createElement('gtk-label');
+        body.setAttribute('label', 'A framed region: the label sits in the top edge of the border.');
+        body.style.padding = '12px';
+        this._frame.append(body);
+        this._apply();
+        this.addContent(this._frame);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._frame) return;
+        const label = this.args.label as string;
+        if (label === '') this._frame.removeAttribute('label');
+        else this._frame.setAttribute('label', label);
+        this._frame.setAttribute('label-xalign', String(this.args.labelXalign as number));
+    }
+}
+
+export const FrameWebStories: WebStoryModule = { stories: [FrameWebStory] };

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

@@ -0,0 +1,46 @@
+// Browser port of the Grid story. Shares metadata with grid.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gridMeta } from '../../layout/grid.meta.js';
+
+export class GridWebStory extends StoryElement {
+    private _grid: HTMLElement | null = null;
+
+    constructor() {
+        super(GridWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gridMeta;
+    }
+
+    initialize(): void {
+        this._grid = document.createElement('gtk-grid');
+        this._grid.style.padding = '12px';
+        // Source order IS the placement here: a CSS grid fills row by row, which is what
+        // `attach(child, -1, -1, 1, 1)` does in the GTK rendering.
+        for (const text of ['Name', 'Value', 'Unit', 'editable']) {
+            const cell = document.createElement('gtk-label');
+            cell.setAttribute('label', text);
+            cell.style.padding = '6px';
+            this._grid.append(cell);
+        }
+        this._apply();
+        this.addContent(this._grid);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._grid) return;
+        this._grid.setAttribute('column-spacing', String(this.args.columnSpacing as number));
+        this._grid.setAttribute('row-spacing', String(this.args.rowSpacing as number));
+        this._grid.toggleAttribute('column-homogeneous', this.args.columnHomogeneous as boolean);
+        this._grid.toggleAttribute('row-homogeneous', this.args.rowHomogeneous as boolean);
+        this._grid.setAttribute('orientation', this.args.orientation as string);
+    }
+}
+
+export const GridWebStories: WebStoryModule = { stories: [GridWebStory] };

package/src/browser/layout/layout-slot.web.ts

@@ -0,0 +1,60 @@
+// Browser port of the Layout Slot story. Shares metadata with layout-slot.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { layoutSlotMeta } from '../../layout/layout-slot.meta.js';
+
+/**
+ * A slot only ever exists inside a layout, and a layout only ever exists inside a
+ * multi-layout view — the view is what inserts the child whose id matches the slot's. So
+ * this story builds the whole pair and names the SLOT, which is the half a reader cannot
+ * see anywhere else: the `visible` binding the view installs between the two
+ * (adw-multi-layout-view.c:151).
+ */
+export class LayoutSlotWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+    private _child: HTMLElement | null = null;
+
+    constructor() {
+        super(LayoutSlotWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return layoutSlotMeta;
+    }
+
+    initialize(): void {
+        this._child = document.createElement('adw-navigation-page');
+        this._child.setAttribute('tag', 'primary');
+        this._child.setAttribute('slot', 'primary');
+        const label = document.createElement('gtk-label');
+        label.setAttribute('label', 'The child the view inserted here.');
+        this._child.appendChild(label);
+
+        this._view = document.createElement('adw-multi-layout-view');
+        this._view.style.width = '360px';
+        this._view.style.height = '120px';
+        const layout = document.createElement('div');
+        layout.setAttribute('name', 'only');
+        const slot = document.createElement('adw-layout-slot');
+        slot.setAttribute('id', 'primary');
+        layout.appendChild(slot);
+        this._view.appendChild(layout);
+        this._view.appendChild(this._child);
+
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._child) return;
+        this._child.setAttribute('title', this.args.label as string);
+        // The binding is child → slot, one way: the slot cannot show what the child hides.
+        this._child.toggleAttribute('hidden', !(this.args.visible as boolean));
+    }
+}
+
+export const LayoutSlotWebStories: WebStoryModule = { stories: [LayoutSlotWebStory] };

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

@@ -0,0 +1,94 @@
+// Browser port of the Multi Layout View story. Shares metadata with multi-layout-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { multiLayoutViewMeta } from '../../layout/multi-layout-view.meta.js';
+
+/** The two ids every layout here carries: the content, and the secondary pane. */
+const PRIMARY = 'primary';
+const SECONDARY = 'secondary';
+
+/** One arrangement: a split view whose two panes are slots, so the children land by id. */
+function arrangement(collapsed: boolean): Element {
+    const view = document.createElement('adw-navigation-split-view');
+    if (collapsed) view.setAttribute('collapsed', '');
+    view.setAttribute('min-sidebar-width', '160');
+    view.style.width = '420px';
+    view.style.height = '220px';
+    for (const [slot, id] of [
+        ['sidebar', SECONDARY],
+        ['content', PRIMARY],
+    ] as const) {
+        const hole = document.createElement('adw-layout-slot');
+        hole.setAttribute('id', id);
+        hole.setAttribute('slot', slot);
+        view.appendChild(hole);
+    }
+    return view;
+}
+
+export class MultiLayoutViewWebStory extends StoryElement {
+    private _view: HTMLElement | null = null;
+    private _details: Element | null = null;
+
+    constructor() {
+        super(MultiLayoutViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return multiLayoutViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('adw-multi-layout-view');
+        this._view.style.width = '420px';
+        this._view.style.height = '220px';
+        // The FIRST declared layout is the one made current, the way `add_layout` does it.
+        for (const [name, collapsed] of [
+            ['wide', false],
+            ['narrow', true],
+        ] as const) {
+            const layout = arrangement(collapsed);
+            layout.setAttribute('name', name);
+            this._view.appendChild(layout);
+        }
+
+        const inbox = page('Inbox', '12 unread');
+        inbox.setAttribute('slot', PRIMARY);
+        this._details = page('Message');
+        this._details.setAttribute('slot', SECONDARY);
+        this._view.appendChild(inbox);
+        this._view.appendChild(this._details);
+
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view || !this._details) return;
+        // `visible` is bound one way, child to slot, so hiding the CHILD is what takes the
+        // hole with it.
+        this._details.toggleAttribute('hidden', !(this.args.showDetails as boolean));
+        this._view.setAttribute('layout-name', this.args.layoutName as string);
+    }
+}
+
+/** A page with a title and a line of text — a stand-in for the GTK list the story builds. */
+function page(title: string, subtitle = ''): HTMLElement {
+    const el = document.createElement('adw-navigation-page');
+    el.setAttribute('title', title);
+    el.setAttribute('tag', title.toLowerCase());
+    const box = document.createElement('gtk-box');
+    box.setAttribute('orientation', 'vertical');
+    const row = document.createElement('adw-action-row');
+    row.setAttribute('title', title);
+    if (subtitle !== '') row.setAttribute('subtitle', subtitle);
+    box.appendChild(row);
+    el.appendChild(box);
+    return el;
+}
+
+export const MultiLayoutViewWebStories: WebStoryModule = { stories: [MultiLayoutViewWebStory] };

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

@@ -0,0 +1,57 @@
+// Browser port of the Overlay story. Shares metadata with overlay.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { overlayMeta } from '../../layout/overlay.meta.js';
+
+export class OverlayWebStory extends StoryElement {
+    private _overlay: HTMLElement | null = null;
+    private _badge: HTMLElement | null = null;
+
+    constructor() {
+        super(OverlayWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return overlayMeta;
+    }
+
+    initialize(): void {
+        this._overlay = document.createElement('gtk-overlay');
+        this._overlay.style.width = '260px';
+        this._overlay.style.height = '160px';
+
+        const main = document.createElement('gtk-label');
+        main.setAttribute('label', 'Main child — its size is the overlay');
+        main.classList.add('dimmed');
+        this._overlay.appendChild(main);
+
+        this._badge = document.createElement('gtk-label');
+        this._badge.setAttribute('slot', 'overlay');
+        this._badge.setAttribute('label', '2');
+        this._badge.classList.add('osd');
+        this._overlay.appendChild(this._badge);
+
+        this._apply();
+        this.addContent(this._overlay);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._badge) return;
+        // `fill` is `GtkWidget`'s DEFAULT alignment and has no `Gtk.Align` member, so it is
+        // spelled as an absent attribute — the same choice the GTK story makes with
+        // `unset_property`.
+        const align = (value: unknown, name: string) => {
+            if (value === 'fill') this._badge?.removeAttribute(name);
+            else this._badge?.setAttribute(name, String(value));
+        };
+        align(this.args.halign, 'halign');
+        align(this.args.valign, 'valign');
+        this._badge.hidden = !(this.args.showLabel as boolean);
+    }
+}
+
+export const OverlayWebStories: WebStoryModule = { stories: [OverlayWebStory] };

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

@@ -0,0 +1,69 @@
+// Browser port of the Paned story. Shares metadata with paned.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { panedMeta } from '../../layout/paned.meta.js';
+
+function pane(label: string, request: number): HTMLElement {
+    const box = document.createElement('gtk-box');
+    box.setAttribute('orientation', 'vertical');
+    box.setAttribute('spacing', '4');
+    box.style.padding = '12px';
+
+    const title = document.createElement('gtk-label');
+    title.setAttribute('label', label);
+    box.appendChild(title);
+
+    const hint = document.createElement('gtk-label');
+    hint.setAttribute('label', `${request}px of size request`);
+    hint.classList.add('dimmed');
+    box.appendChild(hint);
+    return box;
+}
+
+export class PanedWebStory extends StoryElement {
+    private _paned: HTMLElement | null = null;
+
+    constructor() {
+        super(PanedWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return panedMeta;
+    }
+
+    initialize(): void {
+        this._paned = document.createElement('gtk-paned');
+        this._paned.style.width = '400px';
+        this._paned.style.height = '140px';
+        this._paned.appendChild(pane('First child', 100));
+
+        const end = pane('Second child', 300);
+        end.setAttribute('slot', 'end');
+        this._paned.appendChild(end);
+
+        this._apply();
+        this.addContent(this._paned);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._paned) return;
+        this._paned.setAttribute('orientation', String(this.args.orientation));
+        this._paned.toggleAttribute('wide-handle', this.args.wideHandle as boolean);
+        // All four of these default to TRUE in the pspec, so `"false"` is how one is turned
+        // off — the same rule `<adw-navigation-view can-pop>` reads. The END child's shrink
+        // is not a control: GTK's GtkBuildable sets it alongside the child and there is no
+        // second thing to compare it against here.
+        this._paned.setAttribute('resize-start-child', this.args.resizeStartChild ? 'true' : 'false');
+        this._paned.setAttribute('resize-end-child', this.args.resizeEndChild ? 'true' : 'false');
+        this._paned.setAttribute('shrink-start-child', this.args.shrinkStartChild ? 'true' : 'false');
+        // `position = -1` is the C's "let the size requests decide" (gtkpaned.c:1874), which
+        // is why the control's floor is -1 rather than 0.
+        this._paned.setAttribute('position', String(this.args.position));
+    }
+}
+
+export const PanedWebStories: WebStoryModule = { stories: [PanedWebStory] };

package/src/browser/layout/popover-bin.web.ts

@@ -0,0 +1,54 @@
+// Browser port of the Popover Bin story. Shares metadata with popover-bin.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { POPOVER_BIN_ITEMS, popoverBinMeta } from '../../layout/popover-bin.meta.js';
+
+export class PopoverBinWebStory extends StoryElement {
+    private _bin!: HTMLElement;
+
+    constructor() {
+        super(PopoverBinWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return popoverBinMeta;
+    }
+
+    initialize(): void {
+        this._bin = document.createElement('gtk-popover-bin');
+
+        // A row-shaped child is what `.has-open-popup` is FOR — libadwaita's `_lists.scss`
+        // reads it on a list row and `_sidebars.scss` on a sidebar row — and the bin keeps
+        // it highlighted while its popup is up.
+        const row = document.createElement('gtk-button');
+        row.setAttribute('label', 'Right-click me');
+        this._bin.appendChild(row);
+
+        // The Menu key / the action, which is how a keyboard reaches the same popup the
+        // gesture does (`gtk_shortcut_trigger_create_for_menu`, gtkpopoverbin.c:643-649).
+        this._bin.addEventListener('keydown', (event) => {
+            const key = event as KeyboardEvent;
+            if (key.key === 'ContextMenu' && !key.shiftKey) {
+                key.preventDefault();
+                this._bin.dispatchEvent(new CustomEvent('menu.popup', { bubbles: true }));
+                const popover = this._bin.querySelector('gtk-popover-menu') as HTMLElement & { open: boolean };
+                popover.open = true;
+            }
+        });
+
+        this._apply();
+        this.addContent(this._bin);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bin) return;
+        this._bin.setAttribute('menu-model', JSON.stringify(POPOVER_BIN_ITEMS));
+        this._bin.setAttribute('handle-input', String(this.args.handleInput as boolean));
+    }
+}
+
+export const PopoverBinWebStories: WebStoryModule = { stories: [PopoverBinWebStory] };

package/src/browser/layout/popover-menu.web.ts

@@ -0,0 +1,48 @@
+// Browser port of the Popover Menu story. Shares metadata with popover-menu.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { POPOVER_MENU_ITEMS, popoverMenuMeta } from '../../layout/popover-menu.meta.js';
+
+/** The two members the story drives that are properties rather than attributes. */
+interface PopoverSurface extends HTMLElement {
+    open: boolean;
+}
+
+export class PopoverMenuWebStory extends StoryElement {
+    private _anchor!: HTMLButtonElement;
+    private _popover!: PopoverSurface;
+
+    constructor() {
+        super(PopoverMenuWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return popoverMenuMeta;
+    }
+
+    initialize(): void {
+        this._anchor = document.createElement('button');
+        this._anchor.textContent = 'Open menu';
+        this._popover = document.createElement('gtk-popover-menu') as unknown as PopoverSurface;
+        this._popover.setAttribute('menu-model', JSON.stringify(POPOVER_MENU_ITEMS));
+        this._anchor.appendChild(this._popover);
+        this._apply();
+        this.addContent(this._anchor);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._popover) return;
+        // `start`/`end` are what GTK's LEFT/RIGHT become on a surface placed with logical
+        // properties, so one control name serves both renderers.
+        this._popover.setAttribute('position', this.args.position as string);
+        this._popover.setAttribute('align', this.args.align as string);
+        this._popover.setAttribute('autohide', String(this.args.autohide as boolean));
+        this._popover.setAttribute('menu-title', this.args.menuTitle as string);
+    }
+}
+
+export const PopoverMenuWebStories: WebStoryModule = { stories: [PopoverMenuWebStory] };