@repobit/dex-system-design 0.23.52 → 0.23.54

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.52",
+  "version": "0.23.54",
   "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.48",
-    "@repobit/dex-store-elements": "1.4.40",
+    "@repobit/dex-store": "1.3.50",
+    "@repobit/dex-store-elements": "1.4.42",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "10b79725b3ab54c9aa0fab51c9b458941a483ef2"
+  "gitHead": "9b209d3aab1cacf2af53e6647b3eac3697db217d"
 }

package/src/components/highlight/highlight.css.js

@@ -13,6 +13,7 @@ export default css`
   margin: 0 auto;
   padding-top: var(--spacing-64)
 }
+  
 .sub-title {
   color: #006DFF;
   font-family: var(--typography-fontFamily-sans);

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

@@ -7,45 +7,72 @@ import "../highlight/highlight.js";
 import "../paragraph/paragraph.js";
 import tabsCSS from "./tabs.css.js";
 
-class BdTabPanel extends HTMLElement {
-  connectedCallback() {
-    this.style.display = "none";
+class BdTabPanel extends LitElement {
+  static styles = [];
+
+  render() {
+    return html`<slot></slot>`;
   }
 }
 customElements.define("bd-tab-panel", BdTabPanel);
 
 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() {
     return Array.from(this.querySelectorAll(":scope > bd-tab-panel"));
   }
 
-  _getColsFromPanel(panel) {
-    return Array.from(panel.querySelectorAll(":scope > bd-feature-col"));
-  }
-
   selectTab(index) {
     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;
+
+    const originalTab = this.selectedTab;
+    let maxHeight     = 0;
+
+    for (let i = 0; i < panels.length; i++) {
+      this.selectedTab = i;
+      await this.updateComplete;
+      await new Promise(r => requestAnimationFrame(r));
+      await new Promise(r => requestAnimationFrame(r));
+
+      const h = wrapper.scrollHeight;
+      if (h > maxHeight) maxHeight = h;
+    }
+
+    this.selectedTab     = originalTab;
+    await this.updateComplete;
+    this._panelMinHeight = maxHeight;
+  }
+
   render() {
     const panels      = this._getPanels();
     const activePanel = panels[this.selectedTab];
-    const cols        = activePanel ? this._getColsFromPanel(activePanel) : [];
 
     return html`
       <div class="bd-tabs-component">
@@ -78,12 +105,9 @@ class BdTabs extends LitElement {
           role="tabpanel"
           aria-labelledby="tab-btn-${this.selectedTab}"
           class="bd-panel-wrapper"
+          style="${this._panelMinHeight ? `min-height: ${this._panelMinHeight}px;` : ""}"
         >
-          ${keyed(this.selectedTab, html`
-            <bd-features>
-              ${cols.map(col => col.cloneNode(true))}
-            </bd-features>
-          `)}
+          ${keyed(this.selectedTab, activePanel ? activePanel.cloneNode(true) : "")}
         </div>
 
       </div>