@repobit/dex-system-design 0.23.62 → 0.23.63

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.23.63](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.62...@repobit/dex-system-design@0.23.63) (2026-07-02)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for cards4 component
+
+
 ## [0.23.62](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.61...@repobit/dex-system-design@0.23.62) (2026-07-01)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.62",
+  "version": "0.23.63",
   "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.58",
-    "@repobit/dex-store-elements": "1.4.50",
+    "@repobit/dex-store": "1.3.59",
+    "@repobit/dex-store-elements": "1.4.51",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "4742b085d57e9d3c35cfe88763e7bfff91bff6ec"
+  "gitHead": "0bc5274bdbaef4a05431b2df49170b11d375aa59"
 }

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

@@ -5,14 +5,17 @@ export default css`
     display: block;
     --background-card-grey: var(--color-neutral-25);
     --border-card-grey: var(--color-neutral-50);
-    padding-top: var(--spacing-32);
-    padding-bottom: var(--spacing-32);
-  }
-::slotted([slot="icon"]) {
-  width: 48px !important;
-  height: 48px !important;
-  flex-shrink: 0;
-}
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+    max-width: 1290px;
+  }
+
+  ::slotted([slot="icon"]) {
+    width: 48px !important;
+    height: 48px !important;
+    flex-shrink: 0;
+  }
+
   .bd-section-title-s {
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-semibold);
@@ -77,26 +80,23 @@ export default css`
     display: flex;
     flex-direction: column;
     align-items: start;
-    justify-content: center;
+    justify-content: flex-start;
     text-align: start;
     transition: transform 0.2s ease-in-out;
-    min-height: 135px;
     position: relative;
     z-index: 2;
     scroll-snap-align: start;
     font-family: var(--typography-fontFamily-sans);
+    box-sizing: border-box;
   }
 
-  /* Stiluri pentru carduri fără conținut (doar icon + titlu) */
   .bd-light-box-no-content {
     justify-content: center !important;
     align-items: center !important;
     text-align: center !important;
-    min-height: 200px;
     gap: var(--spacing-32);
   }
 
-  /* Stiluri pentru aliniere center */
   .bd-light-box-center {
     align-items: center !important;
     justify-content: center !important;
@@ -111,7 +111,6 @@ export default css`
     text-align: start;
   }
 
-  /* Titlu pentru carduri fără conținut */
   .bd-light-title-no-content h3 {
     margin: var(--spacing-0) !important;
     font-size: var(--heading-small) !important;
@@ -141,7 +140,6 @@ export default css`
     width: var(--spacing-44);
   }
 
-  /* Iconiță pentru carduri fără conținut */
   .bd-light-box-no-content .bd-light-icon-s {
     margin: 0 !important;
     bottom: 0;
@@ -157,14 +155,13 @@ export default css`
     position: relative;
   }
 
-  /* Header pentru carduri fără conținut */
   .bd-light-box-no-content .bd-light-box-header-s {
     align-items: center !important;
     margin: 0 !important;
   }
 
   .bd-light-box-header-center {
-    align-items: center !important; 
+    align-items: center !important;
     padding-bottom: var(--spacing-16);
   }
 
@@ -174,7 +171,6 @@ export default css`
     gap: var(--spacing-4, 4px);
   }
 
-  /* Container titlu pentru carduri fără conținut */
   .bd-light-title-no-content {
     margin: 0 !important;
     width: 100%;
@@ -186,9 +182,11 @@ export default css`
       width: 380px;
       padding: 1.5em;
     }
+
     .bd-light-box-s h3 {
       font-size: 1.1em;
     }
+
     .bd-light-box-s p {
       font-size: 0.95em;
     }
@@ -223,11 +221,6 @@ export default css`
     .bd-light-box-s {
       width: 100%;
       padding: 1em;
-      min-height: 300px;
-    }
-
-    .bd-light-box-no-content {
-      min-height: 250px;
     }
 
     .bd-light-box-s h3 {

package/src/components/cards/card.js

@@ -10,24 +10,86 @@ class Card extends LitElement {
 
   constructor() {
     super();
-    this.title = "";
+    this.title           = "";
+    this._resizeObserver = null;
+  }
+
+  _isVisible() {
+    return this.offsetWidth > 0 && this.offsetHeight > 0;
+  }
+
+  _equalizeHeights() {
+    if (!this._isVisible()) return;
+
+    const items = Array.from(this.querySelectorAll("bd-card-item"));
+    if (!items.length) return;
+
+    items.forEach(item => {
+      const box = item.renderRoot?.querySelector(".bd-light-box-s");
+      if (box) {
+        box.style.height    = "auto";
+        box.style.minHeight = "0";
+      }
+    });
+
+    requestAnimationFrame(() => {
+      let maxH = 0;
+      items.forEach(item => {
+        const box = item.renderRoot?.querySelector(".bd-light-box-s");
+        if (!box) return;
+        const h = box.getBoundingClientRect().height;
+        if (h > maxH) maxH = h;
+      });
+
+      if (maxH > 0) {
+        items.forEach(item => {
+          const box = item.renderRoot?.querySelector(".bd-light-box-s");
+          if (box) {
+            box.style.height    = `${maxH}px`;
+            box.style.minHeight = `${maxH}px`;
+          }
+        });
+      }
+    });
+  }
+
+  async firstUpdated() {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    this._equalizeHeights();
+
+    const track = this.renderRoot.querySelector(".bd-light-carousel-track-s");
+    if (track) {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._equalizeHeights();
+      });
+      this._resizeObserver.observe(track);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
   }
 
   render() {
     return html`
-    <section class="bd-light-carousel-s">
-      ${this.title
-        ? html`
-            <div class="bd-header-light-carousel-s">
-              <bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>
-            </div>
-          `
-        : null}
-      <div class="bd-light-carousel-track-s">
-        <slot></slot>
-      </div>
-    </section>
-  `;
+      <section class="bd-light-carousel-s">
+        ${this.title
+          ? html`
+              <div class="bd-header-light-carousel-s">
+                <bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>
+              </div>
+            `
+          : null}
+        <div class="bd-light-carousel-track-s">
+          <slot @slotchange=${() => this._equalizeHeights()}></slot>
+        </div>
+      </section>
+    `;
   }
 }
 
@@ -41,7 +103,7 @@ class CardItem extends LitElement {
   constructor() {
     super();
     this.title = "";
-    this.icon = "";
+    this.icon  = "";
     this.align = "start";
   }
 
@@ -79,13 +141,13 @@ class CardItem extends LitElement {
     const hasContent = this._hasContent();
 
     return html`
-      <div class="bd-light-box-s ${isCentered ? 'bd-light-box-center' : ''} ${!hasContent ? 'bd-light-box-no-content' : ''}">
-        <div class="bd-light-box-header-s ${isCentered ? 'bd-light-box-header-center' : ''}">
+      <div class="bd-light-box-s ${isCentered ? "bd-light-box-center" : ""} ${!hasContent ? "bd-light-box-no-content" : ""}">
+        <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
           ${this._renderIcon()}
         </div>
         ${this.title
           ? html`
-              <div class="bd-light-title-badge-wrapper-s ${!hasContent ? 'bd-light-title-no-content' : ''}">
+              <div class="bd-light-title-badge-wrapper-s ${!hasContent ? "bd-light-title-no-content" : ""}">
                 <bd-h as="h5" fontWeight="700">${this.title}</bd-h>
               </div>
             `
@@ -96,7 +158,7 @@ class CardItem extends LitElement {
   }
 }
 
-Card.styles = [tokens, carouselCSS];
+Card.styles    = [tokens, carouselCSS];
 CardItem.styles = [tokens, carouselCSS];
 
 customElements.define("bd-card-item", CardItem);

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

@@ -26,9 +26,10 @@ export default {
 ### Usage
 \`\`\`html
 <bd-card-section title="Why Bitdefender">
-  <bd-card-item title="AI Protection" align="center">
+  <bd-card-item title="AI Protectionn" align="center">
     <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
     <bd-p>Powered by machine learning.</bd-p>
+        <bd-p>Powered by machine learning.</bd-p>
   </bd-card-item>
 </bd-card-section>
 \`\`\`