@repobit/dex-system-design 0.24.18 → 0.24.19

package/src/components/bento-grid/bento-grid.js

@@ -29,6 +29,29 @@ function resolveBreakpoint(width, maxColumns, minCardWidth) {
   return { bp, columns, gap };
 }
 
+// Same breakpoint logic as resolveBreakpoint, but allows more than 2
+// columns (up to maxColumns) since the "equal" variant is a plain grid
+// with no wide/narrow pairing to worry about.
+function resolveEqualColumns(width, maxColumns, minCardWidth) {
+  const bp =
+    width >= BREAKPOINT_WIDTHS.xl
+      ? "xl" :
+      width >= BREAKPOINT_WIDTHS.lg
+        ? "lg" :
+        width >= BREAKPOINT_WIDTHS.md ? "md" : "sm";
+
+  let columns = bp === "sm" ? 1 : bp === "md" ? Math.min(2, maxColumns) : Math.max(1, maxColumns);
+  const gap = DEFAULT_GAP[bp];
+
+  while (columns > 1) {
+    const cardWidth = (width - gap * (columns - 1)) / columns;
+    if (cardWidth >= minCardWidth) break;
+    columns -= 1;
+  }
+
+  return { bp, columns, gap };
+}
+
 class BentoGrid extends LitElement {
   static properties = {
     eyebrow     : { type: String },
@@ -37,7 +60,20 @@ class BentoGrid extends LitElement {
     maxColumns  : { type: Number, attribute: "max-columns" },
     minCardWidth: { type: Number, attribute: "min-card-width" },
     // Fixed wide/narrow ratio applied to every pair, e.g. 0.7 = 70/30.
+    // Only used when variant="weighted" (the default).
     wideShare   : { type: Number, attribute: "wide-share" },
+    // "weighted" (default) — pairs of cards alternate wide/narrow, per
+    // _applyWeights below. "equal" — every card gets the same width, laid
+    // out in a plain N-column grid (see equalColumns) with no pairing.
+    variant     : { type: String, reflect: true },
+    // Column count for variant="equal" at the widest breakpoint (xl/lg);
+    // narrows to min(2, this) at md, and 1 at sm, same responsive pattern
+    // as the weighted variant. Ignored when variant="weighted".
+    equalColumns: { type: Number, attribute: "equal-columns" },
+    // "none" (default, transparent) | "tint" (light blue wash behind the
+    // whole grid, including header text) — a section-level background, not
+    // per-card (bd-bento-item already has its own `tone="tint"` for that).
+    background  : { type: String, reflect: true },
     _columns    : { state: true },
     _gap        : { state: true }
   };
@@ -52,6 +88,9 @@ class BentoGrid extends LitElement {
     this.maxColumns = 2;
     this.minCardWidth = 260;
     this.wideShare = 0.7;
+    this.variant = "weighted";
+    this.equalColumns = 3;
+    this.background = "none";
     this._columns = 2;
     this._gap = 24;
     this._resizeObserver = null;
@@ -124,13 +163,32 @@ class BentoGrid extends LitElement {
     }
   }
 
+  // Every item gets the same span (TOTAL_UNITS / columns) — no pairing, no
+  // "featured" full-width exception. Rounds if TOTAL_UNITS doesn't divide
+  // evenly by columns; for common column counts (1, 2, 3, 4, 6, 8, 12, 24)
+  // against TOTAL_UNITS=24 this is always exact.
+  _applyEqualSpans(columns) {
+    const span = Math.round(TOTAL_UNITS / Math.max(1, columns));
+    this._items.forEach((item) => item.style.setProperty("--bd-bento-span", String(span)));
+  }
+
   _relayout() {
     const width = this.clientWidth || 960;
+    this.style.setProperty("--bd-bento-total-units", String(TOTAL_UNITS));
+
+    if (this.variant === "equal") {
+      const { columns, gap } = resolveEqualColumns(width, this.equalColumns, this.minCardWidth);
+      this._columns = columns;
+      this._gap = gap;
+      this.style.setProperty("--bd-bento-gap", `${gap}px`);
+      this._applyEqualSpans(columns);
+      return;
+    }
+
     const { columns, gap } = resolveBreakpoint(width, this.maxColumns, this.minCardWidth);
     this._columns = columns;
     this._gap = gap;
     this.style.setProperty("--bd-bento-gap", `${gap}px`);
-    this.style.setProperty("--bd-bento-total-units", String(TOTAL_UNITS));
 
     if (columns <= 1) {
       this._items.forEach((item) => item.style.setProperty("--bd-bento-span", String(TOTAL_UNITS)));

package/src/components/bento-grid/bento-grid.stories.js

@@ -437,4 +437,49 @@ export const TwentySevenItems = {
       }
     }
   }
+};
+export const EqualColumns = {
+  name  : "Equal Columns — Protection",
+  render: () => html`
+    <bd-bento-grid
+      variant="equal"
+      equal-columns="3"
+      eyebrow="Protection"
+      title="What does VPN for AI Agents protect against?"
+      description="Each protection is structural: every request the agent routes through Bitdefender's MCP tools gets it automatically, with no setting to remember."
+    >
+      <bd-bento-item>
+        <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">01</span>
+        <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">IP masking</bd-h>
+        <bd-p color="var(--color-neutral-600)">When your agent reaches a site, it sees the VPN server's exit IP. Not your home address or IP-based location.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item>
+        <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">02</span>
+        <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">Per-prompt encryption</bd-h>
+        <bd-p color="var(--color-neutral-600)">Every request opens its own encrypted tunnel from your device to Bitdefender, so whoever runs the Wi-Fi you're on can't read what the agent sends.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item>
+        <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">03</span>
+        <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">Session isolation</bd-h>
+        <bd-p color="var(--color-neutral-600)">Each tunnel closes the moment the prompt ends. If a site sees two of your agent's requests, it has no network-level way to tell they came from the same prompt.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item>
+        <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">04</span>
+        <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">Clean-IP browsing</bd-h>
+        <bd-p color="var(--color-neutral-600)">Every request exits on the VPN server's IP rather than the same home address every time, useful for QA and monitoring work that needs a neutral, non-residential vantage point.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item>
+        <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">05</span>
+        <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">Regional routing</bd-h>
+        <bd-p color="var(--color-neutral-600)">Need to see a page the way a visitor from a specific country would? Route that one request through a Bitdefender server there, just for that prompt.</bd-p>
+      </bd-bento-item>
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "`variant=\"equal\"` gives every card the same width in a plain N-column grid (`equal-columns`), with no wide/narrow pairing — unlike the default `\"weighted\"` variant."
+      }
+    }
+  }
 };

package/src/components/comparison-panel/comparison-panel.css.js

@@ -4,7 +4,50 @@ export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
-     background: var(--color-blue-50);
+    background: var(--color-blue-50);
+  }
+
+  /* === DARK VARIANT === */
+  :host([variant="dark"]) {
+    background: linear-gradient(160deg, var(--color-neutral-800) 0%, #0b1626 100%);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-title {
+    color: var(--color-neutral-0, #fff);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-description {
+    color: rgba(255, 255, 255, 0.55);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-eyebrow {
+    color: var(--color-blue-400, #60a5fa);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-column {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-column-title {
+    color: rgba(255, 255, 255, 0.5);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: var(--typography-fontWeight-bold, 700);
+    font-size: var(--typography-fontSize-xs, 12px);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-text {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-icon--positive {
+    background: var(--color-green-600, #16a34a);
+  }
+
+  :host([variant="dark"]) .bd-comparisonpanel-icon--negative {
+    background: var(--color-red-500, #ef4444);
   }
 
   .bd-comparisonpanel-wrapper {
@@ -14,6 +57,14 @@ export default css`
     box-sizing: border-box;
   }
 
+  /* Small eyebrow label above the title, e.g. "Clarity" — optional, only
+     rendered when the eyebrow prop/slot is used. */
+  .bd-comparisonpanel-eyebrow {
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
   .bd-comparisonpanel-title {
     margin: 0 0 var(--spacing-16);
     color: var(--color-neutral-900);

package/src/components/comparison-panel/comparison-panel.js

@@ -11,7 +11,11 @@ class ComparisonPanel extends LitElement {
     positiveTitle: { type: String, attribute: "positive-title" },
     negativeTitle: { type: String, attribute: "negative-title" },
     positiveItems: { type: Array }, // [String]
-    negativeItems: { type: Array }  // [String]
+    negativeItems: { type: Array }, // [String]
+    // "light" (default) — white section, bordered white cards, sans-serif
+    // column titles. "dark" — near-black gradient section, dark bordered
+    // cards, mono uppercase column titles (e.g. "VPN FOR AI AGENTS IS").
+    variant      : { type: String, reflect: true }
   };
 
   static styles = [tokens, comparisonPanelCSS];
@@ -24,6 +28,7 @@ class ComparisonPanel extends LitElement {
     this.negativeTitle = "";
     this.positiveItems = [];
     this.negativeItems = [];
+    this.variant = "light";
   }
 
   _renderColumn(kind, colTitle, items, slotName) {

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

@@ -9,7 +9,27 @@ export default css`
   :host([background="blue"]) {
     background: var(--color-blue-50);
   }
+  /* variant="light" + background="bordered": renders its own card border
+     and hover lift, so callers don't need a manual wrapper <div> just to
+     get the bordered-card look (e.g. side-by-side requirement cards). */
+  :host([variant="light"][background="bordered"]) {
+    display: block;
+    border: 1px solid var(--color-neutral-100, #e5e7eb);
+    border-radius: var(--radius-xl, 12px);
+    padding: var(--spacing-24, 24px);
+    box-sizing: border-box;
+    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  }
+
+  :host([variant="light"][background="bordered"]:hover) {
+    transform: translateY(-3px);
+    box-shadow: 0 14px 40px #00000012;
+    border-color: var(--color-neutral-200);
+  }
 
+  :host([variant="light"][background="bordered"]) .bd-compattable-wrapper {
+    padding: 0;
+  }
   .bd-compattable-wrapper {
     max-width: var(--layout-ensemble-max-width, 1200px);
     margin: 0 auto;
@@ -31,7 +51,6 @@ export default css`
     max-width: 72ch;
   }
 
-  /* === TABLE CONTAINER (default / outcome / risk) === */
   .bd-compattable-table-container {
     display: table;
     width: 100%;
@@ -42,7 +61,6 @@ export default css`
     box-sizing: border-box;
   }
 
-  /* === HEADER ROW === */
   .bd-compattable-header {
     display: grid;
     grid-template-columns: 1.4fr 1.2fr 2.4fr;
@@ -74,7 +92,6 @@ export default css`
     color: var(--color-neutral-600);
   }
 
-  /* === BODY === */
   .bd-compattable-body {
     display: flex;
     flex-direction: column;
@@ -141,15 +158,15 @@ export default css`
   .bd-compattable-cell--riskcoverage {
     color: var(--color-neutral-900);
   }
-
-  /* === LIGHT VARIANT === */
-  .bd-compattable-lightgrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    column-gap: var(--spacing-48);
-    row-gap: 0;
-  }
-
+.bd-compattable-lightgrid {
+  display: grid;
+  grid-template-columns: repeat(var(--bd-compattable-light-columns, 2), 1fr);
+  column-gap: var(--spacing-48);
+  row-gap: 0;
+}
+.bd-compattable-lightrow:last-of-type {
+  border-bottom: none;
+}
   .bd-compattable-lightrow {
     display: flex;
     align-items: baseline;
@@ -171,7 +188,6 @@ export default css`
     text-align: right;
   }
 
-  /* === RESPONSIVE === */
   @media (max-width: 767px) {
     .bd-compattable-header {
       display: none;

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;
   }
 }
- 
 `;