@repobit/dex-system-design 0.23.32 → 0.23.34

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 }
   };
 

package/src/components/awards/awards.css.js

@@ -1,13 +1,14 @@
 import { css } from "lit";
 
-/** Orbit Awards — desktop: Figma 1882:9342 (Frame 14); mobile: 1882:9346 (Frame 15, 360) */
 export const awardsCSS = css`
-  :host {
+
+  bd-awards-section {
     display: block;
     font-family: var(--typography-fontFamily-sans);
     background: var(--layout-awards-section-background);
     box-sizing: border-box;
-    // padding-bottom: var(--spacing-32);
+   padding: var(--spacing-32);
+
   }
 
   .bd-awards-root {

package/src/components/awards/awards.js

@@ -1,8 +1,30 @@
+// awards.js - varianta cu Shadow DOM (ca la celelalte componente)
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "./awards-icon.js";
+import "../icons/analysis-icon.js";
+import "../icons/av-comparatives-icon.js";
+import "../icons/best-brands-icon.js";
+import "../icons/laurel-icon.js";
+import "../icons/machine-learning-icon.js";
+import "../icons/pc-mag-2024-icon.js";
+import "../icons/pc-mag-business-icon.js";
+import "../icons/pc-mag-icon.js";
+import "../icons/pc-mag-readers-icon.js";
+import "../icons/top-product-icon.js";
 import { awardsCSS } from "./awards.css.js";
 
+const ICON_RENDERERS = {
+  "bd-pc-mag-icon"          : () => html`<bd-pc-mag-icon></bd-pc-mag-icon>`,
+  "bd-av-comparatives-icon" : () => html`<bd-av-comparatives-icon></bd-av-comparatives-icon>`,
+  "bd-best-brands-icon"     : () => html`<bd-best-brands-icon></bd-best-brands-icon>`,
+  "bd-pc-mag-2024-icon"     : () => html`<bd-pc-mag-2024-icon></bd-pc-mag-2024-icon>`,
+  "bd-pc-mag-readers-icon"  : () => html`<bd-pc-mag-readers-icon height="64" width="37"></bd-pc-mag-readers-icon>`,
+  "bd-pc-mag-business-icon" : () => html`<bd-pc-mag-business-icon></bd-pc-mag-business-icon>`,
+  "bd-top-product-icon"     : () => html`<bd-top-product-icon></bd-top-product-icon>`,
+  "bd-machine-learning-icon": () => html`<bd-machine-learning-icon></bd-machine-learning-icon>`,
+  "bd-analysis-icon"        : () => html`<bd-analysis-icon></bd-analysis-icon>`
+};
+
 export class AwardsSection extends LitElement {
   static properties = {
     tagline       : { type: String },
@@ -18,105 +40,52 @@ export class AwardsSection extends LitElement {
 
   static styles = [tokens, awardsCSS];
 
-  /** @type {MediaQueryList | null} */
   _mql599 = null;
-  /** @type {MediaQueryList | null} */
   _mql767 = null;
-  _on599 = () => {
-    this._narrow = this._mql599?.matches ?? false;
-  };
-  _on767 = () => {
-    this._featureNarrow = this._mql767?.matches ?? false;
-  };
+  _on599 = () => { this._narrow = this._mql599?.matches ?? false; };
+  _on767 = () => { this._featureNarrow = this._mql767?.matches ?? false; };
 
   constructor() {
     super();
-    this.tagline = "You're Making A Great Choice";
-    this.headline =
-      "World-class security software you can trust. Always.";
-    this.subtext =
-      "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
-    this.secretTitle = "What's our secret";
-    this.secretSubtext =
-      "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.";
+    this.tagline       = "You're Making A Great Choice";
+    this.headline      = "World-class security software you can trust. Always.";
+    this.subtext       = "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
+    this.secretTitle   = "What's our secret";
+    this.secretSubtext = "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.";
 
     this.desktopAwards = [
-      {
-        label : "PC MAG\nEDITORS' CHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag.svg",
-        id    : "pc-mag"
-      },
-      {
-        label : "AV\ncomparatives",
-        type  : "dark",
-        format: "svg",
-        src   : "/assets/av-comparatives.svg",
-        id    : "av-comparatives"
-      },
-      {
-        label : "Best\nBrands\n2024",
-        type  : "dark",
-        format: "svg",
-        src   : "/assets/best-brands.svg",
-        id    : "best-brands"
-      },
-      {
-        label : "PC\nChoice\n2024",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-2024.svg",
-        id    : "pc-mag-2024"
-      },
-      {
-        label : "PC MAG\nREADERS'\nCHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-readers.svg",
-        id    : "pc-mag-readers"
-      },
-      {
-        label : "PC\nBusiness\nChoice",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-business.svg",
-        id    : "pc-mag-business"
-      },
-      {
-        label : "AV\nTEST\nTOP\nPRODUCT",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/top-product.svg",
-        id    : "top-product"
-      }
+      { label: "PC MAG\nEDITORS' CHOICE",  type: "red",  tag: "bd-pc-mag-icon",          id: "pc-mag"          },
+      { label: "AV\ncomparatives",          type: "dark", tag: "bd-av-comparatives-icon", id: "av-comparatives" },
+      { label: "Best\nBrands\n2024",        type: "dark", tag: "bd-best-brands-icon",     id: "best-brands"     },
+      { label: "PC\nChoice\n2024",          type: "red",  tag: "bd-pc-mag-2024-icon",     id: "pc-mag-2024"     },
+      { label: "PC MAG\nREADERS'\nCHOICE", type: "red",  tag: "bd-pc-mag-readers-icon",  id: "pc-mag-readers"  },
+      { label: "PC\nBusiness\nChoice",      type: "red",  tag: "bd-pc-mag-business-icon", id: "pc-mag-business" },
+      { label: "AV\nTEST\nTOP\nPRODUCT",   type: "red",  tag: "bd-top-product-icon",     id: "top-product"     }
     ];
 
     this.features = [
       {
-        icon : "brain",
-        title: "Machine Learning",
-        description:
-          "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
+        tag        : "bd-machine-learning-icon",
+        title      : "Machine Learning",
+        description: "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
       },
       {
-        icon : "chart",
-        title: "Behavioral Analysis",
-        description:
-          "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
+        tag        : "bd-analysis-icon",
+        title      : "Behavioral Analysis",
+        description: "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
       }
     ];
 
-    this._narrow = false;
+    this._narrow        = false;
     this._featureNarrow = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     if (typeof window !== "undefined" && window.matchMedia) {
-      this._mql599 = window.matchMedia("(max-width: 599px)");
-      this._mql767 = window.matchMedia("(max-width: 767px)");
-      this._narrow = this._mql599.matches;
+      this._mql599        = window.matchMedia("(max-width: 599px)");
+      this._mql767        = window.matchMedia("(max-width: 767px)");
+      this._narrow        = this._mql599.matches;
       this._featureNarrow = this._mql767.matches;
       this._mql599.addEventListener("change", this._on599);
       this._mql767.addEventListener("change", this._on767);
@@ -130,26 +99,23 @@ export class AwardsSection extends LitElement {
   }
 
   _renderBadge(award) {
+    const iconFn    = ICON_RENDERERS[award.tag];
     const ariaLabel = award.label.replace(/\n/g, " ");
-    const classes = `bd-awards-badge ${award.type === "dark" ? "bd-awards-badge--dark" : ""}`;
+    const classes   = `bd-awards-badge ${award.type === "dark" ? "bd-awards-badge--dark" : ""}`;
     return html`
-      <div class="${classes}" data-award-id="${award.id}" role="listitem">
-        <bd-icon src="${award.src}" label="${ariaLabel}"></bd-icon>
+      <div class="${classes}" data-award-id="${award.id}" role="listitem" aria-label="${ariaLabel}">
+        ${iconFn ? iconFn() : ""}
       </div>
     `;
   }
 
   _renderFeature(f) {
     const narrow = this._featureNarrow;
-    const iconSrc =
-      f.icon === "brain"
-        ? "/assets/machine-learning.svg"
-        : "/assets/analysis.svg";
-
+    const iconFn = ICON_RENDERERS[f.tag];
     return html`
       <article class="bd-awards-feature-card">
         <div class="bd-awards-feature-icon" aria-hidden="true">
-          <bd-icon src="${iconSrc}" label=""></bd-icon>
+          ${iconFn ? iconFn() : ""}
         </div>
         <div class="bd-awards-feature-text">
           ${narrow
@@ -165,58 +131,33 @@ export class AwardsSection extends LitElement {
 
   render() {
     const narrow = this._narrow;
-
     return html`
-      <section
-        class="bd-awards-root"
-        aria-label="Awards and recognition"
-      >
       <div class="bd-awards-trust-banner">
         <div class="bd-awards-trust-intro">
-        <span class="bd-awards-laurel-icon" aria-hidden="true">
-          <bd-icon
-            label=""
-          >
-            <svg
-              width="80"
-              height="80"
-              viewBox="0 0 80 80"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M48.0751 11.994C48.0751 17.6107 52.457 21.9791 58.0908 21.9791C58.0908 16.4873 53.5837 11.994 48.0751 11.994ZM61.8466 19.7325C62.9734 16.737 65.1017 13.9911 68.1064 12.2437C68.9828 11.7444 70.1096 12.1189 70.6103 12.8677L72.7387 16.6121C75.3678 21.1054 75.493 26.3476 73.615 30.8409C74.9922 30.3417 76.6197 29.9672 78.2473 29.9672C79.2488 29.9672 80 30.8409 80 31.8394V35.9583C80 41.2005 77.4961 45.8186 73.615 48.8141C75.2426 49.0637 76.7449 49.563 78.1221 50.4367C78.9984 50.9359 79.2488 52.0592 78.8732 52.8081L76.7449 56.5525C73.2394 62.5436 66.4789 65.4143 60.0939 64.291L59.4679 64.0414C57.9656 63.2925 56.4632 62.6684 54.9609 62.0443C53.8341 61.6699 52.7074 61.2955 51.4554 61.0458C58.9671 57.0518 64.1002 49.0637 64.1002 39.9523C64.1002 34.835 62.2222 29.9672 59.0923 25.9732H58.0908C50.3286 25.9732 44.0689 19.7325 44.0689 11.994V9.99702C44.0689 8.99851 44.9452 8 46.072 8H48.0751C54.9609 8 60.8451 13.1174 61.8466 19.7325ZM39.9374 67.9106V68.0354H37.5587C32.9264 68.0354 28.2942 69.0339 24.1628 71.1558L22.9108 71.7798C21.9092 72.2791 20.6573 71.9046 20.1565 70.9061C19.6557 69.9076 20.1565 68.6595 21.0329 68.1602L22.2848 67.5362C24.1628 66.6625 26.0407 65.9136 28.0438 65.2895C26.6667 64.6654 25.2895 63.9166 24.0376 63.0429C23.1612 63.4173 22.2848 63.6669 21.5336 63.9166C14.6479 65.7888 7.01095 62.918 3.25509 56.5525L1.25196 52.8081C0.751174 52.0592 1.00156 50.9359 1.87793 50.4367C3.25509 49.563 4.75743 49.0637 6.38498 48.8141C2.50391 45.8186 0 41.2005 0 35.9583V31.8394C0 30.8409 0.751174 29.9672 1.75274 29.9672C3.38028 29.9672 5.00782 30.3417 6.38498 30.8409C4.50704 26.3476 4.75743 21.1054 7.26135 16.6121L9.38967 12.8677C9.89045 12.1189 11.0172 11.7444 11.8936 12.2437C14.8983 13.9911 17.0266 16.737 18.1534 19.7325C19.2801 13.1174 25.0391 8 32.0501 8H34.0532C35.0548 8 36.0563 8.99851 36.0563 9.99702V11.994C36.0563 19.7325 29.6714 25.9732 22.0344 25.9732H20.9077C17.7778 29.9672 16.025 34.835 16.025 39.9523C16.025 53.1826 26.7919 63.9166 40.0626 63.9166H42.4413C47.6995 63.9166 52.9577 65.1647 57.7152 67.5362L58.9671 68.1602C59.9687 68.6595 60.3443 69.9076 59.8435 70.9061C59.3427 71.7798 58.0908 72.2791 57.0892 71.7798L55.8372 71.1558C51.7058 69.0339 47.0736 67.9106 42.4413 67.9106H40.0626H39.9374ZM22.0344 21.9791C27.543 21.9791 32.0501 17.6107 32.0501 11.994C29.1706 11.994 26.6667 13.2422 24.7887 15.1144C23.036 16.8618 22.0344 19.3581 22.0344 21.9791ZM12.0188 44.196C12.0188 39.3282 8.5133 35.2094 4.00626 34.2109V35.9583C4.00626 41.2005 7.26135 45.6937 12.0188 47.3163V44.196ZM68.1064 47.3163C72.7387 45.6937 76.1189 41.2005 76.1189 35.9583V34.2109C71.4867 35.3342 68.1064 39.3282 68.1064 44.196V47.3163ZM17.7778 57.6759C15.3991 53.4322 10.3912 51.56 5.88419 53.0578L6.76056 54.5555C9.38967 59.0488 14.5227 61.1707 19.4053 60.297L17.7778 57.6759ZM12.0188 32.3387L13.6463 29.7176C16.025 25.4739 15.1487 20.2317 11.6432 17.1114L10.7668 18.6092C8.13772 23.1025 8.88889 28.5943 12.0188 32.3387ZM66.3537 29.7176L67.9812 32.3387C71.1111 28.5943 71.8623 23.1025 69.2332 18.6092L68.3568 17.1114C64.8513 20.2317 63.975 25.4739 66.3537 29.7176ZM62.2222 57.6759L60.5947 60.297C65.4773 61.1707 70.6103 59.0488 73.2394 54.5555L74.1158 53.0578C69.6088 51.56 64.6009 53.4322 62.2222 57.6759Z"
-                fill="currentColor"
-              />
-            </svg>
-          </bd-icon>
-        </span>
-
-        ${narrow
-          ? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
-          : html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
-
-        ${narrow
-          ? html`
-              <bd-h as="h4" class="bd-awards-headline">
-                <span class="bd-awards-headline-line">World-class security</span>
-                <span class="bd-awards-headline-line">software you can trust.</span>
-                <span class="bd-awards-headline-line">Always.</span>
-              </bd-h>
-            `
-          : html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
-
-        ${narrow
-          ? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
-          : html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
+          <span class="bd-awards-laurel-icon" aria-hidden="true">
+            <bd-laurel-icon size="80"></bd-laurel-icon>
+          </span>
+
+          ${narrow
+            ? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
+            : html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
+
+          ${narrow
+            ? html`
+                <bd-h as="h4" class="bd-awards-headline">
+                  <span class="bd-awards-headline-line">World-class security</span>
+                  <span class="bd-awards-headline-line">software you can trust.</span>
+                  <span class="bd-awards-headline-line">Always.</span>
+                </bd-h>
+              `
+            : html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
+
+          ${narrow
+            ? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
+            : html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
         </div>
 
-        <div
-          class="bd-awards-bar"
-          role="list"
-          aria-label="Industry awards"
-        >
+        <div class="bd-awards-bar" role="list" aria-label="Industry awards">
           <div class="bd-awards-row" role="presentation">
             ${this.desktopAwards.slice(0, 3).map((a) => this._renderBadge(a))}
           </div>
@@ -227,22 +168,21 @@ export class AwardsSection extends LitElement {
       </div>
 
       <div class="bd-awards-lower">
-      <section class="bd-awards-secret-section">
-        ${narrow
-          ? html`<bd-h as="h4" class="bd-awards-section-title">${this.secretTitle}</bd-h>`
-          : html`<bd-h as="h3" class="bd-awards-section-title">${this.secretTitle}</bd-h>`}
-        ${narrow
-          ? html`<bd-p kind="small" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
-          : html`<bd-p kind="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`}
-      </section>
-
-      <div class="bd-awards-features-grid">
-        ${this.features.map((f) => this._renderFeature(f))}
-      </div>
+        <section class="bd-awards-secret-section">
+          ${narrow
+            ? html`<bd-h as="h4" class="bd-awards-section-title">${this.secretTitle}</bd-h>`
+            : html`<bd-h as="h3" class="bd-awards-section-title">${this.secretTitle}</bd-h>`}
+          ${narrow
+            ? html`<bd-p kind="small" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
+            : html`<bd-p kind="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`}
+        </section>
+
+        <div class="bd-awards-features-grid">
+          ${this.features.map((f) => this._renderFeature(f))}
+        </div>
       </div>
-      </section>
     `;
   }
 }
 
-customElements.define("bd-awards-section", AwardsSection);
+customElements.define("bd-awards-section", AwardsSection);

package/src/components/awards/awards.stories.js

@@ -107,65 +107,25 @@ const defaultArgs = {
   subtext      : "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.",
   secretTitle  : "What's our secret",
   secretSubtext: "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.",
+
   desktopAwards: [
-    {
-      label : "PC MAG\nEDITORS' CHOICE",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag.svg",
-      id    : "pc-mag"
-    },
-    {
-      label : "AV\ncomparatives",
-      type  : "dark",
-      format: "svg",
-      src   : "/assets/av-comparatives.svg",
-      id    : "av-comparatives"
-    },
-    {
-      label : "Best\nBrands\n2024",
-      type  : "dark",
-      format: "svg",
-      src   : "/assets/best-brands.svg",
-      id    : "best-brands"
-    },
-    {
-      label : "PC\nChoice\n2024",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-2024.svg",
-      id    : "pc-mag-2024"
-    },
-    {
-      label : "PC MAG\nREADERS'\nCHOICE",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-readers.svg",
-      id    : "pc-mag-readers"
-    },
-    {
-      label : "PC\nBusiness\nChoice",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-business.svg",
-      id    : "pc-mag-business"
-    },
-    {
-      label : "AV\nTEST\nTOP\nPRODUCT",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/top-product.svg",
-      id    : "top-product"
-    }
+    { label: "PC MAG\nEDITORS' CHOICE",  type: "red",  tag: "bd-pc-mag-icon",          id: "pc-mag"          },
+    { label: "AV\ncomparatives",          type: "dark", tag: "bd-av-comparatives-icon", id: "av-comparatives" },
+    { label: "Best\nBrands\n2024",        type: "dark", tag: "bd-best-brands-icon",     id: "best-brands"     },
+    { label: "PC\nChoice\n2024",          type: "red",  tag: "bd-pc-mag-2024-icon",     id: "pc-mag-2024"     },
+    { label: "PC MAG\nREADERS'\nCHOICE", type: "red",  tag: "bd-pc-mag-readers-icon",  id: "pc-mag-readers"  },
+    { label: "PC\nBusiness\nChoice",      type: "red",  tag: "bd-pc-mag-business-icon", id: "pc-mag-business" },
+    { label: "AV\nTEST\nTOP\nPRODUCT",   type: "red",  tag: "bd-top-product-icon",     id: "top-product"     }
   ],
+
   features: [
     {
-      icon       : "brain",
+      tag        : "bd-machine-learning-icon",
       title      : "Machine Learning",
       description: "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
     },
     {
-      icon       : "chart",
+      tag        : "bd-analysis-icon",
       title      : "Behavioral Analysis",
       description: "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
     }

package/src/components/badge/badge.css.js

@@ -40,15 +40,7 @@ export default css`
     background-size: contain;
   }
 
-  /* Iconița pentru individual - ALBĂ */
-  .badge-icon.icon-individual {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z' fill='white'/></svg>");
-  }
 
-  /* Iconița pentru family - ALBĂ */
-  .badge-icon.icon-family {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z' fill='white'/></svg>");
-  }
 
   /* Stil pentru badge-ul bd-light-blue */
   .badge.bd-light-blue {
@@ -77,13 +69,4 @@ export default css`
     --badge-icon-size: 18px;
     --badge-gap: var(--spacing-6);
   }
-
-  /* Green badge icons use dark green fill for WCAG contrast on --color-green-100 background */
-  .badge.bd-light-green .badge-icon.icon-individual {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z' fill='%230b6a26'/></svg>");
-  }
-
-  .badge.bd-light-green .badge-icon.icon-family {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z' fill='%230b6a26'/><path fill-rule='evenodd' clip-rule='evenodd' d='M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z' fill='%230b6a26'/><path fill-rule='evenodd' clip-rule='evenodd' d='M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z' fill='%230b6a26'/></svg>");
-  }
 `;

package/src/components/badge/badge.js

@@ -1,5 +1,7 @@
 import { LitElement, html } from 'lit';
 import { tokens } from "../../tokens/tokens.js";
+import "../icons/family-icon.js";
+import "../icons/individual-icon.js";
 import badgeCSS from './badge.css.js';
 
 export class BdBadge extends LitElement {
@@ -74,12 +76,13 @@ export class BdBadge extends LitElement {
 
   _renderIcon() {
     if (!this.icon) return '';
+    const color = this.variant === 'bd-light-green' ? '#0b6a26' : 'white';
 
     switch (this.icon) {
       case 'individual':
-        return html`<span class="badge-icon icon-individual" aria-hidden="true"></span>`;
+        return html`<bd-individual-icon size="16" color="${color}"></bd-individual-icon>`;
       case 'family':
-        return html`<span class="badge-icon icon-family" aria-hidden="true"></span>`;
+        return html`<bd-family-icon size="16" color="${color}"></bd-family-icon>`;
       default:
         return '';
     }