@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/cards/card.stories.js

@@ -1,662 +1,214 @@
 import { html } from 'lit';
-import '../heading/heading.js';
 import './card.js';
 
 export default {
-  title        : 'Components/Card',
-  component    : 'bd-card-section',
-  subcomponents: { 'bd-card-item': 'bd-card-item' },
-  tags         : ['autodocs'],
-  argTypes     : {
-    title: {
-      control    : 'text',
-      description: 'Section title (optional)',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    align: {
-      control    : { type: 'select' },
-      options    : ['start', 'center'],
-      description: 'Content alignment for card items',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'start' }
-      }
-    }
-  },
+  title     : 'Components/Card',
+  tags      : ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: 'A flexible card component system for displaying features, services, or content in an organized grid layout. Supports icons, titles, descriptions, and multiple alignment options.'
+        component: `
+**Card** and **CardItem** are Lit components for a static card grid layout.
+
+- \`<bd-card-section>\` — a section wrapper with an optional title and a flex/grid track
+- \`<bd-card-item>\` — individual card with optional icon, title, alignment, and slotted content
+
+### Usage
+\`\`\`html
+<bd-card-section title="Why Bitdefender">
+  <bd-card-item title="AI Protection" icon="/assets/brain.svg" align="center">
+    <p>Powered by machine learning.</p>
+  </bd-card-item>
+</bd-card-section>
+\`\`\`
+
+### CardItem Behavior
+- If \`align="center"\` — applies \`bd-light-box-center\` and \`bd-light-box-header-center\` classes
+- If no slotted content — applies \`bd-light-box-no-content\` and \`bd-light-title-no-content\` classes
+- Icon is conditionally rendered only when \`icon\` prop is set
+- Title uses \`<bd-h as="h4">\` with 10px vertical padding
+        `
       }
     }
-  }
-};
-
-const Template = (args) => html`
-  <bd-card-section title="${args.title}">
-    <bd-card-item 
-      title="Scam Copilot Chatbot" 
-      icon="/assets/device_protection.png"
-      align="${args.align}"
-    >
-      <bd-p kind="small">
-        Specialized AI chatbot that helps you identify suspicious online
-        interactions so you don't become a victim.
-      </bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Privacy Protection" 
-      icon="/assets/privacy_protection.png"
-      align="${args.align}"
-    >
-      <bd-p kind="small">
-        Specialized AI chatbot that helps you identify suspicious online
-        interactions so you don't become a victim.
-      </bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Scam Wave Alerts" 
-      icon="/assets/identity_protection.png"
-      align="${args.align}"
-    >
-      <bd-p kind="small">
-        Stay informed with real-time alerts about ongoing scam outbreaks
-        detected in your area automatically.
-      </bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Online Scam Protection" 
-      icon="/assets/financial_insurance.png"
-      align="${args.align}"
-    >
-      <bd-p kind="small">
-        Focused on browsing activities, it specializes in detecting the newest
-        scam patterns and tactics.
-      </bd-p>
-    </bd-card-item>
-  </bd-card-section>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Security Features',
-  align: 'start'
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default card section with security features. Each card includes an icon, title, and descriptive text with start alignment for optimal readability.'
-    }
-  }
-};
-
-export const CenterAligned = Template.bind({});
-CenterAligned.args = {
-  title: 'Security Features - Centered',
-  align: 'center'
-};
-CenterAligned.parameters = {
-  docs: {
-    description: {
-      story: 'Card section with center-aligned content. Perfect for feature highlights and creating visual balance in the layout.'
-    }
-  }
-};
-
-export const IconTitleOnly = () => html`
-  <bd-card-section title="Icon + Title Only Cards">
-    <bd-card-item 
-      title="Device Protection"
-      icon="/assets/device_protection.png"
-      align="start"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Privacy Shield"
-      icon="/assets/privacy_protection.png"
-      align="start"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Identity Guard"
-      icon="/assets/identity_protection.png"
-      align="start"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Financial Safety"
-      icon="/assets/financial_insurance.png"
-      align="start"
-    ></bd-card-item>
-  </bd-card-section>
-`;
-IconTitleOnly.parameters = {
-  docs: {
-    description: {
-      story: 'Minimal card layout with only icons and titles. Ideal for quick visual scanning and when space is limited.'
-    }
-  }
-};
-
-export const IconTitleOnlyCentered = () => html`
-  <bd-card-section title="Icon + Title Only - Centered">
-    <bd-card-item 
-      title="Device Protection"
-      icon="/assets/device_protection.png"
-      align="center"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Privacy Shield"
-      icon="/assets/privacy_protection.png"
-      align="center"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Identity Guard"
-      icon="/assets/identity_protection.png"
-      align="center"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Financial Safety"
-      icon="/assets/financial_insurance.png"
-      align="center"
-    ></bd-card-item>
-  </bd-card-section>
-`;
-IconTitleOnlyCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Center-aligned icon and title cards. Creates a balanced, symmetrical appearance perfect for feature showcases.'
-    }
-  }
-};
-
-export const MixedContentTypes = () => html`
-  <bd-card-section title="Mixed Content Types">
-    <bd-card-item 
-      title="With Description"
-      icon="/assets/device_protection.png"
-      align="start"
-    >
-      <bd-p kind="small">This card has both icon, title and description text below.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Icon + Title Only"
-      icon="/assets/privacy_protection.png"
-      align="start"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Another With Description"
-      icon="/assets/identity_protection.png"
-      align="start"
-    >
-      <bd-p kind="small">This card includes detailed description about the feature.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Another Icon Only"
-      icon="/assets/financial_insurance.png"
-      align="start"
-    ></bd-card-item>
-  </bd-card-section>
-`;
-MixedContentTypes.parameters = {
-  docs: {
-    description: {
-      story: 'Mixed card content types within the same section. Demonstrates flexibility by combining cards with and without descriptions.'
-    }
-  }
-};
-
-export const MixedContentTypesCentered = () => html`
-  <bd-card-section title="Mixed Content Types - Centered">
-    <bd-card-item 
-      title="With Description"
-      icon="/assets/device_protection.png"
-      align="center"
-    >
-      <bd-p kind="small">This card has both icon, title and description text below.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Icon + Title Only"
-      icon="/assets/privacy_protection.png"
-      align="center"
-    ></bd-card-item>
-    
-    <bd-card-item 
-      title="Another With Description"
-      icon="/assets/identity_protection.png"
-      align="center"
-    >
-      <bd-p kind="small">This card includes detailed description about the feature.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Another Icon Only"
-      icon="/assets/financial_insurance.png"
-      align="center"
-    ></bd-card-item>
-  </bd-card-section>
-`;
-MixedContentTypesCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Center-aligned mixed content cards. Maintains visual consistency while accommodating different content types.'
-    }
-  }
-};
-
-export const WithoutTitle = Template.bind({});
-WithoutTitle.args = {
-  title: '',
-  align: 'start'
-};
-WithoutTitle.parameters = {
-  docs: {
-    description: {
-      story: 'Card section without a title. Useful when the section context is clear from the surrounding content or layout.'
+  },
+  argTypes: {
+    sectionTitle: {
+      control    : 'text',
+      description: 'Optional title for the card section, rendered as `<h1>`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
+    },
+    itemTitle: {
+      control    : 'text',
+      description: 'Title of the card item, rendered using `<bd-h as="h4">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardItem' }
+    },
+    icon: {
+      control    : 'text',
+      description: 'Path to the icon image shown at the top of the card',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardItem' }
+    },
+    align: {
+      control    : { type: 'select' },
+      options    : ['start', 'center'],
+      description: 'Alignment of card content. `"center"` applies centering CSS classes.',
+      table      : { type: { summary: "'start' | 'center'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
     }
   }
 };
 
-export const WithoutTitleCentered = Template.bind({});
-WithoutTitleCentered.args = {
-  title: '',
-  align: 'center'
-};
-WithoutTitleCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Title-less card section with center alignment. Creates a clean, minimalist appearance.'
-    }
-  }
-};
+const sampleItems = [
+  { title: 'AI Protection',     icon: '/assets/brain.svg',    content: 'Powered by machine learning and behavioral analysis.' },
+  { title: 'Multi-layer Security', icon: '/assets/shield.svg', content: 'Multiple independent protection layers stop any attack.' },
+  { title: 'VPN Included',      icon: '/assets/vpn.svg',      content: 'Unlimited encrypted VPN traffic for all your devices.' },
+  { title: 'Parental Controls', icon: '/assets/parental.svg', content: 'Advanced controls to protect your children online.' }
+];
 
-export const SingleCard = (args) => html`
-  <bd-card-section title="${args.title}">
-    <bd-card-item 
-      title="${args.cardTitle}" 
-      icon="${args.icon}"
-      align="${args.align}"
-    >
-      <bd-p kind="small">${args.content}</bd-p>
-    </bd-card-item>
-  </bd-card-section>
-`;
-SingleCard.args = {
-  title    : 'Single Feature',
-  cardTitle: 'Scam Copilot Chatbot',
-  icon     : '/assets/device_protection.png',
-  content  : 'Specialized AI chatbot that helps you identify suspicious online interactions.',
-  align    : 'start'
-};
-SingleCard.parameters = {
-  docs: {
-    description: {
-      story: 'Single card demonstration. Perfect for highlighting one key feature or piece of content prominently.'
-    }
-  }
-};
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-export const SingleCardCentered = SingleCard.bind({});
-SingleCardCentered.args = {
-  ...SingleCard.args,
-  title: 'Single Feature - Centered',
-  align: 'center'
-};
-SingleCardCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Single center-aligned card. Ideal for call-to-action sections or main feature highlights.'
-    }
-  }
+export const Default = {
+  name  : 'Default (4 items)',
+  render: () => html`
+    <bd-card-section title="Why Bitdefender">
+      ${sampleItems.map(item => html`
+        <bd-card-item title="${item.title}" icon="${item.icon}">
+          <p>${item.content}</p>
+        </bd-card-item>
+      `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Four card items with icons, titles, and slotted content inside a section with a title.' } } }
 };
 
-export const SingleCardNoContent = (args) => html`
-  <bd-card-section title="${args.title}">
-    <bd-card-item 
-      title="${args.cardTitle}" 
-      icon="${args.icon}"
-      align="${args.align}"
-    ></bd-card-item>
-  </bd-card-section>
-`;
-SingleCardNoContent.args = {
-  title    : 'Single Feature - Icon + Title Only',
-  cardTitle: 'Device Protection',
-  icon     : '/assets/device_protection.png',
-  align    : 'start'
-};
-SingleCardNoContent.parameters = {
-  docs: {
-    description: {
-      story: 'Single card with only icon and title. Minimalist approach for simple feature representation.'
-    }
-  }
+export const NoSectionTitle = {
+  name  : 'No Section Title',
+  render: () => html`
+    <bd-card-section>
+      ${sampleItems.map(item => html`
+        <bd-card-item title="${item.title}" icon="${item.icon}">
+          <p>${item.content}</p>
+        </bd-card-item>
+      `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Section without `title` prop — the header div is conditionally omitted.' } } }
 };
 
-export const SingleCardNoContentCentered = SingleCardNoContent.bind({});
-SingleCardNoContentCentered.args = {
-  ...SingleCardNoContent.args,
-  title: 'Single Feature - Icon + Title Only - Centered',
-  align: 'center'
-};
-SingleCardNoContentCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Single center-aligned icon and title card. Creates focused visual attention on one key element.'
-    }
-  }
+export const CenteredAlignment = {
+  name  : 'Centered Alignment',
+  render: () => html`
+    <bd-card-section title="Features">
+      ${sampleItems.map(item => html`
+        <bd-card-item title="${item.title}" icon="${item.icon}" align="center">
+          <p>${item.content}</p>
+        </bd-card-item>
+      `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: '`align="center"` applied to all items — centers icon, title, and content.' } } }
 };
 
-export const MultipleCardsGrid = (args) => html`
-  <bd-card-section title="${args.title}">
-    ${Array.from({ length: args.cardCount }, (_, i) => html`
-      <bd-card-item 
-        title="${args.cardTitle} ${i + 1}" 
-        icon="${args.icon}"
-        align="${args.align}"
-      >
-        <bd-p kind="small">${args.content} This is card number ${i + 1}.</bd-p>
+export const MixedAlignment = {
+  name  : 'Mixed Alignment',
+  render: () => html`
+    <bd-card-section title="Mixed Layout">
+      <bd-card-item title="Left Aligned" icon="/assets/brain.svg" align="start">
+        <p>Default left-aligned content.</p>
       </bd-card-item>
-    `)}
-  </bd-card-section>
-`;
-MultipleCardsGrid.args = {
-  title    : 'Multiple Security Features',
-  cardTitle: 'Security Feature',
-  icon     : '/assets/device_protection.png',
-  content  : 'Description for this security feature.',
-  cardCount: 6,
-  align    : 'start'
-};
-MultipleCardsGrid.parameters = {
-  docs: {
-    description: {
-      story: 'Grid layout with multiple cards. Demonstrates how the component automatically handles larger numbers of cards with responsive grid behavior.'
-    }
-  }
+      <bd-card-item title="Center Aligned" icon="/assets/shield.svg" align="center">
+        <p>Centered content.</p>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Two items side by side with different alignment values.' } } }
 };
 
-export const MultipleCardsGridCentered = MultipleCardsGrid.bind({});
-MultipleCardsGridCentered.args = {
-  ...MultipleCardsGrid.args,
-  title: 'Multiple Security Features - Centered',
-  align: 'center'
-};
-MultipleCardsGridCentered.parameters = {
-  docs: {
-    description: {
-      story: 'Multiple center-aligned cards in grid layout. Maintains visual balance across larger card collections.'
-    }
-  }
+export const NoIcon = {
+  name  : 'No Icons',
+  render: () => html`
+    <bd-card-section title="Features">
+      ${sampleItems.map(item => html`
+        <bd-card-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-card-item>
+      `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Items without `icon` prop — the `<img>` is conditionally omitted.' } } }
 };
 
-export const CardItemVariations = () => html`
-  <div style="display: flex; flex-direction: column; gap: 3rem;">
-    <!-- Start Aligned Variations -->
-    <bd-card-section title="Card Item Variations - Start Aligned">
-      <bd-card-item 
-        title="With Icon and Title"
-        icon="/assets/device_protection.png"
-        align="start"
-      >
-        <bd-p kind="small">This card has both an icon and a title with description.</bd-p>
-      </bd-card-item>
-      
-      <bd-card-item 
-        title="Icon + Title Only"
-        icon="/assets/device_protection.png"
-        align="start"
-      ></bd-card-item>
-      
-      <bd-card-item 
-        title="Title Only"
-        align="start"
-      >
-        <bd-p kind="small">This card has only a title without an icon, aligned to start.</bd-p>
-      </bd-card-item>
-      
-      <bd-card-item 
-        icon="/assets/privacy_protection.png"
-        align="start"
-      >
-        <bd-p kind="small">This card has only an icon without a title, aligned to start.</bd-p>
-      </bd-card-item>
-      
-      <bd-card-item align="start">
-        <bd-p kind="small">This card has neither icon nor title - just content, aligned to start.</bd-p>
-      </bd-card-item>
+export const NoSlottedContent = {
+  name  : 'No Slotted Content',
+  render: () => html`
+    <bd-card-section title="Features">
+      ${sampleItems.map(item => html`
+        <bd-card-item title="${item.title}" icon="${item.icon}"></bd-card-item>
+      `)}
     </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Items with no slotted content — applies `bd-light-box-no-content` and `bd-light-title-no-content` CSS classes.' } } }
+};
 
-    <!-- Center Aligned Variations -->
-    <bd-card-section title="Card Item Variations - Center Aligned">
-      <bd-card-item 
-        title="With Icon and Title"
-        icon="/assets/device_protection.png"
-        align="center"
-      >
-        <bd-p kind="small">This card has both an icon and a title with description.</bd-p>
-      </bd-card-item>
-      
-      <bd-card-item 
-        title="Icon + Title Only"
-        icon="/assets/device_protection.png"
-        align="center"
-      ></bd-card-item>
-      
-      <bd-card-item 
-        title="Title Only"
-        align="center"
-      >
-        <bd-p kind="small">This card has only a title without an icon, centered alignment.</bd-p>
-      </bd-card-item>
-      
-      <bd-card-item 
-        icon="/assets/privacy_protection.png"
-        align="center"
-      >
-        <bd-p kind="small">This card has only an icon without a title, centered alignment.</bd-p>
+export const TitleOnly = {
+  name  : 'Title Only (no icon, no content)',
+  render: () => html`
+    <bd-card-section title="Features">
+      <bd-card-item title="AI Protection"></bd-card-item>
+      <bd-card-item title="VPN Included"></bd-card-item>
+      <bd-card-item title="Parental Controls"></bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Minimal cards with only a title — no icon, no slotted content.' } } }
+};
+
+export const RichContent = {
+  name  : 'Rich Slotted Content',
+  render: () => html`
+    <bd-card-section title="Plan Details">
+      <bd-card-item title="What's included" icon="/assets/shield.svg">
+        <ul>
+          <li>Antivirus & Anti-malware</li>
+          <li>VPN (200+ servers)</li>
+          <li>Password Manager</li>
+        </ul>
       </bd-card-item>
-      
-      <bd-card-item align="center">
-        <bd-p kind="small">This card has neither icon nor title - just content, centered alignment.</bd-p>
+      <bd-card-item title="Supported Platforms" icon="/assets/devices.svg">
+        <p>Windows, macOS, Android, iOS</p>
+        <a href="#">View all platforms</a>
       </bd-card-item>
     </bd-card-section>
-  </div>
-`;
-CardItemVariations.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive demonstration of all possible card item variations with both start and center alignment options. Shows flexibility in content composition.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Rich slotted content including lists, paragraphs, and links.' } } }
 };
 
-export const LongContent = () => html`
-  <div style="display: flex; flex-direction: column; gap: 3rem;">
-    <!-- Start Aligned Long Content -->
-    <bd-card-section title="Cards with Long Content - Start Aligned">
-      <bd-card-item 
-        title="Feature with Detailed Description"
-        icon="/assets/identity_protection.png"
-        align="start"
-      >
-        <bd-p kind="small">
-          This is a much longer description that might wrap across multiple lines.
-          It provides comprehensive details about the feature, its benefits, 
-          and how it helps protect users from various types of online threats 
-          and scams in today's digital landscape.
-        </bd-p>
-        <bd-p kind="small">
-          Additional paragraph to demonstrate how multiple paragraphs of content
-          would appear within the card component.
-        </bd-p>
-      </bd-card-item>
-      
-      <bd-card-item 
-        title="Very Long Title That Might Wrap to Multiple Lines"
-        icon="/assets/financial_insurance.png"
-        align="start"
-      >
-        <bd-p kind="small">Regular content with an exceptionally long title, aligned to start.</bd-p>
+export const SingleItem = {
+  name  : 'Single Item (edge case)',
+  render: () => html`
+    <bd-card-section title="Feature">
+      <bd-card-item title="AI Protection" icon="/assets/brain.svg">
+        <p>Machine learning-powered protection.</p>
       </bd-card-item>
     </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Edge case: only one card item inside the section.' } } }
+};
 
-    <!-- Center Aligned Long Content -->
-    <bd-card-section title="Cards with Long Content - Center Aligned">
-      <bd-card-item 
-        title="Feature with Detailed Description"
-        icon="/assets/identity_protection.png"
-        align="center"
-      >
-        <bd-p kind="small">
-          This is a much longer description that might wrap across multiple lines.
-          It provides comprehensive details about the feature, its benefits, 
-          and how it helps protect users from various types of online threats 
-          and scams in today's digital landscape.
-        </bd-p>
-        <bd-p kind="small">
-          Additional paragraph to demonstrate how multiple paragraphs of content
-          would appear within the card component.
-        </bd-p>
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    sectionTitle: 'Why Bitdefender',
+    itemTitle   : 'AI Protection',
+    icon        : '/assets/brain.svg',
+    align       : 'start'
+  },
+  render: (args) => html`
+    <bd-card-section title="${args.sectionTitle}">
+      <bd-card-item title="${args.itemTitle}" icon="${args.icon}" align="${args.align}">
+        <p>Powered by machine learning and behavioral analysis.</p>
       </bd-card-item>
-      
-      <bd-card-item 
-        title="Very Long Title That Might Wrap to Multiple Lines"
-        icon="/assets/financial_insurance.png"
-        align="center"
-      >
-        <bd-p kind="small">Regular content with an exceptionally long title, centered alignment.</bd-p>
+      <bd-card-item title="VPN Included" icon="/assets/vpn.svg" align="${args.align}">
+        <p>Unlimited encrypted VPN traffic.</p>
       </bd-card-item>
     </bd-card-section>
-  </div>
-`;
-LongContent.parameters = {
-  docs: {
-    description: {
-      story: 'Cards with extensive content including multiple paragraphs and long titles. Demonstrates how the component handles text-heavy scenarios while maintaining readability.'
-    }
-  }
-};
-
-export const MixedAlignment = () => html`
-  <bd-card-section title="Mixed Alignment Cards">
-    <bd-card-item 
-      title="Start Aligned Card"
-      icon="/assets/device_protection.png"
-      align="start"
-    >
-      <bd-p kind="small">This card is left aligned with content starting from the left side.</bd-p>
-      <bd-p kind="small">Perfect for longer text content that reads better when left aligned.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Center Aligned Card"
-      icon="/assets/privacy_protection.png"
-      align="center"
-    >
-      <bd-p kind="small">This card is center aligned with everything centered.</bd-p>
-      <bd-p kind="small">Great for highlight features or call-to-action cards.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Another Start Aligned"
-      icon="/assets/identity_protection.png"
-      align="start"
-    >
-      <bd-p kind="small">Another left aligned card with detailed description.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Another Center Aligned"
-      icon="/assets/financial_insurance.png"
-      align="center"
-    >
-      <bd-p kind="small">Another center aligned card for balanced presentation.</bd-p>
-    </bd-card-item>
-  </bd-card-section>
-`;
-MixedAlignment.parameters = {
-  docs: {
-    description: {
-      story: 'Mixed alignment within the same card section. Shows how different alignment choices can be used strategically for varied content types and emphasis.'
-    }
-  }
-};
-
-export const AlignmentComparison = () => html`
-  <bd-card-section title="Alignment Comparison">
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
-      <div>
-        <bd-h as="h4" style="text-align: center; color: #333; padding: 10px 0;">Start Aligned</bd-h>
-        <bd-card-item 
-          title="Start Aligned Example"
-          icon="/assets/device_protection.png"
-          align="start"
-        >
-          <bd-p kind="small">This card shows start alignment where content begins from the left.</bd-p>
-          <bd-p kind="small">Ideal for readability and longer text content.</bd-p>
-        </bd-card-item>
-      </div>
-      <div>
-        <bd-h as="h4" style="text-align: center; color: #333; padding: 10px 0;">Center Aligned</bd-h>
-        <bd-card-item 
-          title="Center Aligned Example"
-          icon="/assets/device_protection.png"
-          align="center"
-        >
-          <bd-p kind="small">This card shows center alignment with balanced presentation.</bd-p>
-          <bd-p kind="small">Perfect for feature highlights and visual balance.</bd-p>
-        </bd-card-item>
-      </div>
-    </div>
-  </bd-card-section>
-`;
-AlignmentComparison.parameters = {
-  docs: {
-    description: {
-      story: 'Side-by-side comparison of start vs center alignment. Helps understand the visual and functional differences between alignment options for informed design decisions.'
-    }
-  }
-};
-
-export const ResponsiveAlignment = () => html`
-  <bd-card-section title="Responsive Alignment Examples">
-    <bd-card-item 
-      title="Responsive Start Aligned"
-      icon="/assets/device_protection.png"
-      align="start"
-    >
-      <bd-p kind="small">This card maintains start alignment across all screen sizes.</bd-p>
-      <bd-p kind="small">On mobile devices, the content will still be aligned to the start.</bd-p>
-    </bd-card-item>
-    
-    <bd-card-item 
-      title="Responsive Center Aligned"
-      icon="/assets/privacy_protection.png"
-      align="center"
-    >
-      <bd-p kind="small">This card maintains center alignment across all screen sizes.</bd-p>
-      <bd-p kind="small">On mobile devices, the content will remain centered for consistency.</bd-p>
-    </bd-card-item>
-  </bd-card-section>
-`;
-ResponsiveAlignment.parameters = {
-  docs: {
-    description: {
-      story: 'Demonstration of responsive alignment behavior. Shows how alignment choices are maintained across different screen sizes and devices.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Interactive playground. Adjust section title, item title, icon, and alignment via Controls.' } } }
 };