@repobit/dex-system-design 0.23.16 → 0.23.17

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.17](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.16...@repobit/dex-system-design@0.23.17) (2026-04-29)
+
+### Bug Fixes
+
+* **DEX-1014:** adjustments for anchor-nav. Modified structure
+
+
 ## [0.23.16](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.15...@repobit/dex-system-design@0.23.16) (2026-04-23)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.16",
+  "version": "0.23.17",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -89,5 +89,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "0d063cda634ce56449d0dd9501bc86fc6d3d818e"
+  "gitHead": "7e0f9b42767c23f33e6b6b79665bec599b432a69"
 }

package/src/components/Button/Button.js

@@ -107,7 +107,7 @@ class ButtonLink extends LitElement {
     size       : { type: String },
     customClass: { type: String },
     kind       : { type: String },
-    fullWidth  : { type: Boolean },
+    fullWidth  : { type: Boolean, attribute: "fullwidth" },
     strong     : { type: Boolean },
     fontSize   : { type: String, attribute: "font-size" },
     fontWeight : { type: String, attribute: "font-weight" },

package/src/components/Button/button.css.js

@@ -29,8 +29,16 @@ export default css`
     --bd-accesibility-focus: var(--color-blue-500);
   }
 
-  /* Double rAF focus pattern */
-  :host([data-bd-button-focus]) {
+    :host([fullwidth]) {
+      display: block;
+      width: 100%;
+    }
+
+    .max--width {
+      width: 100%;
+      display: flex;
+    }
+    :host([data-bd-button-focus]) {
     outline: var(--spacing-2) solid var(--bd-accesibility-focus);
     outline-offset: var(--spacing-2);
     border-radius: var(--radius-md);
@@ -167,15 +175,7 @@ export default css`
     font-weight: var(--typography-fontWeight-semibold);
   }
 
-  .max--width {
-    width: 100%;
-    display: block;
-  }
-
-  .button.max--width {
-    width: 100%;
-  }
-
+ 
   /* Asigură-te că slot-ul ocupă întreg spațiul */
   .button > ::slotted(*) {
     display: inline-block;

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

@@ -3,35 +3,35 @@ import { css } from "lit";
 export const anchorNavStyles = css`
   :host {
     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);
+    --anchor-nav-max-width: var(--layout-compare-grid-max, 100%);
   }
 
-  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);
+  :host(.is-sticky) {
+    position: fixed;
+    top: 0;
+    left: var(--sticky-left, 0);
+    width: var(--sticky-width, 100%);
+    box-shadow: var(--shadow-sm);
+    z-index: 1000;
   }
 
+  /* Border-urile sunt pe nav - full width */
   nav {
     display: block;
     margin: var(--spacing-0);
     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);
+  }
+
+  /* Când e sticky, păstrăm aceleași border-uri */
+  :host(.is-sticky) nav {
+    background: var(--color-neutral-0);
   }
 
   .bd-anchor-nav__inner {
@@ -41,11 +41,24 @@ export const anchorNavStyles = css`
     align-items: center;
     gap: var(--spacing-32);
     width: 100%;
-    max-width: var(--layout-compare-grid-max);
+    max-width: var(--anchor-nav-max-width);
+    padding-block: var(--spacing-10);
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
     margin-inline: auto;
     box-sizing: border-box;
   }
 
+  /* Restul codului tău CSS rămâne identic de aici în jos */
+  
+  .anchor-link: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);
+  }
+
   .anchor-links {
     position: relative;
     display: flex;
@@ -57,8 +70,67 @@ export const anchorNavStyles = css`
     min-width: 0;
   }
 
-  .anchor-links--desktop {
-    display: flex;
+  .anchor-links--desktop { display: flex; }
+
+  .anchor-link {
+    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);
+  }
+
+  .anchor-link.active {
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  .anchor-link,
+  .anchor-link.bd-link,
+  .anchor-link.bd-link--primary,
+  .anchor-link.bd-link--secondary {
+    text-decoration: none !important;
+  }
+
+  .anchor-link:hover,
+  .anchor-link.bd-link:hover,
+  .anchor-link.bd-link--primary:hover,
+  .anchor-link.bd-link--secondary:hover {
+    text-decoration: none !important;
+  }
+
+  .anchor-link.bd-link--primary:hover {
+    color: var(--color-blue-500) !important;
+  }
+
+  .anchor-link.bd-link--secondary:hover {
+    color: var(--color-neutral-900) !important;
+  }
+
+  .anchor-link.active:hover,
+  .anchor-link.active.bd-link--primary:hover,
+  .anchor-link.active.bd-link--secondary:hover {
+    color: var(--color-neutral-900) !important;
+    text-decoration: none !important;
+  }
+
+  .anchor-link::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);
+  }
+
+  .anchor-link.active::after {
+    width: 100%;
   }
 
   .bd-anchor-nav__dropdown {
@@ -69,8 +141,6 @@ export const anchorNavStyles = css`
     width: 100%;
   }
 
-  /* ── Dropdown toggle ── */
-
   .bd-anchor-nav__dropdown-toggle {
     display: flex;
     align-items: center;
@@ -104,7 +174,6 @@ export const anchorNavStyles = css`
   .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 {
@@ -128,8 +197,6 @@ export const anchorNavStyles = css`
     color: var(--color-blue-500);
   }
 
-  /* ── Dropdown panel ── */
-
   .bd-anchor-nav__dropdown-panel {
     position: absolute;
     left: var(--spacing-0);
@@ -154,8 +221,6 @@ export const anchorNavStyles = css`
     gap: var(--spacing-2);
   }
 
-  /* ── Dropdown options ── */
-
   .bd-anchor-nav__dropdown-option {
     display: flex;
     align-items: center;
@@ -194,52 +259,10 @@ export const anchorNavStyles = css`
     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);
-  }
-.bd-anchor-nav__cta:hover {
-  color: var(--color-neutral-0) !important;
-}
-  a.active:hover {
-    color: var(--color-neutral-900);
+  ::slotted([slot="cta"]) {
+    flex-shrink: 0;
   }
 
-  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);
@@ -251,32 +274,32 @@ export const anchorNavStyles = css`
     cursor: pointer;
     background: var(--color-red-500);
     color: var(--color-neutral-0);
+    text-decoration: none !important;
     transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
   }
 
   .bd-anchor-nav__cta:hover {
     background: var(--color-red-600);
+    color: var(--color-neutral-0);
+    text-decoration: none !important;
   }
 
   .bd-anchor-nav__cta:active {
     background: var(--color-red-700);
+    color: var(--color-neutral-0);
   }
 
-  /* ── Animations ── */
+  .bd-anchor-nav__cta::after {
+    display: none;
+  }
 
   @keyframes bd-anchor-nav-dropdown-label-swap {
-    from {
-      opacity: 0.35;
-      transform: translateY(var(--spacing-4));
-    }
-    to {
-      opacity: 1;
-      transform: translateY(var(--spacing-0));
-    }
+    from { opacity: 0.35; transform: translateY(var(--spacing-4)); }
+    to   { opacity: 1;    transform: translateY(var(--spacing-0)); }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    a::after,
+    .anchor-link::after,
     .bd-anchor-nav__dropdown-chevron,
     .bd-cta,
     .bd-anchor-nav__dropdown-label--swap {
@@ -284,27 +307,16 @@ export const anchorNavStyles = css`
     }
   }
 
-  /* ── 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;
-    }
+    .anchor-links--desktop { display: none !important; }
 
-    .bd-anchor-nav__dropdown {
-      display: block;
-    }
+    .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)

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

@@ -1,5 +1,7 @@
 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";
 
 function parseLengthToPx(value) {
@@ -30,7 +32,8 @@ class BdAnchorNav extends LitElement {
     _mobileCtaRevealed: { type: Boolean, state: true },
     ctaLabel          : { type: String, attribute: "cta-label" },
     ctaHref           : { type: String, attribute: "cta-href" },
-    items             : { type: Array }
+    items             : { type: Array },
+    maxWidth          : { type: String, attribute: "max-width" }
   };
 
   static styles = [tokens, anchorNavStyles];
@@ -44,6 +47,7 @@ class BdAnchorNav extends LitElement {
     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);
@@ -53,15 +57,21 @@ class BdAnchorNav extends LitElement {
     this._programmaticScrollTargetId = 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() {
@@ -69,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() {
@@ -191,6 +304,7 @@ class BdAnchorNav extends LitElement {
       this.requestUpdate();
     }
     queueMicrotask(() => this._runScrollSpy());
+    this._handleMobileFullWidth();
   }
 
   updated(changedProperties) {
@@ -287,22 +401,29 @@ class BdAnchorNav extends LitElement {
         ${resolved.map(({ id, title, href }) => {
           const isActive = this.activeId === id;
           return html`
-            <a
+            <bd-link
               href="${href}"
-              class="${isActive ? "active" : ""}"
+              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, href)}
-            >${title}</a>
+            >${title}</bd-link>
           `;
         })}
       </div>
     `;
 
+    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")}
@@ -350,11 +471,7 @@ class BdAnchorNav extends LitElement {
           </div>
 
           <div class="bd-cta">
-            <a
-              class="bd-anchor-nav__cta"
-              href="${this.ctaHref || "#section-pricing"}"
-              part="buy-button"
-            >${this.ctaLabel}</a>
+            <slot name="cta"></slot>
           </div>
         </div>
       </nav>
@@ -363,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);

package/src/components/link/link.css.js

@@ -37,6 +37,39 @@ export default css`
     text-underline-offset: 2px;
   }
 
+  /* ============================================
+     ACTIVE STATE - FONT WEIGHT 700
+     ============================================ */
+  
+  .bd-link--active {
+    font-weight: 700 !important;
+  }
+
+  /* Poți adăuga și alte stiluri pentru active dacă dorești */
+  .bd-link--active.bd-link--primary {
+    color: var(--color-neutral-900);
+  }
+
+  .bd-link--active.bd-link--secondary {
+    color: var(--color-neutral-900);
+  }
+
+  
+  .bd-link--no-underline:hover,
+  .bd-link--no-underline.bd-link--primary:hover,
+  .bd-link--no-underline.bd-link--secondary:hover,
+  .bd-link--no-underline.bd-link--danger:hover,
+  .bd-link--no-underline.bd-link--bold:hover,
+  .bd-link--no-underline.bd-link--subtle:hover {
+    text-decoration: none !important;
+  }
+
+
+
+  .bd-link--no-underline.bd-link--secondary:hover {
+    color: var(--color-neutral-800) !important;
+  }
+
   /* Light variant for dark backgrounds */
   .bd-link--light {
     color: var(--color-neutral-0);
@@ -101,9 +134,12 @@ export default css`
     pointer-events: none;
   }
 
-
-  /* Focus styles for all variants */
+  /* Focus styles */
   .bd-link:focus {
+    outline: none;
+  }
+
+  .bd-link:focus-visible {
     outline: 2px solid var(--color-blue-300);
     outline-offset: 2px;
     border-radius: 2px;

package/src/components/link/link.js

@@ -4,24 +4,28 @@ import linkCSS from "./link.css.js";
 
 class BdLink extends LitElement {
   static properties = {
-    href     : { type: String },
-    target   : { type: String },
-    kind     : { type: String,  reflect: true },
-    underline: { type: Boolean, reflect: true },
-    disabled : { type: Boolean, reflect: true },
-    fontSize : { type: String,  attribute: "font-size" },
-    color    : { type: String }
+    href       : { type: String },
+    target     : { type: String },
+    kind       : { type: String,  reflect: true },
+    underline  : { type: Boolean, reflect: true },
+    noUnderline: { type: Boolean, attribute: "no-underline" },
+    disabled   : { type: Boolean, reflect: true },
+    fontSize   : { type: String,  attribute: "font-size" },
+    color      : { type: String },
+    active     : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
-    this.href      = "#";
-    this.target    = "_self";
-    this.kind      = "primary";
-    this.underline = false;
-    this.disabled  = false;
-    this.fontSize  = "";
-    this.color     = "";
+    this.href        = "#";
+    this.target      = "_self";
+    this.kind        = "primary";
+    this.underline   = false;
+    this.noUnderline = false;
+    this.disabled    = false;
+    this.fontSize    = "";
+    this.color       = "";
+    this.active      = false;
   }
 
   static styles = [tokens, linkCSS];
@@ -31,6 +35,8 @@ class BdLink extends LitElement {
       "bd-link",
       `bd-link--${this.kind}`,
       this.underline ? "bd-link--underline" : "",
+      this.noUnderline ? "bd-link--no-underline" : "",
+      this.active ? "bd-link--active" : "",
       this.disabled  ? "bd-link--disabled"  : ""
     ].filter(Boolean).join(" ");
   }