@gjsify/adwaita-storybook 0.11.0

package/src/controls.ts

@@ -0,0 +1,190 @@
+// Control-row builders — render each @gjsify/stories ControlType as an
+// @gjsify/adwaita-web row, wired two-way to a StoryElement's args. The web
+// counterpart of StorybookWindow's _createControlRow family.
+//
+// All the per-kind value coercion (initial-value seeding, SELECT index↔value,
+// RANGE/NUMBER formatting + type guards, the refresh "set only if differs"
+// guard) now lives in @gjsify/storybook-core's bindControl. This file supplies
+// ONLY the adwaita-web leaf-widget factory — the single renderer seam.
+
+import type { StoryControl, StoryNumberControl, StorySelectControl } from '@gjsify/stories';
+import {
+    bindControl,
+    type ControlRow as CoreControlRow,
+    type ControlWidget,
+    type ControlWidgetFactory,
+} from '@gjsify/storybook-core';
+import type { StoryElement } from './story-element.js';
+
+/** A built control: the row element plus a refresher that re-syncs it from args. */
+export type ControlRow = CoreControlRow<HTMLElement>;
+
+/** Build the row for a single control, or null if it cannot be rendered. */
+export function createControlRow(story: StoryElement, control: StoryControl): ControlRow | null {
+    return bindControl(story, control, ADWAITA_WEB_FACTORY);
+}
+
+/**
+ * The @gjsify/adwaita-web leaf-widget factory — builds one `adw-*` (or range/
+ * color) element per control kind with get/set/onChange over the DOM events the
+ * widgets emit. The only renderer-specific seam; all coercion is in bindControl.
+ */
+const ADWAITA_WEB_FACTORY: ControlWidgetFactory<HTMLElement> = {
+    text(label: string): ControlWidget<HTMLElement, string> {
+        const row = document.createElement('adw-entry-row') as HTMLElement & { text: string };
+        row.setAttribute('title', label);
+        let cb: (v: string) => void = () => {};
+        row.addEventListener('changed', (e) => cb((e as CustomEvent<{ text: string }>).detail.text));
+        return {
+            node: row,
+            get: () => row.text ?? '',
+            set: (v) => {
+                row.text = v;
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+
+    color(label: string, desc: string | undefined): ControlWidget<HTMLElement, string> {
+        const row = document.createElement('adw-action-row');
+        row.setAttribute('title', label);
+        if (desc) row.setAttribute('subtitle', desc);
+
+        const input = document.createElement('input');
+        input.type = 'color';
+        input.className = 'sb-color-input';
+        input.slot = 'suffix';
+        row.appendChild(input);
+
+        let cb: (v: string) => void = () => {};
+        input.addEventListener('input', () => cb(input.value));
+        return {
+            node: row,
+            get: () => input.value,
+            set: (v) => {
+                input.value = v;
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+
+    boolean(label: string): ControlWidget<HTMLElement, boolean> {
+        const row = document.createElement('adw-switch-row');
+        row.setAttribute('title', label);
+        let cb: (v: boolean) => void = () => {};
+        row.addEventListener('notify::active', (e) => cb((e as CustomEvent<{ active: boolean }>).detail.active));
+        return {
+            node: row,
+            get: () => row.hasAttribute('active'),
+            set: (v) => {
+                row.toggleAttribute('active', v);
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+
+    number(control: StoryNumberControl): ControlWidget<HTMLElement, number> {
+        const row = document.createElement('adw-spin-row') as HTMLElement & { value: number };
+        row.setAttribute('title', label(control));
+        row.setAttribute('min', String(control.min ?? 0));
+        row.setAttribute('max', String(control.max ?? 100));
+        row.setAttribute('step', String(control.step ?? 1));
+        let cb: (v: number) => void = () => {};
+        row.addEventListener('notify::value', (e) => cb((e as CustomEvent<{ value: number }>).detail.value));
+        return {
+            node: row,
+            get: () => row.value ?? 0,
+            set: (v) => {
+                row.value = v;
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+
+    select(control: StorySelectControl): ControlWidget<HTMLElement, number> {
+        const options = control.options ?? [];
+        const row = document.createElement('adw-combo-row') as HTMLElement & { selected: number };
+        row.setAttribute('title', label(control));
+        row.setAttribute('items', JSON.stringify(options.map((o) => o.label)));
+        let cb: (v: number) => void = () => {};
+        row.addEventListener('notify::selected', (e) => cb((e as CustomEvent<{ selected: number }>).detail.selected));
+        return {
+            node: row,
+            get: () => row.selected ?? 0,
+            set: (v) => {
+                row.selected = v;
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+
+    range(control: StoryNumberControl): ControlWidget<HTMLElement, number> {
+        const min = control.min ?? 0;
+        const max = control.max ?? 100;
+        const step = control.step ?? 1;
+        const asInteger = Number.isInteger(step);
+        const format = (v: number): string => (asInteger ? String(Math.round(v)) : v.toFixed(2));
+
+        const row = document.createElement('div');
+        row.className = 'sb-range-row';
+
+        const header = document.createElement('div');
+        header.className = 'sb-range-header';
+        const titleEl = document.createElement('span');
+        titleEl.className = 'sb-range-title';
+        titleEl.textContent = label(control);
+        const valueEl = document.createElement('span');
+        valueEl.className = 'sb-range-value';
+        header.append(titleEl, valueEl);
+
+        const input = document.createElement('input');
+        input.type = 'range';
+        input.className = 'sb-range-input';
+        input.min = String(min);
+        input.max = String(max);
+        input.step = String(step);
+
+        if (control.description) {
+            const descEl = document.createElement('span');
+            descEl.className = 'sb-range-description';
+            descEl.textContent = control.description;
+            row.append(header, descEl, input);
+        } else {
+            row.append(header, input);
+        }
+
+        let cb: (v: number) => void = () => {};
+        input.addEventListener('input', () => {
+            const value = parseFloat(input.value);
+            valueEl.textContent = format(value);
+            cb(value);
+        });
+
+        return {
+            node: row,
+            get: () => parseFloat(input.value),
+            set: (v) => {
+                input.value = String(v);
+                valueEl.textContent = format(v);
+            },
+            onChange: (fn) => {
+                cb = fn;
+            },
+        };
+    },
+};
+
+/** A control's display label — explicit `label` else its `name`. */
+function label(control: StoryControl): string {
+    return control.label || control.name;
+}

package/src/controls2.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{bindControl as e}from"@gjsify/storybook-core";function createControlRow(n,r){return e(n,r,t)}const t={text(e){let t=document.createElement(`adw-entry-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`changed`,e=>cb(e.detail.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let n=document.createElement(`adw-action-row`);n.setAttribute(`title`,e),t&&n.setAttribute(`subtitle`,t);let r=document.createElement(`input`);r.type=`color`,r.className=`sb-color-input`,r.slot=`suffix`,n.appendChild(r);let cb=()=>{};return r.addEventListener(`input`,()=>cb(r.value)),{node:n,get:()=>r.value,set:e=>{r.value=e},onChange:e=>{cb=e}}},boolean(e){let t=document.createElement(`adw-switch-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`notify::active`,e=>cb(e.detail.active)),{node:t,get:()=>t.hasAttribute(`active`),set:e=>{t.toggleAttribute(`active`,e)},onChange:e=>{cb=e}}},number(e){let t=document.createElement(`adw-spin-row`);t.setAttribute(`title`,label(e)),t.setAttribute(`min`,String(e.min??0)),t.setAttribute(`max`,String(e.max??100)),t.setAttribute(`step`,String(e.step??1));let cb=()=>{};return t.addEventListener(`notify::value`,e=>cb(e.detail.value)),{node:t,get:()=>t.value??0,set:e=>{t.value=e},onChange:e=>{cb=e}}},select(e){let t=e.options??[],n=document.createElement(`adw-combo-row`);n.setAttribute(`title`,label(e)),n.setAttribute(`items`,JSON.stringify(t.map(e=>e.label)));let cb=()=>{};return n.addEventListener(`notify::selected`,e=>cb(e.detail.selected)),{node:n,get:()=>n.selected??0,set:e=>{n.selected=e},onChange:e=>{cb=e}}},range(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=Number.isInteger(r),format=e=>i?String(Math.round(e)):e.toFixed(2),a=document.createElement(`div`);a.className=`sb-range-row`;let o=document.createElement(`div`);o.className=`sb-range-header`;let s=document.createElement(`span`);s.className=`sb-range-title`,s.textContent=label(e);let c=document.createElement(`span`);c.className=`sb-range-value`,o.append(s,c);let l=document.createElement(`input`);if(l.type=`range`,l.className=`sb-range-input`,l.min=String(t),l.max=String(n),l.step=String(r),e.description){let t=document.createElement(`span`);t.className=`sb-range-description`,t.textContent=e.description,a.append(o,t,l)}else a.append(o,l);let cb=()=>{};return l.addEventListener(`input`,()=>{let e=parseFloat(l.value);c.textContent=format(e),cb(e)}),{node:a,get:()=>parseFloat(l.value),set:e=>{l.value=String(e),c.textContent=format(e)},onChange:e=>{cb=e}}}};function label(e){return e.label||e.name}export{createControlRow};

package/src/index.js

@@ -0,0 +1 @@
+import{createControlRow as e}from"./controls2.js";import{e as t,injectStorybookStyles as n}from"./styles2.js";import{StoryElement as r}from"./story-element2.js";import{e as i}from"./registry2.js";import{StorybookWebApp as a,mountStorybook as o}from"./app2.js";import{isWebStoryModule as s}from"./types2.js";import{ControlType as c,argsFromControls as l}from"@gjsify/stories";export{c as ControlType,t as STORYBOOK_WEB_CSS,r as StoryElement,i as StoryRegistry,a as StorybookWebApp,l as argsFromControls,e as createControlRow,n as injectStorybookStyles,s as isWebStoryModule,o as mountStorybook};

package/src/index.ts

@@ -0,0 +1,35 @@
+// @gjsify/adwaita-storybook — browser renderer for the @gjsify/stories contract.
+// The web counterpart of @gjsify/storybook: author *.web.ts files as
+// StoryElement subclasses and render them in a generic Adwaita component browser
+// built from @gjsify/adwaita-web, looking and behaving like the native GTK
+// storybook so the two targets can be screenshot-compared 1:1.
+//
+// A thin DOM adapter over @gjsify/storybook-core — the renderer-agnostic logic
+// (story base, registry, control binding, app controller) lives in core; this
+// package keeps only the @gjsify/adwaita-web view layer.
+
+// Re-export the renderer-agnostic authoring contract so a story only needs one
+// import (`@gjsify/adwaita-storybook`). The web-specific WebStoryModule /
+// WebStoryDecorator (which reference StoryElement) intentionally shadow the
+// generic ones from @gjsify/stories.
+export {
+    ControlType,
+    argsFromControls,
+    type StoryArgs,
+    type StoryArgValue,
+    type StoryBooleanControl,
+    type StoryColorControl,
+    type StoryControl,
+    type StoryMeta,
+    type StoryNumberControl,
+    type StorySelectControl,
+    type StorySelectOption,
+    type StoryTextControl,
+} from '@gjsify/stories';
+
+export { StoryElement, type StoryArgsListener } from './story-element.js';
+export { StoryRegistry } from './registry.js';
+export { createControlRow, type ControlRow } from './controls.js';
+export { StorybookWebApp, mountStorybook, type StorybookWebOptions, type StorySummary } from './app.js';
+export { STORYBOOK_WEB_CSS, injectStorybookStyles } from './styles.js';
+export { isWebStoryModule, type WebStoryConstructor, type WebStoryDecorator, type WebStoryModule } from './types.js';

package/src/registry.js

@@ -0,0 +1 @@
+import{StoryRegistry as e}from"@gjsify/storybook-core";export{e as StoryRegistry};

package/src/registry.ts

@@ -0,0 +1,8 @@
+// StoryRegistry — collects web story modules and instantiates their elements.
+//
+// The registration/instantiation logic (validate, filter, decorator reduceRight
+// fold over initialize()) is renderer-agnostic and now lives in
+// @gjsify/storybook-core. This file just re-exports the generic class; callers
+// type it as `StoryRegistry<StoryElement>`.
+
+export { StoryRegistry } from '@gjsify/storybook-core';

package/src/registry2.js

@@ -0,0 +1 @@
+import{StoryRegistry as e}from"@gjsify/storybook-core";export{e};

package/src/story-element.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";import{StoryViewBase as e}from"@gjsify/storybook-core";var StoryElement=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get element(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=document.createElement(`div`);e.className=`sb-story-page`;let t=document.createElement(`div`);t.className=`sb-story-clamp`;let n=document.createElement(`div`);n.className=`sb-story-group`;let r=document.createElement(`div`);r.className=`sb-story-group-header`;let i=document.createElement(`span`);i.className=`sb-story-group-title`;let a=document.createElement(`span`);a.className=`sb-story-group-description`,r.append(i,a);let o=document.createElement(`div`);return o.className=`story-stage`,n.append(r,o),t.append(n),e.append(t),{root:e,hasStage:!0,setStageContent:e=>o.replaceChildren(e),setChromeText:(e,t)=>{i.textContent=e,a.textContent=t,a.hidden=t.length===0}}}};export{StoryElement};

package/src/story-element.ts

@@ -0,0 +1,100 @@
+// StoryElement — base class for browser story implementations. The web
+// counterpart of @gjsify/storybook's StoryWidget (which extends Adw.Bin): it
+// builds DOM with @gjsify/adwaita-web components instead of GTK widgets, but
+// exposes the same authoring surface (getMetadata, initialize, updateArgs,
+// teardown, addContent, meta/story/args) so a story is a near-1:1 port of its
+// GTK twin and the two render identically.
+//
+// Thin DOM adapter over @gjsify/storybook-core's StoryViewBase: the
+// renderer-agnostic state (meta/story/args, onArgsChanged/setArg, the
+// initialize/updateArgs/teardown/addContent surface) lives in the base; this
+// class supplies ONLY the @gjsify/adwaita-web DOM chrome via createChrome().
+
+import type { StoryArgs, StoryMeta } from '@gjsify/stories';
+import { type StoryChrome, StoryViewBase } from '@gjsify/storybook-core';
+
+/** Notified whenever a story's args change (the controls panel re-syncs through this). */
+export type StoryArgsListener = (args: StoryArgs) => void;
+
+/**
+ * Base class for browser story elements.
+ *
+ * Provides default chrome — a clamped boxed group with a title + description
+ * above a centered, dashed-framed preview stage — built programmatically. Simple
+ * stories compose their preview by calling {@link addContent}; a subclass that
+ * needs a bespoke layout passes its own root element to the constructor (then
+ * {@link addContent} is a no-op).
+ */
+export class StoryElement extends StoryViewBase<HTMLElement> {
+    /**
+     * @param meta       The story's metadata (the same renderer-agnostic object
+     *                   its GTK twin uses).
+     * @param story      Variant name (defaults to "Default").
+     * @param customRoot Opt out of the default chrome by supplying a root element.
+     */
+    constructor(meta: StoryMeta, story = 'Default', customRoot?: HTMLElement) {
+        super();
+        this.initBase(meta, story, customRoot);
+    }
+
+    /**
+     * The root node inserted into the storybook's preview area. Alias for the
+     * base's {@link root} getter — kept because consumers reference `.element`.
+     */
+    get element(): HTMLElement {
+        return this.root;
+    }
+
+    /** Build the @gjsify/adwaita-web DOM chrome — the single renderer seam. */
+    protected createChrome(_meta: StoryMeta, customRoot?: HTMLElement): StoryChrome<HTMLElement> {
+        if (customRoot) {
+            return {
+                root: customRoot,
+                hasStage: false,
+                setStageContent: () => {},
+                setChromeText: () => {},
+            };
+        }
+        return this._installDefaultChrome();
+    }
+
+    private _installDefaultChrome(): StoryChrome<HTMLElement> {
+        const page = document.createElement('div');
+        page.className = 'sb-story-page';
+
+        const clamp = document.createElement('div');
+        clamp.className = 'sb-story-clamp';
+
+        const group = document.createElement('div');
+        group.className = 'sb-story-group';
+
+        const header = document.createElement('div');
+        header.className = 'sb-story-group-header';
+        const titleEl = document.createElement('span');
+        titleEl.className = 'sb-story-group-title';
+        const descEl = document.createElement('span');
+        descEl.className = 'sb-story-group-description';
+        header.append(titleEl, descEl);
+
+        // Subtle dashed frame so the preview's bounds stay locatable even when
+        // the widget is transparent or in an empty state (mirrors the native
+        // .story-stage in @gjsify/storybook).
+        const stage = document.createElement('div');
+        stage.className = 'story-stage';
+
+        group.append(header, stage);
+        clamp.append(group);
+        page.append(clamp);
+
+        return {
+            root: page,
+            hasStage: true,
+            setStageContent: (child) => stage.replaceChildren(child),
+            setChromeText: (title, description) => {
+                titleEl.textContent = title;
+                descEl.textContent = description;
+                descEl.hidden = description.length === 0;
+            },
+        };
+    }
+}

package/src/story-element2.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{StoryViewBase as e}from"@gjsify/storybook-core";var StoryElement=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get element(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=document.createElement(`div`);e.className=`sb-story-page`;let t=document.createElement(`div`);t.className=`sb-story-clamp`;let n=document.createElement(`div`);n.className=`sb-story-group`;let r=document.createElement(`div`);r.className=`sb-story-group-header`;let i=document.createElement(`span`);i.className=`sb-story-group-title`;let a=document.createElement(`span`);a.className=`sb-story-group-description`,r.append(i,a);let o=document.createElement(`div`);return o.className=`story-stage`,n.append(r,o),t.append(n),e.append(t),{root:e,hasStage:!0,setStageContent:e=>o.replaceChildren(e),setChromeText:(e,t)=>{i.textContent=e,a.textContent=t,a.hidden=t.length===0}}}};export{StoryElement};

package/src/styles.js

@@ -0,0 +1,198 @@
+import"./_virtual/_rolldown/runtime.js";const e=`
+.sb-window {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+/* Each pane in the outer split view is a flex column that fills its height. */
+.sb-sidebar-pane,
+.sb-content-pane {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+/* The toolbar-view content holds either a scroller (sidebar) or the split view
+   (content); the inner panes own the scrolling, so this level never scrolls. */
+.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,
+.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {
+    overflow: hidden;
+}
+
+/* Background scheme: the content header + preview + controls all sit on the
+   window (story) background as one surface; only the left story-list column
+   (its header + list) keeps the distinct sidebar shade. Matches the native
+   renderer. The default adw-header-bar background is its own headerbar shade,
+   so override it per pane here. */
+.sb-content-pane adw-header-bar {
+    background-color: var(--window-bg-color);
+}
+.sb-sidebar-pane adw-header-bar {
+    background-color: var(--sidebar-bg-color);
+}
+
+.sb-sidebar-scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    background-color: var(--sidebar-bg-color);
+}
+
+/* --- Story list (mirrors GTK .navigation-sidebar) --- */
+.sb-sidebar-list {
+    padding: var(--spacing-xs);
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.sb-category {
+    font-size: var(--font-size-small);
+    font-weight: 700;
+    opacity: var(--dim-opacity);
+    padding: 10px var(--spacing-m) 4px;
+}
+
+.sb-story-row {
+    padding: var(--spacing-xs) var(--spacing-m);
+    margin: 0 var(--spacing-xs);
+    border-radius: var(--button-radius);
+    cursor: pointer;
+    color: var(--window-fg-color);
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sb-story-row:hover {
+    background-color: var(--button-bg-color);
+}
+
+.sb-story-row.selected {
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+}
+
+/* --- Preview area --- */
+.sb-preview-scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+    background-color: var(--window-bg-color);
+}
+
+.sb-story-page {
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-xl) var(--spacing-m);
+    min-height: 100%;
+    box-sizing: border-box;
+}
+
+.sb-story-clamp {
+    width: 100%;
+    max-width: 600px;
+}
+
+.sb-story-group-header {
+    padding: var(--spacing-xs) 2px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.sb-story-group-title {
+    font-size: var(--font-size-heading);
+    font-weight: 700;
+    color: var(--window-fg-color);
+}
+
+.sb-story-group-description {
+    font-size: var(--font-size-base);
+    opacity: var(--dim-opacity);
+    color: var(--window-fg-color);
+}
+
+/* Centered, dashed-framed preview stage (mirrors the native .story-stage). */
+.story-stage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-l);
+    margin-top: var(--spacing-s);
+    border: 1px dashed rgba(127, 127, 127, 0.28);
+    border-radius: var(--card-radius);
+    min-height: 80px;
+}
+
+/* --- Controls panel --- */
+.sb-controls-scroll {
+    height: 100%;
+    overflow-y: auto;
+    background-color: var(--window-bg-color);
+}
+
+.sb-controls-page {
+    padding: var(--spacing-l);
+}
+
+/* Range-control card (mirrors the native .story-range-row). */
+.sb-range-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-m);
+    border-bottom: 1px solid var(--card-shade-color);
+}
+
+.sb-range-row:last-child {
+    border-bottom: none;
+}
+
+.sb-range-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--spacing-m);
+}
+
+.sb-range-title {
+    font-size: var(--font-size-base);
+    font-weight: 700;
+    color: var(--card-fg-color);
+}
+
+.sb-range-value {
+    font-size: var(--font-size-base);
+    font-variant-numeric: tabular-nums;
+    opacity: var(--dim-opacity);
+}
+
+.sb-range-description {
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+}
+
+.sb-range-input {
+    width: 100%;
+    accent-color: var(--accent-bg-color);
+}
+
+.sb-color-input {
+    width: 42px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--card-shade-color);
+    border-radius: var(--button-radius);
+    background: none;
+    cursor: pointer;
+}
+`;let t=!1;function injectStorybookStyles(){if(t||typeof document>`u`)return;if(document.getElementById(`adwaita-storybook-style`)){t=!0;return}let n=document.createElement(`style`);n.id=`adwaita-storybook-style`,n.textContent=e,document.head.appendChild(n),t=!0}export{e as STORYBOOK_WEB_CSS,injectStorybookStyles};