@repobit/dex-system-design 0.23.15 → 0.23.16

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.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
+
+* **DEX-1014:** fix for anchor nav functionality
+
+
 ## [0.23.15](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.14...@repobit/dex-system-design@0.23.15) (2026-04-14)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.15",
+  "version": "0.23.16",
   "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": "b5e5567f6d68800a73154c9da2e4a3023eb18945"
+  "gitHead": "0d063cda634ce56449d0dd9501bc86fc6d3d818e"
 }

package/src/components/Button/Button.js

@@ -1,7 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import buttonsCSS from "./button.css.js";
-import "./icons.js";
 
 class Button extends LitElement {
   static properties = {
@@ -23,22 +22,21 @@ class Button extends LitElement {
     this.size = "md";
     this.fontSize = "";
     this.fontWeight = "";
-    this.isActive = false;
   }
 
-  _handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.isActive = true;
-      this.requestUpdate();
-    }
+  _onFocusin(e) {
+    const el = e.currentTarget;
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        if (el.matches(':focus-visible')) {
+          this.setAttribute('data-bd-button-focus', '');
+        }
+      })
+    );
   }
 
-  _handleKeyUp(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.isActive = false;
-      this.requestUpdate();
-      this._handleClick();
-    }
+  _onFocusout() {
+    this.removeAttribute('data-bd-button-focus');
   }
 
   _handleClick() {
@@ -87,9 +85,9 @@ class Button extends LitElement {
     return html`
       <button
         @click=${this._handleClick}
-        @keydown=${this._handleKeyDown}
-        @keyup=${this._handleKeyUp}
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.isActive ? 'active' : ''}"
+        @focusin=${this._onFocusin}
+        @focusout=${this._onFocusout}
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
         aria-label="${this.label}"
         style="
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
@@ -131,6 +129,21 @@ class ButtonLink extends LitElement {
     this.shadow = true;
   }
 
+  _onFocusin(e) {
+    const el = e.currentTarget;
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        if (el.matches(':focus-visible')) {
+          this.setAttribute('data-bd-button-focus', '');
+        }
+      })
+    );
+  }
+
+  _onFocusout() {
+    this.removeAttribute('data-bd-button-focus');
+  }
+
   get sizeClass() {
     switch (this.size) {
       case "lg":
@@ -176,6 +189,8 @@ class ButtonLink extends LitElement {
         class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
         aria-label="${this.label}"
         @click=${this._handleClick}
+        @focusin=${this._onFocusin}
+        @focusout=${this._onFocusout}
         style="
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
           ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
@@ -193,7 +208,6 @@ class ButtonLink extends LitElement {
   }
 }
 
-
 class ContactButton extends LitElement {
   static properties = {
     label: { type: String },
@@ -206,21 +220,37 @@ class ContactButton extends LitElement {
     this.href = "https://www.google.com";
   }
 
+  _onFocusin(e) {
+    const el = e.currentTarget;
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        if (el.matches(':focus-visible')) {
+          this.setAttribute('data-bd-button-focus', '');
+        }
+      })
+    );
+  }
+
+  _onFocusout() {
+    this.removeAttribute('data-bd-button-focus');
+  }
+
   render() {
     return html`
-      <a class="href-button" href="${this.href}" aria-label="${this.label}">
-        <button
-          class="bd-contact-btn"
-          @click=${this._handleClick}
-          aria-label="${this.label}"
-           style="
-    ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
-    ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
-  "
-        >
-          ${this.label}
-          <arrow-icon></arrow-icon>
-        </button>
+      <a 
+        class="button bd-contact-btn" 
+        href="${this.href}" 
+        aria-label="${this.label}"
+        @click=${this._handleClick}
+        @focusin=${this._onFocusin}
+        @focusout=${this._onFocusout}
+        style="
+          ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
+          ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
+        "
+      >
+        ${this.label}
+        <arrow-icon aria-hidden="true"></arrow-icon>
       </a>
     `;
   }
@@ -232,10 +262,8 @@ class ContactButton extends LitElement {
 
 Button.styles = [tokens, buttonsCSS];
 ButtonLink.styles = [tokens, buttonsCSS];
-
 ContactButton.styles = [tokens, buttonsCSS];
 
 customElements.define("bd-button", Button);
 customElements.define("bd-button-link", ButtonLink);
-
 customElements.define("bd-contact-button", ContactButton);

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

@@ -2,6 +2,7 @@ import { css } from "lit";
 
 export default css`
   :host {
+    display: inline-flex;
     --button-background-primary: var(--color-blue-500);
     --button-background-primary-hover: var(--color-blue-600);
     --button-background-primary-focus: var(--color-blue-700);
@@ -28,41 +29,39 @@ export default css`
     --bd-accesibility-focus: var(--color-blue-500);
   }
 
-  button:focus,
-  button:focus-visible {
-    outline: none;
-    box-shadow: none;
-  }
-
-  button:focus-visible {
+  /* Double rAF focus pattern */
+  :host([data-bd-button-focus]) {
     outline: var(--spacing-2) solid var(--bd-accesibility-focus);
     outline-offset: var(--spacing-2);
+    border-radius: var(--radius-md);
   }
-  .href-button:focus,
-  .href-button:focus-visible {
+
+  button:focus,
+  button:focus-visible,
+  a:focus,
+  a:focus-visible {
     outline: none;
+    box-shadow: none;
   }
 
-  .href-button:focus-visible button {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-  }
-a.button {
-  text-decoration: none;
-}
-  .href-button {
+  a.button {
     text-decoration: none;
-    display: inline-flex;
-    vertical-align: middle;
-    width: 100%;
   }
-  .button {
-    color: white;
+  .button,
+  .bd-contact-btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    text-decoration: none;
+    color: var(--color-neutral-0);
     border: none;
     cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease,
-      box-shadow 0.2s ease;
-    gap: 10px;
+    transition: background-color var(--transition-duration-normal) var(--transition-easing-smooth),
+      transform var(--transition-duration-normal) var(--transition-easing-smooth),
+      box-shadow var(--transition-duration-normal) var(--transition-easing-smooth),
+      color var(--transition-duration-normal) var(--transition-easing-smooth);
+    gap: var(--spacing-10);
     vertical-align: middle;
     line-height: 1;
     box-sizing: border-box;
@@ -70,7 +69,7 @@ a.button {
 
   .button--primary {
     background-color: var(--button-background-primary);
-    color: white;
+    color: var(--color-neutral-0);
   }
 
   .button--primary:hover {
@@ -83,7 +82,7 @@ a.button {
 
   .button--secondary {
     background-color: var(--button-background-secondary);
-    color: white;
+    color: var(--color-neutral-0);
   }
 
   .button--secondary:hover {
@@ -96,112 +95,97 @@ a.button {
 
   .button--danger {
     background-color: var(--button-background-danger);
-    color: white;
+    color: var(--color-neutral-0);
   }
 
   .button--danger:hover {
     background-color: var(--button-background-danger-hover);
   }
  
-.button--danger.active,
-.button--danger:active {
-  background-color: var(--button-background-danger-focus);
-}
+  .button--danger:active {
+    background-color: var(--button-background-danger-focus);
+  }
    
   .button--outline {
     background-color: transparent;
-    border: 2px solid var(--border-button-background-outline);
+    border: var(--border-width-2) solid var(--border-button-background-outline);
     color: var(--color-button-background-outline);
   }
   .button--outline:hover {
     background-color: var(--button-background-outline-hover);
-    border: 2px solid var(--border-button-background-outline-hover);
+    border: var(--border-width-2) solid var(--border-button-background-outline-hover);
   }
   .button--outline:active {
     background-color: var(--button-background-outline-focus);
-    color: white;
+    color: var(--color-neutral-0);
   }
   .button--primary--outline {
     background-color: transparent;
-    border: 2px solid var(--border-button-background-primary-outline);
+    border: var(--border-width-2) solid var(--border-button-background-primary-outline);
     color: var(--color-button-background-primary-outline);
   }
   .button--primary--outline:hover {
     background-color: var(--button-background-primary-outline-hover);
-    border: 2px solid var(--border-button-background-primary-outline-hover);
+    border: var(--border-width-2) solid var(--border-button-background-primary-outline-hover);
   }
   .button--primary--outline:active {
     background-color: var(--button-background-primary-outline-focus);
-    color: white;
+    color: var(--color-neutral-0);
   }
 
   .button--small {
     padding: var(--spacing-8) var(--spacing-16);
     font-size: var(--spacing-14);
-    font-weight: 400;
+    font-weight: var(--typography-fontWeight-normal);
     font-family: var(--typography-fontFamily-sans);
-    border-radius: 6px;
-    min-height: 34px;
+    border-radius: var(--radius-md);
+    min-height: var(--dimension-34px);
     min-width: 115px;
   }
 
   .button--medium {
     padding: var(--spacing-12) var(--spacing-20);
     font-size: var(--spacing-16);
-    font-weight: 400;
+    font-weight: var(--typography-fontWeight-normal);
     font-family: var(--typography-fontFamily-sans);
     border-radius: var(--radius-lg);
-    min-height: 45px;
+    min-height: var(--dimension-45px);
     min-width: 150px;
   }
 
   .button--large {
     padding: var(--spacing-16) var(--spacing-24);
     font-size: var(--spacing-18);
-    font-weight: 400;
+    font-weight: var(--typography-fontWeight-normal);
     font-family: var(--typography-fontFamily-sans);
     border-radius: var(--radius-lg);
-    min-height: 55px;
+    min-height: var(--dimension-55px);
     min-width: 150px;
   }
+
   .button--bold {
-    font-weight: 600;
+    font-weight: var(--typography-fontWeight-semibold);
   }
+
   .max--width {
     width: 100%;
     display: block;
   }
+
   .button.max--width {
     width: 100%;
   }
 
-.button,
-a.button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  text-decoration: none;
-  // color: white;
-  // border: none;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.2s ease,
-    box-shadow 0.2s ease;
-  gap: 10px;
-  vertical-align: middle;
-  line-height: 1;
-  box-sizing: border-box;
-}
-
-/* Pentru link-uri care sunt butoane */
-a.button {
-  text-decoration: none;
-}
-
-/* Asigură-te că slot-ul ocupă întreg spațiul */
-.button > ::slotted(*) {
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-}
+  /* Asigură-te că slot-ul ocupă întreg spațiul */
+  .button > ::slotted(*) {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button, .bd-contact-btn {
+      transition: none !important;
+    }
+  }
 `;

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

@@ -216,7 +216,9 @@ export const anchorNavStyles = css`
   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);
   }