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

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

@@ -0,0 +1,105 @@
+// Browser port of the Gtk.AboutDialog story. Shares metadata with gtk-about-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gtkAboutDialogMeta } from '../../feedback/gtk-about-dialog.meta.js';
+
+/** The imperative half of the `<gtk-about-dialog>` element the markup cannot spell. */
+interface AboutDialogElement extends HTMLElement {
+    authors: string[];
+    documenters: string[];
+    artists: string[];
+    translatorCredits: string;
+    addCreditSection(name: string, people: readonly string[]): void;
+    present(): void;
+    set licenseType(value: string);
+}
+
+export class GtkAboutDialogWebStory extends StoryElement {
+    private _dialog: AboutDialogElement | null = null;
+    private _button: HTMLButtonElement | null = null;
+
+    constructor() {
+        super(GtkAboutDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gtkAboutDialogMeta;
+    }
+
+    initialize(): void {
+        const center = document.createElement('div');
+        center.style.display = 'flex';
+        center.style.alignItems = 'center';
+        center.style.justifyContent = 'center';
+        center.style.minHeight = '160px';
+
+        this._button = document.createElement('button');
+        this._button.textContent = 'Show dialog';
+        this._button.setAttribute('pill', '');
+        this._button.setAttribute('suggested', '');
+        this._button.addEventListener('click', () => this._present());
+        center.appendChild(this._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('gtk-about-dialog') as AboutDialogElement;
+        document.body.appendChild(this._dialog);
+
+        this.addContent(center);
+    }
+
+    private _present(): void {
+        const dialog = this._dialog;
+        if (dialog === null) return;
+        // A fresh presentation, because `close()` resets the stack to the main page and
+        // the credits page is populated lazily.
+        dialog.setAttribute('program-name', (this.args.programName as string) ?? 'Calculator');
+        dialog.setAttribute('version', (this.args.version as string) ?? '48.1');
+        dialog.setAttribute('logo-icon-name', 'application-x-executable');
+        dialog.setAttribute('comments', 'An arithmetic calculator for the GNOME desktop.');
+        dialog.setAttribute('website', 'https://gitlab.gnome.org/World/gnome-calculator');
+        dialog.setAttribute('website-label', 'GNOME Calculator');
+        dialog.setAttribute('copyright', '© 2026 The GNOME Project');
+        dialog.setAttribute('system-information', 'GTK 4.24.0\nglibc 2.42\nBuilt with meson 1.6');
+
+        const type = (this.args.licenseType as string) ?? 'gpl-3-0';
+        if (type === 'custom') {
+            // A CUSTOM licence is the only one whose text `:license` supplies — every other
+            // type overwrites it with the warranty preamble.
+            dialog.setAttribute(
+                'license',
+                'Permission is hereby granted, free of charge, to any person obtaining a copy…',
+            );
+        } else {
+            dialog.removeAttribute('license');
+        }
+        dialog.licenseType = type;
+
+        dialog.authors = [];
+        dialog.documenters = [];
+        dialog.artists = [];
+        dialog.removeAttribute('translator-credits');
+        if (this.args.withCredits as boolean) {
+            dialog.authors = ['Ada Lovelace <ada@example.org>', 'Grace Hopper'];
+            dialog.documenters = ['Barbara Liskov'];
+            dialog.artists = ['Margaret Hamilton'];
+            dialog.translatorCredits = 'Alan Turing\nKatherine Johnson';
+            dialog.addCreditSection('Reviewed by', ['Tony Hoare <tony@example.org>']);
+        }
+        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?.parentNode) this._dialog.parentNode.removeChild(this._dialog);
+        this._dialog = null;
+        this._button = null;
+    }
+}
+
+export const GtkAboutDialogWebStories: WebStoryModule = { stories: [GtkAboutDialogWebStory] };

package/src/browser/feedback/page-setup-unix-dialog.web.ts

@@ -0,0 +1,93 @@
+// Browser port of the Page Setup Dialog story. Shares metadata with
+// page-setup-unix-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { pageSetupUnixDialogMeta } from '../../feedback/page-setup-unix-dialog.meta.js';
+
+/** The plain-data `PageSetup` the element's property takes. */
+interface PageSetupData {
+    paperSize: string;
+    orientation: string;
+    margins: { top: number; bottom: number; left: number; right: number };
+}
+
+/** The imperative half of `<gtk-page-setup-unix-dialog>`. */
+interface PageSetupDialogElement extends HTMLElement {
+    pageSetup: PageSetupData;
+    unit: 'mm' | 'inch';
+    present(): void;
+}
+
+/** The default margins of a paper size, in millimetres — `gtk_paper_size_get_default_*`. */
+const DEFAULT_MARGIN_MM = 0.25 * 25.4;
+const TALL_BOTTOM_MARGIN_MM = 0.56 * 25.4;
+
+function marginsFor(paperSize: string): PageSetupData['margins'] {
+    const tall = paperSize === 'na_letter' || paperSize === 'na_legal' || paperSize === 'iso_a4';
+    return {
+        top: DEFAULT_MARGIN_MM,
+        bottom: tall ? TALL_BOTTOM_MARGIN_MM : DEFAULT_MARGIN_MM,
+        left: DEFAULT_MARGIN_MM,
+        right: DEFAULT_MARGIN_MM,
+    };
+}
+
+export class PageSetupUnixDialogWebStory extends StoryElement {
+    private _dialog: PageSetupDialogElement | null = null;
+
+    constructor() {
+        super(PageSetupUnixDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return pageSetupUnixDialogMeta;
+    }
+
+    initialize(): void {
+        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('button');
+        button.textContent = 'Page Setup…';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._present());
+        center.appendChild(button);
+
+        // Mounted on the body so the scrim covers the whole viewport, like every dialog here.
+        this._dialog = document.createElement('gtk-page-setup-unix-dialog') as PageSetupDialogElement;
+        document.body.appendChild(this._dialog);
+
+        this.addContent(center);
+    }
+
+    private _present(): void {
+        const dialog = this._dialog;
+        if (dialog === null) return;
+        const paperSize = (this.args.paperSize as string) ?? 'iso_a4';
+        // `set_page_setup` selects the matching row and appends the setup when none matches,
+        // which is why the margins are spelled out here rather than left to the drop down.
+        dialog.pageSetup = {
+            paperSize,
+            orientation: (this.args.orientation as string) ?? 'portrait',
+            margins: marginsFor(paperSize),
+        };
+        dialog.present();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+
+    teardown(): void {
+        if (this._dialog?.parentNode) this._dialog.parentNode.removeChild(this._dialog);
+        this._dialog = null;
+    }
+}
+
+export const PageSetupUnixDialogWebStories: WebStoryModule = {
+    stories: [PageSetupUnixDialogWebStory],
+};

package/src/browser/feedback/print-unix-dialog.web.ts

@@ -0,0 +1,111 @@
+// Browser port of the Print Dialog story. Shares metadata with print-unix-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { printUnixDialogMeta } from '../../feedback/print-unix-dialog.meta.js';
+
+/** The plain-data `PageSetup` the element's property takes. */
+interface PageSetupData {
+    paperSize: string;
+    orientation: string;
+    margins: { top: number; bottom: number; left: number; right: number };
+}
+
+/** The imperative half of `<gtk-print-unix-dialog>`. */
+interface PrintDialogElement extends HTMLElement {
+    currentPage: number;
+    /** Not a property of `Gtk.PrintUnixDialog`: which range button the dialog shows. */
+    range: 'all' | 'current' | 'selection' | 'pages';
+    supportSelection: boolean;
+    hasSelection: boolean;
+    manualCapabilities: string[];
+    embedPageSetup: boolean;
+    pageSetup: PageSetupData;
+    printSettings: Record<string, string>;
+    printers: Array<{ name: string; location?: string; acceptsJobs?: boolean; capabilities?: string[] }>;
+    present(): void;
+}
+
+/** The two printers the story offers — GTK's list comes from a print backend. */
+const PRINTERS = [
+    { name: 'Office Laser', location: 'Building A, floor 2', acceptsJobs: true },
+    { name: 'Lobby Printer', location: 'Building A, ground floor', acceptsJobs: false },
+];
+
+const MARGINS = { top: 6.35, bottom: 14.224, left: 6.35, right: 6.35 };
+
+export class PrintUnixDialogWebStory extends StoryElement {
+    private _dialog: PrintDialogElement | null = null;
+
+    constructor() {
+        super(PrintUnixDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return printUnixDialogMeta;
+    }
+
+    initialize(): void {
+        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('button');
+        button.textContent = 'Print…';
+        button.setAttribute('pill', '');
+        button.setAttribute('suggested', '');
+        button.addEventListener('click', () => this._present());
+        center.appendChild(button);
+
+        this._dialog = document.createElement('gtk-print-unix-dialog') as PrintDialogElement;
+        document.body.appendChild(this._dialog);
+
+        this.addContent(center);
+    }
+
+    private _present(): void {
+        const dialog = this._dialog;
+        if (dialog === null) return;
+        // The application half of the capability mask, spelled the way the GIR's nick set
+        // is: `|`-separated nicks.
+        dialog.manualCapabilities = String(this.args.capabilities ?? '')
+            .split('|')
+            .map((nick) => nick.trim())
+            .filter((nick) => nick.length > 0);
+        dialog.currentPage = 2;
+        // Which of the four range buttons is active. The element keeps it as a property
+        // because a radio group's value is not an attribute in the C either — the C's is
+        // whatever `dialog_get_page_range` reads off the four check buttons.
+        dialog.range = (this.args.range as 'all' | 'current' | 'selection' | 'pages') ?? 'all';
+        dialog.supportSelection = true;
+        dialog.hasSelection = true;
+        // The paper size and orientation drop downs are insensitive until the page setup is
+        // embedded (gtk_print_unix_dialog_set_embed_page_setup), and the story embeds it so
+        // the Page Setup page has something to show.
+        dialog.embedPageSetup = true;
+        dialog.pageSetup = {
+            paperSize: 'iso_a4',
+            orientation: 'portrait',
+            margins: MARGINS,
+        };
+        dialog.printSettings = {
+            copies: String(this.args.copies ?? 1),
+            collate: '0',
+            reverse: '0',
+        };
+        dialog.printers = PRINTERS;
+        dialog.present();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+
+    teardown(): void {
+        if (this._dialog?.parentNode) this._dialog.parentNode.removeChild(this._dialog);
+        this._dialog = null;
+    }
+}
+
+export const PrintUnixDialogWebStories: WebStoryModule = { stories: [PrintUnixDialogWebStory] };

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

@@ -0,0 +1,90 @@
+// Browser port of the Shortcuts Dialog story. Shares metadata with shortcuts-dialog.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { shortcutsDialogMeta } from '../../feedback/shortcuts-dialog.meta.js';
+
+/** Build one `<adw-shortcuts-item>`, the markup form of `new Adw.ShortcutsItem(…)`. */
+function item(title: string, attrs: Record<string, string> = {}): HTMLElement {
+    const el = document.createElement('adw-shortcuts-item');
+    el.setAttribute('title', title);
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    return el;
+}
+
+/** Build one `<adw-shortcuts-section>`; omit the title for a continuation group. */
+function section(title: string | null, items: HTMLElement[]): HTMLElement {
+    const el = document.createElement('adw-shortcuts-section');
+    if (title !== null) el.setAttribute('title', title);
+    el.append(...items);
+    return el;
+}
+
+/**
+ * Story: adw-shortcuts-dialog presented from a button, with two sections of
+ * shortcuts — a 1:1 port of the GTK ShortcutsDialogStory.
+ */
+export class ShortcutsDialogWebStory extends StoryElement {
+    constructor() {
+        super(ShortcutsDialogWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return shortcutsDialogMeta;
+    }
+
+    initialize(): void {
+        const button = document.createElement('gtk-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-shortcuts-dialog');
+        dialog.setAttribute('title', this.args.title as string);
+
+        // SECTIONS ARE CHILDREN here: `Adw.ShortcutsDialog`'s only method is `add()`, and
+        // the class documents "add it as a child when using UI files" as the other route.
+        dialog.append(
+            section('General', [
+                item('Open Menu', { accelerator: 'F10' }),
+                // An accelerator for an action comes from a GtkApplication, which a
+                // document has no way to ask — so the row stands for the action alone.
+                item('Preferences', { 'action-name': 'app.preferences' }),
+                item('Quit', { accelerator: '<Control>q' }),
+            ]),
+            // No title: the section below is a continuation of the one above, which is
+            // what the class documents an untitled section for.
+            section(null, [
+                item('Move Tab Left', { accelerator: '<Shift><Control>Page_Up', direction: 'ltr' }),
+                item('Move Tab Left', { accelerator: '<Shift><Control>Page_Up', direction: 'rtl' }),
+            ]),
+        );
+
+        // A DISCONNECTED element is attached to `document.body` on present, the
+        // `Adw.Dialog.present(parent)` idiom; one already in the DOM is revealed in
+        // place and stays reusable.
+        (dialog as HTMLElement & { present(): void }).present();
+
+        dialog.addEventListener('closed', () => dialog.remove(), { once: true });
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        // The dialog reads the latest args each time it is presented; nothing to mutate live.
+    }
+}
+
+export const ShortcutsDialogWebStories: WebStoryModule = { stories: [ShortcutsDialogWebStory] };

package/src/browser/layout/application-window.web.ts

@@ -0,0 +1,94 @@
+// Browser port of the Application Window story. Shares metadata with
+// application-window.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { applicationWindowMeta } from '../../layout/application-window.meta.js';
+
+/** The same menu both stories build, in the portable form (ADR 0042). */
+const MENU_MODEL = [
+    {
+        label: 'File',
+        submenu: [
+            { label: 'New Window', action: 'app.new-window' },
+            { label: 'Quit', action: 'app.quit' },
+        ],
+    },
+    {
+        label: 'Help',
+        submenu: [
+            { label: 'Keyboard Shortcuts', action: 'app.shortcuts' },
+            { label: 'About', action: 'app.about' },
+        ],
+    },
+];
+
+/**
+ * Story: adw-application-window with its menubar, a header bar and a status page —
+ * a 1:1 port of the GTK ApplicationWindowStory.
+ */
+export class ApplicationWindowWebStory extends StoryElement {
+    private _window: HTMLElement | null = null;
+    private _title: HTMLElement | null = null;
+
+    constructor() {
+        super(ApplicationWindowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return applicationWindowMeta;
+    }
+
+    initialize(): void {
+        this._title = document.createElement('adw-window-title');
+        this._title.setAttribute('slot', 'title');
+
+        const backButton = document.createElement('gtk-button');
+        backButton.setAttribute('slot', 'start');
+        backButton.setAttribute('icon', 'go-previous');
+        backButton.setAttribute('flat', '');
+
+        const headerBar = document.createElement('adw-header-bar');
+        headerBar.style.width = '460px';
+        headerBar.append(backButton, this._title);
+
+        const toolbarView = document.createElement('adw-toolbar-view');
+        toolbarView.append(headerBar);
+
+        const statusPage = document.createElement('adw-status-page');
+        statusPage.setAttribute('title', 'Your Library');
+        statusPage.setAttribute('description', 'Content sits between the toolbars and scrolls independently of them.');
+        toolbarView.append(statusPage);
+
+        const window = document.createElement('adw-application-window');
+        window.setAttribute('width', '460');
+        window.setAttribute('height', '260');
+        // The model an application would OWN on GTK. `show-menubar` decides whether the
+        // window draws it, exactly as `Gtk.ApplicationWindow:show-menubar` does.
+        window.setAttribute('menu-model', JSON.stringify(MENU_MODEL));
+        this.applyMenubar(window, this.args.showMenubar as boolean);
+        window.append(toolbarView);
+
+        this._window = window;
+        this._sync();
+        this.addContent(window);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (this._window) this.applyMenubar(this._window, this.args.showMenubar as boolean);
+        this._sync();
+    }
+
+    /** The flag and the bar are ONE decision, the way the application window treats them. */
+    private applyMenubar(window: HTMLElement, showing: boolean): void {
+        if (showing) window.setAttribute('show-menubar', '');
+        else window.removeAttribute('show-menubar');
+    }
+
+    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);
+    }
+}
+
+export const ApplicationWindowWebStories: WebStoryModule = { stories: [ApplicationWindowWebStory] };

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

@@ -0,0 +1,49 @@
+// Browser port of the Aspect Frame story. Shares metadata with aspect-frame.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { aspectFrameMeta } from '../../layout/aspect-frame.meta.js';
+
+export class AspectFrameWebStory extends StoryElement {
+    private _frame: HTMLElement | null = null;
+
+    constructor() {
+        super(AspectFrameWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return aspectFrameMeta;
+    }
+
+    initialize(): void {
+        this._frame = document.createElement('gtk-aspect-frame');
+        // The GTK story asks for 320x180, which is what makes the ratio visible in both.
+        this._frame.style.width = '320px';
+        this._frame.style.height = '180px';
+        const body = document.createElement('gtk-label');
+        body.setAttribute(
+            'label',
+            'The frame gives this child the ratio above, and puts it where xalign and yalign say.',
+        );
+        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;
+        this._frame.setAttribute('ratio', String(this.args.ratio as number));
+        // Read, and it may well move nothing: the child fills the frame's width here, so
+        // there is no horizontal slack left for `xalign` to place it in — the divergence
+        // `gtk-aspect-frame.ts`'s header states. `yalign` below is the axis that moves.
+        this._frame.setAttribute('xalign', String(this.args.xalign as number));
+        this._frame.setAttribute('yalign', String(this.args.yalign as number));
+        this._frame.setAttribute('obey-child', String(this.args.obeyChild as boolean));
+    }
+}
+
+export const AspectFrameWebStories: WebStoryModule = { stories: [AspectFrameWebStory] };

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

@@ -0,0 +1,41 @@
+// Browser port of the Bin story. Shares metadata with bin.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import type { Adw } from '@gjsify/adwaita-web';
+import { binMeta } from '../../layout/bin.meta.js';
+
+export class BinWebStory extends StoryElement {
+    private _bin: Adw.Bin | null = null;
+
+    constructor() {
+        super(BinWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return binMeta;
+    }
+
+    initialize(): void {
+        this._bin = document.createElement('adw-bin') as Adw.Bin;
+        this._bin.style.width = '320px';
+        this._apply();
+        this.addContent(this._bin);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bin) return;
+        const swap = this.args.swap as boolean;
+        const card = document.createElement('adw-card');
+        card.style.padding = '18px';
+        card.style.boxSizing = 'border-box';
+        card.textContent = swap ? 'The first child was replaced, not stacked.' : (this.args.label as string);
+        // `child` is `adw_bin_set_child`: the old child leaves.
+        this._bin.child = card;
+    }
+}
+
+export const BinWebStories: WebStoryModule = { stories: [BinWebStory] };

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

@@ -0,0 +1,61 @@
+// Browser port of the Breakpoint Bin story. Shares metadata with breakpoint-bin.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { breakpointBinMeta } from '../../layout/breakpoint-bin.meta.js';
+
+export class BreakpointBinWebStory extends StoryElement {
+    private _bin: HTMLElement | null = null;
+    private _label: HTMLElement | null = null;
+
+    constructor() {
+        super(BreakpointBinWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return breakpointBinMeta;
+    }
+
+    initialize(): void {
+        this._bin = document.createElement('adw-breakpoint-bin');
+        // The C's own advice: a bin carrying breakpoints has no minimum size, so the stage
+        // is what decides how much room there is (adw-breakpoint-bin.c:57-61).
+        this._bin.style.minWidth = '150px';
+        this._bin.style.height = '60px';
+        this._label = document.createElement('gtk-label');
+        // The selector a `breakpoints` setter addresses its target by, so the id is the
+        // contract between the attribute and this element.
+        this._label.id = 'narrow';
+        this._label.classList.add('title-1');
+        this._bin.appendChild(this._label);
+
+        this._apply();
+        this.addContent(this._bin);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    /**
+     * The `breakpoints` attribute, then the wide label.
+     *
+     * The attribute is written BEFORE the label's wide value so the setter registers
+     * against the wide value as its original — the order the C gets for free, because
+     * `add_setters` is called after the label was built.
+     */
+    private _apply(): void {
+        if (!this._bin || !this._label) return;
+        this._label.setAttribute('label', this.args.wideLabel as string);
+        this._bin.setAttribute(
+            'breakpoints',
+            JSON.stringify([
+                {
+                    condition: this.args.condition as string,
+                    setters: [{ target: '#narrow', property: 'label', value: this.args.narrowLabel as string }],
+                },
+            ]),
+        );
+    }
+}
+
+export const BreakpointBinWebStories: WebStoryModule = { stories: [BreakpointBinWebStory] };