@repobit/dex-system-design 0.24.18 → 0.24.19

package/src/components/footer/footer.css.js

@@ -9,7 +9,7 @@ export default css`
     font-size: var(--typography-body-small-fontSize);
     line-height: var(--typography-lineHeight-normal); 
   }
-.footer-nav-main a:focus,
+.footer-nav-main-container a:focus,
 .footer-links a:focus,
 .footer-countries-container a:focus,
 .country-toggle:focus,
@@ -21,14 +21,12 @@ export default css`
   border-radius: 4px;
 }
 
-/* Stiluri specifice pentru butoane */
 .country-toggle:focus,
 .close-countries-button:focus {
   border-color: var(--color-blue-500);
   box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
 }
 
-/* Stiluri pentru link-urile din containerul de țări */
 .footer-countries-container a:focus {
   border-color: var(--color-blue-500);
   box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
@@ -36,8 +34,7 @@ export default css`
   padding: 2px 6px;
 }
 
-/* Stiluri pentru link-urile din navigația principală */
-.footer-nav-main a:focus {
+.footer-nav-main-container a:focus {
   padding: 2px 6px;
   margin: -2px -6px;
 }
@@ -45,20 +42,12 @@ export default css`
 padding-top: var(--spacing-24);
 padding-bottom: var(--spacing-24);
 }
-.footer-nav-main-container {
-padding-top: var(--spacing-12);
-padding-bottom: var(--spacing-12);
-}
-/* Stiluri pentru link-urile din grupurile de link-uri */
 bd-footer-links-group a:focus {
   padding: 2px 6px;
   margin: -2px -6px;
   display: inline-block;
 }
 
-
-
-
   bd-divider-vertical {
     display: inline-block;
     width: var(--form-input-default-borderWidth);
@@ -85,14 +74,14 @@ bd-footer-links-group a:focus {
     background-color: var(--color-blue-500);
   }
 
-  .footer-nav-main {
+  .footer-nav-main-container {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: var(--spacing-16);
     flex-wrap: wrap;
-    padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
+    padding-top: var(--spacing-12);
+    padding-bottom: var(--spacing-12);
     font-size: var(--typography-body-regular-fontSize);
     font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
   }
@@ -106,7 +95,6 @@ bd-footer-links-group a:focus {
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-32);
-    // margin-bottom: var(--spacing-24);
     flex-wrap: nowrap;
     padding-top: var(--spacing-24);
     padding-bottom: var(--spacing-24);
@@ -119,7 +107,13 @@ bd-footer-links-group a:focus {
     gap: var(--spacing-16);
     padding-top: var(--spacing-24);
     padding-bottom: var(--spacing-24);
+  }
 
+  .secondary-nav-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-16);
   }
 
   .footer-middle-line > :last-child {
@@ -242,7 +236,6 @@ bd-footer-links-group a:focus {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.14286 1C2.40937 1 1 2.40937 1 4.14286V19.8571C1 21.5906 2.40937 23 4.14286 23H19.8571C21.5906 23 23 21.5906 23 19.8571V4.14286C23 2.40937 21.5906 1 19.8571 1H4.14286ZM18.7326 5.125L13.6353 10.9491L19.6312 18.875H14.9366L11.2634 14.0674L7.05491 18.875H4.72232L10.1732 12.6433L4.42277 5.125H9.23527L12.5598 9.52009L16.4 5.125H18.7326ZM16.8763 17.4804L8.53304 6.44598H7.1433L15.5799 17.4804H16.8714H16.8763Z" fill="white"/></svg>');
 }
 
-
   a {
     color: var(--color-neutral-0);
     text-decoration: none;
@@ -493,13 +486,13 @@ bd-footer-links-group a:focus {
 .footer-address{
   display: none !important;
   }
-  .footer-nav-main {
+  .footer-nav-main-container {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-8);
   }
 
-  .footer-nav-main bd-divider-vertical {
+  .footer-nav-main-container bd-divider-vertical {
     display: none !important;
   }
 
@@ -537,7 +530,7 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  .footer-nav-main a[slot="nav"] {
+  .footer-nav-main-container a[slot="nav"] {
     color: #151719 !important;
   }
 
@@ -545,17 +538,17 @@ bd-footer-links-group a:focus {
     margin-bottom: 10px;
   }
 
-  .second-nav .footer-nav-main {
+  .second-nav .footer-nav-main-container {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-14);
   }
 
-  .second-nav .footer-nav-main bd-divider-vertical {
+  .second-nav .footer-nav-main-container bd-divider-vertical {
     display: none !important;
   }
 
-  .second-nav .footer-nav-main a {
+  .second-nav .footer-nav-main-container a {
     color: #151719 !important;
     padding: var(--spacing-4) 0;
     display: block;
@@ -578,7 +571,7 @@ bd-footer-links-group a:focus {
     gap: var(--spacing-8);
   }
 
-  .second-nav.footer-nav-main {
+  .second-nav.footer-nav-main-container {
     display: inline-grid;
   }
 
@@ -620,7 +613,6 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* STILURI MODIFICATE PENTRU FOOTER-LINKS PE MOBILE */
   .footer-links {
     display: flex;
     flex-direction: column;
@@ -632,20 +624,16 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* QUICK LINKS - PRIMA POZIȚIE */
   .footer-links-left {
     order: 1;
   }
 
-  /* DIVIDER - ÎNTRE QUICK LINKS ȘI SOCIAL LINKS */
-  /* Targetăm divider-ul care este copil direct în .footer-links */
   .footer-links > bd-divider-horizontal {
     order: 2;
     margin: var(--spacing-16) 0;
     width: 100%;
   }
 
-  /* SOCIAL LINKS - A TREIA POZIȚIE (DUPĂ DIVIDER) */
   .footer-links-right {
     order: 3;
     display: flex;
@@ -654,7 +642,6 @@ bd-footer-links-group a:focus {
     margin-bottom: 0;
   }
 
-  /* STILURI PENTRU COMPONENTELE BD-FOOTER-LINKS-GROUP */
   bd-footer-links-group {
     width: 100% !important;
     min-width: 100% !important;
@@ -669,7 +656,6 @@ bd-footer-links-group a:focus {
     margin-bottom: var(--spacing-8) !important;
   }
 
-  /* GRID PENTRU QUICK LINKS */
   .footer-links-left bd-grid {
     display: flex !important;
     flex-direction: column !important;
@@ -696,7 +682,6 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  /* Divider-ul imediat după secondary-nav */
   .secondary-nav-container bd-divider-horizontal {
     margin-top: var(--spacing-16);
     margin-bottom: var(--spacing-16);
@@ -713,7 +698,6 @@ bd-footer-links-group a:focus {
   display: none;
 }
 
-/* Afișează divider-ul doar pe tablete */
 @media (min-width: 768px) and (max-width: 1024px) {
   .tablet-divider {
     display: block;
@@ -744,7 +728,6 @@ bd-footer-links-group a:focus {
     margin: var(--spacing-16) 0;
     width: 100%;
   }
-  /* Ascunde ultimul divider (cel din afara .footer-links) pe tablete */
   .footer-links + bd-divider-horizontal {
     display: none !important;
   }

package/src/components/footer/footer.js

@@ -241,7 +241,11 @@ export class BdFooter extends LitElement {
   }
 
   _updateNavLinks() {
-    const links = this.shadowRoot.querySelectorAll('.footer-nav-main bd-link');
+    // Fixed: the wrapping div in render() below is class
+    // "footer-nav-main-container", not "footer-nav-main" — the old
+    // selector never matched anything, so link hrefs were never updated
+    // when the locale changed.
+    const links = this.shadowRoot.querySelectorAll('.footer-nav-main-container bd-link');
     const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
     const currentLocale = this.locale;
 

package/src/components/header/header-code.css.js

@@ -4,6 +4,32 @@ export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
+    position: relative;
+    background-color: var(--color-neutral-0, #fff);
+    overflow: hidden; /* clips the ::after floor grid, which extends past the edges */
+  }
+
+  :host([variant="tint"]) {
+    background-image: radial-gradient(ellipse 900px 560px at 84% 8%, rgba(59, 130, 246, 0.16), transparent 65%);
+    background-repeat: no-repeat;
+  }
+
+  :host([variant="tint"])::after {
+    content: "";
+    position: absolute;
+    left: -20%;
+    right: -20%;
+    bottom: -38%;
+    height: 72%;
+    transform-origin: 50% 0;
+    transform: perspective(620px) rotateX(64deg);
+    background:
+      linear-gradient(#006dff1a 1px, #0000 1px) 0 0 / 100% 44px,
+      linear-gradient(90deg, #006dff1a 1px, #0000 1px) 0 0 / 44px 100%;
+    -webkit-mask-image: linear-gradient(#0000 0%, #000 45%, #0000 100%);
+    mask-image: linear-gradient(#0000 0%, #000 45%, #0000 100%);
+    pointer-events: none;
+    z-index: 0;
   }
 
   .bd-headercode-container {
@@ -15,6 +41,8 @@ export default css`
     margin: 0 auto;
     padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
     box-sizing: border-box;
+    position: relative;
+    z-index: 1;
   }
 
   /* === ENTRANCE ANIMATION === */
@@ -53,9 +81,6 @@ export default css`
     gap: var(--spacing-16);
   }
 
-  /* Slot for a small breadcrumb-style line above the eyebrow
-     (e.g. "Bitdefender AI    skill-scanner"). Empty by default —
-     collapses to nothing when no content is slotted in. */
   .bd-headercode-breadcrumb {
     display: flex;
     flex-wrap: wrap;
@@ -89,45 +114,200 @@ export default css`
   }
 
   .bd-headercode-cta {
-    display: flex;
+    display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--spacing-16);
     margin-top: var(--spacing-8);
   }
 
-  /* Slot for a small status badge next to the CTA buttons (e.g. "AVAILABLE").
-     Empty by default — collapses to nothing when no content is slotted in. */
   .bd-headercode-badge {
     display: inline-flex;
     align-items: center;
-    color: var(--color-neutral-500);
+    color: var(--color-neutral-600);
     font-family: var(--typography-fontFamily-mono, monospace);
     font-size: var(--typography-fontSize-xs, 12px);
     letter-spacing: 0.05em;
+    padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    border-radius: var(--radius-full, 999px);
+    background: var(--color-neutral-0, #fff);
   }
 
   .bd-headercode-badge:not(:has(*)) {
     display: none;
   }
 
+  .bd-headercode-meta {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .bd-headercode-meta-spec {
+    color: var(--color-neutral-500);
+    margin: 0;
+    padding-top: var(--spacing-16);
+  }
+
+  .bd-headercode-meta-facts {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: var(--spacing-8) var(--spacing-32);
+    margin-top: var(--spacing-40);
+    padding-top: var(--spacing-24);
+    border-top: 1px solid var(--color-neutral-100);
+  }
+
+  .bd-headercode-meta-fact {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-8, 8px);
+    white-space: nowrap;
+  }
+
+  .bd-headercode-meta-fact-label {
+    margin: 0;
+    color: var(--color-neutral-400);
+    text-transform: uppercase;
+  }
+
+  .bd-headercode-meta-fact-value {
+    margin: 0;
+    color: var(--color-neutral-900);
+  }
+
+  @media (max-width: 480px) {
+    .bd-headercode-meta-facts {
+      grid-template-columns: repeat(2, auto);
+    }
+  }
+
   /* === RIGHT COLUMN === */
   .bd-headercode-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: var(--spacing-8);
+    position: relative;
   }
 
-  .bd-headercode-right ::slotted(*) {
+  /* === 3D SCENE === */
+  .bd-headercode-scene {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    perspective: 1300px;
+    min-height: 400px;
+    padding: var(--spacing-16, 16px) 0;
+    margin: 0;
+    position: relative;
+  }
+
+  .bd-headercode-stack {
+    position: relative;
     width: 100%;
     max-width: 520px;
-    box-shadow: 0 1px 2px #0003,0 18px 48px #000a1e73
+    transform-style: preserve-3d;
+  }
+
+  :host([variant="tint"]) .bd-headercode-stack {
+    transform: perspective(1300px)
+      rotateY(var(--ry, -10deg))
+      rotateX(var(--rx, 6deg))
+      rotateZ(1deg);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([variant="tint"]) .bd-headercode-stack {
+      transition: none;
+    }
+  }
+
+  .bd-headercode-right ::slotted(*) {
+    display: block;
+    width: 100%;
+    box-shadow: 0 1px 2px #0003, 0 18px 48px #000a1e73;
+    position: relative;
+    z-index: 1; /* sits above the rings */
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([variant="tint"]) .bd-headercode-stack {
+      transform: none;
+    }
   }
 
   .bd-headercode-terminal-caption {
     color: var(--color-neutral-500);
     margin: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .bd-headercode-rings {
+    position: absolute;
+    inset: 0;
+    transform-style: preserve-3d;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .bd-headercode-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 28px;
+    border: 1.5px solid rgba(0, 109, 255, calc(0.5 - var(--d) * 0.08));
+    background: rgba(0, 109, 255, calc(0.05 - var(--d) * 0.008));
+    box-shadow: 0 0 26px rgba(0, 109, 255, calc(0.16 - var(--d) * 0.025));
+    animation: bd-headercode-ring-breathe 6s ease-in-out calc(var(--d) * -1.2s) infinite;
+    transform: translate(calc(var(--d) * 10px), calc(var(--d) * 8px));
+  }
+
+  @keyframes bd-headercode-ring-breathe {
+    0%, 100% {
+      opacity: 0.85;
+    }
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bd-headercode-ring {
+      animation: none;
+    }
+  }
+
+  /* === FLOATING ANNOTATION PILLS === */
+  .bd-headercode-annotation {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .bd-headercode-annotation--top {
+    top: -14px;
+    right: 32px;
+  }
+
+  .bd-headercode-annotation--bottom {
+    bottom: -14px;
+    left: 16px;
+    right: auto;
+  }
+
+  .bd-headercode-annotation:not(:has(*)) {
+    display: none;
+  }
+
+  .bd-headercode-annotation ::slotted(*) {
+    width: auto;
+    max-width: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    pointer-events: auto;
   }
 
   /* === RESPONSIVE === */
@@ -142,12 +322,30 @@ export default css`
       align-items: stretch;
     }
 
-    .bd-headercode-right ::slotted(*) {
+    .bd-headercode-scene {
+      min-height: 0;
+      perspective: none;
+      justify-content: stretch;
+    }
+
+    .bd-headercode-stack {
       max-width: none;
     }
 
+    :host([variant="tint"]) .bd-headercode-stack {
+      transform: none;
+    }
+
+    .bd-headercode-rings {
+      display: none;
+    }
+
     .bd-headercode-description {
       max-width: none;
     }
+
+    .bd-headercode-annotation {
+      display: none;
+    }
   }
 `;

package/src/components/header/header-code.js

@@ -11,7 +11,11 @@ class HeaderCode extends LitElement {
     eyebrow        : { type: String },
     title          : { type: String },
     description    : { type: String },
-    terminalCaption: { type: String, attribute: "terminal-caption" }
+    terminalCaption: { type: String, attribute: "terminal-caption" },
+    variant        : { type: String, reflect: true },
+    metaSpec       : { type: String, attribute: "meta-spec" },
+    metaFacts      : { type: Array },
+    _hasBadge      : { state: true }
   };
 
   static styles = [tokens, headerCodeCSS];
@@ -22,6 +26,131 @@ class HeaderCode extends LitElement {
     this.title = "";
     this.description = "";
     this.terminalCaption = "";
+    this.variant = "default";
+    this.metaSpec = "";
+    this.metaFacts = [];
+    this._hasBadge = false;
+
+    this._scene = null;
+    this._onPointerMove = this._onPointerMove.bind(this);
+    this._onPointerLeave = this._onPointerLeave.bind(this);
+  }
+
+  firstUpdated() {
+    this._bindScene();
+  }
+
+  updated(changed) {
+    if (changed.has("variant")) this._bindScene();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unbindScene();
+  }
+
+  _bindScene() {
+    this._unbindScene();
+    if (this.variant !== "tint") return;
+
+    this._scene = this.shadowRoot?.querySelector(".bd-headercode-scene") || null;
+    if (!this._scene) return;
+
+    this._scene.addEventListener("pointermove", this._onPointerMove);
+    this._scene.addEventListener("pointerleave", this._onPointerLeave);
+  }
+
+  _unbindScene() {
+    if (!this._scene) return;
+    this._scene.removeEventListener("pointermove", this._onPointerMove);
+    this._scene.removeEventListener("pointerleave", this._onPointerLeave);
+    this._scene = null;
+  }
+
+  _onPointerMove(event) {
+    const rect = this._scene.getBoundingClientRect();
+    const px = (event.clientX - rect.left) / rect.width - 0.5;
+    const py = (event.clientY - rect.top) / rect.height - 0.5;
+
+    const ry = px * 18; // deg
+    const rx = -py * 12; // deg
+
+    this.style.setProperty("--rx", `${rx.toFixed(2)}deg`);
+    this.style.setProperty("--ry", `${ry.toFixed(2)}deg`);
+  }
+
+  _onPointerLeave() {
+    this.style.removeProperty("--rx");
+    this.style.removeProperty("--ry");
+  }
+
+  _onBadgeSlotChange(event) {
+    this._hasBadge = event.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
+
+  _renderRings() {
+    if (this.variant !== "tint") return nothing;
+
+    return html`
+      <div class="bd-headercode-rings" aria-hidden="true">
+        <span class="bd-headercode-ring" style="--d:1"></span>
+        <span class="bd-headercode-ring" style="--d:2"></span>
+        <span class="bd-headercode-ring" style="--d:3"></span>
+        <span class="bd-headercode-ring" style="--d:4"></span>
+        <span class="bd-headercode-ring" style="--d:5"></span>
+      </div>
+    `;
+  }
+
+  _renderBadge() {
+    const badgeSlot = html`<slot name="badge" @slotchange=${this._onBadgeSlotChange}></slot>`;
+
+    return this._hasBadge
+      ? html`<span class="bd-headercode-badge">${badgeSlot}</span>`
+      : html`<span class="bd-headercode-badge-slot-holder" hidden>${badgeSlot}</span>`;
+  }
+
+  _renderMeta() {
+    const hasSpec = !!this.metaSpec;
+    const hasFacts = this.metaFacts && this.metaFacts.length > 0;
+
+    if (!hasSpec && !hasFacts) return nothing;
+
+    const monoFontFamily = "'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+
+    return html`
+      <div class="bd-headercode-meta">
+        ${hasSpec
+          ? html`<bd-p
+              kind="xsmall"
+              class="bd-headercode-meta-spec"
+              font-family=${monoFontFamily}
+              letter-spacing=".1em"
+            >${this.metaSpec}</bd-p>`
+          : nothing}
+
+        ${hasFacts
+          ? html`
+              <div class="bd-headercode-meta-facts">
+                ${this.metaFacts.map(
+                  (fact) => html`
+                    <div class="bd-headercode-meta-fact">
+                      <bd-p
+                        kind="xsmall"
+                        class="bd-headercode-meta-fact-label"
+                        font-family=${monoFontFamily}
+                        letter-spacing=".1em"
+                      >${fact.label}</bd-p>
+                      <bd-p kind="regular" font-weight="700" class="bd-headercode-meta-fact-value">${fact.value}</bd-p>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
   }
 
   render() {
@@ -47,14 +176,28 @@ class HeaderCode extends LitElement {
           <div class="bd-headercode-cta">
             <slot name="primary-button"></slot>
             <slot name="secondary-button"></slot>
-            <span class="bd-headercode-badge">
-              <slot name="badge"></slot>
-            </span>
+            ${this._renderBadge()}
           </div>
+
+          ${this._renderMeta()}
         </div>
 
         <div class="bd-headercode-right">
-          <slot name="terminal-content"></slot>
+          <div class="bd-headercode-annotation bd-headercode-annotation--top">
+            <slot name="annotation-top"></slot>
+          </div>
+
+
+          <div class="bd-headercode-scene">
+            <div class="bd-headercode-stack">
+              ${this._renderRings()}
+              <slot name="terminal-content"></slot>
+            </div>
+          </div>
+
+          <div class="bd-headercode-annotation bd-headercode-annotation--bottom">
+            <slot name="annotation-bottom"></slot>
+          </div>
 
           ${this.terminalCaption
             ? html`<bd-p kind="small" class="bd-headercode-terminal-caption" font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"