@repobit/dex-system-design 0.21.2 → 0.22.0

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

@@ -1,74 +1,83 @@
 import { html } from 'lit';
 import '../heading/heading.js';
-import '../list/list-item/list-item.js';
-import '../list/list.js'; // Componenta unificată bd-list
 import '../paragraph/paragraph.js';
-
 import './accordion-bg.js';
 
 export default {
-  title        : 'Components/Accordion BG',
-  component    : 'bd-accordion-bg',
-  subcomponents: { 'bd-accordion-bg-item': 'bd-accordion-bg-item' },
-  argTypes     : {
+  title    : 'Components/Accordion',
+  component: 'bd-accordion-bg',
+  tags     : ['autodocs'],
+  argTypes : {
     title: {
       control    : 'text',
-      description: 'Title of the accordion section'
+      description: 'Main title for the accordion container',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
     },
     noBg: {
       control    : 'boolean',
-      description: 'Remove background from accordion items'
+      description: 'Remove background styling from accordion items',
+      table      : {
+        type        : { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      }
     }
   },
   parameters: {
     docs: {
       description: {
-        component: 'A customizable accordion component with background options and accessibility features.'
+        component: 'An accessible accordion component with background styling options and keyboard navigation support. Perfect for FAQs, feature lists, and content organization.'
       }
     }
   }
 };
 
-const Template = ({ title, noBg }) => html`
-  <bd-accordion-bg title="${title}" ?no-bg="${noBg}">
-    <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?" ?no-bg="${noBg}">
-      <bd-p kind="regular">Bitdefender Internet Security provides the best protection against all e-threats, combining antimalware, e-mail, and web protection with firewall and privacy features.</bd-p>
-      <bd-p kind="regular">It uses advanced behavioral detection to close the window of zero-day vulnerability and keeps you safe from ransomware, spyware, and advanced persistent threats.</bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?" ?no-bg="${noBg}">
-      <bd-p kind="regular">Yes! Bitdefender Internet Security offers unbeatable ransomware protection by safeguarding your most important files from encryption by ransomware.</bd-p>
-      <bd-p kind="regular">Our multi-layer ransomware protection includes:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Behavioral detection of ransomware</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Safe Files feature to protect important folders</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Real-time protection against encryption attempts</bd-p></bd-li>
-      </bd-list>
+// 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="Do I get a VPN with Bitdefender Internet Security?" ?no-bg="${noBg}">
-      <bd-p kind="regular">Bitdefender Internet Security includes a basic VPN with 200MB per day to protect your privacy when browsing on public Wi-Fi networks.</bd-p>
-      <bd-p kind="regular">For unlimited VPN traffic, you can upgrade to Bitdefender Premium VPN or Bitdefender Total Security which includes unlimited VPN.</bd-p>
+    <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="Can I use Bitdefender on multiple devices?" ?no-bg="${noBg}">
-      <bd-p kind="regular">Yes, depending on your subscription. Bitdefender offers multi-device plans that allow you to protect:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Windows computers</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Mac computers</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Android devices</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">iOS devices</bd-p></bd-li>
-      </bd-list>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="How often are virus definitions updated?" ?no-bg="${noBg}">
-      <bd-p kind="regular">Bitdefender updates its virus definitions multiple times per day to ensure you're protected against the latest threats.</bd-p>
-      <bd-p kind="regular">Our cloud-based threat intelligence network processes over 500 million queries daily, providing real-time protection against emerging threats.</bd-p>
+    <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>
 `;
 
-export const Default = Template.bind({});
+// 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
@@ -76,206 +85,367 @@ Default.args = {
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default accordion with background styling.'
+      story: 'Default accordion with background styling and a main title. Perfect for FAQ sections and content organization.'
     }
   }
 };
 
-export const NoBackground = Template.bind({});
-NoBackground.args = {
-  title: 'Frequently Asked Questions',
+export const WithoutBackground = AccordionTemplate.bind({});
+WithoutBackground.args = {
+  title: 'Product Features',
   noBg : true
 };
-NoBackground.parameters = {
+WithoutBackground.parameters = {
   docs: {
     description: {
-      story: 'Accordion without background styling for cleaner, minimalist design.'
+      story: 'Accordion with no background styling for seamless integration into existing page layouts and designs.'
     }
   }
 };
 
-export const MixedBackground = () => html`
-  <bd-accordion-bg title="Mixed Background Accordion">
-    <bd-accordion-bg-item title="Item with background">
-      <bd-p kind="regular">This item has the default background styling.</bd-p>
-      <bd-p kind="regular">It uses the blue background color as defined in the CSS.</bd-p>
+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 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 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="Item without background" no-bg>
-      <bd-p kind="regular">This item has no background styling.</bd-p>
-      <bd-p kind="regular">It appears transparent and integrates seamlessly with the page background.</bd-p>
+    <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="Another item with background">
-      <bd-p kind="regular">This item returns to the default background styling.</bd-p>
-      <bd-p kind="regular">You can mix and match background styles within the same accordion.</bd-p>
+    <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>
 `;
-MixedBackground.parameters = {
+SecurityFAQ.parameters = {
   docs: {
     description: {
-      story: 'Accordion with mixed background styles - some items with background, some without.'
+      story: 'Comprehensive FAQ example for security products with rich content including lists, comparisons, and performance metrics.'
     }
   }
 };
 
-export const ContainerNoBackground = () => html`
-  <bd-accordion-bg title="Container without Background" no-bg>
-    <bd-accordion-bg-item title="First question">
-      <bd-p kind="regular">When the container has no-bg, all items inherit the transparent background unless specifically overridden.</bd-p>
+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="Second question">
-      <bd-p kind="regular">All items in this accordion have transparent backgrounds because the container has no-bg set.</bd-p>
+    <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="Third question">
-      <bd-p kind="regular">This creates a clean, minimalist look that blends with the page background.</bd-p>
+    <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>
 `;
-ContainerNoBackground.parameters = {
+ProductFeatures.parameters = {
   docs: {
     description: {
-      story: 'Accordion container with no-bg attribute, making all items transparent by default.'
+      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 WithCustomContent = () => html`
-  <bd-accordion-bg title="Product Features">
-    <bd-accordion-bg-item title="Advanced Threat Defense">
-      <div>
-        <bd-h as="h4">Multi-layer Protection</bd-h>
-        <bd-p kind="regular">Our advanced threat defense uses multiple layers of protection:</bd-p>
-        <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-          <bd-li kind="bullet" size="md"><bd-p kind="regular">Behavioral detection</bd-p></bd-li>
-          <bd-li kind="bullet" size="md"><bd-p kind="regular">Machine learning algorithms</bd-p></bd-li>
-          <bd-li kind="bullet" size="md"><bd-p kind="regular">Cloud-based analysis</bd-p></bd-li>
-          <bd-li kind="bullet" size="md"><bd-p kind="regular">Real-time scanning</bd-p></bd-li>
-        </bd-list>
-        <bd-p kind="regular"><strong>System Requirements:</strong> Windows 10/11, 2GB RAM, 2.5GB free space</bd-p>
+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="Privacy Protection" no-bg>
-      <div>
-        <bd-h as="h4">Complete Privacy Suite</bd-h>
-        <bd-p kind="regular">Protect your online privacy with our comprehensive tools:</bd-p>
-        <div style="display: flex; gap: 20px; margin-top: 15px;">
+    <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="h4">VPN</bd-h>
-            <bd-p kind="regular">200MB/day included</bd-p>
+            <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="h4">Password Manager</bd-h>
-            <bd-p kind="regular">Secure credential storage</bd-p>
+            <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="h4">Webcam Protection</bd-h>
-            <bd-p kind="regular">Block unauthorized access</bd-p>
+            <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="Performance Impact">
-      <div>
-        <bd-h as="h4">Lightweight Design</bd-h>
-        <bd-p kind="regular">Bitdefender is designed to have minimal impact on system performance:</bd-p>
-        <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
-          <tr>
-            <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ccc;">Resource</th>
-            <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ccc;">Usage</th>
-          </tr>
-          <tr>
-            <td style="padding: 8px; border-bottom: 1px solid #ccc;">CPU</td>
-            <td style="padding: 8px; border-bottom: 1px solid #ccc;"><bd-p kind="regular">&lt; 2% average</bd-p></td>
-          </tr>
-          <tr>
-            <td style="padding: 8px; border-bottom: 1px solid #ccc;">Memory</td>
-            <td style="padding: 8px; border-bottom: 1px solid #ccc;"><bd-p kind="regular">~150MB</bd-p></td>
-          </tr>
-          <tr>
-            <td style="padding: 8px;">Disk</td>
-            <td style="padding: 8px;"><bd-p kind="regular">&lt; 500MB</bd-p></td>
-          </tr>
-        </table>
-      </div>
+    <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>
 `;
-WithCustomContent.parameters = {
+InstallationGuide.parameters = {
   docs: {
     description: {
-      story: 'Accordion with rich custom content including lists, tables, and formatted text.'
+      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 AccessibilityDemo = () => html`
-  <bd-accordion-bg title="Accessibility Features">
-    <bd-accordion-bg-item title="Keyboard Navigation">
-      <bd-p kind="regular">This accordion supports full keyboard navigation:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Use <kbd>Tab</kbd> to navigate between accordion items</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Press <kbd>Enter</kbd> or <kbd>Space</kbd> to toggle items</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Proper ARIA attributes for screen readers</bd-p></bd-li>
-      </bd-list>
-    </bd-accordion-bg-item>
+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-item title="Screen Reader Support">
-      <bd-p kind="regular">All accordion items include proper ARIA attributes:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md"><bd-p kind="regular"><code>role="button"</code> for the clickable header</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular"><code>aria-expanded</code> to indicate state</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular"><code>aria-controls</code> to associate with content</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular"><code>role="region"</code> for the content area</bd-p></bd-li>
-      </bd-list>
-    </bd-accordion-bg-item>
+    <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>
+        </ul>
+      </bd-accordion-bg-item>
 
-    <bd-accordion-bg-item title="Focus Management">
-      <bd-p kind="regular">Focus indicators are clearly visible for keyboard users:</bd-p>
-      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Clear focus outline</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">High contrast colors</bd-p></bd-li>
-        <bd-li kind="bullet" size="md"><bd-p kind="regular">Smooth transitions</bd-p></bd-li>
-      </bd-list>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
+      <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>
+    </bd-accordion-bg>
+  </div>
 `;
-AccessibilityDemo.parameters = {
+AccessibilityExample.parameters = {
   docs: {
     description: {
-      story: 'Demonstration of accessibility features including keyboard navigation and ARIA attributes.'
+      story: 'Accessibility-focused example demonstrating keyboard navigation, screen reader support, and proper ARIA attributes with detailed explanations of each accessibility feature.'
     }
   }
 };
 
-export const WithDifferentParagraphTypes = () => html`
-  <bd-accordion-bg title="Different Paragraph Styles">
-    <bd-accordion-bg-item title="Regular Paragraph">
-      <bd-p kind="regular">This is a regular paragraph with standard styling.</bd-p>
-      <bd-p kind="regular">It uses the default font size and weight for body text.</bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Small Paragraph">
-      <bd-p kind="small">This is a small paragraph for less important information.</bd-p>
-      <bd-p kind="small">Perfect for captions, footnotes, or secondary content.</bd-p>
-    </bd-accordion-bg-item>
-
-    <bd-accordion-bg-item title="Mixed Paragraph Styles">
-      <bd-p kind="regular">Main content goes here with regular styling.</bd-p>
-      <bd-p kind="small">Additional details or notes in small text.</bd-p>
-      <bd-p kind="regular">Back to regular text for important information.</bd-p>
-    </bd-accordion-bg-item>
-  </bd-accordion-bg>
-`;
-WithDifferentParagraphTypes.parameters = {
+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.'
+};
+InteractivePlayground.parameters = {
   docs: {
     description: {
-      story: 'Accordion demonstrating different paragraph styles (regular and small).'
+      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.'
     }
   }
 };