@repobit/dex-system-design 0.23.37 → 0.23.39

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.39](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.38...@repobit/dex-system-design@0.23.39) (2026-05-27)
+
+### Bug Fixes
+
+* **DEX-1014:** update accordion background styles and logic
+
+
+## [0.23.38](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.37...@repobit/dex-system-design@0.23.38) (2026-05-26)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustment for accordion
+* **DEX-1014:** css adjustment for accordion margin
+
+
 ## [0.23.37](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.36...@repobit/dex-system-design@0.23.37) (2026-05-26)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.37",
+  "version": "0.23.39",
   "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.33",
-    "@repobit/dex-store-elements": "1.4.25",
+    "@repobit/dex-store": "1.3.35",
+    "@repobit/dex-store-elements": "1.4.27",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "5a292c3a335078319bff9151c88f8be3061c7146"
+  "gitHead": "de85da7811e34bd95e7873bf75dd612a54bfc4b1"
 }

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

@@ -30,7 +30,12 @@ export default css`
     z-index: 1;
     border-radius: var(--radius-sm);
   }
-
+.bd-accordion-bg-inner {
+  max-width: 1290px;
+  margin-inline: auto;
+  padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
+  box-sizing: border-box;
+}
   /* Focus ring pentru varianta terms-of-use — fara background deci ring simplu */
   :host(bd-accordion-bg-item[data-variant="terms-of-use"][data-bd-acc-focus]) {
     // box-shadow: var(--focus-outline-primary);

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

@@ -68,19 +68,22 @@ class BdAccordionBg extends LitElement {
 
   _renderFaq() {
     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-inner">
         <div class="bd-accordion-bg-header">
           <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
         <slot></slot>
         <slot name="footer"></slot>
       </div>
-    `;
+    </div>
+  `;
   }
 
   _renderTerms() {
     return html`
-      <div class="bd-accordion-section-container">
+    <div class="bd-accordion-section-container">
+      <div class="bd-accordion-section-inner">
         ${this.title
           ? html`<bd-h as="h6" paddingBottom="var(--spacing-32)" fontWeight="700" class="section-title">${this.title}</bd-h>`
           : ""}
@@ -98,7 +101,8 @@ class BdAccordionBg extends LitElement {
               </p>`
           : ""}
       </div>
-    `;
+    </div>
+  `;
   }
 
   render() {

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

@@ -55,7 +55,6 @@ export const accordionItem = css`
     --bd-acc-item-margin-bottom: var(--spacing-0);
   }
 
-  /* bd-list in slot — spacing intre list si ce urmeaza */
   ::slotted(bd-list) {
     --bd-li-margin-bottom: var(--spacing-16);
     display: block;
@@ -180,15 +179,31 @@ export const accordionItem = css`
 export const accordionSection = css`
   .bd-accordion-section-container {
     background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
-    padding: var(--bd-acc-section-padding, var(--spacing-32));
     border-radius: 0;
-    width: 100%;
+    box-sizing: border-box;
+
+    /* Bleed — bg full width */
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+
+    padding-top: var(--bd-acc-section-padding-v, var(--spacing-32));
+    padding-bottom: var(--bd-acc-section-padding-v, var(--spacing-32));
+    padding-left: calc(50vw - 50%);
+    padding-right: calc(50vw - 50%);
+  }
+
+  /* Inner — max-width 1290px, centrat, cu padding lateral ca anchor-nav */
+  .bd-accordion-section-inner {
+    max-width: 1290px;
+    margin-inline: auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
     box-sizing: border-box;
   }
 
   :host([variant="small"]) {
     --bd-acc-section-bg: var(--color-neutral-0);
-    --bd-acc-section-padding: var(--spacing-24) var(--spacing-16);
+    --bd-acc-section-padding-v: var(--spacing-24);
   }
 
   :host([variant="default-blue"]) {

package/src/components/accordion/accordion.js

@@ -17,8 +17,8 @@ export class BdAccordionItem extends LitElement {
 
   constructor() {
     super();
-    this.open = false;
-    this.title = "";
+    this.open     = false;
+    this.title    = "";
     this._panelId = `acc-panel-${Math.random().toString(36)
       .slice(2, 11)}`;
   }
@@ -77,17 +77,17 @@ export class BdAccordionSection extends LitElement {
     guideIcon  : { type: String, reflect: true, attribute: "guide-icon" },
     guideLabel : { type: String, reflect: true, attribute: "guide-label" },
     guideHref  : { type: String, reflect: true, attribute: "guide-href" },
-    noContainer: { type: Boolean, attribute: "no-container" } // ← ADĂUGĂ
+    noContainer: { type: Boolean, attribute: "no-container" }
   };
 
   constructor() {
     super();
-    this.title = "";
-    this.variant = "default";
-    this.guideIcon = "";
-    this.guideLabel = "";
-    this.guideHref = "#";
-    this.noContainer = false; // ← ADĂUGĂ
+    this.title       = "";
+    this.variant     = "default";
+    this.guideIcon   = "";
+    this.guideLabel  = "";
+    this.guideHref   = "#";
+    this.noContainer = false;
   }
 
   render() {
@@ -101,7 +101,7 @@ export class BdAccordionSection extends LitElement {
             <bd-p kind="small" class="user-guide-link">
               <a href=${this.guideHref}>
                 ${this.guideIcon
-                  ? html`<bd-plus-icon size="16" color="#006DFF"></bd-plus-icon>`
+                  ? html`<span class="icon"><img src=${this.guideIcon} alt="" /></span>`
                   : ""}
                 ${this.guideLabel}
               </a>
@@ -109,15 +109,15 @@ export class BdAccordionSection extends LitElement {
         : ""}
     `;
 
-    // Dacă nu vrei container, returnează direct contentul
     if (this.noContainer) {
       return content;
     }
 
-    // Altfel, înfășoară într-un div cu clasă pentru background
     return html`
       <div class="bd-accordion-section-container">
-        ${content}
+        <div class="bd-accordion-section-inner">
+          ${content}
+        </div>
       </div>
     `;
   }