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

package/src/browser/stories.ts

@@ -19,9 +19,17 @@ 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 { CalendarWebStories } from './presentation/calendar.web.js';
+import { ColumnViewWebStories } from './presentation/column-view.web.js';
+import { FlowBoxWebStories } from './presentation/flow-box.web.js';
+import { GridViewWebStories } from './presentation/grid-view.web.js';
+import { ListBoxWebStories } from './presentation/list-box.web.js';
+import { ListViewWebStories } from './presentation/list-view.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 { TreeExpanderWebStories } from './presentation/tree-expander.web.js';
+import { WindowHandleWebStories } from './presentation/window-handle.web.js';
 import { WindowTitleWebStories } from './presentation/window-title.web.js';
 import { ActionRowWebStories } from './rows/action-row.web.js';
 import { ButtonRowWebStories } from './rows/button-row.web.js';
@@ -30,21 +38,75 @@ import { EntryRowWebStories } from './rows/entry-row.web.js';
 import { ExpanderRowWebStories } from './rows/expander-row.web.js';
 import { PasswordEntryRowWebStories } from './rows/password-entry-row.web.js';
 import { PreferencesGroupWebStories } from './rows/preferences-group.web.js';
+import { PreferencesRowWebStories } from './rows/preferences-row.web.js';
 import { SpinRowWebStories } from './rows/spin-row.web.js';
 import { SwitchRowWebStories } from './rows/switch-row.web.js';
+import { DragIconWebStories } from './drawing/drag-icon.web.js';
+import { DrawingAreaWebStories } from './drawing/drawing-area.web.js';
+import { GLAreaWebStories } from './drawing/gl-area.web.js';
+import { GraphicsOffloadWebStories } from './drawing/graphics-offload.web.js';
+import { CheckButtonWebStories } from './controls/check-button.web.js';
 import { DropDownWebStories } from './controls/drop-down.web.js';
 import { EntryWebStories } from './controls/entry.web.js';
+import { GtkSpinnerWebStories } from './controls/gtk-spinner.web.js';
+import { LevelBarWebStories } from './controls/level-bar.web.js';
+import { PasswordEntryWebStories } from './controls/password-entry.web.js';
+import { ProgressBarWebStories } from './controls/progress-bar.web.js';
+import { ScaleWebStories } from './controls/scale.web.js';
+import { SearchEntryWebStories } from './controls/search-entry.web.js';
+import { SpinButtonWebStories } from './controls/spin-button.web.js';
+import { SwitchWebStories } from './controls/switch.web.js';
+import { ExpanderWebStories } from './layout/expander.web.js';
+import { OverlayWebStories } from './layout/overlay.web.js';
+import { PanedWebStories } from './layout/paned.web.js';
+import { RevealerWebStories } from './layout/revealer.web.js';
+import { ScrollbarWebStories } from './layout/scrollbar.web.js';
+import { ScrolledWindowWebStories } from './layout/scrolled-window.web.js';
+import { SeparatorWebStories } from './layout/separator.web.js';
+import { BreakpointBinWebStories } from './layout/breakpoint-bin.web.js';
+import { LayoutSlotWebStories } from './layout/layout-slot.web.js';
+import { MultiLayoutViewWebStories } from './layout/multi-layout-view.web.js';
+import { EditableLabelWebStories } from './text/editable-label.web.js';
+import { SearchBarWebStories } from './text/search-bar.web.js';
+import { TextViewWebStories } from './text/text-view.web.js';
+import { TextWebStories } from './text/text.web.js';
+import { AspectFrameWebStories } from './layout/aspect-frame.web.js';
+import { CenterBoxWebStories } from './layout/center-box.web.js';
+import { FixedWebStories } from './layout/fixed.web.js';
+import { FrameWebStories } from './layout/frame.web.js';
+import { GridWebStories } from './layout/grid.web.js';
+import { ToggleButtonWebStories } from './buttons/toggle-button.web.js';
+import { ColorDialogButtonWebStories } from './buttons/color-dialog-button.web.js';
+import { FontDialogButtonWebStories } from './buttons/font-dialog-button.web.js';
+import { LinkButtonWebStories } from './buttons/link-button.web.js';
+import { ScaleButtonWebStories } from './buttons/scale-button.web.js';
 import { ButtonContentWebStories } from './buttons/button-content.web.js';
 import { ButtonStylesWebStories } from './buttons/button-styles.web.js';
 import { MenuButtonWebStories } from './buttons/menu-button.web.js';
 import { SplitButtonWebStories } from './buttons/split-button.web.js';
 import { ToggleGroupWebStories } from './buttons/toggle-group.web.js';
+import { BinWebStories } from './layout/bin.web.js';
+import { ClampScrollableWebStories } from './layout/clamp-scrollable.web.js';
 import { ClampWebStories } from './layout/clamp.web.js';
 import { HeaderBarWebStories } from './layout/header-bar.web.js';
+import { PopoverBinWebStories } from './layout/popover-bin.web.js';
+import { PopoverMenuWebStories } from './layout/popover-menu.web.js';
+import { PopoverWebStories } from './layout/popover.web.js';
 import { ToolbarViewWebStories } from './layout/toolbar-view.web.js';
+import { ViewportWebStories } from './layout/viewport.web.js';
+import { ApplicationWindowWebStories } from './layout/application-window.web.js';
+import { WindowWebStories } from './layout/window.web.js';
 import { WrapBoxWebStories } from './layout/wrap-box.web.js';
 import { CarouselWebStories } from './view-switching/carousel.web.js';
 import { InlineViewSwitcherWebStories } from './view-switching/inline-view-switcher.web.js';
+import { NotebookWebStories } from './view-switching/notebook.web.js';
+import { StackSidebarWebStories } from './view-switching/stack-sidebar.web.js';
+import { StackSwitcherWebStories } from './view-switching/stack-switcher.web.js';
+import { StackWebStories } from './view-switching/stack.web.js';
+import { TabBarWebStories } from './view-switching/tab-bar.web.js';
+import { TabButtonWebStories } from './view-switching/tab-button.web.js';
+import { TabOverviewWebStories } from './view-switching/tab-overview.web.js';
+import { ViewSwitcherSidebarWebStories } from './view-switching/view-switcher-sidebar.web.js';
 import { TabViewWebStories } from './view-switching/tab-view.web.js';
 import { ViewSwitcherWebStories } from './view-switching/view-switcher.web.js';
 import { ViewSwitcherBarWebStories } from './view-switching/view-switcher-bar.web.js';
@@ -52,19 +114,43 @@ import { BottomSheetWebStories } from './navigation/bottom-sheet.web.js';
 import { NavigationSplitViewWebStories } from './navigation/navigation-split-view.web.js';
 import { NavigationViewWebStories } from './navigation/navigation-view.web.js';
 import { OverlaySplitViewWebStories } from './navigation/overlay-split-view.web.js';
+import { PopoverMenuBarWebStories } from './navigation/popover-menu-bar.web.js';
+import { ImageWebStories } from './media/image.web.js';
+import { InscriptionWebStories } from './media/inscription.web.js';
+import { MediaControlsWebStories } from './media/media-controls.web.js';
+import { PictureWebStories } from './media/picture.web.js';
+import { VideoWebStories } from './media/video.web.js';
 import { SidebarWebStories } from './navigation/sidebar.web.js';
 import { AboutDialogWebStories } from './feedback/about-dialog.web.js';
 import { AlertDialogWebStories } from './feedback/alert-dialog.web.js';
+import { DialogWebStories } from './feedback/dialog.web.js';
+import { EmojiChooserWebStories } from './feedback/emoji-chooser.web.js';
+import { GtkAboutDialogWebStories } from './feedback/gtk-about-dialog.web.js';
+import { PageSetupUnixDialogWebStories } from './feedback/page-setup-unix-dialog.web.js';
+import { PrintUnixDialogWebStories } from './feedback/print-unix-dialog.web.js';
 import { PreferencesDialogWebStories } from './feedback/preferences-dialog.web.js';
+import { ShortcutsDialogWebStories } from './feedback/shortcuts-dialog.web.js';
 import { ToastWebStories } from './feedback/toast.web.js';
+import { ActionBarWebStories } from './windows/action-bar.web.js';
+import { GtkApplicationWindowWebStories } from './windows/gtk-application-window.web.js';
+import { GtkHeaderBarWebStories } from './windows/gtk-header-bar.web.js';
+import { GtkWindowWebStories } from './windows/gtk-window.web.js';
+import { WindowControlsWebStories } from './windows/window-controls.web.js';
 
 export const stories: WebStoryModule[] = [
     OverviewWidgetsWebStories,
     AvatarWebStories,
     BannerWebStories,
+    CalendarWebStories,
+    ColumnViewWebStories,
+    FlowBoxWebStories,
+    GridViewWebStories,
+    ListBoxWebStories,
+    ListViewWebStories,
     ShortcutLabelWebStories,
     SpinnerWebStories,
     StatusPageWebStories,
+    TreeExpanderWebStories,
     WindowTitleWebStories,
     ActionRowWebStories,
     ButtonRowWebStories,
@@ -73,21 +159,75 @@ export const stories: WebStoryModule[] = [
     ExpanderRowWebStories,
     PasswordEntryRowWebStories,
     PreferencesGroupWebStories,
+    PreferencesRowWebStories,
     SpinRowWebStories,
     SwitchRowWebStories,
     EntryWebStories,
     DropDownWebStories,
+    ScaleWebStories,
+    SpinButtonWebStories,
+    PasswordEntryWebStories,
+    SearchEntryWebStories,
+    CheckButtonWebStories,
+    SwitchWebStories,
+    ProgressBarWebStories,
+    LevelBarWebStories,
+    GtkSpinnerWebStories,
+    DragIconWebStories,
+    DrawingAreaWebStories,
+    GLAreaWebStories,
+    GraphicsOffloadWebStories,
     ButtonContentWebStories,
     ButtonStylesWebStories,
     MenuButtonWebStories,
     SplitButtonWebStories,
+    ToggleButtonWebStories,
+    ColorDialogButtonWebStories,
+    FontDialogButtonWebStories,
+    LinkButtonWebStories,
+    ScaleButtonWebStories,
     ToggleGroupWebStories,
+    BinWebStories,
+    ClampScrollableWebStories,
     ClampWebStories,
     HeaderBarWebStories,
+    ExpanderWebStories,
+    OverlayWebStories,
+    PanedWebStories,
+    PopoverWebStories,
+    PopoverMenuWebStories,
+    PopoverBinWebStories,
+    RevealerWebStories,
+    ScrollbarWebStories,
+    ScrolledWindowWebStories,
+    SeparatorWebStories,
+    BreakpointBinWebStories,
+    LayoutSlotWebStories,
+    MultiLayoutViewWebStories,
+    EditableLabelWebStories,
+    TextWebStories,
+    TextViewWebStories,
+    SearchBarWebStories,
+    FrameWebStories,
+    AspectFrameWebStories,
+    CenterBoxWebStories,
+    GridWebStories,
+    FixedWebStories,
     ToolbarViewWebStories,
+    ViewportWebStories,
+    ApplicationWindowWebStories,
+    WindowWebStories,
     WrapBoxWebStories,
     CarouselWebStories,
     InlineViewSwitcherWebStories,
+    StackWebStories,
+    StackSwitcherWebStories,
+    StackSidebarWebStories,
+    NotebookWebStories,
+    TabBarWebStories,
+    TabButtonWebStories,
+    TabOverviewWebStories,
+    ViewSwitcherSidebarWebStories,
     TabViewWebStories,
     ViewSwitcherWebStories,
     ViewSwitcherBarWebStories,
@@ -95,9 +235,27 @@ export const stories: WebStoryModule[] = [
     NavigationSplitViewWebStories,
     NavigationViewWebStories,
     OverlaySplitViewWebStories,
+    PopoverMenuBarWebStories,
     SidebarWebStories,
+    ImageWebStories,
+    InscriptionWebStories,
+    PictureWebStories,
+    VideoWebStories,
+    MediaControlsWebStories,
     AboutDialogWebStories,
     AlertDialogWebStories,
+    DialogWebStories,
+    EmojiChooserWebStories,
+    GtkAboutDialogWebStories,
+    PageSetupUnixDialogWebStories,
     PreferencesDialogWebStories,
+    PrintUnixDialogWebStories,
+    ShortcutsDialogWebStories,
     ToastWebStories,
+    GtkHeaderBarWebStories,
+    WindowControlsWebStories,
+    ActionBarWebStories,
+    GtkWindowWebStories,
+    GtkApplicationWindowWebStories,
+    WindowHandleWebStories,
 ];

package/src/browser/text/editable-label.web.ts

@@ -0,0 +1,45 @@
+// Browser port of the Editable Label story. Shares metadata with editable-label.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { editableLabelMeta } from '../../text/editable-label.meta.js';
+
+/** The properties the story drives, as `<gtk-editable-label>` spells them. */
+interface EditableLabelControls {
+    text: string;
+    editable: boolean;
+    editing: boolean;
+}
+
+export class EditableLabelWebStory extends StoryElement {
+    private _label: (HTMLElement & EditableLabelControls) | null = null;
+
+    constructor() {
+        super(EditableLabelWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return editableLabelMeta;
+    }
+
+    initialize(): void {
+        this._label = document.createElement('gtk-editable-label') as HTMLElement & EditableLabelControls;
+        this._label.text = this.args.text as string;
+        this._apply();
+        this.addContent(this._label);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._label) return;
+        // The draft lives in the entry, so `text` is written only while nothing is being
+        // edited — the order the C keeps them in (gtkeditablelabel.c:237-248).
+        if (!this._label.editing) this._label.text = this.args.text as string;
+        this._label.editable = this.args.editable as boolean;
+        this._label.editing = this.args.editing as boolean;
+    }
+}
+
+export const EditableLabelWebStories: WebStoryModule = { stories: [EditableLabelWebStory] };

package/src/browser/text/search-bar.web.ts

@@ -0,0 +1,45 @@
+// Browser port of the Search Bar story. Shares metadata with search-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { searchBarMeta } from '../../text/search-bar.meta.js';
+
+/** The properties the story drives, as `<gtk-search-bar>` spells them. */
+interface SearchBarControls {
+    searchModeEnabled: boolean;
+    showCloseButton: boolean;
+}
+
+export class SearchBarWebStory extends StoryElement {
+    private _bar: (HTMLElement & SearchBarControls) | null = null;
+
+    constructor() {
+        super(SearchBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return searchBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-search-bar') as HTMLElement & SearchBarControls;
+        // Any `GtkEditable` is a legal child (gtksearchbar.c:611-625), and a plain entry is
+        // the case `reveal_child_changed_cb` has a branch of its own for (:186-191).
+        const field = document.createElement('gtk-entry');
+        field.setAttribute('placeholder-text', 'Search');
+        this._bar.appendChild(field);
+        this._apply();
+        this.addContent(this._bar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        this._bar.searchModeEnabled = this.args.searchModeEnabled as boolean;
+        this._bar.showCloseButton = this.args.showCloseButton as boolean;
+    }
+}
+
+export const SearchBarWebStories: WebStoryModule = { stories: [SearchBarWebStory] };

package/src/browser/text/text-view.web.ts

@@ -0,0 +1,54 @@
+// Browser port of the Text View story. Shares metadata with text-view.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { textViewMeta } from '../../text/text-view.meta.js';
+
+/** The properties the story drives, as `<gtk-text-view>` spells them. */
+interface TextViewControls {
+    text: string;
+    wrapMode: string;
+    justification: string;
+    monospace: boolean;
+    acceptsTab: boolean;
+    cursorVisible: boolean;
+    topMargin: number;
+}
+
+export class TextViewWebStory extends StoryElement {
+    private _view: (HTMLElement & TextViewControls) | null = null;
+
+    constructor() {
+        super(TextViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return textViewMeta;
+    }
+
+    initialize(): void {
+        this._view = document.createElement('gtk-text-view') as HTMLElement & TextViewControls;
+        // The text is set BEFORE the element is connected, so it arrives as the attribute the
+        // element's light-DOM seed reads — the same door the GTK story's buffer text takes.
+        this._view.text = this.args.text as string;
+        this._apply();
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view) return;
+        this._view.wrapMode = this.args.wrapMode as string;
+        this._view.justification = this.args.justification as string;
+        this._view.monospace = this.args.monospace as boolean;
+        // `accepts-tab` and `cursor-visible` both default TRUE, so the element reads a VALUE
+        // and the property is what writes it.
+        this._view.acceptsTab = this.args.acceptsTab as boolean;
+        this._view.cursorVisible = this.args.cursorVisible as boolean;
+        this._view.topMargin = Number(this.args.topMargin ?? 0);
+    }
+}
+
+export const TextViewWebStories: WebStoryModule = { stories: [TextViewWebStory] };

package/src/browser/text/text.web.ts

@@ -0,0 +1,48 @@
+// Browser port of the Text story. Shares metadata with text.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { textMeta } from '../../text/text.meta.js';
+
+export class TextWebStory extends StoryElement {
+    private _text: HTMLElement | null = null;
+
+    constructor() {
+        super(TextWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return textMeta;
+    }
+
+    initialize(): void {
+        this._text = document.createElement('gtk-text');
+        this._apply();
+        this.addContent(this._text);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._text) return;
+        const text = this._text as HTMLElement & {
+            text: string;
+            placeholderText: string;
+            editable: boolean;
+            visibility: boolean;
+            maxLength: number;
+            propagateTextWidth: boolean;
+        };
+        text.text = this.args.text as string;
+        text.placeholderText = this.args.placeholderText as string;
+        // `editable` and `visibility` default TRUE in GTK, so the element reads them from a
+        // VALUE — written here through the property so the story never has to spell `false`.
+        text.editable = this.args.editable as boolean;
+        text.visibility = this.args.visibility as boolean;
+        text.maxLength = Number(this.args.maxLength ?? 0);
+        text.propagateTextWidth = this.args.propagateTextWidth as boolean;
+    }
+}
+
+export const TextWebStories: WebStoryModule = { stories: [TextWebStory] };

package/src/browser/view-switching/notebook.web.ts

@@ -0,0 +1,67 @@
+// Browser port of the Notebook story. Shares metadata with notebook.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+// TYPE-ONLY: the pages are declared in markup and driven through attributes, so nothing
+// here needs the element's own API surface — and a hand-written structural type would be a
+// second copy of it that nothing keeps in step. The import erases.
+import type { Gtk } from '@gjsify/adwaita-web';
+import { NOTEBOOK_PAGES, notebookMeta } from '../../view-switching/notebook.meta.js';
+
+export class NotebookWebStory extends StoryElement {
+    private _notebook: Gtk.Notebook | null = null;
+
+    constructor() {
+        super(NotebookWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return notebookMeta;
+    }
+
+    initialize(): void {
+        const notebook = document.createElement('gtk-notebook') as Gtk.Notebook;
+        notebook.style.cssText = 'width:480px;height:320px;';
+
+        // A GtkNotebookPage is a GObject, not a widget: its properties are ATTRIBUTES on
+        // the page element. The third page carries no tab-label on purpose — that is the
+        // page the element labels "Page 3" from `gtk_notebook_update_labels`
+        // (gtknotebook.c:4353-4373).
+        for (const page of NOTEBOOK_PAGES) {
+            const child = document.createElement('div');
+            if (page.label) child.setAttribute('tab-label', page.label);
+            child.setAttribute('menu-label', page.label || page.name);
+            child.style.cssText =
+                'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;';
+            const heading = document.createElement('div');
+            heading.setAttribute('data-gtk-notebook-story', 'heading');
+            heading.textContent = page.label || page.name;
+            const body = document.createElement('div');
+            body.setAttribute('data-gtk-notebook-story', 'body');
+            body.textContent = page.body;
+            child.append(heading, body);
+            notebook.appendChild(child);
+        }
+
+        this.addContent(notebook);
+        this._notebook = notebook;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._notebook) return;
+        // The ORDER is the element's own: `tab-pos` decides the edge the layout is read at,
+        // so it goes first, and `show-border` — the `.frame` class in C — last.
+        this._notebook.setAttribute('tab-pos', this.args.tabPos as string);
+        // `show-tabs` and `show-border` both default TRUE (gtknotebook.c:1124, :1134), so
+        // the false case has to be spelled: an absent attribute already reads as true.
+        this._notebook.setAttribute('show-tabs', (this.args.showTabs as boolean) ? '' : 'false');
+        this._notebook.setAttribute('show-border', (this.args.showBorder as boolean) ? '' : 'false');
+        this._notebook.toggleAttribute('enable-popup', this.args.enablePopup as boolean);
+    }
+}
+
+export const NotebookWebStories: WebStoryModule = { stories: [NotebookWebStory] };

package/src/browser/view-switching/stack-sidebar.web.ts

@@ -0,0 +1,68 @@
+// Browser port of the Stack Sidebar story. Shares metadata with stack-sidebar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+// TYPE-ONLY: the sidebar is bound by id attribute and the pages are declared in
+// markup, so nothing here needs the element's API — and a hand-written structural type
+// would be a second copy of it that nothing keeps in step. The import erases.
+import type { Gtk } from '@gjsify/adwaita-web';
+import { STACK_SIDEBAR_PAGES, stackSidebarMeta } from '../../view-switching/stack-sidebar.meta.js';
+
+export class StackSidebarWebStory extends StoryElement {
+    private _stack: Gtk.Stack | null = null;
+
+    constructor() {
+        super(StackSidebarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return stackSidebarMeta;
+    }
+
+    initialize(): void {
+        const stack = document.createElement('gtk-stack') as Gtk.Stack;
+        stack.id = 'stack-sidebar-demo';
+        stack.style.flex = '1';
+
+        // A GtkStackPage is a GObject, not a widget: its properties are ATTRIBUTES on the
+        // page element. The last page here has an icon and NO title on purpose — that is
+        // the page a sidebar row cannot represent (gtkstacksidebar.c:186).
+        for (const page of STACK_SIDEBAR_PAGES) {
+            const child = document.createElement('div');
+            child.setAttribute('name', page.name);
+            if (page.title) child.setAttribute('title', page.title);
+            if (page.icon) child.setAttribute('icon-name', page.icon);
+            if (page.attn) child.setAttribute('needs-attention', '');
+            child.style.cssText =
+                'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;';
+            const body = document.createElement('div');
+            body.textContent = page.body;
+            child.appendChild(body);
+            stack.appendChild(child);
+        }
+
+        const sidebar = document.createElement('gtk-stack-sidebar') as Gtk.StackSidebar;
+        // The `stack` property takes a Gtk.Widget, which no attribute can carry, so it is
+        // spelled as an id reference — the same convention `<adw-view-switcher-bar>` uses.
+        sidebar.setAttribute('stack', stack.id);
+        sidebar.style.width = '180px';
+
+        const root = document.createElement('div');
+        root.style.cssText = 'display:flex;flex-direction:row;gap:12px;width:480px;height:320px;';
+        root.append(sidebar, stack);
+        this.addContent(root);
+
+        this._stack = stack;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._stack) return;
+        this._stack.setAttribute('transition-type', this.args.transitionType as string);
+    }
+}
+
+export const StackSidebarWebStories: WebStoryModule = { stories: [StackSidebarWebStory] };

package/src/browser/view-switching/stack-switcher.web.ts

@@ -0,0 +1,70 @@
+// Browser port of the Stack Switcher story. Shares metadata with stack-switcher.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+// TYPE-ONLY: the switcher is bound by id attribute and the pages are declared in
+// markup, so nothing here needs the element's API — and a hand-written structural type
+// would be a second copy of it that nothing keeps in step. The import erases.
+import type { Gtk } from '@gjsify/adwaita-web';
+import { STACK_SWITCHER_PAGES, stackSwitcherMeta } from '../../view-switching/stack-switcher.meta.js';
+
+export class StackSwitcherWebStory extends StoryElement {
+    private _switcher: Gtk.StackSwitcher | null = null;
+
+    constructor() {
+        super(StackSwitcherWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return stackSwitcherMeta;
+    }
+
+    initialize(): void {
+        const stack = document.createElement('gtk-stack') as Gtk.Stack;
+        stack.id = 'stack-switcher-demo';
+        stack.style.flex = '1';
+
+        // A GtkStackPage is a GObject, not a widget: its properties are ATTRIBUTES on the
+        // page element. An absent title stays ABSENT, because `rebuild_child` builds no
+        // label for a page with neither title nor icon (gtkstackswitcher.c:158-176).
+        for (const page of STACK_SWITCHER_PAGES) {
+            const child = document.createElement('div');
+            child.setAttribute('name', page.name);
+            if (page.title) child.setAttribute('title', page.title);
+            if (page.icon) child.setAttribute('icon-name', page.icon);
+            child.setAttribute('use-underline', '');
+            if (page.attn) child.setAttribute('needs-attention', '');
+            child.style.cssText =
+                'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;';
+            const body = document.createElement('div');
+            body.textContent = page.body;
+            child.appendChild(body);
+            stack.appendChild(child);
+        }
+
+        const switcher = document.createElement('gtk-stack-switcher') as Gtk.StackSwitcher;
+        // The `stack` property takes a Gtk.Widget, which no attribute can carry, so it is
+        // spelled as an id reference — the same convention `<adw-view-switcher-bar>` uses.
+        switcher.setAttribute('stack', stack.id);
+
+        const root = document.createElement('div');
+        root.style.cssText = 'display:flex;flex-direction:column;gap:12px;width:480px;height:320px;';
+        root.append(switcher, stack);
+        this.addContent(root);
+
+        this._switcher = switcher;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._switcher) return;
+        this._switcher.setAttribute('orientation', this.args.orientation as string);
+        const stack = document.getElementById('stack-switcher-demo');
+        if (stack) stack.setAttribute('transition-type', this.args.transitionType as string);
+    }
+}
+
+export const StackSwitcherWebStories: WebStoryModule = { stories: [StackSwitcherWebStory] };