@repobit/dex-system-design 0.23.10 → 0.23.11

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.11](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.10...@repobit/dex-system-design@0.23.11) (2026-04-01)
+
+### Bug Fixes
+
+* **DEX-1014:** fix gap and card sizes
+* **DEX-1014:** new changes for anchor-nav and compare to solve some issues
+
+
 ## [0.23.10](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.9...@repobit/dex-system-design@0.23.10) (2026-03-31)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.10",
+  "version": "0.23.11",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -86,5 +86,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "d6c2015f70aedf55bb7fe4860b3c2ce1978a52f4"
+  "gitHead": "d585162a40165e7aa8f96463433be03d5aef2f05"
 }

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

@@ -1,92 +1,341 @@
 import { css } from "lit";
 
 export const anchorNavStyles = css`
- :host {
-  padding: var(--spacing-0) 15em;
-  margin: var(--spacing-0) auto;
-  --bd-accesibility-focus: var(--color-blue-500);
-}
-
-.bd-container {
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 2.5em;
-}
-
-a:focus-visible {
-  outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-  outline-offset: var(--spacing-2);
-  border-radius: var(--space-2xs);
-}
-
-nav {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid #f0f0f0;
-  border-bottom: 1px solid #f0f0f0;
-  padding: var(--spacing-10) 15em;
-  width: 100%;
-  box-sizing: border-box;
-  background: white;
-  margin-bottom: var(--spacing-64);
-}
-
-.bd-container {
-  padding: 50px;
-}
-
-
-[id$="-section"] {
-  scroll-margin-top: 120px;
-}
-
-.anchor-links {
-  position: relative;
-  display: flex;
-  gap: var(--spacing-32);
-}
-
-a {
-  position: relative;
-  text-decoration: none;
-  color: black;
-  font-weight: 600;
-  padding: var(--spacing-10) var(--spacing-0);
-  display: inline-block;
-  font-size: var(--typography-body-regular-fontSize) !important;
-  font-family: var(--typography-fontFamily-sans) !important;
-}
-
-a::after {
-  content: "";
-  position: absolute;
-  left: var(--spacing-0);
-  bottom: -14px;
-  width: 0%;
-  height: 3px;
-  background-color: #006dff;
-  transition: width 0.3s ease;
-}
-
-a.active::after {
-  width: 100%;
-}
-
-`;
-
-export const anchorNavItemStyles = css`
   :host {
-    display: none;
+    display: block;
+    position: sticky;
+    top: var(--spacing-0);
+    z-index: 1000;
+    border-top: var(--border-width-1) solid var(--color-neutral-100);
+    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
+    padding-block: var(--spacing-10);
+    padding-inline: var(--layout-ensemble-inline-padding);
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--color-neutral-0);
+    margin-bottom: var(--spacing-0);
+    --bd-accesibility-focus: var(--color-blue-500);
   }
 
-  :host([active]) {
+  a:focus-visible,
+  .bd-anchor-nav__cta:focus-visible,
+  .bd-anchor-nav__dropdown-toggle:focus-visible,
+  .bd-anchor-nav__dropdown-option:focus-visible {
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
+    border-radius: var(--space-2xs);
+  }
+
+  nav {
     display: block;
-    padding: var(--spacing-0) 15em;
-    margin: var(--spacing-0) auto;
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bd-anchor-nav__inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-32);
+    width: 100%;
+    max-width: var(--layout-compare-grid-max);
+    margin-inline: auto;
+    box-sizing: border-box;
+  }
+
+  .anchor-links {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16) var(--spacing-32);
+    row-gap: var(--spacing-8);
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .anchor-links--desktop {
+    display: flex;
+  }
+
+  .bd-anchor-nav__dropdown {
+    display: none;
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ── Dropdown toggle ── */
+
+  .bd-anchor-nav__dropdown-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-12);
+    width: 100%;
+    min-height: var(--dimension-48px);
+    padding-block: var(--spacing-10);
+    padding-inline: var(--spacing-16);
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+    background: var(--color-neutral-25);
+    border: var(--border-width-1) solid var(--color-neutral-200);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      background var(--transition-duration-fast) var(--transition-easing-smooth),
+      border-color var(--transition-duration-fast) var(--transition-easing-smooth),
+      border-radius var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-toggle:hover {
+    background: var(--color-neutral-50);
+    border-color: var(--color-neutral-300);
+  }
+
+  .bd-anchor-nav__dropdown-toggle[aria-expanded="true"] {
+    background: var(--color-neutral-50);
+    border-color: var(--color-blue-200);
+    border-radius: var(--radius-lg) var(--radius-lg) var(--spacing-0) var(--spacing-0);
+  }
+
+  .bd-anchor-nav__dropdown-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform-origin: left center;
+  }
+
+  .bd-anchor-nav__dropdown-chevron {
+    flex: 0 0 auto;
+    display: flex;
+    color: var(--color-neutral-600);
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-toggle[aria-expanded="true"] .bd-anchor-nav__dropdown-chevron {
+    transform: rotate(180deg);
+    color: var(--color-blue-500);
+  }
+
+  /* ── Dropdown panel ── */
+
+  .bd-anchor-nav__dropdown-panel {
+    position: absolute;
+    left: var(--spacing-0);
+    right: var(--spacing-0);
+    top: 100%;
+    z-index: 1001;
+    max-height: min(50vh, 20rem);
+    overflow-y: auto;
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-blue-200);
+    border-top: none;
+    border-radius: var(--spacing-0) var(--spacing-0) var(--radius-lg) var(--radius-lg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .bd-anchor-nav__dropdown-list {
+    list-style: none;
+    margin: var(--spacing-0);
+    padding: var(--spacing-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+
+  /* ── Dropdown options ── */
+
+  .bd-anchor-nav__dropdown-option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: var(--dimension-48px);
+    padding-block: var(--spacing-12);
+    padding-inline: var(--spacing-16);
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-fontWeight-normal);
+    color: var(--color-neutral-900);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      color var(--transition-duration-fast) var(--transition-easing-smooth),
+      background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-option:hover:not(.bd-anchor-nav__dropdown-option--active) {
+    color: var(--color-blue-500);
+    background: var(--color-neutral-25);
+  }
+
+  .bd-anchor-nav__dropdown-option--active {
+    font-weight: var(--typography-fontWeight-semibold);
+    background: var(--color-blue-50);
+    color: var(--color-blue-700);
+  }
+
+  .bd-anchor-nav__dropdown-option--active:hover {
+    color: var(--color-blue-700);
+    background: var(--color-blue-50);
+  }
+
+  /* ── Desktop links ── */
+
+  a {
+    position: relative;
+    text-decoration: none;
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-normal);
+    padding: var(--spacing-10) var(--spacing-0);
+    display: inline-block;
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-body-regular-fontFamily);
+    transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  a.active {
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  a:hover:not(.active) {
+    color: var(--color-blue-500);
+  }
+
+  a.active:hover {
+    color: var(--color-neutral-900);
+  }
+
+  a::after {
+    content: "";
+    position: absolute;
+    left: var(--spacing-0);
+    bottom: calc(-1 * var(--spacing-14));
+    width: 0%;
+    height: var(--border-width-3);
+    background-color: var(--color-blue-500);
+    transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
+  }
+
+  a.active::after {
+    width: 100%;
+  }
+
+  /* ── CTA button ── */
+
+  .bd-anchor-nav__cta {
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-semibold);
+    line-height: var(--typography-lineHeight-normal);
+    padding: var(--spacing-10) var(--spacing-20);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    background: var(--color-red-500);
+    color: var(--color-neutral-0);
+    transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__cta:hover {
+    background: var(--color-red-600);
+  }
+
+  .bd-anchor-nav__cta:active {
+    background: var(--color-red-700);
+  }
+
+  /* ── Animations ── */
+
+  @keyframes bd-anchor-nav-dropdown-label-swap {
+    from {
+      opacity: 0.35;
+      transform: translateY(var(--spacing-4));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(var(--spacing-0));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    a::after,
+    .bd-anchor-nav__dropdown-chevron,
+    .bd-cta,
+    .bd-anchor-nav__dropdown-label--swap {
+      animation: none !important;
+    }
+  }
+
+  /* ── Mobile ── */
+
+  @media (max-width: 768px) {
+    :host {
+      padding-block: var(--spacing-10);
+      padding-inline: var(--layout-ensemble-inline-padding);
+    }
+
+    .bd-anchor-nav__inner {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-16);
+    }
+
+    .anchor-links--desktop {
+      display: none !important;
+    }
+
+    .bd-anchor-nav__dropdown {
+      display: block;
+    }
+
+    .bd-anchor-nav__dropdown-label.bd-anchor-nav__dropdown-label--swap {
+      animation: bd-anchor-nav-dropdown-label-swap var(--transition-duration-normal)
+        var(--transition-easing-smooth);
+    }
+
+    .bd-cta {
+      align-self: stretch;
+      display: block;
+      overflow: hidden;
+      max-height: var(--spacing-0);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--spacing-8)));
+      pointer-events: none;
+      margin-top: calc(-1 * var(--spacing-16));
+      transition:
+        max-height var(--transition-duration-slow) var(--transition-easing-ease-out),
+        opacity var(--transition-duration-normal) var(--transition-easing-smooth),
+        transform var(--transition-duration-normal) var(--transition-easing-smooth),
+        margin-top var(--transition-duration-normal) var(--transition-easing-smooth);
+    }
+
+    .bd-anchor-nav__inner[data-mobile-cta-visible] .bd-cta {
+      max-height: var(--spacing-128);
+      opacity: 1;
+      transform: translateY(var(--spacing-0));
+      pointer-events: auto;
+      margin-top: var(--spacing-0);
+    }
+
+    .bd-anchor-nav__cta {
+      width: 100%;
+      box-sizing: border-box;
+    }
   }
-`;
+`;

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

@@ -1,8 +1,13 @@
-import { LitElement, html } from "lit";
+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 },
@@ -16,7 +21,8 @@ export class AwardsSection extends LitElement {
     _featureNarrow: { state: true }
   };
 
-  static styles = [tokens, awardsCSS];
+
+  static styles = [tokens, awardsCSS, awardslightOverride];
 
   /** @type {MediaQueryList | null} */
   _mql599 = null;

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

@@ -1,9 +1,10 @@
 import { html } from "lit";
-import "../awards/awards-light.js";
 import "../heading/heading.js";
 import "../image/image.js";
 import "../link/link.js";
 import "../paragraph/paragraph.js";
+import "./awards-light.js";
+import "./awards.js";
 
 export default {
   title     : "Components/Awards Section Light",
@@ -14,40 +15,24 @@ export default {
     docs  : {
       description: {
         component: `
-**AwardsSection** is a Lit web component that showcases Bitdefender's industry awards and trust signals.
+**AwardsSectionLight** is a lightweight variant of the AwardsSection component that renders only the trust banner and award badges — without the "What's our secret" section or feature cards.
 
-It includes:
-- A trust banner with tagline, headline, and subtext
-- A responsive awards bar (7 badges split into two rows)
-- A "What's our secret" section
-- Two feature cards (Machine Learning & Behavioral Analysis)
-
-### Responsive Behavior
-| Breakpoint | Behavior |
-|---|---|
-| \`≤ 599px\` | Narrow layout: smaller typography, compact badges |
-| \`≤ 767px\` | Feature cards use small typography |
-| \`≥ 768px\` | Full desktop layout |
+### Usage
+\`\`\`html
+<bd-awards-section-light></bd-awards-section-light>
+\`\`\`
 
 ### Attributes
-| Attribute      | Type   | Default | Description                              |
-|----------------|--------|---------|------------------------------------------|
-| \`tagline\`      | String | —       | Small text above the headline            |
-| \`headline\`     | String | —       | Main heading of the trust banner         |
-| \`subtext\`      | String | —       | Supporting paragraph below the headline  |
-| \`secretTitle\`  | String | —       | Heading of the "What's our secret" block |
-| \`secretSubtext\`| String | —       | Subtext of the "What's our secret" block |
-| \`desktopAwards\`| Array  | —       | Award badge objects (see below)          |
-| \`features\`     | Array  | —       | Feature card objects (see below)         |
+| Attribute      | Type   | Default | Description                             |
+|----------------|--------|---------|-----------------------------------------|
+| \`tagline\`      | String | —       | Small text above the headline           |
+| \`headline\`     | String | —       | Main heading of the trust banner        |
+| \`subtext\`      | String | —       | Supporting paragraph below the headline |
+| \`desktopAwards\`| Array  | —       | Award badge objects                     |
 
 ### Badge object shape
 \`\`\`js
 { id: string, label: string, type: "red" | "dark", format: "svg", src: string }
-\`\`\`
-
-### Feature object shape
-\`\`\`js
-{ icon: "brain" | "chart", title: string, description: string }
 \`\`\`
         `
       }
@@ -69,16 +54,6 @@ It includes:
       description: "Supporting paragraph below the headline",
       table      : { type: { summary: "string" }, category: "Content" }
     },
-    secretTitle: {
-      control    : "text",
-      description: "Title of the 'What's our secret' section",
-      table      : { type: { summary: "string" }, category: "Content" }
-    },
-    secretSubtext: {
-      control    : "text",
-      description: "Subtext of the 'What's our secret' section",
-      table      : { type: { summary: "string" }, category: "Content" }
-    },
     desktopAwards: {
       control    : "object",
       description: "Array of award badge objects",
@@ -86,14 +61,6 @@ It includes:
         type    : { summary: "Array<{ id, label, type, format, src }>" },
         category: "Badges"
       }
-    },
-    features: {
-      control    : "object",
-      description: "Array of feature card objects",
-      table      : {
-        type    : { summary: "Array<{ icon, title, description }>" },
-        category: "Features"
-      }
     }
   }
 };
@@ -105,8 +72,6 @@ const defaultArgs = {
   tagline      : "You're Making A Great Choice",
   headline     : "World-class security software you can trust. Always.",
   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",
@@ -157,18 +122,6 @@ const defaultArgs = {
       src   : "/assets/top-product.svg",
       id    : "top-product"
     }
-  ],
-  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."
-    }
   ]
 };
 
@@ -177,10 +130,7 @@ const render = (args) => html`
     .tagline=${args.tagline}
     .headline=${args.headline}
     .subtext=${args.subtext}
-    .secretTitle=${args.secretTitle}
-    .secretSubtext=${args.secretSubtext}
     .desktopAwards=${args.desktopAwards}
-    .features=${args.features}
   ></bd-awards-section-light>
 `;
 
@@ -195,7 +145,7 @@ export const Default = {
     viewport: { defaultViewport: "desktop" },
     docs    : {
       description: {
-        story: "Full desktop layout with all 7 award badges split across two rows (3 top + 4 bottom) and both feature cards."
+        story: "Full desktop layout. Trust banner with tagline, headline, subtext, and all 7 award badges split across two rows (3 top + 4 bottom)."
       }
     }
   }
@@ -212,7 +162,7 @@ export const Mobile = {
     viewport: { defaultViewport: "mobile1" },
     docs    : {
       description: {
-        story: "Mobile layout at 375px. The `_narrow` state activates at ≤599px, switching to smaller typography variants (`bd-p kind='small'`, `bd-h as='h4'`) and compact badge sizes."
+        story: "Mobile layout at 375px. The `_narrow` state activates at ≤599px, switching to smaller typography variants and compact badge sizes."
       }
     }
   }
@@ -229,30 +179,28 @@ export const Tablet = {
     viewport: { defaultViewport: "tablet" },
     docs    : {
       description: {
-        story: "Tablet layout at 768px. Desktop typography is used since the viewport exceeds 599px. Feature cards switch to small text at ≤767px."
+        story: "Tablet layout at 768px. Desktop typography is active since the viewport exceeds 599px."
       }
     }
   }
 };
 
 
-// ─── Custom text content ──────────────────────────────────────────────────────
+// ─── Custom text ──────────────────────────────────────────────────────────────
 
 export const CustomContent = {
   name: "Custom Text Content",
   args: {
     ...defaultArgs,
-    tagline      : "Trusted by Millions Worldwide",
-    headline     : "Award-winning protection for every device.",
-    subtext      : "From homes to enterprises, Bitdefender has been recognised by the world's top security testing labs year after year.",
-    secretTitle  : "Why we win",
-    secretSubtext: "Our proprietary AI engine processes over 500 billion queries per day to stay ahead of the most sophisticated threats."
+    tagline : "Trusted by Millions Worldwide",
+    headline: "Award-winning protection for every device.",
+    subtext : "From homes to enterprises, Bitdefender has been recognised by the world's top security testing labs year after year."
   },
   render,
   parameters: {
     docs: {
       description: {
-        story: "All text props replaced with custom values. Use the Controls panel to live-edit any string prop."
+        story: "All text props replaced with custom values. Use the Controls panel to live-edit tagline, headline, and subtext."
       }
     }
   }
@@ -293,7 +241,7 @@ export const FewBadges = {
   parameters: {
     docs: {
       description: {
-        story: "Only 3 badges passed. The first row (`slice(0, 3)`) is full, the second row (`slice(3)`) renders empty. Verifies no layout breakage with fewer items."
+        story: "Only 3 badges passed. The first row (`slice(0, 3)`) is full, the second row (`slice(3)`) renders empty. Verifies no layout breakage."
       }
     }
   }
@@ -320,7 +268,7 @@ export const SingleBadge = {
   parameters: {
     docs: {
       description: {
-        story: "Minimum edge case: a single badge. Both row slices receive at most one item. Ensures no crash or layout breakage."
+        story: "Minimum edge case: a single badge. Ensures no crash or layout breakage."
       }
     }
   }
@@ -339,7 +287,7 @@ export const AllDarkBadges = {
   parameters: {
     docs: {
       description: {
-        story: "All badges set to `type: 'dark'`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge in `_renderBadge`."
+        story: "All badges set to `type: 'dark'`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge."
       }
     }
   }
@@ -365,36 +313,6 @@ export const AllRedBadges = {
 };
 
 
-// ─── Custom features ──────────────────────────────────────────────────────────
-
-export const CustomFeatures = {
-  name: "Custom Feature Cards",
-  args: {
-    ...defaultArgs,
-    features: [
-      {
-        icon       : "brain",
-        title      : "AI-Powered Threat Detection",
-        description: "Our next-generation AI engine analyses over 500 billion security events per day, identifying and neutralising threats before they can cause harm to your system."
-      },
-      {
-        icon       : "chart",
-        title      : "Real-Time Protection",
-        description: "Continuous monitoring of all active processes, network connections, and file system changes ensures that threats are caught the moment they appear — with zero performance impact."
-      }
-    ]
-  },
-  render,
-  parameters: {
-    docs: {
-      description: {
-        story: "Custom feature card content. The `icon` field accepts `'brain'` (maps to `/assets/machine-learning.svg`) or `'chart'` (maps to `/assets/analysis.svg`)."
-      }
-    }
-  }
-};
-
-
 // ─── Small mobile ─────────────────────────────────────────────────────────────
 
 export const SmallMobile = {
@@ -429,7 +347,7 @@ export const Playground = {
   parameters: {
     docs: {
       description: {
-        story: "Fully interactive story. Use the Controls panel to modify every prop in real time: text content, badge arrays, and feature cards."
+        story: "Fully interactive story. Use the Controls panel to modify every prop in real time: text content and badge arrays."
       }
     }
   }

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

@@ -154,7 +154,7 @@ export const awardsCSS = css`
     align-items: stretch;
     gap: var(--spacing-32);
     width: 100%;
-    max-width: 1228px;
+    max-width: 940px;
     margin: 0 auto;
     padding: 0 var(--spacing-24);
     box-sizing: border-box;

package/src/components/compare/compare.css.js

@@ -17,13 +17,17 @@ export default css`
   --cs-bar-track-border:   var(--color-neutral-200);
   --cs-bar-height:         var(--dimension-48px);
   --cs-gap:                var(--spacing-32);
-  /* Figma layout width; between --content-width-max (1200) and --grid-container-max-xxl (1320) */
   --cs-grid-max:           1228px;
 }
 
-:host(compare-card),
+:host(compare-card) {
+  display: block;
+  height:  100%;
+}
+
 :host(compare-bar) {
   display: block;
+  width:   100%;
 }
 
 
@@ -32,15 +36,15 @@ export default css`
 ──────────────────────────────────────────────────────────────── */
 
 .cs-sr-only {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0, 0, 0, 0);
+  position:    absolute;
+  width:       1px;
+  height:      1px;
+  padding:     0;
+  margin:      -1px;
+  overflow:    hidden;
+  clip:        rect(0, 0, 0, 0);
   white-space: nowrap;
-  border:   0;
+  border:      0;
 }
 
 .cs-section {
@@ -70,6 +74,7 @@ export default css`
   max-width:             var(--cs-grid-max);
   margin:                0 auto;
   justify-content:       center;
+  align-items:           stretch;
 }
 
 @media (max-width: 768px) {
@@ -80,7 +85,7 @@ export default css`
 
 
 /* ──────────────────────────────────────────────────────────────
-   3. compare-card (nearest radii: 20px Figma → --radius-3xl 24px)
+   3. compare-card
 ──────────────────────────────────────────────────────────────── */
 
 .card {
@@ -99,6 +104,7 @@ export default css`
   flex-direction: column;
   align-items:    flex-start;
   gap:            var(--spacing-8);
+  flex:           1 1 auto;
 }
 
 .card-icon-wrap {
@@ -109,10 +115,10 @@ export default css`
 
 .card-icon-wrap bd-img {
   display: block;
-  width: 100%;
-  height: 100%;
+  width:   100%;
+  height:  100%;
 }
- 
+
 .card-text-wrap {
   display:        flex;
   flex-direction: column;
@@ -133,22 +139,20 @@ export default css`
   flex-direction: column;
   gap:            var(--spacing-8);
   align-self:     stretch;
+  flex:           0 0 auto;
 }
 
 .card-footnote {
   margin: 0;
   color:  var(--color-neutral-900);
+  flex:   0 0 auto;
 }
 
 
 /* ──────────────────────────────────────────────────────────────
-   4. compare-bar (10px radius Figma → --radius-xl 12px)
+   4. compare-bar
 ──────────────────────────────────────────────────────────────── */
 
-:host(compare-bar) {
-  width: 100%;
-}
-
 .bar-track {
   position:      relative;
   height:        var(--cs-bar-height);
@@ -172,7 +176,7 @@ export default css`
   box-sizing:      border-box;
   background:      transparent;
   transition:      width calc(var(--transition-duration-slower) + 300ms)
-    cubic-bezier(0.22, 1, 0.36, 1);
+                   cubic-bezier(0.22, 1, 0.36, 1);
   min-width:       0;
 }
 
@@ -239,29 +243,28 @@ export default css`
 ══════════════════════════════════════════════════════════════ */
 
 :host(bd-compare-section.theme-green) {
-  --cs-bar-primary-bg:   var(--color-green-500);
+  --cs-bar-primary-bg: var(--color-green-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-green-500);
   --cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
 }
 
 :host(bd-compare-section.theme-red) {
-  --cs-bar-primary-bg:   var(--color-red-500);
+  --cs-bar-primary-bg: var(--color-red-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-red-500);
   --cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
 }
 
-/* No violet in DS; keep marketing accent */
 :host(bd-compare-section.theme-purple) {
-  --cs-bar-primary-bg:   #7c3aed;
+  --cs-bar-primary-bg: #7c3aed;
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     #7c3aed;
   --cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
 }
 
 :host(bd-compare-section.theme-dark) {
-  --cs-bar-primary-bg:   var(--color-blue-400);
+  --cs-bar-primary-bg: var(--color-blue-400);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-blue-400);
   --cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
@@ -280,4 +283,4 @@ export default css`
   --cs-bar-height: var(--dimension-40px);
   --cs-gap:        var(--spacing-24);
 }
-`;
+`;

package/src/components/compare/compare.stories.js

@@ -101,7 +101,7 @@ export const Default = {
     >
       <compare-card
         title="Best Protection"
-        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
+        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
         footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
         footnote-href="${AV_TEST_URL}"
         icon-src="${SHIELD_ICON}"