@repobit/dex-system-design 0.22.1 → 0.22.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.3](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.2...@repobit/dex-system-design@0.22.3) (2026-02-05)
+
+
+### Bug Fixes
+
+* **DEX-1013:** resolve document.createElement() issue in accordion component ([58df884](https://github.com/bitdefender/dex-core/commit/58df8842e531c3610dc57f376a57bc04292e5012))
+
+
+
+## [0.22.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.1...@repobit/dex-system-design@0.22.2) (2026-02-04)
+
+
+### Bug Fixes
+
+* **DEX-25763:** remove unused id property from BdAccordionBgItem constructor ([4c368e3](https://github.com/bitdefender/dex-core/commit/4c368e32284b3bf4cecfe11f9c31566e2df06a39))
+
+
+
 ## [0.22.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.0...@repobit/dex-system-design@0.22.1) (2026-01-19)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.22.1",
+  "version": "0.22.3",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -85,5 +85,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "6fcaf5133ff6a150fd7d2d3e8a261f9b88b35bc1"
+  "gitHead": "85911b2085c6c3aef20dae229701cb49b2dac835"
 }

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

@@ -29,9 +29,10 @@ class BdAccordionBg extends LitElement {
 
 class BdAccordionBgItem extends LitElement {
   static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true },
-    noBg : { type: Boolean, attribute: 'no-bg' }
+    title       : { type: String },
+    open        : { type: Boolean, reflect: true },
+    noBg        : { type: Boolean, attribute: 'no-bg' },
+    _accordionId: { type: String, state: true }
   };
 
   constructor() {
@@ -39,8 +40,15 @@ class BdAccordionBgItem extends LitElement {
     this.title = "";
     this.open = false;
     this.noBg = false;
-    this.id = `accordion-${Math.random().toString(36)
-      .substr(2, 9)}`;
+    this._accordionId = "";
+  }
+
+  firstUpdated() {
+    // Generează ID-ul doar după ce elementul este conectat la DOM
+    if (!this._accordionId) {
+      this._accordionId = `accordion-${Math.random().toString(36)
+        .substr(2, 9)}`;
+    }
   }
 
   static styles = [tokens, accordionCSS];
@@ -70,7 +78,7 @@ class BdAccordionBgItem extends LitElement {
         class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? 'no-bg' : ''}"
         role="button"
         aria-expanded="${this.open}"
-        aria-controls="${this.id}"
+        aria-controls="${this._accordionId}"
         tabindex="0"
         @click=${this.toggleItem}
         @keydown=${this.handleKeyDown}
@@ -80,10 +88,10 @@ class BdAccordionBgItem extends LitElement {
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </div>
         <div
-          id="${this.id}"
+          id="${this._accordionId}"
           class="bd-accordion-bg-answer"
           role="region"
-          aria-labelledby="${this.id}"
+          aria-labelledby="${this._accordionId}"
         >
           <slot @slotchange=${this.#onSlot}></slot>
         </div>
@@ -93,4 +101,4 @@ class BdAccordionBgItem extends LitElement {
 }
 
 customElements.define("bd-accordion-bg", BdAccordionBg);
-customElements.define("bd-accordion-bg-item", BdAccordionBgItem);
+customElements.define("bd-accordion-bg-item", BdAccordionBgItem);

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

@@ -132,6 +132,68 @@ OpenAccordionItem.parameters = {
   }
 };
 
+// **Adăugat exemplu pentru testarea creării dinamice**
+export const DynamicCreation = () => {
+  // Funcție pentru crearea dinamică a unui accordion item
+  const createDynamicItem = () => {
+    const item = document.createElement('bd-accordion-bg-item');
+    item.title = 'Dynamically Created Item';
+    item.noBg = false;
+    item.open = false;
+
+    const paragraph = document.createElement('bd-p');
+    paragraph.setAttribute('kind', 'regular');
+    paragraph.textContent = 'This accordion item was created dynamically using document.createElement(). It should work without any errors.';
+
+    item.appendChild(paragraph);
+    return item;
+  };
+
+  const handleAddItem = () => {
+    const container = document.getElementById('dynamic-accordion-container');
+    if (container) {
+      const newItem = createDynamicItem();
+      container.appendChild(newItem);
+    }
+  };
+
+  return html`
+    <div style="max-width: 800px; margin: 0 auto;">
+      <bd-h as="h2">Dynamic Accordion Creation Test</bd-h>
+      <bd-p kind="regular" style="margin-bottom: 1rem;">
+        This example demonstrates creating accordion items dynamically using <code>document.createElement()</code>.
+        The issue with setting attributes in the constructor should now be resolved.
+      </bd-p>
+      
+      <div style="margin-bottom: 2rem;">
+        <button 
+          @click=${handleAddItem}
+          style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          Add Dynamic Accordion Item
+        </button>
+      </div>
+      
+      <bd-accordion-bg title="Dynamically Created Items" no-bg>
+        <div id="dynamic-accordion-container">
+          <!-- Items will be added here dynamically -->
+        </div>
+      </bd-accordion-bg>
+      
+      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
+        Try clicking the button above to add accordion items dynamically. Each should have a unique ID and work correctly.
+      </bd-p>
+    </div>
+  `;
+};
+DynamicCreation.parameters = {
+  docs: {
+    description: {
+      story: 'Test case for dynamic creation of accordion items using document.createElement(). Demonstrates that the ID generation issue has been resolved.'
+    }
+  }
+};
+
 export const SecurityFAQ = () => html`
   <bd-accordion-bg title="Security & Protection FAQ">
     <bd-accordion-bg-item title="How does Bitdefender protect against ransomware?">