@repobit/dex-system-design 0.20.0 → 0.21.0

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

@@ -1,6 +1,9 @@
-// accordion-bg.stories.js
-
 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 {
@@ -29,38 +32,38 @@ export default {
 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-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}">
-      <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-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>
     </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-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>
 
     <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-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}">
-      <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-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>
   </bd-accordion-bg>
 `;
@@ -94,18 +97,18 @@ NoBackground.parameters = {
 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-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>
     </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-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>
 
     <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-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>
   </bd-accordion-bg>
 `;
@@ -120,15 +123,15 @@ MixedBackground.parameters = {
 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-p kind="regular">When the container has no-bg, all items inherit the transparent background unless specifically overridden.</bd-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-p kind="regular">All items in this accordion have transparent backgrounds because the container has no-bg set.</bd-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-p kind="regular">This creates a clean, minimalist look that blends with the page background.</bd-p>
     </bd-accordion-bg-item>
   </bd-accordion-bg>
 `;
@@ -144,34 +147,34 @@ 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>
+        <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>
       </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>
+        <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;">
           <div>
-            <h5>VPN</h5>
-            <p>200MB/day included</p>
+            <bd-h as="h4">VPN</bd-h>
+            <bd-p kind="regular">200MB/day included</bd-p>
           </div>
           <div>
-            <h5>Password Manager</h5>
-            <p>Secure credential storage</p>
+            <bd-h as="h4">Password Manager</bd-h>
+            <bd-p kind="regular">Secure credential storage</bd-p>
           </div>
           <div>
-            <h5>Webcam Protection</h5>
-            <p>Block unauthorized access</p>
+            <bd-h as="h4">Webcam Protection</bd-h>
+            <bd-p kind="regular">Block unauthorized access</bd-p>
           </div>
         </div>
       </div>
@@ -179,8 +182,8 @@ export const WithCustomContent = () => html`
 
     <bd-accordion-bg-item title="Performance Impact">
       <div>
-        <h4>Lightweight Design</h4>
-        <p>Bitdefender is designed to have minimal impact on system performance:</p>
+        <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>
@@ -188,15 +191,15 @@ export const WithCustomContent = () => html`
           </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>
+            <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;">~150MB</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;">&lt; 500MB</td>
+            <td style="padding: 8px;"><bd-p kind="regular">&lt; 500MB</bd-p></td>
           </tr>
         </table>
       </div>
@@ -214,31 +217,31 @@ WithCustomContent.parameters = {
 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-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>
 
     <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-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-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-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>
 `;
@@ -248,4 +251,31 @@ AccessibilityDemo.parameters = {
       story: 'Demonstration of accessibility features including keyboard navigation and ARIA attributes.'
     }
   }
+};
+
+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 = {
+  docs: {
+    description: {
+      story: 'Accordion demonstrating different paragraph styles (regular and small).'
+    }
+  }
 };

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

@@ -1,6 +1,7 @@
-// accordion-light.stories.js
-
 import { html } from 'lit';
+import '../list/list-item/list-item.js'; // Păstrăm bd-li
+import '../list/list.js'; // Importul nou pentru componenta unificată bd-list
+import '../paragraph/paragraph.js';
 import './accordion.js';
 
 export default {
@@ -8,7 +9,8 @@ export default {
   component    : 'bd-accordion-section',
   subcomponents: {
     'bd-accordion-item'   : 'bd-accordion-item',
-    'bd-accordion-section': 'bd-accordion-section'
+    'bd-accordion-section': 'bd-accordion-section',
+    'bd-li'               : 'bd-li'
   },
   argTypes: {
     title: {
@@ -37,7 +39,6 @@ export default {
   }
 };
 
-// Template for basic accordion items
 const BasicTemplate = ({ title, guideIcon, guideLabel, guideHref }) => html`
   <bd-accordion-section 
     title="${title}"
@@ -46,24 +47,24 @@ const BasicTemplate = ({ title, guideIcon, guideLabel, guideHref }) => html`
     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-p kind="regular">Bitdefender is a leading cybersecurity company delivering robust security solutions to over 500 million users in more than 150 countries.</bd-p>
+      <bd-p kind="regular">Our products protect devices, data, and privacy against the full spectrum of cyberthreats.</bd-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-p kind="regular"><strong>Operating Systems:</strong> Windows 10/11, macOS 10.12+, Android 5.0+, iOS 12+</bd-p>
+      <bd-p kind="regular"><strong>Hardware:</strong> 1GB RAM minimum, 2.5GB free disk space</bd-p>
+      <bd-p kind="regular"><strong>Internet:</strong> Required for activation and updates</bd-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-p kind="regular">Follow these simple steps to install Bitdefender:</bd-p>
+      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+        <bd-li kind="bullet" size="md">Download the installation file from our website</bd-li>
+        <bd-li kind="bullet" size="md">Run the installer and follow on-screen instructions</bd-li>
+        <bd-li kind="bullet" size="md">Activate with your product key</bd-li>
+        <bd-li kind="bullet" size="md">Run your first scan</bd-li>
+      </bd-list>
     </bd-accordion-item>
   </bd-accordion-section>
 `;
@@ -101,28 +102,28 @@ WithUserGuide.parameters = {
 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-p kind="regular">By accessing and using Bitdefender products, you accept and agree to be bound by the terms and provision of this agreement.</bd-p>
+      <bd-p kind="regular"><strong>Last Updated:</strong> January 15, 2024</bd-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-p kind="regular">Bitdefender grants you a limited, non-exclusive, non-transferable license to use the software for personal or internal business purposes.</bd-p>
+      <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+        <bd-li kind="bullet" size="md">Single-user license for personal use</bd-li>
+        <bd-li kind="bullet" size="md">Multi-device options available</bd-li>
+        <bd-li kind="bullet" size="md">Non-commercial use unless specified</bd-li>
+      </bd-list>
     </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-p kind="regular">Our privacy policy explains how we collect, use, and protect your personal information.</bd-p>
+      <bd-p kind="regular"><strong>Data Collection:</strong> We collect minimal data necessary for security functionality.</bd-p>
+      <bd-p kind="regular"><strong>Data Usage:</strong> Data is used solely for threat detection and product improvement.</bd-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-p kind="regular">To the maximum extent permitted by law, Bitdefender shall not be liable for any indirect, special, incidental, or consequential damages.</bd-p>
+      <bd-p kind="regular">This includes but is not limited to damages for loss of profits, business interruption, or loss of information.</bd-p>
     </bd-accordion-item>
   </bd-accordion-section>
 `;
@@ -137,30 +138,54 @@ TermsOfUse.parameters = {
 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-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+        <bd-li kind="none" size="md">
+          <a href="/antivirus" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Antivirus Plus</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/internet-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Internet Security</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/total-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Total Security</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/premium-security" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Premium Security</a>
+        </bd-li>
+      </bd-list>
     </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-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+        <bd-li kind="none" size="md">
+          <a href="/downloads" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Downloads</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/knowledge-base" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Knowledge Base</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/contact" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Contact Support</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/community" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Community Forum</a>
+        </bd-li>
+      </bd-list>
     </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-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+        <bd-li kind="none" size="md">
+          <a href="/about" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">About Us</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/press" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Press Center</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/careers" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Careers</a>
+        </bd-li>
+        <bd-li kind="none" size="md">
+          <a href="/partners" style="text-decoration: none; color: #0066cc; display: block; padding: 8px 0;">Partners</a>
+        </bd-li>
+      </bd-list>
     </bd-accordion-item>
   </bd-accordion-section>
 `;
@@ -176,10 +201,10 @@ 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-p kind="regular">Minimum requirements for optimal performance...</bd-p>
       </bd-accordion-item>
       <bd-accordion-item title="Installation Guide">
-        <p>Step-by-step installation instructions...</p>
+        <bd-p kind="regular">Step-by-step installation instructions...</bd-p>
       </bd-accordion-item>
     </bd-accordion-section>
 
@@ -190,19 +215,19 @@ export const MultipleSections = () => html`
       guide-href="/troubleshooting"
     >
       <bd-accordion-item title="Common Installation Issues">
-        <p>Solutions for frequent installation problems...</p>
+        <bd-p kind="regular">Solutions for frequent installation problems...</bd-p>
       </bd-accordion-item>
       <bd-accordion-item title="Performance Optimization">
-        <p>Tips to improve system performance...</p>
+        <bd-p kind="regular">Tips to improve system performance...</bd-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-p kind="regular">How to set up and use the included VPN...</bd-p>
       </bd-accordion-item>
       <bd-accordion-item title="Parental Controls">
-        <p>Setting up and managing parental controls...</p>
+        <bd-p kind="regular">Setting up and managing parental controls...</bd-p>
       </bd-accordion-item>
     </bd-accordion-section>
   </div>

package/src/components/anchor/anchor.stories.js

@@ -2,11 +2,13 @@ import { html } from 'lit';
 import '../accordion/accordion-bg.js';
 import '../anchor/anchor-nav.js';
 import '../carousel/carousel.js';
+import '../heading/heading.js';
 import '../pricing-cards/pricing-card.js';
+
 import '../tabs/tabs.js';
 
 export default {
-  title     : 'Navigation/Navbar',
+  title     : 'Navigation/Anchor - Navbar',
   component : 'bd-anchor-nav',
   parameters: {
     docs: {
@@ -67,22 +69,22 @@ const Template = () => html`
       <hr />
       <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
         <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
-          <p>Bitdefender Internet Security provides the best protection...</p>
-          <p>Bitdefender Internet Security provides the best protection...</p>
-          <p>Bitdefender Internet Security provides the best protection...</p>
+          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
+          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
+          <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
         </bd-accordion-bg-item>
 
         <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
-          <p>
+          <bd-p kind="small">
             Yes! Bitdefender Internet Security offers unbeatable ransomware
             protection...
-          </p>
+          </bd-p>
         </bd-accordion-bg-item>
 
         <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
-          <p>
+          <bd-p kind="small">
             Bitdefender Internet Security includes a basic VPN with 200MB per day.
-          </p>
+          </bd-p>
         </bd-accordion-bg-item>
       </bd-faq-section>
     </section>
@@ -99,24 +101,24 @@ const Template = () => html`
       <bd-carousel-section title="Need help? We've got answers!" id="anchor-3-section">
         <bd-carousel-item
           title="Scam Copilot Bot"
-          subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-          modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
+          subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim"
+          modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim"
           icon="/assets/light-carousel-img1.png"
         >
-          <h3>Scam Copilot Bot</h3>
-          <p>
+          <bd-h as="h4">Scam Copilot Bot</bd-h>
+          <bd-p kind="small">
             Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don’t become a victim.
-          </p>
-          <p>
+            interactions so you don't become a victim.
+          </bd-p>
+          <bd-p kind="small">
             Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don’t become a victim.
-          </p>
-          <p>
+            interactions so you don't become a victim.
+          </bd-p>
+          <bd-p kind="small">
             Specialized AI chatbot that helps you identify suspicious online
-            interactions so you don’t become a victim.
-          </p>
-          <h6>Testare Scam Copilot</h6>
+            interactions so you don't become a victim.
+          </bd-p>
+          <bd-h as="h6">Testare Scam Copilot</bd-h>
         </bd-carousel-item>
       </bd-carousel-section>
     </section>
@@ -128,4 +130,4 @@ const Template = () => html`
 `;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {};