@repobit/dex-system-design 0.23.53 → 0.23.55

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.53",
+  "version": "0.23.55",
   "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.49",
-    "@repobit/dex-store-elements": "1.4.41",
+    "@repobit/dex-store": "1.3.51",
+    "@repobit/dex-store-elements": "1.4.43",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "377af3ec2de06a8dba98c74d7bc03e420c217213"
+  "gitHead": "2a6282a6cdabf56872dfceffef9a995824cd7930"
 }

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

@@ -1,15 +1,18 @@
 import { css } from "lit";
 
 export default css`
-  :host {
-    --bd-accesibility-focus: var(--color-blue-500);
-    font-size: 100%;
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-    background: var(--color-blue-50);
-  }
+ :host {
+  --bd-accesibility-focus: var(--color-blue-500);
+  font-size: 100%;
+  display: block;
+  font-family: var(--typography-fontFamily-sans);
+  padding-top: var(--spacing-64);
+  padding-bottom: var(--spacing-64);
+}
+
+:host([bg-blue]) {
+  background: var(--color-blue-50);
+}
 
   .bd-tabs-component {
     display: flex;

package/src/components/tabs/tabs.js

@@ -7,9 +7,11 @@ 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);
@@ -19,27 +21,27 @@ class BdTabs extends LitElement {
     title          : { type: String },
     subtitle       : { type: String },
     selectedTab    : { type: Number, state: true },
-    _panelMinHeight: { type: Number, state: true }
+    _panelMinHeight: { type: Number, state: true },
+    bgBlue         : { type: Boolean, reflect: true }
   };
 
   static styles = [tokens, tabsCSS];
 
   constructor() {
     super();
-    this.title          = "";
-    this.subtitle       = "";
-    this.selectedTab    = 0;
+    this.title           = "";
+    this.subtitle        = "";
+    this.selectedTab     = 0;
     this._panelMinHeight = 0;
+    this.bgBlue          = false;
   }
 
+
+
   _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;
   }
@@ -54,39 +56,27 @@ class BdTabs extends LitElement {
     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));
-      }
+      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];
-    const cols        = activePanel ? this._getColsFromPanel(activePanel) : [];
 
     return html`
       <div class="bd-tabs-component">
@@ -121,11 +111,7 @@ class BdTabs extends LitElement {
           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>