@repobit/dex-system-design 0.24.18 → 0.24.20

package/src/components/compatibility-table/compatibility-table.js

@@ -6,12 +6,13 @@ import compatibilityTableCSS from "./compatibility-table.css.js";
 
 class CompatibilityTable extends LitElement {
   static properties = {
-    title      : { type: String },
-    description: { type: String },
-    variant    : { type: String, reflect: true }, // "default" | "outcome" | "risk" | "light"
-    background : { type: String, reflect: true }, // "default" | "blue"
-    columns    : { type: Array },
-    rows       : { type: Array }
+    title       : { type: String },
+    description : { type: String },
+    variant     : { type: String, reflect: true },
+    background  : { type: String, reflect: true },
+    lightColumns: { type: Number, attribute: "light-columns" },
+    columns     : { type: Array },
+    rows        : { type: Array }
   };
 
   static styles = [tokens, compatibilityTableCSS];
@@ -22,6 +23,7 @@ class CompatibilityTable extends LitElement {
     this.description = "";
     this.variant = "default";
     this.background = "default";
+    this.lightColumns = 2;
     this.columns = null;
     this.rows = [];
   }
@@ -95,7 +97,11 @@ class CompatibilityTable extends LitElement {
 
         ${this.variant === "light"
           ? html`
-              <div class="bd-compattable-lightgrid" role="table">
+              <div
+                class="bd-compattable-lightgrid"
+                role="table"
+                style="--bd-compattable-light-columns: ${this.lightColumns};"
+              >
                 ${this.rows.map((row) => this._renderRow(row))}
                 <slot name="rows"></slot>
               </div>

package/src/components/cta-banner/cta-banner.css.js

@@ -16,7 +16,18 @@ export default css`
     text-align: center;
     gap: var(--spacing-16);
   }
+  .bd-ctabanner-footer {
+    margin-top: var(--spacing-24, 24px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-8, 8px);
+    text-align: center;
+  }
 
+  .bd-ctabanner-footer:not(:has(*)) {
+    display: none;
+  }
   .bd-ctabanner-title {
     display: block;
     margin: 0;

package/src/components/cta-banner/cta-banner.js

@@ -55,6 +55,13 @@ class CtaBanner extends LitElement {
 </bd-p>
             `
           : nothing}
+
+        <!-- Freeform slot for extra content below the caption — contact
+             info, legal disclaimers, links, etc. Empty by default,
+             collapses to nothing when unused. -->
+        <div class="bd-ctabanner-footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
     `;
   }

package/src/components/footer/footer-lp.css.js

@@ -10,11 +10,6 @@ export default css`
     line-height: var(--typography-lineHeight-normal); 
   }
 
-.footer-secondary-nav {
-padding-top: var(--spacing-12);
-padding-bottom: var(--spacing-12);
-}
-
   bd-divider-vertical {
     display: inline-block;
     width: var(--form-input-default-borderWidth);
@@ -47,7 +42,15 @@ padding-bottom: var(--spacing-12);
     padding: var(--spacing-24) 0;
   }
 
+  /* Wraps the "secondary-nav" slot (Legal / Privacy Policy / etc). This
+     rule previously only had padding — no display:flex/gap — so the
+     slotted links ran together with no spacing between them, same root
+     cause as the bug that was fixed in bd-footer's own footer.css.js. */
   .footer-secondary-nav {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-16);
     padding: var(--spacing-24) 0;
   }
 
@@ -80,7 +83,6 @@ padding-bottom: var(--spacing-12);
     background: var(--color-blue-500);
   }
 
-  /* Stiluri pentru link-uri */
   a {
     color: var(--color-neutral-0);
     text-decoration: none;
@@ -90,7 +92,6 @@ padding-bottom: var(--spacing-12);
     text-decoration: underline;
   }
 
-  /* Stiluri de accesibilitate */
   a:focus {
     outline: none;
     border: 2px solid var(--color-blue-500);
@@ -98,18 +99,6 @@ padding-bottom: var(--spacing-12);
     border-radius: 4px;
   }
 
-  /* Stiluri pentru navigație */
-  .footer-nav-main {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--spacing-16);
-    flex-wrap: wrap;
-    font-size: var(--typography-body-regular-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-  }
-
-  /* Responsive styles */
   @media (max-width: 768px) {
     .footer-top {
       flex-direction: column;
@@ -128,13 +117,13 @@ padding-bottom: var(--spacing-12);
       margin-bottom: var(--spacing-16);
     }
 
-    .footer-nav-main {
+    .footer-secondary-nav {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--spacing-8);
     }
 
-    .footer-nav-main bd-divider-vertical {
+    .footer-secondary-nav bd-divider-vertical {
       display: none !important;
     }
   }

package/src/components/footer/footer-lp.js

@@ -22,7 +22,7 @@ export class BdFooterLP extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this._initLocaleFromUrl(); // Adaugă inițializarea locale-ului din URL
+    this._initLocaleFromUrl();
     window.addEventListener('resize', this._handleResize.bind(this));
   }
 
@@ -33,12 +33,12 @@ export class BdFooterLP extends LitElement {
 
   firstUpdated() {
     super.firstUpdated();
-    this._toggleImpressumVisibility(); // Apelează la initializare
+    this._toggleImpressumVisibility();
   }
 
   updated(changedProps) {
     if (changedProps.has('currentLocale')) {
-      this._toggleImpressumVisibility(); // Apelează când se schimbă locale-ul
+      this._toggleImpressumVisibility();
     }
   }
 
@@ -49,27 +49,22 @@ export class BdFooterLP extends LitElement {
       return;
     }
 
-    // Creează o versiune normalized a localeMap cu cheile lowercase
     const normalizedLocaleMap = {};
     Object.entries(localeMap).forEach(([key, value]) => {
       normalizedLocaleMap[key.toLowerCase()] = value;
     });
 
-    // Încearcă mai întâi potrivire exactă
     let country = normalizedLocaleMap[urlLocale];
 
-    // Dacă nu găsești potrivire exactă, încearcă să găsești cea mai bună potrivire
     if (!country && urlLocale) {
       const localeParts = urlLocale.split('-');
       const language = localeParts[0];
       const region = localeParts[1];
 
-      // Caută o potrivire care să înceapă cu același limbaj
       const possibleMatches = Object.entries(normalizedLocaleMap)
         .filter(([key]) => key.startsWith(language));
 
       if (possibleMatches.length > 0) {
-        // Preferă potrivirea cu aceeași regiune dacă există
         const exactRegionMatch = possibleMatches.find(([key]) => {
           const keyParts = key.split('-');
           const keyRegion = keyParts[1];
@@ -81,13 +76,11 @@ export class BdFooterLP extends LitElement {
 
         if (exactRegionMatch) {
           country = exactRegionMatch[1];
-          // Recuperează cheia originală din localeMap
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === exactRegionMatch[0]
           );
           this.currentLocale = originalKey || exactRegionMatch[0];
         } else {
-          // Altfel, ia prima potrivire
           country = possibleMatches[0][1];
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === possibleMatches[0][0]
@@ -114,25 +107,20 @@ export class BdFooterLP extends LitElement {
       const footerNav = assignedElements[0];
       const impressumLink = footerNav.querySelector('.impressum-link');
 
-      // Găsește separatorul care precede link-ul Impressum
       let impressumDivider = null;
       if (impressumLink) {
         impressumDivider = impressumLink.previousElementSibling;
 
-        // Verifică dacă elementul anterior este un divider și este imediat înainte
         if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL' &&
             impressumDivider.nextElementSibling === impressumLink) {
-          // Este separatorul corect
         } else {
           impressumDivider = null;
         }
       }
 
       if (impressumLink) {
-        // Ascunde/afișează link-ul Impressum
         impressumLink.style.display = showImpressum ? '' : 'none';
 
-        // Ascunde/afișează și separatorul dinaintea lui
         if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL') {
           impressumDivider.style.display = showImpressum ? '' : 'none';
         }
@@ -214,14 +202,12 @@ export class BdFooterLP extends LitElement {
   `;
   }
 
-  // Metodă specifică pentru secondary-nav care verifică și elementele custom
   _hasSecondaryNavContent() {
     const slot = this.shadowRoot?.querySelector('slot[name="secondary-nav"]');
     if (!slot) return false;
 
     const assignedNodes = slot.assignedNodes({ flatten: true });
 
-    // Verifică dacă există noduri care nu sunt doar spații albe
     const hasContent = assignedNodes.some(node => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         return true;
@@ -235,7 +221,6 @@ export class BdFooterLP extends LitElement {
     return hasContent;
   }
 
-  // Metodă helper pentru a verifica dacă un slot are conținut
   _hasSlotContent(slotName) {
     const slot = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
     if (!slot) return false;

package/src/components/footer/footer-nav-menu.css.js

@@ -16,7 +16,6 @@ export default css`
     font-weight: var(--typography-heading-h3-fontWeight);
   }
 
-  /* Corect: stilizare pentru elementele slottate */
   ::slotted(a) {
     color: white !important;
     text-decoration: none;
@@ -33,5 +32,4 @@ export default css`
     display: none !important;
   }
 }
- 
 `;

package/src/components/footer/footer.css.js

@@ -9,7 +9,7 @@ export default css`
     font-size: var(--typography-body-small-fontSize);
     line-height: var(--typography-lineHeight-normal); 
   }
-.footer-nav-main a:focus,
+.footer-nav-main-container a:focus,
 .footer-links a:focus,
 .footer-countries-container a:focus,
 .country-toggle:focus,
@@ -21,14 +21,12 @@ export default css`
   border-radius: 4px;
 }
 
-/* Stiluri specifice pentru butoane */
 .country-toggle:focus,
 .close-countries-button:focus {
   border-color: var(--color-blue-500);
   box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
 }
 
-/* Stiluri pentru link-urile din containerul de țări */
 .footer-countries-container a:focus {
   border-color: var(--color-blue-500);
   box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
@@ -36,8 +34,7 @@ export default css`
   padding: 2px 6px;
 }
 
-/* Stiluri pentru link-urile din navigația principală */
-.footer-nav-main a:focus {
+.footer-nav-main-container a:focus {
   padding: 2px 6px;
   margin: -2px -6px;
 }
@@ -45,20 +42,12 @@ export default css`
 padding-top: var(--spacing-24);
 padding-bottom: var(--spacing-24);
 }
-.footer-nav-main-container {
-padding-top: var(--spacing-12);
-padding-bottom: var(--spacing-12);
-}
-/* Stiluri pentru link-urile din grupurile de link-uri */
 bd-footer-links-group a:focus {
   padding: 2px 6px;
   margin: -2px -6px;
   display: inline-block;
 }
 
-
-
-
   bd-divider-vertical {
     display: inline-block;
     width: var(--form-input-default-borderWidth);
@@ -85,14 +74,14 @@ bd-footer-links-group a:focus {
     background-color: var(--color-blue-500);
   }
 
-  .footer-nav-main {
+  .footer-nav-main-container {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: var(--spacing-16);
     flex-wrap: wrap;
-    padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
+    padding-top: var(--spacing-12);
+    padding-bottom: var(--spacing-12);
     font-size: var(--typography-body-regular-fontSize);
     font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
   }
@@ -106,7 +95,6 @@ bd-footer-links-group a:focus {
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-32);
-    // margin-bottom: var(--spacing-24);
     flex-wrap: nowrap;
     padding-top: var(--spacing-24);
     padding-bottom: var(--spacing-24);
@@ -119,7 +107,13 @@ bd-footer-links-group a:focus {
     gap: var(--spacing-16);
     padding-top: var(--spacing-24);
     padding-bottom: var(--spacing-24);
+  }
 
+  .secondary-nav-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-16);
   }
 
   .footer-middle-line > :last-child {
@@ -242,7 +236,6 @@ bd-footer-links-group a:focus {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.14286 1C2.40937 1 1 2.40937 1 4.14286V19.8571C1 21.5906 2.40937 23 4.14286 23H19.8571C21.5906 23 23 21.5906 23 19.8571V4.14286C23 2.40937 21.5906 1 19.8571 1H4.14286ZM18.7326 5.125L13.6353 10.9491L19.6312 18.875H14.9366L11.2634 14.0674L7.05491 18.875H4.72232L10.1732 12.6433L4.42277 5.125H9.23527L12.5598 9.52009L16.4 5.125H18.7326ZM16.8763 17.4804L8.53304 6.44598H7.1433L15.5799 17.4804H16.8714H16.8763Z" fill="white"/></svg>');
 }
 
-
   a {
     color: var(--color-neutral-0);
     text-decoration: none;
@@ -493,13 +486,13 @@ bd-footer-links-group a:focus {
 .footer-address{
   display: none !important;
   }
-  .footer-nav-main {
+  .footer-nav-main-container {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-8);
   }
 
-  .footer-nav-main bd-divider-vertical {
+  .footer-nav-main-container bd-divider-vertical {
     display: none !important;
   }
 
@@ -537,7 +530,7 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  .footer-nav-main a[slot="nav"] {
+  .footer-nav-main-container a[slot="nav"] {
     color: #151719 !important;
   }
 
@@ -545,17 +538,17 @@ bd-footer-links-group a:focus {
     margin-bottom: 10px;
   }
 
-  .second-nav .footer-nav-main {
+  .second-nav .footer-nav-main-container {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-14);
   }
 
-  .second-nav .footer-nav-main bd-divider-vertical {
+  .second-nav .footer-nav-main-container bd-divider-vertical {
     display: none !important;
   }
 
-  .second-nav .footer-nav-main a {
+  .second-nav .footer-nav-main-container a {
     color: #151719 !important;
     padding: var(--spacing-4) 0;
     display: block;
@@ -578,7 +571,7 @@ bd-footer-links-group a:focus {
     gap: var(--spacing-8);
   }
 
-  .second-nav.footer-nav-main {
+  .second-nav.footer-nav-main-container {
     display: inline-grid;
   }
 
@@ -620,7 +613,6 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* STILURI MODIFICATE PENTRU FOOTER-LINKS PE MOBILE */
   .footer-links {
     display: flex;
     flex-direction: column;
@@ -632,20 +624,16 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* QUICK LINKS - PRIMA POZIȚIE */
   .footer-links-left {
     order: 1;
   }
 
-  /* DIVIDER - ÎNTRE QUICK LINKS ȘI SOCIAL LINKS */
-  /* Targetăm divider-ul care este copil direct în .footer-links */
   .footer-links > bd-divider-horizontal {
     order: 2;
     margin: var(--spacing-16) 0;
     width: 100%;
   }
 
-  /* SOCIAL LINKS - A TREIA POZIȚIE (DUPĂ DIVIDER) */
   .footer-links-right {
     order: 3;
     display: flex;
@@ -654,7 +642,6 @@ bd-footer-links-group a:focus {
     margin-bottom: 0;
   }
 
-  /* STILURI PENTRU COMPONENTELE BD-FOOTER-LINKS-GROUP */
   bd-footer-links-group {
     width: 100% !important;
     min-width: 100% !important;
@@ -669,7 +656,6 @@ bd-footer-links-group a:focus {
     margin-bottom: var(--spacing-8) !important;
   }
 
-  /* GRID PENTRU QUICK LINKS */
   .footer-links-left bd-grid {
     display: flex !important;
     flex-direction: column !important;
@@ -696,7 +682,6 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* Divider-ul imediat după secondary-nav */
   .secondary-nav-container bd-divider-horizontal {
     margin-top: var(--spacing-16);
     margin-bottom: var(--spacing-16);
@@ -713,7 +698,6 @@ bd-footer-links-group a:focus {
   display: none;
 }
 
-/* Afișează divider-ul doar pe tablete */
 @media (min-width: 768px) and (max-width: 1024px) {
   .tablet-divider {
     display: block;
@@ -744,7 +728,6 @@ bd-footer-links-group a:focus {
     margin: var(--spacing-16) 0;
     width: 100%;
   }
-  /* Ascunde ultimul divider (cel din afara .footer-links) pe tablete */
   .footer-links + bd-divider-horizontal {
     display: none !important;
   }

package/src/components/footer/footer.js

@@ -241,7 +241,11 @@ export class BdFooter extends LitElement {
   }
 
   _updateNavLinks() {
-    const links = this.shadowRoot.querySelectorAll('.footer-nav-main bd-link');
+    // Fixed: the wrapping div in render() below is class
+    // "footer-nav-main-container", not "footer-nav-main" — the old
+    // selector never matched anything, so link hrefs were never updated
+    // when the locale changed.
+    const links = this.shadowRoot.querySelectorAll('.footer-nav-main-container bd-link');
     const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
     const currentLocale = this.locale;