@repobit/dex-system-design 0.23.9 → 0.23.11

package/src/components/anchor/anchor-nav.js

@@ -1,8 +1,20 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "../Button/Button.js";
 import { anchorNavStyles } from "./anchor-nav.css.js";
 
+/** Parse token length from computed style (e.g. `8rem` → px). */
+function parseLengthToPx(value) {
+  const s = (value || "").trim();
+  if (!s) return 0;
+  if (s.endsWith("px")) return parseFloat(s);
+  if (s.endsWith("rem")) {
+    const root =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    return parseFloat(s) * root;
+  }
+  return parseFloat(s) || 0;
+}
+
 class BdAnchorNavItem extends HTMLElement {
   constructor() {
     super();
@@ -14,67 +26,267 @@ class BdAnchorNavItem extends HTMLElement {
   }
 
   render() {
-    this.shadowRoot.innerHTML = `
-      <nav>
-        <slot></slot>
-      </nav>
-    `;
+    this.shadowRoot.innerHTML = `<slot></slot>`;
   }
 }
 
-
 class BdAnchorNav extends LitElement {
+  static properties = {
+    activeId          : { type: String, state: true },
+    /** Landmark label for the outer `<nav>` (screen readers). */
+    navLabel          : { type: String, attribute: "aria-label" },
+    /** Mobile dropdown open state */
+    _dropdownOpen     : { type: Boolean, state: true },
+    /** Mobile: show Buy now only after first anchor section has been scrolled past */
+    _mobileCtaRevealed: { type: Boolean, state: true }
+  };
+
   static styles = [tokens, anchorNavStyles];
 
   constructor() {
     super();
     this.activeId = "";
+    this.navLabel = "Section navigation";
+    this._dropdownOpen = false;
+    this._mobileCtaRevealed = false;
+    this._panelId = `bd-anchor-nav-panel-${Math.random().toString(36)
+      .slice(2, 11)}`;
+    this._onScrollSpy = this._onScrollSpy.bind(this);
+    this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
+    this._scrollPending = false;
+    /** While set, scrollspy must not overwrite activeId during smooth scroll to a clicked section */
+    this._programmaticScrollTargetId = null;
+    this._unlockScrollSpyTimer = null;
+    this._scrollEndUnlockHandler = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("scroll", this._onScrollSpy, { passive: true });
+    window.addEventListener("resize", this._onScrollSpy, { passive: true });
+    document.addEventListener("pointerdown", this._onDocumentPointerDown, true);
+    document.addEventListener("keydown", this._onKeydown, true);
+    queueMicrotask(() => this._runScrollSpy());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cancelScrollSpyUnlock();
+    window.removeEventListener("scroll", this._onScrollSpy);
+    window.removeEventListener("resize", this._onScrollSpy);
+    document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
+    document.removeEventListener("keydown", this._onKeydown, true);
+  }
+
+  _cancelScrollSpyUnlock() {
+    if (this._unlockScrollSpyTimer != null) {
+      clearTimeout(this._unlockScrollSpyTimer);
+      this._unlockScrollSpyTimer = null;
+    }
+    if (this._scrollEndUnlockHandler) {
+      window.removeEventListener("scrollend", this._scrollEndUnlockHandler);
+      this._scrollEndUnlockHandler = null;
+    }
+  }
+
+  /** After in-nav navigation, ignore scrollspy until scroll finishes (avoids flashing 2→3→4). */
+  _scheduleScrollSpyUnlock() {
+    this._cancelScrollSpyUnlock();
+    const onScrollEnd = () => {
+      if (this._unlockScrollSpyTimer != null) {
+        clearTimeout(this._unlockScrollSpyTimer);
+        this._unlockScrollSpyTimer = null;
+      }
+      window.removeEventListener("scrollend", onScrollEnd);
+      this._scrollEndUnlockHandler = null;
+      this._programmaticScrollTargetId = null;
+      this._runScrollSpy();
+    };
+    this._scrollEndUnlockHandler = onScrollEnd;
+    window.addEventListener("scrollend", onScrollEnd, { passive: true });
+    this._unlockScrollSpyTimer = window.setTimeout(() => {
+      this._unlockScrollSpyTimer = null;
+      if (this._scrollEndUnlockHandler) {
+        window.removeEventListener("scrollend", this._scrollEndUnlockHandler);
+        this._scrollEndUnlockHandler = null;
+      }
+      if (this._programmaticScrollTargetId) {
+        this._programmaticScrollTargetId = null;
+        this._runScrollSpy();
+      }
+    }, 1000);
+  }
+
+  _onKeydown(e) {
+    if (e.key === "Escape" && this._dropdownOpen) {
+      this._dropdownOpen = false;
+      this.requestUpdate();
+    }
+  }
+
+  _onDocumentPointerDown(e) {
+    if (!this._dropdownOpen) return;
+    const path = e.composedPath();
+    if (path.includes(this)) return;
+    this._dropdownOpen = false;
+    this.requestUpdate();
+  }
+
+  _onScrollSpy() {
+    if (this._scrollPending) return;
+    this._scrollPending = true;
+    requestAnimationFrame(() => {
+      this._scrollPending = false;
+      this._runScrollSpy();
+    });
+  }
+
+  _runScrollSpy() {
+    const count = this._navItemCount();
+    let next = this.activeId;
+    if (count && !this._programmaticScrollTargetId) {
+      const y = window.scrollY + this._stickyOffsetPx() + 2;
+      next = "anchor-1";
+      for (let i = 0; i < count; i++) {
+        const el = document.getElementById(`anchor-${i + 1}-section`);
+        if (!el) continue;
+        const top = el.getBoundingClientRect().top + window.scrollY;
+        if (top <= y) next = `anchor-${i + 1}`;
+      }
+    }
+
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const first = document.getElementById("anchor-1-section");
+    let nextCta;
+    if (!isMobile) {
+      nextCta = true;
+    } else if (!first) {
+      nextCta = true;
+    } else {
+      /* Show only while first section is fully scrolled past; hide again when it scrolls back into view */
+      nextCta = first.getBoundingClientRect().bottom <= 0;
+    }
+
+    if (this.activeId !== next || this._mobileCtaRevealed !== nextCta) {
+      this.activeId = next;
+      this._mobileCtaRevealed = nextCta;
+      this.requestUpdate();
+    }
+  }
+
+  _navItemCount() {
+    return Array.from(this.children).filter(
+      (el) => el.tagName === "BD-ANCHOR-NAV-ITEM"
+    ).length;
   }
 
   firstUpdated() {
-    const firstItem = this.querySelector("bd-anchor-nav-item");
-    if (firstItem) {
-      this.activeId = firstItem.id;
+    const n = this._navItemCount();
+    if (n) {
+      this.activeId = "anchor-1";
       this.requestUpdate();
     }
+    queueMicrotask(() => this._runScrollSpy());
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!changedProperties.has("activeId")) return;
+    const prev = changedProperties.get("activeId");
+    if (prev === undefined || prev === "") return;
+    if (prev === this.activeId) return;
+    queueMicrotask(() => this._playMobileDropdownLabelSwap());
+  }
+
+  /** Mobile dropdown title: subtle fade + slide when scrollspy (or tap) changes section. */
+  _playMobileDropdownLabelSwap() {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    if (!window.matchMedia("(max-width: 768px)").matches) return;
+    const el = this.renderRoot?.querySelector(".bd-anchor-nav__dropdown-label");
+    if (!el) return;
+    el.classList.remove("bd-anchor-nav__dropdown-label--swap");
+    void el.offsetWidth;
+    el.classList.add("bd-anchor-nav__dropdown-label--swap");
+    el.addEventListener(
+      "animationend",
+      () => el.classList.remove("bd-anchor-nav__dropdown-label--swap"),
+      { once: true }
+    );
+  }
+
+  /**
+   * Scroll clearance = actual sticky bar height + small inset (not a fixed 128px token).
+   * Matches best practice: target headings sit just under the bar, not with extra dead space.
+   */
+  _stickyOffsetPx() {
+    const barPx = this.offsetHeight;
+    const insetRaw = getComputedStyle(this).getPropertyValue("--spacing-8")
+      .trim();
+    const insetPx = parseLengthToPx(insetRaw) || 8;
+    if (barPx > 0) return barPx + insetPx;
+    const fallback = getComputedStyle(this).getPropertyValue("--spacing-128")
+      .trim();
+    return parseLengthToPx(fallback) || 128;
+  }
+
+  _scrollToY(event, getTarget) {
+    if (event?.preventDefault) event.preventDefault();
+    const el = getTarget();
+    if (!el) return;
+    const offset = this._stickyOffsetPx();
+    const rect = el.getBoundingClientRect();
+    const scrollTop = window.scrollY ?? window.pageYOffset;
+    const elementY = rect.top + scrollTop;
+    const prefersReduced =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    window.scrollTo({
+      top     : elementY - offset,
+      behavior: prefersReduced ? "auto" : "smooth"
+    });
   }
 
   handleClick(event, id) {
     event.preventDefault();
+    this._cancelScrollSpyUnlock();
+    this._programmaticScrollTargetId = id;
     this.activeId = id;
 
-    const sectionEl = document.querySelector(`#${id}-section`);
+    const sectionEl = document.getElementById(`${id}-section`);
     if (sectionEl) {
-      const offset = 120;
-      const rect = sectionEl.getBoundingClientRect();
-      const scrollTop = window.pageYOffset;
-      const elementY = rect.top + scrollTop;
-      const offsetY = elementY - offset;
-
-      window.scrollTo({
-        top     : offsetY,
-        behavior: "smooth"
-      });
+      this._scrollToY(event, () => sectionEl);
+      this._scheduleScrollSpyUnlock();
+    } else {
+      this._programmaticScrollTargetId = null;
     }
 
     this.requestUpdate();
   }
 
+  _toggleDropdown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this._dropdownOpen = !this._dropdownOpen;
+    this.requestUpdate();
+  }
 
+  _selectFromDropdown(e, id) {
+    this.handleClick(e, id);
+    this._dropdownOpen = false;
+    this.requestUpdate();
+  }
 
   scrollToPricing(event) {
-    event.preventDefault();
-    const pricingSection = document.querySelector("#section-pricing");
-    if (pricingSection) {
-      const offset = 120;
-      const elementY = pricingSection.getBoundingClientRect().top + window.pageYOffset;
-      const offsetY = elementY - offset;
-
-      window.scrollTo({
-        top     : offsetY,
-        behavior: "smooth"
-      });
-    }
+    this._scrollToY(event, () => document.getElementById("section-pricing"));
+  }
+
+  _activeLabel(items) {
+    const m = /^anchor-(\d+)$/.exec(this.activeId || "");
+    const n = m ? parseInt(m[1], 10) : 1;
+    const idx = Math.min(Math.max(n - 1, 0), Math.max(0, items.length - 1));
+    return items[idx]?.getAttribute("title") || items[0]?.getAttribute("title") || "Section";
   }
 
   render() {
@@ -82,39 +294,102 @@ class BdAnchorNav extends LitElement {
       (el) => el.tagName === "BD-ANCHOR-NAV-ITEM"
     );
 
+    const linkRow = (cls) => html`
+      <div class="${cls}">
+        ${items.map((item, index) => {
+          const id = `anchor-${index + 1}`;
+          const isActive = this.activeId === id;
+          return html`
+            <a
+              href="#${id}-section"
+              class="${isActive ? "active" : ""}"
+              aria-current=${isActive ? "true" : nothing}
+              @click=${(e) => this.handleClick(e, id)}
+            >
+              ${item.getAttribute("title")}
+            </a>
+          `;
+        })}
+      </div>
+    `;
+
+    const dropdownLabel = this._activeLabel(items);
+
     return html`
-         <nav>
-          <div class="anchor-links">
-            ${items.map((item, index) => {
-              const id = `anchor-${index + 1}`;
-              return html`
-                <a
-                  href="#${id}"
-                  class="${this.activeId === id ? "active" : ""}"
-                @click=${(e) => this.handleClick(e, id)}
-
-                >
-                  ${item.getAttribute("title")}
-                </a>
-              `;
-            })}
+      <nav aria-label=${this.navLabel}>
+        <div
+          class="bd-anchor-nav__inner"
+          part="inner"
+          ?data-mobile-cta-visible=${this._mobileCtaRevealed}
+        >
+          ${linkRow("anchor-links anchor-links--desktop")}
+
+          <div class="bd-anchor-nav__dropdown" part="dropdown">
+            <button
+              type="button"
+              class="bd-anchor-nav__dropdown-toggle"
+              aria-expanded=${this._dropdownOpen ? "true" : "false"}
+              aria-controls=${this._panelId}
+              aria-haspopup="listbox"
+              @click=${this._toggleDropdown}
+            >
+              <span class="bd-anchor-nav__dropdown-label">${dropdownLabel}</span>
+              <span class="bd-anchor-nav__dropdown-chevron" aria-hidden="true">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M5 8l5 5 5-5"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="bd-anchor-nav__dropdown-panel"
+              id=${this._panelId}
+              role="listbox"
+              aria-label=${this.navLabel}
+              ?hidden=${!this._dropdownOpen}
+            >
+              <ul class="bd-anchor-nav__dropdown-list" role="presentation">
+                ${items.map((item, index) => {
+                  const id = `anchor-${index + 1}`;
+                  const isActive = this.activeId === id;
+                  return html`
+                    <li role="presentation">
+                      <button
+                        type="button"
+                        role="option"
+                        class="bd-anchor-nav__dropdown-option ${isActive
+                          ? "bd-anchor-nav__dropdown-option--active"
+                          : ""}"
+                        aria-selected=${isActive ? "true" : "false"}
+                        @click=${(e) => this._selectFromDropdown(e, id)}
+                      >
+                        ${item.getAttribute("title")}
+                      </button>
+                    </li>
+                  `;
+                })}
+              </ul>
+            </div>
           </div>
 
           <div class="bd-cta">
-            <bd-button
-              label="Buy now"
-              kind="danger"
-              size="md"
+            <button
+              type="button"
+              class="bd-anchor-nav__cta"
               part="buy-button"
-              font-size="18px"
-              font-weight="600"
               @click=${(e) => this.scrollToPricing(e)}
             >
               Buy now
-            </bd-button>
+            </button>
           </div>
-        </nav>
-     `;
+        </div>
+      </nav>
+    `;
   }
 }
 

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

@@ -0,0 +1,240 @@
+import { LitElement, css, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../awards/awards-icon.js";
+import { awardsCSS } from "./awards.css.js";
+
+const awardslightOverride = css`
+  .bd-awards-root {
+    gap: 0;
+  }
+`;
+export class AwardsSection extends LitElement {
+  static properties = {
+    tagline       : { type: String },
+    headline      : { type: String },
+    subtext       : { type: String },
+    secretTitle   : { type: String },
+    secretSubtext : { type: String },
+    desktopAwards : { type: Array },
+    features      : { type: Array },
+    _narrow       : { state: true },
+    _featureNarrow: { state: true }
+  };
+
+
+  static styles = [tokens, awardsCSS, awardslightOverride];
+
+  /** @type {MediaQueryList | null} */
+  _mql599 = null;
+  /** @type {MediaQueryList | null} */
+  _mql767 = null;
+  _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.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"
+      }
+    ];
+
+    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."
+      },
+      {
+        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."
+      }
+    ];
+
+    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._featureNarrow = this._mql767.matches;
+      this._mql599.addEventListener("change", this._on599);
+      this._mql767.addEventListener("change", this._on767);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mql599?.removeEventListener("change", this._on599);
+    this._mql767?.removeEventListener("change", this._on767);
+  }
+
+  _renderBadge(award) {
+    const ariaLabel = award.label.replace(/\n/g, " ");
+    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>
+    `;
+  }
+
+  _renderFeature(f) {
+    const narrow = this._featureNarrow;
+    const iconSrc =
+      f.icon === "brain"
+        ? "/assets/machine-learning.svg"
+        : "/assets/analysis.svg";
+
+    return html`
+      <article class="bd-awards-feature-card">
+        <div class="bd-awards-feature-icon" aria-hidden="true">
+          <bd-icon src="${iconSrc}" label=""></bd-icon>
+        </div>
+        <div class="bd-awards-feature-text">
+          ${narrow
+            ? html`<bd-h as="h6" class="bd-awards-feature-title">${f.title}</bd-h>`
+            : html`<bd-h as="h4" class="bd-awards-feature-title">${f.title}</bd-h>`}
+          ${narrow
+            ? html`<bd-p kind="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
+            : html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
+        </div>
+      </article>
+    `;
+  }
+
+  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>`}
+        </div>
+
+        <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>
+          <div class="bd-awards-row" role="presentation">
+            ${this.desktopAwards.slice(3).map((a) => this._renderBadge(a))}
+          </div>
+        </div>
+      </div>
+
+      <div class="bd-awards-lower">
+    `;
+  }
+}
+
+customElements.define("bd-awards-section-light", AwardsSection);