@repobit/dex-system-design 0.23.76 → 0.23.77

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.77](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.76...@repobit/dex-system-design@0.23.77) (2026-07-13)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustments
+
+
 ## [0.23.76](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.75...@repobit/dex-system-design@0.23.76) (2026-07-13)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.76",
+  "version": "0.23.77",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.72",
-    "@repobit/dex-store-elements": "1.4.64",
+    "@repobit/dex-store": "1.3.73",
+    "@repobit/dex-store-elements": "1.4.65",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "393438b117548f2f4a3cc6541b6f3557dae3af28"
+  "gitHead": "b3e51d98fc2d4fdf2009d5e72672810207196539"
 }

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

@@ -7,8 +7,7 @@ export default css`
     --border-card-grey: var(--color-neutral-50);
     max-width: 1290px;
     margin: 0 auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
+
 
   }
 
@@ -53,6 +52,7 @@ export default css`
     flex-direction: column;
     max-width: 1400px;
     margin: 0 auto;
+
   }
 
   .bd-light-carousel-track-s {
@@ -68,6 +68,8 @@ export default css`
     scroll-snap-type: x mandatory;
     display: grid;
     gap: 1.5rem;
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
   }
 
   .bd-light-carousel-track-s::-webkit-scrollbar {

package/src/components/cards/card.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "../Button/Button.js";
+import "../button/button.js";
 import "../heading/heading.js";
 import carouselCSS from "./card.css.js";
 
@@ -34,6 +34,23 @@ class Card extends LitElement {
     const items = Array.from(this.querySelectorAll("bd-card-item"));
     if (!items.length) return;
 
+    // Pe mobile — reset la dimensiuni naturale
+    if (window.innerWidth <= 768) {
+      items.forEach(item => {
+        const box      = item.renderRoot?.querySelector(".bd-light-box-s");
+        const iconW    = item.renderRoot?.querySelector(".bd-light-box-header-s");
+        const titleW   = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
+        const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
+
+        if (box)      { box.style.height = ""; box.style.minHeight = ""; box.style.width = ""; box.style.minWidth = ""; }
+        if (iconW)    { iconW.style.height = ""; }
+        if (titleW)   { titleW.style.height = ""; }
+        if (contentW) { contentW.style.height = ""; }
+      });
+      return;
+    }
+
+    // Reset toate
     items.forEach(item => {
       const box      = item.renderRoot?.querySelector(".bd-light-box-s");
       const iconW    = item.renderRoot?.querySelector(".bd-light-box-header-s");
@@ -146,12 +163,10 @@ class Card extends LitElement {
   render() {
     return html`
       <section class="bd-light-carousel-s">
-        ${this.title || this.subtitle
+        ${this.title
           ? html`
               <div class="bd-header-light-carousel-s">
-                ${this.title
-                  ? html`<bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>`
-                  : ""}
+                <bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>
                 ${this.subtitle
                   ? html`<p class="bd-section-subtitle-s">${this.subtitle}</p>`
                   : ""}
@@ -172,6 +187,7 @@ class Card extends LitElement {
 class CardItem extends LitElement {
   static properties = {
     title   : { type: String },
+    subtitle: { type: String },
     icon    : { type: String },
     align   : { type: String },
     ctaAlign: { type: String, attribute: "cta-align" }
@@ -180,6 +196,7 @@ class CardItem extends LitElement {
   constructor() {
     super();
     this.title    = "";
+    this.subtitle = "";
     this.icon     = "";
     this.align    = "start";
     this.ctaAlign = "start";
@@ -253,26 +270,27 @@ 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>
 
-        <!-- Title -->
         ${this.title
           ? html`
               <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 class="bd-card-title-group">
+                  <bd-h as="h5" fontWeight="700">${this.title}</bd-h>
+                  ${this.subtitle
+                    ? html`<p class="bd-card-item-subtitle">${this.subtitle}</p>`
+                    : ""}
+                </div>
               </div>
             `
           : ""}
 
-        <!-- Content -->
         <div class="bd-card-content-wrapper">
           <slot></slot>
         </div>
 
-        <!-- CTA Button -->
         <div class="bd-card-cta-wrapper" style="${ctaJustify}">
           <slot name="cta"></slot>
         </div>