@repobit/dex-system-design 0.23.29 → 0.23.30

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.30](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.29...@repobit/dex-system-design@0.23.30) (2026-05-13)
+
+### Bug Fixes
+
+* **DEX-1014:** fix for accordion component (new icons)
+* **DEX-1014:** new icons folder for icon components
+
+
 ## [0.23.29](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.28...@repobit/dex-system-design@0.23.29) (2026-05-12)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.29",
+  "version": "0.23.30",
   "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.25",
-    "@repobit/dex-store-elements": "1.4.17",
+    "@repobit/dex-store": "1.3.26",
+    "@repobit/dex-store-elements": "1.4.18",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "35c809a5bc2346e978ff0ee9f4e4965324d350c4"
+  "gitHead": "b2eb5cba616e92393dcdc2fd5398762cda4c20f1"
 }

package/src/components/accordion/accordion-bg.js

@@ -1,10 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../icons/minus-icon.js";
+import "../icons/plus-icon.js";
 import accordionCSS from "./accordion-bg.css.js";
-import {
-  ACCORDION_ICON_MINUS,
-  ACCORDION_ICON_PLUS
-} from "./accordion-indicators.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
@@ -88,14 +86,12 @@ class BdAccordionBgItem extends LitElement {
           @focusin=${this._onTriggerFocusIn}
           @focusout=${this._onTriggerFocusOut}
         >
-          <span class="bd-accordion-bg-icon" aria-hidden="true">
-            <img
-              src=${this.open ? ACCORDION_ICON_MINUS : ACCORDION_ICON_PLUS}
-              width="16"
-              height="16"
-              alt=""
-            />
-          </span>
+<span class="bd-accordion-bg-icon" aria-hidden="true">
+  ${this.open
+      ? html`<bd-minus-icon size="16" color="#006DFF"></minus-icon>`
+      : html`<bd-plus-icon  size="16" color="#006DFF"></plus-icon>`
+  }
+</span>
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </button>
         <div

package/src/components/accordion/accordion.js

@@ -1,9 +1,7 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import {
-  ACCORDION_ICON_MINUS,
-  ACCORDION_ICON_PLUS
-} from "./accordion-indicators.js";
+import "../icons/minus-icon.js";
+import "../icons/plus-icon.js";
 import { accordionItem, accordionSection } from "./accordion.css.js";
 
 export class BdAccordionItem extends LitElement {
@@ -27,7 +25,6 @@ export class BdAccordionItem extends LitElement {
     this.open = !this.open;
   }
 
-  /** Whole-host focus ring (:has(:focus-visible) is unreliable on shadow hosts in some engines). */
   _onTriggerFocusIn() {
     const btn = this.renderRoot?.querySelector(".header");
     if (!btn) return;
@@ -55,14 +52,12 @@ export class BdAccordionItem extends LitElement {
         @focusin=${this._onTriggerFocusIn}
         @focusout=${this._onTriggerFocusOut}
       >
-        <span class="toggle" aria-hidden="true">
-          <img
-            src=${this.open ? ACCORDION_ICON_MINUS : ACCORDION_ICON_PLUS}
-            width="16"
-            height="16"
-            alt=""
-          />
-        </span>
+<span class="toggle" aria-hidden="true">
+  ${this.open
+      ? html`<bd-minus-icon size="16" color="#006DFF"></minus-icon>`
+      : html`<bd-plus-icon  size="16" color="#006DFF"></plus-icon>`
+  }
+</span>
         <span class="title">${this.title}</span>
       </button>
       <div id="${this._panelId}" class="content" ?hidden=${!this.open}>

package/src/components/icons/minus-icon.js

@@ -0,0 +1,29 @@
+import { LitElement, css, html } from "lit";
+
+class MinusIcon extends LitElement {
+  static properties = {
+    size : { type: Number },
+    color: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.size  = 16;
+    this.color = "currentColor";
+  }
+
+  static styles = css`
+    :host { display: inline-flex; }
+  `;
+
+  render() {
+    return html`
+<svg width="${this.size}" height="${this.size}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 7.00001H1V9.00001H7H9H15V7.00001H9C8 7 7.5 6.99997 7 7.00001Z" fill="${this.color}"/>
+</svg>
+
+    `;
+  }
+}
+
+customElements.define("bd-minus-icon", MinusIcon);

package/src/components/icons/plus-icon.js

@@ -0,0 +1,28 @@
+import { LitElement, css, html } from "lit";
+
+class PlusIcon extends LitElement {
+  static properties = {
+    size : { type: Number },
+    color: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.size  = 16;
+    this.color = "currentColor";
+  }
+
+  static styles = css`
+    :host { display: inline-flex; }
+  `;
+
+  render() {
+    return html`  
+<svg width="${this.size}" height="${this.size}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1H7V7H1V9H7V15H9V9H15V7H9V1Z" fill="${this.color}"/>
+</svg>
+    `;
+  }
+}
+
+customElements.define("bd-plus-icon", PlusIcon);