@repobit/dex-system-design 0.22.11 → 0.23.1

package/src/components/accordion/accordion-bg.stories.js

@@ -1,513 +1,332 @@
 import { html } from 'lit';
-import '../heading/heading.js';
-import '../paragraph/paragraph.js';
 import './accordion-bg.js';
 
 export default {
-  title    : 'Components/Accordion',
-  component: 'bd-accordion-bg',
-  tags     : ['autodocs'],
-  argTypes : {
+  title     : 'Components/AccordionBg',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdAccordionBg** is a Lit web component that renders a styled accordion container with a title and slotted accordion items.
+
+It consists of two elements:
+- \`<bd-accordion-bg>\` — the wrapper/container with an optional title and background
+- \`<bd-accordion-bg-item>\` — individual collapsible items with toggle behavior
+
+### Usage
+\`\`\`html
+<bd-accordion-bg title="FAQ Section">
+  <bd-accordion-bg-item title="What is Bitdefender?">
+    <p>Bitdefender is a cybersecurity company...</p>
+  </bd-accordion-bg-item>
+  <bd-accordion-bg-item title="How does it work?">
+    <p>It uses AI-powered threat detection...</p>
+  </bd-accordion-bg-item>
+</bd-accordion-bg>
+\`\`\`
+
+### Accessibility
+- Each item has \`role="button"\`, \`aria-expanded\`, and \`aria-controls\`
+- Keyboard navigation supported via \`Enter\` and \`Space\`
+- IDs are auto-generated for \`aria-controls\` / \`aria-labelledby\` pairing
+        `
+      }
+    }
+  },
+  argTypes: {
     title: {
       control    : 'text',
-      description: 'Main title for the accordion container',
+      description: 'Title displayed in the accordion container header',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '' }
+        defaultValue: { summary: '' },
+        category    : 'BdAccordionBg'
       }
     },
     noBg: {
       control    : 'boolean',
-      description: 'Remove background styling from accordion items',
+      description: 'When true, removes the background styling from the container',
       table      : {
         type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
+        defaultValue: { summary: 'false' },
+        category    : 'BdAccordionBg'
       }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'An accessible accordion component with background styling options and keyboard navigation support. Perfect for FAQs, feature lists, and content organization.'
+    },
+    itemTitle: {
+      control    : 'text',
+      description: 'Title for an individual accordion item',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'BdAccordionBgItem'
+      }
+    },
+    itemOpen: {
+      control    : 'boolean',
+      description: 'Controls whether an accordion item is open by default',
+      table      : {
+        type        : { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category    : 'BdAccordionBgItem'
+      }
+    },
+    itemNoBg: {
+      control    : 'boolean',
+      description: 'Removes background from individual accordion items',
+      table      : {
+        type        : { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category    : 'BdAccordionBgItem'
       }
     }
   }
 };
 
-// Template for the main accordion container
-const AccordionTemplate = ({ title, noBg }) => html`
-  <bd-accordion-bg 
-    title="${title}" 
-    ?no-bg="${noBg}"
-  >
-    <bd-accordion-bg-item title="What is Bitdefender Ultimate Security?">
-      <bd-p kind="regular">
-        Bitdefender Ultimate Security is our comprehensive security solution that provides complete protection 
-        for your digital life. It includes advanced antivirus, firewall, VPN, password manager, and parental 
-        controls in one package.
-      </bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="How many devices can I protect?">
-      <bd-p kind="regular">
-        The Ultimate Security plan protects up to 5 devices simultaneously. You can mix and match between 
-        Windows, Mac, Android, and iOS devices according to your needs.
-      </bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Is there a money-back guarantee?">
-      <bd-p kind="regular">
-        Yes, we offer a 30-day money-back guarantee. If you're not satisfied with our product, you can 
-        request a full refund within 30 days of purchase.
-      </bd-p>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
-`;
-
-// Template for individual accordion items
-const AccordionItemTemplate = ({ title, open, noBg, content }) => html`
-  <bd-accordion-bg-item 
-    title="${title}" 
-    ?open="${open}" 
-    ?no-bg="${noBg}"
-  >
-    <bd-p kind="regular">${content}</bd-p>
-  </bd-accordion-bg-item>
-`;
-
-// ============ STORIES ============
-
-export const Default = AccordionTemplate.bind({});
-Default.args = {
-  title: 'Frequently Asked Questions',
-  noBg : false
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default accordion with background styling and a main title. Perfect for FAQ sections and content organization.'
+const defaultItems = [
+  { title: 'What is Bitdefender?',       content: 'Bitdefender is a global cybersecurity leader offering award-winning protection.' },
+  { title: 'How does it protect me?',    content: 'It uses AI-powered behavioral detection and real-time threat intelligence.' },
+  { title: 'Is it available on mobile?', content: 'Yes, Bitdefender is available on Android and iOS devices.' },
+  { title: 'What is the refund policy?', content: 'Bitdefender offers a 30-day money-back guarantee on all plans.' }
+];
+
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : 'Default',
+  render: () => html`
+    <bd-accordion-bg title="Frequently Asked Questions">
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default accordion with a title and four items, all collapsed by default.'
+      }
     }
   }
 };
 
-export const WithoutBackground = AccordionTemplate.bind({});
-WithoutBackground.args = {
-  title: 'Product Features',
-  noBg : true
-};
-WithoutBackground.parameters = {
-  docs: {
-    description: {
-      story: 'Accordion with no background styling for seamless integration into existing page layouts and designs.'
+export const WithFirstItemOpen = {
+  name  : 'First Item Open',
+  render: () => html`
+    <bd-accordion-bg title="Frequently Asked Questions">
+      ${defaultItems.map((item, i) => html`
+        <bd-accordion-bg-item title="${item.title}" ?open="${i === 0}">
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The first accordion item is open by default using the `open` boolean attribute.'
+      }
     }
   }
 };
 
-export const SingleAccordionItem = AccordionItemTemplate.bind({});
-SingleAccordionItem.args = {
-  title  : 'What makes Bitdefender different from other security solutions?',
-  open   : false,
-  noBg   : false,
-  content: 'Bitdefender uses advanced machine learning and behavioral analysis to detect and block threats in real-time. Our multi-layered protection approach ensures comprehensive security without impacting system performance.'
-};
-SingleAccordionItem.parameters = {
-  docs: {
-    description: {
-      story: 'Single accordion item demonstrating the basic functionality and styling of individual expandable sections.'
+export const AllItemsOpen = {
+  name  : 'All Items Open',
+  render: () => html`
+    <bd-accordion-bg title="All Expanded">
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}" open>
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'All accordion items rendered with `open` attribute set, showing all content simultaneously.'
+      }
     }
   }
 };
 
-export const OpenAccordionItem = AccordionItemTemplate.bind({});
-OpenAccordionItem.args = {
-  ...SingleAccordionItem.args,
-  open : true,
-  title: 'How does real-time protection work?'
-};
-OpenAccordionItem.parameters = {
-  docs: {
-    description: {
-      story: 'Pre-opened accordion item showing the expanded state with visible content. Useful for highlighting important information.'
+export const NoBgContainer = {
+  name  : 'No Background (Container)',
+  render: () => html`
+    <bd-accordion-bg title="No Background Container" no-bg>
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The `no-bg` attribute is applied to the container, removing its background styling.'
+      }
     }
   }
 };
 
-// **Adăugat exemplu pentru testarea creării dinamice**
-export const DynamicCreation = () => {
-  // Funcție pentru crearea dinamică a unui accordion item
-  const createDynamicItem = () => {
-    const item = document.createElement('bd-accordion-bg-item');
-    item.title = 'Dynamically Created Item';
-    item.noBg = false;
-    item.open = false;
-
-    const paragraph = document.createElement('bd-p');
-    paragraph.setAttribute('kind', 'regular');
-    paragraph.textContent = 'This accordion item was created dynamically using document.createElement(). It should work without any errors.';
-
-    item.appendChild(paragraph);
-    return item;
-  };
-
-  const handleAddItem = () => {
-    const container = document.getElementById('dynamic-accordion-container');
-    if (container) {
-      const newItem = createDynamicItem();
-      container.appendChild(newItem);
-    }
-  };
-
-  return html`
-    <div style="max-width: 800px; margin: 0 auto;">
-      <bd-h as="h2">Dynamic Accordion Creation Test</bd-h>
-      <bd-p kind="regular" style="margin-bottom: 1rem;">
-        This example demonstrates creating accordion items dynamically using <code>document.createElement()</code>.
-        The issue with setting attributes in the constructor should now be resolved.
-      </bd-p>
-      
-      <div style="margin-bottom: 2rem;">
-        <button 
-          @click=${handleAddItem}
-          style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        >
-          Add Dynamic Accordion Item
-        </button>
-      </div>
-      
-      <bd-accordion-bg title="Dynamically Created Items" no-bg>
-        <div id="dynamic-accordion-container">
-          <!-- Items will be added here dynamically -->
-        </div>
-      </bd-accordion-bg>
-      
-      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-        Try clicking the button above to add accordion items dynamically. Each should have a unique ID and work correctly.
-      </bd-p>
-    </div>
-  `;
-};
-DynamicCreation.parameters = {
-  docs: {
-    description: {
-      story: 'Test case for dynamic creation of accordion items using document.createElement(). Demonstrates that the ID generation issue has been resolved.'
+export const NoBgItems = {
+  name  : 'No Background (Items)',
+  render: () => html`
+    <bd-accordion-bg title="No Background Items">
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}" no-bg>
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The `no-bg` attribute is applied to each individual item, removing their background styling.'
+      }
     }
   }
 };
 
-export const SecurityFAQ = () => html`
-  <bd-accordion-bg title="Security & Protection FAQ">
-    <bd-accordion-bg-item title="How does Bitdefender protect against ransomware?">
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <bd-p kind="regular">
-          Bitdefender uses multiple layers of protection to defend against ransomware attacks:
-        </bd-p>
-        <ul style="margin: 0; padding-left: 1.5rem; color: #374151;">
-          <li><strong>Behavioral Detection:</strong> Monitors application behavior for ransomware-like patterns</li>
-          <li><strong>Advanced Threat Defense:</strong> Uses cloud-based analysis to detect new threats</li>
-          <li><strong>Safe Files:</strong> Protects important documents from unauthorized encryption</li>
-          <li><strong>Network Attack Protection:</strong> Blocks ransomware spread through networks</li>
-        </ul>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="What is the difference between antivirus and internet security?">
-      <bd-p kind="regular">
-        While both provide essential protection, they serve different purposes:
-      </bd-p>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem;">
-        <div>
-          <bd-h as="h4" style="color: #3b82f6;">Antivirus</bd-h>
-          <bd-p kind="small">
-            • Basic malware protection<br>
-            • Real-time scanning<br>
-            • Virus removal<br>
-            • Essential web protection
-          </bd-p>
-        </div>
-        <div>
-          <bd-h as="h4" style="color: #3b82f6;">Internet Security</bd-h>
-          <bd-p kind="small">
-            • All antivirus features<br>
-            • Firewall protection<br>
-            • Parental controls<br>
-            • Advanced privacy tools<br>
-            • Multi-layer ransomware protection
-          </bd-p>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="How often are virus definitions updated?">
-      <bd-p kind="regular">
-        Bitdefender updates its virus definitions multiple times per day to ensure protection against the latest threats. 
-        Our cloud-based security network processes over 500 million queries daily, providing real-time protection 
-        against emerging malware and zero-day attacks.
-      </bd-p>
-      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-        Last update: 2 hours ago | Next scheduled update: 15 minutes
-      </bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Does Bitdefender impact system performance?">
-      <bd-p kind="regular">
-        Bitdefender is designed for minimal system impact. Our products typically use:
-      </bd-p>
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem;">
-        <div style="text-align: center; padding: 1rem; background: #f8fafc; border-radius: 8px;">
-          <bd-h as="h4" style="color: #059669;">CPU Usage</bd-h>
-          <bd-p kind="large" style="color: #059669; margin: 0.5rem 0;">&lt;2%</bd-p>
-          <bd-p kind="small" style="color: #64748b;">Average during scans</bd-p>
-        </div>
-        <div style="text-align: center; padding: 1rem; background: #f8fafc; border-radius: 8px;">
-          <bd-h as="h4" style="color: #3b82f6;">Memory</bd-h>
-          <bd-p kind="large" style="color: #3b82f6; margin: 0.5rem 0;">~150MB</bd-p>
-          <bd-p kind="small" style="color: #64748b;">Typical RAM usage</bd-p>
-        </div>
-        <div style="text-align: center; padding: 1rem; background: #f8fafc; border-radius: 8px;">
-          <bd-h as="h4" style="color: #8b5cf6;">Boot Time</bd-h>
-          <bd-p kind="large" style="color: #8b5cf6; margin: 0.5rem 0;">+0.3s</bd-p>
-          <bd-p kind="small" style="color: #64748b;">Average impact</bd-p>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
-`;
-SecurityFAQ.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive FAQ example for security products with rich content including lists, comparisons, and performance metrics.'
+export const NoBgAll = {
+  name  : 'No Background (All)',
+  render: () => html`
+    <bd-accordion-bg title="No Background Everywhere" no-bg>
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}" no-bg>
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: '`no-bg` applied to both the container and all items — fully transparent layout.'
+      }
     }
   }
 };
 
-export const ProductFeatures = () => html`
-  <bd-accordion-bg title="Bitdefender Ultimate Security Features" no-bg>
-    <bd-accordion-bg-item title="Advanced Threat Defense" open>
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <bd-p kind="regular">
-          Our multi-layered protection system uses machine learning and behavioral analysis to detect 
-          and block sophisticated threats before they can harm your system.
-        </bd-p>
-        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
-          <span style="padding: 0.25rem 0.75rem; background: #dbeafe; color: #1e40af; border-radius: 16px; font-size: 0.875rem;">
-            Machine Learning
-          </span>
-          <span style="padding: 0.25rem 0.75rem; background: #f0fdf4; color: #166534; border-radius: 16px; font-size: 0.875rem;">
-            Behavioral Analysis
-          </span>
-          <span style="padding: 0.25rem 0.75rem; background: #fef3c7; color: #92400e; border-radius: 16px; font-size: 0.875rem;">
-            Cloud Scanning
-          </span>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Privacy Protection Tools">
-      <bd-p kind="regular">
-        Complete privacy suite including VPN, password manager, and webcam protection to keep your 
-        personal information secure from online threats and unauthorized access.
-      </bd-p>
-      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-        Features: Unlimited VPN traffic • Encrypted password storage • Webcam access monitoring
-      </bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Parental Controls">
-      <bd-p kind="regular">
-        Keep your family safe online with comprehensive parental controls that allow you to monitor 
-        and manage your children's internet usage across all devices.
-      </bd-p>
-      <div style="margin-top: 1rem;">
-        <bd-p kind="small" style="color: #64748b;">
-          • Content filtering and blocking<br>
-          • Screen time management<br>
-          • Location tracking<br>
-          • Social media monitoring
-        </bd-p>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Performance Optimization">
-      <bd-p kind="regular">
-        Lightweight design ensures maximum protection with minimal impact on system performance. 
-        Automatic optimization features keep your devices running smoothly.
-      </bd-p>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
-        <div>
-          <bd-h as="h5" style="margin-bottom: 0.5rem;">OneClick Optimizer</bd-h>
-          <bd-p kind="small" style="color: #64748b;">
-            Clean up junk files and optimize system performance with a single click.
-          </bd-p>
-        </div>
-        <div>
-          <bd-h as="h5" style="margin-bottom: 0.5rem;">Game Mode</bd-h>
-          <bd-p kind="small" style="color: #64748b;">
-            Automatically pauses notifications and updates during gaming sessions.
-          </bd-p>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
-`;
-ProductFeatures.parameters = {
-  docs: {
-    description: {
-      story: 'Product features showcase using the no-background variant with pre-opened sections and rich content including tags, feature lists, and detailed descriptions.'
+export const NoTitle = {
+  name  : 'No Container Title',
+  render: () => html`
+    <bd-accordion-bg>
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Container rendered without the `title` prop. The header area is empty.'
+      }
     }
   }
 };
 
-export const InstallationGuide = () => html`
-  <bd-accordion-bg title="Installation & Setup Guide">
-    <bd-accordion-bg-item title="System Requirements">
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
-        <div>
-          <bd-h as="h4" style="color: #3b82f6; margin-bottom: 0.5rem;">Windows</bd-h>
-          <bd-p kind="small" style="color: #64748b;">
-            • Windows 10/11 (64-bit)<br>
-            • 2GB RAM minimum<br>
-            • 2.5GB free space<br>
-            • Internet connection
-          </bd-p>
-        </div>
-        <div>
-          <bd-h as="h4" style="color: #3b82f6; margin-bottom: 0.5rem;">macOS</bd-h>
-          <bd-p kind="small" style="color: #64748b;">
-            • macOS 10.14+<br>
-            • 2GB RAM minimum<br>
-            • 2GB free space<br>
-            • Internet connection
-          </bd-p>
-        </div>
-        <div>
-          <bd-h as="h4" style="color: #3b82f6; margin-bottom: 0.5rem;">Mobile</bd-h>
-          <bd-p kind="small" style="color: #64748b;">
-            • Android 6.0+<br>
-            • iOS 13.0+<br>
-            • 500MB free space
-          </bd-p>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Download & Installation">
-      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-        <div style="display: flex; gap: 1rem; align-items: start;">
-          <div style="background: #3b82f6; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;">1</div>
-          <div>
-            <bd-h as="h5" style="margin-bottom: 0.25rem;">Download Installer</bd-h>
-            <bd-p kind="small" style="color: #64748b;">
-              Visit our website and download the appropriate installer for your operating system.
-            </bd-p>
-          </div>
-        </div>
-
-        <div style="display: flex; gap: 1rem; align-items: start;">
-          <div style="background: #3b82f6; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;">2</div>
-          <div>
-            <bd-h as="h5" style="margin-bottom: 0.25rem;">Run Installation</bd-h>
-            <bd-p kind="small" style="color: #64748b;">
-              Double-click the downloaded file and follow the on-screen instructions.
-            </bd-p>
-          </div>
-        </div>
-
-        <div style="display: flex; gap: 1rem; align-items: start;">
-          <div style="background: #3b82f6; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;">3</div>
-          <div>
-            <bd-h as="h5" style="margin-bottom: 0.25rem;">Activate Product</bd-h>
-            <bd-p kind="small" style="color: #64748b;">
-              Enter your activation code or sign in to your Bitdefender account.
-            </bd-p>
-          </div>
-        </div>
-      </div>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Initial Setup">
-      <bd-p kind="regular">
-        After installation, we recommend running the initial setup wizard to configure your protection 
-        settings and schedule your first system scan.
-      </bd-p>
-      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-        The setup process typically takes 5-10 minutes and includes security optimization recommendations.
-      </bd-p>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
-`;
-InstallationGuide.parameters = {
-  docs: {
-    description: {
-      story: 'Step-by-step installation guide using accordion sections with numbered steps, system requirements, and setup instructions in an organized, easy-to-follow format.'
+export const SingleItem = {
+  name  : 'Single Item',
+  render: () => html`
+    <bd-accordion-bg title="Single Item">
+      <bd-accordion-bg-item title="What is Bitdefender?">
+        <p>Bitdefender is a global cybersecurity leader offering award-winning protection.</p>
+      </bd-accordion-bg-item>
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: only one accordion item inside the container.'
+      }
     }
   }
 };
 
-export const AccessibilityExample = () => html`
-  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2">Accessible Accordion Implementation</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 2rem;">
-      This accordion component includes full accessibility support with proper ARIA attributes, 
-      keyboard navigation, and screen reader compatibility.
-    </bd-p>
-
-    <bd-accordion-bg title="Accessibility Features" no-bg>
-      <bd-accordion-bg-item title="Keyboard Navigation">
-        <bd-p kind="regular">
-          All accordion items can be navigated using keyboard controls:
-        </bd-p>
-        <ul style="margin: 1rem 0; padding-left: 1.5rem; color: #374151;">
-          <li><strong>Tab:</strong> Navigate between accordion items</li>
-          <li><strong>Enter/Space:</strong> Open or close the selected item</li>
-          <li><strong>Arrow keys:</strong> Navigate between items (when implemented in container)</li>
+export const RichContent = {
+  name  : 'Rich Slotted Content',
+  render: () => html`
+    <bd-accordion-bg title="Rich Content Example">
+      <bd-accordion-bg-item title="What plans are available?" open>
+        <ul>
+          <li>Antivirus Plus — 1 device</li>
+          <li>Total Security — up to 5 devices</li>
+          <li>Premium Security — unlimited devices</li>
         </ul>
       </bd-accordion-bg-item>
-
-      <bd-accordion-bg-item title="Screen Reader Support">
-        <bd-p kind="regular">
-          Proper ARIA attributes ensure screen readers can accurately convey the accordion state:
-        </bd-p>
-        <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
-          <bd-p kind="small" style="color: #64748b; margin: 0;">
-            <code>aria-expanded</code> - indicates open/closed state<br>
-            <code>aria-controls</code> - associates button with content<br>
-            <code>role="region"</code> - identifies content area<br>
-            <code>aria-labelledby</code> - labels content with button
-          </bd-p>
-        </div>
-      </bd-accordion-bg-item>
-
-      <bd-accordion-bg-item title="Focus Management">
-        <bd-p kind="regular">
-          Clear focus indicators and proper focus management ensure users can easily navigate 
-          and understand their current position within the accordion.
-        </bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
-          Try tabbing through this accordion to see the focus indicators in action.
-        </bd-p>
+      <bd-accordion-bg-item title="Supported platforms?">
+        <p>Windows, macOS, iOS, and Android are all supported.</p>
+        <a href="#">Learn more</a>
       </bd-accordion-bg-item>
     </bd-accordion-bg>
-  </div>
-`;
-AccessibilityExample.parameters = {
-  docs: {
-    description: {
-      story: 'Accessibility-focused example demonstrating keyboard navigation, screen reader support, and proper ARIA attributes with detailed explanations of each accessibility feature.'
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Accordion items with rich slotted content including lists, paragraphs, and links.'
+      }
     }
   }
 };
 
-export const InteractivePlayground = AccordionItemTemplate.bind({});
-InteractivePlayground.args = {
-  title  : 'Customize this accordion item',
-  open   : false,
-  noBg   : false,
-  content: 'This is a customizable accordion item. Use the controls panel to modify the title, open state, and background styling.'
+export const KeyboardNavigation = {
+  name  : 'Keyboard Navigation',
+  render: () => html`
+    <p style="margin-bottom: 12px; font-size: 14px;">
+      Tab to focus an item, then press <strong>Enter</strong> or <strong>Space</strong> to toggle.
+    </p>
+    <bd-accordion-bg title="Keyboard Accessible Accordion">
+      ${defaultItems.map(item => html`
+        <bd-accordion-bg-item title="${item.title}">
+          <p>${item.content}</p>
+        </bd-accordion-bg-item>
+      `)}
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates keyboard accessibility. Each item has `tabindex="0"` and responds to `Enter` and `Space` key events.'
+      }
+    }
+  }
 };
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground where you can test accordion item properties in real-time. Use the controls panel to modify the title, open state, and background styling options.'
+
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    title    : 'Accordion Title',
+    noBg     : false,
+    itemTitle: 'Accordion Item Title',
+    itemOpen : false,
+    itemNoBg : false
+  },
+  render: (args) => html`
+    <bd-accordion-bg title="${args.title}" ?no-bg="${args.noBg}">
+      <bd-accordion-bg-item
+        title="${args.itemTitle}"
+        ?open="${args.itemOpen}"
+        ?no-bg="${args.itemNoBg}"
+      >
+        <p>This is the slotted content inside the accordion item.</p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Second item (static)">
+        <p>Static content for the second item.</p>
+      </bd-accordion-bg-item>
+    </bd-accordion-bg>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground. Use the Controls panel to modify the container title, no-bg flags, and the first item\'s state.'
+      }
     }
   }
 };