@repobit/dex-system-design 0.19.2 → 0.21.0

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

@@ -0,0 +1,281 @@
+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: {
+      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}">
+      <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>
+    </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>
+
+    <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>
+  </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">
+      <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>
+      <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">
+      <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>
+`;
+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">
+      <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">
+      <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">
+      <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>
+`;
+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>
+        <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>
+        <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>
+            <bd-h as="h4">VPN</bd-h>
+            <bd-p kind="regular">200MB/day included</bd-p>
+          </div>
+          <div>
+            <bd-h as="h4">Password Manager</bd-h>
+            <bd-p kind="regular">Secure credential storage</bd-p>
+          </div>
+          <div>
+            <bd-h as="h4">Webcam Protection</bd-h>
+            <bd-p kind="regular">Block unauthorized access</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>
+  </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">
+      <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">
+      <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">
+      <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>
+`;
+AccessibilityDemo.parameters = {
+  docs: {
+    description: {
+      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

@@ -0,0 +1,241 @@
+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 {
+  title        : 'Components/Accordion Light',
+  component    : 'bd-accordion-section',
+  subcomponents: {
+    'bd-accordion-item'   : 'bd-accordion-item',
+    'bd-accordion-section': 'bd-accordion-section',
+    'bd-li'               : 'bd-li'
+  },
+  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.'
+      }
+    }
+  }
+};
+
+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?">
+      <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">
+      <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">
+      <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>
+`;
+
+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">
+      <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">
+      <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">
+      <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">
+      <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>
+`;
+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">
+      <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">
+      <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">
+      <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>
+`;
+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">
+        <bd-p kind="regular">Minimum requirements for optimal performance...</bd-p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Installation Guide">
+        <bd-p kind="regular">Step-by-step installation instructions...</bd-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">
+        <bd-p kind="regular">Solutions for frequent installation problems...</bd-p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Performance Optimization">
+        <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">
+        <bd-p kind="regular">How to set up and use the included VPN...</bd-p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Parental Controls">
+        <bd-p kind="regular">Setting up and managing parental controls...</bd-p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+  </div>
+`;
+MultipleSections.parameters = {
+  docs: {
+    description: {
+      story: 'Multiple accordion sections grouped together, perfect for comprehensive documentation.'
+    }
+  }
+};

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 = {};

package/src/components/back/back.css.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-back {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-body-regular-fontSize);
+      font-weight: var(--typography-fontWeight-bold);
+      color: var(--color-neutral-1000);
+      cursor: pointer;
+      border-radius: 0.5rem;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+
+    .bd-back:hover {
+      background-color: var(--color-neutral-100);
+      color: var(--color-neutral-1000);
+    }
+
+    .bd-back:active {
+      background-color: var(--color-neutral-200);
+      transform: translateY(1px);
+    }
+
+    .bd-back:focus-visible {
+      outline: 2px solid var(--color-neutral-1000);
+      outline-offset: 2px;
+    }
+
+    .bd-back-arrow {
+      font-size: 1.125em;
+      font-weight: var(--typography-fontWeight-bold);
+      /* Săgeată mai simplă și mai groasă */
+      transform: scale(1.2);
+      letter-spacing: -0.05em;
+    }
+
+    .bd-back-label {
+      line-height: 1;
+    }
+
+    /* Mobile-first responsive */
+    @media (max-width: 768px) {
+      .bd-back {
+        padding: 0.875rem 1rem;
+        font-size: var(--typography-body-large-fontSize);
+      }
+    }
+  }
+`;