@repobit/dex-system-design 0.19.1 → 0.20.0

package/src/components/footer/footer.stories.js

@@ -1,60 +1,178 @@
-// BdFooter.stories.js
+// footer.stories.js - Varianta ultra-simplă
 import { html } from 'lit';
 import './footer.js';
 
 export default {
-  title    : 'Components/Footer',
-  component: 'bd-footer',
-  argTypes : {
-    currentLocale   : { control: 'text' },
-    selectedCountry : { control: 'text' },
-    maxColumnsPerRow: { control: { type: 'number', min: 1, max: 4 } },
-    quickLinks1     : { control: 'object' },
-    quickLinks2     : { control: 'object' },
-    address         : { control: 'text' }
+  title     : 'Components/Footer/BdFooter',
+  component : 'bd-footer',
+  parameters: {
+    layout: 'fullscreen'
   }
 };
 
-const Template = ({ currentLocale, selectedCountry, maxColumnsPerRow, quickLinks1, quickLinks2, address }) => {
-  return html`
-    <bd-footer
-      .currentLocale=${currentLocale}
-      .selectedCountry=${selectedCountry}
-      .maxColumnsPerRow=${maxColumnsPerRow}
-    >
-      <span slot="logo"><img src="/assets/BD_logo.png" alt="Bitdefender Logo"></span>
-
-      <bd-footer-links-group slot="quick-links" title="Quick Links 1">
-        ${quickLinks1.map(
-          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
-        )}
-      </bd-footer-links-group>
+export const Default = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/small-business/">For Small Business</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/business/">For Enterprise</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/partners/">For Partners</a>
+    </bd-footer-nav>
+    <bd-footer-links-group slot="quick-links" title="Quick links">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/en-us/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Support for Home Products</a>
+      <a href="https://www.bitdefender.com/business/support/">Support for Business Products</a>
+      <a href="/company/">Investors</a>
+      <a href="/company/job-opportunities/">Careers</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Company</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Privacy Settings</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+
+export const Romanian = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/ro-ro/consumer/">Pentru Consumatori</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/small-business/">Pentru Afaceri Mici</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/business/">Pentru Întreprinderi</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/partners/">Pentru Parteneri</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Linkuri rapide">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/ro-ro/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Suport pentru Produse Casnice</a>
+      <a href="https://www.bitdefender.com/business/support/">Suport pentru Produse Business</a>
+      <a href="/company/">Investitori</a>
+      <a href="/company/job-opportunities/">Cariere</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Informații Legale</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Politica de Confidențialitate</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Harta Site</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Companie</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Contactați-ne</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Setări Confidențialitate</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
 
-      <bd-footer-links-group slot="quick-links" title="Quick Links 2">
-        ${quickLinks2.map(
-          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
-        )}
+export const German = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/de-de/consumer/">Für Verbraucher</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/small-business/">Für Kleinunternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/business/">Für Unternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/partners/">Für Partner</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Schnelllinks">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/de-de/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Support für Home-Produkte</a>
+      <a href="https://www.bitdefender.com/business/support/">Support für Business-Produkte</a>
+      <a href="/company/">Investoren</a>
+      <a href="/company/job-opportunities/">Karriere</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Rechtliche Informationen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Datenschutzrichtlinie</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Sitemap</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Unternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Kontakt</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Datenschutzeinstellungen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+
+export const WithDividers = () => html`
+  <div>
+    <bd-footer maxColumnsPerRow="3">
+      <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+        <a href="/en/consumer/">For Consumer</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/small-business/">For Small Business</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/business/">For Enterprise</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/partners/">For Partners</a>
+      </bd-footer-nav>
+      
+      <bd-footer-links-group slot="quick-links" title="Quick links">
+        <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+        <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
       </bd-footer-links-group>
 
-      <div slot="address">${address}</div>
+      <bd-footer-nav slot="secondary-nav">
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/privacy/">Privacy Policy</a>
+      </bd-footer-nav>
     </bd-footer>
-  `;
-};
 
-export const Default = Template.bind({});
-Default.args = {
-  currentLocale   : 'en',
-  selectedCountry : 'Choose your country',
-  maxColumnsPerRow: 2,
-  quickLinks1     : [
-    { label: 'Bitdefender Central', href: 'https://central.bitdefender.com/' },
-    { label: 'GravityZone Cloud Control Center', href: 'https://gravityzone.bitdefender.com/' },
-    { label: 'Bitdefender Cyberpedia', href: 'https://www.bitdefender.com/en-us/cyberpedia/' }
-  ],
-  quickLinks2: [
-    { label: 'Support for Home Products', href: 'https://www.bitdefender.com/consumer/support/' },
-    { label: 'Support for Business Products', href: 'https://www.bitdefender.com/business/support/' },
-    { label: 'Careers', href: '/en/company/job-opportunities/' }
-  ],
-  address: '111 W. Houston Street, Suite 2105, Frost Tower Building<br/>San Antonio, Texas 78205'
-};
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+  </div>
+`;

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

@@ -50,7 +50,7 @@ const TemplateSimple = (args) => html`
   <bd-light-carousel-simple-section title="${args.title}">
     <bd-light-carousel-simple-item
       title="Scam Copilot Chatbot"
-      icon="src/assets//assets/light-carousel-img1.png"
+      icon="/assets/light-carousel-img1.png"
     >
       <p>
         Specialized AI chatbot that helps you identify suspicious online
@@ -60,7 +60,7 @@ const TemplateSimple = (args) => html`
 
     <bd-light-carousel-simple-item
       title="Scam Wave Alerts"
-      icon="src/assets//assets/light-carousel-img1.png"
+      icon="/assets/light-carousel-img1.png"
     >
       <p>
         Stay informed with real-time alerts about ongoing scam outbreaks
@@ -70,7 +70,7 @@ const TemplateSimple = (args) => html`
 
     <bd-light-carousel-simple-item
       title="Online Scam Protection"
-      icon="src/assets//assets/light-carousel-img1.png"
+      icon="/assets/light-carousel-img1.png"
     >
       <p>
         Focused on browsing activities, it specializes in detecting the newest

package/src/components/pricing-cards/pricing-card-actions.js

@@ -8,7 +8,7 @@ class PricingCardActions extends LitElement {
   render() {
     return html`
       <div class="actions">
-        <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
+        <bd-button kind="danger" size="md" fullWidth strong>
           Buy Now
         </bd-button>
       </div>

package/src/components/pricing-cards/pricing-card.css.js

@@ -41,6 +41,22 @@ export default css`
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-semibold);
   }
+.icon-user-sharp-regular {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'><path d='M11 11C13.2091 11 15 9.20914 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 9.20914 8.79086 11 11 11Z' fill='%23000'/><path d='M4 19C4 15.6863 6.68629 13 10 13H12C15.3137 13 18 15.6863 18 19V20H4V19Z' fill='%23000'/></svg>")
+    no-repeat center center;
+  background-size: contain;
+}
+.icon-family-pants-sharp-regular {
+  display: inline-block;
+  width: 24px; /* dimensiunea dorită */
+  height: 24px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M24 25.1591V27H8V25.1591C8 23.3048 9.20796 21.6667 10.9795 21.1187L11.8455 20.8509C12.2644 20.7213 12.55 20.334 12.55 19.8955V19.7449C10.8538 18.295 10.1 16.0583 10.1 13.2778C10.1 10.8447 11.1289 9.23277 12.423 8.25708C13.6668 7.3193 15.1097 7 16 7C16.8903 7 18.3332 7.3193 19.577 8.25708C20.8711 9.23277 21.9 10.8447 21.9 13.2778C21.9 16.0583 21.1462 18.295 19.45 19.7449V19.8955C19.45 20.334 19.7356 20.7213 20.1545 20.8509L21.0205 21.1187C22.792 21.6667 24 23.3048 24 25.1591Z' fill='%23000'/><path d='M7.4663 23C8.03861 21.7386 9.10189 20.7276 10.4549 20.2401C10.103 19.7558 9.59938 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23C3.57036 23 7.4663 23 7.4663 23Z' fill='%23000'/><path d='M21.5451 20.2401C22.8981 20.7276 23.9614 21.7386 24.5337 23C24.5337 23 28.2313 23 31 23V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8653 19.152C28.7134 19.1044 28.5881 19.0057 28.506 18.8783C29.4184 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.307 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4066 11 24.4869 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5742 17.9112 23.4678 18.851L23.4612 18.8574L23.4892 18.8858C23.407 19.0095 23.2836 19.1053 23.1347 19.152L23.0009 19.1939C22.4006 19.382 21.897 19.7558 21.5451 20.2401Z' fill='%23000'/></svg>") no-repeat center center;
+  background-size: contain;
+}
+
 
   .highlight {
     border: var(--spacing-2) solid var(--border-card-green);
@@ -309,7 +325,17 @@ export default css`
     transition: color 0.4s;
     cursor: pointer;
   }
-
+.switchBox .label .icon {
+  vertical-align: middle;
+  position: relative;
+}
+
+.icon-user-sharp-regular,
+.icon-family-pants-sharp-regular {
+  vertical-align: middle;
+  position: relative;
+  top: -2px;
+}
   .switchBox .label.right {
     z-index: 10;
     color: black;
@@ -327,8 +353,7 @@ export default css`
   .switchBox .switch input ~ .label .icon {
     position: relative;
     margin-right: var(--spacing-10);
-    top: var(--spacing-2);
-  }
+   }
 
   .switchBox .switch input ~ .label .icon svg {
     width: var(--spacing-24);

package/src/components/pricing-cards/pricing-card.js

@@ -360,25 +360,12 @@ class PricingSwitch extends LitElement {
           <span class="slider round"></span>
           <span class="label right">
             <span class="icon icon-user-sharp-regular">
-              <img
-                src="/assets/bd-icon-user.png"
-                alt="icon"
-                class="badge-icon-user"
-                height="22"
-                width="22"
-              />
             </span>
             Individual
           </span>
           <span class="label left">
             <span class="icon icon-family-pants-sharp-regular">
-              <img
-                src="/assets/bd-icon-family.png"
-                alt="icon"
-                class="badge-icon-family"
-                height="24"
-                width="24"
-              />
+           
             </span>
             Family
           </span>

package/src/tokens/layout.css

@@ -25,15 +25,15 @@
 .bd-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: var(--size-16);
+    padding: var(--spacing-16);
     display: flex;
     flex-direction: column; 
-    gap: var(--size-8); 
+    gap: var(--spacing-8); 
   }
   
   .bd-container-fluid {
     width: 100%;
-    padding: var(--size-16);
+    padding: var(--spacing-16);
   }
 
   .pricing-container {

package/src/tokens/tokens.css

@@ -785,29 +785,6 @@
   /* Caption */
   --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
 
-  /* --spacing-0: 0;
-  --spacing-1: 1px;
-  --spacing-2: 2px;
-  --spacing-4: 4px;
-  --spacing-6: 6px;
-  --spacing-8: 8px;
-  --spacing-10: 10px;
-  --spacing-12: 12px;
-  --spacing-14: 14px;
-  --spacing-16: 16px;
-  --spacing-18: 18px;
-  --spacing-20: 20px;
-  --spacing-22: 22px;
-  --spacing-24: 24px;
-  --spacing-32: 32px;
-  --spacing-36: 36px;
-  --spacing-40: 40px;
-  --spacing-44: 44px;
-  --spacing-52: 52px;
-  --spacing-64: 64px;
-  --spacing-full: 99999999999999999999;
-   */
-
   /* Spacing Tokens
   -----------------------------------------------*/
   /* Base spacing tokens - Based on 4px grid */

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

@@ -1,114 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
-    display: block;
-  }
-
-  .bd-accordion-bg-item {
-    margin-bottom: var(--spacing-16);
-    border-radius: var(--spacing-8);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .bd-accordion-bg-item:hover {
-    .bd-accordion-bg-question-text {
-      text-decoration-line: underline;
-    }
-  }
-
-  .bd-accordion-bg-question {
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-10);
-    padding: var(--spacing-16);
-    font-weight: bold;
-    color: #333;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-
-  .bd-accordion-bg-header {
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-accordion-bg-question:hover {
-    color: #0073e6;
-  }
-
-  .bd-accordion-bg-item:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
-
-  .bd-accordion-bg-item:focus {
-    .bd-accordion-bg-question-text {
-      font-weight: 600;
-      text-decoration-line: underline;
-      color: var(--color-blue-600);
-      text-decoration-thickness: var(--spacing-2);
-    }
-  }
-
-  .bd-accordion-bg-question-text {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-
-  .bd-accordion-bg-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
-
-  .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;
-    bottom: 1px;
-  }
-
-  .bd-accordion-bg-answer {
-    overflow: hidden;
-    max-height: 0;
-    opacity: 0;
-    padding: 0 15px;
-    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;
-  }
-
-  .bd-accordion-bg-container {
-    width: 90%;
-    margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
-
-  .bd-accordion-bg-link-noline {
-    text-decoration: none;
-  }
-`;

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

@@ -1,80 +0,0 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-import accordionCSS from "./accordion-no-bg.css";
-
-class BdAccordionNoBg extends LitElement {
-  static properties = {
-    title: { type: String }
-  };
-
-  static styles = [tokens, accordionCSS];
-
-  render() {
-    return html`
-      <div class="bd-accordion-bg-container">
-        <div class="bd-accordion-bg-header">
-          <h1 class="bd-accordion-bg-title">${this.title}</h1>
-        </div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-class BdAccordionNoBgItem extends LitElement {
-  static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.title = "";
-    this.open = false;
-    this.id = `accordion-${Math.random().toString(36)
-      .substr(2, 9)}`;
-  }
-
-  static styles = [tokens, accordionCSS];
-
-  toggleItem() {
-    this.open = !this.open;
-  }
-
-  handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.toggleItem();
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""}"
-        role="button"
-        aria-expanded="${this.open}"
-        aria-controls="${this.id}"
-        tabindex="0"
-        @click=${this.toggleItem}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="bd-accordion-bg-question">
-          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
-          <span class="bd-accordion-bg-question-text">${this.title}</span>
-        </div>
-        <div
-          id="${this.id}"
-          class="bd-accordion-bg-answer"
-          role="region"
-          aria-labelledby="${this.id}"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define("bd-accordion-no-bg", BdAccordionNoBg);
-customElements.define("bd-accordion-no-bg-item", BdAccordionNoBgItem);