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

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

@@ -0,0 +1,61 @@
+// Browser port of the Popover story. Shares metadata with popover.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { popoverMeta } from '../../layout/popover.meta.js';
+
+/** The two members the story drives that are properties rather than attributes. */
+interface PopoverSurface extends HTMLElement {
+    open: boolean;
+}
+
+export class PopoverWebStory extends StoryElement {
+    private _anchor!: HTMLButtonElement;
+    private _popover!: PopoverSurface;
+
+    constructor() {
+        super(PopoverWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return popoverMeta;
+    }
+
+    initialize(): void {
+        this._anchor = document.createElement('button');
+        this._anchor.textContent = 'Show popover';
+
+        this._popover = document.createElement('gtk-popover') as unknown as PopoverSurface;
+        // A plain content popover, NOT the `.menu` variant: `popover > contents` pads 8px,
+        // where a menu popover re-declares 0 and moves the inset to the item box
+        // (`popover.menu > contents`, _menus.scss:58-66).
+        const box = document.createElement('div');
+        box.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
+        for (const label of ['Anything you like', 'in here']) {
+            const line = document.createElement('span');
+            line.textContent = label;
+            box.appendChild(line);
+        }
+        this._popover.appendChild(box);
+
+        this._anchor.appendChild(this._popover);
+        this._anchor.addEventListener('click', () => {
+            this._popover.open = !this._popover.open;
+        });
+        this._apply();
+        this.addContent(this._anchor);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._popover) return;
+        this._popover.setAttribute('position', this.args.position as string);
+        this._popover.setAttribute('align', this.args.align as string);
+        // Default-TRUE, so the attribute has to be able to say BOTH values here.
+        this._popover.setAttribute('autohide', String(this.args.autohide as boolean));
+    }
+}
+
+export const PopoverWebStories: WebStoryModule = { stories: [PopoverWebStory] };

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

@@ -0,0 +1,53 @@
+// Browser port of the Revealer story. Shares metadata with revealer.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { revealerMeta } from '../../layout/revealer.meta.js';
+
+export class RevealerWebStory extends StoryElement {
+    private _revealer: HTMLElement | null = null;
+
+    constructor() {
+        super(RevealerWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return revealerMeta;
+    }
+
+    initialize(): void {
+        this._revealer = document.createElement('gtk-revealer');
+
+        const content = document.createElement('gtk-box');
+        content.setAttribute('orientation', 'vertical');
+        content.setAttribute('spacing', '6');
+        content.style.padding = '12px';
+
+        const title = document.createElement('gtk-label');
+        title.setAttribute('label', 'The revealed child');
+        content.appendChild(title);
+
+        const hint = document.createElement('gtk-label');
+        hint.setAttribute('label', 'Use the controls to change the transition');
+        hint.classList.add('dimmed');
+        content.appendChild(hint);
+
+        this._revealer.appendChild(content);
+        this._apply();
+        this.addContent(this._revealer);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._revealer) return;
+        // The nicks ARE the attribute values, which is the whole reason the control's options
+        // spell them the way the GIR does.
+        this._revealer.setAttribute('transition-type', String(this.args.transitionType));
+        this._revealer.setAttribute('transition-duration', String(this.args.transitionDuration));
+        this._revealer.toggleAttribute('reveal-child', this.args.revealChild as boolean);
+    }
+}
+
+export const RevealerWebStories: WebStoryModule = { stories: [RevealerWebStory] };

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

@@ -0,0 +1,54 @@
+// Browser port of the Scrollbar story. Shares metadata with scrollbar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { scrollbarMeta } from '../../layout/scrollbar.meta.js';
+
+/** The scrollbar the web element IS: the adjustment plus the orientation. */
+interface WebScrollbar extends HTMLElement {
+    adjustment: Record<string, number>;
+}
+
+export class ScrollbarWebStory extends StoryElement {
+    private _scrollbar: WebScrollbar | null = null;
+
+    constructor() {
+        super(ScrollbarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return scrollbarMeta;
+    }
+
+    initialize(): void {
+        const scrollbar = document.createElement('gtk-scrollbar') as WebScrollbar;
+        // The element is a bar with no thickness of its own in a column, so the allocation is
+        // the one GTK would give it inside a scrolled window.
+        scrollbar.style.height = '240px';
+        scrollbar.style.width = '24px';
+        scrollbar.setAttribute('valign', 'center');
+        this._scrollbar = scrollbar;
+        this._apply();
+        this.addContent(scrollbar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const scrollbar = this._scrollbar;
+        if (!scrollbar) return;
+        scrollbar.setAttribute('orientation', this.args.orientation as string);
+        // One write for the whole adjustment, the way `gtk_adjustment_configure` takes it.
+        scrollbar.adjustment = {
+            value: Number(this.args.value),
+            lower: 0,
+            upper: Number(this.args.upper),
+            stepIncrement: 10,
+            pageIncrement: 80,
+            pageSize: Number(this.args.pageSize),
+        };
+    }
+}
+
+export const ScrollbarWebStories: WebStoryModule = { stories: [ScrollbarWebStory] };

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

@@ -0,0 +1,52 @@
+// Browser port of the Scrolled Window story. Shares metadata with scrolled-window.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { scrolledWindowMeta } from '../../layout/scrolled-window.meta.js';
+
+export class ScrolledWindowWebStory extends StoryElement {
+    private _window: HTMLElement | null = null;
+
+    constructor() {
+        super(ScrolledWindowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return scrolledWindowMeta;
+    }
+
+    initialize(): void {
+        const window = document.createElement('gtk-scrolled-window');
+        // An ALLOCATION, which is what GTK hands this widget and what makes it scroll rather
+        // than grow: an auto-height box grows with its content and has nothing to scroll.
+        window.style.height = '240px';
+        window.style.width = '260px';
+        const box = document.createElement('gtk-box');
+        box.setAttribute('orientation', 'vertical');
+        box.setAttribute('spacing', '8');
+        for (let i = 1; i <= 16; i++) {
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', `Row ${i}`);
+            box.appendChild(label);
+        }
+        window.appendChild(box);
+        this._window = window;
+        this._apply();
+        this.addContent(window);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const window = this._window;
+        if (!window) return;
+        window.setAttribute('hscrollbar-policy', this.args.hPolicy as string);
+        window.setAttribute('vscrollbar-policy', this.args.vPolicy as string);
+        window.setAttribute('window-placement', this.args.placement as string);
+        window.toggleAttribute('has-frame', this.args.frame as boolean);
+        window.toggleAttribute('overlay-scrolling', this.args.overlayScrolling as boolean);
+    }
+}
+
+export const ScrolledWindowWebStories: WebStoryModule = { stories: [ScrolledWindowWebStory] };

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

@@ -0,0 +1,47 @@
+// Browser port of the Separator story. Shares metadata with separator.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { separatorMeta } from '../../layout/separator.meta.js';
+
+export class SeparatorWebStory extends StoryElement {
+    private _box: HTMLElement | null = null;
+    private _separator: HTMLElement | null = null;
+
+    constructor() {
+        super(SeparatorWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return separatorMeta;
+    }
+
+    initialize(): void {
+        this._separator = document.createElement('gtk-separator');
+        this._box = document.createElement('gtk-box');
+        this._box.setAttribute('spacing', '12');
+        for (const label of ['Above', 'Below']) {
+            const text = document.createElement('gtk-label');
+            text.setAttribute('label', label);
+            // The separator sits BETWEEN the two labels.
+            if (label === 'Below') this._box.appendChild(this._separator);
+            this._box.appendChild(text);
+        }
+        this._apply();
+        this.addContent(this._box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._box || !this._separator) return;
+        const vertical = this.args.orientation === 'vertical';
+        this._separator.setAttribute('orientation', vertical ? 'vertical' : 'horizontal');
+        // A rule runs ACROSS its box, so the box runs the other way.
+        this._box.setAttribute('orientation', vertical ? 'horizontal' : 'vertical');
+        this._separator.classList.toggle('spacer', this.args.spacer as boolean);
+    }
+}
+
+export const SeparatorWebStories: WebStoryModule = { stories: [SeparatorWebStory] };

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

@@ -0,0 +1,51 @@
+// Browser port of the Viewport story. Shares metadata with viewport.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { viewportMeta } from '../../layout/viewport.meta.js';
+
+export class ViewportWebStory extends StoryElement {
+    private _viewport: HTMLElement | null = null;
+
+    constructor() {
+        super(ViewportWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return viewportMeta;
+    }
+
+    initialize(): void {
+        const viewport = document.createElement('gtk-viewport');
+        // An allocation, which is what GTK hands a viewport; without one it grows with its
+        // content and has nothing to scroll.
+        viewport.style.height = '240px';
+        viewport.style.width = '260px';
+        const box = document.createElement('gtk-box');
+        box.setAttribute('orientation', 'vertical');
+        box.setAttribute('spacing', '8');
+        for (let i = 1; i <= 16; i++) {
+            const label = document.createElement('gtk-label');
+            label.setAttribute('label', `Row ${i}`);
+            box.appendChild(label);
+        }
+        const button = document.createElement('gtk-button');
+        button.setAttribute('label', 'Focus me');
+        box.appendChild(button);
+        viewport.appendChild(box);
+        this._viewport = viewport;
+        this._apply();
+        this.addContent(viewport);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const viewport = this._viewport;
+        if (!viewport) return;
+        viewport.setAttribute('scroll-to-focus', String(this.args.scrollToFocus as boolean));
+    }
+}
+
+export const ViewportWebStories: WebStoryModule = { stories: [ViewportWebStory] };

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

@@ -0,0 +1,60 @@
+// Browser port of the Window story. Shares metadata with window.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { windowMeta } from '../../layout/window.meta.js';
+
+export class WindowWebStory extends StoryElement {
+    private _title: HTMLElement | null = null;
+
+    constructor() {
+        super(WindowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return windowMeta;
+    }
+
+    initialize(): void {
+        this._title = document.createElement('adw-window-title');
+        this._title.setAttribute('slot', 'center');
+
+        const backButton = document.createElement('gtk-button');
+        backButton.setAttribute('slot', 'start');
+        backButton.setAttribute('icon', 'go-previous');
+        backButton.setAttribute('flat', '');
+
+        const menuButton = document.createElement('gtk-button');
+        menuButton.setAttribute('slot', 'end');
+        menuButton.setAttribute('icon', 'open-menu');
+        menuButton.setAttribute('flat', '');
+
+        const headerBar = document.createElement('adw-header-bar');
+        headerBar.style.width = '460px';
+        headerBar.append(backButton, this._title, menuButton);
+
+        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.');
+
+        const toolbarView = document.createElement('adw-toolbar-view');
+        toolbarView.append(headerBar, statusPage);
+
+        const win = document.createElement('adw-window');
+        win.append(toolbarView);
+
+        this._sync();
+        this.addContent(win);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    private _sync(): void {
+        if (!this._title) return;
+        this._title.setAttribute('title', this.args.title as string);
+        this._title.setAttribute('subtitle', this.args.subtitle as string);
+    }
+}
+
+export const WindowWebStories: WebStoryModule = { stories: [WindowWebStory] };

package/src/browser/media/image.web.ts

@@ -0,0 +1,39 @@
+// Browser port of the Image story. Shares metadata with image.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { imageMeta } from '../../media/image.meta.js';
+
+export class ImageWebStory extends StoryElement {
+    private _image: HTMLElement | null = null;
+
+    constructor() {
+        super(ImageWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return imageMeta;
+    }
+
+    initialize(): void {
+        this._image = document.createElement('gtk-image');
+        this._apply();
+        this.addContent(this._image);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._image) return;
+        // The GTK story casts the pixel count to a `Gtk.IconSize` enum, which does not exist on
+        // this renderer — the web's icon box is sized in PIXELS by the same `size` attribute
+        // `gtk-image.ts` documents, and the two agree at 16/32/48 because those are the enum's
+        // own members in points.
+        this._image.setAttribute('size', String(this.args.size as number));
+        this._image.setAttribute('icon-name', this.args.iconName as string);
+        this._image.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const ImageWebStories: WebStoryModule = { stories: [ImageWebStory] };

package/src/browser/media/inscription.web.ts

@@ -0,0 +1,52 @@
+// Browser port of the Inscription story. Shares metadata with inscription.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { inscriptionMeta } from '../../media/inscription.meta.js';
+
+export class InscriptionWebStory extends StoryElement {
+    private _inscription: HTMLElement | null = null;
+    private _frame: HTMLElement | null = null;
+
+    constructor() {
+        super(InscriptionWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return inscriptionMeta;
+    }
+
+    initialize(): void {
+        // The frame is the fixed box the counts are shown against, as in the GTK story — an
+        // inscription in an unconstrained column shrinks to its minimum and the `nat` counts
+        // visibly do nothing.
+        this._frame = document.createElement('div');
+        this._frame.style.cssText =
+            'width:320px;height:160px;border:1px solid var(--separator-color);display:flex;align-items:stretch;justify-content:stretch;';
+        this._inscription = document.createElement('gtk-inscription');
+        this._frame.appendChild(this._inscription);
+        this._apply();
+        this.addContent(this._frame);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._inscription) return;
+        // The ORDER is the measure, exactly as in the GTK story: the natural is
+        // `MAX (min_chars, nat_chars)` (gtkinscription.c:348), so both counts precede the
+        // text and a later `min` cannot pull the natural below the larger of the two.
+        this._inscription.setAttribute('min-chars', String(this.args.minChars as number));
+        this._inscription.setAttribute('nat-chars', String(this.args.natChars as number));
+        this._inscription.setAttribute('min-lines', String(this.args.minLines as number));
+        this._inscription.setAttribute('nat-lines', String(this.args.natLines as number));
+        this._inscription.setAttribute('text', this.args.text as string);
+        this._inscription.setAttribute('wrap-mode', this.args.wrapMode as string);
+        this._inscription.setAttribute('text-overflow', this.args.textOverflow as string);
+        this._inscription.setAttribute('xalign', String(this.args.xalign as number));
+        this._inscription.setAttribute('yalign', String(this.args.yalign as number));
+    }
+}
+
+export const InscriptionWebStories: WebStoryModule = { stories: [InscriptionWebStory] };

package/src/browser/media/media-controls.web.ts

@@ -0,0 +1,65 @@
+// Browser port of the Media Controls story. Shares metadata with media-controls.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { mediaControlsMeta } from '../../media/media-controls.meta.js';
+
+/**
+ * The element's public surface, as the story needs it. `volume` is a real property HERE and
+ * has no counterpart in GTK: `volume_adjustment` is private to the template
+ * (`ui/gtkmediacontrols.ui`) and `Gtk.MediaControls` exposes no volume setter, which is why
+ * no `volume` CONTROL is declared in the shared meta — one meta drives three panels, so a
+ * control only the browser could honour is refused by `check-storybook-control-parity.mjs`.
+ */
+type MediaControlsElement = HTMLElement & { volume: number };
+
+export class MediaControlsWebStory extends StoryElement {
+    private _video: HTMLElement | null = null;
+    private _controls: MediaControlsElement | null = null;
+    private _media: HTMLVideoElement | null = null;
+
+    constructor() {
+        super(MediaControlsWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return mediaControlsMeta;
+    }
+
+    initialize(): void {
+        // The controls bar lives INSIDE the video, as `ui/gtkvideo.ui`'s controls revealer
+        // does, and it adopts its stream from the nearest ancestor video — that is how the
+        // element finds the `<video>` to drive.
+        this._video = document.createElement('gtk-video');
+        this._controls = document.createElement('gtk-media-controls') as MediaControlsElement;
+        this._media = document.createElement('video');
+        this._media.muted = true;
+        this._video.append(this._media, this._controls);
+        this._apply();
+        this.addContent(this._video);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._video || !this._controls) return;
+        this._video.style.width = '360px';
+        this._video.style.height = '203px';
+        // GTK's bar is the video's own controls revealer child and the video itself is the
+        // anchor, so the bar is given the same width as the surface above it.
+        this._controls.style.display = 'block';
+        // `sensitive` is the control the meta declares, and the element's own spelling is the
+        // template's: the box ships `sensitive` 0 (ui/gtkmediacontrols.ui) and
+        // `gtk_media_controls_set_sensitive` is what re-enables it. Here it is the `insensitive`
+        // CLASS the stylesheet selects on, set from the normalized property — an attribute
+        // presence selector could be left half-applied by a value the element did not take.
+        this._controls.classList.toggle('insensitive', !(this.args.sensitive as boolean));
+        // `volume` is set once and never from a control: the meta declares none, because GTK
+        // cannot honour one. A reader who wants to see the four `audio-volume-*` names move
+        // reaches the element's property directly, which is where the divergence lives.
+        this._controls.volume = 1;
+    }
+}
+
+export const MediaControlsWebStories: WebStoryModule = { stories: [MediaControlsWebStory] };

package/src/browser/media/picture.web.ts

@@ -0,0 +1,56 @@
+// Browser port of the Picture story. Shares metadata with picture.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { pictureMeta } from '../../media/picture.meta.js';
+
+export class PictureWebStory extends StoryElement {
+    private _picture: HTMLElement | null = null;
+
+    constructor() {
+        super(PictureWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return pictureMeta;
+    }
+
+    initialize(): void {
+        this._picture = document.createElement('gtk-picture');
+        // The light DOM carries the content, because `GdkPaintable` is not a thing a document
+        // has and `<gtk-picture>` is defined as the box that FITS one. A 320×180 inline SVG
+        // gives the same non-square intrinsic ratio the GTK story's memory texture does.
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', '0 0 320 180');
+        svg.setAttribute('width', '320');
+        svg.setAttribute('height', '180');
+        svg.innerHTML =
+            '<rect width="320" height="90" fill="rgb(48 64 160)"/><rect y="90" width="320" height="90" fill="rgb(144 192 160)"/>';
+        this._picture.appendChild(svg);
+        this._apply();
+        this.addContent(this._picture);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._picture) return;
+        const width = String(this.args.width as number);
+        // 3:2 round a 16:9 child, matching the GTK story, so `cover` crops and `contain` bars.
+        this._picture.style.width = `${width}px`;
+        this._picture.style.height = `${Math.round((Number(width) * 2) / 3)}px`;
+        // The ORDER is the C's: `keep-aspect-ratio` MAPS onto `content-fit`
+        // (gtkpicture.c:1017-1021), so writing it afterwards would undo the control the reader
+        // just moved. It goes first, and only when it is on.
+        if (this.args.keepAspectRatio as boolean) this._picture.toggleAttribute('keep-aspect-ratio', true);
+        this._picture.setAttribute('content-fit', this.args.contentFit as string);
+        // A TRUE-defaulted boolean needs the STRING, not the presence: `can-shrink="false"` is
+        // the only spelling of FALSE, and `canShrink` reads absent as TRUE (gtkpicture.c:554).
+        this._picture.setAttribute('can-shrink', String(this.args.canShrink as boolean));
+        this._picture.setAttribute('isolate-contents', String(this.args.isolateContents as boolean));
+        this._picture.setAttribute('alternative-text', this.args.alternativeText as string);
+    }
+}
+
+export const PictureWebStories: WebStoryModule = { stories: [PictureWebStory] };

package/src/browser/media/video.web.ts

@@ -0,0 +1,56 @@
+// Browser port of the Video story. Shares metadata with video.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { videoMeta } from '../../media/video.meta.js';
+
+/** The element's public surface, as the story needs it — the attrs are the properties. */
+type VideoElement = HTMLElement & {
+    revealControls(): void;
+};
+
+export class VideoWebStory extends StoryElement {
+    private _video: VideoElement | null = null;
+    private _media: HTMLVideoElement | null = null;
+
+    constructor() {
+        super(VideoWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return videoMeta;
+    }
+
+    initialize(): void {
+        this._video = document.createElement('gtk-video') as VideoElement;
+        // A real `<video>` with NO source, which is the browser's version of the state the GTK
+        // story shows: `gtk_video_update_overlay_icon`'s FIRST arm is "no stream"
+        // (gtkvideo.c:629), and a `<video>` with no `src` has a `networkState` of NETWORK_EMPTY,
+        // so the element cannot tell the two apart and draws the same eject glyph. The story
+        // that could load a real clip would prove nothing extra about the WIDGET.
+        this._media = document.createElement('video');
+        this._media.muted = true;
+        this._video.appendChild(this._media);
+        this._apply();
+        this.addContent(this._video);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._video) return;
+        const width = String(this.args.width as number);
+        this._video.style.width = `${width}px`;
+        this._video.style.height = `${Math.round((Number(width) * 9) / 16)}px`;
+        this._video.toggleAttribute('autoplay', this.args.autoplay as boolean);
+        this._video.toggleAttribute('loop', this.args.loop as boolean);
+        this._video.toggleAttribute('graphics-offload', this.args.graphicsOffload as boolean);
+        // The controls bar reveals on pointer movement in GTK (ui/gtkvideo.ui's
+        // `gtk_video_motion`), and a story the reader cannot see the bar in is a story that
+        // documents nothing — so the first reveal is explicit rather than waited for.
+        this._video.revealControls();
+    }
+}
+
+export const VideoWebStories: WebStoryModule = { stories: [VideoWebStory] };