@repobit/dex-system-design 0.23.10 → 0.23.12

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;