@repobit/dex-system-design 0.24.19 → 0.24.20

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.24.20",
   "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.36",
+    "@repobit/dex-store-elements": "2.1.6",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "09e86b2eb429cec7fadc15b6aa945152ab500a19"
+  "gitHead": "c5b184f2837dad5acab88a931b12d3d51121ed57"
 }

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"`.' } } }
 };