@repobit/dex-system-design 0.24.19 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.20...@repobit/dex-system-design@0.25.0) (2026-09-25)
+
+### Features
+
+* **DEX-28731:** add align-rows subgrid option to card section
+
+
+## [0.24.20](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.19...@repobit/dex-system-design@0.24.20) (2026-09-24)
+
+### Bug Fixes
+
+* **DEX-1014:** new adjustments for Card component
+
+
 ## [0.24.19](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.18...@repobit/dex-system-design@0.24.19) (2026-09-23)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.19",
+  "version": "0.25.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.35",
-    "@repobit/dex-store-elements": "2.1.5",
+    "@repobit/dex-store": "1.6.37",
+    "@repobit/dex-store-elements": "2.1.7",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "09e86b2eb429cec7fadc15b6aa945152ab500a19"
+  "gitHead": "1e626106ffdf4df5443c8da6fa45fa4dae48a2c7"
 }

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;
@@ -204,6 +260,68 @@ export default css`
     display: none;
   }
 
+  /* === ALIGN ROWS — opt-in with align-rows on bd-card-section. The track is
+     a grid and every card is a subgrid spanning the same rows (header, title,
+     one per content node, CTA), so rows line up across cards even when their
+     content wraps differently. Row counts come from _syncAlignRows(). Row gaps
+     between tracks stay 0 so spacing inside cards is unchanged; spacing
+     between wrapped card rows comes from the item margin instead. === */
+  @media (min-width: 769px) {
+    :host([align-rows]) .bd-light-carousel-track-s {
+      display: grid;
+      grid-template-columns: repeat(var(--bd-card-cols), minmax(0, 1fr));
+      column-gap: 1.5rem;
+      row-gap: 0;
+      margin-bottom: -1.5rem;
+    }
+
+    :host([align-rows]) ::slotted(bd-card-item) {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: span var(--bd-card-rows, 4);
+      width: auto;
+      min-width: 0;
+      margin: 0 0 1.5rem !important;
+    }
+
+    :host([align-rows]) .bd-light-box-s {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: 1 / -1;
+      row-gap: 0;
+      /* center/outline boxes force flex centering with !important; in grid
+         those would center items vertically and shrink the column */
+      align-items: start !important;
+      justify-content: normal !important;
+      align-content: start;
+    }
+
+    :host([align-rows]) .bd-light-box-header-s {
+      grid-row: 1;
+    }
+
+    :host([align-rows]) .bd-light-title-badge-wrapper-s {
+      grid-row: 2;
+    }
+
+    :host([align-rows]) .bd-card-content-wrapper {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: 3 / span var(--bd-card-content-rows, 1);
+      row-gap: 0;
+      align-items: start;
+    }
+
+    :host([align-rows]) .bd-light-box-center .bd-card-content-wrapper,
+    :host([align-rows]) .bd-light-box-outline .bd-card-content-wrapper {
+      justify-items: center;
+    }
+
+    :host([align-rows]) .bd-card-cta-wrapper {
+      grid-row: -2;
+    }
+  }
+
 
   @media (max-width: 768px) {
     .bd-light-carousel-track-s {

package/src/components/cards/card.js

@@ -9,6 +9,17 @@ 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 },
+    // Opt-in: lays the cards out on a CSS grid and makes every card a subgrid,
+    // so icon, title, each content row and CTA line up across cards (desktop
+    // only). Replaces the JS height equalization for this section.
+    alignRows : { type: Boolean, reflect: true, attribute: "align-rows" },
     _itemCount: { state: true }
   };
 
@@ -17,8 +28,11 @@ class Card extends LitElement {
     this.title           = "";
     this.subtitle        = "";
     this.bgBlue          = false;
+    this.variant         = "";
+    this.alignRows       = false;
     this._itemCount      = 0;
     this._resizeObserver = null;
+    this._mutationObserver = null;
   }
 
   _isVisible() {
@@ -47,15 +61,68 @@ 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;
+      }
+    });
+  }
+
+  // Mirrors align-rows onto every item (their shadow styles key off it) and
+  // sizes the shared row tracks: header, title, the longest content list, CTA.
+  _syncAlignRows() {
+    const items = [...this.querySelectorAll("bd-card-item")];
+    items.forEach((item) => item.toggleAttribute("align-rows", this.alignRows));
+    if (!this.alignRows) return;
+
+    const contentRows = Math.max(0, ...items.map((item) => item._contentNodes?.().length ?? 0));
+    this.style.setProperty("--bd-card-content-rows", contentRows);
+    this.style.setProperty("--bd-card-rows", contentRows + 3);
+  }
+
+  updated(changed) {
+    if (!changed.has("alignRows")) return;
+    this._syncAlignRows();
+    if (this.alignRows) this._clearEqualizedHeights();
+    else this._equalizeHeights();
+  }
+
+  // Removes the inline heights written by _equalizeHeights (e.g. when
+  // align-rows is switched on after the section already rendered).
+  _clearEqualizedHeights() {
+    this.querySelectorAll("bd-card-item").forEach((item) => {
+      const root = item.renderRoot;
+      if (!root) return;
+      [".bd-light-box-s", ".bd-light-box-header-s", ".bd-light-title-badge-wrapper-s", ".bd-card-content-wrapper"]
+        .forEach((selector) => {
+          const el = root.querySelector(selector);
+          if (el) { el.style.height = ""; el.style.minHeight = ""; }
+        });
+    });
+  }
+
   _onSlotChange = () => {
     this._itemCount = this.querySelectorAll("bd-card-item").length;
+    this._propagateVariant();
+    this._syncAlignRows();
     this._updateCardWidth();
     this.requestUpdate();
     this._equalizeHeights();
   }
 
   _equalizeHeights() {
-    if (!this._isVisible()) return;
+    // align-rows sizes cards with subgrid; inline heights would fight it
+    if (this.alignRows || !this._isVisible()) return;
 
     const items = Array.from(this.querySelectorAll("bd-card-item"));
     if (!items.length) return;
@@ -160,6 +227,8 @@ class Card extends LitElement {
     }
 
     await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    this._propagateVariant();
+    this._syncAlignRows();
     this._updateCardWidth();
     this._equalizeHeights();
 
@@ -171,11 +240,17 @@ class Card extends LitElement {
       });
       this._resizeObserver.observe(track);
     }
+
+    // Content added to or removed from an item changes its row count, which
+    // doesn't trigger slotchange on the section.
+    this._mutationObserver = new MutationObserver(() => this._syncAlignRows());
+    this._mutationObserver.observe(this, { childList: true, subtree: true });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this._resizeObserver?.disconnect();
+    this._mutationObserver?.disconnect();
   }
 
   render() {
@@ -208,38 +283,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.ctaAlign = "";
+    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,30 +352,36 @@ class CardItem extends LitElement {
       src="${this.icon}"
       alt="icon"
       class="bd-light-icon-s"
+      style="width: ${iconW}px; height: ${iconH}px;"
     />`;
     }
 
     return "";
   }
-  _hasContent() {
-    const slottedNodes = [...this.childNodes].filter((node) => {
+  // Nodes rendered in the default slot — each one is a content row
+  _contentNodes() {
+    return [...this.childNodes].filter((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const slot = node.getAttribute("slot");
         return slot !== "icon" && slot !== "cta";
       }
       return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "";
     });
+  }
 
-    return slottedNodes.length > 0;
+  _hasContent() {
+    return this._contentNodes().length > 0;
   }
 
   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"
+    const ctaAlign   = this.ctaAlign || (isCentered ? "center" : "start");
+    const ctaJustify = ctaAlign === "center"
       ? "justify-content: center;"
-      : this.ctaAlign === "end"
+      : ctaAlign === "end"
         ? "justify-content: flex-end;"
         : "justify-content: flex-start;";
 
@@ -285,7 +389,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,20 @@ 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.
+
+### Align rows
+\`align-rows\` on \`bd-card-section\` lays the cards out with CSS subgrid
+(above 768px): icon, title, each content element and the CTA line up across
+cards, even when one card's text wraps to more lines. It replaces the JS
+height equalization for that section. Note: an incomplete last row is
+left-aligned instead of centered.
         `
       }
     }
@@ -243,6 +257,81 @@ export const WithCTA = {
   parameters: { docs: { description: { story: 'Cards cu buton CTA via `slot="cta"`.' } } }
 };
 
+// ─── Align Rows ───────────────────────────────────────────────────────────────
+
+const alignRowsIcons = [
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`
+];
+
+// Store badges rendered as linked pictures (a content row), like on product pages
+const storeBadges = [
+  { src: '/images/badges/google-play-badge.png', alt: 'Get it on Google Play' },
+  { src: '/images/badges/app-store-badge.png', alt: 'Download on the App Store' }
+];
+
+const storeBadge = (n) => {
+  const badge = storeBadges[(n - 1) % storeBadges.length];
+  return html`
+    <a href="#" style="display: block;">
+      <img src="${badge.src}" alt="${badge.alt}" width="188" height="56" style="display: block; width: auto; height: 56px;" />
+    </a>
+  `;
+};
+
+export const AlignRows = {
+  name: 'Align Rows (subgrid)',
+  args: {
+    alignRows : true,
+    align     : 'center',
+    variant   : '',
+    showCta   : true,
+    showBadges: true,
+    card1Title: 'Antivirus Free for Android',
+    card1Text : 'Blocks malware on your phone.',
+    card1Extra: 'No cost, no catch.',
+    card2Title: 'Virus Scanner for Mac',
+    card2Text : 'Catches Mac and Windows malware alike, including threats hiding in email attachments and downloads.',
+    card2Extra: 'Free. Forever.',
+    card3Title: 'Security for iOS, iPhone and iPad devices',
+    card3Text : 'Web protection.',
+    card3Extra: 'Free for iPhone and iPad.',
+    card4Title: '',
+    card4Text : '',
+    card4Extra: ''
+  },
+  argTypes: {
+    alignRows : { control: 'boolean', description: '`align-rows` on bd-card-section — toggle to compare with the JS height equalization' },
+    align     : { control: { type: 'select' }, options: ['start', 'center'], description: 'bd-card-item align' },
+    variant   : { control: { type: 'select' }, options: ['', 'outline'], description: 'bd-card-section variant' },
+    showCta   : { control: 'boolean', description: 'Render a CTA (slot="cta") in every card' },
+    showBadges: { control: 'boolean', description: 'Render a store badge (linked picture) as the last content row — Google Play / App Store alternating' },
+    ...Object.fromEntries([1, 2, 3, 4].flatMap((n) => [
+      [`card${n}Title`, { control: 'text', table: { category: `Card ${n}` }, description: n === 4 ? 'Leave empty to hide card 4' : 'Card title' }],
+      [`card${n}Text`, { control: 'text', table: { category: `Card ${n}` }, description: 'First content row (bd-p)' }],
+      [`card${n}Extra`, { control: 'text', table: { category: `Card ${n}` }, description: 'Second content row (bd-p) — leave empty to omit' }]
+    ]))
+  },
+  render: (args) => html`
+    <bd-card-section title="Also free" variant="${args.variant}" ?align-rows=${args.alignRows}>
+      ${[1, 2, 3, 4]
+        .filter((n) => args[`card${n}Title`])
+        .map((n) => html`
+          <bd-card-item align="${args.align}" title="${args[`card${n}Title`]}">
+            ${alignRowsIcons[n - 1]}
+            ${args[`card${n}Text`] ? html`<bd-p>${args[`card${n}Text`]}</bd-p>` : ''}
+            ${args[`card${n}Extra`] ? html`<bd-p>${args[`card${n}Extra`]}</bd-p>` : ''}
+            ${args.showBadges ? storeBadge(n) : ''}
+            ${args.showCta ? html`<bd-button-link slot="cta" href="#" kind="primary" size="sm">Get it free</bd-button-link>` : ''}
+          </bd-card-item>
+        `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'With `align-rows`, each row (icon, title, every content element, CTA) has the same height across cards, via CSS subgrid. Use the controls to toggle it and change card content. Rows only align above 768px — widen the canvas.' } } }
+};
+
 // ─── No Slotted Content ───────────────────────────────────────────────────────
 
 export const NoSlottedContent = {
@@ -324,6 +413,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 +468,26 @@ export const Playground = {
   args: {
     sectionTitle   : 'Why Bitdefender',
     sectionSubtitle: '',
+    sectionVariant : '',
     itemTitle      : 'AI Protection',
     align          : 'start',
     bgBlue         : false,
-    ctaAlign       : 'start'
+    ctaAlign       : ''
+  },
+  argTypes: {
+    sectionVariant: {
+      control    : { type: 'select' },
+      options    : ['', 'outline'],
+      description: 'bd-card-section variant — propagates to all items'
+    },
+    ctaAlign: {
+      control    : { type: 'select' },
+      options    : ['', 'start', 'center', 'end'],
+      description: 'bd-card-item cta-align — empty follows align'
+    }
   },
   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 +510,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"`.' } } }
 };