@repobit/dex-system-design 0.25.1 → 0.25.2

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.25.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.1...@repobit/dex-system-design@0.25.2) (2026-10-01)
+
+### Bug Fixes
+
+* **DEX-1014:** anchor nav component adjustments
+* **DEX-1014:** anchor nav component adjustments
+
+
 ## [0.25.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.0...@repobit/dex-system-design@0.25.1) (2026-09-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.38",
-    "@repobit/dex-store-elements": "2.1.8",
+    "@repobit/dex-store": "1.6.39",
+    "@repobit/dex-store-elements": "2.1.9",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "252088eff23e9de9125bd60243283eba2f86a909"
+  "gitHead": "14ac669a586110a33a6f8d470e6d9ce8c11a4bd7"
 }

package/src/components/ai-guardian-demo.stories.js

@@ -93,7 +93,7 @@ function aiGuardianBody() {
         aria-label="Page sections"
         cta-label="Download BETA Today"
         cta-href="#download"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Overview" },
           { title: "Compatibility" },
@@ -500,7 +500,7 @@ function skillScannerBody() {
     <div style="max-width: 1200px; margin: 0 auto;">
       <bd-anchor-nav
         aria-label="Skill Scanner sections"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Install" },
           { title: "Overview" },
@@ -958,7 +958,7 @@ function vpnBody() {
     <div style="max-width: 1200px; margin: 0 auto;">
       <bd-anchor-nav
         aria-label="VPN for AI Agents sections"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Overview" },
           { title: "Protection" },
@@ -1444,7 +1444,7 @@ Interactive demo: sticky top-level product nav (\`AI Guardian\` / \`Skill Scanne
 navigation — clicking a tab intercepts the anchor click and swaps local state instead
 of following the href (which has no route in Storybook and would 404).
 
-Both/all anchor-nav bars use \`sticky-top="65px"\` so they pin themselves *below*
+Both/all anchor-nav bars use \`sticky-top="76px"\` so they pin themselves *below*
 the sticky page-switcher instead of overlapping it once scrolled. That value
 is an estimate — measure bd-page-switcher's real rendered height in DevTools
 and adjust if the bars still overlap or leave a gap.

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

@@ -7,6 +7,8 @@ export const anchorNavStyles = css`
     background: var(--color-neutral-0);
     --bd-accesibility-focus: var(--color-blue-500);
     --anchor-nav-max-width: 1290px;
+    border-top: var(--border-width-1) solid var(--color-neutral-100);
+    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
   }
 
   :host(.is-sticky) {
@@ -28,8 +30,6 @@ export const anchorNavStyles = css`
     padding: var(--spacing-0);
     width: 100%;
     box-sizing: border-box;
-    border-top: var(--border-width-1) solid var(--color-neutral-100);
-    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
   }
 
   .bd-anchor-nav__inner {
@@ -46,7 +46,6 @@ export const anchorNavStyles = css`
     box-sizing: border-box;
   }
 
-  
   .anchor-link:focus-visible,
   .bd-anchor-nav__cta:focus-visible,
   .bd-anchor-nav__dropdown-toggle:focus-visible,
@@ -115,17 +114,17 @@ export const anchorNavStyles = css`
     text-decoration: none !important;
   }
 
-
-  .anchor-indicator {
+   .anchor-indicator {
     position: absolute;
     left: 0;
-    bottom: calc(-1 * var(--spacing-14));
+    top: 0;
     width: 0;
     height: var(--border-width-3);
     background-color: var(--color-blue-500);
     transform: translateX(0);
     transition:
       transform var(--transition-duration-slow) var(--transition-easing-ease-out),
+      top var(--transition-duration-slow) var(--transition-easing-ease-out),
       width var(--transition-duration-slow) var(--transition-easing-ease-out);
     pointer-events: none;
   }

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

@@ -34,10 +34,6 @@ class BdAnchorNav extends LitElement {
     ctaHref           : { type: String, attribute: "cta-href" },
     items             : { type: Array },
     maxWidth          : { type: String, attribute: "max-width" },
-    // How far from the viewport top this nav sticks once pinned — set this
-    // to the rendered height of whatever sticky element sits above it (e.g.
-    // a page-switcher), so the two don't stack on top of each other at
-    // top:0. Accepts any CSS length, e.g. "64px", "4rem".
     stickyTop         : { type: String, attribute: "sticky-top" }
   };
 
@@ -67,10 +63,8 @@ class BdAnchorNav extends LitElement {
     this._stickyPlaceholder          = null;
     this._onStickyScroll             = null;
     this._handleResize               = this._handleResize.bind(this);
-    // sliding underline indicator: false until the first successful
-    // measurement + placement, so it doesn't visibly animate in from the
-    // left edge on first paint.
     this._indicatorReady             = false;
+    this._indicatorResizeObserver    = null;
   }
 
   connectedCallback() {
@@ -93,6 +87,7 @@ class BdAnchorNav extends LitElement {
     document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
     document.removeEventListener("keydown", this._onKeydown, true);
     this._destroySticky();
+    this._indicatorResizeObserver?.disconnect();
   }
 
   updated(changedProperties) {
@@ -100,17 +95,11 @@ class BdAnchorNav extends LitElement {
 
     if (changedProperties.has("stickyTop")) {
       this.style.setProperty("--sticky-top", this.stickyTop || "0px");
-      // the scroll-spy offset (how far to scroll past the sticky bar when
-      // clicking a link) depends on this too, since the nav's own visible
-      // top now sits lower than the viewport top while stuck.
       this._runScrollSpy();
     }
 
     if (changedProperties.has("activeId") || changedProperties.has("items")) {
-      // wait a frame so the .active class has actually painted before
-      // measuring its box — requestAnimationFrame is enough here, no need
-      // for updateComplete since nothing else in render() depends on this.
-      requestAnimationFrame(() => this._updateIndicator());
+      requestAnimationFrame(() => this._updateIndicator("updated"));
     }
 
     if (!changedProperties.has("activeId")) return;
@@ -128,13 +117,23 @@ class BdAnchorNav extends LitElement {
     }
     queueMicrotask(() => this._runScrollSpy());
     this._handleMobileFullWidth();
-    requestAnimationFrame(() => this._updateIndicator());
+    requestAnimationFrame(() => this._updateIndicator("firstUpdated"));
+
+    const links = this.renderRoot?.querySelector(".anchor-links--desktop");
+    if (links && "ResizeObserver" in window) {
+      this._indicatorResizeObserver = new ResizeObserver(() => {
+        console.log("[anchor-nav] ResizeObserver fired", {
+          isSticky : this.classList.contains("is-sticky"),
+          navRect  : this.getBoundingClientRect(),
+          linksRect: links.getBoundingClientRect()
+        });
+        this._updateIndicator("ResizeObserver");
+      });
+      this._indicatorResizeObserver.observe(links);
+      this._indicatorResizeObserver.observe(this);
+    }
   }
 
-  // Positions the sliding underline under the currently active desktop
-  // link. Reads offsetLeft/offsetWidth directly off the active bd-link —
-  // as a flex item it's block-level regardless of its own :host display,
-  // so these are reliable without any extra math against a bounding rect.
   _updateIndicator() {
     const indicator = this.renderRoot?.querySelector(".anchor-indicator");
     const activeLink = this.renderRoot?.querySelector(
@@ -144,14 +143,13 @@ class BdAnchorNav extends LitElement {
 
     const left  = activeLink.offsetLeft;
     const width = activeLink.offsetWidth;
+    const top   = activeLink.offsetTop + activeLink.offsetHeight + 14;
 
     if (!this._indicatorReady) {
-      // first placement: skip the transition so it doesn't slide in from
-      // the left edge on initial paint, then re-enable it next frame.
       indicator.style.transition = "none";
       indicator.style.transform  = `translateX(${left}px)`;
+      indicator.style.top        = `${top}px`;
       indicator.style.width      = `${width}px`;
-      // force a style flush before removing the transition override
       void indicator.offsetWidth;
       indicator.style.transition = "";
       this._indicatorReady = true;
@@ -159,12 +157,13 @@ class BdAnchorNav extends LitElement {
     }
 
     indicator.style.transform = `translateX(${left}px)`;
+    indicator.style.top       = `${top}px`;
     indicator.style.width     = `${width}px`;
   }
 
   _handleResize() {
     this._handleMobileFullWidth();
-    this._updateIndicator();
+    this._updateIndicator("windowResize");
   }
 
   _handleMobileFullWidth() {
@@ -190,14 +189,16 @@ class BdAnchorNav extends LitElement {
     this.style.setProperty("--sticky-top", this.stickyTop || "0px");
 
     this._onStickyScroll = () => {
-      const parent     = this.parentElement;
+      const parent = this.parentElement;
       if (!parent) return;
 
       const parentRect = parent.getBoundingClientRect();
       const navHeight  = this._stickyPlaceholder
         ? this._stickyPlaceholder.offsetHeight
         : this.offsetHeight;
-      const stickyTopPx = parseLengthToPx(this.stickyTop) || 0;
+      const stickyTopPx = parseLengthToPx(
+        this.style.getPropertyValue("--sticky-top") || this.stickyTop
+      ) || 0;
 
       if (this._stickyOriginalTop === null) {
         const rect = this.getBoundingClientRect();
@@ -217,8 +218,8 @@ class BdAnchorNav extends LitElement {
           }
           this.classList.add("is-sticky");
         }
-        this.style.setProperty("--sticky-left",  `${parentRect.left}px`);
-        this.style.setProperty("--sticky-width", `${parentRect.width}px`);
+        this.style.setProperty("--sticky-left",  "0px");
+        this.style.setProperty("--sticky-width", `${document.documentElement.clientWidth}px`);
       } else {
         if (this.classList.contains("is-sticky")) {
           this.classList.remove("is-sticky");
@@ -232,6 +233,15 @@ class BdAnchorNav extends LitElement {
       }
     };
 
+    this._onStickyResize = () => {
+      this._stickyOriginalTop = null;
+      if (this.classList.contains("is-sticky")) {
+        this.style.setProperty("--sticky-left",  "0px");
+        this.style.setProperty("--sticky-width", `${document.documentElement.clientWidth}px`);
+      }
+      this._onStickyScroll();
+    };
+
     this._onStickyResize = () => {
       this._stickyOriginalTop = null;
       if (this.classList.contains("is-sticky")) {