@repobit/dex-system-design 0.23.9 → 0.23.11

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.11](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.10...@repobit/dex-system-design@0.23.11) (2026-04-01)
+
+### Bug Fixes
+
+* **DEX-1014:** fix gap and card sizes
+* **DEX-1014:** new changes for anchor-nav and compare to solve some issues
+
+
+## [0.23.10](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.9...@repobit/dex-system-design@0.23.10) (2026-03-31)
+
+### Bug Fixes
+
+* **DEX-1014:** quick changes on multiple components
+
+
 ## [0.23.9](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.8...@repobit/dex-system-design@0.23.9) (2026-03-31)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.9",
+  "version": "0.23.11",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -86,5 +86,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "fd4b2919ca814aa5bbb2f9ee9b1b3c3e21ed0e20"
+  "gitHead": "d585162a40165e7aa8f96463433be03d5aef2f05"
 }

package/src/components/accordion/accordion-indicators.js

@@ -0,0 +1,2 @@
+export const ACCORDION_ICON_PLUS  = "/assets/plus-fill.svg";
+export const ACCORDION_ICON_MINUS = "/assets/minus-fill.svg";

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

@@ -1,92 +1,341 @@
 import { css } from "lit";
 
 export const anchorNavStyles = css`
- :host {
-  padding: var(--spacing-0) 15em;
-  margin: var(--spacing-0) auto;
-  --bd-accesibility-focus: var(--color-blue-500);
-}
-
-.bd-container {
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 2.5em;
-}
-
-a:focus-visible {
-  outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-  outline-offset: var(--spacing-2);
-  border-radius: var(--space-2xs);
-}
-
-nav {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid #f0f0f0;
-  border-bottom: 1px solid #f0f0f0;
-  padding: var(--spacing-10) 15em;
-  width: 100%;
-  box-sizing: border-box;
-  background: white;
-  margin-bottom: var(--spacing-64);
-}
-
-.bd-container {
-  padding: 50px;
-}
-
-
-[id$="-section"] {
-  scroll-margin-top: 120px;
-}
-
-.anchor-links {
-  position: relative;
-  display: flex;
-  gap: var(--spacing-32);
-}
-
-a {
-  position: relative;
-  text-decoration: none;
-  color: black;
-  font-weight: 600;
-  padding: var(--spacing-10) var(--spacing-0);
-  display: inline-block;
-  font-size: var(--typography-body-regular-fontSize) !important;
-  font-family: var(--typography-fontFamily-sans) !important;
-}
-
-a::after {
-  content: "";
-  position: absolute;
-  left: var(--spacing-0);
-  bottom: -14px;
-  width: 0%;
-  height: 3px;
-  background-color: #006dff;
-  transition: width 0.3s ease;
-}
-
-a.active::after {
-  width: 100%;
-}
-
-`;
-
-export const anchorNavItemStyles = css`
   :host {
-    display: none;
+    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);
   }
 
-  :host([active]) {
+  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);
+  }
+
+  nav {
     display: block;
-    padding: var(--spacing-0) 15em;
-    margin: var(--spacing-0) auto;
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bd-anchor-nav__inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-32);
+    width: 100%;
+    max-width: var(--layout-compare-grid-max);
+    margin-inline: auto;
+    box-sizing: border-box;
+  }
+
+  .anchor-links {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16) var(--spacing-32);
+    row-gap: var(--spacing-8);
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .anchor-links--desktop {
+    display: flex;
+  }
+
+  .bd-anchor-nav__dropdown {
+    display: none;
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ── Dropdown toggle ── */
+
+  .bd-anchor-nav__dropdown-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-12);
+    width: 100%;
+    min-height: var(--dimension-48px);
+    padding-block: var(--spacing-10);
+    padding-inline: var(--spacing-16);
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+    background: var(--color-neutral-25);
+    border: var(--border-width-1) solid var(--color-neutral-200);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      background var(--transition-duration-fast) var(--transition-easing-smooth),
+      border-color var(--transition-duration-fast) var(--transition-easing-smooth),
+      border-radius var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-toggle:hover {
+    background: var(--color-neutral-50);
+    border-color: var(--color-neutral-300);
+  }
+
+  .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 {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform-origin: left center;
+  }
+
+  .bd-anchor-nav__dropdown-chevron {
+    flex: 0 0 auto;
+    display: flex;
+    color: var(--color-neutral-600);
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-toggle[aria-expanded="true"] .bd-anchor-nav__dropdown-chevron {
+    transform: rotate(180deg);
+    color: var(--color-blue-500);
+  }
+
+  /* ── Dropdown panel ── */
+
+  .bd-anchor-nav__dropdown-panel {
+    position: absolute;
+    left: var(--spacing-0);
+    right: var(--spacing-0);
+    top: 100%;
+    z-index: 1001;
+    max-height: min(50vh, 20rem);
+    overflow-y: auto;
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-blue-200);
+    border-top: none;
+    border-radius: var(--spacing-0) var(--spacing-0) var(--radius-lg) var(--radius-lg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .bd-anchor-nav__dropdown-list {
+    list-style: none;
+    margin: var(--spacing-0);
+    padding: var(--spacing-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+
+  /* ── Dropdown options ── */
+
+  .bd-anchor-nav__dropdown-option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: var(--dimension-48px);
+    padding-block: var(--spacing-12);
+    padding-inline: var(--spacing-16);
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-fontWeight-normal);
+    color: var(--color-neutral-900);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      color var(--transition-duration-fast) var(--transition-easing-smooth),
+      background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__dropdown-option:hover:not(.bd-anchor-nav__dropdown-option--active) {
+    color: var(--color-blue-500);
+    background: var(--color-neutral-25);
+  }
+
+  .bd-anchor-nav__dropdown-option--active {
+    font-weight: var(--typography-fontWeight-semibold);
+    background: var(--color-blue-50);
+    color: var(--color-blue-700);
+  }
+
+  .bd-anchor-nav__dropdown-option--active:hover {
+    color: var(--color-blue-700);
+    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);
+  }
+
+  a.active:hover {
+    color: var(--color-neutral-900);
+  }
+
+  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);
+    font-weight: var(--typography-fontWeight-semibold);
+    line-height: var(--typography-lineHeight-normal);
+    padding: var(--spacing-10) var(--spacing-20);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    background: var(--color-red-500);
+    color: var(--color-neutral-0);
+    transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-anchor-nav__cta:hover {
+    background: var(--color-red-600);
+  }
+
+  .bd-anchor-nav__cta:active {
+    background: var(--color-red-700);
+  }
+
+  /* ── Animations ── */
+
+  @keyframes bd-anchor-nav-dropdown-label-swap {
+    from {
+      opacity: 0.35;
+      transform: translateY(var(--spacing-4));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(var(--spacing-0));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    a::after,
+    .bd-anchor-nav__dropdown-chevron,
+    .bd-cta,
+    .bd-anchor-nav__dropdown-label--swap {
+      animation: none !important;
+    }
+  }
+
+  /* ── 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;
+    }
+
+    .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)
+        var(--transition-easing-smooth);
+    }
+
+    .bd-cta {
+      align-self: stretch;
+      display: block;
+      overflow: hidden;
+      max-height: var(--spacing-0);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--spacing-8)));
+      pointer-events: none;
+      margin-top: calc(-1 * var(--spacing-16));
+      transition:
+        max-height var(--transition-duration-slow) var(--transition-easing-ease-out),
+        opacity var(--transition-duration-normal) var(--transition-easing-smooth),
+        transform var(--transition-duration-normal) var(--transition-easing-smooth),
+        margin-top var(--transition-duration-normal) var(--transition-easing-smooth);
+    }
+
+    .bd-anchor-nav__inner[data-mobile-cta-visible] .bd-cta {
+      max-height: var(--spacing-128);
+      opacity: 1;
+      transform: translateY(var(--spacing-0));
+      pointer-events: auto;
+      margin-top: var(--spacing-0);
+    }
+
+    .bd-anchor-nav__cta {
+      width: 100%;
+      box-sizing: border-box;
+    }
   }
-`;
+`;