@repobit/dex-system-design 0.23.65 → 0.23.67

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.67](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.66...@repobit/dex-system-design@0.23.67) (2026-07-06)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
+## [0.23.66](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.65...@repobit/dex-system-design@0.23.66) (2026-07-06)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for cards component
+
+
 ## [0.23.65](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.64...@repobit/dex-system-design@0.23.65) (2026-07-03)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.65",
+  "version": "0.23.67",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.61",
-    "@repobit/dex-store-elements": "1.4.53",
+    "@repobit/dex-store": "1.3.63",
+    "@repobit/dex-store-elements": "1.4.55",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "798ae4c67c57d8932da4962aea6c451315865638"
+  "gitHead": "741c5d4caa49c463defcebe1e250e9969ae28299"
 }

package/src/components/cards/card.js

@@ -6,12 +6,14 @@ import carouselCSS from "./card.css.js";
 
 class Card extends LitElement {
   static properties = {
-    title: { type: String }
+    title     : { type: String },
+    _itemCount: { state: true }
   };
 
   constructor() {
     super();
     this.title           = "";
+    this._itemCount      = 0;
     this._resizeObserver = null;
   }
 
@@ -19,6 +21,11 @@ class Card extends LitElement {
     return this.offsetWidth > 0 && this.offsetHeight > 0;
   }
 
+  _onSlotChange() {
+    this._itemCount = this.querySelectorAll("bd-card-item").length;
+    this._equalizeHeights();
+  }
+
   _equalizeHeights() {
     if (!this._isVisible()) return;
 
@@ -135,8 +142,6 @@ class Card extends LitElement {
   }
 
   render() {
-    const itemCount = this.querySelectorAll("bd-card-item").length;
-
     return html`
       <section class="bd-light-carousel-s">
         ${this.title
@@ -148,9 +153,9 @@ class Card extends LitElement {
           : null}
         <div
           class="bd-light-carousel-track-s"
-          style="grid-template-columns: repeat(${itemCount}, 1fr);"
+          style="grid-template-columns: repeat(${this._itemCount || 1}, 1fr);"
         >
-          <slot @slotchange=${() => this._equalizeHeights()}></slot>
+          <slot @slotchange=${this._onSlotChange}></slot>
         </div>
       </section>
     `;
@@ -187,10 +192,10 @@ class CardItem extends LitElement {
 
     if (this.icon) {
       return html`<img
-    src="${this.icon}"
-    alt="icon"
-    class="bd-light-icon-s"
-  />`;
+        src="${this.icon}"
+        alt="icon"
+        class="bd-light-icon-s"
+      />`;
     }
 
     return "";
@@ -215,12 +220,10 @@ class CardItem extends LitElement {
     return html`
       <div class="bd-light-box-s ${isCentered ? "bd-light-box-center" : ""} ${!hasContent ? "bd-light-box-no-content" : ""}">
 
-        <!-- Icon -->
         <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
           ${this._renderIcon()}
         </div>
 
-        <!-- Titlu -->
         ${this.title
           ? html`
               <div class="bd-light-title-badge-wrapper-s ${!hasContent ? "bd-light-title-no-content" : ""}">
@@ -229,12 +232,10 @@ class CardItem extends LitElement {
             `
           : ""}
 
-        <!-- Content -->
         <div class="bd-card-content-wrapper">
           <slot></slot>
         </div>
 
-        <!-- CTA Button -->
         <div class="bd-card-cta-wrapper">
           <slot name="cta"></slot>
         </div>