@repobit/dex-system-design 0.23.31 → 0.23.33

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.33](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.32...@repobit/dex-system-design@0.23.33) (2026-05-21)
+
+### Bug Fixes
+
+* **DEX-1014:** refactor accordion and replace static SVG assets
+
+
+## [0.23.32](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.31...@repobit/dex-system-design@0.23.32) (2026-05-18)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustment for alignment - accordion
+
+
 ## [0.23.31](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.30...@repobit/dex-system-design@0.23.31) (2026-05-14)
 
 **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.31",
+  "version": "0.23.33",
   "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.27",
-    "@repobit/dex-store-elements": "1.4.19",
+    "@repobit/dex-store": "1.3.29",
+    "@repobit/dex-store-elements": "1.4.21",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "d19ae77c661138e6155e5ae7868663c85a294712"
+  "gitHead": "33f284d019667909f6437039a84f0301f485c95a"
 }

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

@@ -12,7 +12,7 @@ export default css`
 
   :host(bd-accordion-bg-item) {
     display: block;
-    margin-bottom: var(--spacing-12);
+    margin-bottom: var(--spacing-16);
     padding: 0 var(--spacing-16);
     box-sizing: border-box;
     background-color: var(--color-blue-50);
@@ -51,6 +51,13 @@ export default css`
     box-shadow: var(--focus-outline-primary);
   }
 
+  ::slotted(bd-p) {
+  padding-bottom: var(--spacing-16);
+}
+
+::slotted(bd-p:last-child) {
+  padding-bottom: 0;
+}
   .bd-accordion-bg-item {
     margin-bottom: 0;
     border-radius: 0;
@@ -67,7 +74,7 @@ export default css`
     align-items: flex-start;
     gap: var(--spacing-12);
     width: 100%;
-    padding: var(--spacing-12) 0;
+    padding: var(--spacing-16) 0;
     margin: 0;
     border: none;
     font: inherit;
@@ -165,7 +172,7 @@ export default css`
     display: block;
     max-height: 5000px;
     opacity: 1;
-    padding: var(--spacing-0) var(--spacing-0) var(--spacing-12)
+    padding: var(--spacing-0) var(--spacing-0) var(--spacing-16)
       calc(var(--icon-sm-size) + var(--spacing-12));
   }
 
@@ -179,10 +186,9 @@ export default css`
   }
 
   .bd-accordion-bg-container {
-    width: 90%;
+    // width: 100%;
     margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
+    padding: var(--spacing-64) var(--spacing-32) var(--spacing-64) var(--spacing-32)
   }
 
   .bd-accordion-bg-container.no-bg {

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

@@ -1,27 +1,56 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
+import "../paragraph/paragraph.js";
 import accordionCSS from "./accordion-bg.css.js";
+import { accordionItem, accordionSection } from "./accordion.css.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
-    title: { type: String },
-    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
+    title   : { type: String },
+    noBg    : { type: Boolean, reflect: true, attribute: "no-bg" },
+    _variant: { state: true }
   };
 
   constructor() {
     super();
-    this.noBg = false;
+    this.noBg     = false;
+    this._variant = "default";
   }
 
-  static styles = [tokens, accordionCSS];
+  static styles = [tokens, accordionCSS, accordionSection];
+
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(() => this._detectVariant());
+  }
+
+  _detectVariant() {
+    let el = this.parentElement;
+    while (el) {
+      if (el.classList.contains("faq")) {
+        this._variant = "faq";
+        return;
+      }
+      if (
+        el.classList.contains("terms-of-use") ||
+        el.classList.contains("system-requirements")
+      ) {
+        this._variant = "terms-of-use";
+        return;
+      }
+      el = el.parentElement;
+    }
+    this._variant = "default";
+  }
 
   render() {
     return html`
-      <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}">
+      <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}${this._variant}">
         <div class="bd-accordion-bg-header">
-          <h1 class="bd-accordion-bg-title">${this.title}</h1>
+          <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
         <slot></slot>
       </div>
@@ -31,32 +60,56 @@ class BdAccordionBg extends LitElement {
 
 class BdAccordionBgItem extends LitElement {
   static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true },
-    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
+    title   : { type: String },
+    open    : { type: Boolean, reflect: true },
+    noBg    : { type: Boolean, reflect: true, attribute: "no-bg" },
+    _variant: { state: true }
   };
 
   constructor() {
     super();
-    this.title = "";
-    this.open = false;
-    this.noBg = false;
-    const id = Math.random().toString(36)
+    this.title     = "";
+    this.open      = false;
+    this.noBg      = false;
+    this._variant  = "default";
+    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}`;
+    this._panelId  = `acc-bg-p-${id}`;
+  }
+
+  static styles = [tokens, accordionCSS, accordionItem];
+
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(() => this._detectVariant());
   }
 
-  static styles = [tokens, accordionCSS];
+  _detectVariant() {
+    let el = this.parentElement;
+    while (el) {
+      if (el.classList.contains("faq")) {
+        this._variant = "faq";
+        return;
+      }
+      if (
+        el.classList.contains("terms-of-use") ||
+        el.classList.contains("system-requirements")
+      ) {
+        this._variant = "terms-of-use";
+        return;
+      }
+      el = el.parentElement;
+    }
+    this._variant = "default";
+  }
 
   toggleItem() {
     this.open = !this.open;
   }
 
   _onTriggerFocusIn() {
-    const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question");
+    const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question, .header");
     if (!btn) return;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -71,11 +124,33 @@ class BdAccordionBgItem extends LitElement {
     this.removeAttribute("data-bd-acc-focus");
   }
 
-  render() {
+  _renderTerms() {
     return html`
-      <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}"
+      <button
+        type="button"
+        class="header"
+        aria-expanded="${this.open}"
+        aria-controls="${this._panelId}"
+        @click=${this.toggleItem}
+        @focusin=${this._onTriggerFocusIn}
+        @focusout=${this._onTriggerFocusOut}
       >
+        <span class="toggle" aria-hidden="true">
+          ${this.open
+            ? 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>
+      </button>
+      <div id="${this._panelId}" class="content" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  _renderDefault() {
+    return html`
+      <div class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}">
         <button
           type="button"
           id="${this._headerId}"
@@ -86,12 +161,11 @@ class BdAccordionBgItem extends LitElement {
           @focusin=${this._onTriggerFocusIn}
           @focusout=${this._onTriggerFocusOut}
         >
-<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-icon" aria-hidden="true">
+            ${this.open
+              ? 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="bd-accordion-bg-question-text">${this.title}</span>
         </button>
         <div
@@ -106,7 +180,13 @@ class BdAccordionBgItem extends LitElement {
       </div>
     `;
   }
+
+  render() {
+    return this._variant === "terms-of-use"
+      ? this._renderTerms()
+      : this._renderDefault();
+  }
 }
 
 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

@@ -1,4 +1,9 @@
 import { html } from "lit";
+import "../accordion/accordion.js";
+import "../divider/divider-horizontal.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
 import "./accordion-bg.js";
 
 export default {
@@ -16,9 +21,6 @@ Two Lit web components for building FAQ-style accordion sections with an optiona
   <bd-accordion-bg-item title="What is Bitdefender?">
     <p>Bitdefender is a global cybersecurity leader...</p>
   </bd-accordion-bg-item>
-  <bd-accordion-bg-item title="How do I renew my subscription?">
-    <p>Log in to Bitdefender Central and go to My Subscriptions...</p>
-  </bd-accordion-bg-item>
 </bd-accordion-bg>
 \`\`\`
 
@@ -43,6 +45,124 @@ Two Lit web components for building FAQ-style accordion sections with an optiona
 };
 
 
+// ─── Toate 3 variantele pe aceeasi pagina ─────────────────────────────────────
+
+export const AllVariants = {
+  name  : "FAQ + Terms of Use + System Requirements",
+  render: () => html`
+
+    <!-- FAQ -->
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
+        <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
+          <bd-p kind="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Firewall protection for network security</bd-p></bd-li>
+          </bd-list>
+          <bd-p kind="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
+          <bd-p kind="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection with:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Multi-layer ransomware protection</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Behavioral detection to stop unknown threats</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Safe Files feature to protect your important documents</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time monitoring of file encryption attempts</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
+          <bd-p kind="small">Bitdefender Internet Security includes a basic VPN with 200MB per day. Additional features include:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">200MB daily VPN traffic for secure browsing</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Automatic activation on unsecured Wi-Fi networks</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Banking encryption for financial transactions</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Option to upgrade to unlimited VPN</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="What devices are supported?">
+          <bd-p kind="small">Bitdefender Internet Security supports a wide range of devices:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Windows 10, 11 (32-bit and 64-bit)</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">macOS 10.12 or later</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Android 5.0 or later</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">iOS 12 or later</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="System requirements">
+          <bd-p kind="small">Minimum system requirements for optimal performance:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">1GB RAM minimum (2GB recommended)</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">2.5GB available hard disk space</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Internet connection for activation and updates</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Intel Core 2 Duo processor or equivalent</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+      </bd-accordion-bg>
+    </div>
+
+    <!-- Terms of Use -->
+    <div class="accordion terms-of-use block">
+      <bd-accordion-section title="Terms of use">
+        <bd-accordion-item title="Auto renewal terms" open>
+          <bd-p kind="small">Your subscription automatically begins at the purchase date;</bd-p>
+          <bd-p kind="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
+          <bd-p kind="small">The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk by extending your subscription automatically before you run out of protection.</bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Here is what the Bitdefender Auto Renewal Plan means for you">
+          <bd-p kind="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Affirmative consent">
+          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="How to cancel + email address cancelation support">
+          <bd-p kind="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
+        </bd-accordion-item>
+      </bd-accordion-section>
+    </div>
+
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+
+    <!-- System Requirements -->
+    <div class="accordion system-requirements block">
+      <bd-accordion-section title="System Requirements" guide-icon="src/assets/user_guide.png" guide-label="User guide >" guide-href="#">
+        <bd-accordion-item title="Bitdefender Parental Control" open>
+          <bd-p kind="small">
+            <strong>Windows™ Operating Systems</strong><br />
+            Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.
+          </bd-p>
+          <bd-p kind="small">
+            <strong>Mac® Operating Systems</strong><br />
+            macOS X Yosemite (10.10) or later
+          </bd-p>
+          <bd-p kind="small">
+            <strong>Android™ Operating Systems</strong><br />
+            Android 5.0 or later
+          </bd-p>
+          <bd-p kind="small">
+            <strong>iOS Operating Systems</strong><br />
+            Android 5.0 or later
+          </bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Bitdefender Central">
+          <bd-p kind="small">Bitdefender Central</bd-p>
+        </bd-accordion-item>
+      </bd-accordion-section>
+    </div>
+  `
+};
+
+
 // ─── Default ─────────────────────────────────────────────────────────────────
 
 export const Default = {

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

@@ -8,7 +8,7 @@ import { css } from "lit";
 export const accordionItem = css`
   :host {
     display: block;
-    margin-bottom: var(--bd-acc-item-margin-bottom, var(--spacing-8));
+    margin-bottom: var(--bd-acc-item-margin-bottom, var(--spacing-16));
     box-sizing: border-box;
     border-radius: var(--radius-sm);
   }
@@ -80,7 +80,7 @@ export const accordionItem = css`
       var(--typography-fontWeight-semibold)
     );
     line-height: var(--bd-acc-title-line-height, var(--typography-lineHeight-normal));
-    margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-8));
+    margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
   }
 
   .header:focus-visible {
@@ -89,11 +89,11 @@ export const accordionItem = css`
   }
 
   .header[aria-expanded="true"] .title {
-    color: var(--bd-acc-title-color-expanded, var(--color-neutral-900));
+    color: var(--color-blue-500);
   }
 
   .header[aria-expanded="false"] .title {
-    color: var(--bd-acc-title-color-collapsed, var(--color-neutral-900));
+    color: var(--color-blue-500);
   }
 
   :host-context(bd-accordion-section[variant="small"])
@@ -175,7 +175,12 @@ export const accordionItem = css`
   .content[hidden] {
     display: none !important;
   }
-
+  ::slotted(bd-p) {
+    padding-bottom: var(--spacing-16);
+  }
+  ::slotted(bd-p:last-child) {
+    padding-bottom: 0px;
+  }
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: var(--bd-acc-panel-paragraph-gap, var(--spacing-16));
@@ -192,11 +197,16 @@ export const accordionItem = css`
 `;
 
 export const accordionSection = css`
-  :host {
-    display: block;
+  // :host {
+  //   display: block;
+  //   background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
+  //   padding: var(--bd-acc-section-padding, var(--spacing-32));
+  //   box-sizing: border-box;
+  // }
+  .bd-accordion-section-container {
     background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
     padding: var(--bd-acc-section-padding, var(--spacing-32));
-    box-sizing: border-box;
+    border-radius: var(--bd-acc-section-radius, var(--radius-lg));
   }
 
   :host([variant="small"]) {
@@ -220,7 +230,7 @@ export const accordionSection = css`
     font-weight: var(--typography-fontWeight-bold);
     font-size: var(--typography-body-regular-fontSize);
     line-height: var(--typography-lineHeight-normal);
-    color: var(--color-neutral-900);
+    color: var(--color-neutral-1000);
   }
 
   :host([variant="small"]) .section-title {
@@ -229,19 +239,19 @@ export const accordionSection = css`
   }
 
   .user-guide-link {
-    margin-top: var(--spacing-16);
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-xs);
+    margin-top: var(--spacing-32);
     color: var(--color-blue-600);
-    margin-left: var(--spacing-8);
   }
 
   .user-guide-link a {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
-    color: inherit;
-    gap: var(--spacing-6);
+    color: var(--color-blue-500);
+    gap: var(--spacing-12);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: var(--typography-fontSize-xs);
+
   }
 
   .user-guide-link a:focus-visible {

package/src/components/accordion/accordion.js

@@ -1,7 +1,9 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
+import "../paragraph/paragraph.js";
 import { accordionItem, accordionSection } from "./accordion.css.js";
 
 export class BdAccordionItem extends LitElement {
@@ -52,12 +54,11 @@ export class BdAccordionItem extends LitElement {
         @focusin=${this._onTriggerFocusIn}
         @focusout=${this._onTriggerFocusOut}
       >
-<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="toggle" aria-hidden="true">
+          ${this.open
+            ? 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>
       </button>
       <div id="${this._panelId}" class="content" ?hidden=${!this.open}>
@@ -71,16 +72,12 @@ export class BdAccordionSection extends LitElement {
   static styles = [tokens, accordionSection];
 
   static properties = {
-    title     : { type: String },
-    /**
-     * `small` — system requirements, terms (12px triggers, compact panels; Figma accordeon_small).
-     * `default` — neutral-25 section background.
-     * `default-blue` — same accordion as default, section bg `--color-blue-50`.
-     */
-    variant   : { type: String, reflect: true },
-    guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
-    guideLabel: { type: String, reflect: true, attribute: "guide-label" },
-    guideHref : { type: String, reflect: true, attribute: "guide-href" }
+    title      : { type: String },
+    variant    : { type: String, reflect: true },
+    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Ă
   };
 
   constructor() {
@@ -90,29 +87,41 @@ export class BdAccordionSection extends LitElement {
     this.guideIcon = "";
     this.guideLabel = "";
     this.guideHref = "#";
+    this.noContainer = false; // ← ADĂUGĂ
   }
 
   render() {
-    return html`
+    const content = html`
       ${this.title
-        ? html`<h2 class="section-title">${this.title}</h2>`
+        ? html`<bd-h as="h6" fontWeight="700" paddingBottom="var(--spacing-32)" class="section-title">${this.title}</bd-h>`
         : ""}
       <slot></slot>
       ${this.guideLabel
-        ? html`<p class="user-guide-link">
-            <a href=${this.guideHref}>
-              ${this.guideIcon
-                ? html`<span class="icon"
-                    ><img src=${this.guideIcon} alt="" /></span
-                  >`
-                : ""}
-              ${this.guideLabel}
-            </a>
-          </p>`
+        ? html`
+            <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>`
+                  : ""}
+                ${this.guideLabel}
+              </a>
+            </bd-p>`
         : ""}
     `;
+
+    // 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>
+    `;
   }
 }
 
 customElements.define("bd-accordion-item", BdAccordionItem);
-customElements.define("bd-accordion-section", BdAccordionSection);
+customElements.define("bd-accordion-section", BdAccordionSection);

package/src/components/awards/awards-icon.js

@@ -1,13 +1,13 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 
 /**
  * Optional `src` (image URL) with `label` for alt text, or default slot for inline SVG.
  */
 class BdIcon extends LitElement {
   static properties = {
-    src: { type: String },
-    label: { type: String },
-    width: { type: String },
+    src   : { type: String },
+    label : { type: String },
+    width : { type: String },
     height: { type: String }
   };