agnosticui-cli 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/utils/stories.js

@@ -2,9 +2,15 @@
 // Component classification sets
 // ---------------------------------------------------------------------------
 const TEXT_CHILD_COMPONENTS = new Set([
-    'Alert', 'Badge', 'BadgeFx', 'Button', 'ButtonFx', 'Card',
+    'Alert', 'Badge', 'Button', 'Card',
     'Kbd', 'Link', 'Mark', 'MessageBubble', 'Tag',
 ]);
+// Components with non-standard Vue file naming (exported via index.ts)
+const VUE_INDEX_EXPORTS = {
+    Timeline: 'VueTimeline',
+};
+// Components that have Fx animation props
+const FX_COMPONENTS = new Set(['BadgeFx', 'ButtonFx', 'IconButtonFx']);
 // Components with an `open` prop that are invisible until triggered
 const OPEN_CONTROLLED_COMPONENTS = new Set([
     'Dialog', 'Drawer', 'Toast', 'Collapsible',
@@ -14,6 +20,15 @@ const REQUIRED_ARRAY_COMPONENTS = new Set([
     'Combobox',
 ]);
 // ---------------------------------------------------------------------------
+// Shared header prepended to every auto-generated file
+// ---------------------------------------------------------------------------
+const STORY_FILE_HEADER = `// ================================================================
+// AUTO-GENERATED by agnosticui-cli: do not edit by hand.
+// Run: npx agnosticui-cli storybook --force   to regenerate
+// To keep customizations: copy to <ComponentName>.stories.custom.*
+// ================================================================
+`;
+// ---------------------------------------------------------------------------
 // Storybook config generators
 // ---------------------------------------------------------------------------
 export function generateStorybookMain(framework) {
@@ -31,7 +46,22 @@ export function generateStorybookMain(framework) {
         frameworkPkg = '@storybook/web-components-vite';
         storybookImportType = '@storybook/web-components-vite';
     }
-    return `import type { StorybookConfig } from '${storybookImportType}';
+    // Vue: pass isCustomElement via framework.options so ag-* tags aren't treated as unresolved Vue components
+    const frameworkConfig = framework === 'vue'
+        ? `{
+    name: '${frameworkPkg}',
+    options: {
+      vuePluginOptions: {
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag: string) => tag.startsWith('ag-'),
+          },
+        },
+      },
+    },
+  }`
+        : `'${frameworkPkg}'`;
+    return STORY_FILE_HEADER + `import type { StorybookConfig } from '${storybookImportType}';
 import type { InlineConfig } from 'vite';
 
 const config: StorybookConfig = {
@@ -43,7 +73,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
   ],
-  framework: '${frameworkPkg}',
+  framework: ${frameworkConfig},
   async viteFinal(config): Promise<InlineConfig> {
     // Remove noDiscovery so Storybook can pre-bundle its own dependencies.
     // The main app uses noDiscovery for performance, but Storybook needs discovery on.
@@ -70,7 +100,7 @@ export function generateStorybookPreview(framework, componentsRelPath) {
     // componentsRelPath is relative from .storybook/ to src/components/ag
     // The CSS imports in preview.ts are relative to .storybook/
     const cssPath = `${componentsRelPath}/styles`;
-    return `import type { Preview } from '${previewImportPkg}';
+    return STORY_FILE_HEADER + `import type { Preview } from '${previewImportPkg}';
 import '${cssPath}/ag-tokens.css';
 import '${cssPath}/ag-tokens-dark.css';
 
@@ -91,6 +121,19 @@ const preview: Preview = {
 export default preview;
 `;
 }
+export function generateStorybookManager() {
+    return STORY_FILE_HEADER + `import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming/create';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'AgnosticUI: Auto-generated stories (run: ag storybook --force to regenerate)',
+  brandUrl: 'https://github.com/AgnosticUI/agnosticui',
+});
+
+addons.setConfig({ theme });
+`;
+}
 // ---------------------------------------------------------------------------
 // argTypes registry
 // ---------------------------------------------------------------------------
@@ -130,6 +173,45 @@ const ARGTYPES = {
     },
     dot: { control: 'boolean' },
     interactive: { control: 'boolean' },
+  },`,
+    BadgeFx: `  argTypes: {
+    fx: {
+      control: 'select',
+      options: ['bounce', 'pulse', 'jelly'],
+    },
+    fxSpeed: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    fxEase: {
+      control: 'select',
+      options: ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'bounce', 'spring-sm', 'spring-md', 'spring-lg'],
+    },
+    fxDisabled: { control: 'boolean' },
+  },`,
+    ButtonFx: `  argTypes: {
+    fx: {
+      control: 'select',
+      options: ['bounce', 'pulse', 'jelly', 'shake', 'pulse-wobble'],
+    },
+    fxSpeed: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    fxEase: {
+      control: 'select',
+      options: ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'bounce', 'spring-sm', 'spring-md', 'spring-lg'],
+    },
+    fxDisabled: { control: 'boolean' },
+    variant: {
+      control: 'select',
+      options: ['', 'primary', 'secondary', 'success', 'warning', 'danger', 'monochrome'],
+    },
+    size: {
+      control: 'select',
+      options: ['x-sm', 'sm', 'md', 'lg', 'xl'],
+    },
+    disabled: { control: 'boolean' },
   },`,
     Button: `  argTypes: {
     variant: {
@@ -363,10 +445,12 @@ const DEFAULT_ARGS = {
     children: '5',
   },`,
     BadgeFx: `  args: {
+    fx: 'bounce',
     children: 'BadgeFx',
   },`,
     ButtonFx: `  args: {
-    children: 'ButtonFx',
+    fx: 'bounce',
+    children: 'Click me',
   },`,
     Card: `  args: {
     children: 'Card content goes here.',
@@ -489,9 +573,247 @@ export const Disabled: Story = {
     return '';
 }
 // ---------------------------------------------------------------------------
+// React story overrides — components that need rich custom content
+// ---------------------------------------------------------------------------
+const REACT_STORY_OVERRIDES = {
+    Sidebar: `import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ReactSidebar } from './ReactSidebar';
+import {
+  ReactSidebarNav,
+  ReactSidebarNavItem,
+  ReactSidebarNavSubmenu,
+  ReactSidebarNavPopoverSubmenu,
+} from '../../SidebarNav/react/index';
+import { ReactPopover } from '../../Popover/react/ReactPopover';
+
+const HomeIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+    <polyline points="9 22 9 12 15 12 15 22"/>
+  </svg>
+);
+const FolderIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+  </svg>
+);
+const UsersIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+    <circle cx="9" cy="7" r="4"/>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+  </svg>
+);
+const SettingsIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="3"/>
+    <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+  </svg>
+);
+const ChevronRightIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="9 18 15 12 9 6"/>
+  </svg>
+);
+
+const NAV_CSS = \`
+  .nav-button {
+    display: flex;
+    align-items: center;
+    gap: var(--ag-space-3);
+    position: relative;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    border: none;
+    background: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+    color: inherit;
+  }
+  .nav-button svg { flex-shrink: 0; }
+  .nav-button:hover { background: var(--ag-background-secondary); }
+  .nav-button.active {
+    background: var(--ag-primary-background);
+    color: var(--ag-primary-text);
+    font-weight: 500;
+  }
+  .nav-label {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+  }
+  .chevron {
+    display: flex;
+    align-items: center;
+    transition: transform var(--ag-fx-duration-md), opacity var(--ag-fx-duration-sm);
+    margin-left: auto;
+  }
+  .nav-button[aria-expanded="true"] .chevron { transform: rotate(90deg); }
+  ag-sidebar[collapsed] .nav-label,
+  ag-sidebar[collapsed] .chevron {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+  }
+  ag-sidebar[collapsed] .nav-button {
+    width: auto;
+    padding: var(--ag-space-2);
+  }
+  ag-sidebar[collapsed] ag-sidebar-nav-submenu:not(.popover-submenu),
+  ag-sidebar:not([collapsed]) ag-popover,
+  ag-sidebar[collapsed] .nav-button-expanded,
+  ag-sidebar:not([collapsed]) .nav-button-collapsed {
+    display: none !important;
+  }
+  ag-sidebar[collapsed] ag-popover.nav-button-collapsed {
+    display: block !important;
+  }
+  ag-sidebar-nav-submenu {
+    display: none;
+    overflow: hidden;
+  }
+  ag-sidebar-nav-submenu[open] {
+    display: block;
+  }
+  .nav-sublink {
+    display: block;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+  }
+  .nav-sublink:hover { background: var(--ag-background-secondary); }
+  .nav-button-collapsed::part(ag-popover-body) { padding: var(--ag-space-1); }
+\`;
+
+function handleSubmenuToggle(e: React.MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  const button = e.currentTarget as HTMLElement;
+  const navItem = button.closest('ag-sidebar-nav-item');
+  const submenu = navItem?.querySelector('ag-sidebar-nav-submenu');
+  if (!submenu) return;
+  const isExpanded = button.getAttribute('aria-expanded') === 'true';
+  button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+  if (isExpanded) submenu.removeAttribute('open');
+  else submenu.setAttribute('open', '');
+}
+
+function SidebarDemo({ initialCollapsed = false, variant = 'default' }: { initialCollapsed?: boolean; variant?: string }) {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  return (
+    <>
+      <style>{NAV_CSS}</style>
+      <div style={{ position: 'relative', display: 'flex', height: '500px', border: '1px solid var(--ag-border-color)', borderRadius: '0.5rem', overflow: 'hidden', contain: 'layout' as any }}>
+        <ReactSidebar collapsed={collapsed} variant={variant as any} aria-label="Main navigation" showMobileToggle>
+          <h2 slot="ag-header-start" style={{ margin: 0, fontSize: '1.125rem', fontWeight: 600 }}>Dashboard</h2>
+          <button
+            type="button"
+            slot="ag-header-toggle"
+            onClick={() => setCollapsed(c => !c)}
+            style={{ background: 'none', border: 'none', padding: '8px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'inherit' }}
+            aria-label="Toggle sidebar"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
+              <path d="M9 3v18"/>
+            </svg>
+          </button>
+          <ReactSidebarNav>
+            <ReactSidebarNavItem>
+              <button type="button" className="nav-button active" aria-current="page">
+                <HomeIcon /><span className="nav-label">Dashboard</span>
+              </button>
+            </ReactSidebarNavItem>
+            <ReactSidebarNavItem>
+              <button type="button" className="nav-button nav-button-expanded" aria-expanded="false" onClick={handleSubmenuToggle}>
+                <FolderIcon /><span className="nav-label">Projects</span>
+                <span className="chevron"><ChevronRightIcon /></span>
+              </button>
+              <ReactPopover className="nav-button-collapsed" placement="right-start" triggerType="click" distance={8} arrow={true}>
+                <button slot="trigger" type="button" className="nav-button"><FolderIcon /></button>
+                <ReactSidebarNavPopoverSubmenu slot="content">
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Project Alpha</a>
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Project Beta</a>
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Project Gamma</a>
+                </ReactSidebarNavPopoverSubmenu>
+              </ReactPopover>
+              <ReactSidebarNavSubmenu>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Project Alpha</a>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Project Beta</a>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Project Gamma</a>
+              </ReactSidebarNavSubmenu>
+            </ReactSidebarNavItem>
+            <ReactSidebarNavItem>
+              <button type="button" className="nav-button">
+                <UsersIcon /><span className="nav-label">Team</span>
+              </button>
+            </ReactSidebarNavItem>
+            <ReactSidebarNavItem>
+              <button type="button" className="nav-button nav-button-expanded" aria-expanded="false" onClick={handleSubmenuToggle}>
+                <SettingsIcon /><span className="nav-label">Settings</span>
+                <span className="chevron"><ChevronRightIcon /></span>
+              </button>
+              <ReactPopover className="nav-button-collapsed" placement="right-start" triggerType="click" distance={8} arrow={true}>
+                <button slot="trigger" type="button" className="nav-button"><SettingsIcon /></button>
+                <ReactSidebarNavPopoverSubmenu slot="content">
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Profile</a>
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Billing</a>
+                  <a href="#" className="nav-sublink" onClick={e => e.preventDefault()}>Security</a>
+                </ReactSidebarNavPopoverSubmenu>
+              </ReactPopover>
+              <ReactSidebarNavSubmenu>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Profile</a>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Billing</a>
+                <a className="nav-sublink" href="#" onClick={e => e.preventDefault()}>Security</a>
+              </ReactSidebarNavSubmenu>
+            </ReactSidebarNavItem>
+          </ReactSidebarNav>
+          <div slot="ag-footer" style={{ fontSize: '0.875rem', color: 'var(--ag-text-secondary)' }}>
+            © 2024 Company
+          </div>
+        </ReactSidebar>
+        <main style={{ flex: 1, padding: '2rem', overflow: 'auto', background: 'var(--ag-background)' }}>
+          <h1 style={{ marginTop: 0 }}>Main Content</h1>
+          <p>Click the header toggle to collapse the sidebar into rail mode.</p>
+          <p>When collapsed, click icon-only items with submenus to see them in popovers.</p>
+        </main>
+      </div>
+    </>
+  );
+}
+
+const meta = {
+  title: 'AgnosticUI/Sidebar',
+  component: ReactSidebar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof ReactSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: () => <SidebarDemo /> };
+export const Collapsed: Story = { render: () => <SidebarDemo initialCollapsed={true} /> };
+export const Elevated: Story = { render: () => <SidebarDemo variant="elevated" /> };
+`,
+};
+// ---------------------------------------------------------------------------
 // Per-component story generator (React only)
 // ---------------------------------------------------------------------------
 export function generateReactStory(name) {
+    if (REACT_STORY_OVERRIDES[name]) {
+        return STORY_FILE_HEADER + REACT_STORY_OVERRIDES[name];
+    }
     const lines = [];
     // Imports
     lines.push(`import type { Meta, StoryObj } from '@storybook/react';`);
@@ -656,6 +978,2896 @@ export function generateReactStory(name) {
     if (extras) {
         lines.push(extras);
     }
-    return lines.join('\n') + '\n';
+    return STORY_FILE_HEADER + lines.join('\n') + '\n';
+}
+// ---------------------------------------------------------------------------
+// Vue story overrides — full story content for components needing special handling
+// ---------------------------------------------------------------------------
+const VUE_STORY_OVERRIDES = {
+    Breadcrumb: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueBreadcrumb from './VueBreadcrumb.vue';
+
+const ITEMS = [
+  { label: 'Home', href: '#', isCurrent: false },
+  { label: 'Category', href: '#', isCurrent: false },
+  { label: 'Current Page', href: '#', isCurrent: true },
+];
+
+const meta = {
+  title: 'AgnosticUI/Breadcrumb',
+  component: VueBreadcrumb,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['default', 'slash', 'bullet', 'arrow'],
+    },
+  },
+  args: { items: ITEMS, type: 'default' },
+  render: (args: any) => ({
+    components: { VueBreadcrumb },
+    setup() { return { args }; },
+    template: '<VueBreadcrumb v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Slash: Story = { args: { type: 'slash' } };
+export const Arrow: Story = { args: { type: 'arrow' } };
+`,
+    Flex: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueFlexRow from './VueFlexRow.vue';
+
+const meta = {
+  title: 'AgnosticUI/Flex',
+  component: VueFlexRow,
+  tags: ['autodocs'],
+  argTypes: {
+    justify: {
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+    },
+    wrap: {
+      control: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+    },
+    align: {
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+    },
+  },
+  render: (args: any) => ({
+    components: { VueFlexRow },
+    setup() { return { args }; },
+    template: \`
+      <VueFlexRow v-bind="args" style="--flex-gap: 1rem">
+        <div style="padding:1rem;background:#e0e7ff;border:1px solid #6366f1">Item 1</div>
+        <div style="padding:1rem;background:#dbeafe;border:1px solid #3b82f6">Item 2</div>
+        <div style="padding:1rem;background:#ddd6fe;border:1px solid #8b5cf6">Item 3</div>
+      </VueFlexRow>
+    \`,
+  }),
+} satisfies Meta<typeof VueFlexRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Centered: Story = { args: { justify: 'center' } };
+export const SpaceBetween: Story = { args: { justify: 'space-between' } };
+`,
+    Header: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueHeader from './VueHeader.vue';
+
+const meta = {
+  title: 'AgnosticUI/Header',
+  component: VueHeader,
+  tags: ['autodocs'],
+  argTypes: {
+    sticky: { control: 'boolean' },
+    contentJustify: {
+      control: 'select',
+      options: ['start', 'end', 'between', 'around', 'center'],
+    },
+  },
+  args: { sticky: false, contentJustify: 'between' },
+  render: (args: any) => ({
+    components: { VueHeader },
+    setup() { return { args }; },
+    template: \`
+      <VueHeader v-bind="args">
+        <template #logo>
+          <a href="#" style="text-decoration:none;font-weight:700;font-size:1.25rem">AgnosticUI</a>
+        </template>
+        <nav>
+          <ul style="display:flex;gap:1.5rem;list-style:none;margin:0;padding:0">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </VueHeader>
+    \`,
+  }),
+} satisfies Meta<typeof VueHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+`,
+    Icon: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueIcon from './VueIcon.vue';
+import { defineComponent, h } from 'vue';
+
+const StarIcon = defineComponent({
+  render() {
+    return h('svg', { width: '1em', height: '1em', viewBox: '0 0 24 24', fill: 'currentColor' }, [
+      h('path', { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }),
+    ]);
+  },
+});
+
+const meta = {
+  title: 'AgnosticUI/Icon',
+  component: VueIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['14', '16', '18', '20', '24', '32', '36', '48'],
+    },
+    type: {
+      control: 'select',
+      options: ['', 'info', 'action', 'success', 'warning', 'error'],
+    },
+    noFill: { control: 'boolean' },
+  },
+  args: { size: '24', type: '' },
+  render: (args: any) => ({
+    components: { VueIcon, StarIcon },
+    setup() { return { args }; },
+    template: '<VueIcon v-bind="args" no-fill><StarIcon /></VueIcon>',
+  }),
+} satisfies Meta<typeof VueIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Types: Story = {
+  render: () => ({
+    components: { VueIcon, StarIcon },
+    template: \`
+      <div style="display:flex;gap:1rem;align-items:center">
+        <VueIcon no-fill><StarIcon /></VueIcon>
+        <VueIcon type="info" no-fill><StarIcon /></VueIcon>
+        <VueIcon type="success" no-fill><StarIcon /></VueIcon>
+        <VueIcon type="warning" no-fill><StarIcon /></VueIcon>
+        <VueIcon type="error" no-fill><StarIcon /></VueIcon>
+      </div>
+    \`,
+  }),
+};
+export const Sizes: Story = {
+  render: () => ({
+    components: { VueIcon, StarIcon },
+    template: \`
+      <div style="display:flex;gap:1rem;align-items:center">
+        <VueIcon size="16" no-fill><StarIcon /></VueIcon>
+        <VueIcon size="20" no-fill><StarIcon /></VueIcon>
+        <VueIcon size="24" no-fill><StarIcon /></VueIcon>
+        <VueIcon size="32" no-fill><StarIcon /></VueIcon>
+        <VueIcon size="48" no-fill><StarIcon /></VueIcon>
+      </div>
+    \`,
+  }),
+};
+`,
+    IconButton: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueIconButton from './VueIconButton.vue';
+
+const meta = {
+  title: 'AgnosticUI/IconButton',
+  component: VueIconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'ghost', 'monochrome'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    label: { control: 'text' },
+    unicode: { control: 'text' },
+  },
+  args: { label: 'Action', unicode: '★', size: 'md', variant: 'primary' },
+  render: (args: any) => ({
+    components: { VueIconButton },
+    setup() { return { args }; },
+    template: '<VueIconButton v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueIconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => ({
+    components: { VueIconButton },
+    template: \`
+      <div style="display:flex;gap:8px;flex-wrap:wrap">
+        <VueIconButton label="Primary" unicode="★" variant="primary" />
+        <VueIconButton label="Secondary" unicode="★" variant="secondary" />
+        <VueIconButton label="Success" unicode="★" variant="success" />
+        <VueIconButton label="Danger" unicode="★" variant="danger" />
+        <VueIconButton label="Ghost" unicode="★" variant="ghost" />
+      </div>
+    \`,
+  }),
+};
+export const Sizes: Story = {
+  render: () => ({
+    components: { VueIconButton },
+    template: \`
+      <div style="display:flex;gap:8px;align-items:center">
+        <VueIconButton label="XS" unicode="★" size="xs" variant="primary" />
+        <VueIconButton label="SM" unicode="★" size="sm" variant="primary" />
+        <VueIconButton label="MD" unicode="★" size="md" variant="primary" />
+        <VueIconButton label="LG" unicode="★" size="lg" variant="primary" />
+        <VueIconButton label="XL" unicode="★" size="xl" variant="primary" />
+      </div>
+    \`,
+  }),
+};
+`,
+    IconButtonFx: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueIconButtonFx from './VueIconButtonFx.vue';
+import { defineComponent, h } from 'vue';
+
+const HeartIcon = defineComponent({
+  render() {
+    return h('svg', { width: '1em', height: '1em', viewBox: '0 0 24 24', fill: 'currentColor' }, [
+      h('path', { d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' }),
+    ]);
+  },
+});
+
+const meta = {
+  title: 'AgnosticUI/IconButtonFx',
+  component: VueIconButtonFx,
+  tags: ['autodocs'],
+  argTypes: {
+    fx: {
+      control: 'select',
+      options: ['bounce', 'pulse', 'jelly', 'shake', 'pulse-wobble'],
+    },
+    fxSpeed: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    fxDisabled: { control: 'boolean' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'ghost', 'monochrome'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+  },
+  args: { fx: 'bounce', label: 'Like', size: 'md', variant: 'primary' },
+  render: (args: any) => ({
+    components: { VueIconButtonFx, HeartIcon },
+    setup() { return { args }; },
+    template: '<VueIconButtonFx v-bind="args"><HeartIcon /></VueIconButtonFx>',
+  }),
+} satisfies Meta<typeof VueIconButtonFx>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => ({
+    components: { VueIconButtonFx, HeartIcon },
+    template: \`
+      <div style="display:flex;gap:8px;flex-wrap:wrap">
+        <VueIconButtonFx fx="bounce" label="Primary" variant="primary"><HeartIcon /></VueIconButtonFx>
+        <VueIconButtonFx fx="pulse" label="Secondary" variant="secondary"><HeartIcon /></VueIconButtonFx>
+        <VueIconButtonFx fx="jelly" label="Ghost" variant="ghost"><HeartIcon /></VueIconButtonFx>
+      </div>
+    \`,
+  }),
+};
+`,
+    Image: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueImage from './VueImage.vue';
+
+const meta = {
+  title: 'AgnosticUI/Image',
+  component: VueImage,
+  tags: ['autodocs'],
+  argTypes: {
+    fit: {
+      control: 'select',
+      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+    },
+    loading: {
+      control: 'select',
+      options: ['lazy', 'eager'],
+    },
+    fade: { control: 'boolean' },
+  },
+  args: {
+    src: 'https://picsum.photos/400/300',
+    alt: 'Sample landscape photo',
+    width: 400,
+    height: 300,
+  },
+  render: (args: any) => ({
+    components: { VueImage },
+    setup() { return { args }; },
+    template: '<VueImage v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithFade: Story = { args: { fade: true } };
+export const ContainFit: Story = {
+  args: {
+    src: 'https://picsum.photos/400/300?grayscale',
+    alt: 'Contained image',
+    fit: 'contain',
+    aspectRatio: '16/9',
+  },
+};
+`,
+    IntlFormatter: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueIntlFormatter from './VueIntlFormatter.vue';
+
+const meta = {
+  title: 'AgnosticUI/IntlFormatter',
+  component: VueIntlFormatter,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['date', 'number', 'percent', 'currency'],
+    },
+    lang: { control: 'text' },
+  },
+  args: { type: 'number', value: 1234567.89, lang: 'en-US' },
+  render: (args: any) => ({
+    components: { VueIntlFormatter },
+    setup() { return { args }; },
+    template: '<VueIntlFormatter v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueIntlFormatter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Currency: Story = {
+  args: { type: 'currency', value: 9999.99, currency: 'USD', lang: 'en-US' },
+};
+export const Date: Story = {
+  args: { type: 'date', date: '2024-06-15', dateStyle: 'long', lang: 'en-US' },
+};
+export const Percent: Story = {
+  args: { type: 'percent', value: 0.754, lang: 'en-US' },
+};
+`,
+    Menu: `import type { Meta, StoryObj } from '@storybook/vue3';
+import { VueMenu, VueMenuItem, VueMenuSeparator } from './index';
+
+const meta = {
+  title: 'AgnosticUI/Menu',
+  component: VueMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    buttonVariant: {
+      control: 'select',
+      options: ['', 'primary', 'secondary', 'success', 'warning', 'danger', 'monochrome'],
+    },
+    size: {
+      control: 'select',
+      options: ['x-sm', 'sm', 'md', 'lg', 'xl'],
+    },
+    disabled: { control: 'boolean' },
+  },
+  args: { size: 'md' },
+  render: (args: any) => ({
+    components: { VueMenu, VueMenuItem, VueMenuSeparator },
+    setup() { return { args }; },
+    template: \`
+      <VueMenu v-bind="args">
+        <template #menu>
+          <VueMenuItem value="edit">Edit</VueMenuItem>
+          <VueMenuItem value="duplicate">Duplicate</VueMenuItem>
+          <VueMenuSeparator />
+          <VueMenuItem value="delete">Delete</VueMenuItem>
+        </template>
+      </VueMenu>
+    \`,
+  }),
+} satisfies Meta<typeof VueMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+`,
+    Popover: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VuePopover from './VuePopover.vue';
+
+const meta = {
+  title: 'AgnosticUI/Popover',
+  component: VuePopover,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['top', 'top-start', 'top-end', 'right', 'bottom', 'bottom-start', 'bottom-end', 'left'],
+    },
+    triggerType: {
+      control: 'select',
+      options: ['click', 'hover', 'focus'],
+    },
+    arrow: { control: 'boolean' },
+    showCloseButton: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: { placement: 'bottom', arrow: true, triggerType: 'click', showCloseButton: true },
+  render: (args: any) => ({
+    components: { VuePopover },
+    setup() { return { args }; },
+    template: \`
+      <VuePopover v-bind="args">
+        <button slot="trigger">Open Popover</button>
+        <span slot="title">Popover Title</span>
+        <div slot="content">
+          <p>Popover content goes here.</p>
+        </div>
+      </VuePopover>
+    \`,
+  }),
+} satisfies Meta<typeof VuePopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const HoverTrigger: Story = {
+  args: { triggerType: 'hover' },
+  render: (args: any) => ({
+    components: { VuePopover },
+    setup() { return { args }; },
+    template: \`
+      <VuePopover v-bind="args">
+        <button slot="trigger">Hover Me</button>
+        <span slot="title">Hover Popover</span>
+        <div slot="content"><p>Opens on hover.</p></div>
+      </VuePopover>
+    \`,
+  }),
+};
+`,
+    Sidebar: `import type { Meta, StoryObj } from '@storybook/vue3';
+import { onMounted } from 'vue';
+import VueSidebar from './VueSidebar.vue';
+import { VueSidebarNav, VueSidebarNavItem, VueSidebarNavSubmenu } from '../../SidebarNav/vue/index';
+import VuePopover from '../../Popover/vue/VuePopover.vue';
+import { VueSidebarNavPopoverSubmenu } from '../../SidebarNav/vue/index';
+
+const HOME_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>\`;
+const FOLDER_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>\`;
+const USERS_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>\`;
+const SETTINGS_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>\`;
+const CHEVRON_RIGHT_SVG = \`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>\`;
+const PANEL_TOGGLE_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/></svg>\`;
+
+const NAV_STYLES = \`
+  .nav-button {
+    display: flex;
+    align-items: center;
+    gap: var(--ag-space-3);
+    position: relative;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    border: none;
+    background: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+    color: inherit;
+  }
+  .nav-button svg { flex-shrink: 0; }
+  .nav-button:hover { background: var(--ag-background-secondary); }
+  .nav-button.active {
+    background: var(--ag-primary-background);
+    color: var(--ag-primary-text);
+    font-weight: 500;
+  }
+  .nav-label {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+  }
+  .chevron {
+    display: flex;
+    align-items: center;
+    transition: transform var(--ag-fx-duration-md), opacity var(--ag-fx-duration-sm);
+    margin-left: auto;
+  }
+  .nav-button[aria-expanded="true"] .chevron { transform: rotate(90deg); }
+  ag-sidebar[collapsed] .nav-label,
+  ag-sidebar[collapsed] .chevron {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+  }
+  ag-sidebar[collapsed] .nav-button {
+    width: auto;
+    padding: var(--ag-space-2);
+  }
+  ag-sidebar[collapsed] ag-sidebar-nav-submenu:not(.popover-submenu),
+  ag-sidebar:not([collapsed]) ag-popover,
+  ag-sidebar[collapsed] .nav-button-expanded,
+  ag-sidebar:not([collapsed]) .nav-button-collapsed {
+    display: none !important;
+  }
+  ag-sidebar[collapsed] ag-popover.nav-button-collapsed {
+    display: block !important;
+  }
+  ag-sidebar-nav-submenu {
+    display: none;
+    overflow: hidden;
+  }
+  ag-sidebar-nav-submenu[open] {
+    display: block;
+  }
+  .nav-sublink {
+    display: block;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+  }
+  .nav-sublink:hover { background: var(--ag-background-secondary); }
+  .nav-button-collapsed::part(ag-popover-body) { padding: var(--ag-space-1); }
+\`;
+
+const meta = {
+  title: 'AgnosticUI/Sidebar',
+  component: VueSidebar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof VueSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function makeStory(initialCollapsed = false, variant = 'default') {
+  return {
+    render: () => ({
+      components: { VueSidebar, VueSidebarNav, VueSidebarNavItem, VueSidebarNavSubmenu, VueSidebarNavPopoverSubmenu, VuePopover },
+      setup() {
+        onMounted(() => {
+          const id = 'ag-sidebar-story-styles';
+          if (!document.getElementById(id)) {
+            const el = document.createElement('style');
+            el.id = id;
+            el.textContent = NAV_STYLES;
+            document.head.appendChild(el);
+          }
+        });
+
+        const toggleCollapse = (e: Event) => {
+          const sidebar = (e.target as HTMLElement).closest('ag-sidebar') as any;
+          if (sidebar && sidebar.toggleCollapse) sidebar.toggleCollapse();
+        };
+
+        const handleSubmenuToggle = (e: Event) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const button = e.currentTarget as HTMLElement;
+          const navItem = button.closest('ag-sidebar-nav-item');
+          const submenu = navItem?.querySelector('ag-sidebar-nav-submenu');
+          if (!submenu) return;
+          const isExpanded = button.getAttribute('aria-expanded') === 'true';
+          button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+          if (isExpanded) submenu.removeAttribute('open');
+          else submenu.setAttribute('open', '');
+        };
+
+        return {
+          initialCollapsed, variant, toggleCollapse, handleSubmenuToggle,
+          HOME_SVG, FOLDER_SVG, USERS_SVG, SETTINGS_SVG, CHEVRON_RIGHT_SVG, PANEL_TOGGLE_SVG,
+        };
+      },
+      template: \`
+        <div style="position:relative;display:flex;height:500px;border:1px solid var(--ag-border-color);border-radius:0.5rem;overflow:hidden;contain:layout">
+          <VueSidebar :collapsed="initialCollapsed" :variant="variant" aria-label="Main navigation" show-mobile-toggle>
+            <h2 slot="ag-header-start" style="margin:0;font-size:1.125rem;font-weight:600">Dashboard</h2>
+            <button type="button" slot="ag-header-toggle" @click="toggleCollapse"
+              style="background:none;border:none;padding:8px 0;cursor:pointer;display:flex;align-items:center;color:inherit"
+              aria-label="Toggle sidebar">
+              <span v-html="PANEL_TOGGLE_SVG"></span>
+            </button>
+            <VueSidebarNav>
+              <VueSidebarNavItem>
+                <button type="button" class="nav-button active" aria-current="page">
+                  <span v-html="HOME_SVG"></span>
+                  <span class="nav-label">Dashboard</span>
+                </button>
+              </VueSidebarNavItem>
+              <VueSidebarNavItem>
+                <button type="button" class="nav-button nav-button-expanded" aria-expanded="false" @click="handleSubmenuToggle">
+                  <span v-html="FOLDER_SVG"></span>
+                  <span class="nav-label">Projects</span>
+                  <span class="chevron" v-html="CHEVRON_RIGHT_SVG"></span>
+                </button>
+                <VuePopover class="nav-button-collapsed" placement="right-start" trigger-type="click" :distance="8" :arrow="true">
+                  <button slot="trigger" type="button" class="nav-button">
+                    <span v-html="FOLDER_SVG"></span>
+                  </button>
+                  <VueSidebarNavPopoverSubmenu slot="content">
+                    <a href="#" class="nav-sublink" @click.prevent>Project Alpha</a>
+                    <a href="#" class="nav-sublink" @click.prevent>Project Beta</a>
+                    <a href="#" class="nav-sublink" @click.prevent>Project Gamma</a>
+                  </VueSidebarNavPopoverSubmenu>
+                </VuePopover>
+                <VueSidebarNavSubmenu>
+                  <a class="nav-sublink" href="#" @click.prevent>Project Alpha</a>
+                  <a class="nav-sublink" href="#" @click.prevent>Project Beta</a>
+                  <a class="nav-sublink" href="#" @click.prevent>Project Gamma</a>
+                </VueSidebarNavSubmenu>
+              </VueSidebarNavItem>
+              <VueSidebarNavItem>
+                <button type="button" class="nav-button">
+                  <span v-html="USERS_SVG"></span>
+                  <span class="nav-label">Team</span>
+                </button>
+              </VueSidebarNavItem>
+              <VueSidebarNavItem>
+                <button type="button" class="nav-button nav-button-expanded" aria-expanded="false" @click="handleSubmenuToggle">
+                  <span v-html="SETTINGS_SVG"></span>
+                  <span class="nav-label">Settings</span>
+                  <span class="chevron" v-html="CHEVRON_RIGHT_SVG"></span>
+                </button>
+                <VuePopover class="nav-button-collapsed" placement="right-start" trigger-type="click" :distance="8" :arrow="true">
+                  <button slot="trigger" type="button" class="nav-button">
+                    <span v-html="SETTINGS_SVG"></span>
+                  </button>
+                  <VueSidebarNavPopoverSubmenu slot="content">
+                    <a href="#" class="nav-sublink" @click.prevent>Profile</a>
+                    <a href="#" class="nav-sublink" @click.prevent>Billing</a>
+                    <a href="#" class="nav-sublink" @click.prevent>Security</a>
+                  </VueSidebarNavPopoverSubmenu>
+                </VuePopover>
+                <VueSidebarNavSubmenu>
+                  <a class="nav-sublink" href="#" @click.prevent>Profile</a>
+                  <a class="nav-sublink" href="#" @click.prevent>Billing</a>
+                  <a class="nav-sublink" href="#" @click.prevent>Security</a>
+                </VueSidebarNavSubmenu>
+              </VueSidebarNavItem>
+            </VueSidebarNav>
+            <div slot="ag-footer" style="font-size:0.875rem;color:var(--ag-text-secondary)">
+              © 2024 Company
+            </div>
+          </VueSidebar>
+          <main style="flex:1;padding:2rem;overflow:auto;background:var(--ag-background)">
+            <h1 style="margin-top:0">Main Content</h1>
+            <p>Click the header toggle to collapse the sidebar into rail mode.</p>
+            <p>When collapsed, click icon-only items with submenus to see them in popovers.</p>
+          </main>
+        </div>
+      \`,
+    }),
+  };
+}
+
+export const Default: Story = makeStory() as Story;
+export const Collapsed: Story = makeStory(true) as Story;
+export const Elevated: Story = makeStory(false, 'elevated') as Story;
+`,
+    Accordion: `import type { Meta, StoryObj } from '@storybook/vue3';
+import { VueAccordion, VueAccordionItem, VueAccordionHeader, VueAccordionContent } from './index';
+
+const meta = {
+  title: 'AgnosticUI/Accordion',
+  component: VueAccordionItem,
+  tags: ['autodocs'],
+  argTypes: {
+    useChevron: { control: 'boolean' },
+    useX: { control: 'boolean' },
+    useMinus: { control: 'boolean' },
+    noIndicator: { control: 'boolean' },
+    bordered: { control: 'boolean' },
+    background: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: { useChevron: true },
+  render: (args: any) => ({
+    components: { VueAccordion, VueAccordionItem, VueAccordionHeader, VueAccordionContent },
+    setup() { return { args }; },
+    template: \`
+      <VueAccordion>
+        <VueAccordionItem v-bind="args">
+          <VueAccordionHeader>What is AgnosticUI?</VueAccordionHeader>
+          <VueAccordionContent>
+            AgnosticUI is a framework-agnostic UI component library that works with React, Vue, and Lit.
+          </VueAccordionContent>
+        </VueAccordionItem>
+        <VueAccordionItem v-bind="args">
+          <VueAccordionHeader>How do I install it?</VueAccordionHeader>
+          <VueAccordionContent>
+            Run <code>npx agnosticui-cli init</code> to set up your project, then use <code>npx agnosticui-cli add Button</code> to add components.
+          </VueAccordionContent>
+        </VueAccordionItem>
+        <VueAccordionItem v-bind="args">
+          <VueAccordionHeader>Is it accessible?</VueAccordionHeader>
+          <VueAccordionContent>
+            Yes — all components are built with accessibility in mind, following WAI-ARIA patterns.
+          </VueAccordionContent>
+        </VueAccordionItem>
+      </VueAccordion>
+    \`,
+  }),
+} satisfies Meta<typeof VueAccordionItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const OpenByDefault: Story = {
+  render: (args: any) => ({
+    components: { VueAccordion, VueAccordionItem, VueAccordionHeader, VueAccordionContent },
+    setup() { return { args }; },
+    template: \`
+      <VueAccordion>
+        <VueAccordionItem v-bind="args" :open="true">
+          <VueAccordionHeader>Open by default</VueAccordionHeader>
+          <VueAccordionContent>This item starts open.</VueAccordionContent>
+        </VueAccordionItem>
+        <VueAccordionItem v-bind="args">
+          <VueAccordionHeader>Closed by default</VueAccordionHeader>
+          <VueAccordionContent>Click to expand.</VueAccordionContent>
+        </VueAccordionItem>
+      </VueAccordion>
+    \`,
+  }),
+};
+export const Bordered: Story = { args: { bordered: true } };
+export const PlusMinusIndicator: Story = { args: { useMinus: true, useChevron: false } };
+`,
+    Fieldset: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueFieldset from './VueFieldset.vue';
+import VueInput from '../../Input/vue/VueInput.vue';
+import VueCheckbox from '../../Checkbox/vue/VueCheckbox.vue';
+
+const meta = {
+  title: 'AgnosticUI/Fieldset',
+  component: VueFieldset,
+  tags: ['autodocs'],
+  argTypes: {
+    bordered: { control: 'boolean' },
+    layout: { control: 'select', options: ['vertical', 'horizontal'] },
+    legendHidden: { control: 'boolean' },
+    legend: { control: 'text' },
+  },
+  args: { legend: 'Personal Information', bordered: false, layout: 'vertical' },
+  render: (args: any) => ({
+    components: { VueFieldset, VueInput },
+    setup() { return { args }; },
+    template: \`
+      <VueFieldset v-bind="args">
+        <VueInput label="First Name" type="text" />
+        <VueInput label="Last Name" type="text" />
+        <VueInput label="Email" type="email" />
+      </VueFieldset>
+    \`,
+  }),
+} satisfies Meta<typeof VueFieldset>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Bordered: Story = { args: { legend: 'Contact Preferences', bordered: true } };
+export const Horizontal: Story = { args: { legend: 'Options', layout: 'horizontal' } };
+`,
+    Progress: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueProgress from './VueProgress.vue';
+
+const meta = {
+  title: 'AgnosticUI/Progress',
+  component: VueProgress,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'number', min: 0, max: 100 } },
+    max: { control: { type: 'number' } },
+    label: { control: 'text' },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+  args: { value: 60, max: 100, label: 'Loading progress' },
+  render: (args: any) => ({
+    components: { VueProgress },
+    setup() { return { args }; },
+    template: '<VueProgress v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const HalfComplete: Story = { args: { value: 50, label: '50% complete' } };
+export const NearlyDone: Story = { args: { value: 85, label: 'Almost there' } };
+export const Indeterminate: Story = { args: { value: undefined, label: 'Loading...' } };
+`,
+    ProgressRing: `import type { Meta, StoryObj } from '@storybook/vue3';
+import VueProgressRing from './VueProgressRing.vue';
+
+const meta = {
+  title: 'AgnosticUI/ProgressRing',
+  component: VueProgressRing,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: { control: 'select', options: ['primary', 'success', 'warning', 'danger', 'info'] },
+    label: { control: 'text' },
+  },
+  args: { value: 65, size: 'medium', variant: 'primary', label: 'Progress' },
+  render: (args: any) => ({
+    components: { VueProgressRing },
+    setup() { return { args }; },
+    template: '<VueProgressRing v-bind="args" />',
+  }),
+} satisfies Meta<typeof VueProgressRing>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => ({
+    components: { VueProgressRing },
+    template: \`
+      <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap">
+        <VueProgressRing :value="65" variant="primary" label="Primary" />
+        <VueProgressRing :value="80" variant="success" label="Success" />
+        <VueProgressRing :value="45" variant="warning" label="Warning" />
+        <VueProgressRing :value="30" variant="danger" label="Danger" />
+        <VueProgressRing :value="55" variant="info" label="Info" />
+      </div>
+    \`,
+  }),
+};
+export const Sizes: Story = {
+  render: () => ({
+    components: { VueProgressRing },
+    template: \`
+      <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap">
+        <VueProgressRing :value="65" size="small" label="Small" />
+        <VueProgressRing :value="65" size="medium" label="Medium" />
+        <VueProgressRing :value="65" size="large" label="Large" />
+      </div>
+    \`,
+  }),
+};
+`,
+    Tabs: `import type { Meta, StoryObj } from '@storybook/vue3';
+import { VueTabs, VueTab, VueTabPanel } from './index';
+
+const meta = {
+  title: 'AgnosticUI/Tabs',
+  component: VueTabs,
+  tags: ['autodocs'],
+  argTypes: {
+    activation: {
+      control: 'select',
+      options: ['manual', 'automatic'],
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+  args: { activation: 'manual', ariaLabel: 'Example tabs' },
+  render: (args: any) => ({
+    components: { VueTabs, VueTab, VueTabPanel },
+    setup() { return { args }; },
+    template: \`
+      <VueTabs v-bind="args">
+        <VueTab panel="panel-1">Tab 1</VueTab>
+        <VueTab panel="panel-2">Tab 2</VueTab>
+        <VueTab panel="panel-3">Tab 3</VueTab>
+        <VueTabPanel panel="panel-1">Content for Tab 1</VueTabPanel>
+        <VueTabPanel panel="panel-2">Content for Tab 2</VueTabPanel>
+        <VueTabPanel panel="panel-3">Content for Tab 3</VueTabPanel>
+      </VueTabs>
+    \`,
+  }),
+} satisfies Meta<typeof VueTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Vertical: Story = { args: { orientation: 'vertical', ariaLabel: 'Vertical tabs' } };
+`,
+    Timeline: `import type { Meta, StoryObj } from '@storybook/vue3';
+import { VueTimeline, VueTimelineItem } from './index';
+
+const meta = {
+  title: 'AgnosticUI/Timeline',
+  component: VueTimeline,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+    variant: {
+      control: 'select',
+      options: ['', 'primary', 'success', 'warning', 'danger', 'monochrome'],
+    },
+    compact: { control: 'boolean' },
+  },
+  args: { orientation: 'horizontal', variant: '' },
+  render: (args: any) => ({
+    components: { VueTimeline, VueTimelineItem },
+    setup() { return { args }; },
+    template: \`
+      <VueTimeline v-bind="args">
+        <VueTimelineItem>
+          <template #ag-start>Jan 2024</template>
+          <template #ag-end>Project kickoff</template>
+        </VueTimelineItem>
+        <VueTimelineItem>
+          <template #ag-start>Mar 2024</template>
+          <template #ag-end>Design phase</template>
+        </VueTimelineItem>
+        <VueTimelineItem>
+          <template #ag-start>Jun 2024</template>
+          <template #ag-end>Development complete</template>
+        </VueTimelineItem>
+      </VueTimeline>
+    \`,
+  }),
+} satisfies Meta<typeof VueTimeline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Vertical: Story = { args: { orientation: 'vertical' } };
+export const Primary: Story = { args: { variant: 'primary' } };
+`,
+};
+// ---------------------------------------------------------------------------
+// Vue story generator
+// ---------------------------------------------------------------------------
+export function generateVueStory(name) {
+    // Return full override if one exists for this component
+    if (VUE_STORY_OVERRIDES[name]) {
+        return STORY_FILE_HEADER + VUE_STORY_OVERRIDES[name];
+    }
+    // Flex override: Vue component is VueFlexRow in VueFlexRow.vue
+    const vueComponentName = name === 'Flex' ? 'VueFlexRow' : `Vue${name}`;
+    const vueFileName = name === 'Flex' ? 'VueFlexRow' : `Vue${name}`;
+    const lines = [];
+    // Imports
+    lines.push(`import type { Meta, StoryObj } from '@storybook/vue3';`);
+    if (OPEN_CONTROLLED_COMPONENTS.has(name)) {
+        lines.push(`import { ref } from 'vue';`);
+    }
+    if (name === 'Dialog') {
+        lines.push(`import Vue${name} from './Vue${name}.vue';`);
+        lines.push(`import VueButton from '../../Button/vue/VueButton.vue';`);
+    }
+    else if (name === 'Drawer') {
+        lines.push(`import Vue${name} from './Vue${name}.vue';`);
+        lines.push(`import VueButton from '../../Button/vue/VueButton.vue';`);
+    }
+    else if (name === 'Toast') {
+        lines.push(`import Vue${name} from './Vue${name}.vue';`);
+        lines.push(`import VueButton from '../../Button/vue/VueButton.vue';`);
+    }
+    else if (name === 'Collapsible') {
+        lines.push(`import Vue${name} from './Vue${name}.vue';`);
+    }
+    else if (REQUIRED_ARRAY_COMPONENTS.has(name)) {
+        lines.push(`import ${vueComponentName} from './${vueFileName}.vue';`);
+        lines.push(`import type { ComboboxOption } from '../core/${name}';`);
+    }
+    else if (VUE_INDEX_EXPORTS[name]) {
+        // Component uses non-standard file name — import via named export from index
+        lines.push(`import { ${VUE_INDEX_EXPORTS[name]} } from './index';`);
+    }
+    else {
+        lines.push(`import ${vueComponentName} from './${vueFileName}.vue';`);
+    }
+    lines.push('');
+    // Sample data for Combobox
+    if (name === 'Combobox') {
+        lines.push(`const FRUITS: ComboboxOption[] = [`);
+        lines.push(`  { value: 'apple', label: 'Apple' },`);
+        lines.push(`  { value: 'banana', label: 'Banana' },`);
+        lines.push(`  { value: 'cherry', label: 'Cherry' },`);
+        lines.push(`  { value: 'grape', label: 'Grape' },`);
+        lines.push(`  { value: 'mango', label: 'Mango' },`);
+        lines.push(`  { value: 'orange', label: 'Orange' },`);
+        lines.push(`];`);
+        lines.push('');
+    }
+    const argTypes = ARGTYPES[name] ?? '';
+    // Build meta args for Vue
+    let metaArgs = '';
+    if (name === 'Dialog') {
+        metaArgs = `  args: {
+    heading: 'Dialog title',
+    description: 'Supporting description text goes here.',
+    showCloseButton: true,
+  },`;
+    }
+    else if (name === 'Drawer') {
+        metaArgs = `  args: {
+    heading: 'Drawer',
+    showCloseButton: true,
+  },`;
+    }
+    else if (name === 'Combobox') {
+        metaArgs = `  args: {
+    options: FRUITS,
+    label: 'Select a fruit',
+    placeholder: 'Choose...',
+    id: 'combobox-default',
+  },`;
+    }
+    else if (FX_COMPONENTS.has(name)) {
+        const defaultLabel = name === 'BadgeFx' ? 'BadgeFx' : name === 'ButtonFx' ? 'Click me' : name;
+        metaArgs = `  args: {
+    fx: 'bounce',
+    default: '${defaultLabel}',
+  },`;
+    }
+    else if (TEXT_CHILD_COMPONENTS.has(name)) {
+        // Use args.default for slot text
+        metaArgs = `  args: {
+    default: '${name}',
+  },`;
+    }
+    // Build render for meta (only for non-open-controlled, non-collapsible)
+    let metaRender = '';
+    if (!OPEN_CONTROLLED_COMPONENTS.has(name)) {
+        if (TEXT_CHILD_COMPONENTS.has(name) || FX_COMPONENTS.has(name)) {
+            metaRender = `  render: (args: any) => ({
+    components: { ${vueComponentName} },
+    setup() { return { args }; },
+    template: '<${vueComponentName} v-bind="args">{{ args.default }}</${vueComponentName}>',
+  }),`;
+        }
+        else {
+            metaRender = `  render: (args: any) => ({
+    components: { ${vueComponentName} },
+    setup() { return { args }; },
+    template: '<${vueComponentName} v-bind="args" />',
+  }),`;
+        }
+    }
+    const metaParts = [];
+    metaParts.push(`  title: 'AgnosticUI/${name}',`);
+    metaParts.push(`  component: ${vueComponentName},`);
+    metaParts.push(`  tags: ['autodocs'],`);
+    if (argTypes) {
+        metaParts.push(argTypes);
+    }
+    if (metaArgs) {
+        metaParts.push(metaArgs);
+    }
+    if (metaRender) {
+        metaParts.push(metaRender);
+    }
+    lines.push(`const meta = {`);
+    lines.push(metaParts.join('\n'));
+    lines.push(`} satisfies Meta<typeof ${vueComponentName}>;`);
+    lines.push('');
+    lines.push(`export default meta;`);
+    lines.push(`type Story = StoryObj<typeof meta>;`);
+    lines.push('');
+    // Default story
+    if (name === 'Dialog') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => ({`);
+        lines.push(`    components: { VueDialog, VueButton },`);
+        lines.push(`    setup() {`);
+        lines.push(`      const open = ref(false);`);
+        lines.push(`      return { args, open };`);
+        lines.push(`    },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div>`);
+        lines.push(`        <VueButton variant="primary" @click="open = true">Open Dialog</VueButton>`);
+        lines.push(`        <VueDialog v-bind="args" v-model:open="open">`);
+        lines.push(`          <p>Dialog content goes here.</p>`);
+        lines.push(`        </VueDialog>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+    }
+    else if (name === 'Drawer') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => ({`);
+        lines.push(`    components: { VueDrawer, VueButton },`);
+        lines.push(`    setup() {`);
+        lines.push(`      const open = ref(false);`);
+        lines.push(`      return { args, open };`);
+        lines.push(`    },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div>`);
+        lines.push(`        <VueButton variant="primary" @click="open = true">Open Drawer</VueButton>`);
+        lines.push(`        <VueDrawer v-bind="args" v-model:open="open">`);
+        lines.push(`          <div style="padding: 1rem">Drawer content goes here.</div>`);
+        lines.push(`        </VueDrawer>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+    }
+    else if (name === 'Toast') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => ({`);
+        lines.push(`    components: { VueToast, VueButton },`);
+        lines.push(`    setup() {`);
+        lines.push(`      const open = ref(false);`);
+        lines.push(`      return { args, open };`);
+        lines.push(`    },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div>`);
+        lines.push(`        <VueButton variant="primary" @click="open = true">Show Toast</VueButton>`);
+        lines.push(`        <VueToast v-bind="args" v-model:open="open">`);
+        lines.push(`          <span>Toast notification message</span>`);
+        lines.push(`        </VueToast>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+    }
+    else if (name === 'Collapsible') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: () => ({`);
+        lines.push(`    components: { VueCollapsible },`);
+        lines.push(`    template: \``);
+        lines.push(`      <VueCollapsible>`);
+        lines.push(`        <template #summary>Toggle details</template>`);
+        lines.push(`        <div>Collapsible content goes here.</div>`);
+        lines.push(`      </VueCollapsible>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+    }
+    else if (name === 'Button') {
+        lines.push(`export const Default: Story = {};`);
+        lines.push('');
+        lines.push(`export const Variants: Story = {`);
+        lines.push(`  render: () => ({`);
+        lines.push(`    components: { VueButton },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div style="display:flex;gap:8px;flex-wrap:wrap">`);
+        lines.push(`        <VueButton>Default</VueButton>`);
+        lines.push(`        <VueButton variant="primary">Primary</VueButton>`);
+        lines.push(`        <VueButton variant="secondary">Secondary</VueButton>`);
+        lines.push(`        <VueButton variant="success">Success</VueButton>`);
+        lines.push(`        <VueButton variant="warning">Warning</VueButton>`);
+        lines.push(`        <VueButton variant="danger">Danger</VueButton>`);
+        lines.push(`        <VueButton variant="monochrome">Monochrome</VueButton>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Sizes: Story = {`);
+        lines.push(`  render: () => ({`);
+        lines.push(`    components: { VueButton },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">`);
+        lines.push(`        <VueButton size="x-sm">x-sm</VueButton>`);
+        lines.push(`        <VueButton size="sm">sm</VueButton>`);
+        lines.push(`        <VueButton size="md">md</VueButton>`);
+        lines.push(`        <VueButton size="lg">lg</VueButton>`);
+        lines.push(`        <VueButton size="xl">xl</VueButton>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Bordered: Story = {`);
+        lines.push(`  render: () => ({`);
+        lines.push(`    components: { VueButton },`);
+        lines.push(`    template: \``);
+        lines.push(`      <div style="display:flex;gap:8px;flex-wrap:wrap">`);
+        lines.push(`        <VueButton bordered>Default</VueButton>`);
+        lines.push(`        <VueButton variant="primary" bordered>Primary</VueButton>`);
+        lines.push(`        <VueButton variant="success" bordered>Success</VueButton>`);
+        lines.push(`        <VueButton variant="danger" bordered>Danger</VueButton>`);
+        lines.push(`      </div>`);
+        lines.push(`    \`,`);
+        lines.push(`  }),`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Disabled: Story = { args: { variant: 'primary', disabled: true } };`);
+        lines.push(`export const Loading: Story = { args: { variant: 'primary', loading: true } };`);
+    }
+    else {
+        lines.push(`export const Default: Story = {};`);
+    }
+    return STORY_FILE_HEADER + lines.join('\n') + '\n';
+}
+// ---------------------------------------------------------------------------
+// Lit (web-components) story generator
+// ---------------------------------------------------------------------------
+function toKebabCase(str) {
+    return str.replace(/([A-Z])/g, (_m, p1, offset) => (offset > 0 ? '-' : '') + p1.toLowerCase());
+}
+function getAgTagName(name) {
+    // Special overrides
+    if (name === 'Flex')
+        return 'ag-flex-row';
+    return `ag-${toKebabCase(name)}`;
+}
+// ---------------------------------------------------------------------------
+// Lit story overrides — components that need custom slot content or imports
+// ---------------------------------------------------------------------------
+const LIT_STORY_OVERRIDES = {
+    Flex: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './index';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Flex',
+  component: 'ag-flex-row',
+  tags: ['autodocs'],
+  render: () => html\`
+    <ag-flex-row style="--flex-gap: 1rem">
+      <div style="padding: 1rem; background: #e0e7ff; border: 1px solid #6366f1;">Item 1</div>
+      <div style="padding: 1rem; background: #dbeafe; border: 1px solid #3b82f6;">Item 2</div>
+      <div style="padding: 1rem; background: #ddd6fe; border: 1px solid #8b5cf6;">Item 3</div>
+    </ag-flex-row>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Column: Story = {
+  render: () => html\`
+    <ag-flex-col style="--flex-gap: 1rem">
+      <div style="padding: 1rem; background: #fef3c7; border: 1px solid #f59e0b;">Row 1</div>
+      <div style="padding: 1rem; background: #fed7aa; border: 1px solid #ea580c;">Row 2</div>
+      <div style="padding: 1rem; background: #fecaca; border: 1px solid #ef4444;">Row 3</div>
+    </ag-flex-col>
+  \`,
+};
+`,
+    Header: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Header';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Header',
+  component: 'ag-header',
+  tags: ['autodocs'],
+  render: () => html\`
+    <ag-header>
+      <a href="#" slot="logo" style="text-decoration: none; color: inherit; font-weight: 700; font-size: 1.25rem;">
+        AgnosticUI
+      </a>
+      <nav>
+        <ul style="display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;">
+          <li><a href="#home" style="text-decoration: none; color: inherit;">Home</a></li>
+          <li><a href="#about" style="text-decoration: none; color: inherit;">About</a></li>
+          <li><a href="#docs" style="text-decoration: none; color: inherit;">Docs</a></li>
+        </ul>
+      </nav>
+    </ag-header>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const WithLogo: Story = {
+  render: () => html\`
+    <ag-header>
+      <a href="#" slot="logo" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit;">
+        <svg width="28" height="28" viewBox="0 0 32 32">
+          <circle cx="16" cy="16" r="14" fill="var(--ag-primary, #6366f1)" />
+          <text x="16" y="22" text-anchor="middle" fill="white" font-size="16" font-weight="bold">A</text>
+        </svg>
+        <span style="font-weight: 700; font-size: 1.25rem;">MyApp</span>
+      </a>
+      <nav>
+        <ul style="display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;">
+          <li><a href="#home" style="text-decoration: none; color: inherit;">Home</a></li>
+          <li><a href="#features" style="text-decoration: none; color: inherit;">Features</a></li>
+          <li><a href="#pricing" style="text-decoration: none; color: inherit;">Pricing</a></li>
+        </ul>
+      </nav>
+    </ag-header>
+  \`,
+};
+`,
+    Image: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Image';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Image',
+  component: 'ag-image',
+  tags: ['autodocs'],
+  render: () => html\`
+    <ag-image
+      .src=\${'https://picsum.photos/800/400'}
+      .alt=\${'Sample landscape photo'}
+      .width=\${800}
+      .height=\${400}
+    ></ag-image>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const WithFade: Story = {
+  render: () => html\`
+    <ag-image
+      .src=\${'https://picsum.photos/600/400?random=2'}
+      .alt=\${'Fading image'}
+      .width=\${600}
+      .height=\${400}
+      .fade=\${true}
+      .duration=\${500}
+    ></ag-image>
+  \`,
+};
+
+export const WithAspectRatio: Story = {
+  render: () => html\`
+    <ag-image
+      .src=\${'https://picsum.photos/1200/675?random=3'}
+      .alt=\${'Wide image'}
+      .aspectRatio=\${'16/9'}
+      .fit=\${'cover'}
+      style="width: 100%; max-width: 800px; display: block;"
+    ></ag-image>
+  \`,
+};
+`,
+    Select: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Select';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Select',
+  component: 'ag-select',
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['', 'small', 'large'] },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+  render: (args: any) => html\`
+    <div style="max-width: 300px;">
+      <label for="player-select" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+        Greatest Tennis Player
+      </label>
+      <ag-select
+        id="player-select"
+        name="tennis"
+        .size=\${args.size || ''}
+        ?disabled=\${args.disabled}
+        ?multiple=\${args.multiple}
+        ?invalid=\${args.invalid}
+        ?required=\${args.required}
+      >
+        <option value="">- Select a player -</option>
+        <option value="federer">Roger Federer</option>
+        <option value="nadal">Rafael Nadal</option>
+        <option value="djokovic">Novak Djokovic</option>
+        <option value="agassi">Andre Agassi</option>
+        <option value="sampras">Pete Sampras</option>
+      </ag-select>
+    </div>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Multiple: Story = {
+  render: () => html\`
+    <div style="max-width: 300px;">
+      <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Multiple Select</label>
+      <ag-select name="players" .multiple=\${true} .multipleSize=\${4}>
+        <option value="federer">Roger Federer</option>
+        <option value="nadal">Rafael Nadal</option>
+        <option value="djokovic">Novak Djokovic</option>
+        <option value="agassi">Andre Agassi</option>
+      </ag-select>
+    </div>
+  \`,
+};
+`,
+    Progress: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Progress';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Progress',
+  component: 'ag-progress',
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'number', min: 0, max: 100 } },
+    max: { control: { type: 'number' } },
+    label: { control: 'text' },
+  },
+  args: {
+    value: 60,
+    max: 100,
+    label: 'Loading progress',
+  },
+  render: (args: any) => html\`
+    <ag-progress
+      .value=\${args.value}
+      .max=\${args.max}
+      .label=\${args.label}
+    ></ag-progress>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 500px;">
+      <ag-progress .value=\${25} .max=\${100} .label=\${'25%'}></ag-progress>
+      <ag-progress .value=\${50} .max=\${100} .label=\${'50%'}></ag-progress>
+      <ag-progress .value=\${75} .max=\${100} .label=\${'75%'}></ag-progress>
+      <ag-progress .value=\${100} .max=\${100} .label=\${'Complete'}></ag-progress>
+    </div>
+  \`,
+};
+`,
+    ProgressRing: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './ProgressRing';
+
+const meta: Meta = {
+  title: 'AgnosticUI/ProgressRing',
+  component: 'ag-progress-ring',
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: { control: 'select', options: ['primary', 'success', 'warning', 'danger', 'info'] },
+    label: { control: 'text' },
+  },
+  args: {
+    value: 65,
+    size: 'medium',
+    variant: 'primary',
+    label: 'Progress',
+  },
+  render: (args: any) => html\`
+    <ag-progress-ring
+      .value=\${args.value}
+      .size=\${args.size}
+      .variant=\${args.variant}
+      .label=\${args.label}
+    ></ag-progress-ring>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;">
+      <ag-progress-ring .value=\${65} size="medium" variant="primary" label="Primary"></ag-progress-ring>
+      <ag-progress-ring .value=\${80} size="medium" variant="success" label="Success"></ag-progress-ring>
+      <ag-progress-ring .value=\${45} size="medium" variant="warning" label="Warning"></ag-progress-ring>
+      <ag-progress-ring .value=\${30} size="medium" variant="danger" label="Danger"></ag-progress-ring>
+    </div>
+  \`,
+};
+
+export const Sizes: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 2rem; align-items: center;">
+      <ag-progress-ring .value=\${65} size="small" variant="primary" label="Small"></ag-progress-ring>
+      <ag-progress-ring .value=\${65} size="medium" variant="primary" label="Medium"></ag-progress-ring>
+      <ag-progress-ring .value=\${65} size="large" variant="primary" label="Large"></ag-progress-ring>
+    </div>
+  \`,
+};
+`,
+    Accordion: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Accordion';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Accordion',
+  component: 'ag-accordion',
+  tags: ['autodocs'],
+  render: () => html\`
+    <ag-accordion style="max-width: 600px;">
+      <ag-accordion-item .open=\${true}>
+        <span slot="header">Getting Started</span>
+        <div slot="content">
+          <p>AgnosticUI is a component library that works across React, Vue, and Lit. Install it with the CLI and add components to your project.</p>
+        </div>
+      </ag-accordion-item>
+      <ag-accordion-item>
+        <span slot="header">Configuration</span>
+        <div slot="content">
+          <p>Configure your project by editing the agnosticui.config.json file in your project root. Add components as needed.</p>
+        </div>
+      </ag-accordion-item>
+      <ag-accordion-item>
+        <span slot="header">Theming</span>
+        <div slot="content">
+          <p>Customize the appearance using CSS custom properties. Override tokens in your stylesheet to match your brand.</p>
+        </div>
+      </ag-accordion-item>
+    </ag-accordion>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Bordered: Story = {
+  render: () => html\`
+    <ag-accordion style="max-width: 600px;">
+      <ag-accordion-item .open=\${true} .bordered=\${true}>
+        <span slot="header">Section One</span>
+        <div slot="content"><p>Content for section one goes here.</p></div>
+      </ag-accordion-item>
+      <ag-accordion-item .bordered=\${true}>
+        <span slot="header">Section Two</span>
+        <div slot="content"><p>Content for section two goes here.</p></div>
+      </ag-accordion-item>
+    </ag-accordion>
+  \`,
+};
+`,
+    Breadcrumb: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Breadcrumb';
+
+const ITEMS = [
+  { label: 'Home', href: '#' },
+  { label: 'Products', href: '#products' },
+  { label: 'Electronics', href: '#electronics' },
+  { label: 'Laptops', current: true },
+];
+
+const meta: Meta = {
+  title: 'AgnosticUI/Breadcrumb',
+  component: 'ag-breadcrumb',
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['default', 'slash', 'bullet', 'arrow'] },
+    primary: { control: 'boolean' },
+  },
+  args: {
+    type: 'default',
+    primary: false,
+  },
+  render: (args: any) => html\`
+    <ag-breadcrumb
+      .items=\${ITEMS}
+      .type=\${args.type}
+      ?primary=\${args.primary}
+    ></ag-breadcrumb>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Slash: Story = { args: { type: 'slash' } };
+export const Arrow: Story = { args: { type: 'arrow' } };
+export const Bullet: Story = { args: { type: 'bullet' } };
+`,
+    Icon: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Icon';
+
+const STAR_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>\`;
+const INFO_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>\`;
+const CHECK_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>\`;
+
+const meta: Meta = {
+  title: 'AgnosticUI/Icon',
+  component: 'ag-icon',
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['14', '16', '18', '20', '24', '32', '36', '40', '48'] },
+    type: { control: 'select', options: ['', 'info', 'action', 'success', 'warning', 'error'] },
+  },
+  args: { size: '24', type: '' },
+  render: (args: any) => html\`
+    <ag-icon .size=\${args.size} .type=\${args.type} no-fill>
+      \${STAR_SVG}
+    </ag-icon>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Types: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; align-items: center;">
+      <ag-icon size="24" no-fill>\${STAR_SVG}</ag-icon>
+      <ag-icon size="24" type="info" no-fill>\${INFO_SVG}</ag-icon>
+      <ag-icon size="24" type="success" no-fill>\${CHECK_SVG}</ag-icon>
+    </div>
+  \`,
+};
+
+export const Sizes: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; align-items: center;">
+      <ag-icon size="14" no-fill>\${STAR_SVG}</ag-icon>
+      <ag-icon size="18" no-fill>\${STAR_SVG}</ag-icon>
+      <ag-icon size="24" no-fill>\${STAR_SVG}</ag-icon>
+      <ag-icon size="32" no-fill>\${STAR_SVG}</ag-icon>
+      <ag-icon size="48" no-fill>\${STAR_SVG}</ag-icon>
+    </div>
+  \`,
+};
+`,
+    IconButton: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './IconButton';
+
+const CLOSE_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>\`;
+const SETTINGS_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>\`;
+const MENU_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>\`;
+
+const meta: Meta = {
+  title: 'AgnosticUI/IconButton',
+  component: 'ag-icon-button',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    variant: { control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'danger'] },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+  args: { label: 'Close', size: 'md', variant: '' },
+  render: (args: any) => html\`
+    <ag-icon-button
+      .label=\${args.label}
+      .size=\${args.size}
+      .variant=\${args.variant}
+      ?disabled=\${args.disabled}
+      ?loading=\${args.loading}
+    >
+      \${CLOSE_SVG}
+    </ag-icon-button>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; align-items: center;">
+      <ag-icon-button label="Default">\${CLOSE_SVG}</ag-icon-button>
+      <ag-icon-button label="Settings" variant="primary">\${SETTINGS_SVG}</ag-icon-button>
+      <ag-icon-button label="Menu" variant="secondary">\${MENU_SVG}</ag-icon-button>
+      <ag-icon-button label="Ghost" variant="ghost">\${CLOSE_SVG}</ag-icon-button>
+    </div>
+  \`,
+};
+
+export const Sizes: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; align-items: center;">
+      <ag-icon-button label="XS" size="xs">\${CLOSE_SVG}</ag-icon-button>
+      <ag-icon-button label="SM" size="sm">\${CLOSE_SVG}</ag-icon-button>
+      <ag-icon-button label="MD" size="md">\${CLOSE_SVG}</ag-icon-button>
+      <ag-icon-button label="LG" size="lg">\${CLOSE_SVG}</ag-icon-button>
+      <ag-icon-button label="XL" size="xl">\${CLOSE_SVG}</ag-icon-button>
+    </div>
+  \`,
+};
+`,
+    IconButtonFx: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './IconButtonFx';
+
+const HEART_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>\`;
+const STAR_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>\`;
+
+const meta: Meta = {
+  title: 'AgnosticUI/IconButtonFx',
+  component: 'ag-icon-button-fx',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    fx: { control: 'select', options: ['', 'pulse', 'bounce', 'jelly', 'press-pop', 'slide-in', 'grow', 'shrink', 'push', 'shake', 'wobble'] },
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    disabled: { control: 'boolean' },
+  },
+  args: { label: 'Like', fx: 'bounce', size: 'md' },
+  render: (args: any) => html\`
+    <ag-icon-button-fx
+      .label=\${args.label}
+      .fx=\${args.fx}
+      .size=\${args.size}
+      ?disabled=\${args.disabled}
+    >
+      \${HEART_SVG}
+    </ag-icon-button-fx>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const FxVariants: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;">
+      <ag-icon-button-fx label="Bounce" fx="bounce">\${HEART_SVG}</ag-icon-button-fx>
+      <ag-icon-button-fx label="Pulse" fx="pulse">\${STAR_SVG}</ag-icon-button-fx>
+      <ag-icon-button-fx label="Jelly" fx="jelly">\${HEART_SVG}</ag-icon-button-fx>
+      <ag-icon-button-fx label="Shake" fx="shake">\${STAR_SVG}</ag-icon-button-fx>
+    </div>
+  \`,
+};
+`,
+    Menu: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Menu';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Menu',
+  component: 'ag-menu-button',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    menuVariant: { control: 'select', options: ['chevron', 'button', 'icon'] },
+    size: { control: 'select', options: ['x-sm', 'sm', 'md', 'lg', 'xl'] },
+    disabled: { control: 'boolean' },
+  },
+  args: { label: 'Actions', menuVariant: 'chevron', size: 'md' },
+  render: (args: any) => html\`
+    <div style="padding: 3rem;">
+      <ag-menu-button
+        .menuVariant=\${args.menuVariant}
+        .size=\${args.size}
+        ?disabled=\${args.disabled}
+      >
+        \${args.label}
+        <ag-menu slot="menu" .ariaLabel=\${'Menu options'}>
+          <ag-menu-item .value=\${'edit'}>Edit</ag-menu-item>
+          <ag-menu-item .value=\${'duplicate'}>Duplicate</ag-menu-item>
+          <ag-menu-separator></ag-menu-separator>
+          <ag-menu-item .value=\${'delete'}>Delete</ag-menu-item>
+        </ag-menu>
+      </ag-menu-button>
+    </div>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => html\`
+    <div style="padding: 3rem; display: flex; gap: 2rem; flex-wrap: wrap;">
+      <ag-menu-button .menuVariant=\${'chevron'}>
+        Chevron
+        <ag-menu slot="menu" .ariaLabel=\${'Options'}>
+          <ag-menu-item .value=\${'a'}>Option A</ag-menu-item>
+          <ag-menu-item .value=\${'b'}>Option B</ag-menu-item>
+          <ag-menu-item .value=\${'c'}>Option C</ag-menu-item>
+        </ag-menu>
+      </ag-menu-button>
+      <ag-menu-button .menuVariant=\${'button'}>
+        Button
+        <ag-menu slot="menu" .ariaLabel=\${'Options'}>
+          <ag-menu-item .value=\${'a'}>Option A</ag-menu-item>
+          <ag-menu-item .value=\${'b'}>Option B</ag-menu-item>
+        </ag-menu>
+      </ag-menu-button>
+      <ag-menu-button .menuVariant=\${'icon'}>
+        Menu
+        <ag-menu slot="menu" .ariaLabel=\${'Options'}>
+          <ag-menu-item .value=\${'a'}>Option A</ag-menu-item>
+          <ag-menu-item .value=\${'b'}>Option B</ag-menu-item>
+        </ag-menu>
+      </ag-menu-button>
+    </div>
+  \`,
+};
+`,
+    Fieldset: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Fieldset';
+import '../../Input/core/Input';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Fieldset',
+  component: 'ag-fieldset',
+  tags: ['autodocs'],
+  argTypes: {
+    legend: { control: 'text' },
+    bordered: { control: 'boolean' },
+    layout: { control: 'select', options: ['vertical', 'horizontal'] },
+  },
+  args: { legend: 'Personal Information', bordered: false, layout: 'vertical' },
+  render: (args: any) => html\`
+    <ag-fieldset
+      .legend=\${args.legend}
+      ?bordered=\${args.bordered}
+      .layout=\${args.layout}
+    >
+      <ag-input id="first-name" name="first-name" label="First Name" placeholder="Jane"></ag-input>
+      <ag-input id="last-name" name="last-name" label="Last Name" placeholder="Doe"></ag-input>
+      <ag-input id="email" name="email" label="Email" type="email" placeholder="jane@example.com"></ag-input>
+    </ag-fieldset>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Bordered: Story = { args: { bordered: true } };
+`,
+    IntlFormatter: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './IntlFormatter';
+
+const meta: Meta = {
+  title: 'AgnosticUI/IntlFormatter',
+  component: 'ag-intl-formatter',
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['number', 'date', 'currency', 'percent'] },
+    lang: { control: 'text' },
+    value: { control: 'text' },
+  },
+  args: { type: 'number', value: '1234567.89', lang: 'en-US' },
+  render: (args: any) => html\`
+    <ag-intl-formatter
+      .type=\${args.type}
+      .value=\${args.value}
+      .lang=\${args.lang}
+    ></ag-intl-formatter>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Currency: Story = {
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <ag-intl-formatter .type=\${'currency'} .value=\${'1234.56'} .lang=\${'en-US'} .currency=\${'USD'}></ag-intl-formatter>
+      <ag-intl-formatter .type=\${'currency'} .value=\${'1234.56'} .lang=\${'de-DE'} .currency=\${'EUR'}></ag-intl-formatter>
+    </div>
+  \`,
+};
+
+export const DateFormat: Story = {
+  render: () => html\`
+    <ag-intl-formatter .type=\${'date'} .date=\${new Date().toISOString()} .lang=\${'en-US'} .dateStyle=\${'long'}></ag-intl-formatter>
+  \`,
+};
+`,
+    Popover: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Popover';
+import '../../Button/core/Button';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Popover',
+  component: 'ag-popover',
+  tags: ['autodocs'],
+  argTypes: {
+    placement: { control: 'select', options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'] },
+    arrow: { control: 'boolean' },
+    triggerType: { control: 'select', options: ['click', 'hover', 'focus'] },
+    showCloseButton: { control: 'boolean' },
+  },
+  args: { placement: 'bottom', arrow: true, triggerType: 'click', showCloseButton: true },
+  render: (args: any) => html\`
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <ag-popover
+        .placement=\${args.placement}
+        ?arrow=\${args.arrow}
+        .triggerType=\${args.triggerType}
+        ?showCloseButton=\${args.showCloseButton}
+        .closeLabel=\${'Close'}
+      >
+        <ag-button slot="trigger">Open Popover</ag-button>
+        <span slot="title">Popover Title</span>
+        <div slot="content" style="padding: 0.5rem 0;">
+          <p>This is the popover content. It can contain any HTML.</p>
+        </div>
+      </ag-popover>
+    </div>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const HoverTrigger: Story = {
+  args: { triggerType: 'hover', placement: 'top', arrow: true },
+};
+`,
+    Tabs: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Tabs';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Tabs',
+  component: 'ag-tabs',
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+    activation: { control: 'select', options: ['manual', 'automatic'] },
+  },
+  args: { orientation: 'horizontal', activation: 'manual' },
+  render: (args: any) => html\`
+    <ag-tabs
+      aria-label="Example Tabs"
+      .orientation=\${args.orientation}
+      .activation=\${args.activation}
+    >
+      <ag-tab slot="tab" panel="p1">Overview</ag-tab>
+      <ag-tab slot="tab" panel="p2">Features</ag-tab>
+      <ag-tab slot="tab" panel="p3">Pricing</ag-tab>
+      <ag-tab-panel slot="panel" panel="p1">
+        <div style="padding: 1rem;">
+          <h3>Overview</h3>
+          <p>AgnosticUI is a framework-agnostic component library that works with React, Vue, and Lit.</p>
+        </div>
+      </ag-tab-panel>
+      <ag-tab-panel slot="panel" panel="p2">
+        <div style="padding: 1rem;">
+          <h3>Features</h3>
+          <ul><li>Framework agnostic</li><li>Accessible by default</li><li>Themeable via CSS tokens</li></ul>
+        </div>
+      </ag-tab-panel>
+      <ag-tab-panel slot="panel" panel="p3">
+        <div style="padding: 1rem;">
+          <h3>Pricing</h3>
+          <p>Free and open source under the Apache 2.0 license.</p>
+        </div>
+      </ag-tab-panel>
+    </ag-tabs>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Vertical: Story = { args: { orientation: 'vertical' } };
+`,
+    Timeline: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Timeline';
+import '../../Icon/core/Icon';
+
+const CHECK_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\`;
+const INFO_SVG = html\`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>\`;
+
+const meta: Meta = {
+  title: 'AgnosticUI/Timeline',
+  component: 'ag-timeline',
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+    variant: { control: 'select', options: ['', 'primary', 'success', 'warning', 'danger'] },
+    compact: { control: 'boolean' },
+  },
+  args: { orientation: 'horizontal', variant: '', compact: false },
+  render: (args: any) => html\`
+    <ag-timeline
+      orientation=\${args.orientation}
+      variant=\${args.variant}
+      ?compact=\${args.compact}
+    >
+      <ag-timeline-item>
+        <div slot="ag-start">Jan 2024</div>
+        <div slot="ag-marker">
+          <ag-icon type="success" size="18">\${CHECK_SVG}</ag-icon>
+        </div>
+        <div slot="ag-end">Project Kickoff</div>
+      </ag-timeline-item>
+      <ag-timeline-item>
+        <div slot="ag-start">Mar 2024</div>
+        <div slot="ag-marker">
+          <ag-icon type="info" size="18">\${INFO_SVG}</ag-icon>
+        </div>
+        <div slot="ag-end">Beta Release</div>
+      </ag-timeline-item>
+      <ag-timeline-item>
+        <div slot="ag-start">Jun 2024</div>
+        <div slot="ag-marker">
+          <ag-icon type="success" size="18">\${CHECK_SVG}</ag-icon>
+        </div>
+        <div slot="ag-end">v1.0 Launch</div>
+      </ag-timeline-item>
+    </ag-timeline>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Vertical: Story = { args: { orientation: 'vertical' } };
+`,
+    Sidebar: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Sidebar';
+import '../../SidebarNav/core/SidebarNav';
+import '../../Popover/core/Popover';
+
+const HOME_SVG = \`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>\`;
+const FOLDER_SVG = \`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>\`;
+const USER_SVG = \`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>\`;
+const SETTINGS_SVG = \`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>\`;
+const CHEVRON_RIGHT_SVG = \`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>\`;
+const PANEL_TOGGLE_SVG = \`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>\`;
+
+const NAV_STYLES = \`
+  .nav-button {
+    display: flex;
+    align-items: center;
+    gap: var(--ag-space-3);
+    position: relative;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    border: none;
+    background: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+    color: inherit;
+  }
+  .nav-button svg { flex-shrink: 0; }
+  .nav-button:hover { background: var(--ag-background-secondary); }
+  .nav-button.active {
+    background: var(--ag-primary-background);
+    color: var(--ag-primary-text);
+    font-weight: 500;
+  }
+  .nav-label {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: opacity var(--ag-sidebar-transition-duration) var(--ag-sidebar-transition-easing);
+  }
+  .chevron {
+    display: flex;
+    align-items: center;
+    transition: transform var(--ag-fx-duration-md), opacity var(--ag-fx-duration-sm);
+    margin-left: auto;
+  }
+  .nav-button[aria-expanded="true"] .chevron { transform: rotate(90deg); }
+  ag-sidebar[collapsed] .nav-label,
+  ag-sidebar[collapsed] .chevron {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+  }
+  ag-sidebar[collapsed] .nav-button {
+    width: auto;
+    padding: var(--ag-space-2);
+  }
+  ag-sidebar[collapsed] ag-sidebar-nav-submenu:not(.popover-submenu),
+  ag-sidebar:not([collapsed]) ag-popover,
+  ag-sidebar[collapsed] .nav-button-expanded,
+  ag-sidebar:not([collapsed]) .nav-button-collapsed {
+    display: none !important;
+  }
+  ag-sidebar[collapsed] ag-popover.nav-button-collapsed {
+    display: block !important;
+  }
+  ag-sidebar-nav-submenu {
+    display: none;
+    overflow: hidden;
+  }
+  ag-sidebar-nav-submenu[open] {
+    display: block;
+  }
+  .nav-sublink {
+    display: block;
+    padding: var(--ag-space-2) var(--ag-space-3);
+    margin-block-end: var(--ag-space-1);
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--ag-radius-sm);
+    transition: background var(--ag-fx-duration-sm);
+  }
+  .nav-sublink:hover { background: var(--ag-background-secondary); }
+  .nav-button-collapsed::part(ag-popover-body) { padding: var(--ag-space-1); }
+\`;
+
+const handleSubmenuToggle = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+  const button = e.currentTarget as HTMLElement;
+  const navItem = button.closest('ag-sidebar-nav-item');
+  if (!navItem) return;
+  const submenu = navItem.querySelector('ag-sidebar-nav-submenu');
+  if (!submenu) return;
+  const isExpanded = button.getAttribute('aria-expanded') === 'true';
+  button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+  if (isExpanded) submenu.removeAttribute('open');
+  else submenu.setAttribute('open', '');
+};
+
+const toggleCollapse = (e: Event) => {
+  const sidebar = (e.target as HTMLElement).closest('ag-sidebar') as any;
+  if (sidebar && sidebar.toggleCollapse) sidebar.toggleCollapse();
+};
+
+const meta: Meta = {
+  title: 'AgnosticUI/Sidebar',
+  component: 'ag-sidebar',
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    collapsed: { control: 'boolean' },
+    variant: { control: 'select', options: ['default', 'bordered', 'elevated'] },
+  },
+  args: { collapsed: false, variant: 'default' },
+  render: (args: any) => html\`
+    <style>\${NAV_STYLES}</style>
+    <div style="position: relative; display: flex; height: 500px; border: 1px solid var(--ag-border-color); border-radius: 0.5rem; overflow: hidden; contain: layout;">
+      <ag-sidebar
+        ?collapsed=\${args.collapsed}
+        .variant=\${args.variant}
+        aria-label="Main navigation"
+        show-mobile-toggle
+      >
+        <h2 slot="ag-header-start" style="margin: 0; font-size: 1.125rem; font-weight: 600;">Dashboard</h2>
+        <button
+          type="button"
+          slot="ag-header-toggle"
+          aria-label="Toggle sidebar"
+          style="background: none; border: none; padding: 8px 0; cursor: pointer; display: flex; align-items: center; color: inherit;"
+          @click=\${toggleCollapse}
+        >
+          <span .innerHTML=\${PANEL_TOGGLE_SVG}></span>
+        </button>
+
+        <ag-sidebar-nav>
+          <ag-sidebar-nav-item>
+            <button type="button" class="nav-button active" aria-current="page">
+              <span .innerHTML=\${HOME_SVG}></span>
+              <span class="nav-label">Dashboard</span>
+            </button>
+          </ag-sidebar-nav-item>
+
+          <ag-sidebar-nav-item>
+            <button type="button" class="nav-button nav-button-expanded" aria-expanded="false" @click=\${handleSubmenuToggle}>
+              <span .innerHTML=\${FOLDER_SVG}></span>
+              <span class="nav-label">Projects</span>
+              <span class="chevron"><span .innerHTML=\${CHEVRON_RIGHT_SVG}></span></span>
+            </button>
+            <ag-popover class="nav-button-collapsed" placement="right-start" trigger-type="click" distance="8" arrow>
+              <button slot="trigger" type="button" class="nav-button">
+                <span .innerHTML=\${FOLDER_SVG}></span>
+              </button>
+              <ag-sidebar-nav-popover-submenu slot="content">
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Alpha</a>
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Beta</a>
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Gamma</a>
+              </ag-sidebar-nav-popover-submenu>
+            </ag-popover>
+            <ag-sidebar-nav-submenu>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Alpha</a>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Beta</a>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Project Gamma</a>
+            </ag-sidebar-nav-submenu>
+          </ag-sidebar-nav-item>
+
+          <ag-sidebar-nav-item>
+            <button type="button" class="nav-button">
+              <span .innerHTML=\${USER_SVG}></span>
+              <span class="nav-label">Team</span>
+            </button>
+          </ag-sidebar-nav-item>
+
+          <ag-sidebar-nav-item>
+            <button type="button" class="nav-button nav-button-expanded" aria-expanded="false" @click=\${handleSubmenuToggle}>
+              <span .innerHTML=\${SETTINGS_SVG}></span>
+              <span class="nav-label">Settings</span>
+              <span class="chevron"><span .innerHTML=\${CHEVRON_RIGHT_SVG}></span></span>
+            </button>
+            <ag-popover class="nav-button-collapsed" placement="right-start" trigger-type="click" distance="8" arrow>
+              <button slot="trigger" type="button" class="nav-button">
+                <span .innerHTML=\${SETTINGS_SVG}></span>
+              </button>
+              <ag-sidebar-nav-popover-submenu slot="content">
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Profile</a>
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Billing</a>
+                <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Security</a>
+              </ag-sidebar-nav-popover-submenu>
+            </ag-popover>
+            <ag-sidebar-nav-submenu>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Profile</a>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Billing</a>
+              <a href="#" class="nav-sublink" @click=\${(e: Event) => e.preventDefault()}>Security</a>
+            </ag-sidebar-nav-submenu>
+          </ag-sidebar-nav-item>
+        </ag-sidebar-nav>
+
+        <div slot="ag-footer" style="font-size: 0.875rem; color: var(--ag-text-secondary);">
+          © 2024 Company
+        </div>
+      </ag-sidebar>
+
+      <main style="flex: 1; padding: 2rem; overflow: auto; background: var(--ag-background);">
+        <h1 style="margin-top: 0;">Main Content</h1>
+        <p>Click the panel toggle button to collapse the sidebar into rail mode.</p>
+        <p>When collapsed, click icon-only items with submenus to see them in popovers.</p>
+      </main>
+    </div>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Collapsed: Story = { args: { collapsed: true } };
+
+export const Elevated: Story = { args: { variant: 'elevated' } };
+`,
+    ScrollToButton: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './ScrollToButton';
+
+const meta: Meta = {
+  title: 'AgnosticUI/ScrollToButton',
+  component: 'ag-scroll-to-button',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    target: { control: 'select', options: ['top', 'bottom'] },
+    scrollThreshold: { control: 'number' },
+    smoothScroll: { control: 'boolean' },
+    showLabel: { control: 'boolean' },
+  },
+  args: { label: 'Back to Top', target: 'top', scrollThreshold: 400, smoothScroll: true, showLabel: false },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: any) => html\`
+    <div style="min-height: 200vh; padding: 2rem; position: relative;">
+      <h2>Scroll Down to See the Button</h2>
+      <p>The scroll-to-top button appears after scrolling \${args.scrollThreshold}px.</p>
+      <div style="margin-top: 1rem; padding: 1rem; background: var(--ag-background-secondary, #f9fafb); border-radius: 0.5rem;">
+        Scroll down this panel to trigger the floating button.
+      </div>
+      \${Array.from({ length: 20 }, (_, i) => html\`<p style="margin: 1.5rem 0;">Paragraph \${i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\`)}
+      <ag-scroll-to-button
+        .label=\${args.label}
+        .target=\${args.target}
+        .scrollThreshold=\${args.scrollThreshold}
+        ?smoothScroll=\${args.smoothScroll}
+        ?showLabel=\${args.showLabel}
+      ></ag-scroll-to-button>
+    </div>
+  \`,
+};
+`,
+    ScrollProgress: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './ScrollProgress';
+
+const LOREM = Array.from({ length: 40 }, (_, i) =>
+  \`<p style="margin: 1rem 0; line-height: 1.6; max-width: 700px;">Paragraph \${i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>\`
+).join('');
+
+const meta: Meta = {
+  title: 'AgnosticUI/ScrollProgress',
+  component: 'ag-scroll-progress',
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    mode: { control: 'select', options: ['bar', 'dot-trail', 'badge', 'ring'] },
+    orientation: { control: 'select', options: ['top', 'bottom'] },
+  },
+  args: { mode: 'bar', orientation: 'top' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const BarTop: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => html\`
+    <ag-scroll-progress .mode=\${'bar'} .orientation=\${'top'}></ag-scroll-progress>
+    <div style="padding: 2rem;">
+      <h2>Bar — Top</h2>
+      <p>Scroll down. The progress bar fills along the <strong>top</strong> of the page.</p>
+      <div .innerHTML=\${LOREM}></div>
+    </div>
+  \`,
+};
+
+export const BarBottom: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => html\`
+    <ag-scroll-progress .mode=\${'bar'} .orientation=\${'bottom'}></ag-scroll-progress>
+    <div style="padding: 2rem;">
+      <h2>Bar — Bottom</h2>
+      <p>Scroll down. The progress bar fills along the <strong>bottom</strong> of the page.</p>
+      <div .innerHTML=\${LOREM}></div>
+    </div>
+  \`,
+};
+
+export const DotTrail: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => html\`
+    <div style="position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 100;
+                background: var(--ag-background, white); border-radius: 2rem; padding: 0.5rem 1rem;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
+      <ag-scroll-progress .mode=\${'dot-trail'} .dots=\${7}></ag-scroll-progress>
+    </div>
+    <div style="padding: 2rem;">
+      <h2>Dot Trail</h2>
+      <p>Scroll down. The dots at the bottom of the page fill in to show progress.</p>
+      <div .innerHTML=\${LOREM}></div>
+    </div>
+  \`,
+};
+
+export const Badge: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => html\`
+    <div style="position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;">
+      <ag-scroll-progress .mode=\${'badge'} .badgeVariant=\${'info'}></ag-scroll-progress>
+    </div>
+    <div style="padding: 2rem;">
+      <h2>Badge</h2>
+      <p>Scroll down. The percentage badge in the bottom-right updates as you scroll.</p>
+      <div .innerHTML=\${LOREM}></div>
+    </div>
+  \`,
+};
+
+export const Ring: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => html\`
+    <div style="position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;">
+      <ag-scroll-progress .mode=\${'ring'} .ringSize=\${48} .ringVariant=\${'primary'}></ag-scroll-progress>
+    </div>
+    <div style="padding: 2rem;">
+      <h2>Ring</h2>
+      <p>Scroll down. The progress ring in the bottom-right fills as you scroll.</p>
+      <div .innerHTML=\${LOREM}></div>
+    </div>
+  \`,
+};
+`,
+    Toast: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Toast';
+import '../../Button/core/Button';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Toast',
+  component: 'ag-toast',
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['info', 'success', 'warning', 'danger', 'error'] },
+    position: { control: 'select', options: ['top-end', 'top', 'top-start', 'bottom-end', 'bottom', 'bottom-start'] },
+    autoDismiss: { control: 'boolean' },
+    showCloseButton: { control: 'boolean' },
+    bordered: { control: 'boolean' },
+    rounded: { control: 'boolean' },
+  },
+  args: {
+    type: 'info',
+    position: 'top-end',
+    autoDismiss: false,
+    showCloseButton: true,
+    bordered: false,
+    rounded: true,
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: any) => html\`
+    <div style="min-height: 200px; padding: 1rem;">
+      <ag-button
+        @click=\${(e: Event) => {
+          const toast = (e.target as HTMLElement).parentElement?.querySelector('ag-toast') as any;
+          if (toast) { toast.open = false; requestAnimationFrame(() => { toast.open = true; }); }
+        }}
+      >Show Toast</ag-button>
+      <ag-toast
+        .open=\${args.open ?? false}
+        .type=\${args.type}
+        .position=\${args.position}
+        .autoDismiss=\${args.autoDismiss}
+        .showCloseButton=\${args.showCloseButton}
+        .bordered=\${args.bordered}
+        .rounded=\${args.rounded}
+        @toast-close=\${(e: Event) => { (e.target as any).open = false; }}
+      >
+        Toast notification message here.
+      </ag-toast>
+    </div>
+  \`,
+};
+
+export const TopStart: Story = {
+  render: () => html\`
+    <div style="min-height: 200px; padding: 1rem;">
+      <ag-toast .open=\${true} type="success" .position=\${'top-start'} .showCloseButton=\${true}>
+        Saved successfully!
+      </ag-toast>
+      <p>Toast anchored to top-start.</p>
+    </div>
+  \`,
+};
+
+export const BottomEnd: Story = {
+  render: () => html\`
+    <div style="min-height: 200px; padding: 1rem;">
+      <ag-toast .open=\${true} type="warning" .position=\${'bottom-end'} .showCloseButton=\${true}>
+        Warning: low disk space.
+      </ag-toast>
+      <p>Toast anchored to bottom-end.</p>
+    </div>
+  \`,
+};
+
+export const BottomCenter: Story = {
+  render: () => html\`
+    <div style="min-height: 200px; padding: 1rem;">
+      <ag-toast .open=\${true} type="danger" .position=\${'bottom'} .showCloseButton=\${true}>
+        Connection lost. Retrying...
+      </ag-toast>
+      <p>Toast anchored to bottom-center.</p>
+    </div>
+  \`,
+};
+`,
+    Tooltip: `import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './Tooltip';
+
+const meta: Meta = {
+  title: 'AgnosticUI/Tooltip',
+  component: 'ag-tooltip',
+  tags: ['autodocs'],
+  argTypes: {
+    content: { control: 'text' },
+    placement: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+    disabled: { control: 'boolean' },
+  },
+  args: { content: 'This is a helpful tooltip', placement: 'top', disabled: false },
+  render: (args: any) => html\`
+    <div style="display: flex; justify-content: center; padding: 4rem;">
+      <ag-tooltip
+        .content=\${args.content}
+        .placement=\${args.placement}
+        ?disabled=\${args.disabled}
+      >
+        <button>Hover over me</button>
+      </ag-tooltip>
+    </div>
+  \`,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Placements: Story = {
+  render: () => html\`
+    <div style="display: flex; gap: 2rem; justify-content: center; align-items: center; padding: 5rem 2rem;">
+      <ag-tooltip content="Top tooltip" placement="top">
+        <button>Top</button>
+      </ag-tooltip>
+      <ag-tooltip content="Bottom tooltip" placement="bottom">
+        <button>Bottom</button>
+      </ag-tooltip>
+      <ag-tooltip content="Left tooltip" placement="left">
+        <button>Left</button>
+      </ag-tooltip>
+      <ag-tooltip content="Right tooltip" placement="right">
+        <button>Right</button>
+      </ag-tooltip>
+    </div>
+  \`,
+};
+`,
+};
+export function generateLitStory(name) {
+    // Check for override first
+    if (LIT_STORY_OVERRIDES[name]) {
+        return STORY_FILE_HEADER + LIT_STORY_OVERRIDES[name];
+    }
+    const tag = getAgTagName(name);
+    // For import path, the side-effect import uses the PascalCase name
+    // e.g. import './Button' or import './SkeletonLoader'
+    const lines = [];
+    // Imports
+    lines.push(`import type { Meta, StoryObj } from '@storybook/web-components';`);
+    lines.push(`import { html } from 'lit';`);
+    // Side-effect import to register custom element
+    if (OPEN_CONTROLLED_COMPONENTS.has(name) && name !== 'Collapsible') {
+        lines.push(`import './${name}';`);
+        lines.push(`import '../../Button/core/Button';`);
+    }
+    else {
+        lines.push(`import './${name}';`);
+    }
+    lines.push('');
+    // Sample data for Combobox
+    if (name === 'Combobox') {
+        lines.push(`const FRUITS = [`);
+        lines.push(`  { value: 'apple', label: 'Apple' },`);
+        lines.push(`  { value: 'banana', label: 'Banana' },`);
+        lines.push(`  { value: 'cherry', label: 'Cherry' },`);
+        lines.push(`  { value: 'grape', label: 'Grape' },`);
+        lines.push(`  { value: 'mango', label: 'Mango' },`);
+        lines.push(`  { value: 'orange', label: 'Orange' },`);
+        lines.push(`];`);
+        lines.push('');
+    }
+    const argTypes = ARGTYPES[name] ?? '';
+    // Build default args for Lit
+    let litArgs = '';
+    if (name === 'Button') {
+        litArgs = `  args: {
+    variant: '',
+    size: 'md',
+    shape: '',
+    bordered: false,
+    ghost: false,
+    disabled: false,
+    loading: false,
+    label: 'Button',
+  },`;
+    }
+    else if (name === 'Dialog') {
+        litArgs = `  args: {
+    open: false,
+    heading: 'Dialog title',
+    description: 'Supporting description text goes here.',
+    showCloseButton: true,
+  },`;
+    }
+    else if (name === 'Drawer') {
+        litArgs = `  args: {
+    open: false,
+    heading: 'Drawer',
+    showCloseButton: true,
+  },`;
+    }
+    else if (name === 'Toast') {
+        litArgs = `  args: {
+    open: false,
+    type: 'info',
+    position: 'top-right',
+    showCloseButton: true,
+  },`;
+    }
+    else if (name === 'Combobox') {
+        litArgs = `  args: {
+    options: FRUITS,
+    label: 'Select a fruit',
+    placeholder: 'Choose...',
+  },`;
+    }
+    else if (FX_COMPONENTS.has(name)) {
+        const defaultLabel = name === 'BadgeFx' ? 'BadgeFx' : name === 'ButtonFx' ? 'Click me' : name;
+        litArgs = `  args: {
+    fx: 'bounce',
+    label: '${defaultLabel}',
+  },`;
+    }
+    else if (TEXT_CHILD_COMPONENTS.has(name)) {
+        litArgs = `  args: {
+    label: '${name}',
+  },`;
+    }
+    // Build render for meta level (only simple/text-child components, not open-controlled)
+    let litRender = '';
+    if (!OPEN_CONTROLLED_COMPONENTS.has(name) && name !== 'Button' && name !== 'Combobox') {
+        if (TEXT_CHILD_COMPONENTS.has(name)) {
+            litRender = `  render: (args: any) => html\`<${tag}>\${args.label}</${tag}>\`,`;
+        }
+        else if (FX_COMPONENTS.has(name)) {
+            litRender = `  render: (args: any) => html\`<${tag} fx=\${args.fx}>\${args.label}</${tag}>\`,`;
+        }
+        else {
+            litRender = `  render: (args: any) => html\`<${tag}></${tag}>\`,`;
+        }
+    }
+    else if (name === 'Combobox') {
+        litRender = `  render: (args: any) => html\`
+    <${tag}
+      .options=\${args.options}
+      label=\${args.label}
+      placeholder=\${args.placeholder}
+      ?clearable=\${args.clearable}
+      ?disabled=\${args.disabled}
+      ?multiple=\${args.multiple}
+      ?invalid=\${args.invalid}
+    ></${tag}>
+  \`,`;
+    }
+    else if (name === 'Button') {
+        litRender = `  render: (args: any) => html\`
+    <ag-button
+      variant=\${args.variant}
+      size=\${args.size}
+      shape=\${args.shape}
+      ?bordered=\${args.bordered}
+      ?ghost=\${args.ghost}
+      ?disabled=\${args.disabled}
+      ?loading=\${args.loading}
+    >\${args.label}</ag-button>
+  \`,`;
+    }
+    const metaParts = [];
+    metaParts.push(`  title: 'AgnosticUI/${name}',`);
+    metaParts.push(`  component: '${tag}',`);
+    metaParts.push(`  tags: ['autodocs'],`);
+    const needsLabelArgType = TEXT_CHILD_COMPONENTS.has(name) || FX_COMPONENTS.has(name);
+    if (argTypes) {
+        // For Lit, add a label argType for TEXT_CHILD and FX components
+        if (needsLabelArgType) {
+            // Insert label control before the closing '  },' of the argTypes block
+            const closingIdx = argTypes.lastIndexOf('\n  },');
+            if (closingIdx !== -1) {
+                const modified = argTypes.slice(0, closingIdx) + '\n    label: { control: \'text\' },' + argTypes.slice(closingIdx);
+                metaParts.push(modified);
+            }
+            else {
+                metaParts.push(argTypes);
+            }
+        }
+        else {
+            metaParts.push(argTypes);
+        }
+    }
+    else if (needsLabelArgType) {
+        metaParts.push(`  argTypes: {\n    label: { control: 'text' },\n  },`);
+    }
+    if (litArgs) {
+        metaParts.push(litArgs);
+    }
+    if (litRender) {
+        metaParts.push(litRender);
+    }
+    lines.push(`const meta: Meta = {`);
+    lines.push(metaParts.join('\n'));
+    lines.push(`} satisfies Meta;`);
+    lines.push('');
+    lines.push(`export default meta;`);
+    lines.push(`type Story = StoryObj;`);
+    lines.push('');
+    // Default story
+    if (name === 'Dialog') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => html\``);
+        lines.push(`    <div>`);
+        lines.push(`      <ag-button`);
+        lines.push(`        @click=\${(e: Event) => {`);
+        lines.push(`          const dialog = (e.target as HTMLElement).parentElement?.querySelector('${tag}') as any;`);
+        lines.push(`          if (dialog) dialog.open = true;`);
+        lines.push(`        }}`);
+        lines.push(`      >Open Dialog</ag-button>`);
+        lines.push(`      <${tag}`);
+        lines.push(`        .open=\${args.open}`);
+        lines.push(`        .heading=\${args.heading}`);
+        lines.push(`        .showCloseButton=\${args.showCloseButton}`);
+        lines.push(`        @dialog-close=\${(e: Event) => { (e.target as any).open = false; }}`);
+        lines.push(`        @dialog-cancel=\${(e: Event) => { (e.target as any).open = false; }}`);
+        lines.push(`      >`);
+        lines.push(`        <p>Dialog content goes here.</p>`);
+        lines.push(`      </${tag}>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+    }
+    else if (name === 'Drawer') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => html\``);
+        lines.push(`    <div>`);
+        lines.push(`      <ag-button`);
+        lines.push(`        @click=\${(e: Event) => {`);
+        lines.push(`          const drawer = (e.target as HTMLElement).parentElement?.querySelector('${tag}') as any;`);
+        lines.push(`          if (drawer) drawer.open = true;`);
+        lines.push(`        }}`);
+        lines.push(`      >Open Drawer</ag-button>`);
+        lines.push(`      <${tag}`);
+        lines.push(`        .open=\${args.open}`);
+        lines.push(`        .heading=\${args.heading}`);
+        lines.push(`        .showCloseButton=\${args.showCloseButton}`);
+        lines.push(`        @drawer-close=\${(e: Event) => { (e.target as any).open = false; }}`);
+        lines.push(`        @drawer-cancel=\${(e: Event) => { (e.target as any).open = false; }}`);
+        lines.push(`      >`);
+        lines.push(`        <div style="padding: 1rem">Drawer content goes here.</div>`);
+        lines.push(`      </${tag}>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+    }
+    else if (name === 'Toast') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: (args: any) => html\``);
+        lines.push(`    <div>`);
+        lines.push(`      <ag-button`);
+        lines.push(`        @click=\${(e: Event) => {`);
+        lines.push(`          const toast = (e.target as HTMLElement).parentElement?.querySelector('${tag}') as any;`);
+        lines.push(`          if (toast) toast.open = true;`);
+        lines.push(`        }}`);
+        lines.push(`      >Show Toast</ag-button>`);
+        lines.push(`      <${tag}`);
+        lines.push(`        .open=\${args.open}`);
+        lines.push(`        type=\${args.type}`);
+        lines.push(`        position=\${args.position}`);
+        lines.push(`        ?showCloseButton=\${args.showCloseButton}`);
+        lines.push(`        @toast-close=\${(e: Event) => { (e.target as any).open = false; }}`);
+        lines.push(`      >`);
+        lines.push(`        <span>Toast notification message</span>`);
+        lines.push(`      </${tag}>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+    }
+    else if (name === 'Collapsible') {
+        lines.push(`export const Default: Story = {`);
+        lines.push(`  render: () => html\``);
+        lines.push(`    <${tag}>`);
+        lines.push(`      <span slot="summary">Toggle details</span>`);
+        lines.push(`      <div>Collapsible content goes here.</div>`);
+        lines.push(`    </${tag}>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+    }
+    else if (name === 'Button') {
+        lines.push(`export const Default: Story = {};`);
+        lines.push('');
+        lines.push(`export const Variants: Story = {`);
+        lines.push(`  render: () => html\``);
+        lines.push(`    <div style="display:flex;gap:8px;flex-wrap:wrap">`);
+        lines.push(`      <ag-button>Default</ag-button>`);
+        lines.push(`      <ag-button variant="primary">Primary</ag-button>`);
+        lines.push(`      <ag-button variant="secondary">Secondary</ag-button>`);
+        lines.push(`      <ag-button variant="success">Success</ag-button>`);
+        lines.push(`      <ag-button variant="warning">Warning</ag-button>`);
+        lines.push(`      <ag-button variant="danger">Danger</ag-button>`);
+        lines.push(`      <ag-button variant="monochrome">Monochrome</ag-button>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Sizes: Story = {`);
+        lines.push(`  render: () => html\``);
+        lines.push(`    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">`);
+        lines.push(`      <ag-button size="x-sm">x-sm</ag-button>`);
+        lines.push(`      <ag-button size="sm">sm</ag-button>`);
+        lines.push(`      <ag-button size="md">md</ag-button>`);
+        lines.push(`      <ag-button size="lg">lg</ag-button>`);
+        lines.push(`      <ag-button size="xl">xl</ag-button>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Bordered: Story = {`);
+        lines.push(`  render: () => html\``);
+        lines.push(`    <div style="display:flex;gap:8px;flex-wrap:wrap">`);
+        lines.push(`      <ag-button bordered>Default</ag-button>`);
+        lines.push(`      <ag-button variant="primary" bordered>Primary</ag-button>`);
+        lines.push(`      <ag-button variant="success" bordered>Success</ag-button>`);
+        lines.push(`      <ag-button variant="danger" bordered>Danger</ag-button>`);
+        lines.push(`    </div>`);
+        lines.push(`  \`,`);
+        lines.push(`};`);
+        lines.push('');
+        lines.push(`export const Disabled: Story = { args: { variant: 'primary', disabled: true } };`);
+        lines.push(`export const Loading: Story = { args: { variant: 'primary', loading: true } };`);
+    }
+    else {
+        lines.push(`export const Default: Story = {};`);
+    }
+    return STORY_FILE_HEADER + lines.join('\n') + '\n';
 }
 //# sourceMappingURL=stories.js.map