@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,299 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-card';
-
-/**
- * The Card component provides a container for content with elevation and rounded corners.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **Elevated Shadow**: Drop shadow for depth
- * - **Rounded Corners**: Smooth border radius
- * - **Hover Effect**: Lifts on hover with enhanced shadow
- * - **Flexible Content**: Accepts any slotted content
- * - **Consistent Padding**: Built-in spacing
- * - **White Background**: Clean, professional appearance
- */
-const meta: Meta = {
-  title: 'Components/Card',
-  tags: ['autodocs'],
-  component: 'rel-card',
-  render: (args) => html`
-    <rel-card>
-      ${args.content || html`
-        <h3 style="margin: 0 0 12px 0; font-size: 20px; color: #000;">Card Title</h3>
-        <p style="margin: 0; color: #666; line-height: 1.6;">
-          This is a basic card with some content. Cards are used to group related information together.
-        </p>
-      `}
-    </rel-card>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default card - basic card with text content
- */
-export const Default: Story = {};
-
-/**
- * Simple text card
- */
-export const SimpleText: Story = {
-  render: () => html`
-    <rel-card>
-      <h3 style="margin: 0 0 12px 0; font-size: 20px; color: #000;">Welcome</h3>
-      <p style="margin: 0; color: #666; line-height: 1.6;">
-        Thank you for using our design system. This card demonstrates simple text content.
-      </p>
-    </rel-card>
-  `,
-};
-
-/**
- * Card with image
- */
-export const WithImage: Story = {
-  render: () => html`
-    <rel-card>
-      <img
-        src="https://picsum.photos/400/200"
-        alt="Placeholder"
-        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px;"
-      />
-      <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #000;">Beautiful Scenery</h3>
-      <p style="margin: 0; color: #666; font-size: 14px;">
-        A stunning landscape captured in the perfect moment.
-      </p>
-    </rel-card>
-  `,
-};
-
-/**
- * Product card - e-commerce style
- */
-export const ProductCard: Story = {
-  render: () => html`
-    <rel-card>
-      <img
-        src="https://picsum.photos/300/300"
-        alt="Product"
-        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px;"
-      />
-      <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #000;">Premium Headphones</h3>
-      <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
-        High-quality wireless headphones with active noise cancellation.
-      </p>
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <span style="font-size: 24px; font-weight: 700; color: #000;">$299</span>
-        <button style="background: #00F49C; border: none; color: #000; padding: 8px 16px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
-          Add to Cart
-        </button>
-      </div>
-    </rel-card>
-  `,
-};
-
-/**
- * User profile card
- */
-export const UserProfile: Story = {
-  render: () => html`
-    <rel-card>
-      <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
-        <img
-          src="https://i.pravatar.cc/80?img=1"
-          alt="User avatar"
-          style="width: 60px; height: 60px; border-radius: 50%;"
-        />
-        <div>
-          <h3 style="margin: 0 0 4px 0; font-size: 18px; color: #000;">John Doe</h3>
-          <p style="margin: 0; color: #666; font-size: 14px;">Senior Developer</p>
-        </div>
-      </div>
-      <p style="margin: 0 0 16px 0; color: #666; font-size: 14px; line-height: 1.6;">
-        Passionate about building great user experiences and modern web applications.
-      </p>
-      <div style="display: flex; gap: 8px;">
-        <button style="flex: 1; background: #00F49C; border: none; color: #000; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Follow
-        </button>
-        <button style="flex: 1; background: #fff; border: 1px solid #ddd; color: #000; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Message
-        </button>
-      </div>
-    </rel-card>
-  `,
-};
-
-/**
- * Stats card - dashboard metrics
- */
-export const StatsCard: Story = {
-  render: () => html`
-    <rel-card>
-      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
-        <h4 style="margin: 0; font-size: 14px; color: #666; font-weight: 500;">Total Revenue</h4>
-        <span style="font-size: 20px;">💰</span>
-      </div>
-      <p style="margin: 0 0 4px 0; font-size: 32px; font-weight: 700; color: #000;">$45,231</p>
-      <p style="margin: 0; font-size: 12px; color: #00A86B;">↑ 12.5% from last month</p>
-    </rel-card>
-  `,
-};
-
-/**
- * Notification card
- */
-export const NotificationCard: Story = {
-  render: () => html`
-    <rel-card>
-      <div style="display: flex; gap: 12px;">
-        <div style="width: 40px; height: 40px; background: #E1F2FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">
-          🔔
-        </div>
-        <div style="flex: 1;">
-          <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #000;">New message received</h4>
-          <p style="margin: 0 0 4px 0; color: #666; font-size: 14px;">Sarah Wilson sent you a message</p>
-          <p style="margin: 0; color: #999; font-size: 12px;">2 minutes ago</p>
-        </div>
-      </div>
-    </rel-card>
-  `,
-};
-
-/**
- * Form card - card with form elements
- */
-export const FormCard: Story = {
-  render: () => html`
-    <rel-card>
-      <h3 style="margin: 0 0 16px 0; font-size: 20px; color: #000;">Contact Us</h3>
-      <form style="display: flex; flex-direction: column; gap: 12px;">
-        <div>
-          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Name</label>
-          <input type="text" placeholder="Your name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" />
-        </div>
-        <div>
-          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Email</label>
-          <input type="email" placeholder="your@email.com" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" />
-        </div>
-        <div>
-          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Message</label>
-          <textarea placeholder="Your message" rows="4" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"></textarea>
-        </div>
-        <button type="submit" style="background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Send Message
-        </button>
-      </form>
-    </rel-card>
-  `,
-};
-
-/**
- * Pricing card
- */
-export const PricingCard: Story = {
-  render: () => html`
-    <rel-card>
-      <div style="text-align: center;">
-        <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">Pro Plan</h3>
-        <p style="margin: 0 0 16px 0; color: #666; font-size: 14px;">For growing teams</p>
-        <div style="margin-bottom: 24px;">
-          <span style="font-size: 48px; font-weight: 700; color: #000;">$49</span>
-          <span style="color: #666; font-size: 14px;">/month</span>
-        </div>
-        <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; text-align: left;">
-          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Unlimited projects</li>
-          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Advanced analytics</li>
-          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Priority support</li>
-          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Custom integrations</li>
-        </ul>
-        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Get Started
-        </button>
-      </div>
-    </rel-card>
-  `,
-};
-
-/**
- * Blog post card
- */
-export const BlogPostCard: Story = {
-  render: () => html`
-    <rel-card>
-      <img
-        src="https://picsum.photos/400/250"
-        alt="Blog post"
-        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px;"
-      />
-      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-        <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">Technology</span>
-        <span style="padding: 4px 8px; background: #E8F5E8; color: #00A86B; border-radius: 4px; font-size: 12px; font-weight: 600;">Design</span>
-      </div>
-      <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">Getting Started with Web Components</h3>
-      <p style="margin: 0 0 12px 0; color: #666; font-size: 14px; line-height: 1.6;">
-        Learn how to build reusable, framework-agnostic UI components using modern web standards.
-      </p>
-      <div style="display: flex; align-items: center; justify-content: space-between;">
-        <div style="display: flex; align-items: center; gap: 8px;">
-          <img src="https://i.pravatar.cc/32?img=2" alt="Author" style="width: 32px; height: 32px; border-radius: 50%;" />
-          <span style="color: #666; font-size: 14px;">Sarah Wilson</span>
-        </div>
-        <span style="color: #999; font-size: 12px;">5 min read</span>
-      </div>
-    </rel-card>
-  `,
-};
-
-/**
- * Card grid - multiple cards in a grid layout
- */
-export const CardGrid: Story = {
-  render: () => html`
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 24px; background: #f5f5f5;">
-      <rel-card>
-        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 1</h3>
-        <p style="margin: 0; color: #666; font-size: 14px;">First card in the grid layout.</p>
-      </rel-card>
-
-      <rel-card>
-        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 2</h3>
-        <p style="margin: 0; color: #666; font-size: 14px;">Second card in the grid layout.</p>
-      </rel-card>
-
-      <rel-card>
-        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 3</h3>
-        <p style="margin: 0; color: #666; font-size: 14px;">Third card in the grid layout.</p>
-      </rel-card>
-
-      <rel-card>
-        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 4</h3>
-        <p style="margin: 0; color: #666; font-size: 14px;">Fourth card in the grid layout.</p>
-      </rel-card>
-    </div>
-  `,
-};
-
-/**
- * Empty state card
- */
-export const EmptyState: Story = {
-  render: () => html`
-    <rel-card>
-      <div style="text-align: center; padding: 40px 20px;">
-        <div style="font-size: 64px; margin-bottom: 16px;">📭</div>
-        <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">No messages yet</h3>
-        <p style="margin: 0 0 24px 0; color: #666; font-size: 14px;">
-          When you receive messages, they'll appear here.
-        </p>
-        <button style="background: #00F49C; border: none; color: #000; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Compose Message
-        </button>
-      </div>
-    </rel-card>
-  `,
-};

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

@@ -1,368 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-cardmedia';
-
-/**
- * The Card Media component combines images with content in an elevated card format.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **Image Support**: Display images at the top of the card
- * - **Title & Subtitle**: Built-in typography for headers and descriptions
- * - **Slotted Content**: Add buttons, links, or additional content
- * - **Elevated Shadow**: Drop shadow for depth
- * - **Hover Effect**: Lifts on hover with enhanced shadow
- * - **Rounded Corners**: Smooth border radius
- */
-const meta: Meta = {
-  title: 'Components/CardMedia',
-  tags: ['autodocs'],
-  component: 'rel-card-media',
-  argTypes: {
-    imageSrc: {
-      control: 'text',
-      description: 'Image source URL',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    imageAlt: {
-      control: 'text',
-      description: 'Image alt text for accessibility',
-      table: {
-        defaultValue: { summary: 'Card image' },
-        type: { summary: 'string' },
-      },
-    },
-    title: {
-      control: 'text',
-      description: 'Card title',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    subtitle: {
-      control: 'text',
-      description: 'Card subtitle or description',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-card-media
-      imageSrc="${args.imageSrc || 'https://picsum.photos/400/250'}"
-      imageAlt="${args.imageAlt || 'Card image'}"
-      title="${args.title || 'Card Title'}"
-      subtitle="${args.subtitle || 'Card subtitle or description'}"
-    >
-      ${args.content || ''}
-    </rel-card-media>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default card media - basic image card
- */
-export const Default: Story = {
-  args: {
-    imageSrc: 'https://picsum.photos/400/250',
-    imageAlt: 'Beautiful scenery',
-    title: 'Beautiful Landscape',
-    subtitle: 'Captured in the perfect moment',
-  },
-};
-
-/**
- * Product card - e-commerce product display
- */
-export const ProductCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/400/400"
-      imageAlt="Product"
-      title="Premium Wireless Headphones"
-      subtitle="High-quality audio with active noise cancellation"
-    >
-      <div style="margin-top: 12px; display: flex; justify-content: space-between; align-items: center;">
-        <span style="font-size: 24px; font-weight: 700; color: #000;">$299</span>
-        <button style="background: #00F49C; border: none; color: #000; padding: 8px 16px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
-          Add to Cart
-        </button>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Blog post card - article preview
- */
-export const BlogPostCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/500/300"
-      imageAlt="Blog post cover"
-      title="Getting Started with Web Components"
-      subtitle="Learn how to build reusable UI components using modern web standards."
-    >
-      <div style="margin-top: 12px; display: flex; align-items: center; justify-content: space-between;">
-        <div style="display: flex; align-items: center; gap: 8px;">
-          <img src="https://i.pravatar.cc/32?img=3" alt="Author" style="width: 32px; height: 32px; border-radius: 50%;" />
-          <span style="color: #666; font-size: 14px;">Sarah Wilson</span>
-        </div>
-        <span style="color: #999; font-size: 12px;">5 min read</span>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Recipe card - food recipe display
- */
-export const RecipeCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/400/300"
-      imageAlt="Delicious food"
-      title="Homemade Pizza"
-      subtitle="A classic Italian favorite with fresh ingredients"
-    >
-      <div style="margin-top: 12px;">
-        <div style="display: flex; gap: 16px; margin-bottom: 12px;">
-          <span style="color: #666; font-size: 12px;">⏱️ 45 min</span>
-          <span style="color: #666; font-size: 12px;">👥 4 servings</span>
-          <span style="color: #666; font-size: 12px;">🔥 Medium</span>
-        </div>
-        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          View Recipe
-        </button>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Property listing - real estate card
- */
-export const PropertyListing: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/500/350"
-      imageAlt="Property"
-      title="Modern Downtown Apartment"
-      subtitle="2 bed • 2 bath • 1,200 sq ft"
-    >
-      <div style="margin-top: 12px;">
-        <div style="margin-bottom: 12px;">
-          <span style="font-size: 28px; font-weight: 700; color: #000;">$450,000</span>
-        </div>
-        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
-          📍 123 Main Street, Downtown District
-        </p>
-        <div style="display: flex; gap: 8px;">
-          <button style="flex: 1; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-            Schedule Tour
-          </button>
-          <button style="flex: 1; background: #fff; border: 1px solid #ddd; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-            Save
-          </button>
-        </div>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Event card - upcoming event display
- */
-export const EventCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/450/280"
-      imageAlt="Event"
-      title="Tech Conference 2024"
-      subtitle="Join industry leaders for 3 days of innovation and networking"
-    >
-      <div style="margin-top: 12px;">
-        <div style="background: #E1F2FF; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
-          <p style="margin: 0 0 4px 0; color: #0091EA; font-size: 14px; font-weight: 600;">📅 March 15-17, 2024</p>
-          <p style="margin: 0; color: #0091EA; font-size: 14px;">📍 San Francisco Convention Center</p>
-        </div>
-        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Register Now
-        </button>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Course card - online course preview
- */
-export const CourseCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/420/260"
-      imageAlt="Course"
-      title="Complete Web Development Bootcamp"
-      subtitle="Learn HTML, CSS, JavaScript, and modern frameworks from scratch"
-    >
-      <div style="margin-top: 12px;">
-        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-          <span style="padding: 4px 8px; background: #FFE9D9; color: #FF6D00; border-radius: 4px; font-size: 12px; font-weight: 600;">Beginner</span>
-          <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">40 hours</span>
-        </div>
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
-          <div style="display: flex; align-items: center; gap: 4px;">
-            <span style="color: #FFD700;">★★★★★</span>
-            <span style="color: #666; font-size: 12px;">(2,543 reviews)</span>
-          </div>
-          <span style="font-size: 20px; font-weight: 700; color: #000;">$89</span>
-        </div>
-        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Enroll Now
-        </button>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Team member card - employee profile
- */
-export const TeamMemberCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://i.pravatar.cc/400?img=5"
-      imageAlt="Team member"
-      title="Alex Johnson"
-      subtitle="Senior Product Designer"
-    >
-      <div style="margin-top: 12px;">
-        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px; line-height: 1.6;">
-          Passionate about creating intuitive user experiences and building design systems that scale.
-        </p>
-        <div style="display: flex; gap: 8px;">
-          <button style="flex: 1; background: #00F49C; border: none; color: #000; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-            View Profile
-          </button>
-          <button style="background: #fff; border: 1px solid #ddd; color: #000; padding: 8px 12px; border-radius: 8px; cursor: pointer;">
-            💬
-          </button>
-        </div>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Travel destination card
- */
-export const TravelCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/480/320"
-      imageAlt="Travel destination"
-      title="Santorini, Greece"
-      subtitle="Experience the beauty of the Greek islands"
-    >
-      <div style="margin-top: 12px;">
-        <div style="margin-bottom: 12px;">
-          <span style="color: #FFD700; font-size: 16px;">★★★★★</span>
-          <span style="color: #666; font-size: 14px; margin-left: 4px;">4.9 (1,234 reviews)</span>
-        </div>
-        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
-          7 days • All inclusive • Flights & hotel
-        </p>
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <div>
-            <span style="color: #999; font-size: 12px; text-decoration: line-through;">$1,999</span>
-            <span style="font-size: 24px; font-weight: 700; color: #000; margin-left: 8px;">$1,499</span>
-          </div>
-          <button style="background: #00F49C; border: none; color: #000; padding: 8px 16px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
-            Book Now
-          </button>
-        </div>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * News article card
- */
-export const NewsCard: Story = {
-  render: () => html`
-    <rel-card-media
-      imageSrc="https://picsum.photos/460/290"
-      imageAlt="News"
-      title="Major Tech Breakthrough Announced"
-      subtitle="Scientists discover revolutionary new material"
-    >
-      <div style="margin-top: 12px;">
-        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-          <span style="padding: 4px 8px; background: #FFE8EB; color: #CC0000; border-radius: 4px; font-size: 12px; font-weight: 600;">Breaking</span>
-          <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">Science</span>
-        </div>
-        <p style="margin: 0 0 12px 0; color: #999; font-size: 12px;">
-          Published 2 hours ago by Tech News Daily
-        </p>
-        <button style="width: 100%; background: #fff; border: 1px solid #ddd; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
-          Read Full Article
-        </button>
-      </div>
-    </rel-card-media>
-  `,
-};
-
-/**
- * Card grid - multiple media cards
- */
-export const CardGrid: Story = {
-  render: () => html`
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; padding: 24px; background: #f5f5f5;">
-      <rel-card-media
-        imageSrc="https://picsum.photos/400/250?random=1"
-        title="Mountain Adventure"
-        subtitle="Explore breathtaking peaks"
-      ></rel-card-media>
-
-      <rel-card-media
-        imageSrc="https://picsum.photos/400/250?random=2"
-        title="Ocean Paradise"
-        subtitle="Discover tropical beaches"
-      ></rel-card-media>
-
-      <rel-card-media
-        imageSrc="https://picsum.photos/400/250?random=3"
-        title="City Lights"
-        subtitle="Experience urban energy"
-      ></rel-card-media>
-
-      <rel-card-media
-        imageSrc="https://picsum.photos/400/250?random=4"
-        title="Forest Escape"
-        subtitle="Connect with nature"
-      ></rel-card-media>
-    </div>
-  `,
-};
-
-/**
- * Without image - card with only content
- */
-export const WithoutImage: Story = {
-  render: () => html`
-    <rel-card-media
-      title="Text-Only Card"
-      subtitle="This card has no image, only content"
-    >
-      <p style="margin-top: 12px; color: #666; font-size: 14px; line-height: 1.6;">
-        Cards don't always need images. This example shows how the card looks with just text content.
-      </p>
-    </rel-card-media>
-  `,
-};