@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/browser/rows/password-entry-row.web.ts

@@ -0,0 +1,43 @@
+// Browser port of the Password Entry Row story. Shares metadata with
+// password-entry-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { passwordEntryRowMeta } from '../../rows/password-entry-row.meta.js';
+
+export class PasswordEntryRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(PasswordEntryRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return passwordEntryRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-password-entry-row');
+        this._syncRow();
+
+        const group = document.createElement('adw-preferences-group');
+        group.append(this._row);
+
+        const clamp = document.createElement('adw-clamp');
+        clamp.setAttribute('maximum-size', '400');
+        clamp.append(group);
+
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('text', this.args.text as string);
+    }
+}
+
+export const PasswordEntryRowWebStories: WebStoryModule = { stories: [PasswordEntryRowWebStory] };

package/src/browser/rows/preferences-group.web.ts

@@ -0,0 +1,68 @@
+// Browser port of the Preferences Group story. Shares metadata with
+// preferences-group.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { preferencesGroupMeta } from '../../rows/preferences-group.meta.js';
+
+const REGION_OPTIONS = ['Europe', 'Americas', 'Asia', 'Oceania'];
+
+export class PreferencesGroupWebStory extends StoryElement {
+    private _group: HTMLElement | null = null;
+
+    constructor() {
+        super(PreferencesGroupWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return preferencesGroupMeta;
+    }
+
+    initialize(): void {
+        this._group = document.createElement('adw-preferences-group');
+
+        // Header-suffix: a flat "Sign out" button at the trailing edge of the
+        // header — mirrors the native story's `headerSuffix` Gtk.Button.
+        const signOut = document.createElement('button');
+        signOut.className = 'adw-button flat';
+        signOut.textContent = 'Sign out';
+        signOut.setAttribute('slot', 'header-suffix');
+        this._group.append(signOut);
+
+        const nameRow = document.createElement('adw-entry-row');
+        nameRow.setAttribute('title', 'Display name');
+        nameRow.setAttribute('text', 'Grace Hopper');
+        this._group.append(nameRow);
+
+        const syncRow = document.createElement('adw-switch-row');
+        syncRow.setAttribute('title', 'Sync over Wi-Fi only');
+        syncRow.setAttribute('subtitle', 'Avoid using mobile data for backups');
+        syncRow.setAttribute('active', '');
+        this._group.append(syncRow);
+
+        const regionRow = document.createElement('adw-combo-row');
+        regionRow.setAttribute('title', 'Region');
+        regionRow.setAttribute('items', JSON.stringify(REGION_OPTIONS));
+        regionRow.setAttribute('selected', '0');
+        this._group.append(regionRow);
+
+        this._syncGroup();
+
+        const clamp = document.createElement('adw-clamp');
+        clamp.setAttribute('maximum-size', '400');
+        clamp.append(this._group);
+
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncGroup();
+    }
+
+    private _syncGroup(): void {
+        if (!this._group) return;
+        this._group.setAttribute('title', this.args.title as string);
+        this._group.setAttribute('description', this.args.description as string);
+    }
+}
+
+export const PreferencesGroupWebStories: WebStoryModule = { stories: [PreferencesGroupWebStory] };

package/src/browser/rows/spin-row.web.ts

@@ -0,0 +1,47 @@
+// Browser port of the Spin Row story. Shares metadata with spin-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { spinRowMeta } from '../../rows/spin-row.meta.js';
+
+export class SpinRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(SpinRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return spinRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-spin-row');
+        this._row.setAttribute('min', '0');
+        this._row.setAttribute('max', '100');
+        this._syncRow();
+
+        const group = document.createElement('adw-preferences-group');
+        group.append(this._row);
+
+        const clamp = document.createElement('adw-clamp');
+        clamp.setAttribute('maximum-size', '400');
+        clamp.append(group);
+
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        // Mirror Adw.SpinRow.digits via the step's decimal precision.
+        const digits = this.args.digits as number;
+        this._row.setAttribute('step', String(10 ** -digits));
+        this._row.setAttribute('value', String(this.args.value as number));
+    }
+}
+
+export const SpinRowWebStories: WebStoryModule = { stories: [SpinRowWebStory] };

package/src/browser/rows/switch-row.web.ts

@@ -0,0 +1,43 @@
+// Browser port of the Switch Row story. Shares metadata with switch-row.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { switchRowMeta } from '../../rows/switch-row.meta.js';
+
+export class SwitchRowWebStory extends StoryElement {
+    private _row: HTMLElement | null = null;
+
+    constructor() {
+        super(SwitchRowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return switchRowMeta;
+    }
+
+    initialize(): void {
+        this._row = document.createElement('adw-switch-row');
+        this._syncRow();
+
+        const group = document.createElement('adw-preferences-group');
+        group.append(this._row);
+
+        const clamp = document.createElement('adw-clamp');
+        clamp.setAttribute('maximum-size', '400');
+        clamp.append(group);
+
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._syncRow();
+    }
+
+    private _syncRow(): void {
+        if (!this._row) return;
+        this._row.setAttribute('title', this.args.title as string);
+        this._row.setAttribute('subtitle', this.args.subtitle as string);
+        this._row.toggleAttribute('active', this.args.active as boolean);
+    }
+}
+
+export const SwitchRowWebStories: WebStoryModule = { stories: [SwitchRowWebStory] };

package/src/browser/stories.ts

@@ -0,0 +1,82 @@
+// Shared story list for the Adwaita storybook's browser target. Both the
+// standalone entry (`main.ts`, `mountStorybook(document.body, …)`) and the
+// embeddable `mount(container)` (`embed.ts`, used by the gjsify website) draw
+// from this single list so the two stay in lockstep.
+//
+// Order mirrors the native sidebar's category order (Presentation, Boxed
+// Lists, Buttons, …).
+
+import type { WebStoryModule } from '@gjsify/adwaita-storybook';
+import { AvatarWebStories } from './presentation/avatar.web.js';
+import { BannerWebStories } from './presentation/banner.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';
+import { ActionRowWebStories } from './rows/action-row.web.js';
+import { ButtonRowWebStories } from './rows/button-row.web.js';
+import { ComboRowWebStories } from './rows/combo-row.web.js';
+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 { SpinRowWebStories } from './rows/spin-row.web.js';
+import { SwitchRowWebStories } from './rows/switch-row.web.js';
+import { ButtonContentWebStories } from './buttons/button-content.web.js';
+import { ButtonStylesWebStories } from './buttons/button-styles.web.js';
+import { SplitButtonWebStories } from './buttons/split-button.web.js';
+import { ToggleGroupWebStories } from './buttons/toggle-group.web.js';
+import { ClampWebStories } from './layout/clamp.web.js';
+import { HeaderBarWebStories } from './layout/header-bar.web.js';
+import { ToolbarViewWebStories } from './layout/toolbar-view.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 { TabViewWebStories } from './view-switching/tab-view.web.js';
+import { ViewSwitcherWebStories } from './view-switching/view-switcher.web.js';
+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 { SidebarWebStories } from './navigation/sidebar.web.js';
+import { AboutDialogWebStories } from './feedback/about-dialog.web.js';
+import { AlertDialogWebStories } from './feedback/alert-dialog.web.js';
+import { PreferencesDialogWebStories } from './feedback/preferences-dialog.web.js';
+import { ToastWebStories } from './feedback/toast.web.js';
+
+export const stories: WebStoryModule[] = [
+    AvatarWebStories,
+    BannerWebStories,
+    SpinnerWebStories,
+    StatusPageWebStories,
+    WindowTitleWebStories,
+    ActionRowWebStories,
+    ButtonRowWebStories,
+    ComboRowWebStories,
+    EntryRowWebStories,
+    ExpanderRowWebStories,
+    PasswordEntryRowWebStories,
+    PreferencesGroupWebStories,
+    SpinRowWebStories,
+    SwitchRowWebStories,
+    ButtonContentWebStories,
+    ButtonStylesWebStories,
+    SplitButtonWebStories,
+    ToggleGroupWebStories,
+    ClampWebStories,
+    HeaderBarWebStories,
+    ToolbarViewWebStories,
+    WrapBoxWebStories,
+    CarouselWebStories,
+    InlineViewSwitcherWebStories,
+    TabViewWebStories,
+    ViewSwitcherWebStories,
+    BottomSheetWebStories,
+    NavigationSplitViewWebStories,
+    NavigationViewWebStories,
+    OverlaySplitViewWebStories,
+    SidebarWebStories,
+    AboutDialogWebStories,
+    AlertDialogWebStories,
+    PreferencesDialogWebStories,
+    ToastWebStories,
+];

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

@@ -0,0 +1,106 @@
+// Browser port of the Carousel stories — adw-carousel with three card pages,
+// paired with the dot / line page indicators. Shares its metadata/controls with
+// the GTK twin (carousel.story.ts). Adw.Carousel has two indicator widgets, so
+// this module exports two stories (Dots + Lines), mirroring the native file.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { carouselDotsMeta, carouselLinesMeta } from '../../view-switching/carousel.meta.js';
+
+// Subtle tints over the window background — libadwaita's .card.accent/.success/
+// .warning are a faint colour wash on the card, not a saturated fill.
+const PAGES: ReadonlyArray<{ title: string; accent: string }> = [
+    { title: 'Welcome', accent: 'color-mix(in srgb, var(--accent-bg-color) 14%, var(--window-bg-color))' },
+    { title: 'Discover', accent: 'color-mix(in srgb, #2ec27e 14%, var(--window-bg-color))' },
+    { title: 'Get started', accent: 'color-mix(in srgb, #e5a50a 14%, var(--window-bg-color))' },
+];
+
+let nextCarouselId = 0;
+
+/** Build a single accent-tinted card page, sized like the native demo. */
+function buildPage(title: string, accent: string): HTMLElement {
+    const card = document.createElement('adw-card');
+    card.style.cssText = [
+        'width:440px',
+        'height:260px',
+        'display:flex',
+        'align-items:center',
+        'justify-content:center',
+        `background-color:${accent}`,
+        'color:#ffffff',
+        'box-sizing:border-box',
+    ].join(';');
+
+    const label = document.createElement('span');
+    label.textContent = title;
+    // .title-1 in libadwaita ≈ 24pt bold.
+    label.style.cssText = 'font-size:24pt;font-weight:800;';
+    card.appendChild(label);
+    return card;
+}
+
+/** Shared body for both indicator variants — only the indicator tag differs. */
+abstract class CarouselWebStoryBase extends StoryElement {
+    private _carousel: HTMLElement | null = null;
+
+    /** The indicator tag this variant pairs with the carousel. */
+    protected abstract indicatorTag(): string;
+
+    initialize(): void {
+        const carousel = document.createElement('adw-carousel');
+        carousel.id = `adw-carousel-${nextCarouselId++}`;
+        carousel.style.cssText = 'width:480px;height:280px;';
+        carousel.toggleAttribute('allow-scroll-wheel', this.args.allowScrollWheel as boolean);
+        carousel.toggleAttribute('allow-long-swipes', this.args.allowLongSwipes as boolean);
+        for (const page of PAGES) {
+            carousel.appendChild(buildPage(page.title, page.accent));
+        }
+        this._carousel = carousel;
+
+        const indicator = document.createElement(this.indicatorTag());
+        indicator.setAttribute('for', carousel.id);
+
+        const box = document.createElement('div');
+        box.style.cssText = 'display:flex;flex-direction:column;gap:12px;width:480px;align-items:center;';
+        box.append(carousel, indicator);
+
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._carousel) return;
+        this._carousel.toggleAttribute('allow-scroll-wheel', this.args.allowScrollWheel as boolean);
+        this._carousel.toggleAttribute('allow-long-swipes', this.args.allowLongSwipes as boolean);
+    }
+}
+
+/** Story: adw-carousel with dot indicators. */
+export class CarouselDotsWebStory extends CarouselWebStoryBase {
+    constructor() {
+        super(CarouselDotsWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return carouselDotsMeta;
+    }
+
+    protected indicatorTag(): string {
+        return 'adw-carousel-indicator-dots';
+    }
+}
+
+/** Story: adw-carousel with line indicators. */
+export class CarouselLinesWebStory extends CarouselWebStoryBase {
+    constructor() {
+        super(CarouselLinesWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return carouselLinesMeta;
+    }
+
+    protected indicatorTag(): string {
+        return 'adw-carousel-indicator-lines';
+    }
+}
+
+export const CarouselWebStories: WebStoryModule = { stories: [CarouselDotsWebStory, CarouselLinesWebStory] };

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

@@ -0,0 +1,55 @@
+// Browser port of the Inline View Switcher story — adw-inline-view-switcher
+// driving a stack of three adw-view-stack-page children, with the display-mode
+// control (labels / icons / both). Shares its metadata/controls with the GTK
+// twin (inline-view-switcher.story.ts).
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { inlineViewSwitcherMeta } from '../../view-switching/inline-view-switcher.meta.js';
+
+// The three pages, mirroring the native demo (Overview / Activity / Settings).
+const PAGES: ReadonlyArray<{ id: string; title: string; icon: string; body: string }> = [
+    { id: 'overview', title: 'Overview', icon: 'view-grid', body: 'A quick summary of your project.' },
+    { id: 'activity', title: 'Activity', icon: 'document-edit', body: 'Recent edits and changes.' },
+    { id: 'settings', title: 'Settings', icon: 'emblem-system', body: 'Configure how things behave.' },
+];
+
+export class InlineViewSwitcherWebStory extends StoryElement {
+    private _switcher: HTMLElement | null = null;
+
+    constructor() {
+        super(InlineViewSwitcherWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return inlineViewSwitcherMeta;
+    }
+
+    initialize(): void {
+        const switcher = document.createElement('adw-inline-view-switcher');
+        for (const { id, title, icon, body } of PAGES) {
+            const page = document.createElement('adw-view-stack-page');
+            page.setAttribute('title', title);
+            page.setAttribute('icon-name', icon);
+
+            // A status-page body per page (mirrors the native Adw.StatusPage pages).
+            const status = document.createElement('adw-status-page');
+            status.id = id;
+            status.setAttribute('icon', icon);
+            status.setAttribute('title', title);
+            status.setAttribute('description', body);
+            page.appendChild(status);
+
+            switcher.appendChild(page);
+        }
+        switcher.setAttribute('display-mode', this.args.displayMode as string);
+        this._switcher = switcher;
+        this.addContent(switcher);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._switcher) return;
+        this._switcher.setAttribute('display-mode', this.args.displayMode as string);
+    }
+}
+
+export const InlineViewSwitcherWebStories: WebStoryModule = { stories: [InlineViewSwitcherWebStory] };

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

@@ -0,0 +1,64 @@
+// Browser port of the Tab View story — an adw-tab-view with three adw-tab-page
+// children, each holding an adw-status-page body, plus the autohide control.
+// Shares its metadata/controls with the GTK twin (tab-view.story.ts).
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { tabViewMeta } from '../../view-switching/tab-view.meta.js';
+
+const TABS: ReadonlyArray<{ title: string; body: string }> = [
+    { title: 'Overview', body: 'A summary of everything at a glance.' },
+    { title: 'Details', body: 'The specifics, broken down line by line.' },
+    { title: 'History', body: 'A log of every change made so far.' },
+];
+
+export class TabViewWebStory extends StoryElement {
+    private _tabView: HTMLElement | null = null;
+
+    constructor() {
+        super(TabViewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return tabViewMeta;
+    }
+
+    initialize(): void {
+        const tabView = document.createElement('adw-tab-view');
+        tabView.style.width = '480px';
+        tabView.style.height = '340px';
+
+        for (const tab of TABS) {
+            const page = document.createElement('adw-tab-page');
+            page.setAttribute('title', tab.title);
+            page.appendChild(this._buildPageBody(tab.title, tab.body));
+            tabView.appendChild(page);
+        }
+
+        this._tabView = tabView;
+        this._applyAutohide(this.args.autohide as boolean);
+        this.addContent(tabView);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._tabView) return;
+        this._applyAutohide(this.args.autohide as boolean);
+    }
+
+    // `view-grid` stands in for the native `view-paged-symbolic` — the closest
+    // icon in @gjsify/adwaita-icons.
+    private _buildPageBody(title: string, body: string): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', 'view-grid');
+        status.setAttribute('title', title);
+        status.setAttribute('description', body);
+        return status;
+    }
+
+    private _applyAutohide(autohide: boolean): void {
+        if (!this._tabView) return;
+        if (autohide) this._tabView.setAttribute('autohide', '');
+        else this._tabView.removeAttribute('autohide');
+    }
+}
+
+export const TabViewWebStories: WebStoryModule = { stories: [TabViewWebStory] };

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

@@ -0,0 +1,55 @@
+// Browser port of the View Switcher story — adw-view-switcher with three
+// adw-view-switcher-page children (each an adw-status-page body) and the
+// wide/narrow policy. Shares its metadata/controls with the GTK twin
+// (view-switcher.story.ts).
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { viewSwitcherMeta } from '../../view-switching/view-switcher.meta.js';
+
+// The three pages, mirroring the native demo (Inbox / Starred / Archive).
+const PAGES: ReadonlyArray<{ name: string; title: string; icon: string; description: string }> = [
+    { name: 'inbox', title: 'Inbox', icon: 'mail-unread', description: 'You have three unread conversations.' },
+    { name: 'starred', title: 'Starred', icon: 'starred', description: 'Messages you have marked as important.' },
+    { name: 'archive', title: 'Archive', icon: 'folder', description: 'Older conversations kept for reference.' },
+];
+
+export class ViewSwitcherWebStory extends StoryElement {
+    private _switcher: HTMLElement | null = null;
+
+    constructor() {
+        super(ViewSwitcherWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return viewSwitcherMeta;
+    }
+
+    initialize(): void {
+        const switcher = document.createElement('adw-view-switcher');
+        for (const { name, title, icon, description } of PAGES) {
+            const page = document.createElement('adw-view-switcher-page');
+            page.setAttribute('name', name);
+            page.setAttribute('title', title);
+            page.setAttribute('icon-name', icon);
+
+            const status = document.createElement('adw-status-page');
+            status.setAttribute('icon', icon);
+            status.setAttribute('title', title);
+            status.setAttribute('description', description);
+            page.appendChild(status);
+
+            switcher.appendChild(page);
+        }
+        switcher.setAttribute('policy', this.args.policy as string);
+        switcher.style.width = '480px';
+        this._switcher = switcher;
+        this.addContent(switcher);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._switcher) return;
+        this._switcher.setAttribute('policy', this.args.policy as string);
+    }
+}
+
+export const ViewSwitcherWebStories: WebStoryModule = { stories: [ViewSwitcherWebStory] };

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

@@ -0,0 +1,26 @@
+// Shared, renderer-agnostic metadata for the Button Content story. Imported by
+// both the GTK renderer (button-content.story.ts) and the browser renderer
+// (browser/buttons/button-content.web.ts) so the two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const buttonContentMeta: StoryMeta = {
+    title: 'Buttons/Button Content',
+    description: 'Adw.ButtonContent — pairs a symbolic icon with a label inside a Gtk.Button.',
+    controls: [
+        { name: 'label', label: 'Label', type: ControlType.TEXT, defaultValue: 'Download' },
+        {
+            name: 'iconName',
+            label: 'Icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Download', value: 'folder-download-symbolic' },
+                { label: 'Add', value: 'list-add-symbolic' },
+                { label: 'Send', value: 'mail-send-symbolic' },
+                { label: 'Star', value: 'starred-symbolic' },
+            ],
+            defaultValue: 'folder-download-symbolic',
+        },
+        { name: 'canShrink', label: 'Can shrink', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

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

@@ -0,0 +1,49 @@
+// Adw.ButtonContent — an icon-plus-label child for a Gtk.Button, with optional
+// shrinking. 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 { buttonContentMeta } from './button-content.meta.js';
+
+/** Story: Adw.ButtonContent placed inside a Gtk.Button. */
+export class ButtonContentStory extends StoryWidget {
+    private _content: Adw.ButtonContent | null = null;
+    private _button: Gtk.Button | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookButtonContent' }, ButtonContentStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ButtonContentStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...buttonContentMeta, component: Adw.ButtonContent.$gtype };
+    }
+
+    initialize(): void {
+        this._content = new Adw.ButtonContent({
+            label: this.args.label as string,
+            iconName: this.args.iconName as string,
+            canShrink: this.args.canShrink as boolean,
+        });
+        this._button = new Gtk.Button({ child: this._content });
+        this._button.add_css_class('suggested-action');
+        this._button.add_css_class('pill');
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._content) return;
+        this._content.label = this.args.label as string;
+        this._content.iconName = this.args.iconName as string;
+        this._content.canShrink = this.args.canShrink as boolean;
+    }
+}
+
+GObject.type_ensure(ButtonContentStory.$gtype);
+
+export const ButtonContentStories: StoryModule = { stories: [ButtonContentStory] };

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

@@ -0,0 +1,26 @@
+// Shared, renderer-agnostic metadata for the Button Styles story. Imported by
+// both the GTK renderer (button-styles.story.ts) and the browser renderer
+// (browser/buttons/button-styles.web.ts) so the two expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const buttonStylesMeta: StoryMeta = {
+    title: 'Buttons/Button Styles',
+    description: 'Buttons with Adwaita style classes: .pill, .circular, .suggested-action, .destructive-action, .flat.',
+    controls: [
+        { name: 'label', label: 'Demo label', type: ControlType.TEXT, defaultValue: 'Click me' },
+        {
+            name: 'style',
+            label: 'Demo style',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Pill', value: 'pill' },
+                { label: 'Circular (icon)', value: 'circular' },
+                { label: 'Suggested', value: 'suggested-action' },
+                { label: 'Destructive', value: 'destructive-action' },
+                { label: 'Flat', value: 'flat' },
+            ],
+            defaultValue: 'suggested-action',
+        },
+    ],
+};