@repobit/dex-system-design 0.19.2 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.2...@repobit/dex-system-design@0.20.0) (2025-10-08)
+
+
+### Features
+
+* **DEX-1001:** new version for tokens.css - previous was outdated ([97acf3a](https://github.com/bitdefender/dex-core/commit/97acf3a5002fdad340eaf73e7b79049073eb908e))
+
+
+### Bug Fixes
+
+* **DEX-1003:** footer adjustments on tablets and new card components created ([f8d5cf5](https://github.com/bitdefender/dex-core/commit/f8d5cf5af9dbcf81dbd7bf6e307ce9af202e2aa9))
+* **DEX-1003:** modified light carousel storybook due to images issue ([69224b1](https://github.com/bitdefender/dex-core/commit/69224b1c6eab9562e31b215ddc06039093e90b6b))
+* **DEX-1003:** modified svg icons into inline svg ([12eb99b](https://github.com/bitdefender/dex-core/commit/12eb99b6652e214798876c24fa186da2db675a8c))
+* **DEX-1003:** remove accordion-no-bg and merge with accordion-bg, add SVG inline icons ([cfbc2da](https://github.com/bitdefender/dex-core/commit/cfbc2da3a6879244d1e9d2db0c1da113e32e1ad3))
+* **DEX-1003:** remove accordion-no-bg, merge with accordion-bg, add inline SVG icons ([2f35df4](https://github.com/bitdefender/dex-core/commit/2f35df4389cb3a42bb5c739653b3b513c876a031))
+* **DEX-1003:** remove forgotten line from index.html ([57f203a](https://github.com/bitdefender/dex-core/commit/57f203a4cdbf2e8942663e08124d2950cd8149ea))
+* **DEX-1003:** svg icons modified into svg in line + card components ([fc536e2](https://github.com/bitdefender/dex-core/commit/fc536e2e62d24cd2354d3e5d420e4e17856cbf9a))
+* **DEX-1003:** token name updated to fix gap problems between quick links columns ([40a1375](https://github.com/bitdefender/dex-core/commit/40a1375172bec391a7144eb3e6045e65e064712d))
+* **DEX-1003:** update footer stories ([b55074d](https://github.com/bitdefender/dex-core/commit/b55074d801bf4ca99c39b33360783013d1257198))
+* **DEX-999:** new version for tokens (previous was outdated) ([d4d73fc](https://github.com/bitdefender/dex-core/commit/d4d73fcdafeff82c61a742711b11bd9c98d9636c))
+
+
+
 ## [0.19.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.1...@repobit/dex-system-design@0.19.2) (2025-10-06)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -17,7 +17,6 @@
   ],
   "exports": {
     "./accordion-bg": "./src/components/accordion/accordion-bg.js",
-    "./accordion-no-bg": "./src/components/accordion/accordion-no-bg.js",
     "./accordion": "./src/components/accordion/accordion.js",
     "./anchor": "./src/components/anchor/anchor-nav.js",
     "./badge": "./src/components/badge/badge.js",
@@ -79,5 +78,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "4719cfeb84a6e363a78a33460197661f23aac5a5"
+  "gitHead": "a8089d8dbd8b06f741f5d710fbe98d70d1a56c7e"
 }

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

@@ -85,21 +85,33 @@ export default css`
       bottom: 1px;
     }
 
-    .bd-accordion-bg-answer {
-      overflow: hidden;
-      max-height: 0;
-      opacity: 0;
-      padding: 0 15px;
-      background-color: var(--color-blue-50);
-      font-family: var(--typography-fontFamily-sans);
-      font-weight: var(--font-weight-sans-medium);
-    }
+  .bd-accordion-bg-icon {
+    transition: transform 0.3s ease;
+    width: var(--spacing-14);
+    height: var(--spacing-14);
+    color: var(--color-blue-500);
+    text-align: center;
+    position: relative;
+  }
+
+.bd-accordion-bg-item:not(.open) .bd-accordion-bg-icon {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="6" width="2" height="14" fill="%23006DFF"/><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+}
+
+.bd-accordion-bg-item.open .bd-accordion-bg-icon {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+}
+
+  .bd-accordion-bg-answer {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    padding: 0 15px;
+    background-color: var(--color-blue-50);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--font-weight-sans-medium);
+  }
 
-    .bd-accordion-bg-item.open .bd-accordion-bg-answer {
-      max-height: 1000px;
-      opacity: 1;
-      padding: var(--spacing-0) var(--spacing-40);
-    }
 
     .bd-accordion-bg-answer > div {
       overflow: hidden;
@@ -124,4 +136,40 @@ export default css`
       font-size: 20px;
     }
   }
+.bd-accordion-bg-container.no-bg {
+  background: none;
+}
+
+.bd-accordion-bg-item.no-bg {
+  background-color: transparent;
+  border: none;
+}
+
+.bd-accordion-bg-item.no-bg .bd-accordion-bg-question {
+  background-color: transparent;
+}
+
+.bd-accordion-bg-item.no-bg .bd-accordion-bg-answer {
+  background-color: transparent;
+  padding: var(--spacing-0) var(--spacing-40);
+}
+
+.bd-accordion-bg-item.no-bg:hover {
+  background-color: transparent;
+}
+
+.bd-accordion-bg-item.no-bg:hover .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+
+.bd-accordion-bg-item:hover .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+.bd-accordion-bg-item:focus .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+.bd-accordion-bg-item.no-bg:focus .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+
 `;

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

@@ -4,14 +4,20 @@ import accordionCSS from "./accordion-bg.css";
 
 class BdAccordionBg extends LitElement {
   static properties = {
-    title: { type: String }
+    title: { type: String },
+    noBg : { type: Boolean, attribute: 'no-bg' }
   };
 
+  constructor() {
+    super();
+    this.noBg = false;
+  }
+
   static styles = [tokens, accordionCSS];
 
   render() {
     return html`
-      <div class="bd-accordion-bg-container">
+      <div class="bd-accordion-bg-container ${this.noBg ? 'no-bg' : ''}">
         <div class="bd-accordion-bg-header">
           <h1 class="bd-accordion-bg-title">${this.title}</h1>
         </div>
@@ -24,13 +30,15 @@ class BdAccordionBg extends LitElement {
 class BdAccordionBgItem extends LitElement {
   static properties = {
     title: { type: String },
-    open : { type: Boolean, reflect: true }
+    open : { type: Boolean, reflect: true },
+    noBg : { type: Boolean, attribute: 'no-bg' }
   };
 
   constructor() {
     super();
     this.title = "";
     this.open = false;
+    this.noBg = false;
     this.id = `accordion-${Math.random().toString(36)
       .substr(2, 9)}`;
   }
@@ -59,7 +67,7 @@ class BdAccordionBgItem extends LitElement {
   render() {
     return html`
       <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""}"
+        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? 'no-bg' : ''}"
         role="button"
         aria-expanded="${this.open}"
         aria-controls="${this.id}"
@@ -68,7 +76,7 @@ class BdAccordionBgItem extends LitElement {
         @keydown=${this.handleKeyDown}
       >
         <div class="bd-accordion-bg-question">
-          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
+          <div class="bd-accordion-bg-icon"></div>
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </div>
         <div

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

@@ -0,0 +1,251 @@
+// accordion-bg.stories.js
+
+import { html } from 'lit';
+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: {
+      control    : 'text',
+      description: 'Title of the accordion section'
+    },
+    noBg: {
+      control    : 'boolean',
+      description: 'Remove background from accordion items'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable accordion component with background options and accessibility features.'
+      }
+    }
+  }
+};
+
+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}">
+      <p>Bitdefender Internet Security provides the best protection against all e-threats, combining antimalware, e-mail, and web protection with firewall and privacy features.</p>
+      <p>It uses advanced behavioral detection to close the window of zero-day vulnerability and keeps you safe from ransomware, spyware, and advanced persistent threats.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?" ?no-bg="${noBg}">
+      <p>Yes! Bitdefender Internet Security offers unbeatable ransomware protection by safeguarding your most important files from encryption by ransomware.</p>
+      <p>Our multi-layer ransomware protection includes:</p>
+      <ul>
+        <li>Behavioral detection of ransomware</li>
+        <li>Safe Files feature to protect important folders</li>
+        <li>Real-time protection against encryption attempts</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?" ?no-bg="${noBg}">
+      <p>Bitdefender Internet Security includes a basic VPN with 200MB per day to protect your privacy when browsing on public Wi-Fi networks.</p>
+      <p>For unlimited VPN traffic, you can upgrade to Bitdefender Premium VPN or Bitdefender Total Security which includes unlimited VPN.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Can I use Bitdefender on multiple devices?" ?no-bg="${noBg}">
+      <p>Yes, depending on your subscription. Bitdefender offers multi-device plans that allow you to protect:</p>
+      <ul>
+        <li>Windows computers</li>
+        <li>Mac computers</li>
+        <li>Android devices</li>
+        <li>iOS devices</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="How often are virus definitions updated?" ?no-bg="${noBg}">
+      <p>Bitdefender updates its virus definitions multiple times per day to ensure you're protected against the latest threats.</p>
+      <p>Our cloud-based threat intelligence network processes over 500 million queries daily, providing real-time protection against emerging threats.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Frequently Asked Questions',
+  noBg : false
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default accordion with background styling.'
+    }
+  }
+};
+
+export const NoBackground = Template.bind({});
+NoBackground.args = {
+  title: 'Frequently Asked Questions',
+  noBg : true
+};
+NoBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion without background styling for cleaner, minimalist design.'
+    }
+  }
+};
+
+export const MixedBackground = () => html`
+  <bd-accordion-bg title="Mixed Background Accordion">
+    <bd-accordion-bg-item title="Item with background">
+      <p>This item has the default background styling.</p>
+      <p>It uses the blue background color as defined in the CSS.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Item without background" no-bg>
+      <p>This item has no background styling.</p>
+      <p>It appears transparent and integrates seamlessly with the page background.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Another item with background">
+      <p>This item returns to the default background styling.</p>
+      <p>You can mix and match background styles within the same accordion.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+MixedBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion with mixed background styles - some items with background, some without.'
+    }
+  }
+};
+
+export const ContainerNoBackground = () => html`
+  <bd-accordion-bg title="Container without Background" no-bg>
+    <bd-accordion-bg-item title="First question">
+      <p>When the container has no-bg, all items inherit the transparent background unless specifically overridden.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Second question">
+      <p>All items in this accordion have transparent backgrounds because the container has no-bg set.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Third question">
+      <p>This creates a clean, minimalist look that blends with the page background.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+ContainerNoBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion container with no-bg attribute, making all items transparent by default.'
+    }
+  }
+};
+
+export const WithCustomContent = () => html`
+  <bd-accordion-bg title="Product Features">
+    <bd-accordion-bg-item title="Advanced Threat Defense">
+      <div>
+        <h4>Multi-layer Protection</h4>
+        <p>Our advanced threat defense uses multiple layers of protection:</p>
+        <ul>
+          <li>Behavioral detection</li>
+          <li>Machine learning algorithms</li>
+          <li>Cloud-based analysis</li>
+          <li>Real-time scanning</li>
+        </ul>
+        <p><strong>System Requirements:</strong> Windows 10/11, 2GB RAM, 2.5GB free space</p>
+      </div>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Privacy Protection" no-bg>
+      <div>
+        <h4>Complete Privacy Suite</h4>
+        <p>Protect your online privacy with our comprehensive tools:</p>
+        <div style="display: flex; gap: 20px; margin-top: 15px;">
+          <div>
+            <h5>VPN</h5>
+            <p>200MB/day included</p>
+          </div>
+          <div>
+            <h5>Password Manager</h5>
+            <p>Secure credential storage</p>
+          </div>
+          <div>
+            <h5>Webcam Protection</h5>
+            <p>Block unauthorized access</p>
+          </div>
+        </div>
+      </div>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Performance Impact">
+      <div>
+        <h4>Lightweight Design</h4>
+        <p>Bitdefender is designed to have minimal impact on system performance:</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;">&lt; 2% average</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">Memory</td>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">~150MB</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px;">Disk</td>
+            <td style="padding: 8px;">&lt; 500MB</td>
+          </tr>
+        </table>
+      </div>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+WithCustomContent.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion with rich custom content including lists, tables, and formatted text.'
+    }
+  }
+};
+
+export const AccessibilityDemo = () => html`
+  <bd-accordion-bg title="Accessibility Features">
+    <bd-accordion-bg-item title="Keyboard Navigation">
+      <p>This accordion supports full keyboard navigation:</p>
+      <ul>
+        <li>Use <kbd>Tab</kbd> to navigate between accordion items</li>
+        <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to toggle items</li>
+        <li>Proper ARIA attributes for screen readers</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Screen Reader Support">
+      <p>All accordion items include proper ARIA attributes:</p>
+      <ul>
+        <li><code>role="button"</code> for the clickable header</li>
+        <li><code>aria-expanded</code> to indicate state</li>
+        <li><code>aria-controls</code> to associate with content</li>
+        <li><code>role="region"</code> for the content area</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Focus Management">
+      <p>Focus indicators are clearly visible for keyboard users:</p>
+      <ul>
+        <li>Clear focus outline</li>
+        <li>High contrast colors</li>
+        <li>Smooth transitions</li>
+      </ul>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+AccessibilityDemo.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstration of accessibility features including keyboard navigation and ARIA attributes.'
+    }
+  }
+};

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

@@ -0,0 +1,216 @@
+// accordion-light.stories.js
+
+import { html } from 'lit';
+import './accordion.js';
+
+export default {
+  title        : 'Components/Accordion Light',
+  component    : 'bd-accordion-section',
+  subcomponents: {
+    'bd-accordion-item'   : 'bd-accordion-item',
+    'bd-accordion-section': 'bd-accordion-section'
+  },
+  argTypes: {
+    title: {
+      control    : 'text',
+      description: 'Title of the accordion section'
+    },
+    guideIcon: {
+      control    : 'text',
+      description: 'URL for the guide icon image'
+    },
+    guideLabel: {
+      control    : 'text',
+      description: 'Text label for the guide link'
+    },
+    guideHref: {
+      control    : 'text',
+      description: 'URL for the guide link'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A lightweight accordion component ideal for menus, terms of use, FAQs, and other content that requires expandable sections. Features a clean, minimalist design with optional user guide links.'
+      }
+    }
+  }
+};
+
+// Template for basic accordion items
+const BasicTemplate = ({ title, guideIcon, guideLabel, guideHref }) => html`
+  <bd-accordion-section 
+    title="${title}"
+    guide-icon="${guideIcon}"
+    guide-label="${guideLabel}"
+    guide-href="${guideHref}"
+  >
+    <bd-accordion-item title="What is Bitdefender?">
+      <p>Bitdefender is a leading cybersecurity company delivering robust security solutions to over 500 million users in more than 150 countries.</p>
+      <p>Our products protect devices, data, and privacy against the full spectrum of cyberthreats.</p>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="System Requirements">
+      <p><strong>Operating Systems:</strong> Windows 10/11, macOS 10.12+, Android 5.0+, iOS 12+</p>
+      <p><strong>Hardware:</strong> 1GB RAM minimum, 2.5GB free disk space</p>
+      <p><strong>Internet:</strong> Required for activation and updates</p>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="Installation Process">
+      <p>Follow these simple steps to install Bitdefender:</p>
+      <ol>
+        <li>Download the installation file from our website</li>
+        <li>Run the installer and follow on-screen instructions</li>
+        <li>Activate with your product key</li>
+        <li>Run your first scan</li>
+      </ol>
+    </bd-accordion-item>
+  </bd-accordion-section>
+`;
+
+export const Default = BasicTemplate.bind({});
+Default.args = {
+  title     : 'Product Information',
+  guideIcon : '',
+  guideLabel: '',
+  guideHref : '#'
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default lightweight accordion with simple toggle indicators and clean design.'
+    }
+  }
+};
+
+export const WithUserGuide = BasicTemplate.bind({});
+WithUserGuide.args = {
+  title     : 'Installation Guide',
+  guideIcon : '/assets/user_guide.png',
+  guideLabel: 'View Complete User Guide',
+  guideHref : '/user-guide'
+};
+WithUserGuide.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion with user guide link, perfect for documentation and help sections.'
+    }
+  }
+};
+
+export const TermsOfUse = () => html`
+  <bd-accordion-section title="Terms of Use">
+    <bd-accordion-item title="Acceptance of Terms">
+      <p>By accessing and using Bitdefender products, you accept and agree to be bound by the terms and provision of this agreement.</p>
+      <p><strong>Last Updated:</strong> January 15, 2024</p>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="License Grant">
+      <p>Bitdefender grants you a limited, non-exclusive, non-transferable license to use the software for personal or internal business purposes.</p>
+      <ul>
+        <li>Single-user license for personal use</li>
+        <li>Multi-device options available</li>
+        <li>Non-commercial use unless specified</li>
+      </ul>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="Privacy Policy">
+      <p>Our privacy policy explains how we collect, use, and protect your personal information.</p>
+      <p><strong>Data Collection:</strong> We collect minimal data necessary for security functionality.</p>
+      <p><strong>Data Usage:</strong> Data is used solely for threat detection and product improvement.</p>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="Limitation of Liability">
+      <p>To the maximum extent permitted by law, Bitdefender shall not be liable for any indirect, special, incidental, or consequential damages.</p>
+      <p>This includes but is not limited to damages for loss of profits, business interruption, or loss of information.</p>
+    </bd-accordion-item>
+  </bd-accordion-section>
+`;
+TermsOfUse.parameters = {
+  docs: {
+    description: {
+      story: 'Perfect for legal documents like Terms of Use with multiple expandable sections.'
+    }
+  }
+};
+
+export const NavigationMenu = () => html`
+  <bd-accordion-section>
+    <bd-accordion-item title="Products">
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="padding: 8px 0;"><a href="/antivirus" style="text-decoration: none; color: #0066cc;">Antivirus Plus</a></li>
+        <li style="padding: 8px 0;"><a href="/internet-security" style="text-decoration: none; color: #0066cc;">Internet Security</a></li>
+        <li style="padding: 8px 0;"><a href="/total-security" style="text-decoration: none; color: #0066cc;">Total Security</a></li>
+        <li style="padding: 8px 0;"><a href="/premium-security" style="text-decoration: none; color: #0066cc;">Premium Security</a></li>
+      </ul>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="Support">
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="padding: 8px 0;"><a href="/downloads" style="text-decoration: none; color: #0066cc;">Downloads</a></li>
+        <li style="padding: 8px 0;"><a href="/knowledge-base" style="text-decoration: none; color: #0066cc;">Knowledge Base</a></li>
+        <li style="padding: 8px 0;"><a href="/contact" style="text-decoration: none; color: #0066cc;">Contact Support</a></li>
+        <li style="padding: 8px 0;"><a href="/community" style="text-decoration: none; color: #0066cc;">Community Forum</a></li>
+      </ul>
+    </bd-accordion-item>
+
+    <bd-accordion-item title="Company">
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="padding: 8px 0;"><a href="/about" style="text-decoration: none; color: #0066cc;">About Us</a></li>
+        <li style="padding: 8px 0;"><a href="/press" style="text-decoration: none; color: #0066cc;">Press Center</a></li>
+        <li style="padding: 8px 0;"><a href="/careers" style="text-decoration: none; color: #0066cc;">Careers</a></li>
+        <li style="padding: 8px 0;"><a href="/partners" style="text-decoration: none; color: #0066cc;">Partners</a></li>
+      </ul>
+    </bd-accordion-item>
+  </bd-accordion-section>
+`;
+NavigationMenu.parameters = {
+  docs: {
+    description: {
+      story: 'Used as a navigation menu with expandable categories and internal links.'
+    }
+  }
+};
+
+export const MultipleSections = () => html`
+  <div style="display: flex; flex-direction: column; gap: 40px;">
+    <bd-accordion-section title="Getting Started">
+      <bd-accordion-item title="System Requirements">
+        <p>Minimum requirements for optimal performance...</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Installation Guide">
+        <p>Step-by-step installation instructions...</p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+
+    <bd-accordion-section 
+      title="Troubleshooting"
+      guide-icon="/assets/user_guide.png"
+      guide-label="Advanced Troubleshooting Guide"
+      guide-href="/troubleshooting"
+    >
+      <bd-accordion-item title="Common Installation Issues">
+        <p>Solutions for frequent installation problems...</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Performance Optimization">
+        <p>Tips to improve system performance...</p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+
+    <bd-accordion-section title="Advanced Features">
+      <bd-accordion-item title="VPN Configuration">
+        <p>How to set up and use the included VPN...</p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Parental Controls">
+        <p>Setting up and managing parental controls...</p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+  </div>
+`;
+MultipleSections.parameters = {
+  docs: {
+    description: {
+      story: 'Multiple accordion sections grouped together, perfect for comprehensive documentation.'
+    }
+  }
+};