@repobit/dex-system-design 0.24.18 → 0.24.20

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/cards/card.css.js

@@ -50,6 +50,12 @@ export default css`
     gap: var(--spacing-8);
   }
 
+  /* Outline-variant sections get extra top padding above the header,
+     per the reference design. */
+  :host([variant="outline"]) .bd-header-light-carousel-s {
+    padding-top: 80px;
+  }
+
   .bd-light-carousel-s {
     display: flex;
     align-items: center;
@@ -95,6 +101,56 @@ export default css`
     background: #E4F2FF !important;
   }
 
+  /* === OUTLINE VARIANT — bordered, tinted, fully centered card. Set
+     variant="outline" on bd-card-section (propagates to items) or on an
+     individual bd-card-item to opt it in/out per-card. === */
+  .bd-light-box-outline {
+    background-color: var(--color-neutral-25);
+    border: 2px solid var(--color-blue-500);
+    border-radius: var(--radius-2xl, 1rem);
+    padding: 40px;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+  }
+
+  .bd-light-box-outline .bd-light-box-header-s {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .bd-light-box-outline .bd-light-title-badge-wrapper-s {
+    justify-content: center;
+  }
+
+  .bd-light-box-outline .bd-card-title-group {
+    align-items: center;
+    text-align: center;
+    margin-top: 60px;
+  }
+
+  .bd-light-box-outline .bd-card-title-group bd-h {
+    color: var(--color-blue-500, #006dff);
+    text-align: center;
+  }
+
+  .bd-light-box-outline .bd-card-item-subtitle,
+  .bd-light-box-outline .bd-card-content-wrapper p,
+  .bd-light-box-outline .bd-card-content-wrapper ::slotted(*) {
+    color: var(--color-neutral-700);
+    text-align: center;
+  }
+
+  .bd-light-box-outline .bd-card-content-wrapper {
+    align-items: center;
+    text-align: center;
+  }
+
+  .bd-light-box-outline .bd-card-cta-wrapper {
+    justify-content: center;
+  }
+
   .bd-light-box-center {
     align-items: center !important;
     justify-content: center !important;

package/src/components/cards/card.js

@@ -9,6 +9,13 @@ class Card extends LitElement {
     title     : { type: String },
     subtitle  : { type: String },
     bgBlue    : { type: Boolean, reflect: true, attribute: "bg-blue" },
+    // "" (default — existing grey-box carousel look) | "outline" — bordered,
+    // centered cards with a light-blue tint, blue title and centered icon,
+    // matching the reference design. Propagated automatically to every
+    // slotted bd-card-item (see _onSlotChange) so callers only set it once,
+    // on the section, unless a specific item needs to opt out by setting
+    // its own variant attribute explicitly.
+    variant   : { type: String, reflect: true },
     _itemCount: { state: true }
   };
 
@@ -17,6 +24,7 @@ class Card extends LitElement {
     this.title           = "";
     this.subtitle        = "";
     this.bgBlue          = false;
+    this.variant         = "";
     this._itemCount      = 0;
     this._resizeObserver = null;
   }
@@ -47,8 +55,26 @@ class Card extends LitElement {
     this.style.setProperty("--bd-card-width", `${cardW}px`);
   }
 
+  // Propagates this.variant onto every slotted bd-card-item that didn't
+  // itself declare a variant attribute in its ORIGINAL markup. We can't use
+  // item.hasAttribute("variant") here — CardItem's own `variant` property
+  // has reflect:true, so Lit reflects its default "" onto the attribute on
+  // first render, meaning hasAttribute("variant") becomes true for EVERY
+  // item almost immediately, even ones the author never touched. Instead
+  // we rely on item._authorSetVariant, captured in CardItem's constructor
+  // (before Lit's own reflection has a chance to run) — see below.
+  _propagateVariant() {
+    if (!this.variant) return;
+    this.querySelectorAll("bd-card-item").forEach((item) => {
+      if (!item._authorSetVariant) {
+        item.variant = this.variant;
+      }
+    });
+  }
+
   _onSlotChange = () => {
     this._itemCount = this.querySelectorAll("bd-card-item").length;
+    this._propagateVariant();
     this._updateCardWidth();
     this.requestUpdate();
     this._equalizeHeights();
@@ -160,6 +186,7 @@ class Card extends LitElement {
     }
 
     await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    this._propagateVariant();
     this._updateCardWidth();
     this._equalizeHeights();
 
@@ -208,38 +235,61 @@ class CardItem extends LitElement {
     icon    : { type: String },
     align   : { type: String },
     bgBlue  : { type: Boolean, reflect: true, attribute: "bg-blue" },
-    ctaAlign: { type: String, attribute: "cta-align" }
+    ctaAlign: { type: String, attribute: "cta-align" },
+    // "" (default) | "outline" — see Card.variant above. Reflected so
+    // card.css.js can target it with :host([variant="outline"]).
+    variant : { type: String, reflect: true }
   };
 
   constructor() {
     super();
+    // Captured BEFORE Lit's own property-to-attribute reflection runs (that
+    // happens on first update/render, not here). At this point the DOM
+    // parser has already set any attribute the author wrote in markup, so
+    // this reliably answers "did the author explicitly set variant on this
+    // element", independent of whatever default value we assign below.
+    this._authorSetVariant = this.hasAttribute("variant");
+
     this.title    = "";
     this.subtitle = "";
     this.icon     = "";
     this.align    = "start";
     this.bgBlue   = false;
     this.ctaAlign = "start";
+    this.variant  = "";
   }
 
   _renderIcon() {
     const iconEl = this.querySelector("[slot='icon']");
+    const isOutline = this.variant === "outline";
+    const iconW = isOutline ? 65 : 48;
+    const iconH = isOutline ? 75 : 48;
 
     if (iconEl) {
       const clone = iconEl.cloneNode(true);
 
-      clone.style.maxWidth  = "48px";
-      clone.style.maxHeight = "48px";
-      clone.style.width     = "48px";
-      clone.style.height    = "48px";
+      // The icon components (bd-globe-icon etc.) size their inner <svg>
+      // from their own width/height attributes, not from CSS on the host —
+      // setting only clone.style.width/height left the SVG's actual
+      // width="48" height="48" attributes untouched, so nothing visibly
+      // changed. Overwrite the attributes themselves for anything that
+      // looks like an icon component (custom element) or a raw <svg>.
+      clone.setAttribute("width", iconW);
+      clone.setAttribute("height", iconH);
+
+      clone.style.maxWidth  = `${iconW}px`;
+      clone.style.maxHeight = `${iconH}px`;
+      clone.style.width     = `${iconW}px`;
+      clone.style.height    = `${iconH}px`;
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
 
       const innerImg = clone.querySelector("img");
       if (innerImg) {
-        innerImg.style.maxWidth  = "48px";
-        innerImg.style.maxHeight = "48px";
-        innerImg.style.width     = "48px";
-        innerImg.style.height    = "48px";
+        innerImg.style.maxWidth  = `${iconW}px`;
+        innerImg.style.maxHeight = `${iconH}px`;
+        innerImg.style.width     = `${iconW}px`;
+        innerImg.style.height    = `${iconH}px`;
         innerImg.style.objectFit = "contain";
         innerImg.style.display   = "block";
         innerImg.removeAttribute("width");
@@ -254,6 +304,7 @@ class CardItem extends LitElement {
       src="${this.icon}"
       alt="icon"
       class="bd-light-icon-s"
+      style="width: ${iconW}px; height: ${iconH}px;"
     />`;
     }
 
@@ -272,7 +323,8 @@ class CardItem extends LitElement {
   }
 
   render() {
-    const isCentered = this.align === "center";
+    const isOutline  = this.variant === "outline";
+    const isCentered = this.align === "center" || isOutline;
     const hasContent = this._hasContent();
     const hasCtaSlot = !!this.querySelector("[slot='cta']");
     const ctaJustify = this.ctaAlign === "center"
@@ -285,7 +337,8 @@ class CardItem extends LitElement {
       <div
         class="bd-light-box-s
           ${isCentered ? "bd-light-box-center" : ""}
-          ${this.bgBlue ? "bd-light-box-blue" : ""}"
+          ${this.bgBlue ? "bd-light-box-blue" : ""}
+          ${isOutline ? "bd-light-box-outline" : ""}"
       >
         <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
           ${this._renderIcon()}

package/src/components/cards/card.stories.js

@@ -27,6 +27,13 @@ Grid columns are calculated automatically:
 | 7–8 | 4 | 4+3, 4+4 |
 | 9 | 3 | 3+3+3 |
 | 10+ | 4 | 4+4+... |
+
+### Variants
+\`variant="outline"\` on \`bd-card-section\` switches every slotted \`bd-card-item\`
+to a bordered, light-blue-tinted, centered card style (blue title, centered
+icon/text) — set it once on the section, it propagates to all items
+automatically. Leaving \`variant\` unset keeps the existing grey-box look.
+An individual \`bd-card-item\` can opt out with \`variant=""\` explicitly.
         `
       }
     }
@@ -324,6 +331,54 @@ export const MobileView = {
     </bd-card-section>
   ` };
 
+// ─── Outline Variant ────────────────────────────────────────────────────────
+
+export const OutlineVariant = {
+  name  : 'Outline Variant — Trusted For The AI Era',
+  render: () => html`
+    <bd-card-section
+      title="Trusted For The AI Era"
+      subtitle="Pioneering AI in Cybersecurity since 2008."
+      variant="outline"
+    >
+      <bd-card-item title="Transparency">
+        <bd-individual-icon slot="icon" width="48" height="48" color="#006DFF"></bd-individual-icon>
+        <bd-p>We provide clear information about how our AI makes security decisions and what data it uses, balancing technical transparency with usability.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Privacy by Design">
+        <bd-globe-icon slot="icon" width="48" height="48" color="#006DFF"></bd-globe-icon>
+        <bd-p>We implement privacy-preserving techniques like federated learning and differential privacy to minimize data exposure while maintaining AI effectiveness.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Human Guided AI Protection">
+        <bd-family-icon slot="icon" width="48" height="48" color="#006DFF"></bd-family-icon>
+        <bd-p>While our AI is powerful, we augment it with the deep expertise of Bitdefender Labs.</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: '`variant="outline"` pe `bd-card-section` — se propagă automat la toate cardurile: contur albastru subțire, fundal albastru foarte deschis, titlu albastru, conținut centrat.' } } }
+};
+
+export const OutlineVariantMixed = {
+  name  : 'Outline Variant — Mixed With Default',
+  render: () => html`
+    <bd-card-section title="Mixed Variants" variant="outline">
+      <bd-card-item title="Outline Card One">
+        <bd-individual-icon slot="icon" width="48" height="48" color="#006DFF"></bd-individual-icon>
+        <bd-p>This card inherits the outline variant from the section.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Opted-out Card" variant="">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>This card explicitly sets variant="" to opt out and keep the default grey-box look.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Outline Card Two">
+        <bd-machine-learning-icon slot="icon" width="48" height="48" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>This card also inherits the outline variant.</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Un card poate seta `variant=""` explicit ca să rămână pe stilul default, chiar dacă secțiunea are `variant="outline"`.' } } }
+};
+
 // ─── Playground ───────────────────────────────────────────────────────────────
 
 export const Playground = {
@@ -331,13 +386,21 @@ export const Playground = {
   args: {
     sectionTitle   : 'Why Bitdefender',
     sectionSubtitle: '',
+    sectionVariant : '',
     itemTitle      : 'AI Protection',
     align          : 'start',
     bgBlue         : false,
     ctaAlign       : 'start'
   },
+  argTypes: {
+    sectionVariant: {
+      control    : { type: 'select' },
+      options    : ['', 'outline'],
+      description: 'bd-card-section variant — propagates to all items'
+    }
+  },
   render: (args) => html`
-    <bd-card-section title="${args.sectionTitle}" subtitle="${args.sectionSubtitle}">
+    <bd-card-section title="${args.sectionTitle}" subtitle="${args.sectionSubtitle}" variant="${args.sectionVariant}">
       <bd-card-item
         title="${args.itemTitle}"
         align="${args.align}"
@@ -360,5 +423,5 @@ export const Playground = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Playground interactiv.' } } }
+  parameters: { docs: { description: { story: 'Playground interactiv — folosește `sectionVariant` din Controls ca să testezi `variant="outline"`.' } } }
 };

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;