@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-layout/rel-layout.stories.ts

@@ -1,713 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-layout';
-
-/**
- * The Layout component provides a responsive grid system for organizing content.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Flexible Grid System**: Customizable columns (default 4)
- * - **Responsive Breakpoints**: Automatically adapts to screen sizes
- * - **Customizable Gap**: Control spacing between grid items
- * - **Optional Responsive Mode**: Toggle responsive behavior on/off
- * - **Token-Based Styling**: Uses design system tokens
- */
-const meta: Meta = {
-  title: 'Components/Layout',
-  tags: ['autodocs'],
-  component: 'rel-layout',
-  argTypes: {
-    gap: {
-      control: { type: 'text' },
-      description: 'Gap between grid items',
-      table: {
-        defaultValue: { summary: '1rem' },
-        type: { summary: 'string' },
-      },
-    },
-    columns: {
-      control: { type: 'number', min: 1, max: 12 },
-      description: 'Number of columns in the grid',
-      table: {
-        defaultValue: { summary: '4' },
-        type: { summary: 'number' },
-      },
-    },
-    responsive: {
-      control: { type: 'boolean' },
-      description: 'Enable responsive breakpoints (4→3→2→1 columns)',
-      table: {
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-layout
-      gap="${args.gap || '1rem'}"
-      columns="${args.columns || 4}"
-      ?responsive="${args.responsive !== false}">
-      <div style="background: #e3f2fd; padding: 20px; text-align: center; border-radius: 8px;">Item 1</div>
-      <div style="background: #f3e5f5; padding: 20px; text-align: center; border-radius: 8px;">Item 2</div>
-      <div style="background: #e8f5e9; padding: 20px; text-align: center; border-radius: 8px;">Item 3</div>
-      <div style="background: #fff3e0; padding: 20px; text-align: center; border-radius: 8px;">Item 4</div>
-    </rel-layout>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default 4-column responsive grid
- */
-export const Default: Story = {
-  args: {
-    gap: '1rem',
-    columns: 4,
-    responsive: true,
-  },
-};
-
-/**
- * 2-column grid layout
- */
-export const TwoColumns: Story = {
-  render: () => html`
-    <rel-layout columns="2" gap="1.5rem">
-      <div style="background: var(--rel-colors-blue-tertiary); color: white; padding: 24px; border-radius: 8px;">
-        <h3 style="margin: 0 0 8px;">Column 1</h3>
-        <p style="margin: 0;">Content in first column</p>
-      </div>
-      <div style="background: var(--rel-colors-green-success); color: white; padding: 24px; border-radius: 8px;">
-        <h3 style="margin: 0 0 8px;">Column 2</h3>
-        <p style="margin: 0;">Content in second column</p>
-      </div>
-    </rel-layout>
-  `,
-};
-
-/**
- * 3-column grid layout
- */
-export const ThreeColumns: Story = {
-  render: () => html`
-    <rel-layout columns="3" gap="1rem">
-      <div style="background: #e3f2fd; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 1</div>
-      <div style="background: #f3e5f5; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 2</div>
-      <div style="background: #e8f5e9; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 3</div>
-      <div style="background: #fff3e0; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 4</div>
-      <div style="background: #fce4ec; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 5</div>
-      <div style="background: #e0f2f1; padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center;">Card 6</div>
-    </rel-layout>
-  `,
-};
-
-/**
- * 4-column grid layout (default)
- */
-export const FourColumns: Story = {
-  render: () => html`
-    <rel-layout columns="4" gap="1rem">
-      ${Array.from({ length: 8 }, (_, i) => html`
-        <div style="background: var(--rel-colors-gray-border); padding: 20px; text-align: center; border-radius: 8px; min-height: 80px; display: flex; align-items: center; justify-content: center; color: var(--rel-colors-gray-primary);">
-          Item ${i + 1}
-        </div>
-      `)}
-    </rel-layout>
-  `,
-};
-
-/**
- * 6-column grid layout
- */
-export const SixColumns: Story = {
-  render: () => html`
-    <rel-layout columns="6" gap="0.75rem">
-      ${Array.from({ length: 12 }, (_, i) => html`
-        <div style="background: var(--rel-colors-blue-tertiary); color: white; padding: 16px; text-align: center; border-radius: 6px; min-height: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px;">
-          ${i + 1}
-        </div>
-      `)}
-    </rel-layout>
-  `,
-};
-
-/**
- * Custom gap spacing
- */
-export const CustomGap: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px;">
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Small Gap (0.5rem)</h4>
-        <rel-layout columns="4" gap="0.5rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #e3f2fd; padding: 16px; text-align: center; border-radius: 6px;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Medium Gap (1rem)</h4>
-        <rel-layout columns="4" gap="1rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #f3e5f5; padding: 16px; text-align: center; border-radius: 6px;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Large Gap (2rem)</h4>
-        <rel-layout columns="4" gap="2rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #e8f5e9; padding: 16px; text-align: center; border-radius: 6px;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Non-responsive grid (responsive=false)
- */
-export const NonResponsive: Story = {
-  render: () => html`
-    <div>
-      <p style="color: var(--rel-colors-gray-primary); margin-bottom: 16px;">
-        <strong>Note:</strong> This grid will maintain 4 columns on all screen sizes (resize window to test)
-      </p>
-      <rel-layout columns="4" gap="1rem" responsive="false">
-        ${Array.from({ length: 8 }, (_, i) => html`
-          <div style="background: var(--rel-colors-yellow-pending); padding: 20px; text-align: center; border-radius: 8px; min-height: 80px; display: flex; align-items: center; justify-content: center; color: var(--rel-colors-black);">
-            Item ${i + 1}
-          </div>
-        `)}
-      </rel-layout>
-    </div>
-  `,
-};
-
-/**
- * Dashboard layout example
- */
-export const DashboardLayout: Story = {
-  render: () => html`
-    <rel-layout columns="4" gap="1.5rem">
-      <!-- Main stat cards -->
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <div style="color: var(--rel-colors-gray-placeholder); font-size: 14px; margin-bottom: 8px;">Total Users</div>
-        <div style="font-size: 32px; font-weight: 700; color: var(--rel-colors-blue-tertiary);">1,234</div>
-        <div style="color: var(--rel-colors-green-success); font-size: 12px; margin-top: 8px;">↑ 12% this month</div>
-      </div>
-
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <div style="color: var(--rel-colors-gray-placeholder); font-size: 14px; margin-bottom: 8px;">Revenue</div>
-        <div style="font-size: 32px; font-weight: 700; color: var(--rel-colors-green-success);">$56.7k</div>
-        <div style="color: var(--rel-colors-green-success); font-size: 12px; margin-top: 8px;">↑ 8% this month</div>
-      </div>
-
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <div style="color: var(--rel-colors-gray-placeholder); font-size: 14px; margin-bottom: 8px;">Active Sessions</div>
-        <div style="font-size: 32px; font-weight: 700; color: var(--rel-colors-yellow-pending);">89</div>
-        <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px; margin-top: 8px;">Currently online</div>
-      </div>
-
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <div style="color: var(--rel-colors-gray-placeholder); font-size: 14px; margin-bottom: 8px;">Conversion Rate</div>
-        <div style="font-size: 32px; font-weight: 700; color: var(--rel-colors-blue-tertiary);">3.24%</div>
-        <div style="color: var(--rel-colors-red-secondary); font-size: 12px; margin-top: 8px;">↓ 2% this month</div>
-      </div>
-    </rel-layout>
-  `,
-};
-
-/**
- * Product grid example
- */
-export const ProductGrid: Story = {
-  render: () => html`
-    <rel-layout columns="4" gap="1.5rem">
-      ${Array.from({ length: 8 }, (_, i) => html`
-        <div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--rel-shadows-shadow-200);">
-          <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 160px; display: flex; align-items: center; justify-content: center; color: white; font-size: 48px; font-weight: 700;">
-            ${i + 1}
-          </div>
-          <div style="padding: 16px;">
-            <h4 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">Product ${i + 1}</h4>
-            <p style="margin: 0 0 12px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Product description goes here</p>
-            <div style="font-size: 20px; font-weight: 700; color: var(--rel-colors-blue-tertiary);">$${(i + 1) * 10}.99</div>
-          </div>
-        </div>
-      `)}
-    </rel-layout>
-  `,
-};
-
-/**
- * Image gallery example
- */
-export const ImageGallery: Story = {
-  render: () => html`
-    <rel-layout columns="3" gap="1rem">
-      ${Array.from({ length: 9 }, (_, i) => {
-        const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739'];
-        return html`
-          <div style="background: ${colors[i]}; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 700; box-shadow: var(--rel-shadows-shadow-100);">
-            ${i + 1}
-          </div>
-        `;
-      })}
-    </rel-layout>
-  `,
-};
-
-/**
- * Responsive breakpoints demonstration
- */
-export const ResponsiveBreakpoints: Story = {
-  render: () => html`
-    <div>
-      <div style="background: var(--rel-colors-blue-tertiary); color: white; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
-        <strong>Responsive Behavior:</strong>
-        <ul style="margin: 8px 0 0; padding-left: 20px; font-size: 14px;">
-          <li>Desktop (>1024px): 4 columns</li>
-          <li>Tablet (≤1024px): 3 columns</li>
-          <li>Mobile (≤768px): 2 columns</li>
-          <li>Small Mobile (≤480px): 1 column</li>
-        </ul>
-        <p style="margin: 8px 0 0; font-size: 13px; opacity: 0.9;">Resize your browser window to see the layout adapt!</p>
-      </div>
-      <rel-layout columns="4" gap="1rem" responsive>
-        ${Array.from({ length: 8 }, (_, i) => html`
-          <div style="background: var(--rel-colors-gray-border); padding: 20px; text-align: center; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center; color: var(--rel-colors-gray-primary); font-weight: 600;">
-            Item ${i + 1}
-          </div>
-        `)}
-      </rel-layout>
-    </div>
-  `,
-};
-
-/**
- * Mixed content layout
- */
-export const MixedContent: Story = {
-  render: () => html`
-    <rel-layout columns="3" gap="1.5rem">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading);">Card with Button</h3>
-        <p style="margin: 0 0 16px; color: var(--rel-colors-gray-primary); font-size: 14px;">This card contains a button component inside the grid.</p>
-        <rel-button variant="primary" size="medium">Click Me</rel-button>
-      </div>
-
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading);">Card with Chips</h3>
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-          <rel-chip label="Design" tone="blue"></rel-chip>
-          <rel-chip label="Development" tone="green"></rel-chip>
-          <rel-chip label="Testing" tone="yellow"></rel-chip>
-        </div>
-      </div>
-
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading);">Card with Avatar</h3>
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <rel-avatar size="md" type="text" text="JD"></rel-avatar>
-          <div>
-            <div style="font-weight: 600; color: var(--rel-colors-gray-heading);">John Doe</div>
-            <div style="font-size: 13px; color: var(--rel-colors-gray-placeholder);">Developer</div>
-          </div>
-        </div>
-      </div>
-    </rel-layout>
-  `,
-};
-
-/**
- * 5-column grid layout
- */
-export const FiveColumns: Story = {
-  render: () => html`
-    <rel-layout columns="5" gap="1rem">
-      ${Array.from({ length: 10 }, (_, i) => html`
-        <div style="background: var(--rel-colors-green-success); color: white; padding: 16px; text-align: center; border-radius: 8px; min-height: 80px; display: flex; align-items: center; justify-content: center; font-weight: 600;">
-          ${i + 1}
-        </div>
-      `)}
-    </rel-layout>
-  `,
-};
-
-/**
- * Gap variations comparison
- */
-export const GapVariations: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 48px;">
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">No Gap (0)</h4>
-        <rel-layout columns="4" gap="0">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #e3f2fd; padding: 16px; text-align: center;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Extra Small Gap (0.25rem)</h4>
-        <rel-layout columns="4" gap="0.25rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #f3e5f5; padding: 16px; text-align: center;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Extra Large Gap (3rem)</h4>
-        <rel-layout columns="4" gap="3rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #e8f5e9; padding: 16px; text-align: center;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <div>
-        <h4 style="margin-bottom: 16px; color: var(--rel-colors-gray-heading);">Pixel Gap (32px)</h4>
-        <rel-layout columns="4" gap="32px">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: #fff3e0; padding: 16px; text-align: center;">Item ${i + 1}</div>
-          `)}
-        </rel-layout>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Nested layouts for complex designs
- */
-export const NestedLayouts: Story = {
-  render: () => html`
-    <rel-layout columns="2" gap="1.5rem">
-      <!-- Left column with nested grid -->
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">Nested Grid</h3>
-        <rel-layout columns="2" gap="0.75rem">
-          ${Array.from({ length: 4 }, (_, i) => html`
-            <div style="background: var(--rel-colors-blue-tertiary); color: white; padding: 16px; text-align: center; border-radius: 6px; font-size: 14px;">
-              Nested ${i + 1}
-            </div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <!-- Right column with nested grid -->
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">3-Column Nested</h3>
-        <rel-layout columns="3" gap="0.5rem">
-          ${Array.from({ length: 6 }, (_, i) => html`
-            <div style="background: var(--rel-colors-green-success); color: white; padding: 12px; text-align: center; border-radius: 6px; font-size: 12px;">
-              ${i + 1}
-            </div>
-          `)}
-        </rel-layout>
-      </div>
-
-      <!-- Full width nested example -->
-      <div style="grid-column: 1 / -1; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">Full Width with 4-Column Nested Grid</h3>
-        <rel-layout columns="4" gap="1rem">
-          ${Array.from({ length: 8 }, (_, i) => html`
-            <div style="background: var(--rel-colors-yellow-pending); padding: 20px; text-align: center; border-radius: 8px; color: var(--rel-colors-black); font-weight: 600;">
-              Item ${i + 1}
-            </div>
-          `)}
-        </rel-layout>
-      </div>
-    </rel-layout>
-  `,
-};
-
-/**
- * Admin dashboard with mixed grid sections
- */
-export const AdminDashboard: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px;">
-      <!-- Header stats - 4 columns -->
-      <rel-layout columns="4" gap="1.5rem">
-        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-          <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">Total Revenue</div>
-          <div style="font-size: 32px; font-weight: 700;">$124.5k</div>
-          <div style="font-size: 12px; opacity: 0.8; margin-top: 8px;">+14% from last month</div>
-        </div>
-
-        <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-          <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">New Customers</div>
-          <div style="font-size: 32px; font-weight: 700;">2,543</div>
-          <div style="font-size: 12px; opacity: 0.8; margin-top: 8px;">+8% from last month</div>
-        </div>
-
-        <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-          <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">Active Projects</div>
-          <div style="font-size: 32px; font-weight: 700;">127</div>
-          <div style="font-size: 12px; opacity: 0.8; margin-top: 8px;">15 completed this week</div>
-        </div>
-
-        <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-          <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">Team Members</div>
-          <div style="font-size: 32px; font-weight: 700;">48</div>
-          <div style="font-size: 12px; opacity: 0.8; margin-top: 8px;">4 new this month</div>
-        </div>
-      </rel-layout>
-
-      <!-- Main content - 3 columns -->
-      <rel-layout columns="3" gap="1.5rem">
-        <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-          <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">Recent Activity</h4>
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            ${Array.from({ length: 4 }, (_, i) => html`
-              <div style="padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 8px; font-size: 13px; color: var(--rel-colors-gray-primary);">
-                Activity item ${i + 1}
-              </div>
-            `)}
-          </div>
-        </div>
-
-        <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-          <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">Performance</h4>
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span style="font-size: 14px; color: var(--rel-colors-gray-primary);">CPU Usage</span>
-              <span style="font-weight: 600; color: var(--rel-colors-blue-tertiary);">45%</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span style="font-size: 14px; color: var(--rel-colors-gray-primary);">Memory</span>
-              <span style="font-weight: 600; color: var(--rel-colors-green-success);">62%</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span style="font-size: 14px; color: var(--rel-colors-gray-primary);">Storage</span>
-              <span style="font-weight: 600; color: var(--rel-colors-yellow-pending);">78%</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span style="font-size: 14px; color: var(--rel-colors-gray-primary);">Network</span>
-              <span style="font-weight: 600; color: var(--rel-colors-red-secondary);">92%</span>
-            </div>
-          </div>
-        </div>
-
-        <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-          <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading);">Quick Actions</h4>
-          <div style="display: flex; flex-direction: column; gap: 8px;">
-            <rel-button variant="primary" size="medium" style="width: 100%;">New Project</rel-button>
-            <rel-button variant="secondary" size="medium" style="width: 100%;">Add User</rel-button>
-            <rel-button variant="outline" size="medium" style="width: 100%;">Generate Report</rel-button>
-          </div>
-        </div>
-      </rel-layout>
-    </div>
-  `,
-};
-
-/**
- * E-commerce product showcase
- */
-export const EcommerceShowcase: Story = {
-  render: () => html`
-    <rel-layout columns="4" gap="2rem">
-      ${Array.from({ length: 12 }, (_, i) => {
-        const gradients = [
-          'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-          'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-          'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
-          'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
-          'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
-          'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
-          'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
-          'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
-          'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)',
-          'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
-          'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)',
-        ];
-        return html`
-          <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: var(--rel-shadows-shadow-300); transition: transform 0.2s;">
-            <div style="background: ${gradients[i]}; height: 200px; display: flex; align-items: center; justify-content: center; color: white; font-size: 48px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-              ${i + 1}
-            </div>
-            <div style="padding: 20px;">
-              <h4 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 18px; font-weight: 600;">Premium Product ${i + 1}</h4>
-              <p style="margin: 0 0 12px; color: var(--rel-colors-gray-placeholder); font-size: 14px; line-height: 1.5;">High quality product with amazing features</p>
-              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
-                <div style="font-size: 24px; font-weight: 700; color: var(--rel-colors-blue-tertiary);">$${(i + 1) * 49}.99</div>
-                <div style="display: flex; gap: 4px; align-items: center; color: var(--rel-colors-yellow-pending);">
-                  <span style="font-size: 16px;">★★★★★</span>
-                  <span style="font-size: 12px; color: var(--rel-colors-gray-placeholder);">(${Math.floor(Math.random() * 500) + 50})</span>
-                </div>
-              </div>
-              <rel-button variant="primary" size="small" style="width: 100%;">Add to Cart</rel-button>
-            </div>
-          </div>
-        `;
-      })}
-    </rel-layout>
-  `,
-};
-
-/**
- * Team member cards gallery
- */
-export const TeamGallery: Story = {
-  render: () => html`
-    <rel-layout columns="5" gap="1.5rem">
-      ${Array.from({ length: 10 }, (_, i) => {
-        const names = ['Alice Johnson', 'Bob Smith', 'Carol Williams', 'David Brown', 'Emma Davis', 'Frank Miller', 'Grace Wilson', 'Henry Moore', 'Iris Taylor', 'Jack Anderson'];
-        const roles = ['Frontend Dev', 'Backend Dev', 'UI Designer', 'DevOps', 'Product Manager', 'UX Designer', 'QA Engineer', 'Data Scientist', 'Tech Lead', 'Scrum Master'];
-        const colors = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#30cfd0', '#a8edea', '#ff9a9e', '#ffecd2', '#ff6e7f'];
-
-        return html`
-          <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200); text-align: center;">
-            <div style="background: ${colors[i]}; width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: 700;">
-              ${names[i].split(' ').map(n => n[0]).join('')}
-            </div>
-            <h4 style="margin: 0 0 4px; color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">${names[i]}</h4>
-            <p style="margin: 0 0 12px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">${roles[i]}</p>
-            <div style="display: flex; gap: 8px; justify-content: center;">
-              <div style="width: 32px; height: 32px; background: var(--rel-colors-gray-bg); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
-                <span style="font-size: 14px;">💼</span>
-              </div>
-              <div style="width: 32px; height: 32px; background: var(--rel-colors-gray-bg); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
-                <span style="font-size: 14px;">✉️</span>
-              </div>
-            </div>
-          </div>
-        `;
-      })}
-    </rel-layout>
-  `,
-};
-
-/**
- * Asymmetric grid with spanning elements
- */
-export const AsymmetricGrid: Story = {
-  render: () => html`
-    <rel-layout columns="4" gap="1.5rem">
-      <!-- Wide feature card -->
-      <div style="grid-column: span 2; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 16px; box-shadow: var(--rel-shadows-shadow-300);">
-        <h2 style="margin: 0 0 12px; font-size: 32px; font-weight: 700;">Featured Item</h2>
-        <p style="margin: 0 0 20px; font-size: 16px; opacity: 0.95; line-height: 1.6;">This is a featured card that spans 2 columns, making it stand out from the rest of the grid.</p>
-        <rel-button variant="secondary" size="large">Learn More</rel-button>
-      </div>
-
-      <!-- Regular cards -->
-      ${Array.from({ length: 2 }, (_, i) => html`
-        <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading);">Card ${i + 1}</h4>
-          <p style="margin: 0; color: var(--rel-colors-gray-primary); font-size: 14px;">Regular sized card content</p>
-        </div>
-      `)}
-
-      <!-- Small cards -->
-      ${Array.from({ length: 4 }, (_, i) => html`
-        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200); text-align: center;">
-          <div style="font-size: 36px; margin-bottom: 8px;">${['📊', '📈', '💡', '🎯'][i]}</div>
-          <div style="font-size: 14px; font-weight: 600; color: var(--rel-colors-gray-heading);">Metric ${i + 1}</div>
-          <div style="font-size: 24px; font-weight: 700; color: var(--rel-colors-blue-tertiary); margin-top: 8px;">${Math.floor(Math.random() * 1000)}</div>
-        </div>
-      `)}
-
-      <!-- Wide card at bottom -->
-      <div style="grid-column: span 3; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h3 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 24px;">Extended Content Area</h3>
-        <p style="margin: 0; color: var(--rel-colors-gray-primary); line-height: 1.6;">This card spans 3 columns and can contain more detailed information or complex layouts. Perfect for charts, tables, or detailed content.</p>
-      </div>
-
-      <!-- Single card -->
-      <div style="background: var(--rel-colors-green-success); color: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200); display: flex; align-items: center; justify-content: center; text-align: center;">
-        <div>
-          <div style="font-size: 48px; font-weight: 700; margin-bottom: 8px;">100%</div>
-          <div style="font-size: 14px; opacity: 0.95;">Complete</div>
-        </div>
-      </div>
-    </rel-layout>
-  `,
-};
-
-/**
- * Content management system layout
- */
-export const CMSLayout: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px;">
-      <!-- Top navigation stats -->
-      <rel-layout columns="6" gap="1rem">
-        ${['Posts', 'Pages', 'Media', 'Comments', 'Users', 'Settings'].map((item, i) => {
-          const counts = [142, 28, 1547, 89, 64, 12];
-          return html`
-            <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: var(--rel-shadows-shadow-200); text-align: center; cursor: pointer; transition: transform 0.2s; border: 2px solid transparent;"
-                 onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='var(--rel-colors-blue-tertiary)'"
-                 onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='transparent'">
-              <div style="font-size: 12px; color: var(--rel-colors-gray-placeholder); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">${item}</div>
-              <div style="font-size: 28px; font-weight: 700; color: var(--rel-colors-gray-heading);">${counts[i]}</div>
-            </div>
-          `;
-        })}
-      </rel-layout>
-
-      <!-- Main content area -->
-      <rel-layout columns="3" gap="1.5rem">
-        <!-- Recent posts -->
-        <div style="grid-column: span 2; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-          <h3 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 20px; font-weight: 600;">Recent Posts</h3>
-          <div style="display: flex; flex-direction: column; gap: 16px;">
-            ${Array.from({ length: 5 }, (_, i) => html`
-              <div style="display: flex; gap: 16px; padding: 16px; background: var(--rel-colors-gray-bg); border-radius: 8px;">
-                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; flex-shrink: 0;"></div>
-                <div style="flex: 1;">
-                  <h4 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">Blog Post Title ${i + 1}</h4>
-                  <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 13px; line-height: 1.5;">Brief excerpt from the blog post content...</p>
-                  <div style="display: flex; gap: 16px; font-size: 12px; color: var(--rel-colors-gray-placeholder);">
-                    <span>2 days ago</span>
-                    <span>•</span>
-                    <span>Category ${i + 1}</span>
-                  </div>
-                </div>
-                <div style="display: flex; gap: 8px; align-items: flex-start;">
-                  <rel-button variant="outline" size="small">Edit</rel-button>
-                </div>
-              </div>
-            `)}
-          </div>
-        </div>
-
-        <!-- Sidebar -->
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-            <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">Quick Actions</h4>
-            <div style="display: flex; flex-direction: column; gap: 8px;">
-              <rel-button variant="primary" size="medium" style="width: 100%;">New Post</rel-button>
-              <rel-button variant="secondary" size="medium" style="width: 100%;">New Page</rel-button>
-              <rel-button variant="outline" size="medium" style="width: 100%;">Upload Media</rel-button>
-            </div>
-          </div>
-
-          <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-            <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">Categories</h4>
-            <div style="display: flex; flex-direction: column; gap: 8px;">
-              ${['Technology', 'Design', 'Business', 'Marketing'].map(cat => html`
-                <div style="display: flex; justify-content: space-between; padding: 8px; background: var(--rel-colors-gray-bg); border-radius: 6px; font-size: 14px;">
-                  <span style="color: var(--rel-colors-gray-heading);">${cat}</span>
-                  <span style="color: var(--rel-colors-gray-placeholder);">${Math.floor(Math.random() * 50)}</span>
-                </div>
-              `)}
-            </div>
-          </div>
-        </div>
-      </rel-layout>
-    </div>
-  `,
-};