@repobit/dex-system-design 0.23.16 → 0.23.18

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.18](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.17...@repobit/dex-system-design@0.23.18) (2026-04-30)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for anchor-nav
+
+
+## [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.18",
   "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": "46e6f636b408a309529072a2ed36ad57b7a0e5af"
 }

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: 1290px;
   }
 
-  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/anchor/anchor.stories.js

@@ -3,9 +3,8 @@ import "../Button/Button.js";
 import "../heading/heading.js";
 import "../image/image.js";
 import "../link/link.js";
-import "./anchor-nav.js";
-
 import "../paragraph/paragraph.js";
+import "./anchor-nav.js";
 
 export default {
   title     : "Components/AnchorNav",
@@ -14,49 +13,88 @@ export default {
     docs: {
       description: {
         component: `
-**BdAnchorNav** is a sticky navigation bar with anchor links and a customizable CTA button.
+**BdAnchorNav** este un navbar sticky cu linkuri de ancorare și un buton CTA customizabil.
+
+Lățimea conținutului interior se ajustează **automat** la cel mai lat sibling din containerul părinte,
+prin \`ResizeObserver\` — fără a fi necesară setarea manuală a \`max-width\`.
+
+### Elemente
+- \`<bd-anchor-nav>\` — containerul nav
+- \`<bd-anchor-nav-item>\` — item declarativ (via atributul \`title\` și opțional \`href\`)
+- \`slot="cta"\` — slot opțional pentru butonul CTA (fallback: \`<a>\` simplu)
+
+### Sticky behavior
+- Când navul iese din viewport, devine \`position: fixed\` full-width
+- Border-ul și background-ul sunt full-width
+- Conținutul (linkuri + CTA) rămâne centrat și aliniat cu cel mai lat sibling
+
+---
+
+### Utilizare simplă (fallback CTA)
+\`\`\`html
+<div>
+  <bd-anchor-nav cta-label="Buy now" cta-href="https://www.bitdefender.com/buy">
+    <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Features" href="#features"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Pricing"  href="#pricing"></bd-anchor-nav-item>
+  </bd-anchor-nav>
 
-### Elements
-- \`<bd-anchor-nav>\` — the nav container
-- \`<bd-anchor-nav-item>\` — declarative items (via \`title\` and optional \`href\` attributes)
+  <bd-compare-section>...</bd-compare-section>
+  <section id="overview">...</section>
+</div>
+\`\`\`
 
-### Usage — child elements
+### Utilizare cu slot CTA customizat
 \`\`\`html
-<bd-anchor-nav cta-label="Buy now" cta-href="https://www.bitdefender.com/buy">
-  <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="Pricing"  href="#section-pricing"></bd-anchor-nav-item>
+<bd-anchor-nav>
+  <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Pricing"  href="#pricing"></bd-anchor-nav-item>
+
+  <bd-button-link
+    slot="cta"
+    kind="danger"
+    size="md"
+    href="https://www.bitdefender.com/buy"
+    label="Cumpără acum"
+    buyLink
+  >
+    Cumpără acum
+  </bd-button-link>
 </bd-anchor-nav>
 \`\`\`
 
-### Usage — programmatic items prop
+### Utilizare programatică cu \`.items\`
 \`\`\`html
 <bd-anchor-nav
   cta-label="Buy now"
   cta-href="https://www.bitdefender.com/buy"
-  .items=${[
-    { title: "Overview", href: "#anchor-1-section" },
-    { title: "Features", href: "#anchor-2-section" },
-    { title: "Pricing",  href: "#section-pricing"  }
+  .items=\${[
+    { title: "Overview", href: "#overview" },
+    { title: "Features", href: "#features" },
+    { title: "Pricing",  href: "#pricing"  }
   ]}
 ></bd-anchor-nav>
 \`\`\`
 
-### Attributes
-
-#### \`bd-anchor-nav\`
-| Attribute    | Type   | Default              | Description                                          |
-|--------------|--------|----------------------|------------------------------------------------------|
-| \`cta-label\`  | String | \`"Buy now"\`        | Text label for the CTA button                        |
-| \`cta-href\`   | String | \`"#section-pricing"\` | href for the CTA button                            |
-| \`aria-label\` | String | \`"Section navigation"\` | Accessible label for the \`<nav>\` landmark       |
-| \`items\`      | Array  | —                    | \`{ title, href }[]\` — overrides child elements     |
-
-#### \`bd-anchor-nav-item\`
-| Attribute | Type   | Description                                              |
-|-----------|--------|----------------------------------------------------------|
-| \`title\`   | String | Link label                                               |
-| \`href\`    | String | Target URL or anchor (default: \`#anchor-N-section\`)   |
+---
+
+### Atribute \`bd-anchor-nav\`
+| Atribut      | Tip    | Default                  | Descriere                                        |
+|--------------|--------|--------------------------|--------------------------------------------------|
+| \`cta-label\`  | String | \`"Buy now"\`            | Textul butonului CTA fallback                    |
+| \`cta-href\`   | String | \`"#section-pricing"\`   | href-ul butonului CTA fallback                   |
+| \`aria-label\` | String | \`"Section navigation"\` | Label accesibil pentru \`<nav>\`                 |
+| \`items\`      | Array  | —                        | \`{ title, href }[]\` — suprascrie child items   |
+
+### Atribute \`bd-anchor-nav-item\`
+| Atribut | Tip    | Descriere                                              |
+|---------|--------|--------------------------------------------------------|
+| \`title\` | String | Textul linkului                                        |
+| \`href\`  | String | URL sau ancoră (default: \`#anchor-N-section\`)        |
+
+### Slot \`cta\`
+Orice element cu \`slot="cta"\` înlocuiește butonul CTA fallback.
+Pe mobile devine automat full-width prin \`::slotted([slot="cta"])\`.
         `
       }
     }
@@ -64,17 +102,17 @@ export default {
   argTypes: {
     ctaLabel: {
       control    : "text",
-      description: "Text label for the CTA button",
+      description: "Textul butonului CTA fallback",
       table      : { type: { summary: "string" }, defaultValue: { summary: "Buy now" }, category: "CTA" }
     },
     ctaHref: {
       control    : "text",
-      description: "href for the CTA button",
+      description: "href-ul butonului CTA fallback",
       table      : { type: { summary: "string" }, defaultValue: { summary: "#section-pricing" }, category: "CTA" }
     },
     items: {
       control    : "object",
-      description: "Array of { title, href } objects (overrides child elements)",
+      description: "Array de { title, href } — suprascrie child elements",
       table      : { type: { summary: "{ title: string, href: string }[]" }, category: "Content" }
     }
   }
@@ -83,18 +121,36 @@ export default {
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
-const renderNavChildren = (labels, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
+const navItems = (labels) => labels.map((item) => html`
+  <bd-anchor-nav-item
+    title=${typeof item === "string" ? item : item.title}
+    href=${typeof item === "string" ? "" : (item.href || "")}
+  ></bd-anchor-nav-item>
+`);
+
+const renderSimple = (labels, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
   <bd-anchor-nav cta-label=${ctaLabel} cta-href=${ctaHref}>
-    ${labels.map((item) => html`
-      <bd-anchor-nav-item
-        title=${typeof item === "string" ? item : item.title}
-        href=${typeof item === "string" ? "" : (item.href || "")}
-      ></bd-anchor-nav-item>
-    `)}
+    ${navItems(labels)}
   </bd-anchor-nav>
 `;
 
-const renderNavItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
+const renderWithSlotCta = (labels, ctaLabel = "Cumpără acum", ctaHref = "#section-pricing") => html`
+  <bd-anchor-nav>
+    ${navItems(labels)}
+    <bd-button-link
+      slot="cta"
+      kind="danger"
+      size="md"
+      href=${ctaHref}
+      label=${ctaLabel}
+      font-size="16px"
+      font-weight="600"
+      buyLink
+    >${ctaLabel}</bd-button-link>
+  </bd-anchor-nav>
+`;
+
+const renderWithItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
   <bd-anchor-nav
     cta-label=${ctaLabel}
     cta-href=${ctaHref}
@@ -102,16 +158,92 @@ const renderNavItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing
   ></bd-anchor-nav>
 `;
 
+/** Wrapper cu conținut sibling pentru a demonstra auto max-width */
+const withSiblingContent = (navTemplate) => html`
+  <div style="margin: 0 auto;">
+    ${navTemplate}
+    <div style="
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 40px 24px;
+      background: #f0f9ff;
+      border: 2px dashed #bfdbfe;
+      border-radius: 8px;
+      text-align: center;
+      color: #1e40af;
+      font-family: sans-serif;
+    ">
+      <strong>Sibling content — 900px max-width</strong><br>
+      <span style="font-size: 0.875rem; opacity: 0.8;">
+        Navul se aliniază automat la lățimea acestui element
+      </span>
+    </div>
+  </div>
+`;
+
 
 // ─── Stories ─────────────────────────────────────────────────────────────────
 
 export const Default = {
-  name      : "Default (4 items)",
-  render    : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
+  name      : "Default — fallback CTA",
+  render    : () => renderSimple(["Overview", "Features", "Reviews", "Pricing"]),
   parameters: {
     docs: {
       description: {
-        story: "Default nav with four anchor links. Each link auto-targets `#anchor-N-section`. The CTA defaults to `#section-pricing`."
+        story: "Nav cu 4 linkuri și butonul CTA fallback (`<a>` simplu). Fiecare link targhetează automat `#anchor-N-section`."
+      }
+    }
+  }
+};
+
+export const WithSlotCta = {
+  name      : "Cu slot CTA — bd-button-link danger",
+  render    : () => renderWithSlotCta(["Overview", "Features", "Reviews", "Pricing"]),
+  parameters: {
+    docs: {
+      description: {
+        story: "CTA customizat prin `slot=\"cta\"` cu `bd-button-link kind=\"danger\"`. Pe mobile devine automat full-width."
+      }
+    }
+  }
+};
+
+export const WithSlotCtaOutline = {
+  name  : "Cu slot CTA — bd-button-link outline",
+  render: () => html`
+    <bd-anchor-nav>
+      ${navItems(["Overview", "Features", "Pricing"])}
+      <bd-button-link
+        slot="cta"
+        kind="outline"
+        size="md"
+        href="https://www.bitdefender.com/buy"
+        label="Cumpără acum"
+        font-size="16px"
+        font-weight="600"
+      >Cumpără acum</bd-button-link>
+    </bd-anchor-nav>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "CTA cu `kind=\"outline\"` — demonstrează flexibilitatea slot-ului CTA."
+      }
+    }
+  }
+};
+
+export const AutoMaxWidth = {
+  name  : "Auto max-width — aliniere la sibling",
+  render: () => withSiblingContent(
+    renderSimple(["Overview", "Features", "Pricing"])
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: `Navul detectează automat lățimea celui mai lat sibling din containerul părinte 
+        (via \`ResizeObserver\`) și centrează conținutul la acea lățime. 
+        Border-ul rămâne full-width. Nu este necesară nicio configurare manuală.`
       }
     }
   }
@@ -119,7 +251,7 @@ export const Default = {
 
 export const CustomCtaHref = {
   name  : "Custom CTA href",
-  render: () => renderNavChildren(
+  render: () => renderSimple(
     ["Overview", "Features", "Reviews", "Pricing"],
     "Get Bitdefender",
     "https://www.bitdefender.com/buy"
@@ -127,14 +259,14 @@ export const CustomCtaHref = {
   parameters: {
     docs: {
       description: {
-        story: "CTA button uses a full external URL via `cta-href`. The button label is overridden with `cta-label`."
+        story: "CTA fallback cu URL extern via `cta-href` și label customizat via `cta-label`."
       }
     }
   }
 };
 
 export const CustomItemHrefs = {
-  name  : "Custom item hrefs (child elements)",
+  name  : "Custom item hrefs",
   render: () => html`
     <bd-anchor-nav cta-label="Buy now" cta-href="#section-pricing">
       <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
@@ -146,15 +278,15 @@ export const CustomItemHrefs = {
   parameters: {
     docs: {
       description: {
-        story: "Each `bd-anchor-nav-item` has a custom `href` attribute pointing to a specific section ID."
+        story: "Fiecare `bd-anchor-nav-item` are `href` customizat către un ID de secțiune specific."
       }
     }
   }
 };
 
 export const ProgrammaticItems = {
-  name  : "Programmatic items prop",
-  render: () => renderNavItems(
+  name  : "Programmatic .items prop",
+  render: () => renderWithItems(
     [
       { title: "Overview", href: "#anchor-1-section" },
       { title: "Features", href: "#anchor-2-section" },
@@ -167,7 +299,7 @@ export const ProgrammaticItems = {
   parameters: {
     docs: {
       description: {
-        story: "Items defined via the `.items` property array instead of child elements. Useful for dynamic rendering from CMS data."
+        story: "Items definite via proprietatea `.items` — util pentru date din CMS sau config externă."
       }
     }
   }
@@ -175,37 +307,31 @@ export const ProgrammaticItems = {
 
 export const TwoItems = {
   name      : "Two Items",
-  render    : () => renderNavChildren(["Overview", "Pricing"]),
+  render    : () => renderSimple(["Overview", "Pricing"]),
   parameters: {
-    docs: {
-      description: { story: "Minimal nav with only two items." }
-    }
+    docs: { description: { story: "Nav minimal cu 2 items." } }
   }
 };
 
 export const ManyItems = {
   name      : "Many Items (7)",
-  render    : () => renderNavChildren(["Overview", "Features", "Security", "Performance", "Reviews", "FAQ", "Pricing"]),
+  render    : () => renderSimple(["Overview", "Features", "Security", "Performance", "Reviews", "FAQ", "Pricing"]),
   parameters: {
-    docs: {
-      description: { story: "Seven items — tests overflow and truncation on narrow viewports." }
-    }
+    docs: { description: { story: "7 items — testează overflow și truncarea pe viewport-uri înguste." } }
   }
 };
 
 export const SingleItem = {
-  name      : "Single Item (edge case)",
-  render    : () => renderNavChildren(["Pricing"]),
+  name      : "Single Item",
+  render    : () => renderSimple(["Pricing"]),
   parameters: {
-    docs: {
-      description: { story: "Edge case: single anchor item. Should be active by default." }
-    }
+    docs: { description: { story: "Edge case: un singur item — trebuie să fie activ by default." } }
   }
 };
 
 export const LongLabels = {
-  name  : "Long Item Labels",
-  render: () => renderNavChildren([
+  name  : "Long Labels",
+  render: () => renderSimple([
     "Product Overview",
     "Advanced Security Features",
     "Performance Benchmarks",
@@ -213,47 +339,66 @@ export const LongLabels = {
     "Plans & Pricing"
   ]),
   parameters: {
-    docs: {
-      description: { story: "Long label strings — tests text overflow and wrapping." }
-    }
+    docs: { description: { story: "Labels lungi — testează text overflow și wrapping." } }
   }
 };
 
 export const WithScrollTargets = {
-  name  : "With Scroll Targets",
+  name  : "With Scroll Targets — demo complet",
   render: () => html`
-    <div style="position: sticky; top: 0; z-index: 100;">
-      <bd-anchor-nav
-        cta-label="Buy now"
-        cta-href="#section-pricing"
-      >
+    <div>
+      <bd-anchor-nav cta-label="Cumpără acum" cta-href="#section-pricing">
         <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
         <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
         <bd-anchor-nav-item title="Pricing"  href="#anchor-3-section"></bd-anchor-nav-item>
       </bd-anchor-nav>
-    </div>
 
-    <div id="anchor-1-section" style="padding: 80px 24px; background: #EDF9FF;">
-      <bd-h as="h2">Overview Section</bd-h>
-      <bd-p kind="regular">This is the overview content area. The nav scrolls here when "Overview" is clicked.</bd-p>
-    </div>
-    <div id="anchor-2-section" style="padding: 80px 24px; background: #fff;">
-      <bd-h as="h2">Features Section</bd-h>
-      <bd-p kind="regular">This is the features content area.</bd-p>
-    </div>
-    <div id="anchor-3-section" style="padding: 80px 24px; background: #EDF9FF;">
-      <bd-h as="h2">Pricing Section</bd-h>
-      <bd-p kind="regular">This is the pricing content area.</bd-p>
-    </div>
-    <div id="section-pricing" style="padding: 80px 24px; background: #fff;">
-      <bd-h as="h2">Buy Now Target</bd-h>
-      <bd-p kind="regular">The "Buy now" button scrolls to this element (#section-pricing).</bd-p>
+      <!-- Conținut sibling — navul se aliniază automat la această lățime -->
+      <div style="max-width: 800px; margin: 0 auto;">
+
+        <div id="anchor-1-section" style="
+          min-height: 60vh; padding: 80px 24px;
+          background: #EDF9FF; border-bottom: 1px solid #e2e8f0;
+        ">
+          <bd-h as="h2">Overview Section</bd-h>
+          <bd-p kind="regular">
+            Navul de mai sus se aliniază automat la lățimea acestui container (800px).
+            Scroll în jos pentru a vedea sticky și scroll spy în acțiune.
+          </bd-p>
+        </div>
+
+        <div id="anchor-2-section" style="
+          min-height: 60vh; padding: 80px 24px;
+          background: #fff; border-bottom: 1px solid #e2e8f0;
+        ">
+          <bd-h as="h2">Features Section</bd-h>
+          <bd-p kind="regular">Conținut Features. Link-ul din nav devine activ când ajungi aici.</bd-p>
+        </div>
+
+        <div id="anchor-3-section" style="
+          min-height: 60vh; padding: 80px 24px;
+          background: #EDF9FF; border-bottom: 1px solid #e2e8f0;
+        ">
+          <bd-h as="h2">Pricing Section</bd-h>
+          <bd-p kind="regular">Conținut Pricing.</bd-p>
+        </div>
+
+        <div id="section-pricing" style="
+          min-height: 40vh; padding: 80px 24px; background: #fff;
+        ">
+          <bd-h as="h2">Buy Now Target</bd-h>
+          <bd-p kind="regular">Butonul CTA scrollează până aici.</bd-p>
+        </div>
+
+      </div>
     </div>
   `,
   parameters: {
     docs: {
       description: {
-        story: "Full scroll demo with actual target sections. Click nav links or Buy now to trigger smooth scroll."
+        story: `Demo complet cu secțiuni reale. Navul detectează automat lățimea sibling-ului (800px) 
+        și centrează conținutul la acea lățime. Border-ul rămâne full-width. 
+        Sticky se oprește când containerul iese din viewport.`
       }
     }
   }
@@ -261,11 +406,13 @@ export const WithScrollTargets = {
 
 export const MobileView = {
   name      : "Mobile View",
-  render    : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
+  render    : () => renderWithSlotCta(["Overview", "Features", "Reviews", "Pricing"]),
   parameters: {
     viewport: { defaultViewport: "mobile1" },
     docs    : {
-      description: { story: "Nav at 375px mobile width — dropdown replaces link row." }
+      description: {
+        story: "Nav la 375px — dropdown înlocuiește linkurile, CTA apare după primul scroll. Pe mobile butonul devine full-width automat."
+      }
     }
   }
 };
@@ -292,7 +439,7 @@ export const Playground = {
   parameters: {
     docs: {
       description: {
-        story: "Fully interactive playground. Edit `items`, `ctaLabel`, and `ctaHref` in Controls."
+        story: "Playground interactiv. Editează `items`, `ctaLabel` și `ctaHref` din Controls."
       }
     }
   }

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(" ");
   }