@gjsify/example-gtk-adwaita-storybook 0.37.0 → 0.38.1

package/src/browser/overview/widgets.web.ts

@@ -0,0 +1,118 @@
+// Browser port of the Overview story — the widget gallery. Shares metadata with
+// widgets.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import {
+    OVERVIEW_ACCENT_OPTIONS,
+    OVERVIEW_ADVANCED_ROWS,
+    OVERVIEW_SHORTCUTS,
+    overviewWidgetsMeta,
+} from '../../overview/widgets.meta.js';
+
+/** A custom element with attributes set, since every row here is one. */
+function el(tag: string, attributes: Record<string, string> = {}): HTMLElement {
+    const node = document.createElement(tag);
+    for (const [name, value] of Object.entries(attributes)) node.setAttribute(name, value);
+    return node;
+}
+
+export class OverviewWidgetsWebStory extends StoryElement {
+    private _banner: HTMLElement | null = null;
+
+    constructor() {
+        super(OverviewWidgetsWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return overviewWidgetsMeta;
+    }
+
+    initialize(): void {
+        const host = document.createElement('div');
+        host.style.display = 'flex';
+        host.style.flexDirection = 'column';
+        host.style.width = '100%';
+
+        this._banner = el('adw-banner', { title: 'You have unsaved changes', 'button-label': 'Save' });
+        this._syncBanner();
+        host.append(this._banner);
+
+        const page = el('adw-preferences-page');
+
+        // --- Appearance: a widget demo only. The storybook's OWN appearance is in
+        // the chrome, and wiring these to it would give one setting two controls
+        // that disagree.
+        const appearance = el('adw-preferences-group', { title: 'Appearance' });
+        appearance.append(
+            el('adw-switch-row', { title: 'Dark mode', subtitle: 'Use the dark Adwaita palette' }),
+            el('adw-switch-row', { title: 'Notifications', subtitle: 'Show toasts for events', active: '' }),
+            el('adw-combo-row', {
+                title: 'Accent color',
+                // `items` is JSON, not a comma list — the element parses it.
+                items: JSON.stringify([...OVERVIEW_ACCENT_OPTIONS]),
+                selected: '0',
+            }),
+        );
+        page.append(appearance);
+
+        // --- Account ---
+        const account = el('adw-preferences-group', { title: 'Account' });
+        account.append(
+            el('adw-entry-row', { title: 'Name', text: 'Ada Lovelace' }),
+            el('adw-entry-row', { title: 'Email', text: 'ada@example.com' }),
+            el('adw-spin-row', { title: 'Devices', min: '1', max: '10', step: '1', value: '3' }),
+        );
+
+        const advanced = el('adw-expander-row', { title: 'Advanced', subtitle: 'More options' });
+        advanced.toggleAttribute('expanded', true);
+        for (const row of OVERVIEW_ADVANCED_ROWS) {
+            advanced.append(
+                row.kind === 'switch'
+                    ? el('adw-switch-row', row.active ? { title: row.title, active: '' } : { title: row.title })
+                    : el('adw-action-row', { title: row.title }),
+            );
+        }
+        account.append(advanced);
+        page.append(account);
+
+        // --- Shortcuts: the newest widget, in context ---
+        const shortcuts = el('adw-preferences-group', { title: 'Shortcuts' });
+        for (const shortcut of OVERVIEW_SHORTCUTS) {
+            const row = el('adw-action-row', { title: shortcut.title });
+            const label = el('adw-shortcut-label', { accelerator: shortcut.accelerator, slot: 'suffix' });
+            row.append(label);
+            shortcuts.append(row);
+        }
+        page.append(shortcuts);
+
+        // --- Actions ---
+        const actions = el('adw-preferences-group', { title: 'Actions' });
+        const buttons = document.createElement('div');
+        buttons.style.display = 'flex';
+        buttons.style.gap = '12px';
+        buttons.style.margin = '6px 0';
+
+        const save = document.createElement('button');
+        save.className = 'adw-button suggested-action';
+        save.textContent = 'Save changes';
+        const remove = document.createElement('button');
+        remove.className = 'adw-button destructive-action';
+        remove.textContent = 'Delete account';
+        buttons.append(save, remove);
+        actions.append(buttons);
+        page.append(actions);
+
+        host.append(page);
+        this.addContent(host);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncBanner();
+    }
+
+    private _syncBanner(): void {
+        this._banner?.toggleAttribute('revealed', this.args.revealed as boolean);
+    }
+}
+
+export const OverviewWidgetsWebStories: WebStoryModule = { stories: [OverviewWidgetsWebStory] };

package/src/browser/presentation/shortcut-label.web.ts

@@ -0,0 +1,88 @@
+// Browser port of the Shortcut Label story. Shares metadata with shortcut-label.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import {
+    SHORTCUT_LABEL_LEVELS,
+    shortcutLabelLevelsMeta,
+    shortcutLabelMeta,
+} from '../../presentation/shortcut-label.meta.js';
+
+export class ShortcutLabelWebStory extends StoryElement {
+    private _widget: HTMLElement | null = null;
+
+    constructor() {
+        super(ShortcutLabelWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return shortcutLabelMeta;
+    }
+
+    initialize(): void {
+        this._widget = document.createElement('adw-shortcut-label');
+        this._sync();
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._sync();
+    }
+
+    /** `disabled-text` first: an empty accelerator renders the placeholder, so the
+     *  placeholder has to be in place before the accelerator triggers the render. */
+    private _sync(): void {
+        if (!this._widget) return;
+        this._widget.setAttribute('disabled-text', this.args.disabledText as string);
+        this._widget.setAttribute('accelerator', this.args.accelerator as string);
+    }
+}
+
+/** Story: every grammar level stacked, so the rules are legible side by side. */
+export class ShortcutLabelLevelsWebStory extends StoryElement {
+    private _widgets: HTMLElement[] = [];
+
+    constructor() {
+        super(ShortcutLabelLevelsWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return shortcutLabelLevelsMeta;
+    }
+
+    initialize(): void {
+        // A two-column grid, so the shortcuts share one column and line up — the
+        // comparison is the point of this story.
+        const grid = document.createElement('div');
+        grid.style.display = 'grid';
+        grid.style.gridTemplateColumns = 'auto auto';
+        grid.style.rowGap = '12px';
+        grid.style.columnGap = '24px';
+        grid.style.alignItems = 'center';
+
+        for (const level of SHORTCUT_LABEL_LEVELS) {
+            const name = document.createElement('span');
+            name.className = 'dimmed';
+            name.textContent = level.label;
+            grid.append(name);
+
+            const widget = document.createElement('adw-shortcut-label');
+            widget.style.justifySelf = 'end';
+            widget.setAttribute('disabled-text', this.args.disabledText as string);
+            widget.setAttribute('accelerator', level.accelerator);
+            grid.append(widget);
+            this._widgets.push(widget);
+        }
+
+        this.addContent(grid);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        for (const widget of this._widgets) {
+            widget.setAttribute('disabled-text', this.args.disabledText as string);
+        }
+    }
+}
+
+export const ShortcutLabelWebStories: WebStoryModule = {
+    stories: [ShortcutLabelWebStory, ShortcutLabelLevelsWebStory],
+};

package/src/browser/stories.ts

@@ -7,8 +7,10 @@
 // Lists, Buttons, …).
 
 import type { WebStoryModule } from '@gjsify/adwaita-storybook';
+import { OverviewWidgetsWebStories } from './overview/widgets.web.js';
 import { AvatarWebStories } from './presentation/avatar.web.js';
 import { BannerWebStories } from './presentation/banner.web.js';
+import { ShortcutLabelWebStories } from './presentation/shortcut-label.web.js';
 import { SpinnerWebStories } from './presentation/spinner.web.js';
 import { StatusPageWebStories } from './presentation/status-page.web.js';
 import { WindowTitleWebStories } from './presentation/window-title.web.js';
@@ -44,8 +46,10 @@ import { PreferencesDialogWebStories } from './feedback/preferences-dialog.web.j
 import { ToastWebStories } from './feedback/toast.web.js';
 
 export const stories: WebStoryModule[] = [
+    OverviewWidgetsWebStories,
     AvatarWebStories,
     BannerWebStories,
+    ShortcutLabelWebStories,
     SpinnerWebStories,
     StatusPageWebStories,
     WindowTitleWebStories,

package/src/metas.ts

@@ -21,8 +21,10 @@ export * from './navigation/navigation-split-view.meta.js';
 export * from './navigation/navigation-view.meta.js';
 export * from './navigation/overlay-split-view.meta.js';
 export * from './navigation/sidebar.meta.js';
+export * from './overview/widgets.meta.js';
 export * from './presentation/avatar.meta.js';
 export * from './presentation/banner.meta.js';
+export * from './presentation/shortcut-label.meta.js';
 export * from './presentation/spinner.meta.js';
 export * from './presentation/status-page.meta.js';
 export * from './presentation/window-title.meta.js';

package/src/overview/widgets.meta.ts

@@ -0,0 +1,56 @@
+// Shared metadata for the Overview story — the widget gallery.
+//
+// WHAT THIS REPLACES. The gallery used to be two standalone apps rendering the
+// same page: `examples/gtk/adwaita-reference` and
+// `showcases/dom/adwaita-widgets-nativescript`. Both existed to answer "do these
+// widgets look right TOGETHER", which is a question the storybook already hosts —
+// it just had no story that composed more than one widget. Two apps meant two
+// toolchains, two copies of the content, and (measured) a theme copy in one of
+// them that had drifted to a quarter of the package's stylesheet.
+//
+// So it is one story on all three targets instead, and the two apps are gone.
+// Story-set parity is machine-checked, which the two apps never were.
+//
+// The `revealed` control is the one thing here that varies meaningfully: it is
+// `Adw.Banner:revealed`, a real property with a real animation, rather than a knob
+// invented so the panel is not empty.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** One row of the Account group's expander. */
+export interface OverviewExpanderRow {
+    readonly title: string;
+    readonly kind: 'switch' | 'action';
+    readonly active?: boolean;
+}
+
+/** The Account group's expander contents, shared so the three targets agree. */
+export const OVERVIEW_ADVANCED_ROWS: ReadonlyArray<OverviewExpanderRow> = [
+    { title: 'Sync', kind: 'switch', active: true },
+    { title: 'Export', kind: 'action' },
+];
+
+/** The accent names the gallery's combo row offers — a plain widget demo, not the real setting. */
+export const OVERVIEW_ACCENT_OPTIONS: readonly string[] = ['Blue', 'Teal', 'Green', 'Orange'];
+
+/** The shortcut rows, so the newest widget appears in context and not only alone. */
+export const OVERVIEW_SHORTCUTS: ReadonlyArray<{ title: string; accelerator: string }> = [
+    { title: 'Copy', accelerator: '<Control>C' },
+    { title: 'Select all', accelerator: '<Shift><Control>a' },
+    { title: 'Switch tab', accelerator: '<Alt>1...9' },
+];
+
+export const overviewWidgetsMeta: StoryMeta = {
+    title: 'Overview/Widgets',
+    description:
+        'Many widgets at once, the way an app composes them: a banner, preference groups of rows, an expander, buttons and shortcut labels. Use it to judge spacing, alignment and the theme as a whole rather than one widget in isolation.',
+    controls: [
+        {
+            name: 'revealed',
+            label: 'Show banner',
+            type: ControlType.BOOLEAN,
+            description: 'Adw.Banner:revealed — animates in and out',
+            defaultValue: true,
+        },
+    ],
+};

package/src/overview/widgets.story.ts

@@ -0,0 +1,129 @@
+// The Overview story on GTK — the widget gallery that used to be
+// `examples/gtk/adwaita-reference`. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import {
+    OVERVIEW_ACCENT_OPTIONS,
+    OVERVIEW_ADVANCED_ROWS,
+    OVERVIEW_SHORTCUTS,
+    overviewWidgetsMeta,
+} from './widgets.meta.js';
+
+/** Story: many widgets at once, composed the way an app composes them. */
+export class OverviewWidgetsStory extends StoryWidget {
+    private _banner: Adw.Banner | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookOverviewWidgets' }, OverviewWidgetsStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(OverviewWidgetsStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return overviewWidgetsMeta;
+    }
+
+    initialize(): void {
+        const box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: true });
+
+        this._banner = new Adw.Banner({
+            title: 'You have unsaved changes',
+            button_label: 'Save',
+            revealed: this.args.revealed as boolean,
+        });
+        box.append(this._banner);
+
+        const page = new Adw.PreferencesPage({ hexpand: true });
+
+        // --- Appearance: switches and a combo. A widget demo only — the
+        // storybook's OWN appearance lives in the header bar's dialog, and wiring
+        // these to it would give one setting two controls that disagree.
+        const appearance = new Adw.PreferencesGroup({ title: 'Appearance' });
+        appearance.add(
+            new Adw.SwitchRow({ title: 'Dark mode', subtitle: 'Use the dark Adwaita palette', active: false }),
+        );
+        appearance.add(new Adw.SwitchRow({ title: 'Notifications', subtitle: 'Show toasts for events', active: true }));
+        appearance.add(
+            new Adw.ComboRow({
+                title: 'Accent color',
+                model: Gtk.StringList.new([...OVERVIEW_ACCENT_OPTIONS]),
+                selected: 0,
+            }),
+        );
+        page.add(appearance);
+
+        // --- Account: entries, a spin row, and a nested expander ---
+        const account = new Adw.PreferencesGroup({ title: 'Account' });
+
+        const name = new Adw.EntryRow({ title: 'Name' });
+        name.set_text('Ada Lovelace');
+        account.add(name);
+
+        const email = new Adw.EntryRow({ title: 'Email' });
+        email.set_text('ada@example.com');
+        account.add(email);
+
+        const devices = new Adw.SpinRow({
+            title: 'Devices',
+            adjustment: new Gtk.Adjustment({ value: 3, lower: 1, upper: 10, step_increment: 1, page_increment: 1 }),
+        });
+        // The displayed value does not always follow the adjustment through
+        // property-init ordering, so it is set explicitly.
+        devices.set_value(3);
+        account.add(devices);
+
+        const advanced = new Adw.ExpanderRow({ title: 'Advanced', subtitle: 'More options', expanded: true });
+        for (const row of OVERVIEW_ADVANCED_ROWS) {
+            advanced.add_row(
+                row.kind === 'switch'
+                    ? new Adw.SwitchRow({ title: row.title, active: row.active ?? false })
+                    : new Adw.ActionRow({ title: row.title }),
+            );
+        }
+        account.add(advanced);
+        page.add(account);
+
+        // --- Shortcuts: the newest widget, in context ---
+        const shortcuts = new Adw.PreferencesGroup({ title: 'Shortcuts' });
+        for (const shortcut of OVERVIEW_SHORTCUTS) {
+            const row = new Adw.ActionRow({ title: shortcut.title });
+            row.add_suffix(new Adw.ShortcutLabel({ accelerator: shortcut.accelerator, valign: Gtk.Align.CENTER }));
+            shortcuts.add(row);
+        }
+        page.add(shortcuts);
+
+        // --- Actions: the two button styles side by side ---
+        const actions = new Adw.PreferencesGroup({ title: 'Actions' });
+        const buttons = new Gtk.Box({
+            orientation: Gtk.Orientation.HORIZONTAL,
+            spacing: 12,
+            homogeneous: true,
+            margin_top: 6,
+            margin_bottom: 6,
+        });
+        const save = new Gtk.Button({ label: 'Save changes' });
+        save.add_css_class('suggested-action');
+        buttons.append(save);
+        const remove = new Gtk.Button({ label: 'Delete account' });
+        remove.add_css_class('destructive-action');
+        buttons.append(remove);
+        actions.add(buttons);
+        page.add(actions);
+
+        box.append(page);
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._banner?.set_revealed(this.args.revealed as boolean);
+    }
+}
+
+GObject.type_ensure(OverviewWidgetsStory.$gtype);
+
+export const OverviewWidgetsStories: StoryModule = { stories: [OverviewWidgetsStory] };

package/src/presentation/shortcut-label.meta.ts

@@ -0,0 +1,90 @@
+// Shared, renderer-agnostic metadata for the Shortcut Label story. Imported by
+// the GTK renderer (shortcut-label.story.ts), the browser renderer
+// (browser/presentation/shortcut-label.web.ts) and the NativeScript one, so all
+// three expose identical controls.
+//
+// `accelerator` is a SELECT rather than free text: the interesting thing about
+// this widget is its four-level grammar (` ` → `...` → `+` → `&`), and the
+// presets put each level one tap away — which matters most on the NativeScript
+// target, where typing `<Control>C` means fighting a phone keyboard.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** One row of the All Levels story. */
+export interface ShortcutLabelLevel {
+    readonly label: string;
+    readonly accelerator: string;
+}
+
+/**
+ * The rows the All Levels story stacks, shared by all three renderers.
+ *
+ * It lives in the meta because the whole value of that story is the COMPARISON:
+ * three targets showing a different set of accelerators could not be compared at
+ * all, which is the same reason the story SET is gated
+ * (scripts/check-storybook-story-parity.mjs).
+ */
+export const SHORTCUT_LABEL_LEVELS: ReadonlyArray<ShortcutLabelLevel> = [
+    { label: 'Single', accelerator: '<Control>C' },
+    { label: 'Modifier order', accelerator: '<Shift><Control>a' },
+    { label: 'Alternatives', accelerator: '<Shift>A Home' },
+    { label: 'Range', accelerator: '<Alt>1...9' },
+    { label: 'In sequence', accelerator: '<Control>C+<Control>X' },
+    { label: 'Together', accelerator: 'Control_L&Control_R' },
+    { label: 'Nested', accelerator: '<Alt>1...9 <Alt>0' },
+    { label: 'Unset', accelerator: '' },
+];
+
+export const shortcutLabelMeta: StoryMeta = {
+    title: 'Presentation/Shortcut Label',
+    description:
+        'Adw.ShortcutLabel — an accelerator drawn as keycaps. The four grammar levels: alternatives (space), a range (...), pressed in sequence (+), and pressed together (&).',
+    controls: [
+        {
+            name: 'accelerator',
+            label: 'Accelerator',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Ctrl+C', value: '<Control>C' },
+                { label: 'Modifier order (Shift+Ctrl+A)', value: '<Shift><Control>a' },
+                { label: 'Alternatives (Shift+A / Home)', value: '<Shift>A Home' },
+                { label: 'Range (Alt+1…9)', value: '<Alt>1...9' },
+                { label: 'In sequence (Ctrl+C → Ctrl+X)', value: '<Control>C+<Control>X' },
+                { label: 'Together (Ctrl L + Ctrl R)', value: 'Control_L&Control_R' },
+                { label: 'Nested (Alt+1…9 / Alt+0)', value: '<Alt>1...9 <Alt>0' },
+                { label: 'Glyph key (Ctrl+Space)', value: '<Control>space' },
+                { label: 'Arrow key (Left)', value: 'Left' },
+                { label: 'Unset — shows the placeholder', value: '' },
+            ],
+            defaultValue: '<Control>C',
+        },
+        {
+            name: 'disabledText',
+            label: 'Placeholder',
+            type: ControlType.TEXT,
+            defaultValue: 'Disabled',
+        },
+    ],
+};
+
+/**
+ * Every grammar level at once.
+ *
+ * The interactive story above shows ONE accelerator per view, and the four
+ * nesting levels are only legible side by side — `Modifier order` renders
+ * `Ctrl Shift A` from `<Shift><Control>a`, and `Range` ends without a modifier,
+ * neither of which reads as a rule until there is a neighbour to compare against.
+ */
+export const shortcutLabelLevelsMeta: StoryMeta = {
+    title: 'Presentation/Shortcut Label (All Levels)',
+    description:
+        "Every Adw.ShortcutLabel grammar level at once: alternatives (space), a range (...), pressed in sequence (+), pressed together (&) — plus GTK's fixed keycap order and the disabled placeholder.",
+    controls: [
+        {
+            name: 'disabledText',
+            label: 'Placeholder',
+            type: ControlType.TEXT,
+            defaultValue: 'Disabled',
+        },
+    ],
+};

package/src/presentation/shortcut-label.story.ts

@@ -0,0 +1,92 @@
+// Adw.ShortcutLabel — an accelerator drawn as keycaps. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { SHORTCUT_LABEL_LEVELS, shortcutLabelLevelsMeta, shortcutLabelMeta } from './shortcut-label.meta.js';
+
+/** Story: Adw.ShortcutLabel across the four levels of its accelerator grammar. */
+export class ShortcutLabelStory extends StoryWidget {
+    private _widget: Adw.ShortcutLabel | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookShortcutLabel' }, ShortcutLabelStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ShortcutLabelStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...shortcutLabelMeta, component: Adw.ShortcutLabel.$gtype };
+    }
+
+    initialize(): void {
+        this._widget = new Adw.ShortcutLabel({
+            accelerator: this.args.accelerator as string,
+            disabledText: this.args.disabledText as string,
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._widget) return;
+        this._widget.disabledText = this.args.disabledText as string;
+        this._widget.accelerator = this.args.accelerator as string;
+    }
+}
+
+GObject.type_ensure(ShortcutLabelStory.$gtype);
+
+/** Story: every grammar level stacked, so the rules are legible side by side. */
+export class ShortcutLabelLevelsStory extends StoryWidget {
+    private _widgets: Adw.ShortcutLabel[] = [];
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookShortcutLabelLevels' }, ShortcutLabelLevelsStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ShortcutLabelLevelsStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...shortcutLabelLevelsMeta, component: Adw.ShortcutLabel.$gtype };
+    }
+
+    initialize(): void {
+        // A grid rather than a box per row: the shortcuts line up in one column
+        // only if they share it, and the comparison is the point of this story.
+        const grid = new Gtk.Grid({ row_spacing: 12, column_spacing: 24 });
+
+        for (const [row, level] of SHORTCUT_LABEL_LEVELS.entries()) {
+            const name = new Gtk.Label({ label: level.label, halign: Gtk.Align.START });
+            name.add_css_class('dimmed');
+            grid.attach(name, 0, row, 1, 1);
+
+            const widget = new Adw.ShortcutLabel({
+                accelerator: level.accelerator,
+                disabledText: this.args.disabledText as string,
+                halign: Gtk.Align.END,
+                hexpand: true,
+            });
+            grid.attach(widget, 1, row, 1, 1);
+            this._widgets.push(widget);
+        }
+
+        this.addContent(grid);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        for (const widget of this._widgets) {
+            widget.disabledText = this.args.disabledText as string;
+        }
+    }
+}
+
+GObject.type_ensure(ShortcutLabelLevelsStory.$gtype);
+
+export const ShortcutLabelStories: StoryModule = { stories: [ShortcutLabelStory, ShortcutLabelLevelsStory] };