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

package/src/browser/windows/window-controls.web.ts

@@ -0,0 +1,54 @@
+// Browser port of the Window Controls story. Shares metadata with window-controls.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { windowControlsMeta } from '../../windows/window-controls.meta.js';
+
+export class WindowControlsWebStory extends StoryElement {
+    private _window: HTMLElement | null = null;
+    private _controls: HTMLElement | null = null;
+
+    constructor() {
+        super(WindowControlsWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return windowControlsMeta;
+    }
+
+    initialize(): void {
+        this._window = document.createElement('gtk-window');
+        this._window.setAttribute('title', 'Documents');
+        this._window.setAttribute('default-width', '420');
+        this._window.setAttribute('default-height', '220');
+
+        const note = document.createElement('span');
+        note.textContent = 'A Gtk.WindowControls outside a window draws nothing — that is GTK, not this port.';
+        this._window.appendChild(note);
+
+        // A window with NO titlebar of its own, so these really are the titlebar, which is the
+        // shape `update_window_buttons` reads its four window properties for. The frame draws
+        // its own controls pair around them when there is nothing here — hence the slot.
+        this._controls = document.createElement('gtk-window-controls');
+        this._controls.setAttribute('slot', 'titlebar');
+        this._window.appendChild(this._controls);
+
+        this.addContent(this._window);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._window || !this._controls) return;
+        this._controls.setAttribute('side', (this.args.side as string) === 'end' ? 'end' : 'start');
+        this._controls.setAttribute('decoration-layout', this.args.decorationLayout as string);
+        // `update_window_buttons` (:270-274) reads exactly these four off the frame.
+        this._window.setAttribute('resizable', String(this.args.resizable as boolean));
+        this._window.setAttribute('maximized', String(this.args.maximized as boolean));
+        this._window.setAttribute('modal', String(this.args.modal as boolean));
+    }
+}
+
+export const WindowControlsWebStories: WebStoryModule = { stories: [WindowControlsWebStory] };

package/src/buttons/color-dialog-button.meta.ts

@@ -0,0 +1,16 @@
+// Shared, renderer-agnostic metadata for the Color Dialog Button story. Imported by the
+// GTK renderer (color-dialog-button.story.ts) and the browser renderer
+// (browser/buttons/color-dialog-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const colorDialogButtonMeta: StoryMeta = {
+    title: 'Buttons/Color Dialog Button',
+    description:
+        'Gtk.ColorDialogButton — a button that shows a colour and opens a chooser for it. It is ' +
+        'insensitive until a dialog is set, and the swatch announces the channel percentages.',
+    controls: [
+        { name: 'rgba', label: 'Colour', type: ControlType.TEXT, defaultValue: '#3584e4' },
+        { name: 'title', label: 'Dialog title', type: ControlType.TEXT, defaultValue: 'Choose a colour' },
+    ],
+};

package/src/buttons/color-dialog-button.story.ts

@@ -0,0 +1,49 @@
+// Gtk.ColorDialogButton — a button that shows a colour and opens a chooser for it.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import Gdk from 'gi://Gdk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { colorDialogButtonMeta } from './color-dialog-button.meta.js';
+
+/** Story: a Gtk.ColorDialogButton with a dialog, its colour and the dialog's title bound. */
+export class ColorDialogButtonStory extends StoryWidget {
+    private _button: Gtk.ColorDialogButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookColorDialogButton' }, ColorDialogButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ColorDialogButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...colorDialogButtonMeta, component: Gtk.ColorDialogButton.$gtype };
+    }
+
+    initialize(): void {
+        // The dialog is what makes the button sensitive at all, so it is set BEFORE the
+        // colour: `update_button_sensitivity` is `dialog != NULL && cancellable == NULL`.
+        this._button = new Gtk.ColorDialogButton({ halign: Gtk.Align.CENTER });
+        this._button.dialog = new Gtk.ColorDialog();
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        const rgba = new Gdk.RGBA();
+        if (rgba.parse(this.args.rgba as string)) this._button.rgba = rgba;
+        this._button.dialog!.title = (this.args.title as string) || '';
+    }
+}
+
+GObject.type_ensure(ColorDialogButtonStory.$gtype);
+
+export const ColorDialogButtonStories: StoryModule = { stories: [ColorDialogButtonStory] };

package/src/buttons/font-dialog-button.meta.ts

@@ -0,0 +1,29 @@
+// Shared, renderer-agnostic metadata for the Font Dialog Button story. Imported by the GTK
+// renderer (font-dialog-button.story.ts) and the browser renderer
+// (browser/buttons/font-dialog-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const fontDialogButtonMeta: StoryMeta = {
+    title: 'Buttons/Font Dialog Button',
+    description:
+        'Gtk.FontDialogButton — a button that shows a font and opens a chooser for it. At level family ' +
+        'the label is the family alone; from font up it is family plus size, and the size box appears.',
+    controls: [
+        { name: 'fontDesc', label: 'Font', type: ControlType.TEXT, defaultValue: 'Sans Bold 12' },
+        {
+            name: 'level',
+            label: 'Level',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Family', value: 'family' },
+                { label: 'Face', value: 'face' },
+                { label: 'Font', value: 'font' },
+                { label: 'Features', value: 'features' },
+            ],
+            defaultValue: 'font',
+        },
+        { name: 'useFont', label: 'Draw in the font', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'useSize', label: 'Draw in the size', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};

package/src/buttons/font-dialog-button.story.ts

@@ -0,0 +1,52 @@
+// Gtk.FontDialogButton — a button that shows a font and opens a chooser for it.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import Pango from 'gi://Pango?version=1.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { fontDialogButtonMeta } from './font-dialog-button.meta.js';
+
+/** Story: a Gtk.FontDialogButton with the level, the description and the two draw flags bound. */
+export class FontDialogButtonStory extends StoryWidget {
+    private _button: Gtk.FontDialogButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookFontDialogButton' }, FontDialogButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(FontDialogButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...fontDialogButtonMeta, component: Gtk.FontDialogButton.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.FontDialogButton({ halign: Gtk.Align.CENTER });
+        this._button.dialog = new Gtk.FontDialog();
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        // `level` first: it decides whether the size box is visible at all, so writing the
+        // description afterwards paints the label the new level asks for.
+        this._button.level = this.args.level as unknown as Gtk.FontLevel;
+        const desc = Pango.FontDescription.from_string(this.args.fontDesc as string);
+        if (desc !== null) this._button.fontDesc = desc;
+        // `use_size` is only consulted when `use_font` is set, so it goes second.
+        this._button.useFont = this.args.useFont as boolean;
+        this._button.useSize = this.args.useSize as boolean;
+    }
+}
+
+GObject.type_ensure(FontDialogButtonStory.$gtype);
+
+export const FontDialogButtonStories: StoryModule = { stories: [FontDialogButtonStory] };

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

@@ -0,0 +1,18 @@
+// Shared, renderer-agnostic metadata for the Link Button story. Imported by the GTK
+// renderer (link-button.story.ts) and the browser renderer
+// (browser/buttons/link-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const linkButtonMeta: StoryMeta = {
+    title: 'Buttons/Link Button',
+    description:
+        'Gtk.LinkButton — a button that follows a URI. It is a Gtk.Button with a uri and a visited ' +
+        'state: clicking launches the URI and marks the link visited, and pointing it somewhere new ' +
+        'un-visits it.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'GNOME' },
+        { name: 'uri', label: 'URI', type: ControlType.TEXT, defaultValue: 'https://gnome.org' },
+        { name: 'visited', label: 'Visited', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

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

@@ -0,0 +1,48 @@
+// Gtk.LinkButton — a button that follows a URI.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { linkButtonMeta } from './link-button.meta.js';
+
+/** Story: a Gtk.LinkButton with its label, URI and visited state bound to args. */
+export class LinkButtonStory extends StoryWidget {
+    private _button: Gtk.LinkButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookLinkButton' }, LinkButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(LinkButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...linkButtonMeta, component: Gtk.LinkButton.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.LinkButton({ halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        const label = this.args.label as string;
+        this._button.label = label;
+        // `uri` last, because `gtk_link_button_set_uri()` unsets `visited` as a side effect
+        // — writing the two the other way round would never show a visited link.
+        this._button.uri = this.args.uri as string;
+        this._button.visited = this.args.visited as boolean;
+    }
+}
+
+GObject.type_ensure(LinkButtonStory.$gtype);
+
+export const LinkButtonStories: StoryModule = { stories: [LinkButtonStory] };

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

@@ -0,0 +1,34 @@
+// Shared, renderer-agnostic metadata for the Scale Button story. Imported by the GTK
+// renderer (scale-button.story.ts) and the browser renderer
+// (browser/buttons/scale-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The icon list every renderer binds: three names, so the value picks between them. */
+export const SCALE_BUTTON_ICONS = [
+    'audio-volume-muted-symbolic',
+    'audio-volume-low-symbolic',
+    'audio-volume-high-symbolic',
+];
+
+export const scaleButtonMeta: StoryMeta = {
+    title: 'Buttons/Scale Button',
+    description:
+        'Gtk.ScaleButton — a button whose press opens a scale. The icon follows the value: no list ' +
+        'draws image-missing, one name is used throughout, two split the range, three put the first at ' +
+        'the bottom and the second at the top and share the interior, five spread it.',
+    controls: [
+        { name: 'value', label: 'Value', type: ControlType.NUMBER, defaultValue: 70 },
+        {
+            name: 'orientation',
+            label: 'Orientation',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Vertical', value: 'vertical' },
+                { label: 'Horizontal', value: 'horizontal' },
+            ],
+            defaultValue: 'vertical',
+        },
+        { name: 'hasFrame', label: 'Has frame', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

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

@@ -0,0 +1,50 @@
+// Gtk.ScaleButton — a button whose press opens a scale.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { scaleButtonMeta } from './scale-button.meta.js';
+import { SCALE_BUTTON_ICONS } from './scale-button.meta.js';
+
+/** Story: a Gtk.ScaleButton whose icon follows its value, with the axis and the frame bound. */
+export class ScaleButtonStory extends StoryWidget {
+    private _button: Gtk.ScaleButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookScaleButton' }, ScaleButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ScaleButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...scaleButtonMeta, component: Gtk.ScaleButton.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.ScaleButton({ halign: Gtk.Align.CENTER });
+        this._button.icons = SCALE_BUTTON_ICONS;
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        // Orientation before the value: moving the axis does not move the value, and
+        // `gtk_scale_button_set_value()` clamps into the adjustment either way.
+        this._button.orientation =
+            (this.args.orientation as string) === 'horizontal' ? Gtk.Orientation.HORIZONTAL : Gtk.Orientation.VERTICAL;
+        this._button.hasFrame = this.args.hasFrame as boolean;
+        this._button.value = this.args.value as number;
+    }
+}
+
+GObject.type_ensure(ScaleButtonStory.$gtype);
+
+export const ScaleButtonStories: StoryModule = { stories: [ScaleButtonStory] };

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

@@ -0,0 +1,17 @@
+// Shared, renderer-agnostic metadata for the Toggle Button story. Imported by the GTK
+// renderer (toggle-button.story.ts) and the browser renderer
+// (browser/buttons/toggle-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const toggleButtonMeta: StoryMeta = {
+    title: 'Buttons/Toggle Button',
+    description:
+        'Gtk.ToggleButton — a button that stays pressed. It is a Gtk.Button with one more property, active, ' +
+        'so every button style class applies; Adw.ToggleGroup is the linked, single-choice form of it.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'Mute' },
+        { name: 'active', label: 'Active', type: ControlType.BOOLEAN, defaultValue: false },
+        { name: 'flat', label: 'Flat', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

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

@@ -0,0 +1,46 @@
+// Gtk.ToggleButton — a button that stays pressed.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { toggleButtonMeta } from './toggle-button.meta.js';
+
+/** Story: a Gtk.ToggleButton with its label, state and the flat style class bound to args. */
+export class ToggleButtonStory extends StoryWidget {
+    private _button: Gtk.ToggleButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookToggleButton' }, ToggleButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ToggleButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...toggleButtonMeta, component: Gtk.ToggleButton.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.ToggleButton({ halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.label = this.args.label as string;
+        this._button.active = this.args.active as boolean;
+        if (this.args.flat as boolean) this._button.add_css_class('flat');
+        else this._button.remove_css_class('flat');
+    }
+}
+
+GObject.type_ensure(ToggleButtonStory.$gtype);
+
+export const ToggleButtonStories: StoryModule = { stories: [ToggleButtonStory] };

package/src/controls/check-button.meta.ts

@@ -0,0 +1,19 @@
+// Shared, renderer-agnostic metadata for the Check Button story. Imported by the GTK
+// renderer (check-button.story.ts) and the browser renderer
+// (browser/controls/check-button.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const checkButtonMeta: StoryMeta = {
+    title: 'Controls/Check Button',
+    description:
+        'Gtk.CheckButton — a label beside an indicator, with a third "in between" state for a selection ' +
+        'that is only partly made. The browser element spells the two states checked and indeterminate, ' +
+        'the words the Adwaita stylesheet selects on; the grouped, single-choice form is Adw.Radio.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'Enable networking' },
+        { name: 'checked', label: 'Checked', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'indeterminate', label: 'Indeterminate', type: ControlType.BOOLEAN, defaultValue: false },
+        { name: 'disabled', label: 'Disabled', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/controls/check-button.story.ts

@@ -0,0 +1,56 @@
+// Gtk.CheckButton — a label beside an indicator, and the third "in between" state.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { checkButtonMeta } from './check-button.meta.js';
+
+/** Story: a Gtk.CheckButton with its label, both booleans and `sensitive` bound to args. */
+export class CheckButtonStory extends StoryWidget {
+    private _box: Gtk.Box | null = null;
+    private _button: Gtk.CheckButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookCheckButton' }, CheckButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(CheckButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...checkButtonMeta, component: Gtk.CheckButton.$gtype };
+    }
+
+    initialize(): void {
+        this._button = new Gtk.CheckButton();
+        this._box = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 12,
+            halign: Gtk.Align.CENTER,
+        });
+        this._box.append(this._button);
+        this._apply();
+        this.addContent(this._box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.label = this.args.label as string;
+        this._button.active = this.args.checked as boolean;
+        // GTK does NOT clear the inconsistent state when the user checks the button; the
+        // property's own documentation says turning it off again is the application's job
+        // (gtkcheckbutton.c:855-856). The browser element diverges here, and says so.
+        this._button.inconsistent = this.args.indeterminate as boolean;
+        this._button.sensitive = !(this.args.disabled as boolean);
+    }
+}
+
+GObject.type_ensure(CheckButtonStory.$gtype);
+
+export const CheckButtonStories: StoryModule = { stories: [CheckButtonStory] };

package/src/controls/gtk-spinner.meta.ts

@@ -0,0 +1,24 @@
+// Shared, renderer-agnostic metadata for the GTK Spinner story. Imported by the GTK
+// renderer (gtk-spinner.story.ts) and the browser renderer
+// (browser/controls/gtk-spinner.web.ts), so both expose identical controls.
+//
+// The NAME is `gtk-spinner` and not `spinner` because `Presentation/Spinner` already
+// holds that bare name for `Adw.Spinner`, and the storybook keys every meta on its file
+// name: a second `spinner.meta.ts` would silently displace one of the two. The block in
+// /gjsify/gtk/indicators/ is titled `Gtk.Spinner`, which `TITLED_AFTER` in
+// `scripts/check-website-adwaita-gallery.mjs` maps onto this meta.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const gtkSpinnerMeta: StoryMeta = {
+    title: 'Controls/Spinner (GTK)',
+    description:
+        "Gtk.Spinner — GTK's own busy indicator: a faint ring with a quarter arc turning around it, " +
+        'sized by its allocation. Adw.Spinner is the libadwaita replacement and looks different; under ' +
+        'reduced motion GTK swaps this one for a static hourglass, which Adw.Spinner deliberately does not do.',
+    controls: [
+        { name: 'size', label: 'Size (px)', type: ControlType.RANGE, min: 16, max: 64, step: 4, defaultValue: 32 },
+        { name: 'spinning', label: 'Spinning', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'disabled', label: 'Disabled', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/controls/gtk-spinner.story.ts

@@ -0,0 +1,53 @@
+// Gtk.Spinner — the GTK busy indicator, sized by its allocation.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { gtkSpinnerMeta } from './gtk-spinner.meta.js';
+
+/** Story: a Gtk.Spinner at a chosen size, spinning or stopped. */
+export class GtkSpinnerStory extends StoryWidget {
+    private _spinner: Gtk.Spinner | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookGtkSpinner' }, GtkSpinnerStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(GtkSpinnerStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...gtkSpinnerMeta, component: Gtk.Spinner.$gtype };
+    }
+
+    initialize(): void {
+        this._spinner = new Gtk.Spinner({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._spinner);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._spinner) return;
+        // `GtkSpinner` has ONE property and no size property of its own: the icon is
+        // measured from the `icon-size` CSS property and the widget from its allocation
+        // (gtkspinner.c:110-123), so a request is how a story sizes it.
+        const size = this.args.size as number;
+        this._spinner.widthRequest = size;
+        this._spinner.heightRequest = size;
+        // `start()` / `stop()`, not the property: both also raise and clear
+        // GTK_ACCESSIBLE_STATE_BUSY (gtkspinner.c:373-400).
+        if (this.args.spinning as boolean) this._spinner.start();
+        else this._spinner.stop();
+        this._spinner.sensitive = !(this.args.disabled as boolean);
+    }
+}
+
+GObject.type_ensure(GtkSpinnerStory.$gtype);
+
+export const GtkSpinnerStories: StoryModule = { stories: [GtkSpinnerStory] };

package/src/controls/level-bar.meta.ts

@@ -0,0 +1,39 @@
+// Shared, renderer-agnostic metadata for the Level Bar story. Imported by the GTK
+// renderer (level-bar.story.ts) and the browser renderer
+// (browser/controls/level-bar.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const levelBarMeta: StoryMeta = {
+    title: 'Controls/Level Bar',
+    description:
+        'Gtk.LevelBar — how full something is, over an interval that need not be 0…1: a password ' +
+        'strength meter, a battery. `mode` decides one filled level or one block per unit, and the ' +
+        'block takes a class from the nearest OFFSET (low, high, full by default), which is how libadwaita ' +
+        'colours it and how an application adds a colour of its own.',
+    controls: [
+        { name: 'value', label: 'Value', type: ControlType.RANGE, min: 0, max: 1, step: 0.05, defaultValue: 0.8 },
+        { name: 'maxValue', label: 'Max value', type: ControlType.RANGE, min: 1, max: 5, step: 1, defaultValue: 5 },
+        {
+            name: 'mode',
+            label: 'Mode',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Continuous', value: 'continuous' },
+                { label: 'Discrete', value: 'discrete' },
+            ],
+            defaultValue: 'continuous',
+        },
+        {
+            name: 'orientation',
+            label: 'Orientation',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Horizontal', value: 'horizontal' },
+                { label: 'Vertical', value: 'vertical' },
+            ],
+            defaultValue: 'horizontal',
+        },
+        { name: 'inverted', label: 'Inverted', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};