@repobit/dex-system-design 0.23.8 → 0.23.10

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.10](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.9...@repobit/dex-system-design@0.23.10) (2026-03-31)
+
+### Bug Fixes
+
+* **DEX-1014:** quick changes on multiple components
+
+
+## [0.23.9](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.8...@repobit/dex-system-design@0.23.9) (2026-03-31)
+
+### Bug Fixes
+
+* **DEX-1014:** quick changes on multiple components
+
+
 ## [0.23.8](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.7...@repobit/dex-system-design@0.23.8) (2026-03-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.8",
+  "version": "0.23.10",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -86,5 +86,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "e0d9ea64bc98f130a92686d3c0e385d0ba284565"
+  "gitHead": "d6c2015f70aedf55bb7fe4860b3c2ce1978a52f4"
 }

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

@@ -1,70 +1,115 @@
 import { css } from "lit";
 
+/**
+ * FAQ-style card accordion (Figma accordeon_faq / ds-accordion variant card, compact).
+ * Tokens only from truth_tokens — spacing-12 = 12px, radius-md ≈ 6px, etc.
+ */
 export default css`
-  @layer bd-components {
   :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
     --bd-accesibility-focus: var(--color-blue-500);
     display: block;
   }
 
-  .bd-accordion-bg-item {
-    margin-bottom: var(--spacing-16);
-    border-radius: var(--spacing-8);
+  :host(bd-accordion-bg-item) {
+    display: block;
+    margin-bottom: var(--spacing-12);
+    padding: 0 var(--spacing-16);
+    box-sizing: border-box;
     background-color: var(--color-blue-50);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
+    border-radius: var(--radius-lg);
+    /* visible so focus ring is not clipped; panel animates with its own overflow */
+    overflow: visible;
   }
 
-  .bd-accordion-bg-item:hover {
-    .bd-accordion-bg-question-text {
-      text-decoration-line: underline;
-    }
+  :host(bd-accordion-bg-item[data-bd-acc-focus]) {
+    outline: none;
+    /* Darker outer ring so focus stays visible on --color-blue-50 */
+    box-shadow: 0 0 0 2px var(--color-neutral-0),
+      0 0 0 4px var(--color-blue-700);
+    position: relative;
+    z-index: 1;
+  }
+
+  :host(bd-accordion-bg-item:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  :host(bd-accordion-bg-item[no-bg]) {
+    margin-bottom: var(--spacing-16);
+    padding: 0;
+    background-color: transparent;
+    border-radius: 0;
+    overflow: visible;
+  }
+
+  :host(bd-accordion-bg-item[no-bg]:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  :host(bd-accordion-bg-item[no-bg][data-bd-acc-focus]) {
+    border-radius: var(--radius-sm);
+    box-shadow: var(--focus-outline-primary);
+  }
+
+  .bd-accordion-bg-item {
+    margin-bottom: 0;
+    border-radius: 0;
+    background-color: transparent;
+    overflow: visible;
+    transition: box-shadow var(--transition-duration-slow)
+      var(--transition-easing-smooth);
   }
 
   .bd-accordion-bg-question {
     cursor: pointer;
     display: flex;
     justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-10);
-    padding: var(--spacing-16);
-    font-weight: bold;
-    background-color: var(--color-blue-50);
-    color: #333;
-    transition: background-color 0.3s ease, color 0.3s ease;
+    align-items: flex-start;
+    gap: var(--spacing-12);
+    width: 100%;
+    padding: var(--spacing-12) 0;
+    margin: 0;
+    border: none;
+    font: inherit;
+    text-align: left;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-semibold);
+    line-height: 1.3;
+    background-color: transparent;
+    color: var(--color-neutral-900);
+    transition: color var(--transition-duration-normal) var(--transition-easing-smooth);
   }
 
-  .bd-accordion-bg-header {
-    margin-bottom: var(--spacing-32);
+  .bd-accordion-bg-question[aria-expanded="true"] {
+    color: var(--color-blue-500);
+  }
+
+  .bd-accordion-bg-question[aria-expanded="false"] {
+    color: var(--color-neutral-900);
   }
 
   .bd-accordion-bg-question:hover {
-    color: #0073e6;
+    color: var(--color-blue-600);
   }
 
-  .bd-accordion-bg-item:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
+  .bd-accordion-bg-question:hover .bd-accordion-bg-question-text {
+    text-decoration-line: none;
   }
 
-  .bd-accordion-bg-item:focus {
-    .bd-accordion-bg-question-text {
-      font-weight: 600;
-      text-decoration-line: underline;
-      color: var(--color-blue-600);
-      text-decoration-thickness: var(--spacing-2);
-    }
+  .bd-accordion-bg-question:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .bd-accordion-bg-header {
+    margin-bottom: var(--spacing-32);
   }
 
   .bd-accordion-bg-question-text {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
   }
 
   .bd-accordion-bg-title {
@@ -76,56 +121,57 @@ export default css`
   }
 
   .bd-accordion-bg-icon {
-    transition: transform 0.3s ease;
-    width: var(--spacing-14);
-    height: var(--spacing-14);
-    color: var(--color-blue-500);
-    text-align: center;
-    position: relative;
-    bottom: 1px;
-  }
-
-  .bd-accordion-bg-icon {
-    transition: transform 0.3s ease;
-    width: var(--spacing-14);
-    height: var(--spacing-14);
-    color: var(--color-blue-500);
-    text-align: center;
-    position: relative;
-  }
-
-  .bd-accordion-bg-item:not(.open) .bd-accordion-bg-icon {
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="6" width="2" height="14" fill="%23006DFF"/><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+    width: var(--icon-sm-size);
+    height: var(--icon-sm-size);
+    min-width: var(--icon-sm-size);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    user-select: none;
+    /* Match question line-height (1.3) — icon aligns to first line when title wraps */
+    margin-top: calc((1.3 * 1em - var(--icon-sm-size)) / 2);
   }
 
-  .bd-accordion-bg-item.open .bd-accordion-bg-icon {
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+  .bd-accordion-bg-icon img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 
+  /* Panel: Figma 244:943 — padding 0, 0, 12px, 28px (icon 16 + gap 12) */
   .bd-accordion-bg-answer {
     overflow: hidden;
     max-height: 0;
     opacity: 0;
-    padding: 0 var(--spacing-16);
-    background-color: var(--color-blue-50);
+    padding: var(--spacing-0) var(--spacing-0) var(--spacing-0)
+      calc(var(--icon-sm-size) + var(--spacing-12));
+    background-color: transparent;
     font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--font-weight-sans-medium);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-normal);
+    line-height: var(--typography-lineHeight-normal);
+    color: var(--color-neutral-700);
     transition: none;
-    padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
+  }
 
+  .bd-accordion-bg-answer[hidden] {
+    display: none !important;
   }
-.bd-accordion-bg-answer {
-  display: none;
-}
-.bd-accordion-bg-item.open .bd-accordion-bg-answer {
-  display: block;
-}
+
   .bd-accordion-bg-item.open .bd-accordion-bg-answer {
+    display: block;
     max-height: 5000px;
     opacity: 1;
-    padding-bottom: var(--spacing-16);
-        padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
+    padding: var(--spacing-0) var(--spacing-0) var(--spacing-12)
+      calc(var(--icon-sm-size) + var(--spacing-12));
+  }
 
+  /* Slotted <p> default margins read as extra “padding” in devtools; spec has no panel padding-top */
+  ::slotted(p) {
+    margin: var(--spacing-0);
   }
 
   .bd-accordion-bg-answer > div {
@@ -139,18 +185,6 @@ export default css`
     padding-bottom: var(--spacing-64);
   }
 
-  .bd-accordion-bg-link-noline {
-    text-decoration: none;
-  }
-
-  .test-accordion {
-    background-color: blue;
-  }
-
-  .test-accordion p {
-    font-size: 20px;
-  }
-
   .bd-accordion-bg-container.no-bg {
     background: none;
   }
@@ -169,7 +203,6 @@ export default css`
     padding: 0 var(--spacing-40);
   }
 
-  /* REGULĂ NOUĂ PENTRU NO-BG DESCHIS */
   .bd-accordion-bg-item.no-bg.open .bd-accordion-bg-answer {
     padding: var(--spacing-16) var(--spacing-40);
   }
@@ -178,21 +211,7 @@ export default css`
     background-color: transparent;
   }
 
-  .bd-accordion-bg-item.no-bg:hover .bd-accordion-bg-question-text {
+  .bd-accordion-bg-item.no-bg .bd-accordion-bg-question:hover .bd-accordion-bg-question-text {
     text-decoration-line: none;
   }
-
-  .bd-accordion-bg-item:hover .bd-accordion-bg-question-text {
-    text-decoration-line: none;
-  }
-  
-  .bd-accordion-bg-item:focus .bd-accordion-bg-question-text {
-    text-decoration-line: none;
-  }
-  
-  .bd-accordion-bg-item.no-bg:focus .bd-accordion-bg-question-text {
-    text-decoration-line: none;
-  }
-}
-
 `;

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

@@ -1,11 +1,15 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import accordionCSS from "./accordion-bg.css";
+import accordionCSS from "./accordion-bg.css.js";
+import {
+  ACCORDION_ICON_MINUS,
+  ACCORDION_ICON_PLUS
+} from "./accordion-indicators.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
     title: { type: String },
-    noBg : { type: Boolean, attribute: 'no-bg' }
+    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
   };
 
   constructor() {
@@ -17,7 +21,7 @@ class BdAccordionBg extends LitElement {
 
   render() {
     return html`
-      <div class="bd-accordion-bg-container ${this.noBg ? 'no-bg' : ''}">
+      <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}">
         <div class="bd-accordion-bg-header">
           <h1 class="bd-accordion-bg-title">${this.title}</h1>
         </div>
@@ -29,10 +33,9 @@ class BdAccordionBg extends LitElement {
 
 class BdAccordionBgItem extends LitElement {
   static properties = {
-    title       : { type: String },
-    open        : { type: Boolean, reflect: true },
-    noBg        : { type: Boolean, attribute: 'no-bg' },
-    _accordionId: { type: String, state: true }
+    title: { type: String },
+    open : { type: Boolean, reflect: true },
+    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
   };
 
   constructor() {
@@ -40,15 +43,12 @@ class BdAccordionBgItem extends LitElement {
     this.title = "";
     this.open = false;
     this.noBg = false;
-    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)}`;
-    }
+    const id = Math.random().toString(36)
+      .slice(2, 11);
+    /** @type {string} */
+    this._headerId = `acc-bg-h-${id}`;
+    /** @type {string} */
+    this._panelId = `acc-bg-p-${id}`;
   }
 
   static styles = [tokens, accordionCSS];
@@ -57,43 +57,55 @@ class BdAccordionBgItem extends LitElement {
     this.open = !this.open;
   }
 
-  handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.toggleItem();
-    }
+  _onTriggerFocusIn() {
+    const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question");
+    if (!btn) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (btn.matches(":focus-visible")) {
+          this.setAttribute("data-bd-acc-focus", "");
+        }
+      });
+    });
   }
 
-  /**
-   * @param {Event} e
-   */
-  #onSlot(e) {
-    const slot = e.currentTarget;
-    slot.classList.add('accordion-test');
+  _onTriggerFocusOut() {
+    this.removeAttribute("data-bd-acc-focus");
   }
 
   render() {
     return html`
       <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? 'no-bg' : ''}"
-        role="button"
-        aria-expanded="${this.open}"
-        aria-controls="${this._accordionId}"
-        tabindex="0"
-        @click=${this.toggleItem}
-        @keydown=${this.handleKeyDown}
+        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}"
       >
-        <div class="bd-accordion-bg-question">
-          <div class="bd-accordion-bg-icon"></div>
+        <button
+          type="button"
+          id="${this._headerId}"
+          class="bd-accordion-bg-question"
+          aria-expanded="${this.open}"
+          aria-controls="${this._panelId}"
+          @click=${this.toggleItem}
+          @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-question-text">${this.title}</span>
-        </div>
+        </button>
         <div
-          id="${this._accordionId}"
+          id="${this._panelId}"
           class="bd-accordion-bg-answer"
           role="region"
-          aria-labelledby="${this._accordionId}"
+          aria-labelledby="${this._headerId}"
+          ?hidden=${!this.open}
         >
-          <slot @slotchange=${this.#onSlot}></slot>
+          <slot></slot>
         </div>
       </div>
     `;
@@ -101,4 +113,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);