@repobit/dex-system-design 0.23.35 → 0.23.37

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.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
+
+* **DEX-1014:** css adjustment for accesibility
+
+
+## [0.23.36](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.35...@repobit/dex-system-design@0.23.36) (2026-05-25)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustment for accordion
+* **DEX-1014:** css adjustment for accordion
+
+
 ## [0.23.35](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.34...@repobit/dex-system-design@0.23.35) (2026-05-22)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.35",
+  "version": "0.23.37",
   "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.31",
-    "@repobit/dex-store-elements": "1.4.23",
+    "@repobit/dex-store": "1.3.33",
+    "@repobit/dex-store-elements": "1.4.25",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "971237d99eff6de126807690b731697bb07c017c"
+  "gitHead": "5a292c3a335078319bff9151c88f8be3061c7146"
 }

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

@@ -1,20 +1,16 @@
 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`
   :host {
     --bd-accesibility-focus: var(--color-blue-500);
     display: block;
   }
-:host(bd-accordion-bg-item[data-variant="terms-of-use"]) {
-  background-color: transparent !important;
-  padding: 0;
-  border-radius: 0;
-}
 
+  :host(bd-accordion-bg-item[data-variant="terms-of-use"]) {
+    background-color: transparent !important;
+    padding: 0;
+    border-radius: 0;
+  }
 
   :host(bd-accordion-bg-item) {
     display: block;
@@ -23,17 +19,22 @@ export default css`
     box-sizing: border-box;
     background-color: var(--color-blue-50);
     border-radius: var(--radius-lg);
-    /* visible so focus ring is not clipped; panel animates with its own overflow */
     overflow: visible;
   }
 
   :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;
+    border-radius: var(--radius-sm);
+  }
+
+  /* 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);
+    border-radius: var(--radius-sm);
   }
 
   :host(bd-accordion-bg-item:last-of-type) {
@@ -58,12 +59,30 @@ export default css`
   }
 
   ::slotted(bd-p) {
-  padding-bottom: var(--spacing-16);
-}
+    padding-bottom: var(--spacing-16);
+  }
+
+  ::slotted(bd-p:last-child) {
+    padding-bottom: 0;
+  }
+
+  ::slotted(bd-list) {
+    --bd-li-margin-bottom: var(--spacing-16);
+    display: block;
+    margin-bottom: var(--spacing-16);
+  }
+
+  ::slotted(bd-list:last-child) {
+    margin-bottom: 0;
+  }
+
+  /* Footer slot — italic, spacing deasupra */
+  ::slotted([slot="footer"]) {
+    display: block;
+    padding-top: var(--spacing-16);
+    font-style: italic;
+  }
 
-::slotted(bd-p:last-child) {
-  padding-bottom: 0;
-}
   .bd-accordion-bg-item {
     margin-bottom: 0;
     border-radius: 0;
@@ -143,7 +162,6 @@ export default css`
     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);
   }
 
@@ -154,7 +172,6 @@ export default css`
     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;
@@ -182,7 +199,6 @@ export default css`
       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);
   }
@@ -192,9 +208,7 @@ export default css`
   }
 
   .bd-accordion-bg-container {
-    // width: 100%;
     margin: auto;
-    // padding: var(--spacing-0) var(--spacing-32) var(--spacing-0) var(--spacing-32)
   }
 
   .bd-accordion-bg-container.no-bg {
@@ -226,4 +240,4 @@ export default css`
   .bd-accordion-bg-item.no-bg .bd-accordion-bg-question:hover .bd-accordion-bg-question-text {
     text-decoration-line: none;
   }
-`;
+`;

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

@@ -16,13 +16,13 @@ class BdAccordionBg extends LitElement {
     guideHref : { type: String, reflect: true, attribute: "guide-href" },
     _variant  : { state: true },
     variant   : { type: String, reflect: true, attribute: "data-variant" }
-  }
+  };
 
   constructor() {
     super();
-    this.noBg      = false;
-    this._variant  = "default";
-    this.variant   = "default";
+    this.noBg       = false;
+    this._variant   = "default";
+    this.variant    = "default";
     this.guideIcon  = "";
     this.guideLabel = "";
     this.guideHref  = "#";
@@ -35,8 +35,6 @@ class BdAccordionBg extends LitElement {
     Promise.resolve().then(() => this._detectVariant());
   }
 
-  // În BdAccordionBg, înlocuiește _detectVariant și adaugă firstUpdated:
-
   _detectVariant() {
     let el = this.parentElement;
     while (el) {
@@ -48,7 +46,7 @@ class BdAccordionBg extends LitElement {
       }
       if (
         el.classList.contains("terms-of-use") ||
-      el.classList.contains("system-requirements")
+        el.classList.contains("system-requirements")
       ) {
         this._variant = "terms-of-use";
         this.variant  = "terms-of-use";
@@ -63,7 +61,6 @@ class BdAccordionBg extends LitElement {
   }
 
   _propagateVariant(variant) {
-  // Setam data-variant pe toti copiii slotted bd-accordion-bg-item
     this.querySelectorAll("bd-accordion-bg-item").forEach(item => {
       item.setAttribute("data-variant", variant);
     });
@@ -76,6 +73,7 @@ class BdAccordionBg extends LitElement {
           <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
         <slot></slot>
+        <slot name="footer"></slot>
       </div>
     `;
   }
@@ -84,9 +82,10 @@ class BdAccordionBg extends LitElement {
     return html`
       <div class="bd-accordion-section-container">
         ${this.title
-          ? html`<bd-h as="h6" paddingBottom=var(--spacing-32) fontWeight="700" class="section-title">${this.title}</bd-h>`
+          ? html`<bd-h as="h6" paddingBottom="var(--spacing-32)" fontWeight="700" class="section-title">${this.title}</bd-h>`
           : ""}
         <slot></slot>
+        <slot name="footer"></slot>
         ${this.guideLabel
           ? html`
               <p class="user-guide-link">
@@ -114,7 +113,8 @@ class BdAccordionBgItem extends LitElement {
     title   : { type: String },
     open    : { type: Boolean, reflect: true },
     noBg    : { type: Boolean, reflect: true, attribute: "no-bg" },
-    _variant: { state: true }
+    _variant: { state: true },
+    variant : { type: String, reflect: true, attribute: "data-variant" }
   };
 
   constructor() {
@@ -123,6 +123,7 @@ class BdAccordionBgItem extends LitElement {
     this.open      = false;
     this.noBg      = false;
     this._variant  = "default";
+    this.variant   = "default";
     const id       = Math.random().toString(36)
       .slice(2, 11);
     this._headerId = `acc-bg-h-${id}`;
@@ -141,6 +142,7 @@ class BdAccordionBgItem extends LitElement {
     while (el) {
       if (el.classList.contains("faq")) {
         this._variant = "faq";
+        this.variant  = "faq";
         return;
       }
       if (
@@ -148,11 +150,13 @@ class BdAccordionBgItem extends LitElement {
         el.classList.contains("system-requirements")
       ) {
         this._variant = "terms-of-use";
+        this.variant  = "terms-of-use";
         return;
       }
       el = el.parentElement;
     }
     this._variant = "default";
+    this.variant  = "default";
   }
 
   toggleItem() {
@@ -175,7 +179,6 @@ class BdAccordionBgItem extends LitElement {
     this.removeAttribute("data-bd-acc-focus");
   }
 
-  // Design bd-accordion — pentru terms-of-use si system-requirements
   _renderTerms() {
     return html`
       <button
@@ -200,7 +203,6 @@ class BdAccordionBgItem extends LitElement {
     `;
   }
 
-  // Design bd-accordion-bg — pentru faq (default)
   _renderDefault() {
     return html`
       <div class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}">

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

@@ -1,5 +1,4 @@
 import { html } from "lit";
-import "../accordion/accordion.js";
 import "../divider/divider-horizontal.js";
 import "../list/list-item/list-item.js";
 import "../list/list.js";
@@ -14,46 +13,72 @@ export default {
     docs  : {
       description: {
         component: `
-Two Lit web components for building FAQ-style accordion sections with an optional card background.
+Componentă Lit pentru secțiuni accordion cu două variante de design detectate automat din clasa părintelui DOM.
 
 \`\`\`html
-<bd-accordion-bg title="Frequently Asked Questions">
-  <bd-accordion-bg-item title="What is Bitdefender?">
-    <p>Bitdefender is a global cybersecurity leader...</p>
-  </bd-accordion-bg-item>
-</bd-accordion-bg>
+<!-- FAQ (design cu background albastru) -->
+<div class="accordion faq block">
+  <bd-accordion-bg title="Questions? Answers.">
+    <bd-accordion-bg-item title="What is Bitdefender?">
+      <bd-p kind="small">Answer here...</bd-p>
+    </bd-accordion-bg-item>
+    <bd-p slot="footer" kind="small">* Footer note</bd-p>
+  </bd-accordion-bg>
+</div>
+
+<!-- Terms of Use / System Requirements (design simplu, fără background) -->
+<div class="accordion terms-of-use block">
+  <bd-accordion-bg title="Terms of use">
+    <bd-accordion-bg-item title="Auto renewal terms" open>
+      <bd-p kind="small">Your subscription...</bd-p>
+    </bd-accordion-bg-item>
+    <bd-p slot="footer" kind="small">* Terms apply</bd-p>
+  </bd-accordion-bg>
+</div>
 \`\`\`
 
-### Attributes
-
-#### \`bd-accordion-bg\`
-| Attribute | Type    | Default | Description                                               |
-|-----------|---------|---------|-----------------------------------------------------------|
-| \`title\`   | String  | —       | Heading rendered inside the container header              |
-| \`no-bg\`   | Boolean | \`false\`| Removes the card background from the container            |
-
-#### \`bd-accordion-bg-item\`
-| Attribute | Type    | Default  | Description                                              |
-|-----------|---------|----------|----------------------------------------------------------|
-| \`title\`   | String  | —        | Question / trigger label                                 |
-| \`open\`    | Boolean | \`false\` | Whether the answer panel is expanded                    |
-| \`no-bg\`   | Boolean | \`false\` | Removes the card background from this individual item   |
+### Detectare automată variantă
+Componenta urcă în DOM și detectează clasa părintelui:
+| Clasă părinte | Variantă | Design |
+|---|---|---|
+| \`faq\` | faq | Badge-uri albastre, background \`color-blue-50\` |
+| \`terms-of-use\` | terms-of-use | Design simplu, fără background |
+| \`system-requirements\` | terms-of-use | Design simplu, fără background |
+
+### Atribute \`bd-accordion-bg\`
+| Atribut | Tip | Default | Descriere |
+|---|---|---|---|
+| \`title\` | String | — | Titlul secțiunii |
+| \`no-bg\` | Boolean | \`false\` | Elimină background-ul containerului |
+| \`guide-icon\` | String | — | Cale icon pentru link-ul ghid (doar terms-of-use) |
+| \`guide-label\` | String | — | Text link ghid (doar terms-of-use) |
+| \`guide-href\` | String | \`#\` | URL link ghid (doar terms-of-use) |
+
+### Atribute \`bd-accordion-bg-item\`
+| Atribut | Tip | Default | Descriere |
+|---|---|---|---|
+| \`title\` | String | — | Titlul întrebării |
+| \`open\` | Boolean | \`false\` | Item deschis implicit |
+| \`no-bg\` | Boolean | \`false\` | Elimină background-ul item-ului |
+
+### Slot \`footer\`
+Ambele variante suportă un slot \`footer\` pentru text italic după toate item-urile:
+\`\`\`html
+<bd-p slot="footer" kind="small">* Notă de subsol</bd-p>
+\`\`\`
         `
       }
     }
   }
 };
 
+// ─── FAQ — Default ────────────────────────────────────────────────────────────
 
-// ─── Toate 3 variantele pe aceeasi pagina ─────────────────────────────────────
-
-export const AllVariants = {
-  name  : "FAQ + Terms of Use + System Requirements",
+export const FaqDefault = {
+  name  : "FAQ — Default",
   render: () => html`
-
-    <!-- FAQ -->
     <div class="accordion faq block">
-      <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
+      <bd-accordion-bg title="Questions? Answers.">
         <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">
@@ -76,248 +101,200 @@ export const AllVariants = {
         </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-p kind="small">Bitdefender Internet Security includes a basic VPN with 200MB per day.</bd-p>
         </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>
   `
 };
 
+// ─── FAQ — Cu footer ─────────────────────────────────────────────────────────
 
-// ─── Default ─────────────────────────────────────────────────────────────────
-
-export const Default = {
-  name  : "Default",
+export const FaqWithFooter = {
+  name  : "FAQ — Cu footer",
   render: () => html`
-    <bd-accordion-bg title="Frequently Asked Questions">
-      <bd-accordion-bg-item title="What is Bitdefender Total Security?">
-        <p>Bitdefender Total Security offers award-winning protection against viruses, malware, ransomware, and zero-day exploits across all your devices.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="How many devices does my plan cover?">
-        <p>Depending on your subscription, you can protect between 1 and 10 devices. Multi-device plans cover any combination of Windows, macOS, Android, and iOS.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Does Bitdefender affect system performance?">
-        <p>Bitdefender is consistently rated best-in-class for performance impact by independent labs such as AV-TEST and AV-Comparatives.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Questions? Answers.">
+        <bd-accordion-bg-item title="How does Bitdefender protect me?">
+          <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="Does it work on Mac?">
+          <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-p slot="footer" kind="small">* Prices include VAT. Terms and conditions apply.</bd-p>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── FAQ — Item deschis implicit ─────────────────────────────────────────────
 
-// ─── One item open by default ─────────────────────────────────────────────────
-
-export const OpenByDefault = {
-  name  : "Item open by default",
+export const FaqOpenByDefault = {
+  name  : "FAQ — Item deschis implicit",
   render: () => html`
-    <bd-accordion-bg title="Getting Started">
-      <bd-accordion-bg-item title="How do I install Bitdefender?" open>
-        <p>Download the installer from your Bitdefender Central account, run it, and follow the on-screen steps. Installation typically completes in under two minutes.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Do I need to remove my old antivirus first?">
-        <p>Yes. Bitdefender will detect any existing security software and guide you through removing it before completing the installation.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Where do I enter my activation code?">
-        <p>Log in to Bitdefender Central at central.bitdefender.com, click My Subscriptions, then Add code and enter your activation key.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Getting Started">
+        <bd-accordion-bg-item title="How do I install Bitdefender?" open>
+          <bd-p kind="small">Download the installer from your Bitdefender Central account and follow the on-screen steps.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="Do I need to remove my old antivirus first?">
+          <bd-p kind="small">Yes. Bitdefender will detect any existing security software and guide you through removing it.</bd-p>
+        </bd-accordion-bg-item>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── FAQ — Fără background items ─────────────────────────────────────────────
 
-// ─── No background on container ───────────────────────────────────────────────
-
-export const NoBgContainer = {
-  name  : "No background — container",
+export const FaqNoBgItems = {
+  name  : "FAQ — Fără background items",
   render: () => html`
-    <bd-accordion-bg title="Frequently Asked Questions" no-bg>
-      <bd-accordion-bg-item title="What payment methods are accepted?">
-        <p>We accept Visa, Mastercard, American Express, PayPal, and bank transfers. Available methods may vary by country.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Can I get a refund?">
-        <p>Bitdefender offers a 30-day money-back guarantee on all new subscriptions. Renewals are not eligible for refunds after the grace period.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Is auto-renewal enabled by default?">
-        <p>Yes. You can disable auto-renewal at any time from the My Subscriptions section of Bitdefender Central.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Product Features">
+        <bd-accordion-bg-item title="What is Bitdefender VPN?" no-bg>
+          <bd-p kind="small">Bitdefender VPN encrypts your internet connection and masks your IP address.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="What is Anti-Tracker?" no-bg>
+          <bd-p kind="small">Anti-Tracker blocks advertising trackers and analytics scripts.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="What is Bitdefender Photon™?" no-bg>
+          <bd-p kind="small">Photon is Bitdefender's adaptive scanning technology.</bd-p>
+        </bd-accordion-bg-item>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── Terms of Use ─────────────────────────────────────────────────────────────
 
-// ─── No background on items ───────────────────────────────────────────────────
-
-export const NoBgItems = {
-  name  : "No background — items",
+export const TermsOfUse = {
+  name  : "Terms of Use",
   render: () => html`
-    <bd-accordion-bg title="Product Features">
-      <bd-accordion-bg-item title="What is Bitdefender VPN?" no-bg>
-        <p>Bitdefender VPN encrypts your internet connection and masks your IP address, giving you privacy on public Wi-Fi and preventing online tracking.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is Anti-Tracker?" no-bg>
-        <p>Anti-Tracker blocks advertising trackers, analytics scripts, and social media pixels that follow you across the web without your consent.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is Bitdefender Photon™?" no-bg>
-        <p>Photon is Bitdefender's adaptive scanning technology that learns your hardware and software configuration to optimize performance over time.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion terms-of-use block">
+      <bd-accordion-bg title="Terms of use">
+        <bd-accordion-bg-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 and effort.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-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-bg-item>
+        <bd-accordion-bg-item title="Affirmative consent">
+          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-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-bg-item>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── Terms of Use — Cu footer ─────────────────────────────────────────────────
 
-// ─── No background on both ────────────────────────────────────────────────────
-
-export const NoBgBoth = {
-  name  : "No background — container + items",
+export const TermsOfUseWithFooter = {
+  name  : "Terms of Use — Cu footer",
   render: () => html`
-    <bd-accordion-bg title="Compatibility" no-bg>
-      <bd-accordion-bg-item title="Is Bitdefender compatible with Windows 11?" no-bg>
-        <p>Yes. Bitdefender fully supports Windows 11, including features such as Secure Boot and TPM 2.0.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Does it work on Apple Silicon Macs?" no-bg>
-        <p>Yes. Bitdefender for Mac runs natively on Apple Silicon (M1, M2, M3) as well as Intel-based Macs.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Can I use it on Chromebooks?" no-bg>
-        <p>Bitdefender for Android can be installed via Google Play on Chromebooks that support Android apps.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion terms-of-use block">
+      <bd-accordion-bg title="Terms of use">
+        <bd-accordion-bg-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-accordion-bg-item>
+        <bd-accordion-bg-item title="Affirmative consent">
+          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+        </bd-accordion-bg-item>
+        <bd-p slot="footer" kind="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── System Requirements ──────────────────────────────────────────────────────
 
-// ─── No container title ───────────────────────────────────────────────────────
-
-export const NoTitle = {
-  name  : "No container title",
+export const SystemRequirements = {
+  name  : "System Requirements",
   render: () => html`
-    <bd-accordion-bg>
-      <bd-accordion-bg-item title="What is Safe Online Banking?">
-        <p>Safe Online Banking launches a dedicated hardened browser for financial transactions, protecting against screen capture, keyloggers, and browser-based attacks.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is ransomware remediation?">
-        <p>If ransomware encrypts any files before Bitdefender can block it, the Ransomware Remediation feature automatically restores those files from secured backups.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion system-requirements block">
+      <bd-accordion-bg title="System Requirements" guide-icon="/assets/user_guide.png" guide-label="User guide >" guide-href="#">
+        <bd-accordion-bg-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 />iOS 12.0 or later</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="Bitdefender Central">
+          <bd-p kind="small">Bitdefender Central requires a modern browser with JavaScript enabled.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-p slot="footer" kind="small">* Requirements may vary by product version.</bd-p>
+      </bd-accordion-bg>
+    </div>
   `
 };
 
+// ─── Toate variantele pe aceeași pagină ───────────────────────────────────────
 
-// ─── bd-accordion-bg-item isolated ───────────────────────────────────────────
-
-export const ItemIsolated = {
-  name  : "bd-accordion-bg-item (isolated)",
+export const AllVariants = {
+  name  : "Toate variantele",
   render: () => html`
-    <div style="max-width: 680px; padding: 1rem;">
-      <bd-accordion-bg-item title="What is two-factor authentication?">
-        <p>Two-factor authentication adds a second verification step — such as a one-time code sent to your phone — when logging into your Bitdefender account.</p>
-      </bd-accordion-bg-item>
+
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Questions? Answers.">
+        <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.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-p slot="footer" kind="small">* Prices include VAT. Terms and conditions apply.</bd-p>
+      </bd-accordion-bg>
     </div>
-  `
-};
 
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+
+    <div class="accordion terms-of-use block">
+      <bd-accordion-bg title="Terms of use">
+        <bd-accordion-bg-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.</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-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-bg-item>
+        <bd-accordion-bg-item title="Affirmative consent">
+          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-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-bg-item>
+        <bd-p slot="footer" kind="small">* Sales tax included. First year price. See Terms of Use below.</bd-p>
+      </bd-accordion-bg>
+    </div>
 
-// ─── Many items ───────────────────────────────────────────────────────────────
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
 
-export const ManyItems = {
-  name  : "Many items",
-  render: () => html`
-    <bd-accordion-bg title="Everything You Need to Know">
-      <bd-accordion-bg-item title="What is real-time protection?">
-        <p>Real-time protection continuously monitors all file activity on your device and blocks threats the moment they are detected, before they can cause damage.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is web protection?">
-        <p>Web protection scans URLs in real time and blocks access to phishing sites, malicious downloads, and fraudulent pages before they load in your browser.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is vulnerability scanning?">
-        <p>The vulnerability scanner checks your installed applications and Windows for missing patches and outdated software that could be exploited by attackers.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What is Bitdefender Central?">
-        <p>Bitdefender Central is the unified dashboard for managing all your protected devices, viewing security reports, and controlling your subscription.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="Can I try Bitdefender for free?">
-        <p>Yes. Bitdefender offers a 30-day free trial for most consumer products. No credit card is required to start the trial.</p>
-      </bd-accordion-bg-item>
-      <bd-accordion-bg-item title="What happens after my trial ends?">
-        <p>Once the trial period ends, protection stops unless you purchase a subscription. Your settings and scan history are preserved if you upgrade.</p>
-      </bd-accordion-bg-item>
-    </bd-accordion-bg>
+    <div class="accordion system-requirements block">
+      <bd-accordion-bg title="System Requirements" guide-icon="/assets/user_guide.png" guide-label="User guide >" guide-href="#">
+        <bd-accordion-bg-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 />iOS 12.0 or later</bd-p>
+        </bd-accordion-bg-item>
+        <bd-accordion-bg-item title="Bitdefender Central">
+          <bd-p kind="small">Bitdefender Central</bd-p>
+        </bd-accordion-bg-item>
+      </bd-accordion-bg>
+    </div>
   `
 };

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

@@ -1,10 +1,5 @@
 import { css } from "lit";
 
-/**
- * bd-accordion-item — tokens scoped with `:host-context(...)` so vars resolve on
- * this host (slotted rules from the section do not). Default + `default-blue` =
- * parent is not `variant="small"` (tuned title/body colors for light tinted bgs).
- */
 export const accordionItem = css`
   :host {
     display: block;
@@ -18,13 +13,13 @@ export const accordionItem = css`
     box-shadow: var(--focus-outline-primary);
     position: relative;
     z-index: 1;
+    border-radius: var(--radius-sm);
   }
 
   :host(:last-child) {
     margin-bottom: 0;
   }
 
-  /* Default / non-small — panel body = 14px (fontSize-sm), titles 16px semibold */
   :host-context(bd-accordion-section:not([variant="small"])) {
     --bd-acc-title-font-size: var(--typography-fontSize-base);
     --bd-acc-title-font-weight: var(--typography-fontWeight-semibold);
@@ -37,13 +32,11 @@ export const accordionItem = css`
     --bd-acc-panel-color: var(--color-neutral-800);
   }
 
-  /* default-blue: titles blue-600 on blue-50 for stronger contrast (AA vs blue-500) */
   :host-context(bd-accordion-section[variant="default-blue"]) {
     --bd-acc-title-color-expanded: var(--color-blue-600);
     --bd-acc-title-color-collapsed: var(--color-blue-600);
   }
 
-  /* Small variant — title colors below (collapsed neutral-900; expanded blue-800; hover blue-500) */
   :host-context(bd-accordion-section[variant="small"]) {
     --bd-acc-header-padding: var(--spacing-12) var(--spacing-8);
     --bd-acc-header-margin-bottom: var(--spacing-0);
@@ -62,6 +55,17 @@ 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;
+    margin-bottom: var(--spacing-16);
+  }
+
+  ::slotted(bd-list:last-child) {
+    margin-bottom: 0;
+  }
+
   .header {
     display: flex;
     align-items: flex-start;
@@ -74,11 +78,8 @@ export const accordionItem = css`
     gap: var(--bd-acc-icon-gap, var(--spacing-12));
     font-family: var(--typography-fontFamily-sans);
     font-style: normal;
-    font-size: var(--bd-acc-title-font-size, var(--typography-label-small-fontSize));
-    font-weight: var(
-      --bd-acc-title-font-weight,
-      var(--typography-fontWeight-semibold)
-    );
+    font-size: var(--bd-acc-title-font-size, var(--typography-label-large-fontSize));
+    font-weight: var(--bd-acc-title-font-weight, 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-16));
   }
@@ -96,27 +97,19 @@ export const accordionItem = css`
     color: var(--color-blue-500);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="false"]
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"] .title {
     color: var(--color-neutral-900);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="false"]:hover
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"]:hover .title {
     color: var(--color-blue-500);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="true"]
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"] .title {
     color: var(--color-blue-800);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="true"]:hover
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"]:hover .title {
     color: var(--color-blue-500);
   }
 
@@ -130,12 +123,9 @@ export const accordionItem = css`
     justify-content: center;
     line-height: 0;
     user-select: none;
-    /* First-line alignment: icon sits in first line box, not vertically centered on wrapped title */
     margin-top: calc(
-      (
-          var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
-          var(--bd-acc-toggle-size, var(--icon-sm-size))
-        ) / 2
+      (var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
+      var(--bd-acc-toggle-size, var(--icon-sm-size))) / 2
     );
   }
 
@@ -148,39 +138,30 @@ export const accordionItem = css`
 
   .title {
     flex: 1;
-    font-weight: var(
-      --bd-acc-title-font-weight,
-      var(--typography-fontWeight-semibold)
-    );
+    font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
   }
 
   .content {
-    padding: var(
-      --bd-acc-panel-padding,
-      0 0 0 calc(var(--icon-sm-size) + var(--spacing-12))
-    );
+    padding: var(--bd-acc-panel-padding, 0 0 0 calc(var(--icon-sm-size) + var(--spacing-12)));
     font-family: var(--typography-fontFamily-sans);
     font-size: var(--bd-acc-panel-font-size, var(--typography-fontSize-sm));
-    font-weight: var(
-      --bd-acc-panel-font-weight,
-      var(--typography-fontWeight-normal)
-    );
-    line-height: var(
-      --bd-acc-panel-line-height,
-      var(--typography-lineHeight-normal)
-    );
+    font-weight: var(--bd-acc-panel-font-weight, var(--typography-fontWeight-normal));
+    line-height: var(--bd-acc-panel-line-height, var(--typography-lineHeight-normal));
     color: var(--bd-acc-panel-color, var(--color-neutral-700));
   }
 
   .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));
@@ -197,16 +178,12 @@ export const accordionItem = css`
 `;
 
 export const accordionSection = css`
-  // :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));
-    border-radius: var(--bd-acc-section-radius, var(--radius-lg));
+    border-radius: 0;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   :host([variant="small"]) {
@@ -218,7 +195,6 @@ export const accordionSection = css`
     --bd-acc-section-bg: var(--color-blue-50);
   }
 
-  /* Light tinted section bgs (neutral-25, blue-50): footnote link */
   :host(:not([variant="small"])) .user-guide-link {
     color: var(--color-blue-700);
   }
@@ -251,7 +227,6 @@ export const accordionSection = css`
     gap: var(--spacing-12);
     font-family: Arial, Helvetica, sans-serif;
     font-size: var(--typography-fontSize-xs);
-
   }
 
   .user-guide-link a:focus-visible {
@@ -266,4 +241,4 @@ export const accordionSection = css`
     height: var(--dimension-16px);
     object-fit: contain;
   }
-`;
+`;

package/src/components/list/list-item/list-item.css.js

@@ -11,6 +11,8 @@ export default css`
     gap: var(--spacing-8);
     color: var(--color-neutral-700);
     line-height: var(--typography-lineHeight-normal);
+        font-family: var(--typography-fontFamily-sans);
+
   }
 
   /* === SIZE VARIANTS === */
@@ -20,10 +22,10 @@ export default css`
     margin-bottom: var(--spacing-4);
   }
 
-  .bd-list-item.md {
-    font-size: var(--typography-fontSize-base);
-    margin-bottom: var(--spacing-6);
-  }
+.bd-list-item.md {
+  font-size: var(--typography-fontSize-base);
+  margin-bottom: var(--bd-li-margin-bottom, var(--spacing-6));
+}
 
   .bd-list-item.lg {
     font-size: var(--typography-fontSize-lg);
@@ -98,9 +100,12 @@ export default css`
     flex: 1;
   }
 
-  /* Last Item */
-  .bd-list-item:last-child {
-    margin-bottom: 0;
-  }
+  // /* Last Item */
+  // .bd-list-item:last-child {
+  //   margin-bottom: 0;
+  // }
+:host(:last-of-type) .bd-list-item {
+  margin-bottom: 0;
+}
 }
 `;

package/src/components/list/list-item/list-item.stories.js

@@ -1,79 +1,165 @@
-import { html } from 'lit';
-import './list-item.js';
+import { html } from "lit";
+import "./list-item.js";
 
 export default {
-  title    : 'Components/List/List Item',
-  component: 'bd-li',
-  argTypes : {
+  title     : "Components/List/List Item",
+  component : "bd-li",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+Componentă Lit pentru un element de listă cu marker configurabil.
+
+\`\`\`html
+<bd-li kind="bullet" size="md">Text element</bd-li>
+<bd-li kind="check" size="md">Element bifat</bd-li>
+<bd-li kind="number" size="md">Element numerotat</bd-li>
+\`\`\`
+
+### Atribute
+| Atribut | Tip | Default | Descriere |
+|---|---|---|---|
+| \`kind\` | String | \`bullet\` | Tipul marker-ului: \`bullet\` · \`number\` · \`check\` · \`none\` |
+| \`size\` | String | \`md\` | Dimensiunea: \`sm\` · \`md\` · \`lg\` |
+| \`icon\` | String | — | URL icon custom (înlocuiește marker-ul) |
+
+### Utilizare în \`bd-list\`
+\`bd-li\` este destinat uzului în interiorul \`bd-list\`:
+\`\`\`html
+<bd-list type="unordered" spacing="md">
+  <bd-li kind="bullet" size="md">Primul element</bd-li>
+  <bd-li kind="bullet" size="md">Al doilea element</bd-li>
+</bd-list>
+\`\`\`
+        `
+      }
+    }
+  },
+  argTypes: {
     kind: {
-      control    : { type: 'select' },
-      options    : ['bullet', 'number', 'check', 'none'],
-      description: 'List item marker type'
+      control    : { type: "select" },
+      options    : ["bullet", "number", "check", "none"],
+      description: "Tipul marker-ului",
+      table      : { type: { summary: "string" }, defaultValue: { summary: "bullet" } }
     },
     size: {
-      control    : { type: 'select' },
-      options    : ['sm', 'md', 'lg'],
-      description: 'List item size'
+      control    : { type: "select" },
+      options    : ["sm", "md", "lg"],
+      description: "Dimensiunea elementului",
+      table      : { type: { summary: "string" }, defaultValue: { summary: "md" } }
     },
-    content: {
-      control    : 'text',
-      description: 'List item content'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A list item component with customizable markers and styling.'
-      }
+    icon: {
+      control    : "text",
+      description: "URL icon custom (înlocuiește marker-ul implicit)",
+      table      : { type: { summary: "string" } }
     }
   }
 };
 
-const Template = (args) => html`
-  <bd-li kind="${args.kind}" size="${args.size}">${args.content}</bd-li>
-`;
+// ─── Default ──────────────────────────────────────────────────────────────────
 
-export const Default = Template.bind({});
-Default.args = {
-  kind   : 'bullet',
-  size   : 'md',
-  content: 'Default list item with bullet marker'
+export const Default = {
+  name  : "Default",
+  args  : { kind: "bullet", size: "md" },
+  render: ({ kind, size }) => html`
+    <bd-li kind="${kind}" size="${size}">Default list item with bullet marker</bd-li>
+  `
 };
 
-export const Bullet = Template.bind({});
-Bullet.args = {
-  kind   : 'bullet',
-  content: 'Item with bullet marker'
+// ─── Bullet ───────────────────────────────────────────────────────────────────
+
+export const Bullet = {
+  name  : "Bullet",
+  args  : { kind: "bullet", size: "md" },
+  render: ({ kind, size }) => html`
+    <bd-li kind="${kind}" size="${size}">Item with bullet marker</bd-li>
+  `
 };
 
-export const Number = Template.bind({});
-Number.args = {
-  kind   : 'number',
-  content: 'Item with number marker'
+// ─── Number ───────────────────────────────────────────────────────────────────
+
+export const Number = {
+  name  : "Number",
+  args  : { kind: "number", size: "md" },
+  render: ({ kind, size }) => html`
+    <bd-li kind="${kind}" size="${size}">Item with number marker</bd-li>
+  `
 };
 
-export const Check = Template.bind({});
-Check.args = {
-  kind   : 'check',
-  content: 'Item with checkmark'
+// ─── Check ────────────────────────────────────────────────────────────────────
+
+export const Check = {
+  name  : "Check",
+  args  : { kind: "check", size: "md" },
+  render: ({ kind, size }) => html`
+    <bd-li kind="${kind}" size="${size}">Item with checkmark marker</bd-li>
+  `
 };
 
-export const None = Template.bind({});
-None.args = {
-  kind   : 'none',
-  content: 'Item without marker'
+// ─── None ─────────────────────────────────────────────────────────────────────
+
+export const None = {
+  name  : "None",
+  args  : { kind: "none", size: "md" },
+  render: ({ kind, size }) => html`
+    <bd-li kind="${kind}" size="${size}">Item without marker</bd-li>
+  `
 };
 
-export const SizeVariants = () => html`
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <bd-li kind="bullet" size="sm">Small list item</bd-li>
-    <bd-li kind="bullet" size="md">Medium list item</bd-li>
-    <bd-li kind="bullet" size="lg">Large list item</bd-li>
-  </div>
-`;
-
-export const WithRichContent = () => html`
-  <bd-li kind="bullet" size="lg">
-    <strong>Featured item</strong> with additional description text that wraps to multiple lines while maintaining proper alignment with the marker.
-  </bd-li>
-`;
+// ─── Size Variants ────────────────────────────────────────────────────────────
+
+export const SizeVariants = {
+  name      : "Size Variants",
+  parameters: { controls: { disable: true } },
+  render    : () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <bd-li kind="bullet" size="sm">Small list item (sm)</bd-li>
+      <bd-li kind="bullet" size="md">Medium list item (md)</bd-li>
+      <bd-li kind="bullet" size="lg">Large list item (lg)</bd-li>
+    </div>
+  `
+};
+
+// ─── Toate tipurile de marker ─────────────────────────────────────────────────
+
+export const AllKinds = {
+  name      : "Toate tipurile de marker",
+  parameters: { controls: { disable: true } },
+  render    : () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <bd-li kind="bullet" size="md">Bullet — marker punct negru</bd-li>
+      <bd-li kind="number" size="md">Number — marker număr</bd-li>
+      <bd-li kind="check"  size="md">Check — marker bifă verde</bd-li>
+      <bd-li kind="none"   size="md">None — fără marker</bd-li>
+    </div>
+  `
+};
+
+// ─── Cu conținut rich ─────────────────────────────────────────────────────────
+
+export const WithRichContent = {
+  name      : "Cu conținut rich",
+  parameters: { controls: { disable: true } },
+  render    : () => html`
+    <bd-li kind="bullet" size="lg">
+      <strong>Element evidențiat</strong> cu text descriptiv suplimentar care se poate întinde
+      pe mai multe rânduri, menținând alinierea corectă față de marker.
+    </bd-li>
+  `
+};
+
+// ─── Playground ───────────────────────────────────────────────────────────────
+
+export const Playground = {
+  name  : "Playground",
+  args  : { kind: "bullet", size: "md" },
+  render: ({ kind, size }) => html`
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <bd-li kind="${kind}" size="${size}">Primul element de listă</bd-li>
+      <bd-li kind="${kind}" size="${size}">Al doilea element de listă</bd-li>
+      <bd-li kind="${kind}" size="${size}">Al treilea element de listă</bd-li>
+    </div>
+  `
+};