@repobit/dex-system-design 0.23.15 → 0.23.17

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

@@ -1,15 +1,15 @@
-import { LitElement, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../Button/Button.js";
+import "../link/link.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;
+    const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
     return parseFloat(s) * root;
   }
   return parseFloat(s) || 0;
@@ -20,54 +20,58 @@ class BdAnchorNavItem extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
   }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `<slot></slot>`;
-  }
+  connectedCallback() { this.render(); }
+  render() { 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 }
+    _mobileCtaRevealed: { type: Boolean, state: true },
+    ctaLabel          : { type: String, attribute: "cta-label" },
+    ctaHref           : { type: String, attribute: "cta-href" },
+    items             : { type: Array },
+    maxWidth          : { type: String, attribute: "max-width" }
   };
 
   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)
+    this.activeId                    = "";
+    this.navLabel                    = "Section navigation";
+    this._dropdownOpen               = false;
+    this._mobileCtaRevealed          = false;
+    this.ctaLabel                    = "Buy now";
+    this.ctaHref                     = "";
+    this.items                       = null;
+    this.maxWidth                    = "";
+    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._onScrollSpy                = this._onScrollSpy.bind(this);
+    this._onDocumentPointerDown      = this._onDocumentPointerDown.bind(this);
+    this._onKeydown                  = this._onKeydown.bind(this);
+    this._scrollPending              = false;
     this._programmaticScrollTargetId = null;
-    this._unlockScrollSpyTimer = null;
-    this._scrollEndUnlockHandler = null;
+    this._unlockScrollSpyTimer       = null;
+    this._scrollEndUnlockHandler     = null;
+    this._stickyOriginalTop          = null;
+    this._stickyPlaceholder          = null;
+    this._onStickyScroll             = null;
+    this._handleResize               = this._handleResize.bind(this);
   }
 
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("scroll", this._onScrollSpy, { passive: true });
     window.addEventListener("resize", this._onScrollSpy, { passive: true });
+    window.addEventListener("resize", this._handleResize);
     document.addEventListener("pointerdown", this._onDocumentPointerDown, true);
     document.addEventListener("keydown", this._onKeydown, true);
     queueMicrotask(() => this._runScrollSpy());
+    this._initSticky();
   }
 
   disconnectedCallback() {
@@ -75,8 +79,111 @@ class BdAnchorNav extends LitElement {
     this._cancelScrollSpyUnlock();
     window.removeEventListener("scroll", this._onScrollSpy);
     window.removeEventListener("resize", this._onScrollSpy);
+    window.removeEventListener("resize", this._handleResize);
     document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
     document.removeEventListener("keydown", this._onKeydown, true);
+    this._destroySticky();
+  }
+
+  _handleResize() {
+    this._handleMobileFullWidth();
+  }
+
+  _handleMobileFullWidth() {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const ctaSlot = this.shadowRoot?.querySelector('slot[name="cta"]');
+
+    if (!ctaSlot) return;
+
+    const assignedElements = ctaSlot.assignedElements();
+    const buttonLink = assignedElements.find(el => el.tagName === 'BD-BUTTON-LINK');
+
+    if (buttonLink) {
+      if (isMobile) {
+        buttonLink.setAttribute('fullwidth', '');
+      } else {
+        buttonLink.removeAttribute('fullwidth');
+      }
+    }
+  }
+
+  _initSticky() {
+    this._stickyOriginalTop = null;
+
+    this._onStickyScroll = () => {
+      const parent     = this.parentElement;
+      if (!parent) return;
+
+      const parentRect = parent.getBoundingClientRect();
+      const navHeight  = this._stickyPlaceholder
+        ? this._stickyPlaceholder.offsetHeight
+        : this.offsetHeight;
+
+      if (this._stickyOriginalTop === null) {
+        const rect = this.getBoundingClientRect();
+        this._stickyOriginalTop = rect.top + window.scrollY;
+      }
+
+      const passedTop = window.scrollY >= this._stickyOriginalTop;
+      const parentExited = parentRect.bottom <= navHeight;
+
+      if (passedTop && !parentExited) {
+        if (!this.classList.contains("is-sticky")) {
+          if (!this._stickyPlaceholder) {
+            this._stickyPlaceholder = document.createElement("div");
+            this._stickyPlaceholder.style.height  = `${this.offsetHeight}px`;
+            this._stickyPlaceholder.style.display = "block";
+            this.parentNode.insertBefore(this._stickyPlaceholder, this);
+          }
+          this.classList.add("is-sticky");
+        }
+        this.style.setProperty("--sticky-left",  `${parentRect.left}px`);
+        this.style.setProperty("--sticky-width", `${parentRect.width}px`);
+      } else {
+        if (this.classList.contains("is-sticky")) {
+          this.classList.remove("is-sticky");
+          this.style.removeProperty("--sticky-left");
+          this.style.removeProperty("--sticky-width");
+          if (this._stickyPlaceholder) {
+            this._stickyPlaceholder.remove();
+            this._stickyPlaceholder = null;
+          }
+        }
+      }
+    };
+
+    this._onStickyResize = () => {
+      this._stickyOriginalTop = null;
+      if (this.classList.contains("is-sticky")) {
+        const parent     = this.parentElement;
+        const parentRect = parent.getBoundingClientRect();
+        this.style.setProperty("--sticky-left",  `${parentRect.left}px`);
+        this.style.setProperty("--sticky-width", `${parentRect.width}px`);
+      }
+      this._onStickyScroll();
+    };
+
+    window.addEventListener("scroll", this._onStickyScroll, { passive: true });
+    window.addEventListener("resize", this._onStickyResize, { passive: true });
+    requestAnimationFrame(() => this._onStickyScroll());
+  }
+
+  _destroySticky() {
+    if (this._onStickyScroll) {
+      window.removeEventListener("scroll", this._onStickyScroll);
+      this._onStickyScroll = null;
+    }
+    if (this._onStickyResize) {
+      window.removeEventListener("resize", this._onStickyResize);
+      this._onStickyResize = null;
+    }
+    if (this._stickyPlaceholder) {
+      this._stickyPlaceholder.remove();
+      this._stickyPlaceholder = null;
+    }
+    this.style.removeProperty("--sticky-left");
+    this.style.removeProperty("--sticky-width");
+    this.classList.remove("is-sticky");
   }
 
   _cancelScrollSpyUnlock() {
@@ -90,7 +197,6 @@ class BdAnchorNav extends LitElement {
     }
   }
 
-  /** After in-nav navigation, ignore scrollspy until scroll finishes (avoids flashing 2→3→4). */
   _scheduleScrollSpyUnlock() {
     this._cancelScrollSpyUnlock();
     const onScrollEnd = () => {
@@ -99,7 +205,7 @@ class BdAnchorNav extends LitElement {
         this._unlockScrollSpyTimer = null;
       }
       window.removeEventListener("scrollend", onScrollEnd);
-      this._scrollEndUnlockHandler = null;
+      this._scrollEndUnlockHandler     = null;
       this._programmaticScrollTargetId = null;
       this._runScrollSpy();
     };
@@ -142,52 +248,63 @@ class BdAnchorNav extends LitElement {
     });
   }
 
+  _resolvedItems() {
+    if (this.items && this.items.length) {
+      return this.items.map((item, i) => ({
+        title: item.title,
+        href : item.href || `#anchor-${i + 1}-section`,
+        id   : `anchor-${i + 1}`
+      }));
+    }
+    return Array.from(this.children)
+      .filter((el) => el.tagName === "BD-ANCHOR-NAV-ITEM")
+      .map((el, i) => ({
+        title: el.getAttribute("title"),
+        href : el.getAttribute("href") || `#anchor-${i + 1}-section`,
+        id   : `anchor-${i + 1}`
+      }));
+  }
+
   _runScrollSpy() {
-    const count = this._navItemCount();
-    let next = this.activeId;
+    const resolved = this._resolvedItems();
+    const count    = resolved.length;
+    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`);
+        const sectionId = resolved[i].href.replace(/^#/, "") || `anchor-${i + 1}-section`;
+        const el        = document.getElementById(sectionId);
         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");
+    const isMobile  = window.matchMedia("(max-width: 768px)").matches;
+    const firstHref = resolved[0]?.href.replace(/^#/, "") || "anchor-1-section";
+    const first     = document.getElementById(firstHref);
     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 (!isMobile)   nextCta = true;
+    else if (!first) nextCta = true;
+    else             nextCta = first.getBoundingClientRect().bottom <= 0;
 
     if (this.activeId !== next || this._mobileCtaRevealed !== nextCta) {
-      this.activeId = next;
+      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 n = this._navItemCount();
-    if (n) {
+    const resolved = this._resolvedItems();
+    if (resolved.length) {
       this.activeId = "anchor-1";
       this.requestUpdate();
     }
     queueMicrotask(() => this._runScrollSpy());
+    this._handleMobileFullWidth();
   }
 
   updated(changedProperties) {
@@ -199,7 +316,6 @@ class BdAnchorNav extends LitElement {
     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;
@@ -216,15 +332,11 @@ class BdAnchorNav extends LitElement {
     );
   }
 
-  /**
-   * 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 barPx    = this.offsetHeight;
     const insetRaw = getComputedStyle(this).getPropertyValue("--spacing-8")
       .trim();
-    const insetPx = parseLengthToPx(insetRaw) || 8;
+    const insetPx  = parseLengthToPx(insetRaw) || 8;
     if (barPx > 0) return barPx + insetPx;
     const fallback = getComputedStyle(this).getPropertyValue("--spacing-128")
       .trim();
@@ -235,33 +347,28 @@ class BdAnchorNav extends LitElement {
     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" &&
+    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"
-    });
+    window.scrollTo({ top: elementY - offset, behavior: prefersReduced ? "auto" : "smooth" });
   }
 
-  handleClick(event, id) {
+  handleClick(event, id, href) {
     event.preventDefault();
     this._cancelScrollSpyUnlock();
     this._programmaticScrollTargetId = id;
-    this.activeId = id;
-
-    const sectionEl = document.getElementById(`${id}-section`);
+    this.activeId                    = id;
+    const sectionId = (href || "").replace(/^#/, "") || `${id}-section`;
+    const sectionEl = document.getElementById(sectionId);
     if (sectionEl) {
       this._scrollToY(event, () => sectionEl);
       this._scheduleScrollSpyUnlock();
     } else {
       this._programmaticScrollTargetId = null;
     }
-
     this.requestUpdate();
   }
 
@@ -272,54 +379,51 @@ class BdAnchorNav extends LitElement {
     this.requestUpdate();
   }
 
-  _selectFromDropdown(e, id) {
-    this.handleClick(e, id);
+  _selectFromDropdown(e, id, href) {
+    this.handleClick(e, id, href);
     this._dropdownOpen = false;
     this.requestUpdate();
   }
 
-  scrollToPricing(event) {
-    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";
+  _activeLabel(resolved) {
+    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, resolved.length - 1));
+    return resolved[idx]?.title || resolved[0]?.title || "Section";
   }
 
   render() {
-    const items = Array.from(this.children).filter(
-      (el) => el.tagName === "BD-ANCHOR-NAV-ITEM"
-    );
+    const resolved      = this._resolvedItems();
+    const dropdownLabel = this._activeLabel(resolved);
 
     const linkRow = (cls) => html`
       <div class="${cls}">
-        ${items.map((item, index) => {
-          const id = `anchor-${index + 1}`;
+        ${resolved.map(({ id, title, href }) => {
           const isActive = this.activeId === id;
           return html`
-            <a
-              href="#${id}-section"
-              class="${isActive ? "active" : ""}"
+            <bd-link
+              href="${href}"
+              kind="${isActive ? "primary" : "secondary"}"
+              no-underline
+              class="anchor-link ${isActive ? "active" : ""}"
+              color="var(--color-neutral-900)"
+              ?active=${isActive}
               aria-current=${isActive ? "true" : nothing}
-              @click=${(e) => this.handleClick(e, id)}
-            >
-              ${item.getAttribute("title")}
-            </a>
+              @click=${(e) => this.handleClick(e, id, href)}
+            >${title}</bd-link>
           `;
         })}
       </div>
     `;
 
-    const dropdownLabel = this._activeLabel(items);
+    const innerStyle = this.maxWidth ? `max-width: ${this.maxWidth};` : '';
 
     return html`
       <nav aria-label=${this.navLabel}>
         <div
           class="bd-anchor-nav__inner"
           part="inner"
+          style="${innerStyle}"
           ?data-mobile-cta-visible=${this._mobileCtaRevealed}
         >
           ${linkRow("anchor-links anchor-links--desktop")}
@@ -336,13 +440,7 @@ class BdAnchorNav extends LitElement {
               <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"
-                  />
+                  <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </span>
             </button>
@@ -354,22 +452,17 @@ class BdAnchorNav extends LitElement {
               ?hidden=${!this._dropdownOpen}
             >
               <ul class="bd-anchor-nav__dropdown-list" role="presentation">
-                ${items.map((item, index) => {
-                  const id = `anchor-${index + 1}`;
+                ${resolved.map(({ id, title, href }) => {
                   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"
-                          : ""}"
+                        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>
+                        @click=${(e) => this._selectFromDropdown(e, id, href)}
+                      >${title}</button>
                     </li>
                   `;
                 })}
@@ -378,14 +471,7 @@ class BdAnchorNav extends LitElement {
           </div>
 
           <div class="bd-cta">
-            <button
-              type="button"
-              class="bd-anchor-nav__cta"
-              part="buy-button"
-              @click=${(e) => this.scrollToPricing(e)}
-            >
-              Buy now
-            </button>
+            <slot name="cta"></slot>
           </div>
         </div>
       </nav>
@@ -394,4 +480,4 @@ class BdAnchorNav extends LitElement {
 }
 
 customElements.define("bd-anchor-nav-item", BdAnchorNavItem);
-customElements.define("bd-anchor-nav", BdAnchorNav);
+customElements.define("bd-anchor-nav", BdAnchorNav);