@repobit/dex-system-design 0.23.51 → 0.23.53

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.23.53](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.52...@repobit/dex-system-design@0.23.53) (2026-06-24)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for tabs component
+
+
+## [0.23.52](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.51...@repobit/dex-system-design@0.23.52) (2026-06-23)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for features and tabs component
+
+
 ## [0.23.51](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.50...@repobit/dex-system-design@0.23.51) (2026-06-22)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.51",
+  "version": "0.23.53",
   "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.47",
-    "@repobit/dex-store-elements": "1.4.39",
+    "@repobit/dex-store": "1.3.49",
+    "@repobit/dex-store-elements": "1.4.41",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "ee0b16e0dc89e37e60424056af0ff16564e699c2"
+  "gitHead": "377af3ec2de06a8dba98c74d7bc03e420c217213"
 }

package/src/components/features/features.css.js

@@ -4,10 +4,9 @@ export default css`
   :host {
     display: block;
     width: 100%;
-    padding-top: var(--spacing-32);
-    padding-bottom: var(--spacing-32);
-  --bd-acc-header-margin-bottom: var(--spacing-8);
-
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+    --bd-acc-header-margin-bottom: var(--spacing-8);
   }
 
   /* Columns grid */
@@ -22,7 +21,8 @@ export default css`
   .bd-col {
     display: flex;
     flex-direction: column;
-    width: 300px;
+    width: 100%;
+    max-width: 400px;
   }
 
   /* Icon wrapper */
@@ -53,7 +53,7 @@ export default css`
   /* Responsive */
   @media (max-width: 992px) {
     .bd-col {
-      width: 260px;
+      max-width: 100%;
     }
   }
 

package/src/components/features/features.js

@@ -6,13 +6,9 @@ import "../image/image.js";
 import "../paragraph/paragraph.js";
 import featuresCSS from "./features.css.js";
 
-// ─── BdFeatureCol — Light DOM wrapper ────────────────────────────────────────
-
 class BdFeatureCol extends HTMLElement {}
 customElements.define("bd-feature-col", BdFeatureCol);
 
-// ─── BdFeatures ──────────────────────────────────────────────────────────────
-
 class BdFeatures extends LitElement {
   static properties = {
     _minHeight: { state: true }
@@ -107,7 +103,7 @@ class BdFeatures extends LitElement {
         ${descEl
           ? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
           : ""}
-       ${accordionEl
+        ${accordionEl
           ? (() => {
             const clone = accordionEl.cloneNode(true);
             clone.querySelectorAll("bd-accordion-item").forEach(item => {
@@ -127,7 +123,7 @@ class BdFeatures extends LitElement {
     return html`
       <div
         class="bd-features-container"
-        style="grid-template-columns: repeat(${colCount}, 300px); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
+        style="grid-template-columns: repeat(${colCount}, 1fr); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
       >
         ${cols.map(col => this._renderCol(col))}
       </div>

package/src/components/tabs/tabs.css.js

@@ -38,7 +38,10 @@ export default css`
     border-bottom: 1px solid var(--color-neutral-100);
     // margin-bottom: var(--spacing-32);
   }
-
+.bd-panel-wrapper {
+  width: 100%;
+  box-sizing: border-box;
+}
   .bd-tab-button {
     display: inline-flex;
     align-items: center;

package/src/components/tabs/tabs.js

@@ -1,4 +1,5 @@
 import { LitElement, html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
 import { tokens } from "../../tokens/tokens.js";
 import "../features/features.js";
 import "../heading/heading.js";
@@ -6,8 +7,6 @@ import "../highlight/highlight.js";
 import "../paragraph/paragraph.js";
 import tabsCSS from "./tabs.css.js";
 
-// ─── BdTabPanel — Light DOM wrapper ──────────────────────────────────────────
-
 class BdTabPanel extends HTMLElement {
   connectedCallback() {
     this.style.display = "none";
@@ -15,22 +14,22 @@ class BdTabPanel extends HTMLElement {
 }
 customElements.define("bd-tab-panel", BdTabPanel);
 
-// ─── BdTabs ──────────────────────────────────────────────────────────────────
-
 class BdTabs extends LitElement {
   static properties = {
-    title      : { type: String },
-    subtitle   : { type: String },
-    selectedTab: { type: Number, state: true }
+    title          : { type: String },
+    subtitle       : { type: String },
+    selectedTab    : { type: Number, state: true },
+    _panelMinHeight: { type: Number, state: true }
   };
 
   static styles = [tokens, tabsCSS];
 
   constructor() {
     super();
-    this.title       = "";
-    this.subtitle    = "";
-    this.selectedTab = 0;
+    this.title          = "";
+    this.subtitle       = "";
+    this.selectedTab    = 0;
+    this._panelMinHeight = 0;
   }
 
   _getPanels() {
@@ -45,6 +44,45 @@ class BdTabs extends LitElement {
     this.selectedTab = index;
   }
 
+  async firstUpdated() {
+    await this.updateComplete;
+    await this._measureAllPanels();
+  }
+
+  async _measureAllPanels() {
+    const panels  = this._getPanels();
+    const wrapper = this.renderRoot.querySelector(".bd-panel-wrapper");
+    if (!wrapper || !panels.length) return;
+
+    // Salvam tabul curent
+    const originalTab = this.selectedTab;
+    let maxHeight     = 0;
+
+    for (let i = 0; i < panels.length; i++) {
+      // Setam tabul la i fara sa triggeram re-render complet
+      this.selectedTab = i;
+      await this.updateComplete;
+
+      // Asteptam si bd-features sa termine masuratorile interne
+      const bdFeatures = wrapper.querySelector("bd-features");
+      if (bdFeatures) {
+        await bdFeatures.updateComplete;
+        // Un extra frame pentru _equalizeRows
+        await new Promise(r => requestAnimationFrame(r));
+        await new Promise(r => requestAnimationFrame(r));
+      }
+
+      const h = wrapper.scrollHeight;
+      if (h > maxHeight) maxHeight = h;
+    }
+
+    // Restauram tabul original
+    this.selectedTab     = originalTab;
+    await this.updateComplete;
+
+    this._panelMinHeight = maxHeight;
+  }
+
   render() {
     const panels      = this._getPanels();
     const activePanel = panels[this.selectedTab];
@@ -61,7 +99,6 @@ class BdTabs extends LitElement {
           ? html`<bd-p kind="large" class="bd-tabs-subtitle">${this.subtitle}</bd-p>`
           : ""}
 
-        <!-- Tab buttons -->
         <div class="bd-tabs-container" role="tablist">
           ${panels.map((panel, index) => html`
             <button
@@ -77,16 +114,18 @@ class BdTabs extends LitElement {
           `)}
         </div>
 
-        <!-- Active panel — bd-features cu coloanele panelului activ -->
         <div
           id="tab-panel-${this.selectedTab}"
           role="tabpanel"
           aria-labelledby="tab-btn-${this.selectedTab}"
           class="bd-panel-wrapper"
+          style="${this._panelMinHeight ? `min-height: ${this._panelMinHeight}px;` : ""}"
         >
-          <bd-features>
-            ${cols.map(col => col.cloneNode(true))}
-          </bd-features>
+          ${keyed(this.selectedTab, html`
+            <bd-features>
+              ${cols.map(col => col.cloneNode(true))}
+            </bd-features>
+          `)}
         </div>
 
       </div>