@repobit/dex-system-design 0.23.58 → 0.23.59

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.59](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.58...@repobit/dex-system-design@0.23.59) (2026-06-30)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for features and accordion components
+
+
 ## [0.23.58](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.57...@repobit/dex-system-design@0.23.58) (2026-06-29)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.58",
+  "version": "0.23.59",
   "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.54",
-    "@repobit/dex-store-elements": "1.4.46",
+    "@repobit/dex-store": "1.3.55",
+    "@repobit/dex-store-elements": "1.4.47",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "45d59e79d4ea6a17815bf98c01fdf484380c724a"
+  "gitHead": "6b1c32669be3c1f54cec6f98d4d1dbac2f4f1824"
 }

package/src/components/accordion/accordion.css.js

@@ -92,9 +92,10 @@ export const accordionItem = css`
     margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
   }
 
-:host-context(bd-features) .header {
-  margin-bottom: var(--spacing-8);
-}
+  :host-context(bd-features) .header {
+    margin-bottom: var(--spacing-8);
+  }
+
   .header:focus-visible {
     outline: none;
     box-shadow: none;
@@ -148,10 +149,17 @@ export const accordionItem = css`
   }
 
   .title {
-    flex: 1;
     font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
   }
 
+  .title-badge-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
   .content {
     padding: var(--bd-acc-panel-padding, 0 0 0 calc(var(--icon-sm-size) + var(--spacing-12)));
     font-family: var(--typography-fontFamily-sans);
@@ -178,6 +186,15 @@ export const accordionItem = css`
   ::slotted(p:last-child) {
     margin-bottom: 0;
   }
+
+  @media (max-width: 430px) {
+    .title-badge-wrapper {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-0);
+      width: 100%;
+    }
+  }
 `;
 
 export const accordionSection = css`

package/src/components/accordion/accordion.js

@@ -44,6 +44,8 @@ export class BdAccordionItem extends LitElement {
   }
 
   render() {
+    const badgeEl = this.querySelector("[slot='badge']");
+
     return html`
       <button
         type="button"
@@ -59,7 +61,10 @@ export class BdAccordionItem extends LitElement {
             ? html`<bd-minus-icon size="16" color="#006DFF"></bd-minus-icon>`
             : html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`}
         </span>
-        <span class="title">${this.title}</span>
+        <span class="title-badge-wrapper">
+          <span class="title">${this.title}</span>
+          ${badgeEl ? badgeEl.cloneNode(true) : ""}
+        </span>
       </button>
       <div id="${this._panelId}" class="content" ?hidden=${!this.open}>
         <slot></slot>

package/src/components/badge/badge.js

@@ -8,11 +8,12 @@ export class BdBadge extends LitElement {
   static styles = [tokens, badgeCSS];
 
   static properties = {
-    color   : { type: String },
-    variant : { type: String },
-    size    : { type: String },    // sm, md, lg
-    fontsize: { type: String },    // 12, 14, 16
-    icon    : { type: String }     // individual, family
+    color     : { type: String },
+    variant   : { type: String },
+    size      : { type: String },    // sm, md, lg
+    fontsize  : { type: String },    // 12, 14, 16
+    fontweight: { type: String },    // 400, 500, 600, 700, etc.
+    icon      : { type: String }     // individual, family
   };
 
   constructor() {
@@ -21,6 +22,7 @@ export class BdBadge extends LitElement {
     this.variant = '';
     this.size = 'md';
     this.fontsize = '';
+    this.fontweight = '';
     this.icon = '';
   }
 
@@ -32,6 +34,10 @@ export class BdBadge extends LitElement {
     if (changed.has('size') || changed.has('fontsize')) {
       this._updateSizeStyles();
     }
+
+    if (changed.has('fontweight')) {
+      this._updateFontWeight();
+    }
   }
 
   _updateSizeStyles() {
@@ -74,6 +80,12 @@ export class BdBadge extends LitElement {
     }
   }
 
+  _updateFontWeight() {
+    if (this.fontweight) {
+      this.style.setProperty('--badge-font-weight', this.fontweight);
+    }
+  }
+
   _renderIcon() {
     if (!this.icon) return '';
     const color = this.variant === 'bd-light-green' ? '#0b6a26' : 'white';