@repobit/dex-system-design 0.23.51 → 0.23.52

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.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.52",
   "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.48",
+    "@repobit/dex-store-elements": "1.4.40",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "ee0b16e0dc89e37e60424056af0ff16564e699c2"
+  "gitHead": "10b79725b3ab54c9aa0fab51c9b458941a483ef2"
 }

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.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,8 +14,6 @@ class BdTabPanel extends HTMLElement {
 }
 customElements.define("bd-tab-panel", BdTabPanel);
 
-// ─── BdTabs ──────────────────────────────────────────────────────────────────
-
 class BdTabs extends LitElement {
   static properties = {
     title      : { type: String },
@@ -61,7 +58,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 +73,17 @@ 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"
         >
-          <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>